@font-face {
  font-family: "Inter 18pt";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./assets/fonts/Inter_18pt-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Inter 18pt";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("./assets/fonts/Inter_18pt-Medium.ttf") format("truetype");
}

/* Flow PRO step 1. Design canvas 1600×1200.
   x, width and font-size scale with --ux (100vw / 1600).
   y, height and line-height scale with --uy (100dvh / 1200, 100vh first).
   At 1600×1200 both factors are 1, so a mockup pixel is a CSS pixel.
   Every text on this page uses the same letter-spacing. */
:root {
  --ux: calc(100vw / 1600);
  --uy: calc(100vh / 1200);
  --uy: calc(100dvh / 1200);
  /* One scale for the home hero, so font-size and line-height stay in
     proportion and follow the shorter window axis. */
  --hero-s: min(var(--ux), var(--uy));
  --hf: 1;
  /* Header scale. One factor for x, y and size, so the header keeps the
     mockup proportions at any window shape. 1 at 1600x1200. */
  --hd: min(var(--ux), var(--uy));
  --ink: #000000;
  --paper: #ffffff;
  --box: #d7d7d7;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter 18pt", sans-serif;
  font-weight: 500;
  letter-spacing: -0.05em;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

/* em is resolved on each element, so every text is -0.05em of its own size.
   Buttons do not inherit the used length from body. */
*, *::before, *::after { letter-spacing: -0.05em; }

button, a { font-family: inherit; }

.fp-head {
  position: fixed;
  z-index: 5;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  pointer-events: none;
  color: var(--ink);
}

/* First paint is one word. The isotipo and the resting ".agency" stay hidden
   until the first scroll. Resting header (mockup 1600x1200): the isotipo
   takes the place of "tribeca" on the left, from the top of the "b" to the
   baseline; ".agency" ends 36px before the menu and rises 8.5px so its
   x-height sits on the isotipo and menu line. */
.fp-wordmark {
  position: absolute;
  left: calc(46 * var(--hd));
  top: calc(24.75 * var(--hd));
  margin: 0;
  font-weight: 500;
  font-size: calc(65.6 * var(--hd));
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  color: var(--ink);
}

html:not(.fp-split) .fp-logo,
html:not(.fp-split) .fp-agency { visibility: hidden; }

html.fp-split .fp-wordmark { visibility: hidden; }

.fp-logo {
  position: absolute;
  left: calc(66 * var(--hd));
  top: calc(32 * var(--hd));
  width: calc(22.5 * var(--hd));
  height: calc(49.5 * var(--hd));
  display: block;
  pointer-events: auto;
  cursor: pointer;
}

.fp-agency {
  position: absolute;
  left: auto;
  right: calc(114.5 * var(--hd));
  top: calc(17.25 * var(--hd));
  width: max-content;
  margin: 0;
  font-weight: 500;
  font-size: calc(65.6 * var(--hd));
  line-height: 1;
  pointer-events: none;
}

/* Menu mark 20x15 on the mockup. The ::before keeps a 44px hit area. */
.fp-menu {
  position: absolute;
  left: auto;
  right: calc(58 * var(--hd));
  top: calc(51.5 * var(--hd));
  display: grid;
  place-items: center;
  width: calc(20 * var(--hd));
  height: calc(15 * var(--hd));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  pointer-events: auto;
  cursor: default;
}

.fp-menu::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.fp-menu svg {
  display: block;
  width: 100%;
  height: auto;
}

.fp-stage {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.fp-block {
  position: relative;
  height: 100vh;
  height: 100dvh;
  background: var(--paper);
  overflow: hidden;
}

.fp-photo {
  position: absolute;
  background: var(--box);
}

.fp-display {
  position: absolute;
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  font-size: calc(59 * var(--ux));
  line-height: calc(71 * var(--uy));
}

.fp-display span { display: block; white-space: nowrap; }

/* Home only. Inter 18pt Medium. 64px type. Leading is 4% above 78.1. */
.fp-hero {
  left: calc(159 * var(--ux));
  top: calc(494 * var(--uy) + var(--hero-nudge, 0px));
  z-index: 1;
  font-weight: 500;
  font-size: calc(64 * var(--hero-s) * var(--hf));
  line-height: calc(78.1 * 1.04 * var(--hero-s) * var(--hf));
}
.fp-hero .fp-hero-mob { display: none; }
.fp-create {
  position: absolute;
  display: grid;
  place-items: center;
  width: calc(225 * var(--ux));
  height: calc(73 * var(--uy));
  border: max(1px, calc(1 * var(--ux))) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  z-index: 1;
  font-size: calc(24 * var(--ux));
  line-height: 1;
}

.fp-block[data-stop="005"] .fp-create { left: calc(155 * var(--ux)); top: calc(750 * var(--uy)); }
.fp-mob { display: none; }

/* blocks:start */
/* Home blocks 006-014 (FLOW HOME TA CC). Mockup px on 1600×1200:
   x and widths follow --ux, y and heights --uy, type follows --hd.
   Titles are Inter 18pt Medium 65.1px; leading per block as drawn. */
.fp-img {
  position: absolute;
  display: block;
  object-fit: cover;
  object-position: 50% 18%; /* faces near the top: heads never cut */
  background: var(--box);
}

.fp-title {
  position: absolute;
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  font-size: calc(65.1 * var(--hd));
  line-height: calc(var(--lh) * var(--hd));
}

.fp-title span { display: block; white-space: nowrap; }

.fp-title u {
  text-decoration-thickness: calc(3.5 * var(--hd));
  text-underline-offset: calc(6 * var(--hd));
}

.fp-block .fp-create.fp-btn {
  width: calc(var(--bw) * var(--ux));
  font-size: calc(25.5 * var(--hd));
}

/* Vertical carousel: one image per scroll step, the track slides up.
   Position marks 17px apart, centered on the screen. */
.fp-carousel {
  position: absolute;
  overflow: hidden;
  background: var(--box);
}

.fp-carousel-track {
  height: 100%;
  transform: translateY(calc(var(--k, 0) * -100%));
}

html.fp-anim .fp-carousel-track { transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); }

.fp-carousel-track img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%; /* faces near the top: heads never cut */
}

.fp-dots {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fp-dots li {
  width: calc(18 * var(--ux));
  height: max(1px, calc(2 * var(--uy)));
  margin: 0 0 calc(15 * var(--uy));
  background: #e9e9e9;
}

.fp-dots li:last-child { margin-bottom: 0; }

html.fp-anim .fp-dots li { transition: background-color 0.3s linear, width 0.3s linear, margin 0.3s linear; }

.fp-dots li.is-on {
  width: calc(22 * var(--ux));
  margin-left: calc(-2 * var(--ux));
  background: #7c7c7c;
}

.fp-hint {
  position: absolute;
  right: calc((1600 - 764) * var(--ux));
  top: calc(885 * var(--uy));
  margin: 0;
  font-weight: 500;
  font-size: calc(18.6 * var(--hd));
  line-height: 1.3;
  white-space: nowrap;
  text-align: right;
}

.fp-hint-icon {
  position: absolute;
  left: calc(749 * var(--ux));
  top: calc(854 * var(--uy));
  width: calc(14 * var(--hd));
  height: calc(18 * var(--hd));
}

.fp-block[data-stop="006"] .fp-video { left: calc(0 * var(--ux)); top: calc(0 * var(--uy)); width: calc(1600 * var(--ux)); height: calc(900 * var(--uy)); }
.fp-block[data-stop="006"] .fp-title { --lh: 62.5; left: calc(161 * var(--ux)); top: calc(946.08 * var(--uy)); }
.fp-block[data-stop="006"] .fp-create { --bw: 187; left: calc(1339 * var(--ux)); top: calc(972 * var(--uy)); }
.fp-block[data-stop="007"] .fp-img:nth-of-type(1) { left: calc(157 * var(--ux)); top: calc(198 * var(--uy)); width: calc(303 * var(--ux)); height: calc(375 * var(--uy)); }
.fp-block[data-stop="007"] .fp-img:nth-of-type(2) { left: calc(460 * var(--ux)); top: calc(198 * var(--uy)); width: calc(302 * var(--ux)); height: calc(375 * var(--uy)); }
.fp-block[data-stop="007"] .fp-img:nth-of-type(3) { left: calc(877 * var(--ux)); top: calc(198 * var(--uy)); width: calc(302 * var(--ux)); height: calc(375 * var(--uy)); }
.fp-block[data-stop="007"] .fp-img:nth-of-type(4) { left: calc(1179 * var(--ux)); top: calc(198 * var(--uy)); width: calc(302 * var(--ux)); height: calc(375 * var(--uy)); }
.fp-block[data-stop="007"] .fp-img:nth-of-type(5) { left: calc(877 * var(--ux)); top: calc(627 * var(--uy)); width: calc(302 * var(--ux)); height: calc(376 * var(--uy)); }
.fp-block[data-stop="007"] .fp-img:nth-of-type(6) { left: calc(1179 * var(--ux)); top: calc(627 * var(--uy)); width: calc(302 * var(--ux)); height: calc(376 * var(--uy)); }
.fp-block[data-stop="007"] .fp-title { --lh: 71; left: calc(156 * var(--ux)); top: calc(634.83 * var(--uy)); }
.fp-block[data-stop="007"] .fp-create { --bw: 224; left: calc(162 * var(--ux)); top: calc(820 * var(--uy)); }
.fp-block[data-stop="008"] .fp-video { left: calc(0 * var(--ux)); top: calc(430 * var(--uy)); width: calc(1600 * var(--ux)); height: calc(770 * var(--uy)); }
.fp-block[data-stop="008"] .fp-title { --lh: 64; left: calc(225 * var(--ux)); top: calc(237.33 * var(--uy)); }
.fp-block[data-stop="008"] .fp-create { --bw: 224; left: calc(1216 * var(--ux)); top: calc(264 * var(--uy)); }
.fp-block[data-stop="009"] .fp-carousel { left: calc(741 * var(--ux)); top: calc(0 * var(--uy)); width: calc(859 * var(--ux)); height: calc(1200 * var(--uy)); }
.fp-block[data-stop="009"] .fp-dots { left: calc(702 * var(--ux)); }
.fp-block[data-stop="009"] .fp-title { --lh: 63; left: calc(159 * var(--ux)); top: calc(422.83 * var(--uy)); }
.fp-block[data-stop="009"] .fp-create { --bw: 187; left: calc(162 * var(--ux)); top: calc(845 * var(--uy)); }
.fp-block[data-stop="010"] .fp-video { left: calc(137 * var(--ux)); top: calc(196 * var(--uy)); width: calc(1326 * var(--ux)); height: calc(747 * var(--uy)); }
.fp-block[data-stop="010"] .fp-title { --lh: 64; left: calc(151 * var(--ux)); top: calc(1002.33 * var(--uy)); }
.fp-block[data-stop="010"] .fp-create { --bw: 187; left: calc(1281 * var(--ux)); top: calc(998 * var(--uy)); }
.fp-block[data-stop="011"] .fp-carousel { left: calc(0 * var(--ux)); top: calc(0 * var(--uy)); width: calc(798 * var(--ux)); height: calc(1200 * var(--uy)); }
.fp-block[data-stop="011"] .fp-dots { left: calc(832 * var(--ux)); }
.fp-block[data-stop="011"] .fp-title { --lh: 71; left: calc(933 * var(--ux)); top: calc(493.83 * var(--uy)); }
.fp-block[data-stop="011"] .fp-create { --bw: 187; left: calc(939 * var(--ux)); top: calc(760 * var(--uy)); }
.fp-block[data-stop="012"] .fp-img:nth-of-type(1) { left: calc(156 * var(--ux)); top: calc(228 * var(--uy)); width: calc(284 * var(--ux)); height: calc(424 * var(--uy)); }
.fp-block[data-stop="012"] .fp-img:nth-of-type(2) { left: calc(496 * var(--ux)); top: calc(227 * var(--uy)); width: calc(618 * var(--ux)); height: calc(425 * var(--uy)); }
.fp-block[data-stop="012"] .fp-img:nth-of-type(3) { left: calc(1170 * var(--ux)); top: calc(227 * var(--uy)); width: calc(280 * var(--ux)); height: calc(424 * var(--uy)); }
.fp-block[data-stop="012"] .fp-img:nth-of-type(4) { left: calc(835 * var(--ux)); top: calc(693 * var(--uy)); width: calc(618 * var(--ux)); height: calc(424 * var(--uy)); }
.fp-block[data-stop="012"] .fp-title { --lh: 64; left: calc(159 * var(--ux)); top: calc(724.33 * var(--uy)); }
.fp-block[data-stop="012"] .fp-create { --bw: 224; left: calc(159 * var(--ux)); top: calc(959 * var(--uy)); }
.fp-block[data-stop="013"] .fp-img:nth-of-type(1) { left: calc(801 * var(--ux)); top: calc(0 * var(--uy)); width: calc(799 * var(--ux)); height: calc(1200 * var(--uy)); }
.fp-block[data-stop="013"] .fp-title { --lh: 62.6; left: calc(158 * var(--ux)); top: calc(490.03 * var(--uy)); }
.fp-block[data-stop="014"] .fp-img:nth-of-type(1) { left: calc(167 * var(--ux)); top: calc(323 * var(--uy)); width: calc(374 * var(--ux)); height: calc(375 * var(--uy)); }
.fp-block[data-stop="014"] .fp-img:nth-of-type(2) { left: calc(613 * var(--ux)); top: calc(323 * var(--uy)); width: calc(374 * var(--ux)); height: calc(375 * var(--uy)); }
.fp-block[data-stop="014"] .fp-img:nth-of-type(3) { left: calc(1059 * var(--ux)); top: calc(323 * var(--uy)); width: calc(374 * var(--ux)); height: calc(375 * var(--uy)); }
.fp-block[data-stop="014"] .fp-title { --lh: 64; left: calc(161 * var(--ux)); top: calc(739.33 * var(--uy)); }
.fp-block[data-stop="014"] .fp-create { --bw: 224; left: calc(1206 * var(--ux)); top: calc(765 * var(--uy)); }
/* blocks:end */

/* Intro (FLOW HOME TA CC 001-003). One scale, so the mark stays the deck’s
   159×350 proportion. Words are box-centered at 204.5px on 1600×1200.
   Steps move with the scroll, 0.5s crossfade each: mark, tribeca, .agency,
   then the home. */
:root {
  --s: min(calc(100vw / 1600), calc(100vh / 1200));
  --s: min(calc(100vw / 1600), calc(100dvh / 1200));
}

.fp-curtains { display: none !important; }

.fp-intro {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--paper);
  color: var(--ink);
}

.fp-intro[hidden] { display: none !important; }

.fp-intro-mark,
.fp-intro-word {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  opacity: 0;
  transform: translate(-50%, -50%);
}

html.fp-anim .fp-intro-mark,
html.fp-anim .fp-intro-word {
  transition: opacity 0.5s linear;
}

html[data-phase="0"] .fp-intro-mark,
html:not([data-phase]) .fp-intro-mark { opacity: 1; }
html[data-phase="1"] .fp-word-tribeca { opacity: 1; }
html[data-phase="2"] .fp-word-agency { opacity: 1; }
html.fp-anim .fp-intro { transition: opacity 0.5s linear, visibility 0s linear 0s; }
html.fp-anim[data-phase="3"] .fp-intro { transition: opacity 0.5s linear, visibility 0s linear 0.5s; }
html[data-phase="3"] .fp-intro { opacity: 0; visibility: hidden; pointer-events: none; }

.fp-intro-mark {
  width: calc(159 * var(--s));
  height: calc(350 * var(--s));
}

.fp-intro-word {
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.fp-word-tribeca { font-size: calc(204.5 * var(--s)); }
.fp-word-agency { font-size: calc(204.5 * var(--s)); }

.fp-curtains {
  position: fixed;
  inset: 0;
  z-index: 16;
  pointer-events: none;
}

.fp-curtains[hidden] { display: none !important; }

.fp-curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 1px);
  background: var(--paper);
  transition: none;
}

.fp-curtain-left { left: 0; transform: translateX(calc(var(--p, 0) * -100%)); }
.fp-curtain-right { right: 0; transform: translateX(calc(var(--p, 0) * 100%)); }

.fp-lucky {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  background: transparent;
}

.fp-cookies {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.82);
}

.fp-cookies[hidden] { display: none !important; }

.fp-cookies-card {
  width: min(440px, 100%);
  padding: 28px 24px 24px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}

.fp-cookies-title {
  margin: 0 0 12px;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1;
}

.fp-cookies-copy {
  margin: 0 0 20px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.35;
}

.fp-cookies-actions {
  display: flex;
  gap: 12px;
}

.fp-cookies-btn {
  flex: 1;
  height: 48px;
  margin: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .fp-intro-mark,
  .fp-intro-word,
  .fp-curtain {
    transition: none !important;
  }
}

/* Phone Home. One scale (--m) for x and y. Breakpoint keeps 1440/1600 on the desktop canvas. */
@media (max-width: 800px) {
  html.fp-agency-gone .fp-agency { visibility: hidden; }

  :root {
    /* Intro on the phone: ".agency" spans the 44px gutters. */
    --s: min(calc(100vw / 896), calc(100dvh / 1938));
    --m: calc(100vw / 390);
    --hero-s: min(var(--m), 100vh / 844);
    --hero-s: min(var(--m), 100dvh / 844);
  }

  .fp-wordmark {
    left: calc(44 * var(--m));
    top: calc(36 * var(--m));
    font-size: calc(48.5 * var(--m));
  }

  /* Phone mockup 390x844. */
  .fp-logo {
    left: calc(45 * var(--m));
    right: auto;
    top: calc(40 * var(--m));
    width: calc(22 * var(--m));
    height: calc(48.5 * var(--m));
  }

  .fp-agency {
    left: auto;
    right: calc(110.7 * var(--m));
    top: calc(35.5 * var(--m));
    transform: none;
    font-size: calc(49.2 * var(--m));
  }

  .fp-menu {
    right: calc(38 * var(--m));
    top: calc(56 * var(--m));
    width: calc(20 * var(--m));
    height: calc(15 * var(--m));
  }

  .fp-hero {
    left: calc(46.5 * var(--m));
    top: calc(335 * var(--hero-s) + var(--hero-nudge, 0px));
    font-size: calc(27 * var(--hero-s) * var(--hf));
    line-height: calc(34.65 * 1.04 * var(--hero-s) * var(--hf));
  }

  .fp-hero .fp-hero-desk { display: none; }
  .fp-hero .fp-hero-mob { display: block; }

  .fp-block[data-stop="005"] .fp-create {
    left: calc(39 * var(--m));
    top: calc(618 * var(--m));
    width: calc(219 * var(--m));
    height: calc(71 * var(--m));
    border-width: 1px;
    font-size: calc(23.5 * var(--m));
  }

  html:not(.fp-split) .fp-logo,
  html:not(.fp-split) .fp-agency { visibility: visible; }
  .fp-wordmark { visibility: hidden; }

  .fp-stage {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .fp-block { display: none; }
  .fp-mob { display: block; }

  .fp-mob-block {
    --mob-chrome: calc(108 * var(--m));
    position: relative;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--mob-chrome) calc(28 * var(--m)) calc(40 * var(--m));
    background: var(--paper);
  }

  .fp-mob-hero,
  .fp-mob-copy {
    margin: 0;
    font-weight: 500;
    font-size: calc(27 * var(--hero-s) * var(--hf));
    line-height: calc(34.65 * 1.04 * var(--hero-s) * var(--hf));
  }

  .fp-mob-hero { letter-spacing: -0.05em; }

  .fp-mob .fp-create {
    position: relative;
    left: auto;
    top: auto;
    width: calc(168 * var(--m));
    height: calc(56 * var(--m));
    margin-top: calc(28 * var(--m));
    border-width: 1px;
    font-size: calc(23.5 * var(--m));
  }

  /* Frame 001 from the phone mockup: copy at x 47, 29.2px on a 31.6px
     line; Create 219x71 at x 40. Vertical steps follow --hero-s. */
  .fp-mob-block[data-frame="001"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: calc(var(--m001-top) * var(--hero-s)) calc(47 * var(--m)) calc(40 * var(--m));
    --m001-top: 336;
  }

  .fp-mob-block[data-frame="001"] .fp-mob-hero {
    font-size: calc(29.2 * var(--hero-s) * var(--hf));
    line-height: calc(31.6 * var(--hero-s) * var(--hf));
  }

  .fp-mob-block[data-frame="001"] .fp-create {
    width: calc(219 * var(--m));
    height: calc(71 * var(--m));
    margin-top: calc(var(--m001-gap) * var(--hero-s));
    margin-left: calc(-7 * var(--m));
    font-size: calc(23.5 * var(--m));
    --m001-gap: 92;
  }

  /* Frames 002-004 from FLOW HOME TA CC 016-018 (phone 390×844); frames
     005-010 follow the same system for the desktop blocks 008 and 010-014.
     Copy is 30.4px on a 31.5px line; buttons 129×49 with 18px labels. */
  .fp-mf {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0 calc(40 * var(--m));
  }

  .fp-mf .fp-mob-copy {
    font-size: calc(30.4 * var(--m));
    line-height: calc(31.5 * var(--m));
    max-width: none;
  }

  .fp-mf .fp-mob-copy span { display: block; white-space: nowrap; }

  .fp-mf .fp-mob-copy u {
    text-decoration-thickness: calc(1.6 * var(--m));
    text-underline-offset: calc(3 * var(--m));
  }

  .fp-mob .fp-create.fp-mob-btn {
    flex: none;
    width: calc(129 * var(--m));
    height: calc(49 * var(--m));
    margin: calc(24 * var(--m)) 0 0 calc(40 * var(--m));
    padding: 0;
    font-size: calc(18 * var(--m));
  }

  .fp-mob-img {
    display: block;
    flex: none;
    width: 100%;
    object-fit: cover;
    object-position: 50% 18%;
    background: var(--box);
  }

  .fp-mob-img.is-fill {
    flex: 1 1 auto;
    min-height: calc(260 * var(--m));
    height: 0;
  }

  .fp-mf > .fp-mob-copy { margin: calc(28 * var(--m)) calc(32 * var(--m)) 0 calc(40 * var(--m)); }

  .fp-mob-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin-top: calc(25.4 * var(--m));
    padding: 0 calc(28 * var(--m)) 0 calc(32 * var(--m));
    box-sizing: border-box;
  }

  .fp-mob-row .fp-mob-copy { flex: none; margin: 0; }
  .fp-mob-row .fp-create.fp-mob-btn { margin: calc(22.9 * var(--m)) 0 0; }

  /* 002: photo to the top edge, copy and Create under it. */
  .fp-mf[data-frame="002"] .fp-mob-img { height: calc(582 * var(--m)); }
  .fp-mf[data-frame="002"] > .fp-mob-copy { margin-top: calc(27.9 * var(--m)); margin-left: calc(39.5 * var(--m)); }

  /* 003: photo, copy with Create on one row, photo to the bottom. */
  .fp-mf[data-frame="003"] { padding-top: calc(140 * var(--m)); padding-bottom: 0; }
  .fp-mf[data-frame="003"] .fp-mob-img:first-child { height: calc(269 * var(--m)); }
  .fp-mf[data-frame="003"] .fp-mob-img.is-fill { margin-top: calc(49 * var(--m)); }

  /* 004: copy on top, photo to the bottom. */
  .fp-mf[data-frame="004"],
  .fp-mf[data-frame="005"],
  .fp-mf[data-frame="009"] { padding-top: calc(156.5 * var(--m)); padding-bottom: 0; }
  .fp-mf[data-frame="004"] > .fp-mob-copy,
  .fp-mf[data-frame="009"] > .fp-mob-copy { margin: 0 0 0 calc(30 * var(--m)); }
  .fp-mf[data-frame="004"] .fp-mob-img.is-fill,
  .fp-mf[data-frame="009"] .fp-mob-img.is-fill { margin-top: calc(32 * var(--m)); }
  .fp-mf[data-frame="005"] > .fp-mob-copy { margin: 0 0 0 calc(30 * var(--m)); }
  .fp-mf[data-frame="005"] .fp-mob-btn { margin-left: calc(30 * var(--m)); }
  .fp-mf[data-frame="005"] .fp-mob-img.is-fill { margin-top: calc(40 * var(--m)); }

  .fp-mob-hint {
    margin: calc(20 * var(--m)) 0 0 calc(30 * var(--m));
    font-weight: 500;
    font-size: calc(13 * var(--m));
    line-height: 1.3;
  }

  /* 006, 007: photo under the header, copy and button under it. */
  .fp-mf[data-frame="006"] { padding-top: calc(140 * var(--m)); }
  .fp-mf[data-frame="006"] .fp-mob-img { height: calc(420 * var(--m)); }
  .fp-mf[data-frame="007"] .fp-mob-img { height: calc(560 * var(--m)); object-position: 50% 20%; }

  /* Carousels on the phone: horizontal swipe, one image per snap. */
  .fp-mob-swipe {
    position: relative;
    flex: none;
    width: 100%;
  }

  .fp-mob-swipe.is-fill {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: calc(420 * var(--m));
  }

  .fp-mob-swipe-track {
    display: flex;
    width: 100%;
    height: calc(560 * var(--m));
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
    background: var(--box);
  }

  .fp-mob-swipe.is-fill .fp-mob-swipe-track { flex: 1 1 auto; height: auto; }
  .fp-mob-swipe-track::-webkit-scrollbar { display: none; }

  .fp-mob-swipe-track img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .fp-mob-dots {
    display: flex;
    justify-content: center;
    gap: calc(6 * var(--m));
    margin: 0;
    padding: calc(12 * var(--m)) 0 0;
    list-style: none;
  }

  .fp-mob-dots li {
    width: calc(12 * var(--m));
    height: 2px;
    background: #e9e9e9;
    transition: background-color 0.3s linear;
  }

  .fp-mob-dots li.is-on { background: #7c7c7c; }

  .fp-mf[data-frame="004"] .fp-mob-swipe.is-fill { margin-top: calc(32 * var(--m)); padding-bottom: calc(16 * var(--m)); }

  /* 008: four photos 2×2, 010: three faces in a row. */
  .fp-mf[data-frame="008"],
  .fp-mf[data-frame="010"] { padding-top: calc(140 * var(--m)); }
  .fp-mf[data-frame="010"] { justify-content: center; }
  .fp-mob-grid,
  .fp-mob-trio {
    display: grid;
    gap: calc(8 * var(--m));
    width: 100%;
    padding: 0 calc(32 * var(--m));
    box-sizing: border-box;
  }
  .fp-mob-grid { grid-template-columns: 1fr 1fr; }
  .fp-mob-grid .fp-mob-img { height: calc(200 * var(--m)); }
  .fp-mob-trio { grid-template-columns: 1fr 1fr 1fr; margin-top: calc(60 * var(--m)); }
  .fp-mob-trio .fp-mob-img { aspect-ratio: 1; height: auto; }
  .fp-mf[data-frame="008"] > .fp-mob-copy,
  .fp-mf[data-frame="010"] > .fp-mob-copy { margin-left: calc(32 * var(--m)); }
  .fp-mf[data-frame="008"] .fp-mob-btn,
  .fp-mf[data-frame="010"] .fp-mob-btn { margin-left: calc(32 * var(--m)); }
}

/* Menu: see nav.css (shared by every page). */

/* Search and Tom. Boxes scale with the file width.
   busca.png is 2832×2122. Tom files are 2834 wide. */
.fp-ov[hidden] { display: none !important; }

.fp-ov {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(216, 216, 215);
  color: #000;
}

.fp-ov-search { --sw: calc(100vw / 2832); }
.fp-ov-tom { --sw: calc(100vw / 2834); }

.fp-ov-search[hidden],
.fp-ov-tom[hidden] { display: none !important; }

.fp-ov-mark {
  position: absolute;
  left: calc(113 * var(--sw));
  top: calc(53 * var(--sw));
  width: calc(39 * var(--sw));
  height: calc(87 * var(--sw));
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.fp-ov-mark svg { display: block; width: 100%; height: 100%; }

.fp-ov-glass {
  position: absolute;
  left: calc(253 * var(--sw));
  top: calc(80 * var(--sw));
  width: calc(33 * var(--sw));
  height: calc(33 * var(--sw));
  display: block;
  color: #000;
}

.fp-ov-x {
  position: absolute;
  left: calc(2741 * var(--sw));
  top: calc(85 * var(--sw));
  width: calc(23 * var(--sw));
  height: calc(23 * var(--sw));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
}

.fp-ov-x svg { display: block; width: 100%; height: 100%; }

.fp-ov-busca {
  position: absolute;
  left: calc(291 * var(--sw));
  top: calc(1009 * var(--sw));
  margin: 0;
  color: #fff;
  font-weight: 500;
  font-size: calc(128 * var(--sw));
  line-height: 1;
  white-space: nowrap;
}

.fp-ov-tom .fp-crumb {
  position: absolute;
  top: calc(85 * var(--sw));
  right: calc(134 * var(--sw));
  margin: 0;
  color: #000;
  font-weight: 500;
  font-size: calc(32 * var(--sw));
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 800px) {
  .fp-ov-tom .fp-crumb {
    left: calc((100vw - min(318px, 100vw - 44px)) / 2 + 42px);
    right: auto;
    top: 15px;
    width: max-content;
    max-width: calc(100vw - 88px);
    font: 500 calc(48.5 * 100vw / 390)/1 "Inter 18pt", sans-serif;
    text-align: left;
    white-space: normal;
    pointer-events: auto;
    z-index: 2;
  }
  .fp-ov-tom .fp-crumb .is-now { cursor: pointer; }
  .fp-ov-tom .fp-crumb.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

.fp-ov-pill {
  position: absolute;
  left: calc(252 * var(--sw));
  top: calc(68.5 * var(--sw));
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--sw));
  width: calc(205 * var(--sw));
  height: calc(56 * var(--sw));
  margin: 0;
  padding: 0 0 0 calc(16 * var(--sw));
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: calc(28 * var(--sw));
  line-height: 1;
}

.fp-ov-pill svg {
  width: calc(28 * var(--sw));
  height: calc(28 * var(--sw));
  display: block;
  flex: none;
}

.fp-ov-hello span {
  position: absolute;
  left: calc(290 * var(--sw));
  margin: 0;
  color: #fff;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.fp-ov-hello span:nth-child(1) {
  top: calc(945 * var(--sw));
  font-size: calc(123 * var(--sw));
}

.fp-ov-hello span:nth-child(2) {
  top: calc(1074 * var(--sw));
  font-size: calc(128 * var(--sw));
}

.fp-ov-tom.is-typing .fp-ov-hello span {
  color: rgb(226, 226, 225);
  font-size: calc(72 * var(--sw));
}

.fp-ov-tom.is-typing .fp-ov-hello span:nth-child(1) { top: calc(318 * var(--sw)); }
.fp-ov-tom.is-typing .fp-ov-hello span:nth-child(2) { top: calc(448 * var(--sw)); }

.fp-ov-field {
  position: absolute;
  right: calc(250 * var(--sw));
  top: calc(656 * var(--sw));
  width: calc(1350 * var(--sw));
  height: calc(257 * var(--sw));
  margin: 0;
  padding: 0;
  border: 0;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: #000;
  font: inherit;
  font-weight: 500;
  font-size: calc(109 * var(--sw));
  line-height: calc(129 * var(--sw));
  text-align: right;
  z-index: 1;
}

/* .plans: Flow E2E v13.031 (1600×1200), on --hd. Cards built by plans.js
   from GET /api/plans; rows as on .bespoke. Mobile stacks the cards. */
.fp-ov-plans {
  --hd: min(100vw / 1600, 100dvh / 1200);
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  color: #000;
  white-space: normal;
  letter-spacing: -0.05em;
  pointer-events: auto;
}

.fp-ov-plans[hidden] { display: none !important; }
.fp-ov-plans:focus { outline: none; }

.fp-ov-plans .fp-ov-mark {
  left: calc(66 * var(--hd));
  top: calc(38 * var(--hd));
  width: calc(22 * var(--hd));
  height: calc(49 * var(--hd));
}

.fp-ov-plans .fp-ov-x {
  left: auto;
  right: calc(34 * var(--hd));
  top: calc(40 * var(--hd));
  width: calc(26 * var(--hd));
  height: calc(26 * var(--hd));
  padding: calc(6 * var(--hd));
  box-sizing: border-box;
}
.fp-ov-plans .fp-ov-x:focus:not(:focus-visible),
.fp-ov-plans .fp-ov-mark:focus:not(:focus-visible) { outline: none; }

.fp-plans-name {
  position: absolute;
  right: calc(94 * var(--hd));
  top: calc(22 * var(--hd));
  margin: 0;
  font-weight: 500;
  font-size: calc(65 * var(--hd));
  line-height: 1;
  letter-spacing: -0.05em;
}

.fp-plans-tabs {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(200 * var(--hd));
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: calc(34 * var(--hd));
  margin: 0;
}

.fp-plans-tabs button {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 500;
  font-size: calc(64 * var(--hd));
  line-height: 1;
  letter-spacing: -0.05em;
  cursor: pointer;
}

.fp-plans-tabs .is-on { color: #000; }
.fp-plans-tabs button:not(.is-on) { color: #d0d0d0; }
.fp-plans-tabs button:focus:not(:focus-visible) { outline: none; }

.fp-plans-row {
  position: absolute;
  left: 50%;
  top: calc(318 * var(--hd));
  width: calc(1357 * var(--hd));
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: calc(20 * var(--hd));
  padding-bottom: calc(60 * var(--hd));
}

.fp-plan-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 calc((1357 - 60) / 4 * var(--hd));
  box-sizing: border-box;
  min-height: calc(612 * var(--hd));
  margin: 0;
  padding: calc(46 * var(--hd)) calc(28 * var(--hd)) calc(32 * var(--hd));
  border: 1px solid #d5d5d5;
  border-radius: calc(24 * var(--hd));
  background: #fff;
  text-align: center;
}

.fp-plan-card.is-current { border-color: #000; }
.fp-plan-card.is-gray { background: #e5e5e5; border-color: #e5e5e5; }

.fp-plan-card h2 {
  margin: 0;
  font-weight: 500;
  font-size: calc(35 * var(--hd));
  line-height: 1;
  letter-spacing: -0.05em;
}

.fp-plan-price {
  margin: calc(55 * var(--hd)) 0 0;
  font-weight: 500;
  font-size: calc(35 * var(--hd));
  line-height: 1;
  letter-spacing: -0.05em;
}

.fp-plan-mes {
  margin: calc(6 * var(--hd)) 0 calc(36 * var(--hd));
  color: #000;
  font-weight: 500;
  font-size: max(calc(14 * var(--hd)), 11px);
  line-height: 1;
  letter-spacing: -0.05em;
}

.fp-plan-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: calc(180 * var(--hd));
  height: calc(48 * var(--hd));
  min-height: 34px;
  margin: 0;
  padding: 0 calc(26 * var(--hd));
  border: 1px solid #5c5c5c;
  border-radius: 999px;
  background: #5c5c5c;
  color: #fff;
  font: inherit;
  font-weight: 500;
  font-size: max(calc(17 * var(--hd)), 12px);
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
  text-decoration: none;
}
a.fp-plan-pill, button.fp-plan-pill { cursor: pointer; }

.fp-plan-pill.is-line {
  background: #fff;
  color: #000;
  border-color: #b8b8b8;
}

/* Rows as on .bespoke: label in grey, value on the right, 1px lines. */
.fp-plan-rows {
  align-self: stretch;
  margin: calc(40 * var(--hd)) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.fp-plan-rows li {
  display: flex;
  justify-content: space-between;
  gap: calc(14 * var(--hd));
  padding: calc(10 * var(--hd)) 0;
  border-top: 1px solid #d5d5d5;
  font-size: max(calc(14 * var(--hd)), 11px);
  line-height: 1.25;
  letter-spacing: -0.05em;
}
.fp-plan-card.is-gray .fp-plan-rows li { border-top-color: #cfcfcf; }
.fp-plan-rows li span:first-child { color: #8a8a8a; flex: none; }
.fp-plan-rows li span:last-child { text-align: right; font-weight: 500; }

@media (max-width: 800px) {
  .fp-ov-plans .fp-ov-mark {
    left: calc(16 * var(--m));
    top: calc(18 * var(--m));
    width: calc(16 * var(--m));
    height: calc(36 * var(--m));
  }
  .fp-ov-plans .fp-ov-x {
    right: calc(10 * var(--m));
    top: calc(18 * var(--m));
    width: calc(30 * var(--m));
    height: calc(30 * var(--m));
    padding: calc(8 * var(--m));
  }
  .fp-plans-name {
    right: calc(46 * var(--m));
    top: calc(12 * var(--m));
    font-size: calc(44 * var(--m));
  }
  .fp-plans-tabs {
    position: relative;
    top: auto;
    margin: calc(110 * var(--m)) 0 0;
    gap: calc(16 * var(--m));
  }
  .fp-plans-tabs button { font-size: calc(38 * var(--m)); }
  .fp-plans-row {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    transform: none;
    flex-direction: column;
    gap: calc(12 * var(--m));
    margin: calc(32 * var(--m)) calc(16 * var(--m)) 0;
    padding-bottom: calc(40 * var(--m));
  }
  .fp-plan-card {
    flex: none;
    min-height: 0;
    padding: calc(32 * var(--m)) calc(22 * var(--m)) calc(22 * var(--m));
    border-radius: calc(22 * var(--m));
  }
  .fp-plan-card h2 { font-size: calc(30 * var(--m)); }
  .fp-plan-price { margin-top: calc(26 * var(--m)); font-size: calc(30 * var(--m)); }
  .fp-plan-mes { margin: calc(5 * var(--m)) 0 calc(22 * var(--m)); font-size: calc(13 * var(--m)); }
  .fp-plan-pill { min-width: calc(170 * var(--m)); height: calc(44 * var(--m)); padding: 0 calc(22 * var(--m)); font-size: calc(15 * var(--m)); }
  .fp-plan-rows { margin-top: calc(26 * var(--m)); }
  .fp-plan-rows li { gap: calc(12 * var(--m)); padding: calc(10 * var(--m)) 0; font-size: calc(14 * var(--m)); }
}

#navPlan { cursor: pointer; }

/* Phone: single full-width photos keep their own ratio (nothing cut);
   photos that fill the rest of the screen stay framed from the top. */
@media (max-width: 800px) {
  .fp-mf[data-frame="002"] .fp-mob-img:not(.is-fill),
  .fp-mf[data-frame="006"] .fp-mob-img:not(.is-fill),
  .fp-mf[data-frame="007"] .fp-mob-img:not(.is-fill) { height: auto; }
  .fp-mob-img.is-fill { object-position: 50% 15%; }
}

/* Phone: the page scrolls on the document, not inside #stage, so Safari on
   iPhone can shrink its address bar. Menus and overlays still lock it.
   The header keeps a white band behind it so copy never runs under it. */
@media (max-width: 800px) {
  html, body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: visible;
  }
  html.fp-overlay-open, html.fp-nav-open, html.tb-up, html.ht-modal-open,
  html.fp-overlay-open body, html.fp-nav-open body, html.tb-up body, html.ht-modal-open body { height: 100%; overflow: hidden; }
  .fp-stage {
    height: auto;
    overflow: visible;
  }
  html.fp-split:not(.md-page) .fp-head::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(108 * var(--m));
    background: var(--paper);
    pointer-events: none;
    z-index: -1;
  }
}