/* jp — site.css
   Plain-CSS port of the jp design system's React components (Button, Card, Tag,
   MediaSlot, ProjectCard, ArcDivider, OutlineBackdrop, PillTabs, ReelPlayer,
   IconButton, Monogram, DisplayText) plus page layout. Hover states that the
   original implemented with React onMouseEnter/Leave are done here as plain
   :hover — same visual result, no JS needed for them. */

* { box-sizing: border-box; }
img { max-width: none; }

/* ---------- layout shell ---------- */

.page { min-height: 100vh; background: var(--surface-page); overflow-x: clip; } /* card Lotties bleed past the viewport edge */

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  border-bottom: var(--border-width) solid var(--border-default);
}
/* The frosted glass lives on a pseudo-element, not on .topbar itself: an
   element with backdrop-filter would stop the dropdown inside it from
   blurring the page behind. The dropdown reuses the same --glass material. */
.topbar, .mobile-menu {
  --glass-bg: color-mix(in srgb, var(--surface-page) 78%, transparent);
  --glass-blur: blur(12px);
}
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.topbar-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  width: 100%; min-height: 56px; padding: 12px var(--space-3); box-sizing: border-box;
}
.topbar-links { display: flex; align-items: center; gap: 6px; justify-content: center; }
.nav-link {
  position: relative; isolation: isolate; overflow: hidden;
  font-family: var(--font-text); font-weight: var(--weight-medium);
  font-size: var(--text-body-l); text-transform: lowercase;
  padding: 8px 14px; border-radius: var(--radius-pill);
  color: var(--text-secondary); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-arc);
}
.nav-link[aria-current="page"] { color: var(--state-active); }
.nav-link::before {
  content: ""; position: absolute; inset: 0; background: var(--jp-lime);
  border-radius: var(--radius-pill); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-arc); z-index: -1;
}
.nav-link:hover::before { transform: scaleX(1); }
.nav-link:hover { color: var(--jp-black) !important; }
.topbar-cta { display: flex; justify-content: flex-end; }

/* instagram · linkedin · whatsapp, in the top bar and the mobile dropdown */
.social-buttons { display: flex; align-items: center; gap: 8px; }
/* the icons are single-colour svgs used as masks, so they take the button's
   text colour (black on the orange whatsapp, white on the others, lime on hover) */
.icone-rede {
  width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat;
}
.icon-button--l .icone-rede { width: 20px; height: 20px; }
.topbar-logo { position: absolute; left: -10px; top: -12px; display: block; line-height: 0; z-index: 3; }
.topbar-logo img { width: clamp(72px, 13vw, 176px); }
.topbar-spacer { height: 64px; }

/* mobile nav (design: burger + drawer under 860px) */
.menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; margin-left: auto;
  background: transparent; border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-pill); cursor: pointer;
}
.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
  display: block; width: 20px; height: 2px; border-radius: 999px; background: var(--jp-white);
}
.menu-toggle-bars { position: relative; transition: background-color 0s linear 150ms; }
.menu-toggle-bars::before,
.menu-toggle-bars::after { content: ""; position: absolute; left: 0; }

/* burger ↔ x in two beats: the outer bars slide to the middle, then rotate.
   Closing plays it backwards (rotate back, then slide apart). */
.menu-toggle-bars::before { top: -7px; transition: top 150ms var(--ease-arc) 150ms, transform 150ms var(--ease-arc); }
.menu-toggle-bars::after { top: 7px; transition: top 150ms var(--ease-arc) 150ms, transform 150ms var(--ease-arc); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars { background-color: transparent; transition-delay: 150ms; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before,
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after {
  top: 0; transition: top 150ms var(--ease-arc), transform 150ms var(--ease-arc) 150ms;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after { transform: rotate(-45deg); }

/* The drawer hangs below the topbar in the same frosted glass and drops down
   from under it; the logo stays on top of it. It slides down while its top is
   clipped by the same amount, so it seems to come out from under the bar and
   its bottom line travels down with it. */
.mobile-menu {
  display: none; flex-direction: column; align-items: center; gap: 0;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 2;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  padding: var(--space-1) var(--space-3) var(--space-3);
  border-top: var(--border-width) solid var(--border-default);
  border-bottom: var(--border-width) solid var(--border-default);
}
.mobile-menu.is-opening { animation: menu-drop 280ms cubic-bezier(.22,.61,.36,1) both; }
.mobile-menu.is-closing { animation: menu-lift 200ms cubic-bezier(.55,0,.78,.4) both; }
.mobile-menu.is-opening > * { animation: menu-item 280ms cubic-bezier(.22,.61,.36,1) both; }
.mobile-menu.is-opening > *:nth-child(2) { animation-delay: 30ms; }
.mobile-menu.is-opening > *:nth-child(3) { animation-delay: 60ms; }
.mobile-menu.is-opening > *:nth-child(4) { animation-delay: 90ms; }
.mobile-menu.is-opening > *:nth-child(5) { animation-delay: 120ms; }
@keyframes menu-drop {
  from { clip-path: inset(100% 0 0 0); transform: translateY(-100%); }
  to   { clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes menu-lift {
  from { clip-path: inset(0 0 0 0); transform: none; }
  to   { clip-path: inset(100% 0 0 0); transform: translateY(-100%); }
}
@keyframes menu-item {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu.is-opening, .mobile-menu.is-closing, .mobile-menu.is-opening > * { animation: none; }
  .menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after { transition: none !important; }
}
.mobile-menu-link {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-text); font-weight: var(--weight-medium); font-size: var(--text-sub-l);
  text-transform: lowercase; color: var(--text-secondary); text-decoration: none;
}
.mobile-menu-link:hover { color: var(--jp-lime); }
.mobile-menu-link[aria-current="page"] { color: var(--state-active); }
.mobile-menu-social { justify-content: center; gap: 12px; margin-top: var(--space-2); }

@media (max-width: 860px) {
  .topbar-nav { display: flex; align-items: center; justify-content: flex-end; }
  .topbar-nav > span:first-child { display: none; }
  .topbar-links, .topbar-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .mobile-menu:not([hidden]) { display: flex; }
  .topbar-logo { left: 4px; top: 2px; }
  .topbar-logo img { width: 104px; }
  .card-stage-lottie { display: none; }
}

.footer {
  max-width: var(--page-max); margin: 0 auto;
  padding: var(--space-8) var(--space-3) var(--space-10);
  display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap;
}
.footer-meta { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-body-s); color: var(--text-secondary); }
.footer-tagline { flex: 1; min-width: 260px; }

/* ---------- brand: Monogram ---------- */

.monogram { display: inline-block; }
.monogram-asset {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.monogram-asset img { position: absolute; top: -18%; right: -26%; display: block; }

/* ---------- brand: OutlineBackdrop ---------- */

.outline-backdrop {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.outline-backdrop img { position: absolute; display: block; }

/* ---------- brand: DisplayText ---------- */

.display-text {
  font-family: var(--font-display); font-weight: 400; text-transform: lowercase;
  line-height: var(--leading-display); letter-spacing: var(--tracking-display);
  margin: 0; color: var(--text-primary);
}
.display-xl { font-size: var(--text-display-xl); }
.display-l { font-size: var(--text-display-l); }
.display-m { font-size: var(--text-display-m); }
.display-s { font-size: var(--text-display-s); }
.display-highlight { color: var(--accent-highlight); }

/* ---------- core: ArcDivider ---------- */

.arc-divider { position: relative; overflow: hidden; --arc-h: 80px; height: var(--arc-h); }
.arc-divider-curve {
  position: absolute; left: -10%; width: 120%; top: 0; border-radius: 50%;
  height: calc(var(--arc-h) * 4);
  border-top: var(--border-width) solid var(--border-default);
}

/* ---------- core: Card ---------- */

.card {
  position: relative; overflow: hidden; padding: var(--space-3);
  border-radius: var(--radius-card); border-style: solid; border-width: var(--border-width);
  transition: border-color var(--dur-base) var(--ease-arc);
  background: var(--surface-card); color: var(--text-primary); border-color: var(--border-default);
}
.card--lime { background: var(--surface-invert); color: var(--text-on-invert); border-color: var(--border-on-invert); }
.card--white { background: var(--surface-light); color: var(--jp-black); border-color: var(--border-on-light); }
.card--interactive { cursor: pointer; }
.card--interactive:hover { border-color: var(--accent-primary); }

/* ---------- core: Tag ---------- */

.tag {
  display: inline-flex; align-items: center; padding: 5px 12px;
  border-radius: var(--radius-pill); border-style: solid; border-width: var(--border-width);
  font-family: var(--font-text); font-weight: var(--weight-medium); font-size: var(--text-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap;
  background: transparent; color: var(--text-secondary); border-color: var(--border-default);
}
.tag--orange { background: var(--accent-primary); color: var(--text-on-accent); border-color: transparent; }
.tag--lime { background: var(--accent-highlight); color: var(--text-on-invert); border-color: transparent; }
.tag--white { background: var(--surface-light); color: var(--jp-black); border-color: transparent; }

/* ---------- core: Icon / IconButton ---------- */

.icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.icon svg { width: 100%; height: 100%; display: block; }

.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); cursor: pointer; background: transparent;
  border: var(--border-width) solid var(--border-default); padding: 0;
  transition: background var(--dur-fast) var(--ease-arc), border-color var(--dur-fast) var(--ease-arc);
  color: var(--text-primary);
}
.icon-button .icon { color: inherit; }
.icon-button:hover { border-color: var(--accent-highlight); color: var(--accent-highlight); }
.icon-button--s { width: 32px; height: 32px; }
.icon-button--m { width: 40px; height: 40px; }
.icon-button--l { width: 48px; height: 48px; }
.icon-button--primary { background: var(--action-bg); border-color: transparent; color: var(--action-fg); }
.icon-button--primary:hover { background: var(--accent-highlight); border-color: transparent; color: var(--action-fg); }
.icon-button--active { border-color: var(--state-active); color: var(--state-active); }
.icon-button--active:hover { border-color: var(--state-active); color: var(--state-active); }

/* ---------- core: Button ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-text); font-weight: var(--weight-medium); line-height: 1.1;
  border-radius: var(--radius-button); cursor: pointer; text-decoration: none;
  white-space: nowrap; border-style: solid; border-width: var(--border-width);
  transition: background var(--dur-fast) var(--ease-arc), color var(--dur-fast) var(--ease-arc),
              border-color var(--dur-fast) var(--ease-arc), transform var(--dur-fast) var(--ease-arc);
}
.btn .icon { flex: 0 0 auto; }
.btn--s { padding: 8px 16px; font-size: var(--text-body-s); }
.btn--m { padding: 12px 24px; font-size: var(--text-body-l); }
.btn--l { padding: 16px 32px; font-size: 1rem; }
.btn--primary { background: var(--action-bg); color: var(--action-fg); border-color: transparent; }
.btn--primary:hover { background: var(--accent-highlight); color: var(--text-on-invert); }
.btn--secondary { background: transparent; color: var(--action-ghost-fg); border-color: var(--border-default); }
.btn--secondary:hover { border-color: var(--accent-highlight); color: var(--accent-highlight); }
.btn--lime { background: var(--accent-highlight); color: var(--text-on-invert); border-color: transparent; }
.btn--lime:hover { background: var(--action-bg); }
.btn--ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn--ghost:hover { border-color: var(--accent-highlight); color: var(--accent-highlight); }
.btn[disabled] { cursor: not-allowed; opacity: .4; }

/* ---------- media: MediaSlot ---------- */

.media-slot {
  position: relative; overflow: hidden; border-radius: var(--radius-media);
  border: var(--border-width) solid var(--border-default); background: var(--surface-card);
}
.media-slot img.media-slot-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-slot-label {
  position: absolute; left: 16px; bottom: 14px; font-family: var(--font-text);
  font-weight: var(--weight-medium); font-size: var(--text-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-secondary);
}

/* ---------- media: ProjectCard ---------- */

.project-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-1); text-align: left; width: 100%; }
.project-card-media { display: block; }
.project-card-row { display: flex; align-items: flex-start; gap: var(--space-2); padding: 6px 10px 10px; }
.project-card-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.project-card-title {
  font-family: var(--font-display); text-transform: lowercase; font-size: var(--text-sub-l);
  line-height: 1.05; color: var(--text-primary); transition: color var(--dur-fast) var(--ease-arc);
}
.project-card:hover .project-card-title { color: var(--accent-primary); }
.project-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.project-card-arrow { margin-left: auto; margin-top: 4px; color: var(--text-secondary); transition: color var(--dur-fast) var(--ease-arc); }
.project-card:hover .project-card-arrow { color: var(--accent-primary); }

/* ---------- media: ReelPlayer ---------- */

.reel-player {
  position: relative; border-radius: var(--radius-media); overflow: hidden;
  border: var(--border-width) solid var(--border-default);
}
/* the controls sit under the video, not on it: the reel has its own text
   (counter, timecode) in the bottom corners */
.reel-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--surface-page); cursor: pointer; }
.reel-controls {
  display: flex; align-items: center;
  gap: var(--space-2); padding: var(--space-2);
  border-top: var(--border-width) solid var(--border-default);
}
.reel-scrub {
  flex: 1; height: 6px; border-radius: var(--radius-pill); border: var(--border-width) solid var(--border-default);
  cursor: pointer; overflow: hidden; background: transparent;
}
.reel-scrub-fill { width: 0%; height: 100%; background: var(--accent-primary); border-radius: var(--radius-pill); }
.reel-time {
  font-family: var(--font-text); font-weight: var(--weight-medium); font-size: var(--text-label);
  letter-spacing: var(--tracking-label); color: var(--text-secondary); min-width: 74px; text-align: right;
}

/* ---------- navigation: PillTabs ---------- */

.pill-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-tab {
  font-family: var(--font-text); font-weight: var(--weight-medium); font-size: var(--text-body-s);
  letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer;
  padding: 9px 18px; border-radius: var(--radius-pill); border: var(--border-width) solid var(--border-default);
  background: transparent; color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-arc), border-color var(--dur-fast) var(--ease-arc);
}
.pill-tab[aria-selected="true"] { border-color: var(--state-active); color: var(--state-active); }

/* ---------- page sections shared across screens ---------- */

main { position: relative; }

.section { max-width: var(--page-max); margin: 0 auto; padding: var(--space-10) var(--space-3) 0; position: relative; }
.section-narrow { max-width: 900px; margin: 0 auto; padding: var(--space-8) var(--space-3) 0; position: relative; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-2); }
.cards-grid--wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-2); }

.stack { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-2); }
.stack span { font-size: var(--text-body-l); color: var(--text-secondary); }

/* ---------- project card stage: Lottie "expand" behind, card tilts on hover ---------- */

.card-stage { position: relative; }
.card-stage-lottie { position: absolute; inset: -42%; z-index: 0; pointer-events: none; }
.card-stage-card {
  position: relative; z-index: 1; will-change: transform;
  transition: transform 500ms cubic-bezier(.22,.61,.36,1);
}
.card-grid { gap: var(--space-6); }
.projects-grid--wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ---------- hero veil: blur + darken the face behind text and buttons ---------- */

/* One layer over the face: backdrop-filter blurs what's behind it and a
   translucent layer of the page color dims it (invisible over the plain
   background, so only the face changes). Its mask is painted by
   js/hero-veil.js — soft blobs around each line of text and the buttons. */
.hero-veil {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--surface-page) 50%, transparent);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(transparent, transparent); mask-image: linear-gradient(transparent, transparent);
}

/* ---------- sobre: text + photo over an outline letter ---------- */

/* The photo starts level with the title and runs down behind the cards below
   (that section gets z-index 1): it's absolutely placed in its column, so it
   doesn't push the cards down. Behind it, the page's one backdrop shape — an
   outline Aminute "e" in the contour grey, oversized, rotated, cropped by the
   page edge (brand guide: backgrounds are outline only, one per page). */
.sobre-hero { display: grid; grid-template-columns: 1fr minmax(220px, 340px); gap: var(--space-6); }
.sobre-foto { position: relative; min-height: 100%; }
.sobre-foto-img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; }
.sobre-foto-forma {
  position: absolute; left: 12%; top: -14%; width: 150%; max-width: none;
  transform: rotate(-14deg); pointer-events: none;
}
/* serviços takes a third, ferramentas the rest */
.sobre-cards { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-2); }

/* ferramentas: the tool icons (single-colour svgs used as masks, so they take
   the text colour) with their names underneath */
.ferramentas { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.ferramenta { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: var(--text-body-s); color: var(--text-secondary); }
.ferramenta-icone {
  width: 60px; height: 60px; background: var(--text-primary);
  -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat;
}

/* projetos: on phones the backdrop "m" is scaled up so it fills the screen
   (desktop keeps the inline size) */
@media (max-width: 767px) {
  .projetos-letra { left: -45% !important; top: 20px !important; width: 170% !important; }
}

@media (max-width: 767px) {
  .sobre-cards { grid-template-columns: 1fr; }
  .ferramentas { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-3); }
  .sobre-hero { grid-template-columns: 1fr; gap: var(--space-3); }
  /* the cards section below is pulled up over the waist cut */
  .sobre-foto { max-width: 320px; width: 100%; justify-self: center; margin-bottom: -150px; }
  .sobre-foto-img { position: relative; }
  .sobre-foto-forma { top: 4%; }
}

/* ---------- sobre: trajetória timeline (js/sobre-timeline.js) ---------- */

/* The timeline breaks out of the section to the full screen width; the JS
   keeps the stops inside the section's content width. Layout, top to bottom:
   100px for labels above the wave, the 150px wave band, 100px below. */
.sobre-trajetoria { padding-top: var(--space-6); padding-bottom: var(--space-4); }
.timeline { position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: 350px; }
.timeline-track { position: absolute; left: 0; right: 0; top: 100px; height: 150px; }
.timeline-svg { position: absolute; left: 0; top: 0; overflow: visible; z-index: 1; }
.timeline-svg path { fill: none; stroke-linecap: round; }
.timeline-route { stroke: var(--border-default); stroke-width: 1.5px; }
.timeline-line { stroke: var(--accent-primary); stroke-width: 2.5px; }

.timeline-stop { position: absolute; width: 0; height: 0; z-index: 2; }
.timeline-dot {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface-page); border: 2px solid var(--border-default); box-sizing: border-box;
  transition: border-color 240ms var(--ease-arc), transform 400ms cubic-bezier(.34,1.56,.64,1);
}
.timeline-stop.is-on .timeline-dot { border-color: var(--accent-primary); background: var(--accent-primary); transform: scale(1.15); }
.timeline-stop.is-atual.is-on .timeline-dot {
  background: var(--surface-page); border-color: var(--state-active); border-width: 2.5px; transform: scale(1.5);
}

.timeline-label {
  position: absolute; left: 50%; width: 170px; transform: translate(-50%, 8px);
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  opacity: 0; transition: opacity 500ms var(--ease-arc), transform 500ms var(--ease-arc);
  top: 20px;
}
.timeline-stop.is-up .timeline-label { top: auto; bottom: 20px; transform: translate(-50%, -8px); }
.timeline-stop.is-on .timeline-label { opacity: 1; transform: translate(-50%, 0); }
.timeline-cargo { font-family: var(--font-display); text-transform: lowercase; font-size: var(--text-sub-l); line-height: 1.1; color: var(--text-primary); }
.timeline-onde { font-size: var(--text-body-s); color: var(--text-secondary); }
.timeline-stop.is-atual .timeline-cargo { color: var(--state-active); }

/* milestones: a dotted contour-grey line across the whole height, behind the
   wave, text beside its top or bottom end. The dots are drawn as a repeating
   background (a CSS dotted border can't set the gap between dots). */
.timeline-marco {
  --dot: 2px; --dot-gap: 9px;
  position: absolute; top: -100px; height: 350px; z-index: 0;
  width: var(--dot); margin-left: calc(var(--dot) / -2);
  background: radial-gradient(circle, var(--border-default) calc(var(--dot) / 2), transparent calc(var(--dot) / 2 + .5px)) center top / var(--dot) var(--dot-gap) repeat-y;
}
.timeline-marco-label {
  position: absolute; left: 10px; display: flex; flex-direction: column; gap: 4px; width: 110px;
  font-size: var(--text-body-s); line-height: 1.3; color: var(--text-secondary);
}
.timeline-marco.is-cima .timeline-marco-label { top: 0; }
.timeline-marco.is-baixo .timeline-marco-label { bottom: 0; }

/* phone: the same timeline as a sideways carousel (js sets the track width,
   parks it on the current role and plays the "peek" hint) */
@media (max-width: 767px) {
  .timeline { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
  .timeline::-webkit-scrollbar { display: none; }
  .timeline-track { right: auto; }
  .timeline-marco { --dot: 3px; --dot-gap: 10px; }
}

/* ---------- project page video ---------- */

.video-wrap { margin: var(--space-4) auto 0; }
.video-frame {
  position: relative; border-radius: var(--radius-media); overflow: hidden;
  border: var(--border-width) solid var(--border-default);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- phone layout (design: max-width 767px) ---------- */

@media (max-width: 767px) {
  .hero-name { font-size: clamp(40px, 12.5vw, 72px) !important; line-height: 1.02 !important; }
  .hero-slogan { font-size: clamp(26px, 8.5vw, 44px) !important; line-height: 1.05 !important; }
  .hero-cta { justify-content: stretch !important; }
  .hero-cta a { width: 100%; justify-content: center; font-size: var(--text-body-l) !important; padding: 16px 22px !important; }
  .card-grid { gap: var(--space-4) !important; }
  .sec { padding-top: var(--space-6) !important; }
  .video-wrap { max-width: 100% !important; }
  .arc-gap { margin-top: var(--space-8) !important; }
  .site-footer { padding: var(--space-5) var(--space-3) var(--space-6) !important; }
  .stat-grid { grid-template-columns: 1fr !important; }
}