:root {
  --radius: 7px;
  --bg: #F7F9F7;
  --bg-elevated: rgba(15, 59, 39, 0.05);
  --bg-card: #ffffff;
  --border: rgba(15, 59, 39, 0.12);
  --border-strong: rgba(15, 59, 39, 0.24);
  --text: #0F3B27;
  --text-dim: #385A4A;
  --text-faint: rgba(15, 59, 39, 0.45);
  
  /* Brand Palette */
  --brand-dark: #0F3B27;
  --accent: #92FF5F;
  --accent-dim: rgba(146, 255, 95, 0.2);
  --on-accent: #0F3B27;
  
  --accent-orange: #FF7036;
  --on-accent-orange: #0F3B27;
  
  --accent-ice: #BFF2F0;
  --accent-mint: #CFF1D2;
  --accent-2: #BFF2F0;
  --on-accent-2: #0F3B27;
  
  --brand-gradient: linear-gradient(135deg, #0F3B27 0%, #154E34 45%, #92FF5F 100%);
  --maxw: 1120px;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --guide: max(16px, 2vw);

  --hover: var(--accent);
}

/* Past ~1400px the fixed --maxw leaves oversized margins (the content
   reads as a narrow, over-centered column) — from here up, size the
   container to the viewport so it keeps a steady ~10% side margin
   instead, capped so lines don't run away on ultra-wide screens. */
@media (min-width: 1400px) {
  :root {
    --maxw: min(1760px, 80vw);
  }
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

[class*="__eyebrow"],
[class*="__number"] {
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Generic scroll-reveal for any item marked data-reveal="item" (service
   rows, partner wordmarks, pricing cards) — fades up from 28px below,
   matching the reference's own entrance motion (its --ease-settle is
   cubic-bezier(.22,1,.36,1), ~0.6-0.8s). initScrollReveal staggers
   siblings within the same parent and adds .is-revealed on scroll in. */
[data-reveal="item"] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal="item"].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal="item"] {
    transition: none;
  }
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* Without this, Chrome/Safari on a dark-mode OS fill any unpainted
     canvas area — most visibly the rubber-band overscroll past the
     top/bottom of the page — with a dark default instead of our own
     light background, regardless of what body/html background-color
     says. Declaring the page as light-only fixes that black flash on
     both desktop and mobile. */
  color-scheme: light;
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
  /* overflow-x:hidden on BOTH html and body creates two competing
     scroll containers and breaks position:sticky for descendants.
     html already clips horizontal overflow, so body doesn't need it. */
}

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Nav */

/* Site nav — one fixed, smoked-glass bar on every page (30% black
   fill + blur, 0.5px hairline border) that always floats above
   whatever's behind it, light or dark backdrop alike, without hurting
   legibility. Hides on scroll-down and reappears on scroll-up (see
   initNav), instead of the old pattern of a static in-flow bar plus a
   separate floating copy that only showed up after a scroll threshold. */

.nav {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 100;
  width: 100%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 30px top = the old 16px offset + 14px padding, now inside the nav
     so the solid bar can start flush with the top of the screen. */
  padding: 30px var(--guide) 14px;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.85);
  --text-faint: rgba(255, 255, 255, 0.6);
  --border: rgba(255, 255, 255, 0.35);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Solid bar — once scrolling starts, a white sheet slides down from the top
   behind the menu (z-index -1 keeps it under the links inside the nav's
   own stacking context) and the local text tokens flip to ink for
   contrast. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #ffffff;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  transform: translateY(-100%);
  transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
}

.nav.is-solid::before {
  transform: translateY(0);
}

.nav.is-solid {
  --text: #0F3B27;
  --text-dim: #385A4A;
  --text-faint: rgba(15, 59, 39, 0.45);
  --border: rgba(15, 59, 39, 0.18);
}

.nav a,
.nav__mark,
.nav__links {
  transition: color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .nav::before {
    transition: none;
  }
}

.nav.is-hidden {
  transform: translateX(-50%) translateY(-140%);
}

@media (prefers-reduced-motion: reduce) {
  .nav {
    transition: none;
  }
}

.nav.nav--with-links {
  display: flex;
  justify-content: space-between;
}

/* Links sit grouped on the right beside the actions, as in the
   reference (logo left, everything else right). */
.nav--with-links .nav__links {
  margin-left: auto;
  margin-right: 32px;
}

.nav--with-links .nav__mark {
  justify-self: start;
}

.nav--with-links .nav__actions {
  justify-self: end;
}

/* The dropdown panel is always a solid white popup regardless of the
   nav's own translucent styling, so it needs the normal (non-inverted)
   text tokens — otherwise it inherits the nav's white text onto its
   own white background and the menu items disappear. */
.dropdown__panel {
  --text: #131210;
  --text-dim: #666564;
  --text-faint: rgba(19, 18, 16, 0.4);
  --border: rgba(19, 18, 16, 0.18);
}

.nav__mark {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  margin: -6px 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.nav__mark-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* Without this, the grid column below is free to shrink the wordmark
   down to its min-content width (the longest single word), wrapping
   "Interface House" onto two lines any time the row is even slightly
   tight — nowrap forces the column to grow for it instead, which it
   has room to do far more often than the wrap made it seem. */
.nav__mark-text {
  white-space: nowrap;
}


.nav__links {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.nav__links a:hover {
  color: var(--hover);
}

@media (max-width: 860px) {
  .nav__links {
    display: none;
  }

  /* With the center nav links gone, the grid's two equal 1fr halves
     were each capped at exactly half the bar's width regardless of
     how little the other side actually needed — "Interface House"
     wrapped to two lines even when there was plenty of spare room in
     the middle. Flex + space-between lets the mark and the actions
     group size to their own content and share whatever's left. */
  .nav.nav--with-links {
    display: flex;
    justify-content: space-between;
  }
}

/* Below this, the wordmark plus the CTA and account icon genuinely
   don't fit on one line even with the flex fix above — drop the
   wordmark text and keep just the icon badge, so the bar still reads
   as one aligned row instead of wrapping. */
@media (max-width: 430px) {
  .nav__mark-text {
    display: none;
  }
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  white-space: nowrap;
}

.nav__cta:hover { opacity: 0.9; }

.nav__divider {
  width: 1px;
  height: 14px;
  background: var(--border);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.dropdown__trigger svg {
  width: 18px;
  height: 18px;
}

.dropdown__trigger:hover {
  border-color: var(--text-faint);
  color: var(--text);
}

.dropdown__trigger[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.dropdown__panel[hidden] {
  display: none;
}

.dropdown__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  z-index: 60;
}

.dropdown__panel a,
.dropdown__panel button {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  padding: 10px 12px;
  border-radius: calc(var(--radius) - 2px);
}

.dropdown__panel a:hover,
.dropdown__panel button:hover {
  background: var(--bg-elevated);
  color: var(--hover);
}

.dropdown__email {
  display: block;
  padding: 8px 12px 4px;
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-shell {
  position: relative;
  z-index: 1;
  display: flow-root;
  background: var(--bg);
  min-height: 100vh;
}

/* Hero — big bold headline with work thumbnails scattered in the gaps
   around it (pattern cloned from a reference the user asked to match:
   velourproductions.com). Dark section, tokens flipped light-on-dark
   locally same as .bignum/.nav__panel/.footer. */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0F3B27;
  color: #F7F9F7;
  overflow: hidden;
  --text: #F7F9F7;
  --text-dim: rgba(247, 249, 247, 0.72);
  --text-faint: rgba(247, 249, 247, 0.45);
  --border: rgba(247, 249, 247, 0.18);
  padding: 12vh var(--guide) 24vh;
}

.hero__headline {
  position: relative;
  z-index: 2;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-size: clamp(48px, 11vw, 190px);
  color: #F7F9F7;
}

@media (max-width: 760px) {
  .hero__headline {
    font-size: clamp(40px, 14vw, 72px);
    line-height: 1;
  }
}

.hero__headline-line {
  display: block;
}

/* Work thumbnails — absolutely placed in the empty corners around the
   centered headline, each with a slight rotation so they read as
   scattered prints rather than a tidy grid. Hidden below 860px: there's
   no room for them beside the headline without covering it, so mobile
   gets the headline + footer only. */

/* No z-index here on purpose: that would make this a stacking context
   and trap every thumbnail below the headline. Left open, the top
   thumbnail (z-index 3) paints over the headline's own z-index 2, while
   the other three (auto) sit underneath it, as in the reference. */
.hero__media {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__thumb {
  position: absolute;
  display: block;
  pointer-events: auto;
  transition: transform 0.25s ease;
}

.hero__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  filter: blur(0px);
  transition: filter 0.3s ease;
}

.hero__thumb:hover img {
  filter: blur(5px);
}

/* Four slots scattered at the exact coordinates measured off the
   reference (percent of the hero box, which is what they're
   positioned against there too) — "top" (landscape, dips over the
   headline on purpose, the one deliberately "messy" overlap), "left",
   "lower-left" and "lower-right" (both landscape/portrait paired the
   same way). Width is a percentage and height rides aspect-ratio
   instead of a second percentage, so the whole scatter scales as one
   unit at any viewport instead of needing per-breakpoint overrides —
   including on mobile, where the reference keeps these visible too. */
.hero__thumb--1 {
  top: -1%;
  left: 42%;
  z-index: 3;
  width: 16%;
  aspect-ratio: 3 / 2;
}

.hero__thumb--2 {
  top: 14.7%;
  left: 0;
  width: 12%;
  aspect-ratio: 4 / 5;
}

.hero__thumb--3 {
  bottom: 14%;
  left: 9%;
  width: 16%;
  aspect-ratio: 4 / 5;
}

.hero__thumb--4 {
  bottom: 22%;
  left: 77%;
  width: 21%;
  aspect-ratio: 3 / 2;
}

@media (max-width: 860px) {
  /* The reference keeps its scattered thumbnails visible at every
     width, mobile included. */
  .hero {
    padding: 120px 24px 180px;
  }
}

/* Thin full-width strip near the bottom of the hero: location on the
   left, the manifesto line centered, a text link on the right — same
   divider-rule treatment as before, now in three columns instead of
   two. Sits above the scroll hint. */

.hero__footer {
  position: absolute;
  bottom: 4vh;
  left: var(--guide);
  right: var(--guide);
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr minmax(0, 36vw) 1fr;
  align-items: start;
  gap: 24px;
  padding-top: 24px;
}

.hero__footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}

.hero__footer-loc {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.hero__footer-text {
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.95vw, 19px);
  line-height: 1.3;
  color: #F7F9F7;
  text-align: center;
}

.hero__footer-cta {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #F7F9F7;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.hero__footer-cta:hover {
  color: var(--accent);
  opacity: 1;
}

@media (max-width: 620px) {
  .hero__footer {
    grid-template-columns: 1fr auto;
    gap: 16px;
  }

  .hero__footer-text {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.section-divider {
  width: calc(100% - 48px);
  max-width: var(--maxw);
  margin: 0 auto;
  border: none;
  border-top: 1px solid var(--border);
}

/* News */

.news {
  background: #0B2B1D;
  color: #F7F9F7;
  padding: 120px var(--guide);
}

.news__head {
  text-align: left;
  margin-bottom: 48px;
  padding: 0;
}

.news__head h2 {
  color: #F7F9F7;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.news__footer {
  display: flex;
  justify-content: center;
  margin-top: 48px;
  padding: 0;
}

.news__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  background: rgba(247, 249, 247, 0.08);
  color: #F7F9F7;
  border: 1px solid rgba(247, 249, 247, 0.2);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.news__all:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.news__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
  padding: 0;
}

.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0;
}

@media (max-width: 900px) {
  .news__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.news-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 12px 18px 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

.news-card:hover {
  outline: none;
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

.news-card:target {
  border-color: var(--accent);
}

.news-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 10.5;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #f0f0f4;
}

.news-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.35s ease;
}

.news-card:hover .news-card__thumb img {
  transform: scale(1.025);
}

/* Placeholder art for posts without a featured image */
.placeholder-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #ffffff;
  pointer-events: none;
}

.article__banner .placeholder-art {
  pointer-events: auto;
}

.news-card__thumb[style] .placeholder-art,
.article__banner[style] .placeholder-art {
  display: none;
}

.news-card__body {
  padding: 16px 4px 0 4px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-card__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 3px 10px;
  border-radius: var(--radius);
  border: 1.5px solid #10b981;
  color: #059669;
  background: transparent;
  margin-bottom: 12px;
  line-height: 1.3;
  text-transform: none;
}

.news-card__tag--green {
  border-color: #CFF1D2;
  background: #CFF1D2;
  color: #0F3B27;
  font-weight: 700;
}

.news-card__tag--purple {
  border-color: #BFF2F0;
  background: #BFF2F0;
  color: #0F3B27;
  font-weight: 700;
}

.news-card__tag--blue {
  border-color: #BFF2F0;
  background: #BFF2F0;
  color: #0F3B27;
  font-weight: 700;
}

.news-card__tag--orange {
  border-color: #FF7036;
  background: #FF7036;
  color: #0F3B27;
  font-weight: 700;
}

.news-card__category {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent-orange);
}

.news-card__title {
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--text);
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card__desc {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card__author {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.news-card__author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #e5e5e5;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.news-card__author-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.news-card__author-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

.news-card__author-date {
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.25;
}

/* Listing — the full posts index, styled after worldquantfoundry.com's
   /insights: a black backdrop, an uppercase editorial headline, and a
   borderless photo grid (square thumbnails touching with no column
   gap, generous row gap) instead of the site's usual rounded cards.
   Scoped to .listing so the homepage's own #newsGrid teaser (rounded,
   light-theme cards) is untouched. */

.listing {
  background: #000;
  color: #fff;
  padding: 160px 24px 0;
}

.listing__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}

.listing__title {
  max-width: 920px;
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-transform: uppercase;
}

.listing__label {
  margin-top: 64px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.filter-chip {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.filter-chip:hover {
  border-color: var(--text-faint);
  color: var(--text);
}

.filter-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.listing .card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 48px 0 96px;
}

@media (min-width: 700px) {
  .listing .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .listing .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.news-card.is-hidden {
  display: none;
}

/* Stripe reveal — a shared effect for full-bleed color sections: a
   stack of horizontal bars covers the section in a solid dark tone;
   once it scrolls into view (initStripeReveal, via
   IntersectionObserver), each bar wipes away with a short stagger,
   like blinds opening to reveal the section's real background. */

.stripe-reveal {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.stripe-reveal__bar {
  flex: 1;
  background: #111111;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.is-revealed > .stripe-reveal .stripe-reveal__bar {
  transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
  .stripe-reveal__bar {
    transition: none;
  }
}

/* About — paper background, ink text */

.about {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}

.about__inner {
  position: relative;
  min-height: 100vh;
  padding: 140px 0 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 32px;
}

.about__inner > .about__eyebrow,
.about__inner > .about__title,
.about__inner > .about__text,
.about__inner > .about__closing {
  padding-left: var(--guide);
  padding-right: var(--guide);
}

.about__eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-orange);
}

.about__title {
  position: relative;
  z-index: 2;
  font-size: clamp(32px, 4.4vw, 68px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 16em;
  text-wrap: balance;
  pointer-events: none;
}

.about__title-bright {
  color: var(--text);
}

.about__title-dim {
  color: var(--text);
  opacity: 0.4;
}

.about__text {
  align-self: center;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  color: var(--text);
  opacity: 0.85;
}

.about__text strong,
.about__highlight {
  color: var(--accent-orange);
  font-weight: 700;
}

.about__closing {
  align-self: center;
  max-width: 520px;
  font-size: clamp(16px, 1.3vw, 22px);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: var(--text);
}

.about__cta {
  align-self: center;
  margin-top: 8px;
  padding: 16px 36px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: opacity 0.2s ease;
}

.about__cta:hover {
  opacity: 0.85;
}

.about__text a {
  color: inherit;
  text-decoration: underline;
}

/* Project cards (image, outlined tag pill, name) — now only used by the
   "Mais cases" block on the case pages; the home uses .cases below. */

.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 48px);
}

.project-card {
  display: block;
  color: var(--text);
}

.project-card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: top center;
  background-color: #fafafa;
  border-radius: var(--radius);
}




.project-card__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.project-card__tags li {
  padding: 3px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.4;
}

.project-card__name {
  display: block;
  margin-top: 8px;
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1.2;
  transition: opacity 0.2s ease;
}

.project-card:hover .project-card__name {
  opacity: 0.6;
}

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

/* Big numbers — a row of stat cards that cascades into place and pins
   under the floating nav while a photo + quote scroll up beneath it
   (see initBigNumbers in main.js for the scroll-scrubbed entrance;
   the pin itself is plain position:sticky, no JS). Dark section, so
   the shared text/border tokens are flipped light-on-dark locally,
   same trick as .nav__panel and .footer. */

.bignum {
  position: relative;
  /* clip, not hidden: the cards start dropped well below their row and
     would otherwise spill over the next section, but "hidden" would
     turn this into a scroll container and break the sticky pin. */
  overflow: clip;
  background: #0B2B1D;
  --text: #F7F9F7;
  --text-dim: rgba(247, 249, 247, 0.72);
  --text-faint: rgba(247, 249, 247, 0.45);
  --border: rgba(247, 249, 247, 0.15);
  --bg-card: #ffffff;
}

.bignum__sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: clamp(48px, 8vh, 100px) 24px clamp(24px, 4vh, 48px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bignum__cards {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.bignum__card {
  color: #0F3B27;
  border-radius: var(--radius);
  padding: 28px 24px;
  aspect-ratio: 1 / 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  opacity: 1;
  transform: none;
  will-change: transform, opacity;
}

.bignum__card:nth-child(1) {
  background: #92FF5F;
}

.bignum__card:nth-child(2) {
  background: #BFF2F0;
}

.bignum__card:nth-child(3) {
  background: #CFF1D2;
}

.bignum__card:nth-child(4) {
  background: #FF7036;
}

.bignum__value {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0F3B27;
}

.bignum__value--sm {
  font-size: clamp(22px, 2.6vw, 28px);
}

.bignum__label {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(15, 59, 39, 0.85);
}

@media (max-width: 860px) {
  .bignum__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .bignum__sticky {
    padding: 88px 16px 20px;
  }

  .bignum__cards,
  .bignum__feature {
    gap: 12px;
  }

  .bignum__card {
    padding: 20px 18px;
  }
}

.bignum__feature {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

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

/* Pure scroll runway, no visual content — its height is exactly how far
   you scroll while the section is pinned, and initBigNumbers ties the
   reveal 1:1 to that same range, so the blocks finish assembling right
   as the section releases (no idle pinned time, no dead gap after). */
.bignum__spacer {
  height: 55vh;
}

@media (max-width: 760px) {
  .bignum__spacer {
    height: 45vh;
  }
}

.bignum__photo {
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  min-width: 0;
  background: linear-gradient(155deg, #2a2a28 0%, #131210 60%, #000000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  will-change: transform;
}

.bignum__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* Quote block: empty paper above, statement anchored to the bottom,
   author row (avatar + name/role) under it. */
.bignum__quote {
  background: var(--bg-card);
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: clamp(28px, 3vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(20px, 2vw, 40px);
  will-change: transform;
}

.bignum__quote-text {
  font-size: clamp(20px, 1.75vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #131210;
}

.bignum__author {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.2vw, 24px);
}

.bignum__avatar {
  flex: 0 0 auto;
  width: clamp(40px, 3.4vw, 72px);
  height: clamp(40px, 3.4vw, 72px);
  border-radius: 50%;
  background: linear-gradient(155deg, #2a2a28 0%, #131210 60%, #000000 100%);
  overflow: hidden;
}

.bignum__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.bignum__author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bignum__author-name {
  font-size: clamp(15px, 1.15vw, 24px);
  font-weight: 500;
  color: #131210;
}

.bignum__author-role {
  font-size: clamp(13px, 0.95vw, 20px);
  color: #666564;
}

@media (max-width: 760px) {
  .bignum__quote {
    aspect-ratio: auto;
    min-height: 100vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bignum__sticky {
    position: static;
  }
}

/* Pricing / Planos */

.pricing {
  background: var(--bg);
  padding: 120px var(--guide) 100px;
}

.pricing__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 64px;
}

.pricing__eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin-bottom: 16px;
}

.pricing__title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--text);
  max-width: 640px;
}

.pricing__title-line {
  display: block;
}

.pricing__desc {
  max-width: 380px;
  padding-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 30px 30px;
  transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}

.pricing-card--featured {
  background: var(--bg-card);
  border: 2px solid var(--accent);
  box-shadow: 0 24px 48px -28px rgba(15, 59, 39, 0.2);
  transform: scale(1.03);
}

.pricing-card--featured:hover {
  transform: scale(1.03) translateY(-4px);
}

@media (max-width: 900px) {
  .pricing-card--featured {
    transform: none;
  }

  .pricing-card--featured:hover {
    transform: translateY(-4px);
  }
}

.pricing-card__ribbon {
  position: absolute;
  top: -13px;
  left: 30px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius);
}

.pricing-card__top {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.pricing-card__name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.pricing-card--featured .pricing-card__name {
  color: var(--accent-orange);
  font-weight: 800;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--text);
}

.pricing-card__currency {
  font-size: 18px;
  font-weight: 600;
}

.pricing-card__amount {
  font-size: clamp(36px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pricing-card__period {
  font-size: 14px;
  color: var(--text-dim);
}

.pricing-card__tagline {
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-dim);
}

.pricing-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0 0 32px;
  padding: 0;
  flex: 1;
}

.pricing-card__features li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.pricing-card__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F3B27' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.pricing-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pricing-card__cta:hover {
  transform: translateY(-2px);
}

.pricing-card__cta--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.pricing-card__cta--ghost:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.pricing-card__cta--solid {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
}

.pricing-card__cta--solid:hover {
  opacity: 0.9;
}

.pricing-card__cta--dark {
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--text);
}

.pricing-card__cta--dark:hover {
  opacity: 0.85;
}

.pricing__footer {
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
  max-width: 640px;
}

.pricing__footer-title {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 12px;
}

.pricing__footer-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
}

.pricing__footer-note {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-faint);
}

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

@media (max-width: 700px) {
  .pricing {
    padding: 88px var(--guide) 72px;
  }

  .pricing__head {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 48px;
  }

  .pricing__desc {
    padding-top: 0;
    max-width: none;
  }

  .pricing-card--featured {
    transform: none;
  }
}

/* Cookie consent */

.cookie-consent {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 200;
  max-width: 520px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
  padding: 24px;
}

.cookie-consent[hidden] {
  display: none;
}

.cookie-consent__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
}

.cookie-consent__link {
  color: var(--text);
  text-decoration: underline;
}

.cookie-consent__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.cookie-consent__manage {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.cookie-consent__manage:hover {
  color: var(--hover);
}

.cookie-consent__buttons {
  display: flex;
  gap: 10px;
}

.cookie-consent__btn {
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
}

.cookie-consent__btn--ghost {
  border: 1px solid var(--border);
  color: var(--text);
}

.cookie-consent__btn--ghost:hover {
  border-color: var(--text-faint);
}

.cookie-consent__btn--accept {
  background: var(--accent);
  color: var(--on-accent);
}

.cookie-consent__btn--accept:hover {
  opacity: 0.9;
}

@media (max-width: 480px) {
  .cookie-consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}



/* Skip link */

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 1001;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--radius);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 16px;
}

/* Focus visibility */

a:focus-visible,
.news-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* Reading nav */

.nav__back {
  font-size: 14px;
  color: var(--text-dim);
}

.nav__back:hover {
  color: var(--hover);
}

/* Article */

.article__progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 3px;
  background: transparent;
}

.article__progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
}

/* Article hero — full-screen featured image with the nav floating
   transparently on top of it (the nav is fixed and glass-transparent
   on every page now) and the title/meta as a frosted card anchored
   bottom-left, aligned to the same left inset the article body text
   starts at. */

.article__hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.article__banner {
  position: absolute;
  inset: 0;
  background: var(--text);
  background-size: cover;
  background-position: center;
}

.placeholder-art,
.article__banner canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.article__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, transparent 45%);
  pointer-events: none;
}

.article {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 96px 24px 96px;
}

/* Author page */

.author-hero {
  padding-top: 64px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;
}

.author-hero__eyebrow {
  display: block;
  color: var(--accent-orange);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.author-hero__name {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.author-hero__tagline {
  margin-top: 10px;
  font-size: 16px;
  color: var(--text-dim);
}

.author-hero__socials {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.author-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  color: var(--text-dim);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.author-social:hover {
  border-color: var(--accent-orange);
  color: var(--accent-orange);
}

/* Card deck — story cards in a full-bleed row that breaks out of the
   article's max-width, so it visibly runs off the right edge of the
   screen. The set loops endlessly as you swipe (see initCardDeck in
   main.js, which clones the cards once and wraps scrollLeft when it
   crosses into the clone). */

.card-deck {
  margin-top: 40px;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.card-deck__stack {
  display: flex;
  align-items: stretch;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 16px;
  padding-left: max(24px, calc((100vw - var(--maxw)) / 2 + 24px));
  padding-right: 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.card-deck__stack::-webkit-scrollbar {
  display: none;
}

.deck-card {
  flex: 0 0 auto;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  scroll-snap-align: start;
}

.deck-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
}

.deck-card__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dim);
}

.deck-card__text strong {
  color: var(--text);
}

.card-deck__footer {
  margin-top: 4px;
  padding-left: max(24px, calc((100vw - var(--maxw)) / 2 + 24px));
  display: flex;
  align-items: center;
  gap: 16px;
}

.card-deck__controls {
  display: flex;
  gap: 10px;
}

.deck-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  transition: background-color 0.2s ease, width 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.deck-dot:hover {
  background: var(--text-faint);
}

.deck-dot.is-active {
  width: 24px;
  background: var(--accent);
}

.card-deck__hint {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-faint);
}

@media (max-width: 480px) {
  .deck-card {
    width: 260px;
    padding: 22px;
  }
}

.author-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.author-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
}

.author-btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}

.author-btn--primary:hover {
  opacity: 0.9;
}

.author-btn--ghost {
  border: 1px solid var(--border);
  color: var(--text);
}

.author-btn--ghost:hover {
  border-color: var(--text-faint);
}

.article__header {
  position: absolute;
  z-index: 2;
  left: max(24px, calc((100vw - var(--maxw)) / 2 + 24px));
  right: 24px;
  bottom: 64px;
  max-width: 700px;
  padding: 28px 28px 32px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
  animation: article-in 0.5s ease both;
}

@media (max-width: 620px) {
  .article__header {
    left: 20px;
    right: 20px;
    bottom: 32px;
    padding: 22px 20px 26px;
  }
}

@keyframes article-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .article__header { animation: none; }
}

.article__category {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin-bottom: 16px;
}

.article__title {
  max-width: 780px;
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.article__dek {
  max-width: 620px;
  margin-top: 18px;
  font-size: 19px;
  color: var(--text-dim);
  line-height: 1.5;
}

.article__byline {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  font-size: 14px;
  color: var(--text-dim);
}

.article__note {
  margin-top: 40px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
}

.article__body {
  margin-top: 40px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--text);
}

.article__body > * + * {
  margin-top: 22px;
}

.article__body h2 {
  margin-top: 44px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.article__body p { max-width: 66ch; }

.article__body blockquote {
  max-width: 62ch;
  padding-left: 20px;
  border-left: 4px solid var(--accent);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
}

.article__body ul {
  max-width: 66ch;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article__body li {
  line-height: 1.6;
}

.article__body li::marker {
  color: var(--text);
  font-weight: 700;
}

.article__body h3 {
  margin-top: 36px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.article__body ol {
  max-width: 66ch;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article__body ol li::marker {
  color: var(--text);
  font-weight: 700;
}

.article__body a {
  color: var(--accent-orange);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent-orange);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.article__body a:hover {
  opacity: 0.8;
}

/* Media from the WordPress block editor (images, video, embeds, galleries)
   are allowed to run wider than the text — only paragraphs/lists/quotes are
   capped to a readable measure above. */
.article__body figure {
  margin: 0;
}

.article__body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.article__body figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
}

.article__body video {
  width: 100%;
  border-radius: var(--radius);
}

.article__body pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.6;
}

.article__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

.article__body .wp-block-embed__wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
}

.article__body .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--radius);
}

.article__body .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.article__body .wp-block-gallery img {
  border-radius: 0;
}

/* Comments */

.comments {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px 24px 0;
  border-top: 1px solid var(--border);
}

.comments__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 40px;
}

.comments__gate {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--text-dim);
}

.comments__gate-link {
  font-weight: 600;
  color: var(--accent-2);
  white-space: nowrap;
}

.comments__form {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.comments__submit {
  align-self: flex-start;
}

.comments__empty {
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-faint);
}

.comments__list {
  list-style: none;
  margin-top: 8px;
}

.comments__item {
  padding: 20px 0;
  border-top: 1px solid var(--border);
}

.comments__item:last-child {
  padding-bottom: 0;
}

.comments__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}

.comments__author {
  font-weight: 600;
  color: var(--text);
}

.comments__date {
  color: var(--text-faint);
}

.comments__body {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
}

.comments__body p + p {
  margin-top: 10px;
}

/* Related (Veja também) */

.related {
  background: #000000;
  color: #ffffff;
  padding: 120px var(--guide);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.related__head {
  text-align: left;
  margin-bottom: 48px;
  padding: 0;
}

.related__title {
  color: #ffffff;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.related .card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0;
}

@media (max-width: 900px) {
  .related .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .related .card-grid {
    grid-template-columns: 1fr;
  }
}

/* Cursor tag */

.cursor-tag {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  padding: 10px 20px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -150%) scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  will-change: transform;
}

.cursor-tag.is-active {
  opacity: 1;
  transform: translate(-50%, -150%) scale(1);
}

/* Reveal transition */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.reveal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.reveal.is-active {
  opacity: 1;
  pointer-events: all;
}

.reveal__title {
  max-width: 720px;
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
}

.reveal__bar {
  width: 220px;
  height: 3px;
  border-radius: 0;
  background: var(--border);
  overflow: hidden;
}

.reveal__bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.7s ease;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { display: none; }
}

/* Auth */

.auth {
  max-width: 440px;
  margin: 0 auto;
  padding: 96px 24px 96px;
}

/* Split-screen auth (cadastro.html) */

body.auth-split-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.auth-split {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 120px;
}

.auth-split__visual {
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 24px 64px max(48px, calc((100vw - var(--maxw)) / 2 + 24px));
}

.auth-split__eyebrow {
  display: block;
  color: var(--accent-orange);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.auth-split__title {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  max-width: 420px;
}

.auth-split__text {
  margin-top: 20px;
  max-width: 420px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dim);
}

.auth-split__list {
  list-style: none;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-split__list li {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-split__list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 0;
  background: currentColor;
  flex-shrink: 0;
}

.auth-split__form {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 48px max(48px, calc((100vw - var(--maxw)) / 2 + 24px)) 48px 24px;
}

.auth-split__card {
  width: 100%;
  max-width: 400px;
  background: none;
  border: none;
  padding: 0;
}

@media (max-width: 860px) {
  .auth-split {
    grid-template-columns: 1fr;
  }

  .auth-split__visual {
    padding: 48px 24px;
    text-align: center;
    align-items: center;
  }

  .auth-split__title,
  .auth-split__text {
    max-width: 100%;
  }

  .auth-split__list {
    align-items: center;
  }

  .auth-split__form {
    justify-content: center;
    padding: 48px 24px;
  }
}

.auth__card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
}

.auth__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.auth__desc {
  margin-top: 10px;
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.5;
}

.auth__message {
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--accent-dim);
  border-left: 3px solid var(--accent-2);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

.auth__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth__form {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}

.auth__field input,
.auth__field textarea {
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
  resize: vertical;
}

.auth__field input::placeholder,
.auth__field textarea::placeholder {
  color: var(--text-faint);
}

.auth__field input:focus-visible,
.auth__field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.auth__submit {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--radius);
  padding: 12px;
}

.auth__submit:hover {
  opacity: 0.9;
}

.auth__switch {
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
}

.auth__switch a {
  color: var(--accent-orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth__switch a:hover {
  opacity: 0.8;
}

.auth__switch--tight {
  margin-top: 8px;
}

/* Briefing — same auth-split shell, just a wider card since it carries
   more fields (two textareas) than the login/register forms. */

.briefing__card {
  max-width: 480px;
}

/* Contact Page — centered dedicated contact form */

.contact-page {
  min-height: calc(100vh - 200px);
  padding: 160px var(--guide) 100px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contact-page__inner {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.contact-page__head {
  text-align: center;
  margin-bottom: 36px;
}

.contact-page__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-orange);
  font-weight: 700;
  margin-bottom: 12px;
}

.contact-page__title {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text);
}

.contact-page__desc {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dim);
}

.contact-page__card {
  padding: clamp(32px, 5vw, 48px);
}

@media (max-width: 760px) {
  .contact-page {
    padding: 120px var(--guide) 80px;
  }
}

.auth__required {
  color: var(--accent-orange);
}

.auth__field-optional {
  font-weight: 400;
  color: var(--text-faint);
  text-transform: none;
}

.auth__field-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-faint);
  line-height: 1.4;
  margin-top: -4px;
}

/* Write */

.write {
  max-width: 640px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}

.write__title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.write__desc {
  margin-top: 10px;
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.5;
}

.write__form {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.write__select {
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
}

.write__select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Footer — dark, two flat nav lists side by side, then a full-bleed
   oversized wordmark band, styled after a reference (Sweetpunk) the
   user asked to match. */

.footer {
  background: #082116;
  --text: #F7F9F7;
  --text-dim: rgba(247, 249, 247, 0.72);
  --text-faint: rgba(247, 249, 247, 0.45);
  --border: rgba(247, 249, 247, 0.12);
}

/* Reference puts its big CTA and the nav links side by side, in the
   same row (nav top-aligned with the CTA, not stacked under it) — a
   two-row grid instead of the stacked blocks this used to be, with
   .footer__bottom spanning both columns on its own row underneath. */
.footer__inner {
  padding: 96px var(--guide) 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 40px;
  align-items: start;
}

/* The big "let's talk" statement — the reference's signature footer
   move, reusing its display/mono type pairing: a huge uppercase
   condensed line, the second line in the accent color with a small
   arrow riding the baseline. */
.footer__cta {
  display: inline-flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 1;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  width: fit-content;
}

.footer__cta-line {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(34px, 6.3vw, 78px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1),
              color 0.35s ease,
              letter-spacing 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
  will-change: transform, color, letter-spacing;
}

.footer__cta-line:first-child {
  transform-origin: left center;
}

.footer__cta-line--accent {
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.15em;
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) 0.03s,
              color 0.35s ease,
              letter-spacing 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.footer__cta-line--accent svg {
  flex-shrink: 0;
  width: 0.55em;
  height: 0.55em;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.35s ease;
  will-change: transform;
}

.footer__cta:hover .footer__cta-line:first-child {
  color: var(--accent);
  transform: translateX(14px);
  letter-spacing: 0.015em;
}

.footer__cta:hover .footer__cta-line--accent {
  color: var(--text);
  transform: translateX(28px);
  letter-spacing: 0.02em;
}

.footer__cta:hover .footer__cta-line--accent svg {
  color: var(--accent);
  transform: translate(8px, -8px) scale(1.2);
}

.footer__top {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  text-align: right;
  padding-top: clamp(6px, 0.8vw, 12px);
}

.footer__nav-primary,
.footer__nav-secondary {
  display: flex;
  flex-direction: column;
}

.footer__nav-primary {
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.footer__nav-primary a {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #F7F9F7;
  line-height: 1;
}

.footer__nav-primary a:hover {
  color: var(--hover);
}

.footer__nav-secondary {
  gap: 8px;
  padding-top: 6px;
}

.footer__nav-secondary a {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.footer__nav-secondary a:hover {
  color: var(--hover);
}

.footer__bottom {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
}

.footer__bottom a {
  color: var(--text-dim);
}

.footer__bottom a:hover {
  color: var(--hover);
}

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

  .footer__cta,
  .footer__top {
    grid-column: 1;
  }

  .footer__top {
    grid-row: 2;
    align-items: flex-start;
    text-align: left;
    margin-top: 40px;
  }

  .footer__nav-primary {
    flex-direction: column;
    gap: 10px;
  }

  .footer__bottom {
    grid-row: 3;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Full-bleed oversized wordmark band under the footer content */

.footer-wordmark {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  padding: 20px 24px;
}

.footer-wordmark__text {
  margin: 0;
  white-space: nowrap;
  text-align: center;
  font-size: clamp(64px, 15vw, 240px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #000000;
  /* Font size above is a starting point only — initFooterWordmark
     measures the rendered width and scales it down to always fit
     within the band's left/right padding, on any viewport. */
}

.footer-wordmark__letter {
  display: inline-block;
  transition: font-family 0s;
}

.footer-wordmark__letter:hover {
  font-family: "Caveat", cursive;
}

.footer-wordmark__badge {
  position: absolute;
  left: 24px;
  bottom: 16px;
  width: 76px;
  height: 76px;
  color: #000000;
  z-index: 1;
}

.footer-wordmark__badge-svg {
  width: 100%;
  height: 100%;
  animation: footer-badge-spin 18s linear infinite;
}

.footer-wordmark__badge-svg circle {
  color: var(--on-accent);
}

@keyframes footer-badge-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .footer-wordmark__badge-svg {
    animation: none;
  }
}

@media (max-width: 620px) {
  .footer-wordmark__badge {
    display: none;
  }
}


/* Light-top pages: the nav is transparent with light-on-dark tokens by
   default (built for the dark hero), so on pages that open on paper it
   flips to ink text instead of vanishing. */
.nav--on-light {
  --text: #1a1a1a;
  --text-dim: rgba(26, 26, 26, 0.7);
  --text-faint: rgba(26, 26, 26, 0.45);
  --border: rgba(26, 26, 26, 0.25);
}

/* Case page — sticky info column on the left (name, meta rows, tags,
   blurb), stacked 16:9 shots on the right, then a dark "Mais cases"
   block reusing the project cards. */
.case__top {
  display: grid;
  grid-template-columns: minmax(260px, 32%) minmax(0, 61%);
  justify-content: space-between;
  align-items: start;
  padding: 160px var(--guide) 120px;
  background: var(--bg);
}

.case__info {
  position: sticky;
  top: 120px;
}

.case__title {
  font-size: clamp(48px, 5vw, 88px);
  line-height: 1;
  margin-bottom: 32px;
}

.case__meta div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

.case__meta dt {
  color: var(--text-dim);
}

.case__meta dd {
  text-align: right;
}

.case__meta a,
.case__text a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.case__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.case__tags li {
  padding: 3px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
}

.case__text {
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dim);
}

.case__media {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.case__shot {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-color: #fafafa;
  border-radius: var(--radius);
}


.case-more {
  background: #0f0f0f;
  --text: #fafafa;
  --text-dim: rgba(250, 250, 250, 0.65);
  --border: rgba(250, 250, 250, 0.25);
  color: var(--text);
  padding: 120px var(--guide);
}

.case-more__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 40px;
}

.case-more__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: clamp(48px, 6vw, 96px);
}

.case-more__title {
  font-size: clamp(48px, 6vw, 110px);
  line-height: 1;
}

.case-more__desc {
  max-width: 292px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dim);
}

@media (max-width: 860px) {
  .case__top {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 120px;
  }

  .case__info {
    position: static;
  }

  .case-more__head {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* Cases (home) — label left, big statement starting at the second
   column; then a row of cards of different widths (small square, then
   tall ones), each: image, name, one gray line. Near-full-bleed gutter
   like the reference screenshot. */
.cases {
  background: var(--bg);
  padding: 120px var(--guide);
}

.cases__head {
  display: block;
  margin-bottom: 48px;
}

.cases__title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--text);
  max-width: 640px;
  text-align: left;
}

.cases__grid {
  display: grid;
  grid-template-columns: 1fr 1.55fr 1.55fr;
  gap: clamp(16px, 1.7vw, 34px);
  align-items: start;
}

.case-tile {
  display: block;
  color: var(--text);
}

.case-tile__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #000;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
}


.case-tile__name {
  display: block;
  margin-top: clamp(16px, 1.4vw, 28px);
  font-size: clamp(24px, 1.8vw, 40px);
  line-height: 1.2;
  transition: opacity 0.2s ease;
}

.case-tile:hover .case-tile__name {
  opacity: 0.6;
}

.case-tile__desc {
  display: block;
  margin-top: 10px;
  font-size: clamp(14px, 1.05vw, 20px);
  line-height: 1.5;
  color: var(--text-dim);
}

@media (max-width: 860px) {
  .cases {
    padding: 80px var(--guide);
  }

  .cases__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}





/* Plan pages — explanatory intro, four already-visible info squares on
   black (same look as the home's number cards, no scroll animation),
   then the briefing form. */
.plan__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-orange);
  font-weight: 700;
}

.plan__intro {
  display: block;
  padding: 160px var(--guide) 100px;
  background: var(--bg);
}

.plan__title {
  font-size: clamp(64px, 10vw, 150px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--text);
}

.plan__price {
  margin-top: 32px;
  font-size: clamp(28px, 3vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.plan__price span {
  font-size: 0.5em;
  font-weight: 500;
  color: var(--text-dim);
}

.plan__tagline {
  margin-top: 24px;
  font-size: clamp(18px, 1.6vw, 28px);
  color: var(--text);
}

.plan__desc {
  margin-top: 16px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dim);
}

.plan__blocks {
  background: #0B2B1D;
  padding: 100px var(--guide);
}

.plan__blocks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.plan-block {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 24px;
  color: #0F3B27;
  border-radius: var(--radius);
}

.plan-block:nth-child(1) {
  background: #92FF5F;
}

.plan-block:nth-child(2) {
  background: #BFF2F0;
}

.plan-block:nth-child(3) {
  background: #CFF1D2;
}

.plan-block:nth-child(4) {
  background: #FF7036;
}

.plan-block__value {
  font-size: clamp(24px, 2.6vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.plan-block__label {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(15, 59, 39, 0.85);
}

.plan__included {
  background: #0B2B1D;
  border-top: 1px solid rgba(247, 249, 247, 0.1);
  border-bottom: 1px solid rgba(247, 249, 247, 0.1);
  padding: 80px var(--guide);
}

.plan__included-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 48px;
  align-items: center;
}

.plan__included-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.plan__included-title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #F7F9F7;
  margin-bottom: 16px;
}

.plan__included-accent {
  color: var(--accent);
}

.plan__included-desc {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(247, 249, 247, 0.75);
  max-width: 580px;
}

.plan__included-aside {
  display: flex;
  justify-content: flex-end;
}

.plan__included-card {
  background: #0F3B27;
  border: 1px solid rgba(247, 249, 247, 0.12);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 28px 24px;
  width: 100%;
}

.plan__included-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  background: rgba(247, 249, 247, 0.1);
  border-radius: calc(var(--radius) - 3px);
  color: #F7F9F7;
  margin-bottom: 12px;
}

.plan__included-note {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(247, 249, 247, 0.75);
}

.plan__included-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), color 0.25s ease;
}

.plan__included-link:hover {
  color: #F7F9F7;
  transform: translateX(4px);
}

.plan__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 120px var(--guide);
  background: var(--bg);
}

.plan__form .plan__eyebrow {
  padding-top: 0;
  text-align: center;
}

.plan__card {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px);
}

@media (max-width: 900px) {
  .plan__blocks-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plan__included-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .plan__included-aside {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .plan__intro {
    padding-top: 120px;
  }

  .plan__form {
    padding: 80px var(--guide);
  }
}

/* Back to Top Floating Button */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 90;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: rgba(15, 59, 39, 0.92);
  color: var(--accent);
  border: 1px solid rgba(146, 255, 95, 0.25);
  box-shadow: 0 10px 24px -6px rgba(15, 59, 39, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s ease,
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.3s ease,
              background-color 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -6px rgba(146, 255, 95, 0.45);
}

.back-to-top:active {
  transform: translateY(-1px) scale(0.96);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.back-to-top svg {
  display: block;
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.back-to-top:hover svg {
  transform: translateY(-2px);
}

@media (max-width: 620px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
  }

  .back-to-top svg {
    width: 18px;
    height: 18px;
  }
}


/* Case images (optimized copies of images/Cases/*.png) */
.case-tile__media--podcast { background-image: url("../images/Cases/case1-podcast.webp"); aspect-ratio: 1800 / 1534; }
.project-card__media--podcast { background-image: url("../images/Cases/case1-podcast.webp"); background-position: center; }
.case__shot--podcast { background-image: url("../images/Cases/case1-podcast.webp"); aspect-ratio: 1800 / 1534; background-position: center; }
.case-tile__media--sucesso { background-image: url("../images/Cases/case2-escuro.webp"); aspect-ratio: 1800 / 1215; }
.project-card__media--sucesso { background-image: url("../images/Cases/case2-escuro.webp"); background-position: center; }
.case__shot--sucesso { background-image: url("../images/Cases/case2-escuro.webp"); aspect-ratio: 1800 / 1215; background-position: center; }
.case-tile__media--cartinha { background-image: url("../images/Cases/case3-newsletter.webp"); aspect-ratio: 1 / 1; }
.project-card__media--cartinha { background-image: url("../images/Cases/case3-newsletter.webp"); background-position: center; }
.case__shot--cartinha { background-image: url("../images/Cases/case3-newsletter.webp"); aspect-ratio: 1 / 1; background-position: center; }