/* ═══════════════════════════════════════════════════════════════════════
   Renato Brands — Brand Strategy & Design
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --paper:        #F3F1EC;
  --paper-raised: #FAF9F6;
  --paper-card:   #F7F5F0;
  --paper-deep:   #E9E6DF;
  --slot:         #E6E3DC;

  --ink:          #111110;
  --ink-soft:     #3A3834;
  --ink-faint:    #55524C;
  --muted:        #6B6862;
  --muted-light:  #8A877F;
  --muted-rule:   #9E9A92;

  --line:         #D5D2CB;
  --line-soft:    #B9B5AC;
  --line-chip:    #C9C5BD;
  --line-badge:   #DAD6CE;

  --orange:       #FF783E;
  --error:        #C2410C;

  --dark:         #111110;
  --dark-line:    #2E2D2A;
  --dark-text:    #EDEBE6;
  --dark-muted:   #BDB9B1;
  --dark-faint:   #8F8C85;

  --green:        #173430;
  --green-text:   #EDEBE6;
  --green-muted:  #8FA6A0;
  --green-soft:   #B9C6C2;
  --green-dot:    #4A6661;

  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;

  --wrap: 1440px;
  --gutter: clamp(20px, 4vw, 56px);
  --header-h: 68px;
  --section-y: clamp(64px, 7vw, 104px); /* top & bottom of every section */
  --block-y: clamp(36px, 4vw, 56px);    /* section head → its content */
  --title-1: clamp(34px, 4.4vw, 68px);  /* main section titles (offers, process, close) */
  --title-2: clamp(30px, 3.4vw, 52px);  /* secondary titles (portal, FAQ) */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Base ─────────────────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img, svg { display: block; max-width: 100%; }

::selection { background: var(--orange); color: var(--ink); }

input::placeholder, textarea::placeholder { color: var(--muted-light); }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
input:focus-visible, textarea:focus-visible { outline: none; }

[hidden] { display: none !important; }

.serif { font-family: var(--serif); font-style: italic; }
.dim { color: var(--muted-light); }

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

[id] { scroll-margin-top: var(--header-h); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Cursor tag — orange pill that trails the pointer over [data-cursor-tag]
   elements ("ver projeto", "ver detalhes", "projeto principal"). Pointer
   devices only; positioned by site.js. */
.ctag {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding-inline: 11px 13px;
  background: var(--orange);
  color: var(--ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  will-change: transform;
}
.ctag__dot { width: 7px; height: 7px; background: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .ctag { display: flex; }
  .ctag.is-on { opacity: 1; }
}

/* Paper grain */
.grain {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Shared atoms ─────────────────────────────────────────────────────── */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow__dot { flex: none; width: 8px; height: 8px; background: var(--orange); }
.eyebrow__dot--ink { background: var(--ink); }

/* Buttons — a fill layer wipes in from the left and out to the right, the
   arrow swaps (exits, a copy enters), and a press settles to 97.5%. */
.btn {
  --fill: var(--ink);
  --fill-fg: var(--paper);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding-inline: 24px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color .4s var(--ease),
    border-color .4s var(--ease),
    scale .2s var(--ease),
    translate .5s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--fill);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s var(--ease);
}
.btn:active { scale: .975; }
.btn:focus-visible { color: var(--fill-fg); }
.btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }

.btn__icon {
  position: relative;
  display: inline-grid;
  overflow: hidden;
  width: 1.05em;
  height: 1.3em;
  line-height: 1.3;
}
.btn__icon i {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  transition: transform .45s var(--ease);
}
.btn__icon i:last-child { transform: translateX(-110%); }
.btn__icon--down i:last-child { transform: translateY(-110%); }

@media (hover: hover) {
  .btn:hover { color: var(--fill-fg); }
  .btn:hover::before { transform: scaleX(1); transform-origin: left center; }
  .btn:hover .btn__icon i:first-child { transform: translateX(110%); }
  .btn:hover .btn__icon--down i:first-child { transform: translateY(110%); }
  .btn:hover .btn__icon i:last-child { transform: none; }
}

.btn--orange { background: var(--orange); color: var(--ink); }

.btn--ghost {
  --fill: var(--paper-deep);
  --fill-fg: var(--ink);
  padding-inline: 22px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--ink); }

/* hover wipes in orange (a paper fill vanished into the light offer cards) */
.btn--ink { --fill: var(--orange); --fill-fg: var(--ink); background: var(--ink); color: var(--paper); }

/* Three heights only: 40 (header), 48 (inline), 52 (large / full-width) */
.btn--sm { height: 40px; padding-inline: 20px; font-size: 15px; }
.btn--lg { height: 52px; padding-inline: 28px; }
.btn--block { justify-content: space-between; width: 100%; height: 52px; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }

/* Image wells — swap .slot__label for <img class="slot__img"> */
.slot {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(127, 127, 127, .08);
  overflow: hidden;
}
.slot::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px dashed currentColor;
  opacity: .35;
  pointer-events: none;
}
.slot:has(.slot__img)::after { display: none; }
.slot__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .01em;
  text-align: center;
  opacity: .75;
}
.slot__img { width: 100%; height: 100%; object-fit: cover; }
.slot--portrait .slot__img { filter: grayscale(1) contrast(1.05); }

/* ── Header ───────────────────────────────────────────────────────────── */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(243, 241, 236, 0);
  transition: background .35s ease, backdrop-filter .35s ease;
}
.header.is-scrolled {
  background: rgba(243, 241, 236, .92);
  backdrop-filter: blur(10px);
}
.header.is-menu-open { background: rgba(243, 241, 236, .92); }

.header__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header__logo { position: relative; flex: none; display: flex; align-items: center; }
.header__logo img { height: 20px; width: auto; }

/* Logo sticker — slides out from behind the logo's right edge on hover */
.sticker {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  width: 78px;
  height: auto;
  transform: translateY(-50%);
  overflow: visible;
  pointer-events: none;
  clip-path: inset(-40px -40px -40px 0);
  filter: drop-shadow(0 1px 1px rgba(17, 17, 16, .14)) drop-shadow(0 4px 6px rgba(17, 17, 16, .08));
}
.sticker__pill {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  opacity: 0;
  transition:
    transform .3s cubic-bezier(.5, 0, .75, 0),
    opacity .12s ease .18s;
}
.sticker__pill--top { transform: translateX(-108%) rotate(6deg); transition-delay: .05s, .23s; }
.sticker__pill--bottom { transform: translateX(-108%) rotate(-12deg); }

@media (hover: hover) {
  .header__logo:hover .sticker__pill,
  .header__logo:focus-visible .sticker__pill {
    opacity: 1;
    transform: none;
    transition:
      transform .7s cubic-bezier(.34, 1.4, .64, 1),
      opacity .1s ease;
  }
  .header__logo:hover .sticker__pill--bottom,
  .header__logo:focus-visible .sticker__pill--bottom { transition-delay: .08s, .08s; }
}

@media (prefers-reduced-motion: reduce) {
  .sticker__pill { transform: none !important; }
}

.header__nav { display: flex; align-items: center; gap: 36px; font-size: 15px; }
.header__nav a {
  position: relative;
  padding-block: 6px;
  text-decoration: none;
  background: linear-gradient(var(--orange), var(--orange)) 100% 100% / 0% 2px no-repeat;
  transition: background-size .5s var(--ease);
}
.header__nav a:hover,
.header__nav a:focus-visible { background-position: 0 100%; background-size: 100% 2px; }

.header__dot {
  position: absolute;
  left: -13px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: var(--orange);
  opacity: 0;
  transform: scale(0);
  transition: opacity .3s ease, transform .3s ease;
}
.header__nav a.is-active .header__dot { opacity: 1; transform: scale(1); }

.header__cta { flex: none; }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding-inline: 2px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.menu-toggle__icon { position: relative; display: block; width: 14px; height: 14px; }
.menu-toggle__icon i { position: absolute; background: var(--ink); }
.menu-toggle__icon i:first-child { left: 0; right: 0; top: 6px; height: 2px; }
.menu-toggle__icon i:last-child {
  top: 0; bottom: 0; left: 6px; width: 2px;
  transition: transform .3s ease;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child { transform: rotate(90deg); }

/* ── Mobile menu ──────────────────────────────────────────────────────── */

.menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 20px;
  background: var(--paper);
}
.menu__nav { display: flex; flex-direction: column; gap: 4px; }
.menu__nav a {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.2;
  text-decoration: none;
}
.menu__foot { display: flex; flex-direction: column; gap: 20px; }
.menu__quote { margin: 0; font-size: 24px; }

/* ── Desk (grid paper behind the hero) ─────────────────────────────── */

.desk { position: relative; }

.desk__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(17, 17, 16, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 16, .06) 1px, transparent 1px),
    linear-gradient(rgba(17, 17, 16, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 16, .025) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  /* The grid spans hero, reel and portal, fading before the process section. */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - clamp(48px, 6vw, 88px)), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - clamp(48px, 6vw, 88px)), transparent 100%);
}

.desk__ruler {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 12px;
  z-index: 1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(180deg, rgba(17, 17, 16, .28) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(180deg, rgba(17, 17, 16, .14) 0 1px, transparent 1px 24px);
  background-size: 12px 100%, 6px 100%;
  background-repeat: no-repeat;
  background-position: 0 -1px, 0 -1px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - clamp(48px, 6vw, 88px)), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - clamp(48px, 6vw, 88px)), transparent 100%);
}

/* ── 01 Hero ──────────────────────────────────────────────────────────── */

/* Content height, not a full viewport: headline → lede → CTAs, then the Reel
   starts right away (it peeks above the fold on desktop and phones). */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero__tick {
  position: absolute;
  left: 0; right: 0;
  top: var(--header-h);
  height: 12px;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(17, 17, 16, .28) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, rgba(17, 17, 16, .14) 0 1px, transparent 1px 24px);
  background-size: 100% 12px, 100% 6px;
  background-repeat: no-repeat;
  background-position: -1px 0, -1px 0;
}

.hero__mark {
  position: absolute;
  left: calc(50% + 360px);
  top: 360px;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  z-index: 0;
  border: 1px solid var(--orange);
  pointer-events: none;
}

.hero__cursor-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__focus {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity .4s ease;
  will-change: transform;
}
.hero__coord-badge {
  position: absolute;
  left: 14px;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 6px;
  background: rgba(247, 245, 240, .88);
  border: 1px solid var(--line-badge);
  white-space: nowrap;
}
.hero__coord-dot { flex: none; width: 7px; height: 7px; background: var(--orange); }
.hero__coord {
  font-size: 10px;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  white-space: pre;
}

.hero__frame {
  position: absolute;
  inset: 88px clamp(8px, 1.6vw, 24px) clamp(12px, 2vh, 20px);
  z-index: 0;
  pointer-events: none;
}
.hero__corner { position: absolute; width: 18px; height: 18px; }
.hero__corner--tl { left: 0;  top: 0;    border-left: 1px solid var(--muted-rule); border-top: 1px solid var(--muted-rule); }
.hero__corner--tr { right: 0; top: 0;    border-right: 1px solid var(--muted-rule); border-top: 1px solid var(--muted-rule); }
.hero__corner--bl { left: 0;  bottom: 0; border-left: 1px solid var(--muted-rule); border-bottom: 1px solid var(--muted-rule); }
.hero__corner--br { right: 0; bottom: 0; border-right: 1px solid var(--muted-rule); border-bottom: 1px solid var(--muted-rule); }

.hero__stamp {
  position: absolute;
  right: 32px;
  top: -4px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-light);
  font-variant-numeric: tabular-nums;
}
.hero__reticle {
  position: relative;
  width: 13px;
  height: 13px;
  border: 1px solid var(--muted-light);
  border-radius: 50%;
}
.hero__reticle i { position: absolute; background: var(--muted-light); }
.hero__reticle i:first-child { left: 50%; top: -4px; bottom: -4px; width: 1px; margin-left: -.5px; }
.hero__reticle i:last-child { top: 50%; left: -4px; right: -4px; height: 1px; margin-top: -.5px; }

.hero__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  max-width: var(--wrap);
  width: 100%;
  margin-inline: auto;
  padding: clamp(132px, 18vh, 176px) var(--gutter) clamp(64px, 6vw, 88px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.4vw, 20px);
  text-align: center;
}

.hero__head { display: flex; flex-direction: column; gap: clamp(24px, 4vh, 40px); }

.hero__head,
.hero__foot {
  width: 100%;
  max-width: calc(var(--title-2) * 15);
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .hero__inner {
    min-height: 85svh;
    justify-content: center;
  }
}

/* Match the title scale used in the third section (portal). */
.hero__title {
  margin: 0;
  font-size: var(--title-2);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: .94;
  text-wrap: balance;
}
/* Each sentence starts its own line; the first reads quieter (.dim),
   the same two-tone pattern as the Problem title. */
.hero__line { display: block; }

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 40px;
}

.hero__lede {
  flex: 1 1 380px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero__lede p {
  margin: 0;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: balance;
}
.hero__lede > p:first-child {
  max-width: 100%;
  margin-inline: auto;
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }

.hero__lede .hero__note {
  margin: -12px 0 0;
  font-size: 11px;
  letter-spacing: .12em;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hero__note span { white-space: nowrap; }

/* Phones: the two CTAs stack as equal full-width pills */
@media (max-width: 519px) {
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
}

.hero__principle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-left: 16px;
  border-left: 2px solid var(--orange);
}
.hero__principle-label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__principle-text { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; }

/* ── 04 Transformação — portal ────────────────────────────────────────── */
/* Sem direção | axis | com direção. Every row holds one tag twice: the before
   lane is clipped to the left of the axis, the after lane to the right, and
   both copies move together, so the tag changes exactly where it crosses.
   Tags keep their width in either state (both phrases share one grid cell),
   so the crossing distance is the tag's own width plus the portal gap.
   .is-live (site.js) animates one pair at a time; without it (no JS, reduced
   motion) every pair sits resolved. Phones turn the crossing vertical. */

/* Keep the site's section rhythm before the dark process section. */
.portal { position: relative; z-index: 1; }
.portal__wrap {
  padding-block: clamp(16px, 2vw, 24px); /* the reel's grid strip above already gives the air */
  padding-bottom: var(--section-y);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 44px);
}

.portal__title {
  margin: 0;
  text-align: center;
  font-size: var(--title-2);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.05;
  text-wrap: balance;
}

.portal__stage {
  --gap: clamp(80px, 10vw, 144px); /* the portal: space between the two columns */
  --tag-h: 48px;
  position: relative;
  padding: 64px 0 16px;
}

.portal__side {
  position: absolute;
  top: 9px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* one reading line with the badge: sem direção · [direção aplicada] · com direção */
.portal__side--before { right: calc(50% + 88px); }
.portal__side--after  { left: calc(50% + 88px); }

/* The axis: an even orange line under the badge; the square marks the row
   crossing now and fills as the tag passes */
.portal__axis {
  position: absolute;
  left: 50%;
  top: 32px;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--orange);
}
.portal__mark {
  position: absolute;
  left: 50%;
  top: 0;
  width: 11px;
  height: 11px;
  margin: -37.5px 0 0 -5.5px; /* --y is measured from the stage top; the axis starts 32px down */
  background: var(--paper);
  border: 2px solid var(--orange);
  transform: translateY(var(--y, 0));
  transition: transform .6s var(--ease), background-color .3s ease;
}
.portal__stage:not(.is-live) .portal__mark { display: none; }
.portal__stage.is-hit .portal__mark { background: var(--orange); }

.portal__badge {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding-inline: 12px 14px;
  background: var(--orange);
  color: var(--ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.portal__badge-dot { width: 7px; height: 7px; background: var(--ink); transition: background-color .3s ease; }
.portal__stage.is-hit .portal__badge-dot { background: var(--paper); }

.portal__rows { display: grid; gap: 16px; transition: opacity .5s ease; }
.portal__stage.is-resetting .portal__rows { opacity: 0; }

.portal__row { position: relative; height: var(--tag-h); }
.portal__lane { position: absolute; inset: 0; }
.portal__lane--before { clip-path: inset(0 50% 0 0); }
.portal__lane--after  { clip-path: inset(0 0 0 50%); }

.portal__mover {
  position: absolute;
  top: 0;
  right: calc(50% + var(--gap) / 2);
}
.portal__stage.is-live .portal__mover { transition: transform 1.5s cubic-bezier(.65, 0, .35, 1); }
.portal__row.is-after .portal__mover,
.portal__stage:not(.is-live) .portal__lane--after .portal__mover { transform: translateX(calc(100% + var(--gap))); }

/* Tag: both phrases in one cell; each lane shows its own */
.tag {
  display: inline-grid;
  align-items: center;
  justify-items: center;
  height: var(--tag-h);
  padding-inline: 22px;
  border-radius: 999px;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background-color .4s ease, box-shadow .4s ease, opacity .5s ease, filter .5s ease;
}
.tag__a, .tag__b { grid-area: 1 / 1; transition: color .4s ease; }

/* Before: grey slot, quieter phrase */
.portal__lane--before .tag { background: rgba(17, 17, 16, .06); }
.portal__lane--before .tag__a { color: var(--ink-faint); }
.portal__lane--before .tag__b { visibility: hidden; }

/* After: clean paper, full contrast */
.portal__lane--after .tag { background: #FFFFFF; box-shadow: 0 1px 2px rgba(17, 17, 16, .05); }
.portal__lane--after .tag__a { visibility: hidden; }
.portal__lane--after .tag__b { color: var(--ink); }

/* Live: the pair in focus keeps full contrast; the others step back by colour
   (muted stays at AA on paper). Nearing the axis the tag softens a touch. */
.portal__stage.is-live:not(.is-summary) .portal__row:not(.is-active) .portal__lane--before .tag__a { color: var(--muted); }
.portal__stage.is-live:not(.is-summary) .portal__row:not(.is-active) .portal__lane--before .tag { background: rgba(17, 17, 16, .035); }
.portal__stage.is-live:not(.is-summary) .portal__row:not(.is-active) .portal__lane--after .tag { background: rgba(255, 255, 255, .6); box-shadow: none; }
.portal__stage.is-live:not(.is-summary) .portal__row:not(.is-active) .portal__lane--after .tag__b { color: var(--ink-faint); }
.portal__stage.is-live .portal__row.is-active .portal__lane--before .tag__a { color: var(--ink-soft); }
.portal__row.is-crossing .portal__lane--before .tag { opacity: .7; filter: blur(.4px); }

.portal__stage.is-instant,
.portal__stage.is-instant * { transition: none !important; }

/* Phones: the axis turns horizontal and the tag travels top → bottom, one pair
   in view at a time (rows share one slot). Static: a plain list of pairs. */
@media (max-width: 759px) {
  .portal__stage { --gap: 56px; --tag-h: 40px; padding: 28px 0; }
  .tag { padding-inline: 16px; font-size: 15px; }

  .portal__side { top: 0; }
  .portal__side--before { right: auto; left: 0; }
  .portal__side--after  { left: 0; top: auto; bottom: 0; }

  .portal__axis {
    left: 0;
    right: 0;
    top: calc(28px + var(--tag-h) + var(--gap) / 2);
    bottom: auto;
    width: auto;
    height: 2px;
    margin: -1px 0 0;
  }
  .portal__mark { display: none; }
  .portal__badge {
    left: auto;
    right: 0;
    top: calc(28px + var(--tag-h) + var(--gap) / 2);
    transform: translateY(-50%);
    height: 28px;
    font-size: 12px;
  }

  .portal__rows { grid-template-areas: "slot"; }
  .portal__row { grid-area: slot; height: calc(var(--tag-h) * 2 + var(--gap)); }
  .portal__lane--before { clip-path: inset(0 0 50% 0); }
  .portal__lane--after  { clip-path: inset(50% 0 0 0); }
  .portal__mover { left: 0; right: auto; }
  .portal__row.is-after .portal__mover,
  .portal__stage:not(.is-live) .portal__lane--after .portal__mover { transform: translateY(calc(100% + var(--gap))); }

  .portal__stage.is-live .portal__row { opacity: 0; transition: opacity .4s ease; }
  .portal__stage.is-live .portal__row.is-active { opacity: 1; }

  /* Static list: every pair in flow, a short orange rule between the two */
  .portal__stage:not(.is-live) { --gap: 20px; padding: 0; }
  .portal__stage:not(.is-live) :is(.portal__side, .portal__axis, .portal__badge) { display: none; }
  .portal__stage:not(.is-live) .portal__rows { grid-template-areas: none; gap: 24px; }
  .portal__stage:not(.is-live) .portal__row { grid-area: auto; }
  .portal__stage:not(.is-live) .portal__row::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 24px;
    height: 2px;
    margin-top: -1px;
    background: var(--orange);
  }
}

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

/* ── 03 Project Reel ─────────────────────────────────────────────────── */
/* Stills stacked in one frame; site.js crossfades them (the incoming slide
   fades in over the outgoing one, which holds until it is covered, so the
   frame never dips). 16:9 from 760px, 4:3 on phones; object-fit: cover crops
   instead of distorting. PROVISIONAL until the final MP4 showreel. */

.showreel { position: relative; z-index: 1; } /* above the desk grid */
.showreel__wrap { padding-block: clamp(16px, 2.4vw, 36px) clamp(48px, 6vw, 88px); }

.showreel__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--paper-deep);
}
@media (min-width: 760px) {
  .showreel__frame { aspect-ratio: 16 / 9; }
}

.showreel__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
}
.showreel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.showreel__slide.is-on { z-index: 2; opacity: 1; transition: opacity 1s ease; }
.showreel__slide.is-prev { z-index: 1; opacity: 1; }

/* Shared cutting-mat grid behind a section */
.mat {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(17, 17, 16, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 16, .05) 1px, transparent 1px),
    linear-gradient(rgba(17, 17, 16, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 16, .02) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

/* ── 04 Ofertas ───────────────────────────────────────────────────────── */
/* Three offer sheets, read in one pass: diagram, name and promise; then price
   and time as their own block; the CTA; the main deliverables; the details
   link. Spacing does the grouping: tight inside a group, open between. Sistema de Marca (the main offer) sits on
   black with the ink tokens re-mapped; the other two on light paper. Phones
   stack, tablets split each card into two columns, and from 1024px the cards
   share row tracks (subgrid) so prices, CTAs and lists line up. */

.offers { position: relative; }
.offers__wrap {
  position: relative;
  padding-block: var(--section-y);
  display: flex;
  flex-direction: column;
  gap: var(--block-y);
}
.offers__head { display: flex; flex-wrap: wrap; gap: 20px clamp(32px, 6vw, 96px); }
.offers__label { flex: 0 1 220px; align-self: flex-start; }
.offers__head-body { flex: 1 1 560px; display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 24px); }
.offers__title {
  margin: 0;
  max-width: 18ch;
  font-size: var(--title-1);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
  text-wrap: balance;
}
.offers__lede {
  margin: 0;
  max-width: 520px;
  font-size: clamp(17px, 1.3vw, 19px);
  color: var(--ink-soft);
  text-wrap: pretty;
}

.svcs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 2vw, 28px);
}

.svc {
  --pad: clamp(24px, 2.4vw, 36px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: var(--pad);
  background: var(--paper-raised);
  border-radius: 10px;
  transition: background .4s var(--ease);
}
.svc__intro, .svc__buy { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Sistema de Marca on black: re-map the ink tokens so text, rules and the
   diagram strokes all flip together */
.svc--main {
  --ink: var(--dark-text);
  --ink-soft: var(--dark-muted);
  --muted: var(--dark-faint);
  --muted-light: var(--dark-faint);
  --line: var(--dark-line);
  --line-soft: var(--ink-faint);
  background: var(--dark);
  color: var(--dark-text);
}
.svc--main .btn--orange { --fill: var(--paper); --fill-fg: var(--dark); color: var(--dark); }

.svc--main::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  border-radius: inherit;
  pointer-events: none;
  opacity: .65;
  background-image:
    url("../images/cutting-mat-angles.svg"),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 100% auto, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center bottom, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
  mask-image: linear-gradient(180deg, transparent, #000 45%);
}
.svc--main > * { position: relative; }

/* Top row: the diagram on its own, a size up; Sistema de Marca adds its badge */
.svc__top {
  display: flex;
  flex-wrap: wrap; /* when the badge no longer fits beside the diagram, it sits above the name */
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 4px; /* visual → name */
}
.svc__visual { flex: none; }
.svc__visual .dg { width: clamp(176px, 15vw, 208px); }

.svc__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding-inline: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.svc__tag-dot { width: 7px; height: 7px; background: var(--orange); }
/* On the card the badge sits as a tab on the top edge, so it never wraps
   under the diagram and adds a row to all three cards */
.svc .svc__tag {
  position: absolute;
  top: 0;
  left: var(--pad);
  transform: translateY(-50%);
  background: var(--dark);
}

.svc__name {
  margin: 0;
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.svc__problem {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(18px, 1.45vw, 21px);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
/* Price + time: a block of its own, well clear of the promise */
.svc__price {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: clamp(16px, 1.6vw, 24px) 0 0; /* promise → price */
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.svc__amount {
  font-size: clamp(34px, 3vw, 46px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.svc__amount--text { font-size: clamp(24px, 2vw, 30px); line-height: 1.15; white-space: normal; }
.svc__time { font-size: 15px; color: var(--ink-soft); }

.svc__cta { margin-top: 12px; } /* time → CTA */

.svc__includes { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; } /* CTA → deliverables */
.svc__list-title {
  margin: 0;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.svc__list { list-style: none; margin: 0; padding: 0; }
.svc__list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-block: 7px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.4;
}
.svc__list li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--ink);
  transform: translateY(-1px);
}

/* Sob Medida: examples as a short row of chips, not a service list */
.svc__list--tags { display: flex; flex-wrap: wrap; gap: 8px; }
.svc__list--tags li {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line-chip);
  border-radius: 999px;
  font-size: 14px;
}
.svc__list--tags li::before { display: none; }

.svc__open {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.svc__open-label {
  text-decoration: underline;
  text-decoration-color: var(--line-soft);
  text-underline-offset: 6px;
  transition: text-decoration-color .35s ease;
}
.svc__plus { position: relative; width: 11px; height: 11px; transition: transform .6s var(--ease); }
.svc__plus::before, .svc__plus::after { content: ""; position: absolute; background: currentColor; }
.svc__plus::before { left: 0; right: 0; top: 5px; height: 1.5px; }
.svc__plus::after { top: 0; bottom: 0; left: 5px; width: 1.5px; }
.svc__open:focus-visible .svc__open-label { text-decoration-color: var(--orange); }

/* Hover: a quiet change of paper, the guides firm up. Nothing moves or resizes. */
@media (hover: hover) {
  .svc:hover { background: #FFFFFF; }
  .svc--main:hover { background: #1B1A18; }
  .svc:hover .dg { --dg-guide: var(--muted-rule); }
  .svc__open:hover .svc__plus { transform: rotate(90deg); }
  .svc__open:hover .svc__open-label { text-decoration-color: var(--orange); }
}

/* Tablet: each card reads in two columns — story left, price and CTA right */
@media (min-width: 760px) and (max-width: 1023px) {
  .svc {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 56px);
  }
  .svc__price { margin-top: 0; } /* heads its own column here */
}

/* Desktop: three columns sharing row tracks */
@media (min-width: 1024px) {
  .svcs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc {
    display: grid;
    grid-row: span 7; /* visual, name, promise, price, CTA, list, details */
    grid-template-rows: subgrid;
    row-gap: 12px;
  }
  .svc__intro, .svc__buy { display: contents; }

  /* Side by side, Sob Medida's examples read as a ruled list like the other
     two (hollow marker: examples, not deliverables), so the shared row
     doesn't leave a void at the bottom of its card */
  .svc__list--tags { display: block; }
  .svc__list--tags li {
    display: flex;
    height: auto;
    padding: 7px 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    font-size: 15px;
  }
  .svc__list--tags li::before { display: block; background: none; box-shadow: inset 0 0 0 1px var(--ink); }
}
/* Narrow three-column cards: keep the CTA label and arrow inside the pill */
@media (min-width: 1024px) and (max-width: 1199px) {
  .svc__cta { padding-inline: 20px; font-size: 15px; }
}

/* Offer cards reached from a dialog link clear the fixed header */
.svc[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ── Service diagrams ──────────────────────────────────────────────────
   One vocabulary for all three: 1.5px ink strokes, dashed guides, 8px squares,
   one orange marker. The base styles ARE the resolved frame (aligned /
   direction chosen / route completed), so reduced motion simply keeps it.
   Loops run only with no motion preference. */

.dg {
  --dg-guide: var(--line-soft);
  display: block;
  width: 144px;
  height: auto;
  overflow: visible;
}
.dg * { vector-effect: non-scaling-stroke; }

.dg__col, .dg__base, .dg__axis { stroke: var(--dg-guide); stroke-width: 1; stroke-dasharray: 2 4; transition: stroke .5s ease; }
.dg__sq { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.dg__sq--mark, .dg__mk { fill: var(--orange); stroke: none; }

.dg__ctx { fill: var(--muted-light); }
.dg__opt { stroke: var(--ink); stroke-width: 1; opacity: 0; }
.dg__vec { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.dg__pt { fill: var(--ink); }
.dg--system .dg__mk { transform: translate(104px, -26px); }

.dg__track { fill: none; stroke: var(--dg-guide); stroke-width: 1; stroke-dasharray: 2 4; stroke-linejoin: round; transition: stroke .5s ease; }
.dg__run { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.dg__drift { stroke: var(--muted-light); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; }
.dg__cp { stroke: var(--ink); stroke-width: 1; fill: var(--ink); }
.dg--partner .dg__mk { transform: translate(148px, -22px); }

@media (prefers-reduced-motion: no-preference) {
  .dg { --dg-ease: cubic-bezier(.65, 0, .35, 1); }
  .svcs.is-paused .dg *, .svcs.is-paused .dg { animation-play-state: paused !important; }

  /* 01 Identity — scattered squares, guides appear, squares align, orange locks in (6s) */
  .dg--identity .dg__guides { animation: dg-guides 6s var(--dg-ease) infinite; }
  .dg--identity .dg__sq { animation: dg-align 6s var(--dg-ease) calc(var(--i) * 90ms) infinite backwards; }

  /* 02 System — context, possible routes, one chosen, marker travels (6s, +0.8s) */
  .dg--system .dg__ctx { animation: dg-ctx 6s ease .8s infinite backwards; }
  .dg--system .dg__opt { animation: dg-opt 6s ease .8s infinite backwards; }
  .dg--system .dg__opt--chosen { animation-name: dg-opt-chosen; }
  .dg--system .dg__vec { animation: dg-vec 6s var(--dg-ease) .8s infinite backwards; }
  .dg--system .dg__mk { animation: dg-sys-mk 6s var(--dg-ease) .8s infinite backwards; }

  /* 03 Partner — marker runs an existing route, pauses at checkpoints where a
     small drift is corrected, carries on (7s, +1.6s) */
  .dg--partner .dg__run { animation: dg-run 7s var(--dg-ease) 1.6s infinite backwards; }
  .dg--partner .dg__mk { animation: dg-par-mk 7s var(--dg-ease) 1.6s infinite backwards; }
  .dg--partner .dg__drift--1 { animation: dg-drift-1 7s ease 1.6s infinite backwards; }
  .dg--partner .dg__drift--2 { animation: dg-drift-2 7s ease 1.6s infinite backwards; }
  .dg--partner .dg__cp--1 { animation: dg-cp-1 7s ease 1.6s infinite backwards; }
  .dg--partner .dg__cp--2 { animation: dg-cp-2 7s ease 1.6s infinite backwards; }
}

@keyframes dg-guides {
  0%, 12% { opacity: 0; }
  28%, 82% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes dg-align {
  0%, 20% { transform: translate(var(--dx), var(--dy)); }
  46%, 84% { transform: none; }
  100% { transform: translate(var(--dx), var(--dy)); }
}

@keyframes dg-ctx {
  0% { opacity: 0; }
  12%, 84% { opacity: 1; }
  98%, 100% { opacity: 0; }
}
@keyframes dg-opt {
  0%, 14% { opacity: 0; }
  26%, 38% { opacity: .35; }
  48%, 100% { opacity: 0; }
}
@keyframes dg-opt-chosen {
  0%, 14% { opacity: 0; }
  26%, 38% { opacity: .35; }
  46%, 100% { opacity: 0; }
}
@keyframes dg-vec {
  0%, 38% { stroke-dashoffset: 1; opacity: 1; }
  56%, 86% { stroke-dashoffset: 0; opacity: 1; }
  96% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes dg-sys-mk {
  0%, 54% { transform: none; opacity: 0; }
  58% { transform: none; opacity: 1; }
  80%, 88% { transform: translate(104px, -26px); opacity: 1; }
  96%, 100% { transform: translate(104px, -26px); opacity: 0; }
}

@keyframes dg-run {
  0%, 4% { stroke-dashoffset: 1; opacity: 1; }
  14% { stroke-dashoffset: .84; }
  24%, 30% { stroke-dashoffset: .69; }
  42% { stroke-dashoffset: .51; }
  54%, 60% { stroke-dashoffset: .34; }
  72% { stroke-dashoffset: .17; }
  82%, 90% { stroke-dashoffset: 0; opacity: 1; }
  98% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes dg-par-mk {
  0% { transform: none; opacity: 0; }
  4% { transform: none; opacity: 1; }
  14% { transform: translate(24px, -4px); }
  24%, 30% { transform: translate(46px, 2px); }
  42% { transform: translate(72px, -10px); }
  54%, 60% { transform: translate(98px, -6px); }
  72% { transform: translate(122px, -18px); }
  82%, 90% { transform: translate(148px, -22px); opacity: 1; }
  98%, 100% { transform: translate(148px, -22px); opacity: 0; }
}
@keyframes dg-drift-1 {
  0%, 22% { opacity: 0; }
  26% { opacity: 1; }
  34%, 100% { opacity: 0; }
}
@keyframes dg-drift-2 {
  0%, 52% { opacity: 0; }
  56% { opacity: 1; }
  64%, 100% { opacity: 0; }
}
@keyframes dg-cp-1 {
  0%, 22% { stroke: var(--ink); fill: var(--ink); }
  25%, 31% { stroke: var(--orange); fill: var(--orange); }
  36%, 100% { stroke: var(--ink); fill: var(--ink); }
}
@keyframes dg-cp-2 {
  0%, 52% { stroke: var(--ink); fill: var(--ink); }
  55%, 61% { stroke: var(--orange); fill: var(--orange); }
  66%, 100% { stroke: var(--ink); fill: var(--ink); }
}

/* ── Offer detail dialog ───────────────────────────────────────────────
   The <dialog> is the full-viewport scrim (so it can fade); the panel is the
   sheet. Opening adds .is-in on the next frame; closing removes it, then
   calls close() once the transition ends. From 1024px the panel reads in two
   columns: a summary that stays in view, and the numbered steps. Phones get
   a full-screen sheet. */

.dlg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 24px;
  border: 0;
  background: rgba(17, 17, 16, .38);
  color: var(--ink);
  opacity: 0;
  transition: opacity .25s ease;
  overflow: hidden;
}
.dlg[open] { display: grid; place-items: center; }
.dlg::backdrop { background: transparent; }
.dlg.is-in { opacity: 1; }

.dlg__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  height: min(900px, calc(100dvh - 48px));
  background: var(--paper);
  border-radius: 10px;
  box-shadow: 0 30px 60px -40px rgba(17, 17, 16, .45);
  overflow: hidden;
  transform: scale(.98);
  transition: transform .25s var(--ease);
}
.dlg.is-in .dlg__panel { transform: none; }

/* Close sits in a fixed bar so scrolled content never runs under it */
.dlg__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px 12px clamp(24px, 3.4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.dlg__bar-label {
  margin: 0;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.dlg__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(24px, 3.4vw, 48px);
}

.dlg__close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .35s ease, transform .5s var(--ease);
}
.dlg__close span { position: relative; width: 14px; height: 14px; }
.dlg__close span::before, .dlg__close span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6.25px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(45deg);
}
.dlg__close span::after { transform: rotate(-45deg); }
.dlg__close:hover, .dlg__close:focus-visible { border-color: var(--ink); transform: rotate(90deg); }

/* Summary: the card, restated — moment, name, promise, price, time, CTA */
.dlg__sum {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 2.6vw, 36px);
  background: var(--paper-raised);
  border-radius: 10px;
}
.dlg--main .dlg__sum {
  --ink: var(--dark-text);
  --ink-soft: var(--dark-muted);
  --muted: var(--dark-faint);
  --muted-light: var(--dark-faint);
  --line: var(--dark-line);
  --line-soft: var(--ink-faint);
  background: var(--dark);
  color: var(--dark-text);
}
.dlg--main .dlg__sum .btn--orange { --fill: var(--paper); --fill-fg: var(--dark); color: var(--dark); }

.dlg__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.dlg__visual { display: block; }
.dlg__visual .dg { width: 176px; }
.dlg__title {
  margin: 0;
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
}
.dlg__headline {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.3;
  text-wrap: balance;
}
.dlg__price {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 4px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.dlg__amount {
  font-size: clamp(34px, 3vw, 44px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dlg__time { font-size: 15px; color: var(--ink-soft); }

/* Steps: number | title, text, items, note — divided by hairlines */
.dlg__body { min-width: 0; }
.dlg__step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding-block: clamp(22px, 2.4vw, 30px);
  border-top: 1px solid var(--line);
}
.dlg__step:first-child { border-top: 0; padding-top: 4px; }
.dlg__num {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.9;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dlg__step-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dlg__step-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.dlg__text { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.dlg__note {
  margin: 0;
  max-width: 60ch;
  padding-left: 14px;
  border-left: 2px solid var(--line-soft);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.dlg__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; }
.dlg__chips li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 13px;
  border: 1px solid var(--line-chip);
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.3;
}

.dlg__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  column-gap: 32px;
  margin: 2px 0 0;
  padding: 0;
}
.dlg__list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-block: 9px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.4;
}
.dlg__list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--ink);
  transform: translateY(-1px);
}
.dlg__list--out li { color: var(--ink-soft); }
.dlg__list--out li::before { width: 8px; height: 1.5px; background: var(--muted-light); transform: translateY(-4px); }

/* Brand Token File: the one highlighted step — a quiet ink band */
.dlg__step--token {
  padding-inline: clamp(18px, 2vw, 28px);
  border-top: 0;
  border-radius: 10px;
  background: var(--dark);
  color: var(--dark-text);
  --ink: var(--dark-text);
  --ink-soft: var(--dark-muted);
  --muted: var(--dark-faint);
  --line-chip: var(--dark-line);
  --line-soft: var(--ink-faint);
}
.dlg__step--token + .dlg__step { border-top: 0; }
.dlg__file {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: 10px;
  border: 1px solid var(--dark-line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--orange);
}
.dlg__tree {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0 24px;
  margin: 2px 0 0;
  padding: 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--dark-muted);
}
.dlg__tree li { padding-block: 6px; border-top: 1px solid var(--dark-line); }
.dlg__tree li::before { content: "└ "; color: var(--dark-faint); }

.dlg__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  padding-top: clamp(22px, 2.4vw, 30px);
  border-top: 1px solid var(--line);
}
.dlg__next p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.dlg__xlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line-soft);
  text-underline-offset: 6px;
  transition: text-decoration-color .35s ease;
}
.dlg__xlink span { transition: transform .5s var(--ease); }
.dlg__xlink:hover, .dlg__xlink:focus-visible { text-decoration-color: var(--orange); }
.dlg__xlink:hover span, .dlg__xlink:focus-visible span { transform: translateX(4px); }

/* The summary CTA scrolls away below 1024px, so repeat it at the end there */
.dlg__end-cta { margin-top: 24px; }

@media (min-width: 1024px) {
  .dlg__scroll {
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(40px, 4.4vw, 72px);
  }
  .dlg__sum { position: sticky; top: 0; }
  .dlg__end-cta { display: none; }
}

@media (max-width: 1023px) {
  .dlg__sum { margin-bottom: clamp(24px, 4vw, 40px); }
}

/* Phones: a full-screen sheet */
@media (max-width: 759px) {
  .dlg { padding: 0; }
  .dlg__panel { width: 100%; height: 100dvh; border-radius: 0; box-shadow: none; }
  .dlg__bar { padding-left: 20px; }
  .dlg__scroll { padding: 20px 20px 32px; }
  .dlg__step { grid-template-columns: 1fr; gap: 6px; }
  .dlg__num { line-height: 1.4; }
}

/* ── 06 Como funciona ─────────────────────────────────────────────────── */
/* Black section on the site's grid. Three step cards: text on top, a small
   working visual below (same size in every card, pinned to the bottom so the
   three line up). The visuals step through states via .is-on (site.js
   [data-how]); only opacity, transform and colour transition. The markup's
   default is the finished state. */

.how {
  position: relative;
  overflow: hidden;
  background-color: var(--dark);
  color: var(--dark-text);
  background-image:
    linear-gradient(rgba(237, 235, 230, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237, 235, 230, .11) 1px, transparent 1px),
    linear-gradient(rgba(237, 235, 230, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237, 235, 230, .045) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}
.how__tick {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 14px;
  background-image:
    repeating-linear-gradient(90deg, rgba(237, 235, 230, .5) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, rgba(237, 235, 230, .28) 0 1px, transparent 1px 24px);
  background-size: 100% 14px, 100% 7px;
  background-repeat: no-repeat;
  background-position: -1px 0, -1px 0;
}

.how__wrap {
  position: relative;
  padding-block: var(--section-y);
  display: flex;
  flex-direction: column;
  gap: var(--block-y);
}
.how__head { display: flex; flex-wrap: wrap; gap: 20px clamp(32px, 6vw, 96px); }
.how__label { flex: 0 1 220px; align-self: flex-start; color: var(--dark-text); }
.how__head-body { flex: 1 1 560px; display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 24px); }
.how__title {
  margin: 0;
  font-size: var(--title-1);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
  text-wrap: balance;
}
.how__title .dim { color: var(--dark-faint); }
.how__lede {
  margin: 0;
  max-width: 520px;
  font-size: clamp(17px, 1.3vw, 19px);
  color: var(--dark-muted);
  text-wrap: pretty;
}

.how__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
}
/* One flat surface per card: light → orange → light. Each card sets its own
   colour tokens; the text and every visual below draw only from them, so the
   orange card re-maps contrast without touching the animation rules. */
.how__step {
  --c-bg: var(--paper-raised);
  --c-fg: var(--ink);
  --c-soft: var(--ink-soft);            /* descriptions */
  --c-faint: var(--muted);              /* numbers, labels, pending states */
  --c-line: rgba(17, 17, 16, .16);      /* hairlines and empty tracks */
  --c-line-strong: rgba(17, 17, 16, .32);
  --c-surface: rgba(17, 17, 16, .025);  /* direction sheets */
  --c-signal: var(--orange);            /* progress / active state */
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  padding: clamp(20px, 2vw, 28px);
  background: var(--c-bg);
  color: var(--c-fg);
  border-radius: 10px;
  transition: translate .4s var(--ease);
}
/* 02 — the highlighted step: the whole card is orange; its text is black */
.how__step--accent {
  --c-bg: var(--orange);
  --c-soft: rgba(17, 17, 16, .8);       /* ≈4.7:1 on the orange */
  --c-faint: rgba(17, 17, 16, .8);
  --c-line: rgba(17, 17, 16, .28);
}
/* Draw the animation in ink tones for contrast against orange. */
.how__step--accent .vis__inner {
  --c-fg: var(--ink);
  --c-soft: rgba(17, 17, 16, .85);
  --c-faint: rgba(17, 17, 16, .8);
  --c-line: rgba(17, 17, 16, .3);
  --c-line-strong: rgba(17, 17, 16, .6);
  --c-surface: rgba(17, 17, 16, .04);
}
@media (hover: hover) {
  .how__step:hover { translate: 0 -3px; } /* colours stay put */
}

.how__text { display: flex; flex-direction: column; gap: 12px; }
.how__num {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--c-faint); /* orange stays for each visual's signals */
}
.how__name {
  margin: 0;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.how__desc { margin: 0; max-width: 42ch; font-size: 15px; line-height: 1.55; color: var(--c-soft); text-wrap: pretty; }

/* The visual sits straight on the card's colour: no panel, border, fill or
   grid. A hairline separates it from the text. */
.how__vis {
  position: relative;
  margin-top: auto;
  height: 248px;
  overflow: hidden;
  border-top: 1px solid var(--c-line);
}
.vis__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 20px 0 0;
  transition: opacity .4s ease;
}
.how__vis.is-resetting .vis__inner { opacity: 0; } /* loop restart: a quiet fade, never a jump */
.how__vis.is-instant, .how__vis.is-instant * { transition: none !important; }

.vis__label {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-faint);
}
.vis__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 26px; }

/* Status pill: the one orange moment in each visual */
.vis__status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  height: 26px;
  padding-inline: 10px 12px;
  background: var(--orange);
  color: var(--ink);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity .45s ease, transform .45s var(--ease);
}
.vis__status i { width: 6px; height: 6px; background: var(--ink); }
.vis__status:not(.is-on) { opacity: 0; transform: translateY(4px); }

/* 01 — Briefing: questions confirm one by one, the bar fills, direction ready */
.brief { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.brief__q {
  display: grid;
  grid-template-columns: 12px 92px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  height: 28px;
}
.brief__dot {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--c-fg);
  border-radius: 50%;
  background: var(--c-fg);
  transition: background-color .35s ease, border-color .35s ease, transform .35s var(--ease);
}
.brief__label { font-size: 13px; color: var(--c-fg); transition: color .35s ease; }
.brief__field { position: relative; height: 1px; background: var(--c-line); }
.brief__field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-line-strong);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
/* the latest answered question is the active one: its dot turns orange */
.brief__q.is-on:not(:has(+ .is-on)) .brief__dot { background: var(--c-signal); border-color: var(--c-signal); }
.brief__q:not(.is-on) .brief__dot { background: transparent; border-color: var(--c-line-strong); transform: scale(.85); }
.brief__q:not(.is-on) .brief__label { color: var(--c-faint); }
.brief__q:not(.is-on) .brief__field::after { transform: scaleX(0); }

.brief__bar { display: flex; gap: 4px; flex: 0 1 132px; }
.brief__bar i { flex: 1; height: 4px; border-radius: 2px; background: var(--c-signal); transition: background-color .35s ease; }
.brief__bar i:not(.is-on) { background: var(--c-line); }

/* 02 — Design: two directions arrive, A steps back, B is chosen, snaps into
   shape while refining, then turns approved */
.dirs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dir {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 132px;
  padding: 12px;
  border: 1px solid var(--c-line-strong);
  border-radius: 8px;
  background: var(--c-surface);
  transition: opacity .6s ease, transform .6s var(--ease), border-color .4s ease;
}
.dir:not(.is-on) { opacity: 0; transform: translateY(10px); }
.dir--a.is-on:has(.dir__x.is-on) { opacity: .38; transform: scale(.96); }
.vis__inner:has(.dir__tag.is-on) .dir--b.is-on { border-color: var(--c-fg); }

.dir__art { position: relative; flex: 1; display: grid; place-items: center; }
.dir__circle { width: 34px; height: 34px; border: 2px solid var(--c-soft); border-radius: 50%; }
.dir__art--guides::before, .dir__art--guides::after {
  content: "";
  position: absolute;
  background-image: repeating-linear-gradient(90deg, var(--c-line-strong) 0 3px, transparent 3px 6px);
}
.dir__art--guides::before { left: 8%; right: 8%; top: 50%; height: 1px; }
.dir__art--guides::after {
  top: 4%; bottom: 4%; left: 50%; width: 1px;
  background-image: repeating-linear-gradient(180deg, var(--c-line-strong) 0 3px, transparent 3px 6px);
}
/* the mark: hollow while undecided, solid black once approved */
.dir__mark {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border: 2px solid var(--c-fg);
  background: var(--c-fg);
  transition: transform 1.3s var(--ease), background-color .4s ease;
}
/* before approval the mark is plain; before refining it sits off the guides */
.vis__inner:not(:has(.dir__tag--ok.is-on)) .dir__mark { background: transparent; }
.vis__inner:not(:has(:is(.dir__tag--refine, .dir__tag--ok).is-on)) .dir__mark { transform: translate(6px, -5px) rotate(-14deg); }

.dir__x {
  position: absolute;
  top: 8px;
  right: 11px;
  font-size: 16px;
  line-height: 1;
  color: var(--c-fg);
  transition: opacity .35s ease;
}
.dir__x:not(.is-on) { opacity: 0; }

.dir__refine { position: relative; height: 2px; background: var(--c-line); }
.dir__refine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-fg);
  transform-origin: left;
  transition: transform 1.4s linear;
}
.dir__refine:not(.is-on)::after { transform: scaleX(0); }

/* B's state, in one slot under B: selecionada → refinando → aprovada */
.dirs__status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  min-height: 26px;
}
.dir__tag {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding-inline: 11px;
  border: 1px solid var(--c-fg);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-fg);
  white-space: nowrap;
  transition: opacity .4s ease, transform .4s var(--ease);
}
.dir__tag:not(.is-on) { opacity: 0; transform: translateY(4px); }
/* Selecionada / Refinando: ink outline. Aprovada: solid ink, orange text. */
.dir__tag--ok { border-color: transparent; }
.how__step--accent .dir__tag--ok { background: var(--ink); color: var(--orange); }
.how__step--accent .dir__tag--ok i { background: var(--orange); }

/* 03 — Entrega: files arrive and settle, each gets its ready mark, Brand.md
   last, followed by the ready status. */
.pkg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 4px;
  border: 0;
}
.pkg__list { list-style: none; margin: 0; padding: 0; }
.pkg__list li {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 8px;
  align-items: center;
  gap: 10px;
  height: 25px;
  border-top: 1px solid var(--c-line);
  transition: opacity .45s ease, transform .45s var(--ease);
}
.pkg__list li:not(.is-on) { opacity: 0; transform: translateX(-10px); }
.pkg__name { justify-self: start; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-fg); }
.pkg__meta { font-size: 12px; color: var(--c-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkg__dot { width: 8px; height: 8px; background: var(--c-fg); transition: background-color .3s ease .3s; }
.pkg__list li:not(.is-on) .pkg__dot { background: var(--c-line); }
/* Brand.md: the highlight — an orange chip (black text keeps AA on white) */
.pkg__md .pkg__name { padding: 1px 7px; margin-left: -7px; border-radius: 999px; background: var(--orange); color: var(--ink); }
.pkg__md .pkg__dot { background: var(--orange); }

/* Tablet: one card per row, text beside its visual */
@media (min-width: 760px) and (max-width: 1023px) {
  .how__step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    column-gap: clamp(28px, 4vw, 44px);
  }
  .how__vis { margin-top: 0; border-top: 0; } /* side by side: spacing divides */
  .vis__inner { padding-top: 0; }
}
/* Desktop: three in a row, visuals aligned along the bottom */
@media (min-width: 1024px) {
  .how__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 07 Studio independente ───────────────────────────────────────────── */

/* White sheet that fades in from / out to the paper, no hard edge */
.studio {
  position: relative;
  background: linear-gradient(180deg, var(--paper) 0, #FFFFFF var(--section-y), #FFFFFF calc(100% - var(--section-y)), var(--paper) 100%);
}
.studio__wrap {
  position: relative;
  padding-block: var(--section-y);
  display: flex;
  flex-direction: column;
  gap: var(--block-y);
}
.studio__head { display: flex; flex-wrap: wrap; gap: 40px clamp(32px, 6vw, 96px); }
.studio__label { flex: 0 1 220px; align-self: flex-start; }
.studio__head-body { flex: 1 1 560px; display: flex; flex-direction: column; gap: 40px; }
.studio__title {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 72px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.studio__intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 18px clamp(32px, 5vw, 72px);
  font-size: clamp(17px, 1.3vw, 19px);
  color: var(--ink-soft);
  text-wrap: pretty;
}
.studio__intro p { margin: 0; }
.studio__intro-strong { color: var(--ink); }

/* Model — agency vs. Renato Brands as two routes from problem to solution.
   Same rail length on both sides; nodes sit at fractions of it (--at). The
   agency route passes more stops (quiet greys); the RB route converges on one
   hub (ink + orange). Markers/fills are driven by site.js; the static state
   already reads on its own. */
.model { --rail-h: 420px; display: flex; flex-direction: column; gap: 20px; }

.model__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.model__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 2vw, 28px); }

.model__col {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.8vw, 40px);
  background: var(--paper);
  border-radius: 10px;
}

.model__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.model__name { margin: 0; font-size: clamp(20px, 1.6vw, 24px); font-weight: 500; letter-spacing: -.02em; }
.model__col--agency .model__name { color: var(--ink-soft); }
.model__code {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-light);
  white-space: nowrap;
}
.model__col--rb .model__code { color: var(--orange); }

.model__cap {
  margin: 0 0 14px;
  padding-left: 34px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Flow: nodes are absolutely placed along the rail */
.model__flow {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  height: calc(var(--rail-h) + 64px); /* room for the last node's text */
}
.model__rail {
  position: absolute;
  left: 10px;
  top: 0;
  width: 1px;
  height: var(--rail-h);
  background: var(--line-soft);
}
.model__col--rb .model__rail { background: var(--muted-rule); }
.model__fill {
  position: absolute;
  inset: 0 -.5px;
  background: var(--muted);
  transform: scaleY(var(--p, 0));
  transform-origin: top center;
  transition: transform var(--move, .7s) cubic-bezier(.45, 0, .25, 1);
}
.model__col--rb .model__fill { background: var(--orange); }
.model__marker {
  position: absolute;
  left: -4.5px;
  top: -5px;
  width: 10px;
  height: 10px;
  background: var(--muted);
  opacity: 0;
  translate: 0 calc(var(--p, 0) * var(--rail-h));
  transition: translate var(--move, .7s) cubic-bezier(.45, 0, .25, 1), opacity .4s ease;
}
.model__col--rb .model__marker { background: var(--orange); }
.model.is-running .model__marker { opacity: 1; }
.model.is-reset :is(.model__fill, .model__marker) { transition: none; }

.model__node {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--at) * var(--rail-h));
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  column-gap: 13px;
  row-gap: 3px;
  align-items: start;
  transform: translateY(-9px);
}
.model__dot {
  grid-row: 1 / span 3;
  justify-self: center;
  width: 11px;
  height: 11px;
  margin-top: 4px;
  background: var(--paper);
  border: 1.5px solid var(--muted-light);
  transition: background .4s ease, border-color .4s ease;
}
.model__label {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
  transition: color .35s ease;
}
.model__desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted-light);
  transition: color .35s ease;
  text-wrap: pretty;
}

/* Renato Brands route: ink labels, hub in orange */
.model__col--rb .model__label { color: var(--ink); }
.model__col--rb .model__desc { color: var(--muted); }
.model__col--rb .model__dot { border-color: var(--ink); }
.model__node--hub .model__dot { width: 15px; height: 15px; margin-top: 2px; background: var(--orange); border-color: var(--orange); }
.model__branch {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  padding-left: 14px;
  border-left: 1px solid var(--muted-rule);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.model__branch span { position: relative; padding-block: 3px; }
.model__branch span::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 9px;
  height: 1px;
  background: var(--muted-rule);
}

/* A node the marker has reached */
.model__node.is-hit .model__dot { background: var(--muted); border-color: var(--muted); }
.model__node.is-hit .model__label { color: var(--ink-soft); }
.model__col--rb .model__node.is-hit .model__dot { background: var(--ink); border-color: var(--ink); }
.model__col--rb .model__node--hub.is-hit .model__dot { background: var(--orange); border-color: var(--orange); }

@media (hover: hover) and (pointer: fine) {
  .model__node:hover .model__label { color: var(--ink); }
  .model__node:hover .model__desc { color: var(--ink-soft); }
  .model__node:hover .model__dot { border-color: var(--ink); }
  .model__col--rb .model__node:not(.model__node--hub):hover .model__dot { background: var(--ink); }
}

.model__note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.model__col--rb .model__note { color: var(--ink); }

.model__conclusion {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  letter-spacing: -.015em;
}
.model__conclusion-dot { flex: none; width: 8px; height: 8px; background: var(--orange); }

@media (min-width: 900px) {
  .model__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Perguntas frequentes ─────────────────────────────────────────────── */
/* A secondary section: a short intro column (≈38%) beside a ruled accordion
   (≈62%) from 900px, stacked below. Question | plus, hairlines between, no
   cards. The panel eases its height with grid rows (0fr → 1fr) and leaves the
   accessibility tree once closed. Orange only on the open mark and focus. */

.faq__wrap {
  padding-block: var(--section-y);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.faq__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.faq__title {
  margin: 8px 0 0;
  font-size: var(--title-2);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.02;
}
.faq__lede { margin: 0; max-width: 34ch; font-size: clamp(16px, 1.2vw, 17px); line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.faq__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.faq__cta-text {
  text-decoration: underline;
  text-decoration-color: var(--line-soft);
  text-underline-offset: 6px;
  transition: text-decoration-color .3s ease;
}
.faq__cta:hover .faq__cta-text, .faq__cta:focus-visible .faq__cta-text { text-decoration-color: var(--orange); }

.faq__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.faq__item { border-top: 1px solid var(--line); }
.faq__q { margin: 0; font: inherit; }
.faq__btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-height: 56px;
  padding: 16px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.faq__btn:focus-visible { outline-offset: 2px; }
.faq__text {
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.35;
  text-wrap: pretty;
}

/* Plus → cross: the same two strokes, turned 45° */
.faq__icon {
  position: relative;
  justify-self: end;
  width: 14px;
  height: 14px;
  color: var(--ink);
  transition: transform .25s var(--ease), color .2s ease;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 1.5px;
  margin-top: -.75px;
  background: currentColor;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__btn[aria-expanded="true"] .faq__icon { transform: rotate(45deg); color: var(--orange); }
@media (hover: hover) {
  .faq__btn:hover .faq__icon { color: var(--orange); }
}

.faq__panel { display: grid; grid-template-rows: 1fr; }
.faq__inner { overflow: hidden; min-height: 0; }
.faq__answer {
  margin: 0;
  max-width: 60ch;
  padding: 0 44px 20px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* With JS: collapsed by default; closed panels leave the accessibility tree */
.faq__list.is-ready .faq__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .26s var(--ease), visibility 0s linear .26s;
}
.faq__list.is-ready .faq__panel.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .26s var(--ease), visibility 0s;
}
.faq__list.is-ready .faq__inner { opacity: 0; transition: opacity .2s ease; }
.faq__list.is-ready .faq__panel.is-open .faq__inner { opacity: 1; transition: opacity .25s ease .05s; }

@media (min-width: 900px) {
  .faq__wrap {
    grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
    column-gap: clamp(48px, 6vw, 112px);
    align-items: start;
  }
  .faq__intro { position: sticky; top: calc(var(--header-h) + 32px); }
  .faq__btn { padding-block: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__list.is-ready :is(.faq__panel, .faq__panel.is-open, .faq__inner) { transition: none; }
}

/* ── CTA final ────────────────────────────────────────────────────────── */
/* The final section and footer sit on one continuous cutting mat. */

.close {
  position: relative;
  overflow: hidden;
}
.close__marks i {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--dark-faint); /* crop marks, like the hero's; orange is for the CTA */
}
.close__marks i:nth-child(1) { top: 24px; left: 24px; border-width: 1px 0 0 1px; }
.close__marks i:nth-child(2) { top: 24px; right: 24px; border-width: 1px 1px 0 0; }
.close__marks i:nth-child(3) { bottom: 24px; left: 24px; border-width: 0 0 1px 1px; }
.close__marks i:nth-child(4) { bottom: 24px; right: 24px; border-width: 0 1px 1px 0; }

.close__wrap {
  position: relative;
  padding-block: var(--section-y);
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
}
.close__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--dark-line);
}
.close__eyebrow { color: var(--dark-text); }
.close__eyebrow .eyebrow__dot { background: var(--orange); }
.close__index { margin: 0; font-size: 13px; color: var(--dark-faint); letter-spacing: .02em; }

.close__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .08em;
  font-size: var(--title-1); /* a conclusion, not a second hero */
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}
.close__line { display: block; max-width: 24ch; text-wrap: balance; color: var(--dark-faint); }
.close__line--strong { color: var(--dark-text); }

.close__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
}
.close__text { flex: 1 1 320px; max-width: 420px; margin: 0; font-size: clamp(17px, 1.3vw, 19px); color: var(--dark-muted); }
.close__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.close__cta { --fill: var(--paper); --fill-fg: var(--dark); color: var(--dark); }
.close__alt {
  --fill: var(--dark-text);
  --fill-fg: var(--dark);
  background: transparent;
  border: 1px solid var(--dark-line);
  color: var(--dark-text);
}
.close__alt:hover, .close__alt:focus-visible { border-color: var(--dark-text); }
.close .btn:focus-visible { outline-color: var(--orange); }

@media (max-width: 559px) {
  .close__marks i:nth-child(n) { width: 12px; height: 12px; }
  .close__marks i:nth-child(1), .close__marks i:nth-child(3) { left: 12px; }
  .close__marks i:nth-child(2), .close__marks i:nth-child(4) { right: 12px; }
  .close__actions { width: 100%; flex-direction: column; }
  .close__actions .btn { width: 100%; justify-content: space-between; }
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.closing-mat {
  background-color: var(--dark);
  color: var(--dark-text);
  background-image:
    url("../images/cutting-mat-angles.svg"),
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 100% auto, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center bottom, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat;
}
.footer__wrap {
  padding-block: clamp(48px, 6vw, 72px) 32px;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--dark-line);
}
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px 48px; }
.footer__brand { display: flex; flex-direction: column; gap: 12px; }
.footer__logo { height: 24px; width: auto; align-self: flex-start; }
.footer__tag { margin: 0; font-size: 15px; color: var(--dark-muted); }

.footer__nav { display: flex; flex-wrap: wrap; gap: 4px 32px; font-size: 16px; }
.footer__nav a, .footer__top-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  text-underline-offset: 6px;
  transition: color .35s var(--ease);
}
.footer__nav a:hover, .footer__top-link:hover { color: var(--orange); text-decoration: underline; text-decoration-thickness: 1px; }
.footer__nav a:focus-visible, .footer__top-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 13px;
  color: var(--dark-faint);
}
.footer__top-link { color: var(--dark-muted); }

@media (max-width: 559px) {
  .footer__nav { flex-direction: column; gap: 0; width: 100%; }
  .footer__nav a { justify-content: space-between; min-height: 48px; border-bottom: 1px solid var(--dark-line); }
}

/* ── Project inquiry ──────────────────────────────────────────────────── */
/* A wide sheet on the site's paper (≈92% of the viewport on desktop,
   full-screen on phones): a slim bar (logo · step count · close), one question
   at a time in a reading-width column, and a footer with Voltar · progress
   segments · Continuar. The <dialog> is the scrim, like the offer dialogs. */

.inq {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 3vw, 40px);
  border: 0;
  background: rgba(17, 17, 16, .38);
  color: var(--ink);
  opacity: 0;
  transition: opacity .25s ease;
  overflow: hidden;
}
.inq[open] { display: grid; place-items: center; }
.inq::backdrop { background: transparent; }
.inq.is-in { opacity: 1; }

.inq__panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1320px, 100%);
  height: 100%;
  background-color: var(--paper);
  /* the site's cutting-mat grid, very faint */
  background-image:
    linear-gradient(rgba(17, 17, 16, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 16, .035) 1px, transparent 1px);
  background-size: 120px 120px;
  background-position: -1px -1px;
  border-radius: 10px;
  box-shadow: 0 30px 60px -40px rgba(17, 17, 16, .45);
  overflow: hidden;
  transform: scale(.985);
  transition: transform .25s var(--ease);
}
.inq.is-in .inq__panel { transform: none; }

.inq__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 14px 12px clamp(20px, 3.4vw, 48px);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.inq__logo { height: 18px; width: auto; }
.inq__count {
  margin: 0;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.inq__close { justify-self: end; }

.inq__form { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; margin: 0; }
.inq__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.inq__inner {
  max-width: 760px; /* reading width, left-aligned inside the sheet */
  margin-inline: auto;
  padding: clamp(32px, 7vh, 88px) clamp(20px, 4vw, 48px) 48px;
}

/* The offer this project is about, with a quiet way to change it */
.inq__chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 clamp(28px, 4vh, 44px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.inq__chosen-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.inq__chosen-name { font-size: 15px; font-weight: 500; }
.inq__change {
  margin-left: auto;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-soft);
  text-underline-offset: 5px;
  cursor: pointer;
  transition: text-decoration-color .3s ease;
}
.inq__change:hover, .inq__change:focus-visible { text-decoration-color: var(--orange); }

/* A step: label · question · content. Steps swap with a short fade + 8px slide */
.inq__step { transition: opacity .22s ease, transform .22s var(--ease); }
.inq__step.is-before { opacity: 0; transform: translateX(-8px); }
.inq__step.is-after { opacity: 0; transform: translateX(8px); }

.inq__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.inq__q {
  margin: 0;
  font-size: var(--title-2);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.05;
  text-wrap: balance;
}
.inq__q:focus { outline: none; } /* focused by script on each step, for screen readers */

/* Offer choices: a compact selectable list, not the pricing cards */
.inq__choices { display: grid; gap: 8px; margin: clamp(28px, 4vh, 40px) 0 0; padding: 0; border: 0; }
.inq__choice {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 18px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.inq__radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.inq__mark {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--line-soft);
  transition: background-color .2s ease, border-color .2s ease;
}
.inq__choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inq__choice-name { font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; letter-spacing: -.015em; line-height: 1.25; }
.inq__choice-desc { font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.inq__choice-price { font-size: 17px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inq__choice-price--text { font-size: 14px; font-weight: 400; color: var(--ink-soft); }

@media (hover: hover) {
  .inq__choice:hover { border-color: var(--line-soft); }
}
.inq__choice:has(.inq__radio:checked) { border-color: var(--ink); background: var(--paper-raised); }
.inq__choice:has(.inq__radio:checked) .inq__mark { background: var(--orange); border-color: var(--orange); }
.inq__choice:has(.inq__radio:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }

.inq__hint { margin: 12px 0 0; font-size: 15px; color: var(--ink-soft); }

/* Text fields: the site's form language — a single rule under each field */
.inq__fields { display: grid; gap: 28px; margin-top: clamp(28px, 4vh, 40px); }
.inq__fields--follow { margin-top: 24px; }
.inq__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px 32px; }
.inq__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inq__field--date { max-width: 240px; }
.inq__label { font-size: 14px; font-weight: 500; color: var(--ink); }
.inq__opt-tag { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--muted); }
.inq__input {
  width: 100%;
  min-height: 48px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 17px; /* ≥16px: no zoom on iOS focus */
  line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.inq__input:hover { border-bottom-color: var(--muted-rule); }
.inq__input:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.inq__input::placeholder { color: var(--muted-light); }
/* filled: the rule settles darker once there is an answer (error still wins) */
.is-filled > .inq__input:not(:focus) { border-bottom-color: var(--ink-faint); }
/* short answers: 2–3 lines, growing to about 5, never taking over the screen */
.inq__textarea { min-height: 0; max-height: 9.5em; resize: vertical; }
.inq__select {
  appearance: none;
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%);
  background-position: calc(100% - 10px) 52%, calc(100% - 5px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.inq__select:has(option[value=""]:checked) { color: var(--muted-light); }
.inq__select option { color: var(--ink); }
.inq__field.is-invalid .inq__input { border-bottom-color: var(--error); box-shadow: 0 1px 0 var(--error); }

/* Character count under the longer answers; the limit is checked on
   Continuar, never cut while typing */
.inq__chars {
  align-self: flex-end;
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.inq__chars.is-over { color: var(--error); }

/* Choice groups: the same selectable rows as the offer list, compact */
.inq__group { margin: clamp(28px, 4vh, 40px) 0 0; padding: 0; border: 0; min-width: 0; }
.inq__hint + .inq__group { margin-top: 20px; }
.inq__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; }
.inq__opts--stack { grid-template-columns: minmax(0, 1fr); }
.inq__opts--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 480px; }
.inq__opts--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
.inq__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, opacity .2s ease;
}
.inq__check { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.inq__opt .inq__mark { flex: none; }
.inq__opt:has(.inq__radio) .inq__mark { border-radius: 50%; } /* one answer: round; several: square */
@media (hover: hover) {
  .inq__opt:hover { border-color: var(--line-soft); }
}
.inq__opt:has(:checked) { border-color: var(--ink); background: var(--paper-raised); }
.inq__opt:has(:checked) .inq__mark { background: var(--orange); border-color: var(--orange); }
.inq__opt:has(:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }
.inq__opt:has(:disabled) { opacity: .45; cursor: not-allowed; } /* "até 3" reached */

/* A quiet aside under a choice (naming, identity) */
.inq__note {
  margin: 20px 0 0;
  max-width: 56ch;
  padding-left: 14px;
  border-left: 2px solid var(--orange);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Errors sit right under their field, after a first try to continue */
.inq__field-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--error);
}
.inq__field-error::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--error); }
.inq__field-error[hidden] { display: none; }
.inq__group.is-invalid .inq__opt { border-color: rgba(194, 65, 12, .45); }

/* Review: Oferta · Empresa · Projeto · Prazo · Contato. A group title, then
   one row per step: label · answers · Editar (the label is dropped when the
   group holds a single step) */
.inq__review { margin: clamp(24px, 3.4vh, 36px) 0 0; border-bottom: 1px solid var(--line); }
/* Honeypot: off-screen but rendered (not display:none, which simple bots
   skip); aria-hidden + tabindex="-1" keep people and screen readers out. */
.inq__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.inq__rgroup { padding: 16px 0 10px; border-top: 1px solid var(--line); }
.inq__rgroup-title {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.inq__rlist { margin: 0; }
.inq__ritem {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 24px;
  padding: 6px 0;
}
.inq__ritem--solo { grid-template-columns: minmax(0, 1fr) auto; }
.inq__rlabel { font-size: 14px; color: var(--muted); }
.inq__rvalue { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.inq__rvalue span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.inq__redit { margin: 0; }
.inq__edit {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-soft);
  text-underline-offset: 5px;
  cursor: pointer;
  transition: text-decoration-color .3s ease;
}
.inq__edit:hover, .inq__edit:focus-visible { text-decoration-color: var(--orange); }

/* Screens outside the flow (resume, confirm, success, error): the question
   style, a short text and their own actions; the footer is hidden */
.inq__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: clamp(28px, 4vh, 40px);
}
.inq__link {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-soft);
  text-underline-offset: 5px;
  cursor: pointer;
  transition: text-decoration-color .3s ease;
}
.inq__link:hover, .inq__link:focus-visible { text-decoration-color: var(--orange); }
.inq__actions > [hidden] { display: none; } /* e.g. no retry when the answers need a review */
.inq__resume {
  margin: 24px 0 0;
  padding: 14px 0;
  border-block: 1px solid var(--line);
  font-size: 16px;
  font-weight: 500;
}
.inq__resume[hidden] { display: none; }
.inq__lede {
  margin: 18px 0 0;
  max-width: 52ch;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--ink-soft);
}
.inq__result-mark { display: block; width: 10px; height: 10px; margin-bottom: 28px; background: var(--orange); }
.inq__result-mark--error { background: var(--error); }

/* Sending: the label reads "Enviando...", a small ring replaces the arrow */
.inq__spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: inq-spin .8s linear infinite;
}
.btn.is-busy { cursor: progress; }
.btn.is-busy::before { display: none; }
.btn.is-busy .inq__spinner { display: inline-block; }
.btn.is-busy .btn__icon { display: none; }
@keyframes inq-spin { to { transform: rotate(360deg); } }

/* Footer: Voltar · progress segments · Continuar (in flow, never fixed) */
.inq__foot {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 14px clamp(20px, 3.4vw, 48px);
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.inq__back {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.inq__back span { transition: transform .3s var(--ease); }
.inq__back:hover span, .inq__back:focus-visible span { transform: translateX(-3px); }
.inq__track { grid-column: 2; display: flex; gap: 4px; max-width: 320px; width: 100%; justify-self: center; }
.inq__track i { flex: 1; height: 2px; background: var(--line); transition: background-color .3s ease; }
.inq__track i.is-done, .inq__track i.is-current { background: var(--orange); }
.inq__next { grid-column: 3; }
.inq__next[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.inq__next[aria-disabled="true"]::before { display: none; } /* no hover fill while unavailable */
.inq__next[aria-disabled="true"] .btn__icon i { transform: none !important; }
.inq__next[aria-disabled="true"] .btn__icon i:last-child { visibility: hidden; }
.inq__next.is-busy[aria-disabled="true"] { opacity: 1; cursor: progress; }
.inq__foot[hidden] { display: none; }

/* Phones: a full-screen sheet; footer stays in flow under the content */
@media (max-width: 759px) {
  /* --inq-vh / --inq-top follow the visual viewport (site.js), so the
     keyboard never covers the footer */
  .inq { padding: var(--inq-top, 0px) 0 0; }
  .inq[open] { place-items: start center; }
  .inq__panel { width: 100%; height: var(--inq-vh, 100dvh); border-radius: 0; box-shadow: none; }
  .inq__opts--trio { grid-template-columns: minmax(0, 1fr); }
  .inq__ritem { grid-template-columns: minmax(0, 1fr) auto; }
  .inq__rlabel { grid-column: 1; grid-row: 1; }
  .inq__ritem:not(.inq__ritem--solo) .inq__rvalue { grid-column: 1 / -1; grid-row: 2; }
  .inq__redit { grid-column: 2; grid-row: 1; }
  .inq__actions { flex-direction: column; align-items: stretch; }
  .inq__actions .btn { justify-content: space-between; }
  .inq__bar { grid-template-columns: auto 1fr auto; padding-left: 20px; }
  .inq__logo { height: 16px; }
  .inq__count { justify-self: center; }
  .inq__inner { padding: 28px 20px 32px; }
  .inq__choice { grid-template-columns: 14px minmax(0, 1fr); padding: 16px; }
  .inq__choice-price { grid-column: 2; }
  .inq__foot { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; padding: 12px 20px; }
  .inq__back { min-width: 0; }
}

/* After closing the inquiry with answers: a short note that they stay */
.inq-toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 120;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--dark);
  color: var(--dark-text);
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s var(--ease);
}
.inq-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 859px) {
  .header__nav, .header__cta { display: none; }
  .menu-toggle { display: flex; }
  .hero__mark { display: none; }
}

@media (min-width: 860px) {
  .menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}