/* ==========================================================================
   Simply Andy: portfolio
   Brand kit: Cuaderno + Terracota palette, Big Shoulders (display) / Manrope (text).
   https://fpdev47.github.io/simply-andy-brand-kit/

   The one bold idea: the Cuero dot from the logo is the site's actor. It is the
   loader, the caret that types the hero headline, the REC light on every reel,
   the marker under the active nav link, the step marker in the process, and the
   full stop after "let's talk". Everything around it stays flat and quiet.
   ========================================================================== */

/* Logo fonts: subsets of Archivo 700 ("andy") and DM Mono ("UGC CREATOR"),
   embedded so the wordmark and its dot line up identically everywhere. */
@font-face {
  font-family: 'AndyLogoDisplay';
  font-weight: 700;
  font-display: block;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAdAAA8AAAAADIwAAAbmAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgmocWgZgP1NUQVRaAIEMEQgKihiIKQsgAAE2AiQDPAQgBYRQByAbdgpRFPOBTCNl4fz94IG+uXwzuwthN3ZXTIKoXODUQsUQD2Z/0Dq5v6papOI+U3nYpnW2gpRK+Hn+R+Xuf63l82qSREu8Gv/OzgFzIhoR1aSdR0hUmkszqYREJREJuaIibuRigni5Fh3rigDsWBmJ0H2O/DpgkkMVsmvTjgM4/T1zE5so+jl1/4oOYwMzE9hqPjXpSGwVkYoJ35OXDfuVIDGYRAn1Yyn5XPWj+rX3T6BuVJ9dsh4/oSyr/kFC/asu6dubq+pX9e+QnEJ/QP69+r2PulV9ru5XN4KBgaGmPkVyAUvL2LGryAss0MdhAXtFYSCIJgbtVH87AgONKIWiEZCP8+mHIcoJ1l9ETgU8ZFlTg1fi4fzK5oMbPGod13W8c9jon+zze1jC9IAMJ+Gqy73yQYyKfFCuGf5D5RbiPar4mwu61K7twfPNYu4D7N65ayuX4mFZm1BloO8Q53sQZxyuSKe8GQHPUjvb0IDYvF8JcrF/blgoN1wcGp4TIEbmevwiGUkW8UQpzRIpUjgQ0YywyQf7zVIk0P8RhiCFg+ZYdJYyybiNu5t42EAnG9nMbvZxkB76mWCZmQkOux24s/pePaoeUQ+rh9Td6k51h7pWXa0uUmeQTynqLBBK4aohV0B6QwJ6iatA5r5aUALGzxMQn82YkuGboGuaptkcWfZid7zLtMVWOeMPS04vtgyH3uvwHej2DWgHyrrt1pg1YvrsB7ot39nnX3xxvHnupRfG9qyFw2I1YgVCIczVcNhcCwZhJRSyApGIsFaCQctwYceRRnvWzuR10DM33/+0HnpVP/AJIUzhkKbv2mDwrqhfsRIM+gKRNyJCrIZfD1/e9FrIMhyn7rzlCNNnolmBN8TqzfebpmWYwoWp36OqWXKFmq86BoMH155+/nHaqyKWWL34fnPtzmvhA9qU+6gXgxwMQtAwj5atjrKhI8f3zuVrY1MIUnZ/DnKwBcdxnXawwgoRSIQ6oeP3TuVXU5P3Ta76zrXBF5AYOsKxq7M7fiIBSpjbNbqIlh1PAwLHskMmBJavTbF7QcfW3l5W2Nzd3c3sDF067q+X3ReBOdgCLD+bgx4dWT/GJeQ6scE9GP6b31usf13vl3XA8KMbDMfw6n84hj9iuAMgIZ1YJp3olSkSlylyxx80RtQmFwasSPQ+41YgC4Y3m1l1ps1PT/a6lKvbJLs3yQjpGvFJ69jJCvkYcZsI+9jI6MiZ8grrytS4WyWXqwGLSYG0qlafVJ/hhnSQD/smxxdT7Tu6LWL0EzndNOU8dJq5p/6/8ClYsgmx2ipxmYt7O0vpKtnxvJMkvYjzjfejMH00ELSnA+UwstPSvjM51b6j0yIyusPCviM12b6zwzIqVdaUnZnVRoFbkdWWyZRdVsaUnYnFVpFbgcWG2ZQdWEymWAQoyvpo66sHlZXTDab82vodcyXJJM3l1sh9Bb7JPmZaZz7JggToVaRunOI21jRsZmllamplZTbcNOZmnFKkDk4h25gWKqUsbewikk5tLsz8ps/LW01GTVFMRE4qpawXyG9g6ieoYKrygU6Hkte9oY2Lc/vZkZSIWoeWKIRj+pGchVPFmYqfh46VE/yCul5q8qne3gopHqoeWrNufuX3KBV4Y8bcFH3e/oLo6XwtobN8ffZzd5+ZVuSO81YlVMVtcNPhnDU3Ryfl/pJXszO3aK/3+MC2pNsHk+Iy0u7IqibwQK7Zc2xr0kKw/yXHGUf8vOfj37uM1rOuubJ12y+Hbv/1m7wdTZs85D/Q1ZdZ661ynhZ7+GhiUcvphWVG/Md35Ow51tfXGShOut33V2xm2VM5rkOhtqyjOpqPTQckDy/ETsG79/33zjzO1fKbTdO+hPGd/1Jv2/PdhvZ1Kvb/UcOrbxbVQSkKUdBu2xhUsf9lGl6B9JUuGWCHDBIl36NU3sAOLYtqLYlS+TY75CpJ8lu2yC4y5fHkySPpkNnocoqtPCla27sYI5rNmIAW+1knNwvaiB5jFq7l7xakVOBbgGwPfAq7Rhl323USudhukMxJ9igS8duc1NDgFdI0UAK7wCRrjo26m0jATjwEyRKTUoyTYB+TjNPDBFuZM/byM0Ifu5hk5tBOfroZoZ85hn0aMGkI4N9kjjmmaKKccmbpY4YRk+Y8KgNDzk8ZwUlDlLObTexgAzP0mXcbYYFJSvEyiZ9+fAwwc/lvTTKBhyrKqKCCSkPmGXPypzWzm53sYivN1HXlBKeo08hNsTxlXA4M6qtIO3s4wDAD0m+CwTN7mDEbRxmg7+LcBuaZgEW2zuKhgJXArJkbYuRkZp5ez9fHNbDx18aZYIRe5pmllAMsM8UA5YP5CiU3Z2+q/JRIVQA=) format('woff2');
}

@font-face {
  font-family: 'AndyLogoMono';
  font-weight: 500;
  font-display: block;
  src: url(data:font/woff2;base64,d09GMgABAAAAAATcAA4AAAAACMgAAASJAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbHhwoBmAAgQwRCAqHHIVsCx4AATYCJAMeBCAFhA4HIBsBB8gEHv7507of0X9J21kwc04KIigRTFIxFZZWZs1iYf+fv5zeB+sElmCp3djvfpP2pB/NgQHHAZ01JhZN8kAjDwizqF1zAXppMxqRACtKWEYSwRqWQcOOZslT19KDGbU0pOsUxTKTeJBB7jIztDJHlDRAWa/KAelXDCCfKAdgN8c8qZ88KW2NLIwWVZZUScGiCSfgrmPX1ODgAOXD/58H5UOpyAFnsbT0oxyBAKkFkiVm7iaBBFpl/2f3IQYFDQdO3NRSTztdeBlilDkOmNuQYreem/Xv9Ef1R/SH9Z36vfrd+l369fq1+iX6Wb2P5ZASkq4TzZRdQHZjV1iSj49sgdU9VmSflGrS7wFVNat2a3yMNdpi3s2u7Wbd3SIMNnXYZrCKAdGn+bSegYAIDp24uSkdsbUlTtrwalduaieuc/iGOGkrXqyvC4MNKzas2BiifPzGVrwmCVnzaTevd3Ngg8PX130nbUlHmNhQ0NazQwtqsiKKWzVh0CQbmtouqgh5XDmJra97+2oVQjpCO/FFu9arzTgp30lb8aAi8ztHLGQqQq3oG7WuCK+4rZmtFPybZG9IC4odITEZiFwfGaq2V9ixv/rQoa8+tJx13btZ112Q2JVyc1cKmSJw4I6aK2dma648KOhfPOZAbXL12LqGqnb/SQcd6D+xvcbtOnc1evyINToijwx4XyzuL173DhAn2lYDzivmZ51XHBj0TR66aJtYPsdVXdjpPenAw4LHNub+FRvMOyvw//7Dxj5jZX056cJ7kN95xcKC84qD/F7fgX7nFQsLzisO9HtHmkPHHnZY6NjmluCxhx0WPJbmyGdd4eKC/gqPZ7JuzzPjDzpmt+XdV1cbXNUFhc6qphX+6IsMfDwQ6SNV1M+VVq+FIuHHO5p9Llezr+PxcCTkXFso5X9R3p6S7EltDHcOHy4WJtOvPj9sal0LhuZGpgdyg+YGU5czNzPgrGnLWCn9NDb2U2JE1VBZybLXW7o8XFZZ2pgW4wi/GjI3GIsaMuNGS5va2zua2kpLm9o72pvaaPux19xoyO/OLQ6FZqfjw3tU5btLihsa68yc+s6quv3Rp5fPCl8cni97AeAPuCSBqffzmIHoit/M0cqXdvbtUwODsSty1gDv/2/kW5UXQhhfqkxWXrT0Dyz/P1W+9U29J8kBAtjZhw62szfNlFNACyW0kfz3OIuiBSNdqC1B+QsiZsblgGqR47fyd85I2HmfkYniVUYhg6vn1WrGgI82xsg+FNwbRQEwyQorLFBGNtksM8ISUyywAjqL5XtnyGKeJSbIpp06WvDQSivzzDFPJrdujFGmWGUWHwdLLaQK0kEuWeS40XIco6wbZ4hVVphnUkJzVQcprJHMEvObeWRRSD6ZFDHKGHmk9rCqmzrKR0ddrROsMsMQSxSfQ/Z0kG7mWeCAtcLEHlQd5JHjO3fQwyRjOFpv62CJecKMMUIG50pgcndg2dB2Ey/LsJ9bzWKCKVJ4lWHeHJHNWWyfYJ55JphhjHFIu25mG/QsmcqYkHoXRDWvX0zevRl0AAA=) format('woff2');
}

/* Brand fonts, self-hosted (Latin subset) so the first paint doesn't wait on a
   third-party stylesheet. Both files are variable; each weight the design uses
   is declared on its own, exactly as Google Fonts serves them, so a request for
   an in-between weight snaps to the same face it always did. */
@font-face { font-family: 'Big Shoulders'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/big-shoulders-latin.woff2) format('woff2'); }

@font-face { font-family: 'Big Shoulders'; font-style: normal; font-weight: 800; font-display: swap; src: url(../assets/fonts/big-shoulders-latin.woff2) format('woff2'); }

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/manrope-latin.woff2) format('woff2'); }

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/manrope-latin.woff2) format('woff2'); }

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/manrope-latin.woff2) format('woff2'); }

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/manrope-latin.woff2) format('woff2'); }

:root {
  /* One leading for every display title, so all headings breathe the same. */
  --lh-title: 1;

  /* Palette: six brand HEX values, used solid (no tints, no gradients). */
  --eggshell: #E9E2D0;   /* 45%: default background */
  --tinta: #2A2620;      /* 20%: text, dark reels */
  --cuero: #864C24;      /* 15%: identity + accent, always with light text on it */
  --oliva: #61603A;      /* 10%: warm second accent in small doses */
  --bordo: #51091B;      /*  7%: premium blocks (contact) */
  --terracota: #8F3F23;  /* extra accent, Andy's favorite: hero block, markers */
  --indigo: #1F2C44;     /*  3%: metadata, small secondary text */
  --white: #FFFFFF;      /* utility only: web cards and video captions */

  --line: rgba(42, 38, 32, .12);
  --line-strong: rgba(42, 38, 32, .28);

  --display: "Big Shoulders", "Arial Narrow", Arial, sans-serif;
  --body: "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* Corner scale from the kit: five sizes, nothing else. */
  --r-xs: 6px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --wrap: 1180px;
  --gutter: 20px;
  --header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--eggshell);
  color: var(--tinta);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;  /* hides sideways overflow without becoming a scroll container (keeps sticky working) */
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--cuero); color: var(--eggshell); }

@media (max-width: 560px) {
  @keyframes dm-sheet { from { transform: translateY(100%); } }
  :root { --gutter: 16px; --header-h: 58px; }
  body { font-size: 16px; }
}

/* ---------- Type ---------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: var(--lh-title);
  letter-spacing: -.01em;
}

/* Brand highlight: a marker stroke behind the letters, which keep their own
   color. With JS it draws in when it enters view (motion.js adds .is-drawn).
   Variants only change the stroke: --hlx (ink), --hl-h (height), --hl-y (position). */
.hl {
  --hlx: color-mix(in srgb, var(--cuero) 58%, transparent);
  --hl-h: 42%;
  --hl-y: 96%;
  color: inherit;
  background: linear-gradient(var(--hlx), var(--hlx)) no-repeat 0 var(--hl-y) / 100% var(--hl-h);
  padding: 0 .08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Lede: a quieter Tinta marker that doesn't compete with the title's. */
.hl--soft {
  --hlx: rgba(42, 38, 32, .55);
  --hl-h: 38%;
  --hl-y: 94%;
  color: var(--eggshell);
  font-weight: 700;
}

/* Pen marker: a solid stroke, and each marked letter switches to --pen-ink as
   the stroke reaches it (per-letter delays in motion.js, so the sweep is linear). */
.hl--pen {
  --hlx: var(--eggshell);
  --hl-h: 55%;
  --hl-y: 92%;
  padding: 0 .1em;
  margin: 0 -.02em;
  border-radius: .12em;
  color: var(--pen-ink, var(--tinta));
}

/* On dark or colored fields the pen covers the whole letter, so no part of a
   glyph is left in the background color. */
.hl--pen-terra, .hl--pen-bordo, .hl--pen-key { --hl-h: 86%; --hl-y: 62%; }
.hl--pen-terra { --hlx: var(--terracota); --pen-ink: var(--eggshell); }
.hl--pen-bordo { --hlx: var(--eggshell); --pen-ink: var(--bordo); }
.hl--pen-key { --hlx: var(--eggshell); --pen-ink: var(--terracota); padding: 0 .06em; }
.js .hl { background-size: 0% var(--hl-h); transition: background-size .9s var(--ease-out); }
.js .hl--soft { transition: background-size .8s cubic-bezier(.65, 0, .35, 1); }
.js .hl--pen { color: inherit; transition-timing-function: linear; }
.js .hl.is-drawn { background-size: 100% var(--hl-h); }
.js .hl--pen .ch { transition: color .12s linear; }
.js .hl--pen.is-drawn .ch { color: var(--pen-ink, var(--tinta)); }

:focus-visible {
  outline: 2.5px solid var(--cuero);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ---------- Buttons ---------- */

.btn {
  --dot: var(--cuero);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-height: 50px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-family: var(--body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease-out), gap .35s var(--ease-out);
}

.btn-primary { --dot: var(--terracota); background: var(--tinta); color: var(--eggshell); }
.btn-ghost { border: 1.5px solid var(--tinta); color: var(--tinta); }
.btn-ghost--light { --dot: var(--eggshell); border-color: var(--eggshell); color: var(--eggshell); }
.btn-accent { --dot: var(--eggshell); background: var(--cuero); color: var(--eggshell); }
.btn-lg { min-height: 60px; padding: 0 32px; font-size: 17px; }
/* Data CTA (hero, to the numbers): an Eggshell pill. */
.btn-data { gap: 10px; background: var(--eggshell); color: var(--tinta); }

/* Hover: the brand dot rolls in ahead of the label. */
.btn::before {
  content: "";
  width: 0;
  height: 9px;
  border-radius: 50%;
  background: var(--dot);
  transform: scale(0);
  transition: width .35s var(--ease-out), transform .35s var(--ease-spring);
}
.btn:hover { gap: 10px; }
.btn:active { transform: scale(.97); }
.btn-ghost:hover { background: var(--white); }
.btn-ghost--light:hover { background: var(--eggshell); color: var(--terracota); --dot: var(--terracota); }

.btn-data:hover { background: var(--white); }
.btn:hover::before { width: 9px; transform: scale(1); }
.cta-arrow { animation: cta-nudge 1.4s ease-in-out infinite; }

@keyframes cta-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(5px); } }

/* Pulsing dot used inside CTAs. */
.cta-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--eggshell); animation: cta-dot 1.4s ease-in-out infinite; }

@keyframes cta-dot { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(233, 226, 208, .7); } 50% { transform: scale(.75); box-shadow: 0 0 0 7px rgba(233, 226, 208, 0); } }

@media (max-width: 560px) {
  .btn { width: 100%; justify-content: center; }
}

/* ---------- Shared pieces ---------- */

.count { white-space: nowrap; }
.count.is-counted { animation: count-pop .45s var(--ease-spring); }

@keyframes count-pop { 40% { transform: scale(1.08); } }

/* Viewfinder card pieces (viral CTA, QC screen): corner brackets, a REC light
   and a running view counter. */
.vn-vf { position: absolute; inset: 16px; pointer-events: none; }
.vn-rec { position: absolute; top: 34px; left: 40px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--eggshell); }
.vn-dot { width: 10px; height: 10px; border-radius: 50%; animation: rec-blink 1.2s steps(1) infinite; background: var(--terracota); }

@keyframes rec-blink { 50% { opacity: .2; } }
.vn-counter { position: absolute; top: 28px; right: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: var(--r-pill); font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; color: var(--eggshell); font-variant-numeric: tabular-nums; transition: background-color .3s, transform .4s var(--ease-spring); background: rgba(233, 226, 208, .14); }
.vn-vf i { position: absolute; width: 28px; height: 28px; border: 3px solid var(--eggshell); transition: transform .5s var(--ease-spring); }
.vn-vf i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.vn-vf i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.vn-vf i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.vn-vf i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Blur-up: each photo starts as its own 24px preview (inlined in the HTML),
   blurred, and sharpens the moment the real file arrives. */
.lqip { background-size: cover; background-position: center; background-repeat: no-repeat; }
.js .lqip:not(.is-loaded) { filter: blur(18px) saturate(1.2); scale: 1.08; }
.js .lqip.is-loaded { transition: filter .7s var(--ease-out), scale .9s var(--ease-out); }

/* Eyebrow: same camera viewfinder as the hero, in ink. */
.eyebrow-vf { position: relative; display: inline-flex; align-items: center; gap: 14px; margin: 0; padding: 11px 18px; color: var(--tinta); font-size: 15px; font-weight: 600; }
.eyebrow-vf--light { color: var(--eggshell); }
.eyebrow-vf .vf-rec { border-right-color: rgba(42, 38, 32, .25); }
.eyebrow-vf .live-dot { background: var(--terracota); }
.eyebrow-vf--light .vf-rec { border-right-color: rgba(233, 226, 208, .3); }
.js .eyebrow-vf:not(.is-focused) .vf i:nth-child(1) { transform: translate(-7px, -7px); }
.js .eyebrow-vf:not(.is-focused) .vf i:nth-child(2) { transform: translate(7px, -7px); }
.js .eyebrow-vf:not(.is-focused) .vf i:nth-child(3) { transform: translate(-7px, 7px); }
.js .eyebrow-vf:not(.is-focused) .vf i:nth-child(4) { transform: translate(7px, 7px); }
.vf { position: absolute; inset: 0; pointer-events: none; }
.vf-rec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-right: 14px;
  border-right: 1.5px solid rgba(233, 226, 208, .4);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.vf-tc { font-weight: 600; letter-spacing: .02em; }
.vf i {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 0 solid var(--eggshell);
  transition: transform .6s var(--ease-spring);
}
.vf i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.vf i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.vf i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.vf i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.eyebrow-vf .vf i { border-color: var(--tinta); }
.eyebrow-vf--light .vf i { border-color: var(--eggshell); }
/* REC light: the logo dot, blinking. */
.live-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--eggshell);
  animation: rec-blink 1.4s steps(1) infinite;
}
.dm-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--eggshell);
  transition: background-color .2s, color .2s, transform .3s var(--ease-spring);
}

.dm-close:hover { background: var(--tinta); color: var(--eggshell); transform: rotate(90deg); }

@media (max-width: 640px) {
  .vn-counter { font-size: 20px; right: 30px; }
  .vn-rec { left: 30px; }
}

@media (max-width: 560px) {
  .vf-rec { padding-right: 10px; }
}

/* ---------- Loader ---------- */

.loader { display: none; }

.loader-logo { width: min(62vw, 420px); height: auto; overflow: visible; }
.loader-letter {
  font-family: AndyLogoDisplay, Archivo, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 76px;
  fill: var(--tinta);
  opacity: 0;
}
.loader-tag {
  font-family: AndyLogoMono, "DM Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 1.84px;
  fill: var(--tinta);
  opacity: 0;
}
.loader-dot { fill: var(--cuero); opacity: 0; transform-box: fill-box; transform-origin: center; }
.loader-clip-t { font-family: AndyLogoDisplay, Archivo, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 76px; }

/* Loader: shine sweep across "andy". */
.loader-shine { mix-blend-mode: soft-light; }
.js .loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--eggshell);
  /* Failsafe: if the script never runs, get out of the way after 6s. */
  animation: loader-failsafe 0s 6s forwards;
}

@keyframes loader-failsafe { to { visibility: hidden; } }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0 12px;
  pointer-events: none;
}
.site-header.is-scrolled .header-inner { box-shadow: 0 10px 30px -18px rgba(42, 38, 32, .45); }

.js .site-header:not(.is-in) .header-inner { transform: translateY(calc(-100% - 24px)); }
.brand-logo { width: 112px; height: auto; overflow: visible; }

.brand { display: flex; border-radius: var(--r-s); }
.brand:hover .logo-dot { animation: dot-hop .6s var(--ease-spring); }

@keyframes dot-hop {
  40% { transform: translateY(-9px) scale(1.1, .9); }
  70% { transform: translateY(0) scale(.92, 1.08); }
}
.logo-word {
  font-family: AndyLogoDisplay, Archivo, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 76px;
  letter-spacing: -3.42px;
  fill: var(--tinta);
}
.logo-tag {
  font-family: AndyLogoMono, "DM Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 1.84px;
  fill: var(--tinta);
}
.logo-dot { fill: var(--cuero); transform-box: fill-box; transform-origin: center; }

.main-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}
.main-nav a {
  position: relative;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-pill);
  transition: color .2s;
}
.js .main-nav a,
.js .header-actions > * { opacity: 0; transform: translateY(-10px) scale(.8); }
.js .main-nav a.is-in,
.js .header-actions > .is-in {
  opacity: 1;
  transform: none;
  transition: opacity .25s, transform .5s var(--ease-spring), color .2s, background-color .2s;
}
.main-nav a:not(.nav-cta):hover { color: var(--cuero); }
.nav-cta { background: var(--tinta); color: var(--eggshell); margin-left: 6px; position: relative; display: inline-flex; align-items: center; gap: 0; overflow: visible; transition: gap .35s var(--ease-spring), background-color .25s, padding .35s var(--ease-spring); }
.nav-dot {
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cuero);
  opacity: 0;
  transition: transform .5s var(--ease-spring), opacity .3s;
  pointer-events: none;
}

.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tinta);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-cta-dot { width: 0; height: 7px; border-radius: 50%; background: var(--terracota); transform: translateY(-14px) scale(0); transition: width .3s var(--ease-out), transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.nav-burger span {
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--eggshell);
  transition: transform .3s var(--ease-out);
}

/* Menu CTA: a dot drops in and the label nudges, like the title's full stop. */
.nav-cta:hover { gap: 6px; background: var(--terracota); }
.nav-cta:hover .nav-cta-dot { width: 7px; background: var(--eggshell); transform: none; }
.nav-cta:hover .nav-cta-text { animation: cta-wiggle .5s var(--ease-spring); }

@keyframes cta-wiggle { 30% { transform: rotate(-3deg) translateY(-1px); } 60% { transform: rotate(2deg); } }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.header-actions { display: flex; align-items: center; gap: 8px; }

.header-inner {
  pointer-events: auto;
  max-width: calc(var(--wrap) - 2 * var(--gutter) + 28px);
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 10px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: box-shadow .3s, transform .45s var(--ease-out);
}
.socials--header { display: flex; gap: 2px; }
.socials--header a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: background-color .2s, color .2s;
}
.socials--header a:hover { background: var(--eggshell); color: var(--cuero); }
.lang-opt {
  position: relative;
  z-index: 1;
  width: 34px;
  padding: 6px 0;
  text-align: center;
  transition: color .3s;
}

.lang-toggle {
  position: relative;
  display: flex;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--eggshell);
  font-size: 12px;
  font-weight: 700;
}
.lang-toggle-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 34px;
  height: calc(100% - 6px);
  border-radius: var(--r-pill);
  background: var(--tinta);
  transition: transform .35s var(--ease-out);
}
.lang-opt.is-active { color: var(--eggshell); }
.lang-toggle.is-es .lang-toggle-slider { transform: translateX(34px); }

@media (max-width: 1080px) {
  .main-nav a:not(.nav-cta) { padding: 10px 10px; }
  .socials--header { display: none; }
}

@media (max-width: 900px) {
  .nav-burger { display: flex; }
  .main-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border-radius: var(--r-l);
    background: var(--white);
    border: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s, transform .3s var(--ease-out), visibility .25s;
  }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .main-nav a { padding: 14px 16px; font-size: 17px; }
  .nav-cta { margin: 6px 0 0; text-align: center; }
  .nav-dot { display: none; }
}

@media (max-width: 560px) {
  .site-header { top: 8px; padding: 0 8px; }
  .brand-logo { width: 96px; }
}

@media (max-width: 360px) {
  .lang-opt { width: 30px; }
  .lang-toggle.is-es .lang-toggle-slider { transform: translateX(30px); }
  .lang-toggle-slider { width: 30px; }
  .brand-logo { width: 84px; }
}

/* ---------- Sections and shared layout ---------- */

html.is-loading { overflow: hidden; }

/* How I work quote: its typed full stop in Terracota. */
#how-quote { --dot: var(--terracota); }

/* About title runs the full width of the copy below it. */
#about-title { max-width: none; font-size: clamp(3.2rem, 7.4vw, 8.4rem); line-height: var(--lh-title); }

.section-title {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  margin-bottom: 18px;
  text-wrap: balance;
}

.section { padding: clamp(72px, 10vw, 128px) 0; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 1100;
  background: var(--tinta);
  color: var(--eggshell);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-weight: 600;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 16px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Reel mockups (hero Instagram frame, About TikTok frame) ---------- */

.reel { position: relative; margin: 0; perspective: 1200px; }
.reel-stage { position: absolute; inset: 0; overflow: hidden; }
.reel-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  transform-origin: 50% 35%;
}

/* Scrims keep the platform UI legible over any footage. */
.reel-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(rgba(0, 0, 0, .38), transparent 18%),
    linear-gradient(transparent 52%, rgba(0, 0, 0, .62));
  pointer-events: none;
}

/* Captions: Andy's own standard, Big Shoulders, one keyword on a Terracota
   marker, sitting above the platform UI and away from the face. */
.reel-caption {
  position: absolute;
  left: 16px;
  right: 66px;
  bottom: 150px;
  z-index: 2;
  min-height: 2.1em;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.02;
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

.reel-rail {
  position: absolute;
  right: 8px;
  bottom: 22px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.reel-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 3px;
  background: rgba(255, 255, 255, .28);
}

/* Effects layer: floating hearts and the double-tap heart. */
.reel-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }

/* About reel video: warm film grade is baked into the file; grain + a soft
   Terracota wash on top make the footage sit with the palette. */
.reel-media--video { object-position: 50% 30%; background: var(--tinta); filter: none; }

/* Slow push-in so the still reads like footage; a <video> just plays on top of it. */
.js .reel .reel-media { animation: reel-push 15s ease-in-out infinite alternate; }

@keyframes reel-push {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.1) translate(-2.2%, 1.6%); }
}
.reel:not(.is-playing) .phone *,
.reel:not(.is-playing) .phone *::before { animation-play-state: paused !important; }
.js .reel-caption .cap-word { opacity: 0; transform: translateY(.3em) scale(.7); }
.js .reel-caption .cap-word.is-on { opacity: 1; transform: none; transition: opacity .2s, transform .45s var(--ease-spring); }
.js .reel-caption.is-leaving .cap-word { opacity: 0; transform: translateY(-.2em); transition: opacity .25s, transform .3s; }

.phone {
  --tilt: -2.5deg;
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-l);
  overflow: hidden;
  isolation: isolate;
  background: var(--tinta);
  color: var(--white);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--tilt));
  transition: transform .6s var(--ease-out);
  box-shadow: 0 40px 70px -40px rgba(30, 12, 6, .8);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.phone--tt .reel-caption { bottom: 140px; }
.phone--tt .reel-rail { gap: 10px; bottom: 20px; }
.phone--tt .reel-progress span { background: var(--eggshell); }

.ig-top {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ig-title { font-weight: 800; font-size: 21px; letter-spacing: -.01em; }

.ig-bottom, .tt-bottom {
  position: absolute;
  left: 14px;
  right: 62px;
  bottom: 22px;
  z-index: 2;
  font-size: 13px;
  line-height: 1.35;
}
.ig-user { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.ig-follow {
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .85);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.ig-desc, .tt-desc { margin-top: 6px; }
.ig-audio { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 12px; font-weight: 600; }
.ig-audio-track {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, #000 75%, transparent);
  mask-image: linear-gradient(90deg, #000 75%, transparent);
}
.ig-user img { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--white); object-fit: cover; }
.ig-audio svg { flex: none; }
.ig-audio-track span { display: inline-block; animation: ticker 10s linear infinite; }

@keyframes ticker { to { transform: translateX(-50%); } }
.ig-follow:hover { background: var(--white); color: var(--tinta); }

.tt-top {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 18px;
  font-weight: 700;
  font-size: 15px;
  color: rgba(255, 255, 255, .72);
}

.tt-avatar {
  position: relative;
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
  border-radius: 50%;
  border: 2px solid var(--white);
}
.tt-plus {
  position: absolute;
  left: 50%;
  bottom: -10px;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--terracota);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  transition: transform .3s var(--ease-spring);
}
.tt-user { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.tt-follow { padding: 3px 12px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 8px; }
.tt-heart { position: absolute; left: -13px; top: 0; width: 26px; height: 26px; animation: heart-rise 2.6s cubic-bezier(.3, .6, .4, 1) forwards; }

@keyframes heart-rise {
  0% { transform: translate(0, 0) scale(0); opacity: 0; }
  12% { transform: translate(0, -18px) scale(var(--s)); opacity: 1; }
  100% { transform: translate(var(--dx), -180px) scale(calc(var(--s) * .6)) rotate(20deg); opacity: 0; }
}
.tt-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
button.tt-avatar { padding: 0; cursor: pointer; background: transparent; }
.tt-top .is-on { position: relative; color: var(--white); }
.tt-top .is-on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 26px;
  height: 2.5px;
  translate: -50% 0;
  border-radius: 2px;
  background: var(--white);
}

/* Follow buttons on the reel mockups are real buttons. */
button.tt-avatar:hover .tt-plus { transform: scale(1.15); }
.cap-word { display: inline-block; }
.cap-word.is-key {
  background-image: linear-gradient(var(--terracota), var(--terracota));
  background-repeat: no-repeat;
  background-size: 100% 46%;
  background-position: 0 88%;
  padding: 0 .06em;
}
.rail-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--white);
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .45));
}
.rail-like { transition: color .2s; }
.rail-audio {
  width: 30px;
  height: 30px;
  margin-top: 4px;
  border-radius: 8px;
  border: 2px solid var(--white);
  overflow: hidden;
}
.rail-audio--disc {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 9px solid #111;
  animation: disc-spin 5s linear infinite;
}

@keyframes disc-spin { to { transform: rotate(360deg); } }
.rail-btn svg { fill: currentColor; }
.rail-audio img { width: 100%; height: 100%; object-fit: cover; }
.tt-heart svg { width: 100%; height: 100%; fill: currentColor; }
.reel-progress span {
  display: block;
  height: 100%;
  background: var(--white);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}
.rail-like.is-liked { color: var(--terracota); }
.rail-like.is-pop svg { animation: like-pop .5s var(--ease-spring); }

@keyframes like-pop {
  30% { transform: scale(1.4); }
  60% { transform: scale(.88); }
}
.float-heart { position: absolute; left: 0; top: 0; width: 24px; height: 24px; }
.float-stats { position: absolute; inset: 0; z-index: 5; pointer-events: none; margin: 0; }
.float-heart svg { width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3)); }
.js .float-stats .fstat { transition: opacity .4s, scale .6s var(--ease-spring); }
.js .float-stats:not(.is-in) .fstat { opacity: 0; scale: .6; }
.js .float-stats.is-in .fstat--b { transition-delay: .15s; }
.js .float-stats.is-in .fstat--c { transition-delay: .3s; }
.big-heart {
  position: absolute;
  left: var(--hx, 50%);
  top: var(--hy, 45%);
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
  color: var(--white);
  opacity: 0;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .35));
}

@keyframes big-heart {
  0% { opacity: 0; transform: scale(.2) rotate(-14deg); }
  22% { opacity: 1; transform: scale(1.18) rotate(-8deg); }
  40% { transform: scale(.94) rotate(-8deg); }
  70% { opacity: 1; transform: scale(1) rotate(-8deg); }
  100% { opacity: 0; transform: scale(1.05) translateY(-40px) rotate(-8deg); }
}
.big-heart svg { width: 100%; height: 100%; fill: currentColor; }
.big-heart.is-pop { animation: big-heart .95s var(--ease-out); }

/* Tiny particle bursts (menu entrance, likes, taps). Created by motion.js. */
.burst-p {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  border-radius: 50%;
  pointer-events: none;
}

@media (max-width: 560px) {
  .reel-caption { font-size: 30px; }
}

/* ---------- Hero ---------- */

/* Terracota block with Eggshell type. The loader's dot swells into this color,
   so the first thing the page does is become the hero. */
.hero {
  position: relative;
  background: var(--terracota);
  color: var(--eggshell);
  border-radius: 0 0 var(--r-l) var(--r-l);
  padding: calc(var(--header-h) + 64px) 0 clamp(56px, 7vw, 88px);
  min-height: min(100svh, 960px);
  display: flex;
  align-items: center;
}
.hero-inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

/* Eyebrow as a camera viewfinder: four corner brackets that "focus" in, a
   blinking REC light with a running timecode, then the one fact that matters. */
.hero-hello {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  color: var(--eggshell);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 36px;
}

.hero-title {
  position: relative;
  font-size: clamp(3.6rem, 8.2vw, 7.4rem);
  line-height: var(--lh-title);
  letter-spacing: -.012em;
  max-width: 13ch;
  margin-bottom: 28px;
}

.hero-lede {
  max-width: 34ch;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  margin-bottom: 26px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-reel { justify-self: center; width: min(100%, 360px); }
.hero-loc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 7px 14px 7px 7px;
  border-radius: 16px;
  background: var(--eggshell);
  color: var(--tinta);
  transform: rotate(-2deg);
  box-shadow: 4px 5px 0 var(--tinta);
  transform-origin: 0 50%;
}
.hero-title .hl--pen { --hl-h: 50%; --hl-y: 88%; padding: 0 .06em; }

.js .hero-rise { opacity: 0; transform: translateY(18px); }

.hero > .wrap,
.contact-section > .wrap { position: relative; z-index: 2; }
.hero-loc.is-in { animation: loc-sway 4s ease-in-out 1.2s infinite alternate; }

@keyframes loc-sway { to { transform: rotate(1deg) translateY(-3px); } }

/* Hero: "filming right now in Argentina" as a location sticker. */
.js .hero-loc { opacity: 0; transform: rotate(-12deg) scale(.6); }

/* Hero: square edges at rest, the bottom corners round off once you scroll. */
html.is-scrolled .hero { border-radius: 0 0 var(--r-l) var(--r-l); }
.js .hero-rise.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }

.js .hero-loc.is-in { opacity: 1; transform: rotate(-2deg); transition: opacity .3s, transform .7s var(--ease-spring); }

.js .hero-hello:not(.is-focused) .vf i:nth-child(1) { transform: translate(-7px, -7px); }
.js .hero-hello:not(.is-focused) .vf i:nth-child(2) { transform: translate(7px, -7px); }
.js .hero-hello:not(.is-focused) .vf i:nth-child(3) { transform: translate(-7px, 7px); }
.js .hero-hello:not(.is-focused) .vf i:nth-child(4) { transform: translate(7px, 7px); }
.loc-pin { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--terracota); color: var(--eggshell); }
.loc-text { display: grid; line-height: 1; }
.loc-flag { display: grid; width: 26px; height: 18px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1.5px var(--tinta); animation: flag-wave 2.2s ease-in-out infinite; transform-origin: 0 50%; }

@keyframes flag-wave { 50% { transform: skewY(-6deg) scaleX(.94); } }
.loc-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: var(--tinta); color: var(--eggshell); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.loc-pin svg { animation: pin-bounce 1.6s var(--ease-spring) infinite; }

@keyframes pin-bounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-5px); } 45% { transform: translateY(0) scale(1.1, .9); } }
.loc-text small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo); }
.loc-text b { font-family: var(--display); font-size: 26px; font-weight: 800; line-height: .95; }
.loc-flag i { display: block; background: #74acdf; }

.loc-live .vn-dot { width: 6px; height: 6px; background: #ff4b3a; }
.loc-flag i:nth-child(2) { position: relative; background: #fff; }
.loc-flag i:nth-child(2)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #f6b40e; }

@media (max-width: 560px) {
  .hero-loc { margin-bottom: 18px; }
}

@media (max-width: 900px) {

  .hero { min-height: 0; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-reel { width: min(100%, 340px); }
}

.hero-reel { align-self: start; width: min(100%, 360px, calc((100svh - var(--header-h) - 110px) * .5625)); margin-top: 4px; }

@media (max-width: 900px) {
  .hero-reel { width: min(100%, 340px); }
}

@media (max-width: 560px) {
  .hero { padding-top: calc(var(--header-h) + 44px); }
  .hero-title { font-size: clamp(3rem, 14.5vw, 4.2rem); }
  .hero-hello { gap: 10px; padding: 9px 13px; font-size: 13px; }
}

/* Hero: the reel is pinned to the top of its column (title typing can't move
   it) and everything, buttons included, fits in the first screen. */
.hero { padding-top: calc(var(--header-h) + 40px); padding-bottom: clamp(32px, 5vh, 56px); border-radius: 0; transition: border-radius .5s var(--ease-out); }
.hero-title { font-size: clamp(3.2rem, min(7.4vw, 12.4vh), 7rem); margin-bottom: 22px; }

@media (max-width: 560px) {
  .loc-text b { font-size: 22px; }
}

/* ---------- Cursor spotlight (the Kiro border glow, in Cuero) ---------- */

.spot { --mx: 50%; --my: 50%; }
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: radial-gradient(240px circle at var(--mx) var(--my), var(--spot, var(--cuero)), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  z-index: 3;
}
.spot:hover::after { opacity: 1; }

/* ---------- Typed titles (hero H1 + contact) ---------- */

/* The caret is the logo dot (~.2em, like in the wordmark). While typing it
   rides absolutely after the last visible character; once done it drops back
   inline and sits as the headline's full stop. Eggshell here, because Cuero
   disappears on Terracota. */
.type-caret {
  display: inline-block;
  width: .17em;
  height: .17em;
  margin-left: .06em;
  border-radius: 50%;
  background: var(--eggshell);
  vertical-align: baseline;
}

.type-title { position: relative; }
.type-title .ch { transition: opacity .14s; display: inline-block; }
.type-title.is-typing .type-caret {
  position: absolute;
  left: var(--cx, 0);
  top: var(--cy, 0);
  margin: 0;
}
.type-title.is-landed .type-caret { animation: caret-drop .8s var(--ease-out) 1; }

@keyframes caret-drop {
  0% { transform: translateY(-1.1em) scale(.7, 1.3); opacity: 0; }
  35% { transform: translateY(0) scale(1.45, .6); opacity: 1; }
  55% { transform: translateY(-.22em) scale(.9, 1.1); }
  75% { transform: translateY(0) scale(1.1, .9); }
  100% { transform: none; }
}
.type-title.is-landed > .type-caret { display: none; }
.type-title .ch.has-dot { position: relative; }
.type-title .ch.has-dot::after {
  content: "";
  position: absolute;
  left: calc(100% + .12em);
  bottom: .13em;
  width: .17em;
  height: .17em;
  border-radius: 50%;
  background: var(--dot, var(--eggshell));
  animation: caret-drop .8s var(--ease-out) 1;
}
.type-title.is-typing .ch:not(.is-on) { opacity: 0; }
.type-title.is-typing .ch.is-on { animation: ch-pop .26s var(--ease-out); }

@keyframes ch-pop { from { opacity: 0; transform: translateY(.12em); } }
.js .type-title.is-waiting .type-text { opacity: 0; }
.js .type-title.is-waiting .type-caret { opacity: 0; }

/* ---------- About ---------- */

.about-inner {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.about-reel { justify-self: center; width: min(100%, 340px); position: relative; }
.about-section {
  margin: clamp(12px, 2vw, 24px) 0;
  border-radius: var(--r-l);
  background: var(--tinta);
  color: var(--eggshell);
}
.about-copy p { max-width: 60ch; margin-bottom: 16px; color: var(--eggshell); }
.about-reel .phone { --tilt: 2.5deg; }

/* About reel: black behind the video while it loads. */
.about-section .reel-media--video { background: #000; }
.about-copy p:first-of-type { font-size: 1.15rem; }

/* Profile counts as stickers floating on the reel. */
.fstat {
  position: absolute;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  padding: 12px 16px 11px;
  border-radius: var(--r-m);
  color: var(--eggshell);
  animation: sticker-bob 5s ease-in-out infinite alternate;
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .7);
}

@keyframes sticker-bob {
  from { transform: rotate(var(--r)) translateY(0); }
  to { transform: rotate(calc(var(--r) * -.5)) translateY(-12px); }
}
.fstat--a { top: 6%; left: -24%; --r: -6deg; background: var(--indigo); outline: 1.5px solid rgba(233, 226, 208, .14); }
.fstat--b { top: 17%; right: -26%; background: var(--terracota); --r: 5deg; animation-delay: -1.6s; }
.fstat--c { top: 44%; left: -26%; background: var(--bordo); --r: -3deg; animation-delay: -3.1s; }
.fstat-note { font-size: 11px; font-weight: 600; opacity: .8; }
.fstat dd { margin: 0; display: block; font-family: var(--display); font-weight: 800; font-size: clamp(34px, 3.4vw, 46px); line-height: 1; }
.fstat dt { font-size: 13px; font-weight: 700; display: grid; line-height: 1.2; }

/* Traits as big hashtags: second in weight only to the numbers. */
.traits { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 26px; }
.js .traits .trait-hash { transition: opacity .3s, transform .6s var(--ease-spring); }
.js .traits .trait-word { transition: opacity .4s .12s, transform .55s .12s var(--ease-out), background-size .7s .5s cubic-bezier(.65, 0, .35, 1); }
.js .traits:not(.is-in) .trait-word { background-size: 0% 34%; opacity: 0; transform: translateY(.4em); }
.js .traits:not(.is-in) .trait-hash { opacity: 0; transform: scale(.2) rotate(-120deg); }
.js .traits.is-in .trait:nth-child(2) .trait-word { transition-delay: .3s, .3s, .68s; }
.js .traits.is-in .trait:nth-child(3) .trait-word { transition-delay: .48s, .48s, .86s; }
.js .traits.is-in .trait:nth-child(2) .trait-hash { transition-delay: .18s; }
.js .traits.is-in .trait:nth-child(3) .trait-hash { transition-delay: .36s; }
.trait { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 4.4vw, 60px); line-height: 1; letter-spacing: -.01em; }
.trait-hash { color: var(--terracota); margin-right: .04em; }
.trait-word {
  padding: 0 .04em;
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 34%;
  transition: background-size .7s cubic-bezier(.65, 0, .35, 1);
  background-image: linear-gradient(color-mix(in srgb, var(--terracota) 70%, transparent), color-mix(in srgb, var(--terracota) 70%, transparent));
}
.trait-hash, .trait-word { display: inline-block; }

/* Hashtags stamp in: the # spins in first, then the word rises. */
.trait:hover .trait-hash { animation: hash-wiggle .5s var(--ease-spring); }

@keyframes hash-wiggle { 40% { transform: rotate(18deg) scale(1.2); } }

/* About: sticker note, TikTok follow pill, scannable key phrases. */
.scan b {
  font-weight: 700;
  color: var(--white);
  background-image: linear-gradient(color-mix(in srgb, var(--terracota) 75%, transparent), color-mix(in srgb, var(--terracota) 75%, transparent));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 34%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .7s cubic-bezier(.65, 0, .35, 1);
}
.js .scan:not(.is-in) b { background-size: 0% 34%; }
.js .scan.is-in b:nth-of-type(2) { transition-delay: .25s; }
.js .scan.is-in b:nth-of-type(3) { transition-delay: .5s; }

@media (max-width: 560px) {
  .fstat { padding: 9px 12px 8px; }
  .fstat dd { font-size: 30px; }
  .fstat dt { font-size: 11px; }
}

@media (max-width: 900px) {
  .fstat--a { left: -6%; }
  .fstat--b { right: -6%; }
  .fstat--c { left: -6%; }
}

@media (max-width: 560px) {
  .trait { font-size: 40px; }
}

/* Phones: stickers sit closer to the frame */
@media (max-width: 560px) {
  .fstat--a { left: -2%; }
  .fstat--b { right: -2%; }
  .fstat--c { left: 0; }
}

@media (max-width: 900px) {
  .about-section { margin: 12px 0; }
  .about-reel { order: 2; }
}

/* ---------- Brands ---------- */

.brand-checks { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.brand-check { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: var(--r-pill); background: var(--white); color: var(--tinta); font-size: 14px; font-weight: 700; box-shadow: 0 1px 0 rgba(42, 38, 32, .06); }
.brand-check--en { background: var(--indigo); color: var(--eggshell); }
.brand-check .chk { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--terracota); color: var(--eggshell); }

/* Brand checks: Terracota ticks, the English one in Índigo. */
.brand-check--en .chk { background: var(--eggshell); color: var(--indigo); }
.brand-checks--photo .chk { width: 18px; height: 18px; }

/* Brands photo: compact checks along the top, clear of Andy. */
.brand-checks--photo .brand-check { padding: 4px 11px 4px 4px; font-size: 12.5px; background: rgba(255, 255, 255, .92); }
.brand-checks--photo .brand-check--en { background: var(--indigo); }
.brand-checks--photo .chk svg { width: 10px; height: 10px; }

.brands-section { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(36px, 4vw, 56px); }
.brands-inner {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* Behind-the-scenes photo: full color, with the viewfinder, a caption scrim
   and floating checks on top. */
.bts-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--tinta);
}
.bts-vf {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 4px;
  background: rgba(16, 10, 24, .38);
  backdrop-filter: blur(6px);
  color: var(--eggshell);
  font-size: 14px;
  font-weight: 600;
}
.bts-bubbles {
  position: absolute;
  z-index: 2;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  inset: 0;
  display: block;
}
.bts-bubble {
  max-width: 90%;
  padding: 10px 15px;
  border-radius: 18px 18px 18px 6px;
  background: var(--white);
  color: var(--tinta);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .6);
}
.bts-bubble--key {
  background: var(--terracota);
  color: var(--eggshell);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.05;
  position: relative;
}
.bts-bubble { position: absolute; max-width: 62%; }
.bts-bubble--key { left: 5%; right: 5%; bottom: 4%; max-width: none; border-radius: 22px; }
.bts-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  transform: scale(1.08);
  transition: transform 1.6s var(--ease-out);
-webkit-user-drag: none; user-select: none;
}
.bts-photo::after {
  content: "";
  position: absolute;
  inset: -40%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: grain 1.2s steps(5) infinite;
  opacity: .1;
}

@keyframes grain {
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); }
  80% { transform: translate(5%, 4%); }
}
.bts-photo::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  pointer-events: none;
  height: 52%;
  background: linear-gradient(transparent, rgba(16, 10, 24, .82));
}

/* Key line: typed, with an Eggshell caret. */
.bts-bubble--key .type-caret { background: var(--eggshell); }
.bts-photo .brand-checks--photo { position: absolute; top: 74px; left: 18px; right: 18px; z-index: 2; gap: 6px; }
.bts-photo.is-in img { transform: scale(1); }
.js .bts-bubbles .bts-bubble { opacity: 0; transform: translateY(16px) scale(.8); transform-origin: 0 100%; transition: opacity .3s, transform .55s var(--ease-spring); }
.bts-bubbles.is-in .bts-bubble { animation: float-a 4.6s ease-in-out 1s infinite alternate; }

@keyframes float-a { to { translate: 0 -9px; rotate: -1.2deg; } }

/* The key line and the checks float gently once in view. */
.bts-bubbles.is-in .bts-bubble--key { animation: float-c 6.2s ease-in-out 1.8s infinite alternate; }

@keyframes float-c { to { translate: 0 -6px; rotate: -.6deg; } }
.js .bts-photo .brand-check { transition: opacity .35s, transform .55s var(--ease-spring); }
.bts-photo.is-in .brand-check { animation: float-a 4.6s ease-in-out 1s infinite alternate; }

/* Entrance: the key line rises in, the checks drop in one by one. */
.js .bts-bubbles.is-in .bts-bubble { opacity: 1; transform: none; }
.js .bts-photo:not(.is-in) .brand-check { opacity: 0; transform: translateY(-10px) scale(.85); }
.bts-photo.is-in .brand-check:nth-child(2) { animation-delay: 1.4s; }
.bts-photo.is-in .brand-check:nth-child(3) { animation-delay: 1.8s; }
.js .bts-photo.is-in .brand-check:nth-child(2) { transition-delay: .15s; }
.js .bts-photo.is-in .brand-check:nth-child(3) { transition-delay: .3s; }
.js .bts-vf:not(.is-focused) .vf i:nth-child(1) { transform: translate(-7px, -7px); }
.js .bts-vf:not(.is-focused) .vf i:nth-child(2) { transform: translate(7px, -7px); }
.js .bts-vf:not(.is-focused) .vf i:nth-child(3) { transform: translate(-7px, 7px); }
.js .bts-vf:not(.is-focused) .vf i:nth-child(4) { transform: translate(7px, 7px); }

/* Brands: a hand of collab cards, dealt from one deck */
.deck { --cw: clamp(116px, 10.6vw, 138px); position: relative; margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; min-height: 0; height: auto !important; margin-top: 24px; }
.deck-card {
  cursor: default;
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  aspect-ratio: 5 / 6.4;
  transform: rotate(var(--r, 0deg));
  transform-origin: 50% 50%;
  transition: transform .8s cubic-bezier(.3, 1.3, .5, 1) calc(var(--i, 0) * 90ms), opacity .35s calc(var(--i, 0) * 90ms);
}
.deck-face {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 12px 12px 12px;
  border-radius: 18px;
  background: var(--white);
  border: 1px solid rgba(42, 38, 32, .08);
  box-shadow: -6px 10px 24px -14px rgba(42, 38, 32, .55);
  overflow: hidden;
  transition: background-color .35s, box-shadow .3s, transform .4s var(--ease-spring);
  justify-content: flex-end;
}
.deck-logo { width: auto; margin: auto 0 0; object-fit: contain; object-position: left center; max-width: 78%; height: 46px; transition: filter .35s; }
.deck-name { font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1; color: var(--tinta); }
.deck-meta { display: grid; justify-items: start; gap: 5px; }
.deck-cat { font-size: 11px; font-weight: 600; color: var(--indigo); line-height: 1.2; }
.deck-tag { padding: 3px 8px; border-radius: var(--r-pill); background: rgba(143, 63, 35, .12); color: var(--terracota); font-size: 10.5px; font-weight: 800; }
.deck-cta-title { font-family: var(--display); font-weight: 800; color: var(--eggshell); display: inline; line-height: .98; font-size: clamp(22px, 2vw, 28px); }
/* Full-width pill inside the card. No hover dot: there's no room for it. */
.deck-btn { align-self: stretch; justify-content: center; gap: 6px; font-weight: 700; background: var(--eggshell); color: var(--terracota); box-shadow: 0 0 0 0 rgba(233, 226, 208, .6); animation: cta-ring-cream 2s ease-out infinite; min-height: 38px; padding: 0 12px; font-size: 14px; }
.deck-btn::before { content: none; }
.deck-btn:hover { gap: 6px; }
.deck-btn .cta-arrow { flex: none; }

@keyframes cta-ring-cream { 0% { box-shadow: 0 0 0 0 rgba(233, 226, 208, .7); } 100% { box-shadow: 0 0 0 7px rgba(233, 226, 208, 0); } }
.deck-rec { position: absolute; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; letter-spacing: .08em; color: var(--eggshell); top: 20px; left: 22px; font-size: 11px; }

/* Brand CTA card: the same viewfinder card as the stats CTA, in Terracota. */
.deck-cta-dot { display: inline-block; width: .17em; height: .17em; margin-left: .06em; border-radius: 50%; background: var(--eggshell); animation: dot-loop 3s var(--ease-spring) 1s infinite; }

@keyframes dot-loop {
  0%, 62%, 100% { transform: none; }
  70% { transform: translateY(-16px) scale(.9, 1.12); }
  80% { transform: translateY(0) scale(1.3, .75); }
  87% { transform: translateY(-5px) scale(.95, 1.05); }
  93% { transform: none; }
}

/* Brands deck: separate cards in a grid, dealt from one stack. */
/* The CTA is one more card: seven brands + it close the grid evenly. */
.deck-card--cta { aspect-ratio: auto; }
.deck-name, .deck-cat { transition: color .35s; }
.deck-card--cta .vn-vf { inset: 12px; }
.deck-rec .vn-dot { width: 7px; height: 7px; background: var(--eggshell); }

/* Travel Ladies logo follows the card's corner radius. */
.deck-logo[src*="travel-ladies"] { border-radius: 12px; }

.deck-card--cta .deck-face {
  border: 0;
  background: linear-gradient(110deg, var(--cuero), var(--terracota) 45%, var(--cuero) 90%);
  background-size: 220% 100%;
  animation: cta-flow 5s ease-in-out infinite alternate;
  align-items: flex-start;
  text-align: left;
  overflow: visible;
  /* Content stays clear of the viewfinder corners (12px inset, 22px long). */
  padding: 46px 20px 42px;
  justify-content: flex-end;
  gap: 12px;
}

@keyframes cta-flow { from { background-position: 0 0; } to { background-position: 100% 0; } }
.deck-card--cta .vn-vf i { border-width: 2.5px; width: 22px; height: 22px; }
.deck.is-alive .deck-card { transition-delay: 0s; }
.deck.is-alive .deck-face { animation: deck-float 4s ease-in-out calc(var(--i) * -.55s) infinite alternate; }

@keyframes deck-float { to { translate: 0 -6px; } }
.deck.is-measuring .deck-card { transform: none !important; transition: none !important; }
.js .deck:not(.is-dealt) .deck-card { transform: translate(var(--sx, 0), var(--sy, 0)) rotate(calc(var(--i, 0) * 3deg - 9deg)) scale(.92); }
.deck-card:not(.deck-card--cta):hover .deck-face, .deck-card:not(.deck-card--cta).is-up .deck-face { background: var(--indigo); border-color: transparent; }
.deck-card:not(.deck-card--cta):hover .deck-logo, .deck-card:not(.deck-card--cta).is-up .deck-logo { filter: none; }
.deck-card:not(.deck-card--cta):hover .deck-name, .deck-card:not(.deck-card--cta):hover .deck-cat,
.deck-card:not(.deck-card--cta).is-up .deck-name, .deck-card:not(.deck-card--cta).is-up .deck-cat { color: var(--eggshell); }

/* Brand cards: all equal and white; on hover they turn Índigo and logos go white. */
.deck-card:not(.deck-card--cta):hover .deck-tag, .deck-card:not(.deck-card--cta).is-up .deck-tag { background: var(--terracota); color: var(--eggshell); }

/* Brand cards: only the one-color logos turn white on hover. */
.deck-card:hover .deck-logo[src*="loreal"], .deck-card:hover .deck-logo[src*="nevo"], .deck-card:hover .deck-logo[src*="dove"],
.deck-card.is-up .deck-logo[src*="loreal"], .deck-card.is-up .deck-logo[src*="nevo"], .deck-card.is-up .deck-logo[src*="dove"] { filter: brightness(0) invert(1); }
/* Hover: the corners open outward, away from the content. */
.deck-card--cta:hover .vn-vf i:nth-child(1) { transform: translate(-4px, -4px); }
.deck-card--cta:hover .vn-vf i:nth-child(2) { transform: translate(4px, -4px); }
.deck-card--cta:hover .vn-vf i:nth-child(3) { transform: translate(-4px, 4px); }
.deck-card--cta:hover .vn-vf i:nth-child(4) { transform: translate(4px, 4px); }
.js .deck:not(.is-dealt) .deck-card:not(:last-child) { opacity: .98; }

@media (max-width: 560px) {
  .bts-vf { font-size: 12px; padding: 8px 12px; gap: 8px; }
  .bts-bubble { font-size: 14px; }
  .bts-photo .brand-checks--photo { top: 64px; }
}

@media (max-width: 640px) {
  .bts-bubble { max-width: 70%; font-size: 13px; padding: 8px 12px; }
  .bts-bubble--key { max-width: none; font-size: 19px; padding: 12px 16px; }
}

@media (max-width: 560px) {
  .deck { --cw: 118px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .deck-name { font-size: 15px; }
  .deck-card { aspect-ratio: 1 / 1.08; }
  .deck-face { gap: 4px; padding: 10px; }
}

@media (max-width: 900px) {

  .brands-inner,
  .about-inner { grid-template-columns: 1fr; }
  .bts-photo { max-width: 460px; aspect-ratio: 4 / 4.4; }
}

/* BTS photo: the original color, finished in post; a soft scrim for the caption. */
.bts-photo { aspect-ratio: 1100 / 1520; }

@media (hover: hover) and (pointer: fine) {
  .deck-card:hover { z-index: 60 !important; transform: translate(var(--x), calc(var(--y) - 34px)) rotate(0deg) scale(1.1); transition-delay: 0s; }
  .deck-card:hover .deck-face { animation: none; box-shadow: 0 0 0 3px var(--terracota), 0 30px 40px -20px rgba(42, 38, 32, .7); }
}
.deck-card.is-up { z-index: 60 !important; transform: translate(var(--x), calc(var(--y) - 28px)) rotate(0deg) scale(1.08); transition-delay: 0s; }
.deck-card.is-up .deck-face { animation: none; box-shadow: 0 0 0 3px var(--terracota), 0 30px 40px -20px rgba(42, 38, 32, .7); }

@media (hover: hover) and (pointer: fine) {
  .deck-card:hover { z-index: 5 !important; transform: translateY(-14px) rotate(0deg) scale(1.05); }
}
.deck-card.is-up { transform: translateY(-12px) rotate(0deg) scale(1.04); }

/* ---------- Reels ---------- */


.reels-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: 36px;
  align-items: end;
}
.reels-kicker { font-size: 16px; font-weight: 600; color: var(--tinta); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 4px 0 0; }
.reels-kicker-text { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--tinta); }
.reels-section { padding-top: clamp(40px, 5vw, 64px); }
.reels-title { position: relative; display: inline-grid; gap: 10px; }
.reels-bar { display: block; height: 5px; border-radius: 3px; background: rgba(42, 38, 32, .14); overflow: hidden; }

/* Reels head: tighter top, a running reel bar under the title. */
.reels-bar i { display: block; height: 100%; width: 100%; background: var(--terracota); transform-origin: left; animation: reel-run 4.5s linear infinite; }

@keyframes reel-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Reels head */
.reels-head .section-title { margin-bottom: 10px; }

.filter-bar { display: flex; flex-wrap: wrap; padding: 5px; gap: 2px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--line); }
.filter-btn {
  border-radius: var(--r-pill);
  font-weight: 600;
  transition: background-color .2s, color .2s, border-color .2s;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  font-size: 14px;
}
.filter-dock {
  position: sticky;
  top: calc(var(--header-h) + 34px);
  z-index: 30;
  display: flex;
  justify-content: center;
  margin: 0 0 28px;
  pointer-events: none;
}
.filter-btn:hover { border-color: var(--tinta); }
.filter-btn.is-active { background: var(--tinta); border-color: var(--tinta); color: var(--eggshell); }
.filter-btn:hover { background: var(--eggshell); }
.filter-btn.is-active { background: var(--tinta); color: var(--eggshell); }
.filter-dock .filter-bar {
  pointer-events: auto;
  background: rgba(42, 38, 32, .66);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(233, 226, 208, .2);
  box-shadow: 0 18px 34px -20px rgba(42, 38, 32, .9);
  transition: transform .55s cubic-bezier(.5, -.4, .3, 1.4), opacity .4s, filter .4s, clip-path .5s cubic-bezier(.65, 0, .35, 1);
  clip-path: inset(0 0 0 0 round 999px);
}
.filter-dock .filter-btn { color: var(--eggshell); background: transparent; }
.filter-dock .filter-btn:hover { background: rgba(233, 226, 208, .14); }

/* Filters ride along while browsing the grid: Tinta glass, so they don't
   compete with the white main menu. */
.filter-dock .filter-btn.is-active { background: var(--terracota); color: var(--eggshell); }

/* Reels filters fold into a dot and drop away when the grid ends. */
.filter-dock.is-gone .filter-bar { transform: translateY(40px) scale(.6); opacity: 0; filter: blur(6px); clip-path: inset(0 45% 0 45% round 999px); pointer-events: none; }

/* Reels head: die-cut platform stickers and a "sound on" pill. */
.plat-stickers { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.plat {
  --r: -4deg;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border: 2px solid var(--tinta);
  border-radius: 14px;
  background: var(--white);
  color: var(--tinta);
  font-weight: 800;
  font-size: 15px;
  box-shadow: 3px 3px 0 var(--tinta);
  transform: rotate(var(--r));
  transition: transform .4s var(--ease-spring), box-shadow .3s;
}
.plat--ig { --r: 3deg; }
.plat--yt { --r: -2deg; }
.plat-logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; }
.plat--tt .plat-logo { background: var(--eggshell); }
.plat--tt .g0 { fill: var(--tinta); }
.plat--ig .plat-logo { color: var(--eggshell); background: linear-gradient(45deg, var(--cuero), var(--terracota) 45%, var(--bordo)); }
.plat--yt .plat-logo { width: 38px; height: 28px; border-radius: 9px; color: var(--eggshell); background: var(--bordo); }

.plat:hover { transform: rotate(0) translate(-2px, -3px); box-shadow: 5px 6px 0 var(--tinta); }
.plat--tt .g1 { fill: var(--terracota); transform: translate(1.3px, 1.1px); }
.plat--tt .g2 { fill: var(--indigo); transform: translate(-1.2px, -1px); }
.plat--tt:hover .g1 { animation: glitch-a .5s steps(2) 2; }

@keyframes glitch-a { 50% { transform: translate(2.6px, -.6px); } }
.plat--tt:hover .g2 { animation: glitch-b .5s steps(2) 2; }

@keyframes glitch-b { 50% { transform: translate(-2.4px, 1px); } }
.plat--ig:hover .plat-logo svg { animation: icon-pop .6s var(--ease-spring); }

@keyframes icon-pop {
  0% { transform: scale(0) rotate(-30deg); }
  60% { transform: scale(1.15) rotate(8deg); }
  80% { transform: scale(.95) rotate(-4deg); }
  100% { transform: none; }
}
.plat--yt:hover .plat-logo svg { animation: yt-play .5s var(--ease-spring); }

@keyframes yt-play { 50% { transform: translateX(3px) scale(1.2); } }

.sound-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 18px 10px 14px;
  background: var(--tinta);
  color: var(--eggshell);
  font-size: 14.5px;
  font-weight: 600;
  transform: rotate(-1.5deg);
  border: 2px solid var(--tinta);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--tinta);
}
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }

@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--terracota); transform-origin: bottom; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.6s; background: var(--eggshell); }
.eq i:nth-child(3) { animation-delay: -.3s; }
.eq i:nth-child(4) { animation-delay: -.8s; background: var(--eggshell); }
.eq i:nth-child(5) { animation-delay: -.45s; }

@media (max-width: 560px) {
  .plat { font-size: 13px; padding: 4px 10px 4px 4px; }
  .plat-logo { width: 26px; height: 26px; }
}

@media (max-width: 900px) {
  .filter-dock { top: calc(var(--header-h) + 22px); justify-content: flex-start; }
}

@media (max-width: 560px) {
  .reels-kicker-text { font-size: 18px; }
  .filter-bar { border-radius: var(--r-m); }
  .reels-kicker { font-size: 14px; }
}

@media (max-width: 720px) {
  .filter-dock .filter-bar { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .filter-dock .filter-btn { flex: none; }
}

/* ---------- Reels: cards, previews and the player ---------- */

/* Lightbox with the real player */
html.is-modal-open { overflow: hidden; }
.reel-card {
  --spot: var(--eggshell);
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--tinta);
  box-shadow: 0 1px 0 rgba(42, 38, 32, .06);
  transition: transform .45s var(--ease-out), box-shadow .45s;
}
.reel-card-link { position: absolute; inset: 0; display: block; color: var(--white); text-decoration: none; border-radius: inherit; }
.reel-card-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.reel-card-top {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity .3s;
  justify-content: flex-end;
}
.reel-card-platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: var(--r-pill);
  background: var(--tinta);
  font-size: 12px;
  font-weight: 700;
}
.reel-card-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: transform .45s var(--ease-spring), opacity .3s;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  background: rgba(233, 226, 208, .92);
  color: var(--tinta);
  opacity: 0;
  transform: scale(.7);
}
.reel-card-meta { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: grid; gap: 4px; }
.reel-card-title { font-family: var(--display); font-weight: 800; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.02; text-wrap: balance; }
.reel-card-handle { font-size: 12px; font-weight: 600; opacity: .85; }
.reel-card-preview { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .5s; background: var(--tinta); }
.reel-box { margin: auto; padding: 0; border: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.reel-box-inner { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.reel-box-frame {
  width: min(400px, 92vw, calc((100dvh - 110px) * 9 / 16));
  aspect-ratio: 9 / 16;
  border-radius: var(--r-l);
  overflow: hidden;
  background: #000;
}
.reel-box-frame--instagram { width: min(420px, 92vw); aspect-ratio: auto; height: min(760px, calc(100dvh - 110px)); background: var(--white); }
.reel-box-bar { display: flex; align-items: center; gap: 14px; margin-top: 4px; justify-content: center; }
.reel-box-open {
  min-height: 44px;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 6px 6px;
  border: 2px solid var(--tinta);
  border-radius: 16px;
  background: var(--eggshell);
  color: var(--tinta);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--tinta);
  transform: rotate(-2deg);
  transition: transform .35s var(--ease-spring), box-shadow .25s;
}
.reel-card-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.reel-card-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--terracota); }
.reel-box-frame { position: relative; overflow: hidden; background: #000 var(--poster, none) center / cover; contain: layout paint; }
.reel-box-spin { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); transition: opacity .3s; pointer-events: none; display: grid; justify-items: center; gap: 14px; padding: 18px 26px 14px; border-radius: 22px; backdrop-filter: none !important; background: rgba(20, 16, 12, .85); }

/* Player: lighter to open (no live blur), X on the frame's top-right,
   "Open in…" centered under it, no seam on the right edge. */
.reel-box-stage { position: relative; }

.reel-box-close { width: 48px; height: 48px; border: 2px solid var(--tinta); border-radius: 50%; background: var(--terracota); color: var(--eggshell); box-shadow: 3px 3px 0 var(--tinta); transform: rotate(4deg); transition: transform .4s var(--ease-spring); position: absolute; top: -14px; right: -14px; z-index: 5; }
.reel-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity .4s;
  background: linear-gradient(rgba(0, 0, 0, .25), transparent 20%, transparent 50%, rgba(10, 6, 4, .78));
}
.reel-card-play svg { margin-left: 3px; }
.reel-card-preview iframe { width: 100%; height: 100%; border: 0; pointer-events: none; filter: contrast(1.06) saturate(1.16); }
.reel-box::backdrop { backdrop-filter: none; background: rgba(20, 16, 12, .9); }
.reel-box-frame iframe { border: 0; position: relative; z-index: 1; transition: opacity .4s; display: block; width: calc(100% + 2px); height: calc(100% + 2px); margin: -1px; }
/* Dark veil over the poster so the loader reads on any image. */
.reel-box-frame::before { content: ""; position: absolute; inset: 0; transition: opacity .4s; pointer-events: none; background: rgba(20, 16, 12, .62); }
.reel-box-spin i { width: 12px; height: 12px; border-radius: 50%; background: var(--eggshell); animation: spin-bounce .9s ease-in-out infinite; }

@keyframes spin-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px); } }

.reel-card.is-hidden { display: none; }
.reel-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--terracota), 0 24px 40px -24px rgba(42, 38, 32, .7); }
.reel-card-preview.is-ready { opacity: 1; }

.reel-box-open:hover { transform: rotate(0) translate(-2px, -3px); box-shadow: 6px 7px 0 var(--tinta); }
.reel-box-close:hover { transform: rotate(94deg) scale(1.06); }
.reel-box-frame:not(.is-loading)::before { opacity: 0; }
.reel-box-frame.is-loading iframe { opacity: 0; }
.reel-box-spin i:nth-child(2) { animation-delay: .15s; background: var(--terracota); }

/* Lightbox: blurred poster + three bouncing dots until the player paints. */
.reel-box-spin i:nth-child(3) { animation-delay: .3s; }
.reel-box-open svg:last-child { transition: transform .3s var(--ease-spring); }
.reel-card:hover .reel-card-poster { transform: scale(1.07); }
.reel-card:hover .reel-card-play { transform: scale(1.12); }
.reel-card.is-previewing .reel-card-play { opacity: 0; transform: scale(.6); }
.reel-card.is-previewing .reel-card-top { opacity: 0; }
.reel-box[open] .reel-box-inner { animation: dm-in .45s var(--ease-out); }

@keyframes dm-in { from { opacity: 0; transform: translateY(26px) scale(.96); } }
.reel-card:hover .reel-card-play { opacity: 1; transform: scale(1); }
.reel-card.is-previewing .reel-card-play { opacity: 0; }
.reel-box-frame:not(.is-loading) .reel-box-spin { opacity: 0; }
.reel-box-open:hover svg:last-child { transform: translate(3px, -3px); }

.portfolio-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.js .portfolio-grid .reel-card.is-pre { opacity: 0; transform: translateY(24px); }

/* Lightbox: the logo's dots bounce, the Terracota one lands like the full stop. */
.rbs-dots { display: flex; align-items: flex-end; gap: 10px; height: 46px; }
.rbs-label { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--eggshell); }
.rbs-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--eggshell); animation: rbs-hop 1.2s cubic-bezier(.3, 0, .3, 1) infinite; }

@keyframes rbs-hop { 0%, 60%, 100% { transform: translateY(0); } 25% { transform: translateY(-22px); } }
.rbs-dots b { width: 18px; height: 18px; border-radius: 50%; background: var(--terracota); box-shadow: 0 0 0 4px rgba(143, 63, 35, .25); animation: rbs-drop 1.2s cubic-bezier(.55, 0, 1, .45) .36s infinite; transform-origin: 50% 100%; }

@keyframes rbs-drop { 0%, 100% { transform: translateY(-30px) scale(.8, 1.2); opacity: 0; } 30% { opacity: 1; } 45% { transform: translateY(0) scale(1.45, .6); } 60% { transform: translateY(-8px) scale(.9, 1.1); } 75% { transform: none; } }
.rbs-dots i:nth-child(2) { animation-delay: .12s; }
.rbs-dots i:nth-child(3) { animation-delay: .24s; }
.rbo-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--eggshell); background: var(--tinta); }
.rbo-ico--instagram { background: linear-gradient(45deg, var(--cuero), var(--terracota) 45%, var(--bordo)); }
.rbo-ico--youtube { background: var(--bordo); }

@media (hover: none) {
  .reel-card-play { opacity: .9; transform: none; }
}

@media (max-width: 1080px) {
  .portfolio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 560px) {
  .reel-card-title { font-size: 17px; }
  .reel-card-platform { font-size: 11px; padding: 4px 8px 4px 7px; }
}

/* Platform badge on each card: a round glass chip. */
.reel-card-platform { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: rgba(20, 16, 12, .55); backdrop-filter: blur(6px); }

/* ---------- Reach & audience ---------- */

.big-chars { display: inline-flex; align-items: flex-end; justify-self: start; padding: 0 .05em; position: relative; width: max-content; }
.big-dot { position: relative; flex: none; width: .17em; height: .17em; margin: 0 0 .04em .05em; border-radius: 50%; background: var(--terracota); opacity: 0; transform-origin: 50% 100%; }
.big-loop { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* 11.4M: the hand-drawn loop sits well clear of the digits and the dot. */
.big-loop-wrap { position: absolute; pointer-events: none; right: -.62em; left: -.4em; top: -.26em; bottom: -.22em; }
.big-loop path { fill: none; stroke: var(--terracota); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1) .4s; }

.reach-section { margin: 0 0 clamp(12px, 2vw, 24px); padding: clamp(48px, 6vw, 88px) 0; border-radius: var(--r-l); background: var(--white); }
.reach-head { display: grid; justify-items: start; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.reach-big-num {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--tinta);
  align-items: center;
  display: inline-grid;
  gap: 6px;
  font-size: clamp(5.6rem, 12vw, 11rem);
  line-height: .82;
  margin: 34px 0 30px 30px;
}
.reach-big-label { font-weight: 600; color: var(--tinta); display: flex; flex-wrap: wrap; align-items: center; margin: 16px 0 0; max-width: none; font-size: 18px; gap: 10px; }
.reach-chart {
  --c: var(--terracota);
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: var(--r-l);
  margin-bottom: clamp(48px, 6vw, 80px);
  background: var(--eggshell);
  box-shadow: none;
}
.reach-react {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  margin: 0;
  padding: 22px 14px 18px;
  border-radius: 60px;
  background: var(--tinta);
  color: var(--eggshell);
  list-style: none;
  box-shadow: 0 26px 44px -28px rgba(42, 38, 32, .9);
  transition: transform .45s var(--ease-spring), box-shadow .3s;
}
.reach-head .section-title { margin: 0; }
.reach-big-num .count { color: var(--terracota); }


/* The big total: a pen stroke sweeps under it, the brand dot drops in as its
   full stop, and the month's climb draws itself beneath. */
.big-chars .count { position: relative; color: var(--tinta); }
.reach-chart[data-plat="ig"] { --c: var(--bordo); }
.reach-chart[data-plat="yt"] { --c: var(--indigo); }
.reach-react .tt-hearts { position: absolute; left: 50%; top: 0; width: 0; height: 0; pointer-events: none; }

.js .reach-react { transition: clip-path .8s cubic-bezier(.65, 0, .35, 1); clip-path: inset(0 0 0 0 round 60px); overflow: visible; }

.reach-react:hover { transform: translateY(-6px) rotate(-2deg); box-shadow: 0 34px 50px -28px rgba(42, 38, 32, .95); }
.reach-chart[data-plat="yt"] .chart-runner { display: none; }
.reach-chart.is-goal .chart-stage { cursor: default; }
.reach-chart:not(.is-goal) .goal { display: none; }
.reach-chart.is-goal .chart-svg, .reach-chart.is-goal .chart-runner { display: none; }
.reach-chart.is-goal .chart-peak { display: none; }
.reach-big.is-done .big-dot { opacity: 1; animation: caret-drop .8s var(--ease-out), dot-loop 3.4s var(--ease-spring) 1.6s infinite; }
.js .reach-react .react { transition: opacity .4s, transform .6s var(--ease-spring); }
.js .reach-react:not(.is-in) { clip-path: inset(100% 0 0 0 round 60px); }
.reach-react:hover .react-ico { animation: react-bounce .55s var(--ease-spring) both; }

@keyframes react-bounce { 40% { transform: translateY(-8px) scale(1.12); } }

/* 11.4M: a hand-drawn loop wraps the number as if circled in pen. */
.reach-big.is-in .big-loop path { stroke-dashoffset: 0; }
.js .reach-react:not(.is-in) .react { opacity: 0; transform: translateY(16px) scale(.7); }
.js .reach-react.is-in .react { transition-delay: .5s; }
.js .reach-react.is-in .react:nth-child(2) { transition-delay: .62s; }
.js .reach-react.is-in .react:nth-child(3) { transition-delay: .74s; }
.reach-react:hover .react:nth-child(2) .react-ico { animation-delay: .08s; }

/* TikTok rail: grows up from the bottom, items pop in; hover makes it dance. */
.reach-react:hover .react:nth-child(3) .react-ico { animation-delay: .16s; }


/* Daily chart */
.chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 14px; }
.chart-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--white); }
.chart-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.chart-sum { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.chart-total { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--c); transition: color .3s; }
.chart-sum-label { font-size: 14px; font-weight: 600; color: var(--indigo); display: grid; gap: 4px; }
.chart-stage { position: relative; height: clamp(200px, 24vw, 280px); color: var(--c); cursor: crosshair; touch-action: pan-y; }
.chart-svg { width: 100%; height: 100%; overflow: visible; }
.chart-grid { stroke: rgba(42, 38, 32, .08); stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.chart-line { fill: none; stroke: var(--c); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-area { color: var(--c); }
.chart-runner, .chart-hover {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 4px var(--white), 0 0 18px 6px color-mix(in srgb, var(--c) 55%, transparent);
  pointer-events: none;
}
.chart-runner { opacity: 0; }
.chart-guide { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: rgba(42, 38, 32, .25); pointer-events: none; opacity: 0; transition: opacity .2s; }
.chart-hover { opacity: 0; transition: opacity .2s; }
.chart-tip {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 1px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--tinta);
  color: var(--eggshell);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 16px));
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.chart-peak {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 1px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--c);
  color: var(--eggshell);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(14px, -50%) scale(.6);
  transform-origin: left center;
  opacity: 0;
  transition: opacity .3s, transform .5s var(--ease-spring);
  pointer-events: none;
}
.chart-x { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--indigo); }
.chart-spark { position: absolute; z-index: 3; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; }
.chart-tip b { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; }
.chart-peak b { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1; }
.chart-peak::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 4px var(--white);
}
.chart-peak::after {
  content: "";
  position: absolute;
  left: -21px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid var(--c);
  animation: icon-ring 1.6s ease-out infinite;
}

@keyframes icon-ring { 0% { transform: scale(.9); opacity: .6; } 100% { transform: scale(1.35); opacity: 0; } }
.chart-tip em { font-style: normal; font-weight: 700; color: color-mix(in srgb, var(--eggshell) 70%, var(--terracota)); }
.chart-x span { min-width: 0; text-align: center; }
.chart-tab:hover { background: rgba(42, 38, 32, .08); }
.chart-tab.is-active { background: var(--c); color: var(--eggshell); }
.chart-tab:focus { outline: none; }
.chart-tab:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.chart-sum-label .when { justify-self: start; }
.chart-tip.is-left { transform: translate(calc(-100% - 14px), -50%); }
.chart-tip.is-right { transform: translate(14px, -50%); }
.chart-peak.is-left { transform: translate(calc(-100% - 14px), -50%) scale(.6); transform-origin: right center; }
.chart-peak.is-in { opacity: 1; transform: translate(14px, -50%); }
.chart-peak.is-left::before, .chart-peak.is-left::after { left: auto; right: -21px; }
.chart-x span:first-child { text-align: left; }
.chart-x span:last-child { text-align: right; }
.chart-peak.is-hit::before { animation: peak-land .7s var(--ease-out); }

@keyframes peak-land {
  0% { transform: translateY(-14px) scale(.7, 1.3); }
  35% { transform: translateY(0) scale(1.5, .6); }
  60% { transform: translateY(-4px) scale(.9, 1.1); }
  100% { transform: none; }
}

/* Chart: the runner lands on the callout's dot like the title's full stop. */
.chart-peak.is-hit b { animation: peak-pop .5s var(--ease-spring); display: inline-block; }

@keyframes peak-pop { 40% { transform: scale(1.18) rotate(-3deg); } }
.chart-stage.is-hover .chart-guide, .chart-stage.is-hover .chart-hover, .chart-stage.is-hover .chart-tip { opacity: 1; }
.chart-stage.is-hover .chart-runner, .chart-stage.is-hover .chart-peak { opacity: 0 !important; }
.chart-peak.is-left.is-in { transform: translate(calc(-100% - 14px), -50%); }

/* Viral wall */
.viral-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 18px; }
.viral-title { margin: 0; font-size: clamp(34px, 4vw, 52px); line-height: 1; }
.viral-sub { margin: 0; font-size: 15px; font-weight: 600; color: var(--indigo); }
.viral-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(210px, 21vw, 300px);
  gap: 14px;
  perspective: 1200px;
}
.viral-meta { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 4; display: grid; justify-items: start; gap: 3px; color: var(--white); }
.viral-views { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 2.8vw, 40px); line-height: 1; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.viral-eye { flex: none; opacity: .9; }
.viral-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.viral-also {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 12px 6px 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 700;
}
.viral-ext {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(233, 226, 208, .92);
  color: var(--tinta);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s, transform .4s var(--ease-spring);
}
.viral-next {
  grid-column: span 2;
  position: relative;
  display: grid;
  justify-items: start;
  border-radius: var(--r-m);
  color: var(--eggshell);
  text-decoration: none;
  overflow: hidden;
  transition: transform .4s var(--ease-spring), box-shadow .3s, opacity .6s, translate .7s var(--ease-out), scale .7s var(--ease-out);
  align-content: end;
  padding: clamp(24px, 3vw, 40px);
  background: var(--indigo);
  gap: 0;
}
.viral-next-title { font-family: var(--display); font-weight: 800; max-width: 14ch; font-size: clamp(32px, 3.4vw, 50px); line-height: var(--lh-title); }
.viral-next-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; padding: 12px 20px; border-radius: var(--r-pill); box-shadow: 0 0 0 0 rgba(143, 63, 35, .6); animation: cta-ring-soft 2s ease-out infinite; transition: transform .35s var(--ease-spring); background: var(--terracota); color: var(--eggshell); }

/* Viral CTA: Terracota button on the Índigo card */
@keyframes cta-ring-soft { 0% { box-shadow: 0 0 0 0 rgba(196, 98, 60, .75); } 100% { box-shadow: 0 0 0 16px rgba(196, 98, 60, 0); } }

.viral-card {
  aspect-ratio: auto;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s var(--ease-out), box-shadow .35s, opacity .6s, translate .7s var(--ease-out), scale .7s var(--ease-out);
  box-shadow: 0 18px 34px -22px rgba(42, 38, 32, .7);
}
.viral-card--hero { grid-column: span 2; grid-row: span 2; box-shadow: 0 0 0 3px var(--terracota), 0 30px 50px -24px rgba(143, 63, 35, .8); }
.viral-next-cta svg { animation: cta-nudge 1.4s ease-in-out infinite; }
.viral-card .reel-card-top { justify-content: space-between; align-items: flex-start; }
.viral-meta .reel-card-title { margin-top: 4px; font-size: clamp(15px, 1.3vw, 18px); }
.viral-card--hero .viral-views { font-size: clamp(64px, 8.5vw, 124px); gap: 12px; }
.viral-card--hero .viral-eye { width: 34px; height: 34px; }
.viral-card--hero .viral-label { font-size: 14px; }
.viral-card--hero .reel-card-title { font-size: clamp(20px, 2vw, 28px); }
.viral-next .viral-next-title { max-width: 15ch; margin: 0 0 30px; color: var(--eggshell); }
.viral-next .hl--pen-key { --pen-ink: var(--indigo); }

/* Viral CTA in Índigo; the line types itself and lands the dot. */
.viral-next .type-caret { background: var(--eggshell); }
.viral-card--hero .reel-card-poster { object-position: 50% 28%; }
.viral-card:hover { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); translate: 0 -6px; box-shadow: 0 0 0 3px var(--terracota), 0 30px 44px -24px rgba(42, 38, 32, .8); }
.viral-next:hover { transform: rotate(-.6deg); box-shadow: 0 30px 50px -26px rgba(31, 44, 68, .9); }
.viral-card .reel-card-link::after { background: linear-gradient(rgba(0, 0, 0, .35), transparent 25%, transparent 40%, rgba(10, 6, 4, .85)); }
.viral-card .reel-card-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .22), transparent 45%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}

/* Top video: a light sweeps across the card every few seconds. */
.viral-card--hero .reel-card-link::before {
  opacity: 1;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 236, 214, .32) 50%, transparent 60%) no-repeat;
  background-size: 260% 100%;
  animation: card-sweep 4.5s ease-in-out infinite;
}

@keyframes card-sweep { 0%, 55% { background-position: 170% 0; } 85%, 100% { background-position: -70% 0; } }
.viral-card:hover .viral-ext { opacity: 1; transform: none; }
.js .viral-wall:not(.is-in) > * { opacity: 0; translate: 0 40px; scale: .94; }

/* Entrance: the wall deals itself in. */
.js .viral-wall.is-in > * { transition-delay: 0s, 0s, calc(var(--i) * 70ms), calc(var(--i) * 70ms), calc(var(--i) * 70ms); }
.viral-next.is-million .vn-counter { background: var(--terracota); transform: scale(1.12) rotate(-3deg); }
.viral-next:hover .viral-next-cta { transform: scale(1.06); }

/* 6.1M keeps popping, like a counter that won't sit still. */
.viral-card--hero .viral-views .count { display: inline-block; transform-origin: 0 80%; animation: views-pop 2.4s var(--ease-spring) 1s infinite; }

@keyframes views-pop { 0%, 70%, 100% { transform: none; text-shadow: 0 2px 16px rgba(0, 0, 0, .5); } 78% { transform: scale(1.07) rotate(-1.5deg); text-shadow: 0 0 26px rgba(233, 196, 170, .7); } 88% { transform: scale(.98); } }
.viral-card:hover .reel-card-link::before { opacity: 1; }
.viral-next:hover .vn-vf i:nth-child(1) { transform: translate(10px, 10px); }
.viral-next:hover .vn-vf i:nth-child(2) { transform: translate(-10px, 10px); }
.viral-next:hover .vn-vf i:nth-child(3) { transform: translate(10px, -10px); }
.viral-next:hover .vn-vf i:nth-child(4) { transform: translate(-10px, -10px); }

/* YouTube as a goal bar: progress toward a million Shorts views. */
.goal { position: absolute; inset: 0; display: grid; align-content: center; gap: 14px; padding: 0 4px; color: var(--tinta); }
.goal-pct { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.goal-track { position: relative; height: 22px; border-radius: 12px; background: rgba(31, 44, 68, .1); }
.goal-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 12px; background: repeating-linear-gradient(-45deg, var(--indigo) 0 12px, #2b3c5c 12px 24px); background-size: 34px 34px; animation: goal-stripes 1s linear infinite; transition: width 1.8s cubic-bezier(.65, 0, .35, 1); }

@keyframes goal-stripes { to { background-position: 34px 0; } }
.goal-head { position: absolute; right: -10px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--eggshell); border: 5px solid var(--indigo); box-shadow: 0 0 0 0 rgba(31, 44, 68, .4); animation: live-ping 1.6s ease-out infinite; }

@keyframes live-ping { 0% { box-shadow: 0 0 0 0 rgba(196, 98, 60, .9); } 100% { box-shadow: 0 0 0 10px rgba(196, 98, 60, 0); } }
.goal-tick { position: absolute; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .5); }
.goal-flag { position: absolute; right: -2px; top: -34px; padding: 3px 9px; border-radius: 8px; background: var(--tinta); color: var(--eggshell); font-size: 12px; font-weight: 800; }
.goal-scale { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--indigo); }
.goal-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 6px 0 0; padding: 0; list-style: none; }
.goal-pct b { font-family: var(--display); font-weight: 800; font-size: clamp(56px, 7vw, 92px); line-height: .9; color: var(--indigo); }
.goal-pct span { max-width: 22ch; font-size: 16px; font-weight: 700; }
.goal-stats li { display: grid; }
.goal-stats b { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; }
.goal-stats span { font-size: 13px; font-weight: 600; color: var(--indigo); }

/* Date chips: every number says when it is from. */
.when {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #c4623c;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(232, 120, 60, .35);
}
.when::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: currentColor; box-shadow: 0 0 8px rgba(232, 120, 60, .6); animation: rec-blink 1.4s steps(1) infinite; }


/* TikTok reactions, as the app's own side rail */
.react { position: relative; display: grid; justify-items: center; gap: 3px; }
.react-ico { display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: rgba(233, 226, 208, .1); color: var(--eggshell); }
.react-num { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1; }
.react-lbl { font-size: 11px; font-weight: 700; opacity: .75; }
.react-when { display: grid; gap: 2px; max-width: none; padding: 0; background: none; color: rgba(233, 226, 208, .7); font-size: 10.5px; font-weight: 700; text-align: center; white-space: nowrap; }
.react-ico svg { fill: currentColor; }
button.react-ico { cursor: pointer; }
.react--like .react-ico { color: #ff4d6a; }
.react--like .react-ico svg { animation: heart-beat 1.6s ease-in-out infinite; }

@keyframes heart-beat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(.95); } 45% { transform: scale(1.1); } }
.react-ico.is-pop svg { animation: icon-pop .6s var(--ease-spring); }
.react--share .react-ico svg { animation: share-nudge 3s ease-in-out infinite; }

@keyframes share-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(4px) rotate(-8deg); } 90% { transform: translateX(-1px); } }
.react-when span:first-child { color: var(--eggshell); }

/* Dates as a film camera's date stamp, not a pill. */
.react-when span:last-child { color: #e98a5c; font-family: var(--display); letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.react:hover .react-ico { background: rgba(233, 226, 208, .22); }

/* Million club: a plain sticker that reads at a glance. */
.million-tag {
  position: relative;
  display: inline-grid;
  justify-items: start;
  padding: 10px 16px 11px;
  border-radius: 14px;
  background: var(--terracota);
  color: var(--eggshell);
  transform: rotate(-4deg);
  box-shadow: 0 14px 24px -12px rgba(0, 0, 0, .6);
  overflow: hidden;
  animation: tag-wobble 3.2s ease-in-out infinite;
}

@keyframes tag-wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(-1deg) translateY(-3px); } }
.million-tag b { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: .9; }
.million-tag span { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.million-tag::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .45) 50%, transparent 62%) no-repeat; background-size: 250% 100%; animation: cta-shine 2.8s ease-in-out infinite; }

@keyframes cta-shine { 0%, 40% { background-position: 150% 0; } 80%, 100% { background-position: -60% 0; } }

/* Creator ranking */
.rank { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin: 0 0 clamp(48px, 6vw, 80px); }
.rank-title { margin: 0 0 14px; font-size: clamp(34px, 4vw, 54px); line-height: var(--lh-title); }
.rank-sub { max-width: 38ch; margin: 0; font-size: 17px; color: var(--indigo); }
.rank-card { position: relative; margin: 0; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-l); background: linear-gradient(160deg, #b7cfe2, #8fb3d1); overflow: hidden; }
.rank-head { position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.rank-logo { width: 52px; height: 52px; border-radius: 50%; background: var(--white); padding: 4px; }
.rank-h { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); line-height: 1; color: var(--white); text-transform: uppercase; }
.rank-top { position: relative; display: inline-block; padding: 0 .1em; }
.rank-list { position: relative; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rank-row { display: grid; grid-template-columns: 34px 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 0 0 14px; border-radius: 14px; background: rgba(255, 255, 255, .45); overflow: hidden; }
.rank-pos { font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--white); }
.rank-av { position: relative; width: 58px; height: 58px; margin: 8px 0; }
.rank-name { font-weight: 800; font-size: 15px; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; color: var(--white); }
.rank-name--anon { display: grid; gap: 6px; }
.rank-views { display: grid; justify-items: center; align-content: center; align-self: stretch; min-width: 104px; padding: 0 14px; background: var(--indigo); color: var(--white); }
.rank-row--me { background: var(--white); box-shadow: 0 16px 30px -18px rgba(31, 44, 68, .7); position: relative; overflow: hidden; }
.rank-confetti { position: fixed; z-index: 90; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; }
/* Solid block exactly one line tall (the font's content box is ~1.19em), so the
   gap above and below the highlighted line matches the rest of the title. */
.rank-mark { --mark-h: 84%; padding: 0 .06em; color: inherit; background: linear-gradient(var(--terracota), var(--terracota)) no-repeat 0 50% / 0% var(--mark-h); -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .9s cubic-bezier(.65, 0, .35, 1) .3s, color .3s .7s; }
.rank-card::before { content: ""; position: absolute; right: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 60%); animation: cloud-drift 9s ease-in-out infinite alternate; }

@keyframes cloud-drift { to { transform: translate(-30px, -14px) scale(1.1); } }
.rank-av img, .rank-av svg { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.rank-av--anon svg { background: rgba(255, 255, 255, .55); fill: rgba(31, 44, 68, .35); }
.rank-name--anon i { display: block; width: 70%; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .6); }
.rank-views b { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; }
.rank-views small { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.rank-top::before, .rank-top::after { content: ""; position: absolute; border: 2.4px solid var(--white); border-radius: 50%; pointer-events: none; }
.rank-top::before { inset: -10px -16px -8px -14px; transform: rotate(-5deg); }
.rank-top::after { inset: -6px -12px -11px -18px; transform: rotate(4deg); opacity: .7; }

/* Ranking: marker covers the whole word so Eggshell reads; #3 in silver-grey; my row keeps shining. */
.rank-row--me::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 214, .7) 50%, transparent 62%) no-repeat; background-size: 250% 100%; animation: cta-shine 3s ease-in-out infinite; pointer-events: none; }
.rank-name--anon i + i { width: 50%; }
.rank-row--me .rank-pos, .rank-row--me .rank-name { color: var(--tinta); }
.rank-row--me .rank-views { background: var(--terracota); }
.rank-row--me .medal--1 { width: 26px; height: 26px; font-size: 13px; transform-origin: 50% 0; }

.no-js .rank-mark { background-size: 100% var(--mark-h); color: var(--eggshell); }
.rank-row--me .rank-views b { display: inline-block; animation: views-pop 2.4s var(--ease-spring) 2.4s infinite; }
.js .rank-card .rank-row { transition: opacity .4s, transform .7s var(--ease-spring); }
.rank-card.is-in .rank-row--me { animation: me-glow 2.4s ease-in-out 2s infinite, me-bob 2.4s ease-in-out 2s infinite; }

@keyframes me-bob { 50% { transform: translateY(-3px) scale(1.012); } }

@keyframes me-glow { 50% { box-shadow: 0 0 0 3px var(--terracota), 0 18px 34px -16px rgba(143, 63, 35, .7); } }
.rank.is-in .rank-mark { background-size: 100% var(--mark-h); color: var(--eggshell); }
.js .rank-card .rank-top::before, .js .rank-card .rank-top::after { clip-path: inset(0 0 0 0); transition: clip-path .7s cubic-bezier(.65, 0, .35, 1) .4s; }

/* Hand-drawn loop around TOP, drawn on when the card comes in. */
.js .rank-card .rank-top::after { transition-delay: .8s; }
.rank-card.is-in .rank-row--me .medal--1 { animation: medal-drop .8s var(--ease-spring) 1.3s both, medal-swing 2.4s ease-in-out 2.2s infinite; }

@keyframes medal-swing { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }

@keyframes medal-drop { from { transform: translateY(-30px) scale(0); } }
.js .rank-card:not(.is-in) .rank-row { opacity: 0; transform: translateX(60px); }
.js .rank-card:not(.is-in) .rank-top::before, .js .rank-card:not(.is-in) .rank-top::after { clip-path: inset(0 100% 0 0); }
.js .rank-card.is-in .rank-row:nth-child(3) { transition-delay: .1s; }
.js .rank-card.is-in .rank-row:nth-child(2) { transition-delay: .4s; }
.js .rank-card.is-in .rank-row:nth-child(1) { transition-delay: .8s; }
.medal { position: absolute; right: -6px; bottom: -4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 800; color: var(--white); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.medal--1 { background: linear-gradient(135deg, #f6c64f, #d99a1e); }
.medal--2 { background: linear-gradient(135deg, #d9dde3, #a3aab4); }
.medal--3 { background: linear-gradient(135deg, #c9ccd1, #8e949c); }
.mini-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.mini-bars i { width: 4px; border-radius: 2px; background: var(--terracota); animation: eq 1.2s ease-in-out infinite; transform-origin: bottom; height: 100%; }
.mini-bars i:nth-child(2) { animation-delay: -.4s; }
.mini-bars i:nth-child(3) { animation-delay: -.8s; }

/* Summary: sticker filters + a bento of key numbers. */
.summary { margin-bottom: clamp(36px, 5vw, 64px); }
.summary:not(.is-said) .sum-caret { animation: rec-blink .7s steps(1) infinite; }
.summary.is-said .sum-caret { animation: caret-drop .7s var(--ease-out); }
.js .summary .sum-tile { transition: opacity .5s, transform .7s var(--ease-spring); }
.js .summary:not(.is-in) .sum-tile { opacity: 0; transform: translateY(40px) scale(.94); }
.js .summary.is-in .sum-tile:nth-child(n+2) { transition-delay: .08s; }
.js .summary.is-in .sum-tile:nth-child(n+4) { transition-delay: .16s; }
.js .summary.is-in .sum-tile:nth-child(n+7) { transition-delay: .24s; }
.sum-bar { display: grid; gap: 16px; margin-bottom: 22px; }
.sum-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sum-f {
  --r: -2deg;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px 6px 6px;
  border: 2px solid var(--tinta);
  border-radius: 14px;
  background: var(--white);
  color: var(--tinta);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 3px 3px 0 var(--tinta);
  transform: rotate(var(--r));
  cursor: pointer;
  transition: transform .35s var(--ease-spring), box-shadow .25s, background-color .25s, color .25s;
}
.sum-f-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--eggshell); }
.sum-say { display: flex; align-items: baseline; min-height: 1.3em; margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; color: var(--tinta); }
.sum-caret { display: inline-block; flex: none; width: .17em; height: .17em; margin-left: .08em; border-radius: 50%; background: var(--terracota); }
.sum-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); grid-auto-flow: row dense; gap: 14px; perspective: 1100px; }
.sum-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px;
  border-radius: 22px;
  background: var(--eggshell);
  color: var(--tinta);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .3s var(--ease-out), box-shadow .3s;
  overflow: hidden;
}
.sum-tile--big { grid-column: span 2; grid-row: span 2; justify-content: center; background: var(--white); box-shadow: inset 0 0 0 2px rgba(42, 38, 32, .08); }
.sum-tile--fyp { grid-column: span 2; background: var(--indigo); color: var(--eggshell); }
.sum-tile--rail { grid-row: span 2; align-items: center; background: var(--tinta); color: var(--eggshell); justify-content: space-between; }
.sum-tile--tt { background: var(--terracota); color: var(--eggshell); }
.sum-tile--top { background: var(--bordo); color: var(--eggshell); }
.sum-tile--rank { background: linear-gradient(160deg, #b7cfe2, #8fb3d1); color: var(--white); }
.sum-plat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: var(--r-pill); background: rgba(42, 38, 32, .08); font-size: 12px; font-weight: 800; }
.sum-num { margin: auto 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 3.8vw, 56px); line-height: .9; }
.sum-lbl { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.25; opacity: .85; }
.sum-meter { display: block; width: 100%; height: 8px; margin-top: 4px; border-radius: 4px; background: rgba(42, 38, 32, .12); overflow: hidden; }
.sum-mini { font-size: 12px; font-weight: 700; color: var(--indigo); }
.sum-tile--fyp .sum-plat, .sum-tile--tt .sum-plat, .sum-tile--top .sum-plat, .sum-tile--rank .sum-plat, .sum-plat--light { background: rgba(233, 226, 208, .16); }
.sum-meter i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: repeating-linear-gradient(-45deg, var(--indigo) 0 8px, #2b3c5c 8px 16px); background-size: 23px 23px; animation: goal-stripes 1s linear infinite; }
.sum-f.is-press { animation: f-press .45s var(--ease-spring); }

@keyframes f-press { 30% { transform: translate(3px, 3px) scale(.94); } }
.sum-tile[hidden] { display: none; }
.sum-tile:hover { box-shadow: 0 0 0 3px var(--terracota), 0 24px 34px -22px rgba(42, 38, 32, .6); }
.sum-tile--big .reach-big-num { font-size: clamp(5rem, 9vw, 8.4rem); }
.sum-f:hover { transform: rotate(0) translate(-2px, -3px); box-shadow: 5px 6px 0 var(--tinta); }

.sum-f.is-on { background: var(--terracota); color: var(--eggshell); transform: rotate(0) translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
/* TikTok rail tile: the rail fills the card, items spread evenly. */
.sum-tile--rail .reach-react { box-shadow: none; padding: 10px 0 0; background: transparent; flex: 1; align-content: space-evenly; width: 100%; }
.sum-tile--tt .when, .sum-tile--top .when { color: #ffd2b8; }
.sum-f.is-on .sum-f-ico { background: rgba(233, 226, 208, .2); color: var(--eggshell); }
.sum-filters li:nth-child(2) .sum-f { --r: 2deg; }
.sum-filters li:nth-child(3) .sum-f { --r: -1deg; }
.sum-filters li:nth-child(4) .sum-f { --r: 2.5deg; }
.sum-filters li:nth-child(5) .sum-f { --r: -2.5deg; }

/* 98% For You, said plainly: a split bar of 100 views. */
.fyp { display: grid; gap: 10px; width: 100%; margin-top: 4px; }
.fyp-num { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(56px, 5vw, 76px); line-height: .85; }
.fyp-say { margin: 0; font-size: 16px; line-height: 1.3; }
.fyp-bar { display: flex; gap: 4px; height: 38px; }
.fyp-for, .fyp-fol { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 10px; overflow: hidden; font-weight: 800; font-size: 13px; }
.fyp-fol { flex: 2.6; justify-content: center; padding: 0; background: var(--eggshell); color: var(--indigo); font-size: 11px; }
.fyp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: 12px; font-weight: 700; }
.fyp-for { flex: var(--share, 98); position: relative; background: repeating-linear-gradient(-55deg, var(--terracota) 0 14px, #9d4628 14px 28px); background-size: 34px 34px; animation: goal-stripes 1.4s linear infinite; }
.fyp-say b { color: #ffbe9c; }
.fyp-for em { font-style: normal; }
.fyp-fol b { writing-mode: vertical-rl; transform: rotate(180deg); }
.fyp-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.fyp-legend i { width: 10px; height: 10px; border-radius: 3px; }
.fyp-legend .when { color: #ffbe9c; }
.js .fyp .fyp-for { clip-path: inset(0 0 0 0 round 10px); transition: clip-path 1.4s cubic-bezier(.65, 0, .35, 1) .3s; }
.js .fyp:not(.is-in) .fyp-for { clip-path: inset(0 100% 0 0 round 10px); }
.lg-for { background: var(--terracota); }
.lg-fol { background: var(--eggshell); }

@media (max-width: 1100px) {
  .reach-react { grid-auto-flow: column; justify-self: center; align-self: center; border-radius: 40px; padding: 16px 20px; gap: 22px; }
}

@media (max-width: 640px) {
  .reach-big { justify-self: stretch; }
}

@media (max-width: 1100px) {
  .reach-big { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .chart-head { flex-direction: column; align-items: flex-start; }
  .chart-tab { padding: 0 12px; font-size: 13px; }
  .viral-next { padding-top: 92px; min-height: 300px; }
  .viral-views { font-size: 28px; }
  .viral-card--hero .viral-views { font-size: 64px; }
  .viral-meta .reel-card-title { display: none; }
  .viral-card--hero .reel-card-title { display: block; }
}

@media (max-width: 900px) {
  /* Two columns; rows grow with their content so no card spills into the next section. */
  .viral-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(clamp(200px, 52vw, 300px), auto); }
}

@media (hover: none) {
  .viral-ext { opacity: .9; transform: none; }
}

@media (max-width: 640px) {
  .react-ico { width: 46px; height: 46px; }
  .react-num { font-size: 20px; }
}

@media (max-width: 1100px) {
  .react-when { align-self: center; }
}

@media (max-width: 640px) {
  .reach-react { gap: 14px; padding: 14px 16px; }
}

@media (max-width: 560px) {
  .rank-row { grid-template-columns: 26px 48px minmax(0, 1fr) auto; gap: 8px; padding-left: 10px; }
  .rank-av { width: 46px; height: 46px; }
  .rank-pos { font-size: 24px; }
  .rank-name { font-size: 12px; }
  .rank-views { min-width: 78px; padding: 0 8px; }
  .rank-views b { font-size: 22px; }
  .rank-h { font-size: 19px; }
  .rank-logo { width: 42px; height: 42px; }
}

@media (max-width: 900px) {
  .rank { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .sum-tile--big, .sum-tile--fyp { grid-column: 1 / -1; }
  .sum-tile { padding: 14px; }
  .sum-num { font-size: 36px; }
  .sum-f { font-size: 13px; padding: 4px 11px 4px 4px; }
  .sum-f-ico { width: 26px; height: 26px; }
}

@media (max-width: 1100px) {
  .sum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sum-tile--rail { grid-row: span 2; }
}

@media (max-width: 900px) {
  .viral-next { min-height: 0; }
}

@media (max-width: 640px) {
  .goal-stats b { font-size: 24px; }
}

/* ---------- How I work (Stories, pinned) ---------- */

/* Square bottom and extra Índigo: the QC block slides over it. */
.how-section { margin: clamp(12px, 2vw, 24px) 0 0; padding: clamp(48px, 5vw, 72px) 0 calc(var(--r-l) + 64px); border-radius: var(--r-l) var(--r-l) 0 0; background: var(--indigo); color: var(--eggshell); position: relative; z-index: 1; overflow: clip; }
.how-frame {
  width: 100%;
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(28px, 4vw, 48px);
  border-radius: var(--r-l);
  color: var(--eggshell);
  max-width: calc(var(--wrap) - 2 * var(--gutter));
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
  background: transparent;
}
.how-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 40px;
  align-items: end;
  margin-bottom: clamp(18px, 3vh, 32px);
}
.how-lede { line-height: 1.5; max-width: 44ch; font-size: 16px; opacity: 1; }
.how-bubble {
  position: relative;
  margin: calc(-1 * clamp(30px, 4vw, 56px)) calc(-1 * clamp(24px, 3.4vw, 64px)) 0 0;
  padding-left: 54px;
}
.how-bubble-avatar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2.5px solid var(--eggshell);
  object-fit: cover;
  animation: bubble-float 4.2s ease-in-out infinite alternate-reverse;
}

@keyframes bubble-float {
  from { translate: 0 0; rotate: 0deg; }
  to { translate: 0 -12px; rotate: .8deg; }
}
.how-bubble-body {
  position: relative;
  padding: 40px 28px 24px;
  border-radius: 28px 28px 28px 8px;
  background: var(--eggshell);
  color: var(--tinta);
  box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .65);
  transform: rotate(-1.2deg);
}

.how-bubble-mark {
  position: absolute;
  top: -22px;
  left: 22px;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--terracota);
  color: var(--eggshell);
  box-shadow: 0 0 0 5px var(--indigo);
  transform-origin: 50% 0;
}
.how-bubble-text {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1.08;
}
.how-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--eggshell); }
.how-kicker-takes { padding: 4px 10px; border-radius: var(--r-pill); background: rgba(233, 226, 208, .14); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.how-bubble-mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; }
.how-bubble-body::after {
  content: "";
  position: absolute;
  left: -8px;
  bottom: 6px;
  width: 18px;
  height: 18px;
  background: var(--eggshell);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.js .how-pin { --steps: 5; height: calc(100vh + 4 * 62vh); }
.js .how-sticky { position: sticky; display: flex; align-items: center; overflow: hidden; top: calc(var(--header-h) + 28px); height: calc(100vh - var(--header-h) - 28px); }
.how-head .section-title { margin: 0; }

/* No JS / reduced motion: a swipeable row */
.how-sticky.is-static .story-viewport,
.no-js .story-viewport { overflow-x: auto; scroll-snap-type: x mandatory; }
.how-titles .section-title { margin-bottom: 8px; }
.js .how-bubble-mark { transition: transform .6s var(--ease-spring); }
.js .how-bubble-body { transition: opacity .45s, transform .6s var(--ease-spring); }
.how-bubble-text .type-caret { background: var(--terracota); }
.how-bubble-mark .rays { opacity: 0; }
.how-bubble-text .hl--pen-terra { padding: 0 .08em; }

/* How I work: the bubble floats, the bulb sways and keeps glowing. */
.how-bubble.is-in { animation: bubble-float 5.5s ease-in-out 1s infinite alternate; }
.how-bubble-mark .bulb { fill: rgba(233, 226, 208, 0); transition: fill .3s; }
.js .how-sticky { overflow: visible; }
.js .how-sticky .how-frame { margin-top: 0; padding-top: clamp(40px, 5vh, 64px); }
.how-sticky.is-static .story { opacity: 1; transform: none; scroll-snap-align: center; }
.how-bubble.is-in .how-bubble-mark { animation: bulb-glow 2.6s ease-in-out .7s infinite; }

@keyframes bulb-glow {
  0%, 100% { box-shadow: 0 0 0 5px var(--indigo), 0 0 0 0 rgba(233, 226, 208, 0); }
  50% { box-shadow: 0 0 0 5px var(--indigo), 0 0 26px 6px rgba(233, 226, 208, .35); }
}

/* The pinned stage clips sideways only (the bulb stays visible), and the side
   cards fade into the Índigo instead of being cut at the edge. */
.js .how-sticky .story-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.how-bubble.is-in .how-bubble-mark svg { animation: bulb-sway 3.2s ease-in-out 1.4s infinite; transform-origin: 50% 10%; }

@keyframes bulb-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.js .how-bubble:not(.is-in) .how-bubble-mark { transform: scale(0) rotate(-40deg); }
.js .how-bubble:not(.is-in) .how-bubble-body { opacity: 0; transform: translateY(18px) scale(.96); transform-origin: 0 100%; }
.js .how-bubble.is-in .how-bubble-body { transform: rotate(-1.2deg); }

/* How I work: the idea bubble */
.how-bubble.is-in .how-bubble-mark .rays { animation: bulb-on .9s steps(1) .55s forwards, ray-pulse 1.6s ease-in-out 1.5s infinite; transform-box: fill-box; transform-origin: center; }

@keyframes ray-pulse { 0%, 100% { opacity: .4; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }

@keyframes bulb-on { 0% { opacity: .9; } 15% { opacity: .1; } 30% { opacity: 1; } 45% { opacity: .2; } 60%, 100% { opacity: 1; } }
.how-bubble.is-in .how-bubble-mark .bulb { animation: bulb-fill 3.2s ease-in-out 1.4s infinite; }

@keyframes bulb-fill { 0%, 100% { fill: rgba(233, 226, 208, .05); } 50% { fill: rgba(233, 226, 208, .55); } }

.story-ui { margin-bottom: clamp(14px, 2.4vh, 24px); display: grid; gap: 10px; }

.story-viewport { overflow: hidden; margin: 0 calc(-1 * clamp(20px, 4vw, 56px)); padding: 6px clamp(20px, 4vw, 56px) 10px; }
.story-track { position: relative; display: flex; gap: clamp(14px, 2vw, 24px); will-change: transform; }
.story {
  --card: min(520px, 76vw);
  flex: none;
  width: var(--card);
  min-height: clamp(220px, 34vh, 340px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: var(--r-l);
  background: var(--tinta);
  color: var(--eggshell);
  transform: scale(.94);
  opacity: .55;
  transition: transform .7s var(--ease-spring), opacity .5s, background-color .45s, filter .5s, box-shadow .5s;
  position: relative;
  overflow: hidden;
  padding-top: clamp(20px, 2.6vw, 32px);
}
.story-num { font-family: var(--display); font-weight: 800; font-size: clamp(72px, 9vw, 120px); line-height: .8; color: var(--terracota); margin-bottom: auto; transition: color .45s; }
.story-title { font-size: clamp(32px, 3.6vw, 48px); line-height: var(--lh-title); }
.story-desc { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.45; max-width: 36ch; }
.story-road { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 6px; }

/* How I work: the bulb is never clipped; cards drop the stripe for focusing viewfinder corners. */
.story-vf { inset: 14px; opacity: .35; }
.story-vf i { width: 20px; height: 20px; border-width: 2.5px; }
.story.is-active { background: var(--terracota); transform: none; opacity: 1; box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .8); }

.no-js .story { opacity: 1; transform: none; scroll-snap-align: center; }

.story:nth-child(odd) { --tilt: -3deg; }
.story:nth-child(even) { --tilt: 3deg; }
.story .story-num { -webkit-text-stroke: 2px var(--terracota); color: transparent; margin-bottom: auto; }
.story-title .kw { padding: 0 .08em; border-radius: .08em; background: var(--eggshell); color: var(--terracota); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.story.is-active .story-num { -webkit-text-stroke: 0; color: var(--eggshell); }
.story.is-active .story-title,
.story.is-active .story-desc { animation: story-in .5s var(--ease-out) both; }

@keyframes story-in { from { opacity: 0; transform: translateY(14px); } }
.story.is-active .story-desc { animation-delay: .06s; }
.story.is-active .story-vf { opacity: 1; }

/* Stories timeline: cards fan out like a stack; the current one comes forward. */
.js .story:not(.is-active) { transform: scale(.86) rotate(var(--tilt)); opacity: .5; filter: blur(.6px) saturate(.8); }
.story:not(.is-active) .story-title .kw { background: rgba(233, 226, 208, .85); }

/* Story cards: each one a take, with a clapper band and its key word marked. */
.story.is-active .story-title .kw { animation: kw-in .6s var(--ease-spring) .15s both; }

@keyframes kw-in { from { background-size: 0 100%; transform: rotate(-3deg) scale(.9); } }
.story:not(.is-active) .story-vf i:nth-child(1) { transform: translate(-6px, -6px); }
.story:not(.is-active) .story-vf i:nth-child(2) { transform: translate(6px, -6px); }
.story:not(.is-active) .story-vf i:nth-child(3) { transform: translate(-6px, 6px); }
.story:not(.is-active) .story-vf i:nth-child(4) { transform: translate(6px, 6px); }

/* Timeline: a road with five stops; the dot rides the line to the current one. */
.road-line { position: absolute; top: 15px; left: 10%; right: 10%; height: 3px; border-radius: 2px; background: rgba(233, 226, 208, .18); }
.road-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); border-radius: 2px; background: var(--eggshell); }
.road-head {
  position: absolute;
  right: -7px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--terracota);
  box-shadow: 0 0 0 3px var(--indigo), 0 0 16px 4px rgba(143, 63, 35, .7);
}
.road-step { position: relative; display: grid; justify-items: center; gap: 6px; }
.road-step b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(233, 226, 208, .35);
  background: var(--indigo);
  color: rgba(233, 226, 208, .7);
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  transition: transform .45s var(--ease-spring), background-color .3s, color .3s, border-color .3s;
transform-style: preserve-3d;
}
.road-step em { font-style: normal; font-size: 13px; font-weight: 600; opacity: .55; transition: opacity .3s; text-align: center; }
.road-step.is-done b { background: var(--eggshell); border-color: var(--eggshell); color: var(--indigo); }
.road-step.is-current b { background: var(--terracota); border-color: var(--eggshell); color: var(--eggshell); transform: scale(1.22); }
.road-step.is-current em { opacity: 1; font-weight: 800; }
.road-step.is-hit b { animation: stop-hit .7s var(--ease-out); }

@keyframes stop-hit { 0% { transform: scale(1.22); } 30% { transform: scale(1.55, .8); } 55% { transform: scale(1.05, 1.3); } 100% { transform: scale(1.22); } }

/* The dot flashes as it reaches each number. */
.road-step.is-hit::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(233, 226, 208, .9), 0 0 24px 8px rgba(196, 98, 60, .7);
  animation: stop-flash .7s ease-out forwards;
  pointer-events: none;
}

@keyframes stop-flash { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.2); box-shadow: 0 0 0 10px rgba(233, 226, 208, 0), 0 0 30px 12px rgba(196, 98, 60, 0); } }

/* Stops: no squash. The disc flips like a coin and sends out a ring. */
.road-step.is-hit b { animation: stop-flip .7s var(--ease-out); }

@keyframes stop-flip { 0% { transform: scale(1.22) rotateY(0); } 50% { transform: scale(1.22) rotateY(180deg); background: var(--eggshell); color: var(--terracota); } 100% { transform: scale(1.22) rotateY(360deg); } }
.road-step.is-hit::after { animation: stop-flash .8s ease-out forwards; }
.road-step.is-current b::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--terracota);
  animation: icon-ring 1.8s ease-out infinite;
}

/* How I work: a clapperboard kicker, no avatar, no counter. */
.clap { display: grid; place-items: center; width: 44px; height: 38px; }
.clap svg { width: 100%; height: 100%; overflow: visible; }
.clap rect, .clap .clap-top path:first-child { fill: var(--eggshell); }
.clap .stripe { fill: var(--eggshell); }
.clap .clap-top .stripe, .clap .stripe-dark { fill: var(--tinta); }
.clap .clap-top { transform-origin: 5px 16px; transform: rotate(-14deg); transition: transform .2s; }
.clap.is-clap .clap-top { animation: clap-snap .5s var(--ease-out); }

@keyframes clap-snap { 0% { transform: rotate(-26deg); } 35% { transform: rotate(4deg); } 55% { transform: rotate(-6deg); } 100% { transform: rotate(-14deg); } }

@media (max-width: 560px) {
  .how-head { grid-template-columns: 1fr; }
  .how-lede { display: block; font-size: 14px; }
  .story { --card: 80vw; }
  .how-bubble-body { padding: 22px 18px 18px; }
}

@media (max-width: 900px) {
  .how-head { grid-template-columns: 1fr; gap: 10px; }
}



/* How I work: calmer header, quote as a chat bubble hanging off the card. */
.how-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 20px 48px;
  align-items: start;
  margin-bottom: clamp(16px, 2.6vh, 28px);
}

@media (max-width: 900px) {
  .how-head { grid-template-columns: 1fr; }
  .how-bubble { margin: 6px 0 0; margin-top: 28px; }
  .how-bubble-body { padding-top: 36px; }
}

/* Quote bubble sits inside the frame, leaving Índigo on its right. */
.how-bubble { margin-right: clamp(24px, 5vw, 88px); margin-top: 0; }

@media (max-width: 560px) {
  .road-step em { font-size: 10.5px; }
  .road-step b { width: 26px; height: 26px; font-size: 12px; }
  .road-line { top: 12px; }
  .road-step.is-current b::after { width: 26px; height: 26px; }
}

@media (max-width: 900px) {
  .how-bubble { margin-right: 0; }
}

/* ---------- Quality standards (production checklist) ---------- */


/* Ink stamp: rough edges and uneven ink via an SVG filter, slammed down once. */
.sheet-stamp {
  position: absolute;
  right: -18px;
  bottom: -58px;
  width: 168px;
  height: 168px;
  color: var(--bordo);
  transform: rotate(-13deg);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.sheet-stamp svg { width: 100%; height: 100%; overflow: visible; }
.st-line { fill: none; stroke: currentColor; stroke-width: 2.2; }
.st-thick { stroke-width: 4.5; }
.st-ring { fill: currentColor; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 2.4px; }
.st-band { fill: currentColor; }
.st-word { fill: var(--white); font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: 3px; }
.st-dot { fill: var(--terracota); }

/* Quality check: an editor in Tinta */
/* Slides over How I work; square bottom so no page shows through the seam. */
.qc-section { margin: calc(-1 * var(--r-l) - 8px) 0 0; border-radius: var(--r-l) var(--r-l) 0 0; background: var(--tinta); color: var(--eggshell); position: relative; z-index: 2; box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .55); padding-top: clamp(56px, 6vw, 88px); }
.qc-head { display: grid; justify-items: start; gap: 14px; margin-bottom: clamp(26px, 4vw, 44px); }
.qc-title { margin: 0; max-width: 16ch; }
.qc-mark-hl { padding: 0 .06em; border-radius: .06em; background: var(--terracota); color: var(--eggshell); }
.qc-lede { margin: 0; max-width: 44ch; font-size: 17px; opacity: .85; }
.qc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.qc-editor { display: grid; gap: 14px; }
.qc-screen { position: relative; aspect-ratio: 4 / 3.4; border-radius: 22px; overflow: hidden; background: #000; }
.qc-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05); object-position: 50% 22%; opacity: 0; transform: scale(1.06); transition: opacity .5s, transform 1.4s var(--ease-out); }
.qc-vf { inset: 14px; z-index: 2; }
.qc-rec { position: absolute; top: 24px; left: 28px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .08em; color: var(--eggshell); }
.qc-cap { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 3; display: grid; justify-items: start; gap: 8px; margin: 0; }
.qc-cap-tag { padding: 3px 10px; border-radius: 8px; background: var(--terracota); font-family: var(--display); font-weight: 800; font-size: 16px; }
.qc-cap-text { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.02; color: var(--white); text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.qc-head-line { position: absolute; width: 2px; pointer-events: none; top: -4px; bottom: -4px; left: calc(var(--lane) + var(--p, 0) * (100% - var(--lane))); margin-left: 0; background: var(--eggshell); box-shadow: 0 0 8px rgba(233, 226, 208, .7); }
.qc-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.qc-btn { display: grid; grid-template-columns: 30px 30px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; background: rgba(233, 226, 208, .06); color: var(--eggshell); font: inherit; text-align: left; cursor: pointer; transition: background-color .3s, transform .4s var(--ease-spring); }
.qc-check { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 2px solid rgba(233, 226, 208, .35); transition: background-color .3s, border-color .3s; }
.qc-n { font-family: var(--display); font-weight: 800; font-size: 18px; opacity: .45; }
.qc-txt { display: grid; gap: 2px; }
.qc-label { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; }
.qc-desc { font-size: 14px; line-height: 1.35; opacity: .75; }

/* Stacked blocks: QC slides over How I work, Contact slides over QC. */
.qc-section + .contact-section, .qc-section { scroll-margin-top: 80px; }

/* Selfie-camera takes: flip so the product label reads the right way. */
.qc-poster--mirror { scale: -1 1; }

.qc-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(10, 6, 4, .75)); }
.qc-cap-text mark { padding: 0 .08em; background: var(--terracota); color: var(--eggshell); }
.qc-head-line b { position: absolute; top: -4px; left: -6px; width: 14px; height: 12px; border-radius: 3px 3px 7px 7px; background: var(--eggshell); }
.qc-check svg { width: 16px; height: 16px; fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .4s .1s; stroke: var(--eggshell); }
.qc-stamp .st-word { fill: var(--terracota); }

.qc-rec .vn-dot { background: #ff4b3a; }
.qc-btn:hover { background: rgba(233, 226, 208, .12); transform: translateX(4px); }

/* Product shots cross-fade on the screen. */
.qc-poster.is-on { opacity: 1; transform: none; }
.qc-cap.is-pop .qc-cap-text { animation: cap-pop .5s var(--ease-spring); }

@keyframes cap-pop { from { opacity: 0; transform: translateY(14px) scale(.92); } }
.qc-cap.is-pop .qc-cap-tag { animation: icon-pop .5s var(--ease-spring); }
.qc.is-stamped .qc-stamp { animation: stamp-slam .55s cubic-bezier(.3, 1.4, .5, 1) forwards; }

@keyframes stamp-slam {
  0% { opacity: 0; transform: rotate(-26deg) scale(2.3); }
  55% { opacity: 1; transform: rotate(-12deg) scale(.9); }
  100% { opacity: 1; transform: rotate(-13deg) scale(1); }
}
.qc-item.is-done .qc-check { animation: icon-pop .5s var(--ease-spring); background: var(--terracota); border-color: var(--terracota); }
.qc-item.is-current .qc-btn { background: var(--terracota); transform: translateX(8px); }
.qc-item.is-current .qc-n { opacity: 1; }
.qc-item.is-current .qc-label { background: var(--eggshell); color: var(--terracota); padding: 0 .1em; justify-self: start; }
.qc-item.is-current .qc-desc { opacity: 1; }
.qc-item.is-peek .qc-btn { background: rgba(233, 226, 208, .14); transform: translateX(6px); }

/* QC palette: Terracota title marker, Eggshell/Terracota checks. */
.qc-item.is-peek .qc-check { border-color: var(--eggshell); }
.qc-item.is-done .qc-check svg { stroke-dashoffset: 0; }

/* CapCut-style timeline */
.cc { position: relative; display: grid; gap: 6px; padding: 10px 12px 12px; border-radius: 16px; background: #141210; color: var(--eggshell); --lane: 30px; }
.cc-top { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.cc-tool { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: rgba(233, 226, 208, .08); font-size: 12px; opacity: .8; }
.cc-time { margin-left: auto; font-family: var(--display); font-weight: 700; letter-spacing: .06em; opacity: .7; }
.cc-zoom { position: relative; width: 70px; height: 4px; border-radius: 2px; background: rgba(233, 226, 208, .2); }
.cc-ruler { display: flex; justify-content: space-between; margin-left: var(--lane); padding-bottom: 4px; border-bottom: 1px solid rgba(233, 226, 208, .12); font-size: 10px; letter-spacing: .04em; opacity: .5; }
.cc-tracks { position: relative; display: grid; gap: 5px; }
.cc-track { display: grid; grid-template-columns: var(--lane) minmax(0, 1fr); align-items: center; }
.cc-lane-ico { font-size: 11px; font-weight: 800; opacity: .5; }
.cc-row { display: flex; gap: 3px; min-width: 0; }
.cc-clip, .cc-text, .cc-fx { flex: var(--w); min-width: 0; }
.cc-clip { position: relative; height: 44px; padding: 0; border: 2px solid transparent; border-radius: 7px; background: #2a2622; overflow: hidden; cursor: pointer; transition: border-color .2s, transform .3s var(--ease-spring); }
.cc-thumbs { position: absolute; inset: 0; background: var(--img) center 30% / auto 100% repeat-x; filter: saturate(.9) brightness(.9); }
.cc-dur { position: absolute; right: 4px; bottom: 3px; padding: 0 4px; border-radius: 4px; background: rgba(0, 0, 0, .55); font-size: 9px; font-weight: 700; color: #fff; }
.cc-text { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; border: 0; border-radius: 5px; background: rgba(143, 63, 35, .55); color: var(--eggshell); font: inherit; font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; cursor: pointer; transition: background-color .2s; }
.cc-fx { height: 16px; display: grid; place-items: center; border-radius: 4px; background: rgba(31, 44, 68, .9); font-size: 9px; }
.cc-wave { flex: 1; height: 24px; border-radius: 5px; background: radial-gradient(ellipse 1.6px 9px at 50% 50%, rgba(233, 226, 208, .7) 0 100%, transparent 100%) 0 50% / 5px 100% repeat-x, rgba(134, 76, 36, .35); }
.cc-tip { position: absolute; bottom: calc(100% + 8px); z-index: 5; max-width: 220px; padding: 7px 11px; border-radius: 10px; background: var(--eggshell); color: var(--tinta); font-size: 12.5px; font-weight: 700; line-height: 1.25; transform: translate(-50%, 6px); opacity: 0; transition: opacity .2s, transform .3s var(--ease-spring); pointer-events: none; }
.cc-time b { color: var(--eggshell); opacity: 1; }
.cc-zoom i { position: absolute; left: 55%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--eggshell); }
.cc-text b { font-family: var(--display); font-size: 11px; opacity: .7; }
.cc-text span { overflow: hidden; text-overflow: ellipsis; }
.cc-fx i { font-style: normal; opacity: .7; }
.cc-tip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--eggshell); }
.cc-clip--mirror .cc-thumbs { scale: -1 1; }
.cc-clip.is-flash { animation: clip-flash .6s var(--ease-out); }

@keyframes clip-flash { 0% { box-shadow: 0 0 0 0 rgba(233, 226, 208, .8); } 100% { box-shadow: 0 0 0 10px rgba(233, 226, 208, 0); } }
.cc-text.is-sel, .cc-text:hover { background: var(--terracota); }
.cc-clip:hover, .cc-clip.is-hover, .cc-clip:focus-visible { border-color: var(--eggshell); transform: translateY(-2px); outline: none; }
.cc-clip.is-sel { border-color: var(--terracota); }
.cc-tip.is-on { opacity: 1; transform: translate(-50%, 0); }
.cc-clip.is-done::after { content: "✓"; position: absolute; left: 4px; top: 3px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--terracota); color: var(--eggshell); font-size: 10px; font-weight: 800; }
.cc-clip.is-sel .cc-thumbs { filter: none; }

@media (max-width: 560px) {
  .qc-label { font-size: 19px; }
}

@media (max-width: 900px) {
  .qc { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .cc { --lane: 22px; padding: 8px; }
  .cc-clip { height: 36px; }
  .cc-text { font-size: 9px; padding: 0 4px; }
  .cc-dur { display: none; }
  .sheet-stamp { width: 132px; height: 132px; right: 0; bottom: -52px; }
}

.qc-stamp { position: absolute; right: 18px; top: 18px; bottom: auto; z-index: 4; width: 150px; height: 150px; mix-blend-mode: normal; opacity: 0; transform: rotate(-13deg) scale(2); color: var(--eggshell); }

/* ---------- Contact ---------- */

.contact-section {
  overflow: hidden;
  isolation: isolate;
  background: var(--bordo);
  color: var(--eggshell);
  border-radius: var(--r-l) var(--r-l) 0 0;
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * var(--r-l) - 8px);
  box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .55);
}

.contact-title {
  line-height: var(--lh-title);
  max-width: 15ch;
  text-wrap: balance;
  margin-bottom: 0;
  font-size: clamp(2.6rem, 5.4vw, 5rem);
}
.contact-actions { display: flex; flex-wrap: wrap; flex-direction: column; align-items: stretch; gap: 12px; }
.contact-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 32px 64px; align-items: center; }
.contact-logo { display: inline-flex; align-self: flex-start; margin-bottom: 6px; border-radius: var(--r-s); }
.contact-cta {
  position: relative;
  isolation: isolate;
  gap: 12px;
  overflow: visible;
  background: linear-gradient(110deg, var(--cuero), var(--terracota) 45%, var(--cuero) 90%);
  background-size: 220% 100%;
  animation: cta-flow 5s ease-in-out infinite alternate, cta-breathe 2.8s ease-in-out infinite;
  box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .7);
}

@keyframes cta-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.025; } }
.contact-heading { display: grid; gap: 10px; min-width: 0; }
.contact-lead { max-width: 24ch; margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.08; color: rgba(233, 226, 208, .78); }
.contact-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .35) 50%, transparent 62%) no-repeat;
  background-size: 250% 100%;
  animation: cta-shine 3.2s ease-in-out infinite;
}
.contact-cta::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -2;
  border-radius: inherit;
  border: 2px solid var(--terracota);
  animation: cta-ring 2.2s ease-out infinite;
}

@keyframes cta-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08, 1.4); } }

.contact-actions .social-tile { min-height: 70px; }
.contact-actions .btn { justify-content: center; }
.contact-logo .brand-logo { width: 220px; height: auto; }
.contact-logo .logo-word, .contact-logo .logo-tag { fill: var(--eggshell); }
.contact-logo .logo-dot { animation: dot-loop 3s var(--ease-spring) 1s infinite; }
.contact-cta:hover { animation-play-state: paused; transform: scale(1.03) rotate(-1deg); }
/* Contact title: reserves its line so typing never shifts the layout, and wraps
   instead of running under the right column. */
.contact-heading .contact-title { line-height: var(--lh-title); min-height: .9em; font-size: clamp(3.4rem, min(9vw, 11vh), 8.4rem); overflow-wrap: anywhere; }
.js .contact-lead { opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .6s var(--ease-out); }

/* Contact heading in two beats: a quiet question, then a big "Let's talk." */
.js .contact-section.is-in .contact-lead, .no-js .contact-lead { opacity: 1; transform: none; }

/* Contact: steadier title, logo on top of the right column, live social tiles. */
.contact-logo:hover .logo-dot { animation: dot-hop .6s var(--ease-spring); }
.contact-cta:hover .cta-arrow { animation: none; transform: translateX(6px) rotate(-30deg); transition: transform .35s var(--ease-spring); }

/* Social tiles: big, colored, with the handle, so they read as tappable. */
.social-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.social-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 9px 16px 9px 9px;
  border-radius: var(--r-m);
  color: var(--eggshell);
  text-decoration: none;
  transition: transform .35s var(--ease-spring), box-shadow .3s;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.social-tile--ig { background: var(--terracota); }
.social-tile--tt { background: var(--tinta); }
.social-tile-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(233, 226, 208, .16); }
.social-tile-text { display: grid; min-width: 0; line-height: 1.2; text-align: left; }
.social-tile-handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; opacity: .88; }
.social-tile-name { font-weight: 800; font-size: 16px; }
.social-tile-arrow { margin-left: auto; flex: none; transition: transform .3s var(--ease-out); }
.social-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .6); }
.social-tile:hover .social-tile-arrow { transform: translate(3px, -3px); }

@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; }

  /* Phones: one column, logo and links under the title. */
  .contact-section { display: flex; flex-direction: column; padding-bottom: 0; }
  .contact-section > .wrap { order: 1; width: 100%; }
  .contact-logo .brand-logo { width: 170px; }
}

@media (max-width: 560px) {
  .contact-actions .btn { width: 100%; }
  .contact-actions .social-tiles { width: 100%; }
  .contact-actions .social-tile { flex: 1; min-width: 0; }
  .contact-actions .social-tile-arrow { display: none; }
}

@media (max-width: 360px) {
  .contact-actions .social-tiles { flex-direction: column; }
}

/* Contact: title left, actions in a column on the right. */
.contact-actions .social-tiles { flex-direction: column; }

/* ---------- Footer ---------- */

.site-footer { background: var(--bordo); color: var(--eggshell); padding: 0 0 22px; }
.footer-inner {
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: auto 1fr auto;
  gap: 18px 40px;
  display: block;
  padding-top: 0;
  border-top: 0;
}

.footer-copy {
  grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid rgba(233, 226, 208, .14); font-size: 12.5px; text-align: center; opacity: .7; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 16px; border-top: 1px solid rgba(233, 226, 208, .14); }
.footer-row .footer-copy { padding: 0; border: 0; text-align: left; }

/* Footer credit: Forklia logo with its own build-in and hover effect. */
.fk-credit { display: inline-flex; align-items: center; gap: 10px; color: var(--eggshell); text-decoration: none; font-size: 12.5px; opacity: .85; transition: opacity .25s; }
.fk-brand { display: block; color: #eef2f8; height: 22px; }
.fk-logo { height: 100%; width: auto; overflow: visible; display: block; }
.fk-m { fill: currentColor; transform-box: fill-box; transform-origin: center; }
.fk-l { fill: currentColor; }
.fk-cell { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 2px rgba(56, 189, 248, .7)); }

.fk-credit:hover { opacity: 1; }
.fk-credit:not(.is-in) .fk-m { opacity: 0; transform: translateY(-26px); }
.fk-credit:not(.is-in) .fk-l { opacity: 0; }
.fk-credit:not(.is-in) .fk-cell { transform: scale(0); }
.fk-credit.is-in .fk-m { animation: fkNavDrop .6s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 55ms + .2s); }

@keyframes fkNavDrop { 0% { transform: translateY(-26px); opacity: 0; } to { transform: none; opacity: 1; } }
.fk-credit.is-in .fk-l { animation: fkFade .5s ease both; animation-delay: calc(var(--i) * 50ms + .75s); }

@keyframes fkFade { to { opacity: 1; } }
.fk-credit.is-in .fk-cell { animation: fkPop .6s var(--ease-out) both .7s, fkFork 5s var(--ease-out) infinite 1.4s; }

@keyframes fkPop { 0% { transform: scale(0) rotate(-180deg); } to { transform: none; } }

@keyframes fkFork { 0%, 55%, to { transform: translate(0); } 65%, 80% { transform: translate(-1.5px, 1.5px); } }
.fk-credit:hover .fk-m { animation: fkWave .7s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }

@keyframes fkWave { 0%, to { transform: none; } 40% { transform: translateY(-2.2px) scale(.86); fill: #7fe7ff; } }
.fk-credit:hover .fk-cell { animation: fkOrbit 1.2s var(--ease-out) infinite; }

@keyframes fkOrbit { 0%, to { transform: none; } 25% { transform: translate(-1.5px, 1.5px) rotate(90deg); } 50% { transform: translate(-7.4px, 1.5px) rotate(180deg); } 75% { transform: translate(-1.5px, 1.5px) rotate(270deg); } }
.fk-credit:hover .fk-l { animation: fkLetter .6s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms + .1s); opacity: 1; }

@keyframes fkLetter { 0%, to { transform: none; } 50% { transform: translateY(-1.5px); fill: #c9f4ff; } }
.fk-credit:not(.is-in) .fk-m, .fk-credit:not(.is-in) .fk-cell { opacity: 1; transform: none; }

/* Forklia mark: always present; it only animates once in view. */
.fk-credit:not(.is-in) .fk-l { opacity: 1; }

@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr auto; }
}

@media (max-width: 560px) {
  .footer-row { justify-content: center; }
  .footer-row .footer-copy { text-align: center; }
}

/* ---------- Contact modal (DM thread) ---------- */

.social-tiles--dm { flex-wrap: nowrap; gap: 8px; }
.social-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(233, 226, 208, .22) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: tile-shine 4.5s ease-in-out infinite;
}

@keyframes tile-shine { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.social-tile--tt::before { animation-delay: 2.2s; }
.social-tiles--dm .social-tile { flex: 1; min-width: 0; min-height: 56px; padding: 7px 10px 7px 7px; gap: 9px; background: var(--white); color: var(--tinta); border: 1.5px solid var(--line-strong); }
.social-tiles--dm .social-tile-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--tinta); color: var(--eggshell); }
.social-tiles--dm .social-tile-name { font-size: 15px; }
.social-tiles--dm .social-tile-handle { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--indigo); opacity: 1; }

.social-tile--ig .social-tile-icon svg { animation: ig-breathe 2.8s ease-in-out infinite; }

@keyframes ig-breathe { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.14) rotate(-8deg); } }
.social-tile--tt .social-tile-icon svg { animation: tt-bop 1.6s ease-in-out infinite; }

@keyframes tt-bop { 0%, 100% { transform: none; } 25% { transform: translateY(-3px) rotate(-8deg); } 50% { transform: none; } 75% { transform: translateY(-2px) rotate(6deg); } }

/* DM: neutral social tiles, so they don't compete with the colored cards. */
.social-tiles--dm .social-tile:hover { border-color: var(--tinta); box-shadow: none; }
.social-tile:hover .social-tile-icon svg { animation: icon-pop .6s var(--ease-spring); }

.dm {
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  width: min(420px, calc(100% - 24px));
  max-width: none;
  max-height: none;
  color: var(--tinta);
  overflow: visible;
}
.dm-window {
  display: flex;
  flex-direction: column;
  height: min(700px, calc(100dvh - 24px));
  border-radius: var(--r-l);
  background: var(--eggshell);
  overflow: hidden;
  outline: none;
}

.dm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  order: 0;
}
.dm-avatar { position: relative; flex: none; width: 44px; height: 44px; }
.dm-online {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--oliva);
  border: 2.5px solid var(--white);
}
.dm-who { min-width: 0; }
.dm-name { font-weight: 800; font-size: 16px; line-height: 1.2; }
.dm-status { font-size: 13px; color: var(--indigo); }

.dm-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  order: 1;
}
.dm-thread > * { flex-shrink: 0; }
.dm-day { align-self: center; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--indigo); }
.dm-msg {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 18px 18px 18px 6px;
  background: var(--white);
  font-family: var(--body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0;
}
.dm-msg--big {
  padding: 14px 16px;
  background: var(--terracota);
  color: var(--eggshell);
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.02;
}
.dm-user {
  align-self: flex-end;
  border-radius: 18px 18px 6px 18px;
  background: var(--indigo);
  color: var(--eggshell);
  word-break: break-word;
}
.dm-share {
  display: block;
  width: 86%;
  border-radius: var(--r-m);
  background: var(--white);
  text-decoration: none;
  overflow: hidden;
  transition: transform .35s var(--ease-spring);
}
.dm-share-band {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  color: var(--eggshell);
}
.dm-share-title { font-weight: 700; font-size: 16px; }
.dm-share-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px 14px 14px; }
.dm-share-sub { display: block; font-size: 14px; color: var(--indigo); }
.dm-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--tinta);
  color: var(--eggshell);
  font-size: 14px;
  font-weight: 700;
  transition: gap .3s var(--ease-out);
}

.dm-typing {
  display: none;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 18px 18px 18px 6px;
  background: var(--white);
}
.dm-quick-label { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--indigo); }

.dm-compose { display: flex; align-items: center; gap: 8px; padding: 8px 12px 14px; order: 3; }
.dm-input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line-strong);
  background: var(--white);
  color: var(--tinta);
  font: 500 16px var(--body);
}
.dm-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--terracota);
  color: var(--eggshell);
  transition: transform .3s var(--ease-spring);
}

/* DM profile column (desktop) / social bar (phones) */
.dm-profile { order: 2; padding: 10px 14px 4px; border-top: 1px solid var(--line); }
.dm-profile-card { display: none; }
.dm-cards { display: grid; gap: 8px; width: 86%; }
.dm::backdrop { background: rgba(42, 38, 32, .6); backdrop-filter: blur(3px); }
.dm-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.dm-share-btn svg { transition: transform .3s var(--ease-out); }
.dm-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta); animation: typing 1s ease-in-out infinite; }

@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
.dm-input::placeholder { color: var(--indigo); opacity: .75; }
.dm-send svg { margin-left: -2px; }
.dm-share:hover { transform: translateY(-2px); }
.dm-share--terra .dm-share-band { background: var(--terracota); }
.dm-share--indigo .dm-share-band { background: var(--indigo); }
.dm-share--oliva .dm-share-band { background: var(--oliva); }
.dm-share--terra .dm-share-btn { background: var(--terracota); }
.dm-share--indigo .dm-share-btn { background: var(--indigo); }
.dm-share--oliva .dm-share-btn { background: var(--oliva); }
.dm-typing.is-on { display: inline-flex; }
.dm-thread > .is-arrived { animation: bubble-in .42s var(--ease-spring); transform-origin: 0 100%; }

@keyframes bubble-in { from { opacity: 0; transform: scale(.6) translateY(10px); } }
.dm-input:focus { border-color: var(--terracota); outline: none; }
.dm-send:hover { transform: rotate(-12deg) scale(1.06); }
.dm-cards .dm-share { width: 100%; }
.dm-typing span:nth-child(2) { animation-delay: .15s; }
.dm-typing span:nth-child(3) { animation-delay: .3s; }
.dm[open] .dm-window { animation: dm-in .5s var(--ease-out); }
.dm-share:hover .dm-share-btn { gap: 10px; }

.js .dm-thread > .is-pending { display: none; }
.dm-thread > .dm-user.is-arrived { transform-origin: 100% 100%; }
.dm-share:hover .dm-share-btn svg { transform: translateX(2px); }

/* Desktop: a wide two-column DM so everything fits without scrolling. */
@media (min-width: 900px) {
  .dm { width: min(960px, calc(100% - 48px)); }
  .dm-window {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "profile head" "profile thread" "profile compose";
    height: auto;
    max-height: calc(100dvh - 40px);
    grid-template-columns: 250px minmax(0, 1fr);
  }
  .dm-head { grid-area: head; }
  .dm-thread { grid-area: thread; padding: 18px 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-auto-rows: min-content; column-gap: 22px; align-items: start; overflow-y: auto; }
  .dm-compose { grid-area: compose; padding: 10px 22px 18px; }
  .dm-profile {
    grid-area: profile;
    display: flex;
    flex-direction: column;
    border-top: 0;
    border-right: 1px solid var(--line);
    background: var(--white);
    padding: 26px 18px 20px;
  }
  .dm-profile-card { display: block; margin-bottom: auto; padding-bottom: 22px; text-align: center; }
  .dm-profile-avatar { margin: 0 auto 14px; padding: 4px; border-radius: 50%; border: 3px solid var(--terracota); object-fit: cover; width: 88px; height: 88px; }
  .dm-profile-name { font-family: var(--display); font-weight: 800; line-height: 1; font-size: 27px; }
  .dm-profile-handle { margin-top: 4px; font-size: 14px; color: var(--indigo); }
  .dm-profile-bio { margin-top: 12px; font-size: 14px; line-height: 1.45; }
  .social-tiles--dm { flex-direction: column; flex-wrap: nowrap; }
  .social-tiles--dm .social-tile { flex: none; width: 100%; min-height: 64px; padding: 9px 14px 9px 9px; }
  .social-tiles--dm .social-tile-icon { width: 44px; height: 44px; }
  .social-tiles--dm .social-tile-name { font-size: 16px; }
  .social-tiles--dm .social-tile-handle { font-size: 13px; white-space: normal; }
  .dm-head .dm-avatar { display: none; }
  .dm-msg { max-width: 100%; justify-self: start; }
  .dm-msg--big { font-size: 28px; }
  .dm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 10px; }
  .dm-cards .dm-share { flex-direction: column; display: grid; grid-template-columns: 150px minmax(0, 1fr); }
  .dm-cards .dm-share-band { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 0; padding: 14px; }
  .dm-cards .dm-share-body { flex: 1; justify-content: center; gap: 8px; padding: 12px 14px; }
}

@media (max-width: 560px) {

  /* DM becomes a bottom sheet, like on the phone apps. */
  .dm { width: 100%; margin: auto 0 0; }
  .dm-window { height: min(92dvh, 760px); border-radius: var(--r-l) var(--r-l) 0 0; }
  .dm[open] .dm-window { animation: dm-sheet .5s var(--ease-out); }
  .dm-cards { width: 100%; }
}

/* DM desktop: wider, messages and cards side by side, nothing to scroll. */
@media (min-width: 900px) {
  .dm { width: min(1160px, calc(100% - 48px)); }
  .dm-thread > * { grid-column: 1; }
  .dm-thread > .dm-day { justify-self: center; }
  .dm-thread > .dm-cards { grid-column: 2; grid-row: 1 / span 12; align-self: start; }
  .dm-user { justify-self: end; }
  .dm-cards { grid-template-columns: 1fr; gap: 10px; }
  .dm-cards .dm-share-title { font-size: 15px; line-height: 1.2; }
  .dm-cards .dm-share-sub { font-size: 13.5px; }
  .dm-cards .dm-share-btn { min-height: 32px; font-size: 13px; }
}

/* ---------- Follow modal ---------- */

/* Follow modal */
.follow { margin: auto; padding: 0; border: 0; background: transparent; width: min(460px, calc(100% - 24px)); max-width: none; max-height: none; color: var(--tinta); overflow: visible; }
.follow-card { position: relative; padding: 30px 24px 24px; border-radius: var(--r-l); background: var(--eggshell); outline: none; }
.follow-close { position: absolute; top: 14px; right: 14px; }
.follow-head { text-align: center; margin-bottom: 20px; }
.follow-avatar { width: 92px; height: 92px; margin: 0 auto 12px; padding: 4px; border-radius: 50%; border: 3px solid var(--terracota); object-fit: cover; }
.follow-title { font-size: 36px; }
.follow-sub { margin-top: 6px; font-size: 15px; color: var(--indigo); }
.follow-main { display: grid; gap: 10px; }
.follow-big {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 12px;
  border-radius: var(--r-m);
  color: var(--eggshell);
  text-decoration: none;
  transition: transform .35s var(--ease-spring);
}
.follow-big--ig { background: var(--terracota); }
.follow-big--tt { background: var(--tinta); }
.follow-big-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: rgba(233, 226, 208, .16); position: relative; transition: transform .4s var(--ease-spring); }
.follow-big-text { display: grid; line-height: 1.2; }
.follow-big-name { font-weight: 800; font-size: 17px; }
.follow-big-handle { font-size: 14px; opacity: .9; }
.follow-big-btn { margin-left: auto; padding: 8px 16px; border-radius: var(--r-pill); background: var(--eggshell); color: var(--tinta); font-size: 14px; font-weight: 800; }
.follow::backdrop { background: rgba(42, 38, 32, .6); backdrop-filter: blur(3px); }
.follow-big-icon::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  border: 2px solid currentColor;
  opacity: 0;
  animation: icon-ring 2.4s ease-out 1s infinite;
}
.follow-big:hover { transform: translateY(-3px); }
.follow[open] .follow-card { animation: dm-in .5s var(--ease-out); }
.follow[open] .follow-big-icon { animation: icon-pop .7s var(--ease-spring) both; }

/* Follow modal: icons pop in and wiggle; a ring breathes around them. */
.follow-big:hover .follow-big-icon { transform: rotate(-10deg) scale(1.1); }
.follow[open] .follow-big--tt .follow-big-icon { animation-delay: .12s; }

/* ---------- Menu entrance ---------- */

.js .header-inner { transition: box-shadow .3s, transform .6s var(--ease-spring); }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .header-inner { position: relative; }
}

@media (max-width: 560px) {
  .header-inner { padding: 0 7px 0 16px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .loader { animation: loader-failsafe 0s 1.5s forwards !important; }
  .js .site-header:not(.is-in) .header-inner { transform: none; }
  .js .main-nav a, .js .header-actions > * { opacity: 1; transform: none; }
  .js .reel .reel-media { animation: none; }
  .bts-photo::after { animation: none !important; }
  .fstat { animation: none; }
  .goal-fill,
  .goal-head,
  .vn-dot,
  .viral-next-cta,
  .bts-bubbles.is-in .bts-bubble { animation: none !important; }
  .big-dot,
  .viral-card--hero .reel-card-link::before,
  .react-ico svg { animation: none !important; }
  .million-tag,
  .million-tag::after,
  .viral-card--hero .viral-views .count,
  .deck-cta-dot,
  .deck-btn { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .when::before,
  .hero-loc.is-in,
  .loc-pin svg,
  .loc-flag,
  .mini-bars i,
  .reels-bar i { animation: none !important; }
  .rank-card::before,
  .rank-row--me,
  .medal--1,
  .clap .clap-top,
  .road-step.is-hit b,
  .road-step.is-hit::after { animation: none !important; }
  .contact-cta, .contact-cta::before, .contact-cta::after, .cta-dot, .cta-arrow { animation: none !important; }
  .how-bubble.is-in, .how-bubble-avatar, .contact-logo .logo-dot, .social-tile::before,
  .social-tile-icon svg, .eq i, .road-step.is-current b::after { animation: none !important; }
  .follow-big-icon::after, .how-bubble-mark { animation: none !important; }
  .viral-next-cta svg,
.chart-peak::after { animation: none !important; }
}

/* Performance: loops pause in sections that are off screen. */
.is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .rank-row--me::after, .rank-row--me, .fyp-for, .sum-meter i, .bts-photo.is-in .brand-check { animation: none !important; }
  .deck.is-alive .deck-face,
  .deck-card--cta .deck-face { animation: none !important; }
  .js .lqip:not(.is-loaded) { filter: none; scale: 1; }
  .js .story:not(.is-active) { filter: none; }
}


/* DM honeypot: off screen for people, still in the form for bots. */
.dm-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}