/* BRUNO DEV.AI V3 · LUXURY INTERNATIONAL · layout das secoes, shell e paginas internas.
   Valores: funcao layout(w) do master 01_MASTER/V3Page.dc.html via tokens (src/tokens.css).
   Faixas (RESPONSIVE_V3): s <=767 (430/390) · t 768-1023 · m 1024-1199 · l 1200-1599 · xl >=1600.
   Nenhuma faixa extra sem motivo: 1366 so ajusta a grade de modulos do CICO (layout(w): w >= 1366). */

/* ============ 00 HEADER ============ */
.hd {
  position: sticky; top: 0; z-index: var(--v-z-header); height: var(--v-header-h); padding: 0 var(--v-m);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  background: var(--v-bg); border-bottom: 1px solid var(--v-line); transition: background-color 200ms ease;
}
:root[data-scrolled] .hd { background: rgba(10,10,9,.95); }
.hd-logo { flex: none; display: flex; align-items: center; }
.hd-nav { display: none; gap: var(--v-nav-gap); font-size: var(--v-fs-small); font-weight: 500; letter-spacing: .04em; color: var(--v-ink-3); }
.hd-nav a { display: inline-flex; align-items: center; min-height: 24px; transition: color 200ms ease; }
.hd-nav a:hover, .hd-nav a[aria-current="page"] { color: var(--v-ink); }
.hd-end { flex: none; display: flex; align-items: center; gap: 20px; }
.lang { font-size: var(--v-fs-ui); letter-spacing: .08em; color: var(--v-muted); display: inline-flex; align-items: center; min-height: 24px; }
.lang .is-cur { color: var(--v-ink); }
.hd-lang, .hd-cta { display: none; }
.hd-cta {
  height: var(--v-header-cta-h); padding: 0 22px; align-items: center; gap: 12px; border: 1px solid var(--v-gold-line);
  font-size: var(--v-fs-ui); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transition: background-color var(--v-dur-button-hover) ease, color var(--v-dur-button-hover) ease;
}
.hd-cta:hover { background: var(--v-gold); color: var(--v-bg); }
.hd-menu { width: 48px; height: 48px; border: 1px solid rgba(237,233,224,.2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.hd-menu span { width: 18px; height: 1px; background: var(--v-ink); }
@media (min-width: 768px) { .hd-lang { display: inline-flex; } .hd-cta { display: inline-flex; } }
@media (min-width: 1024px) { .hd-nav { display: flex; } .hd-menu { display: none; } }

/* Menu mobile: <dialog> fullscreen (focus trap/Esc/retorno de foco nativos via nav.js) */
.mn { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--v-bg); color: var(--v-ink); z-index: var(--v-z-menu); }
.mn::backdrop { background: var(--v-bg); }
.mn-in { min-height: 100%; display: flex; flex-direction: column; gap: 40px; padding: 0 var(--v-m) 40px; }
.mn-top { height: var(--v-header-h); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--v-line); }
.mn-close { width: 48px; height: 48px; border: 1px solid rgba(237,233,224,.2); font-size: var(--v-fs-ui); letter-spacing: .1em; text-transform: uppercase; }
.mn-links { display: flex; flex-direction: column; }
.mn-links a { display: flex; align-items: center; min-height: 60px; border-bottom: 1px solid var(--v-line); font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-weight: 300; font-size: 34px; letter-spacing: -0.01em; }
.mn-end { display: flex; flex-direction: column; gap: 18px; margin-top: auto; }
.mn-end .btn { width: 100%; }
.mn-ch { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--v-ink-3); }
.mn-ch a { display: inline-flex; align-items: center; min-height: var(--v-touch-min); }
:root[data-motion="full"] .mn[open] { animation: v-fade 300ms var(--v-ease-premium); }
:root[data-motion="full"] .mn[open] .mn-links a { animation: v-rise 300ms var(--v-ease-premium) both; }
:root[data-motion="full"] .mn[open] .mn-links li:nth-child(2) a { animation-delay: 40ms; }
:root[data-motion="full"] .mn[open] .mn-links li:nth-child(3) a { animation-delay: 80ms; }
:root[data-motion="full"] .mn[open] .mn-links li:nth-child(4) a { animation-delay: 120ms; }
:root[data-motion="full"] .mn[open] .mn-links li:nth-child(5) a { animation-delay: 160ms; }
:root[data-motion="reduced"] .mn[open] { animation: v-fade 200ms linear; }
:root:has(.mn[open]) { overflow: hidden; }
@keyframes v-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ============ 01 HERO ============ */
/* FOTO 01 do Bruno (Owner 2026-10-04), sem filtro nem blur: so gradientes nas bordas para a leitura do texto.
   <1200: faixa cinematografica no topo (largura total, crop dirigido por faixa via data-adm hero.photo); texto e frame
   logo abaixo, entrando sobre o fade inferior da foto (mesa). >=1200: placa a direita com Bruno + notebook inteiros,
   texto a esquerda sobre a parede escura, frame na coluna direita. */
.hero { --hp-band: 100vw; --hp-in: 64px; position: relative; overflow: hidden; padding: calc(var(--hp-band) - var(--hp-in)) var(--v-m) var(--v-hero-pad-bottom); }
.hero-bd { position: absolute; top: 0; left: 0; right: 0; height: var(--hp-band); }
.hero-bd > .adm { position: absolute; inset: 0; }
.hero-bd .adm-m { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.hero-grad { position: absolute; top: 0; left: 0; right: 0; height: var(--hp-band); pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,9,.3) 0%, rgba(10,10,9,0) 16%, rgba(10,10,9,0) 60%, rgba(10,10,9,.74) 84%, #0A0A09 100%); }
@media (min-width: 768px) { .hero { --hp-band: min(72vw, 620px); --hp-in: 56px; } }
@media (min-width: 1024px) { .hero { --hp-band: 58vw; } }
.hero-grid { position: relative; row-gap: var(--v-hero-row-gap); align-items: center; }
.hero-text { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--v-hero-gap); }
.hero-media { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hero .eyebrow-rule { width: 32px; }
.hero-eb-name { display: none; }
.hero-lead { font-size: var(--v-fs-lead); line-height: var(--v-lh-lead); color: var(--v-ink-3); max-width: 480px; }
.hero-ctas { display: flex; flex-direction: column; gap: var(--v-cta-gap); align-items: stretch; }
.hero-cta2 { min-height: var(--v-btn-h); border: 1px solid var(--v-line-strong); justify-content: center; padding-bottom: 0; }
@media (min-width: 768px) {
  .hero-eb-name { display: inline; }
  .hero-ctas { flex-direction: row; align-items: center; }
  .hero-cta2 { min-height: 24px; border: 0; border-bottom: 1px solid var(--v-gold-underline); padding-bottom: 4px; }
}
@media (min-width: 1024px) {
  .hero-grid { align-items: start; }
  .hero-text { grid-column: 1 / span 6; }
  .hero-media { grid-column: 7 / span 6; }
}
@media (min-width: 1200px) {
  /* placa: a foto ocupa a altura da 1a dobra a direita; o frame desce para abaixo da base do notebook (sobre a mesa que
     se dissolve no fundo), sem cobrir rosto, notebook nem maos */
  .hero { --hp-left: 30%; --hp-plate: clamp(720px, calc(100svh - var(--v-header-h)), 1000px); padding: var(--v-hero-pad-top) var(--v-m) 72px; }
  .hero-bd { left: var(--hp-left); height: var(--hp-plate); }
  .hero-grad { height: var(--hp-plate);
    background: linear-gradient(90deg, #0A0A09 0%, rgba(10,10,9,.94) calc(var(--hp-left) - 2%), rgba(10,10,9,.28) calc(var(--hp-left) + 7%), rgba(10,10,9,0) calc(var(--hp-left) + 14%)),
      linear-gradient(180deg, rgba(10,10,9,.36) 0%, rgba(10,10,9,0) 12%, rgba(10,10,9,0) 68%, rgba(10,10,9,.72) 88%, #0A0A09 100%); }
  .hero-text { grid-column: 1 / span 5; grid-row: 1; min-height: calc(var(--hp-plate) - 2 * var(--v-hero-pad-top)); justify-content: center; }
  /* topo do frame = base real do notebook + 12 px. Geometria do cover da foto (object-position y 30%): altura renderizada
     rh = max(placa, largura da placa x 1086/1448 = 70vw x .75 = 52.5vw); base do notebook = .30 x placa + (.77 - .30) x rh.
     Em placas mais largas que 4:3 (1600/1920/ultrawide) a foto cresce pela largura e o notebook desce: o frame acompanha. */
  .hero-media { grid-column: 8 / span 5; grid-row: 1; margin-top: calc(var(--hp-plate) * .3 + max(var(--hp-plate), 52.5vw) * .47 + 12px - var(--v-hero-pad-top)); }
}
/* entrada (FULL): h1/lead/CTAs opacity + translateY 12, stagger 80ms, 700ms; REDUCED: opacity 200ms; SAVE: nada */
:root[data-motion="full"] .hero-text > * { animation: v-rise 700ms var(--v-ease-premium) both; }
:root[data-motion="full"] .hero-text > :nth-child(2) { animation-delay: 80ms; }
:root[data-motion="full"] .hero-text > :nth-child(3) { animation-delay: 160ms; }
:root[data-motion="full"] .hero-text > :nth-child(4) { animation-delay: 240ms; }
:root[data-motion="reduced"] .hero-text > * { animation: v-fade 200ms linear both; }

/* HeroVideoPlaylist: frame acessivel (7 filmes: Presence + 6 estudos do Lab) */
.hpf-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid rgba(237,233,224,.14); background: var(--v-surface-3); box-shadow: var(--v-shadow-media); }
.hpf-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.hpf-slide.is-active { opacity: 1; visibility: visible; }
:root[data-motion="full"] .hpf-slide { transition: opacity 1100ms var(--v-ease-premium), visibility 0s linear 1100ms; }
:root[data-motion="full"] .hpf-slide.is-active { transition: opacity 1100ms var(--v-ease-premium), visibility 0s; }
:root[data-motion="reduced"] .hpf-slide { transition: opacity 200ms linear, visibility 0s linear 200ms; }
:root[data-motion="reduced"] .hpf-slide.is-active { transition: opacity 200ms linear, visibility 0s; }
/* HeroVideoPlaylist: filme e poster INTEIROS (contain; proporcoes mistas 4:5 e 16:9 no frame 16:10); fundo = o mesmo
   poster desfocado/escurecido (decorativo, aria-hidden). O <video> so aparece quando esta tocando de fato. */
.hpf-vslide .hpf-fill, .hpf-vslide .hpf-poster, .hpf-vslide .hpf-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.hpf-vslide .hpf-fill { object-fit: cover; filter: blur(26px) brightness(.36) saturate(.85); transform: scale(1.18); }
.hpf-vslide .hpf-poster, .hpf-vslide .hpf-video { object-fit: contain; object-position: 50% 50%; }
.hpf-vslide .hpf-video { opacity: 0; transition: opacity 450ms ease; }
.hpf-vslide.is-playing .hpf-video { opacity: 1; }
.hpf-count { position: absolute; top: 14px; left: 16px; z-index: 2; padding: 6px 10px; background: rgba(10,10,9,.72); font-size: var(--v-fs-micro); letter-spacing: .1em; }
.hpf-pause { position: absolute; top: 10px; right: 12px; z-index: 2; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(10,10,9,.72); border: 1px solid rgba(237,233,224,.18); font-size: var(--v-fs-micro); }
@media (pointer: coarse) { .hpf-pause { width: 44px; height: 44px; top: 6px; right: 8px; } }
.hpf-cap { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.hpf-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hpf-name { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-size: var(--v-fs-slide-name); letter-spacing: -0.01em; line-height: 1.25; }
.hpf-type { font-size: var(--v-fs-small); color: var(--v-ink-3); }
.hpf-bars { flex: none; display: flex; gap: 6px; }
.hpf-bar { width: var(--v-bar-w); min-width: 24px; height: var(--v-touch-min); display: flex; align-items: flex-end; padding-bottom: 6px; } /* master: 18px no mobile; alvo minimo 24px (WCAG 2.5.8) */
.hpf-bar span { display: block; width: 100%; height: 2px; background: rgba(237,233,224,.2); transition: background-color 300ms ease; }
.hpf-bar[aria-current="true"] span { background: var(--v-gold); }
.hpf-nojs { display: none; }
:root:not([data-js]) .hpf-nojs { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--v-fs-small); color: var(--v-ink-3); }
:root:not([data-js]) .hpf-nojs a { display: inline-flex; min-height: 24px; align-items: center; border-bottom: 1px solid var(--v-gold-underline); }

/* ============ 02 CLIENT STRIP ============ */
.strip { padding: var(--v-strip-pad) var(--v-m); border-top: 1px solid var(--v-line); border-bottom: 1px solid var(--v-line); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.strip-list { flex: 1; display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-size: var(--v-strip-size); font-style: italic; color: var(--v-ink-2); }
.strip-list { line-height: 1.35; }
@media (min-width: 1024px) { .strip-list { gap: 12px 28px; } }
@media (min-width: 1200px) { .strip { flex-direction: row; align-items: center; gap: 48px; } .strip-list { justify-content: space-between; } }

/* ============ secao padrao ============ */
.sec { padding: var(--v-sec-pad) var(--v-m); display: flex; flex-direction: column; gap: var(--v-sec-gap); }
.sec-head { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 24px; }
.sec-title { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.sec-title--s { max-width: 640px; }
.sec-lede { font-size: var(--v-fs-body); line-height: var(--v-lh-body); color: var(--v-ink-3); max-width: 440px; }
@media (min-width: 1024px) { .sec-head { flex-direction: row; align-items: flex-end; } .sec-head > .link-u, .sec-head > .sec-lede { flex: none; } }

/* ============ 03 SELECTED WORK ============ */
.feat { position: relative; display: block; overflow: hidden; border: 1px solid var(--v-line); transition: border-color 1400ms var(--v-ease-premium); }
.feat .adm-m { filter: saturate(.85) brightness(.75); }
.feat-grad { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,9,.92) 0%, rgba(10,10,9,0) 55%); }
.feat-body { position: absolute; left: var(--v-feat-inset); right: var(--v-feat-inset); bottom: var(--v-feat-inset); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 20px; }
.feat-txt { display: flex; flex-direction: column; gap: 12px; }
.feat-eb { font-size: var(--v-fs-micro); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--v-gold); }
.feat-title { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-weight: 300; font-size: var(--v-fs-feature-title); line-height: 1; letter-spacing: -0.02em; }
.feat-lede { font-size: var(--v-fs-body); color: var(--v-ink-2); max-width: 540px; line-height: 1.55; }
.feat-act { flex: none; display: flex; gap: 24px; align-items: center; }
@media (min-width: 1024px) { .feat-body { flex-direction: row; align-items: flex-end; } }
.feat:hover, .feat:focus-visible { border-color: rgba(201,165,92,.4); }
:root[data-motion="full"] .feat .adm-m { transition: transform 1400ms var(--v-ease-premium); }
:root[data-motion="full"] .feat:hover .adm-m, :root[data-motion="full"] .feat:focus-visible .adm-m { transform: scale(1.03); }

.wgrid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--v-g); row-gap: var(--v-work-row-gap); }
.card { display: flex; flex-direction: column; gap: 20px; }
.card .adm { border: 1px solid var(--v-line); }
.card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid rgba(237,233,224,.1); padding-top: 18px; }
.card-id { display: flex; flex-direction: column; gap: 6px; }
.card-name { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-size: var(--v-fs-card-title); letter-spacing: -0.01em; line-height: 1.15; }
.card-type { font-size: var(--v-fs-small); color: var(--v-ink-3); }
.card .status { flex: none; }
:root[data-motion="full"] .card .adm-m { transition: transform 1200ms var(--v-ease-premium); }
:root[data-motion="full"] .card:hover .adm-m, :root[data-motion="full"] .card:focus-visible .adm-m { transform: scale(1.03); }
@media (min-width: 768px) {
  .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wgrid > :nth-child(2n) { margin-top: var(--v-work-offset); }
}

/* ============ 04 VI CICO ============ */
.cico { background: var(--v-surface-2); border-top: 1px solid rgba(237,233,224,.06); border-bottom: 1px solid rgba(237,233,224,.06); padding: var(--v-sec-pad) var(--v-m); row-gap: 44px; align-items: center; }
.cico-text { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 26px; }
.cico-text .h2 { line-height: 1.08; }
.cico-lede { font-size: var(--v-fs-body); line-height: 1.65; color: var(--v-ink-3); max-width: 560px; }
.cico-meta { display: grid; grid-template-columns: 96px 1fr; row-gap: 12px; font-size: var(--v-fs-small); border-top: 1px solid rgba(237,233,224,.1); padding-top: 20px; max-width: 560px; }
.cico-meta dt { color: var(--v-muted); }
.cico-meta dd { display: flex; align-items: center; gap: 8px; }
.cico-ctas { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; }
.cico-media { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cico-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.tabs { display: flex; border: 1px solid rgba(237,233,224,.18); padding: 4px; gap: 4px; }
.tab { padding: 10px 18px; min-height: 24px; display: flex; align-items: center; font-size: var(--v-fs-eyebrow); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--v-ink-3); }
.tab[aria-selected="true"][data-tab="ui"] { background: var(--v-ink); color: var(--v-bg); }
.tab[aria-selected="true"][data-tab="sys"] { background: var(--v-gold); color: var(--v-bg); }
.tab:focus-visible { outline-offset: 2px; }
:root[data-motion="full"] .tab { transition: background-color 300ms ease, color 300ms ease; }
@media (pointer: coarse) { .tab { min-height: var(--v-touch-min); } }
.cico-sig { display: none; font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-style: italic; font-size: var(--v-fs-small); color: var(--v-muted); }
.browser { position: relative; border: 1px solid rgba(237,233,224,.14); background: var(--v-bg); box-shadow: var(--v-shadow-media); }
.browser-bar { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--v-line); }
.browser-bar > span:not(.browser-url) { width: 8px; height: 8px; border-radius: 50%; background: #2A2A28; }
.browser-url { margin-left: 12px; font-size: var(--v-fs-micro); color: var(--v-muted); }
:root[data-js] .cico-panel[hidden] { display: none !important; }
:root[data-motion="full"] .cico-panel.is-entering { animation: v-fade 300ms ease; }
.cico-sys { background: #0D0D0C; padding: var(--v-sys-pad); display: flex; flex-direction: column; gap: 20px; aspect-ratio: 16 / 10; } /* altura minima = painel Interface (screenshot 16:10): a coluna centralizada nao "pula" ao trocar de aba; conteudo maior cresce */
:root:not([data-js]) .cico-sys { border-top: 1px solid var(--v-line); }
.cico-sys-label { font-size: var(--v-fs-micro); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--v-gold); }
.cico-nodes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cico-nodes li { border: 1px solid rgba(237,233,224,.16); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.cico-nodes li.is-key { border-color: var(--v-gold-line); background: rgba(201,165,92,.05); }
.cico-n { font-size: var(--v-fs-micro); color: var(--v-gold); }
.cico-t { font-size: 15px; font-weight: 500; }
.cico-d { font-size: var(--v-fs-ui); color: var(--v-muted); line-height: 1.5; }
.cico-note { font-size: var(--v-fs-eyebrow); color: var(--v-muted); }
@media (min-width: 768px) { .cico-sig { display: block; } .cico-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cico-nodes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .cico-text { grid-column: 1 / span 4; }
  .cico-media { grid-column: 6 / span 7; }
  .cico-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1366px) { .cico-nodes { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* layout(w): frame lateral >= 1366 = 3 col */

/* ============ 05 CAPABILITIES ============ */
.caps { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--v-line-2); }
.cap { padding: 24px 0 26px; display: flex; flex-direction: column; gap: 16px; border-bottom: 1px solid var(--v-line); }
.cap-n { font-size: var(--v-fs-eyebrow); color: var(--v-gold); }
.cap-t { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-size: var(--v-fs-cap-title); line-height: 1.15; }
.cap-d { font-size: 15px; line-height: 1.6; color: var(--v-ink-4); }
@media (min-width: 768px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cap { padding: 30px 24px 32px 0; } }
@media (min-width: 1024px) {
  .caps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cap { padding: 34px 26px 38px 0; border-bottom: 0; }
  .cap:not(:last-child) { border-right: 1px solid var(--v-line); }
  .cap + .cap { padding-left: 26px; }
}

/* ============ 06 ENGINEERING ============ */
.eng-sec { padding: 0 var(--v-m) var(--v-sec-pad); }
.eng { border: var(--v-border-panel); background: var(--v-surface-1); padding: var(--v-panel-pad); row-gap: 32px; align-items: start; }
.eng-text { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 22px; }
.eng-text .h3 { line-height: 1.12; }
.eng-note { font-size: 15px; line-height: 1.65; color: var(--v-ink-4); }
.eng-list { grid-column: 1 / -1; display: flex; flex-direction: column; font-size: 15px; }
.eng-list > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 16px; padding: 15px 0; border-bottom: 1px solid var(--v-line); }
.eng-list > div:last-child { border-bottom: 0; }
.eng-list dt { color: var(--v-muted); }
@media (min-width: 768px) { .eng-list > div { grid-template-columns: 160px minmax(0, 1fr); } }
@media (min-width: 1024px) { .eng-text { grid-column: 1 / span 5; } .eng-list { grid-column: 7 / span 6; } }

/* ============ 07 LAB ============ */
.lab { padding: 0 0 var(--v-sec-pad); display: flex; flex-direction: column; gap: 40px; }
.lab-head { padding: 0 var(--v-m); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.lab-head > .link-u, .sec-head > .link-u { white-space: nowrap; }
.lab-scroll { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--v-m); scrollbar-width: none; }
.lab-scroll::-webkit-scrollbar { display: none; }
.lab-grid { display: grid; grid-template-columns: repeat(6, 200px); gap: 16px; padding: 0 var(--v-m); width: max-content; }
.lab-card { display: flex; flex-direction: column; gap: 12px; scroll-snap-align: start; }
.lab-card .adm-m { filter: grayscale(.5) brightness(.85); transition: filter 500ms var(--v-ease-premium); }
.lab-card:hover .adm-m, .lab-card:focus-visible .adm-m { filter: grayscale(0) brightness(1); }
:root[data-motion="full"] .lab-card .adm-m { transition: filter 500ms var(--v-ease-premium), transform 1000ms var(--v-ease-premium); }
:root[data-motion="full"] .lab-card:hover .adm-m, :root[data-motion="full"] .lab-card:focus-visible .adm-m { transform: scale(1.04); }
/* filme no hover (src/hover-video.js): sobre o poster, mesmo framing (.adm-m + src/media.css); poster ate tocar de fato */
.lab-card .hv-video { opacity: 0; transition: opacity 300ms ease; }
.lab-card.is-playing .hv-video { opacity: 1; }
/* filme PAISAGEM no card 4:5: inteiro (contain) sobre o proprio poster desfocado/escurecido, como o frame do hero */
.lab-card[data-hover-landscape] .hv-video { object-fit: contain; object-position: 50% 50%; }
.lab-card[data-hover-landscape].is-playing img.adm-m { filter: blur(22px) brightness(.38) saturate(.85); transform: scale(1.15); }
.lab-card-t { display: flex; flex-direction: column; gap: 4px; }
.lab-card-name { font-size: 15px; font-weight: 500; }
.lab-card-type { font-size: var(--v-fs-eyebrow); color: var(--v-muted); }
@media (min-width: 768px) {
  .lab-scroll { overflow: visible; }
  .lab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto; }
}
@media (min-width: 1024px) { .lab-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ============ 08 ABOUT ============ */
/* Presenca humana real (Owner 2026-10-04): FOTO 03 dominante (4:5) + FOTO 02 complementar (1:1) sobreposta no canto
   superior direito (so fundo do cafe: rosto, maos e a caneca ficam livres), separadas por um respiro na cor do fundo
   (sem moldura decorativa). Proporcoes nativas, nunca corte. */
.about { position: relative; overflow: hidden; padding: var(--v-sec-pad) var(--v-m); border-top: 1px solid var(--v-line); row-gap: 48px; align-items: center; }
.about-media { grid-column: 1 / -1; position: relative; padding-top: 8%; max-width: 560px; }
.about-main, .about-second { margin: 0; }
.about-main { width: 80%; }
.about-main .adm, .about-second .adm { border: 1px solid var(--v-line); }
.about-second { position: absolute; right: 0; top: 0; width: 44%; box-shadow: 0 0 0 10px var(--v-bg), var(--v-shadow-media); }
.about-id { display: flex; flex-direction: column; gap: 22px; }
.about-body { font-size: var(--v-fs-body); line-height: var(--v-lh-body); color: var(--v-ink-3); max-width: 600px; }
.about-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.about-name { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-weight: 300; font-size: var(--v-fs-about-name); line-height: 1; letter-spacing: -0.025em; }
.about-role { font-size: var(--v-fs-eyebrow); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--v-muted); }
.about-text { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 26px; position: relative; }
.about-st { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-size: var(--v-about-lead); line-height: 1.45; color: var(--v-ink-2); }
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 24px; border-top: 1px solid rgba(237,233,224,.1); padding-top: 22px; }
.facts > div { display: flex; flex-direction: column; gap: 4px; }
.facts dt { font-size: var(--v-fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--v-muted); }
.facts dd { font-size: 15px; }
.about-text .link-u { align-self: flex-start; }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .about-media { grid-column: 1 / span 5; max-width: none; } .about-text { grid-column: 7 / span 6; } }

/* ============ 09 CONTACT ============ */
.contact-sec { padding: 0 var(--v-m) var(--v-contact-bottom); }
.contact { position: relative; overflow: hidden; border: var(--v-border-contact); background: var(--v-surface-1); padding: 52px 22px; display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.contact-wm { position: absolute; right: var(--v-wm-right); top: 50%; transform: translateY(-50%); height: var(--v-wm-h); width: auto; max-width: none; opacity: .05; pointer-events: none; }
.contact .eyebrow { justify-content: center; }
.contact-h { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-weight: 300; font-size: var(--v-fs-contact-title); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; position: relative; }
.contact-p { font-size: var(--v-fs-body); line-height: 1.6; color: var(--v-ink-3); max-width: 520px; position: relative; }
.contact-btns { display: flex; flex-direction: column; gap: 14px; align-self: stretch; position: relative; }
.contact-btns .btn { padding: 0 32px; }
.contact-btns .btn--secondary { gap: 10px; }
.contact-wa-num { display: none; }
.contact-wa-line { font-size: 15px; color: var(--v-ink-3); position: relative; }
.contact-mail { font-size: 15px; color: var(--v-muted); position: relative; }
.contact-mail a { color: var(--v-ink); border-bottom: 1px solid var(--v-gold-underline); overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .contact { padding: 76px 48px; }
  .contact-btns { flex-direction: row; align-self: center; }
  .contact-wa-num { display: inline; }
  .contact-wa-line { display: none; }
}
@media (min-width: 1024px) { .contact { padding: 104px 80px; } }

/* ============ 10 FOOTER ============ */
.ft { padding: var(--v-foot-pad) var(--v-m) 36px; border-top: 1px solid var(--v-line); display: flex; flex-direction: column; gap: var(--v-foot-gap); }
.ft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px var(--v-g); align-items: start; }
.ft-brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 20px; }
.ft-brand .logo { height: var(--v-foot-logo-h); align-self: flex-start; }
.ft-desc { font-size: var(--v-fs-small); line-height: 1.6; color: var(--v-muted); max-width: 360px; }
.ft-col { display: flex; flex-direction: column; gap: 4px; font-size: var(--v-fs-small); color: var(--v-ink-3); } /* 24px de alvo + 4 = ritmo ~28px do master */
.ft-col .label { margin-bottom: 6px; }
.ft-col a { display: inline-flex; align-items: center; min-height: 24px; white-space: nowrap; } /* master: e-mail inteiro numa linha (nunca quebrar no meio) */
.ft-col a:hover { color: var(--v-ink); }
.ft-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: var(--v-fs-eyebrow); letter-spacing: .04em; color: var(--v-muted); border-top: 1px solid rgba(237,233,224,.06); padding-top: 22px; }
.ft-legal a { display: inline-flex; align-items: center; min-height: 24px; }
.ft-legal a:hover { color: var(--v-ink); }
@media (pointer: coarse) { .ft-col a, .ft-legal a { min-height: var(--v-touch-min); } .ft-col { gap: 0; } }
@media (min-width: 768px) { .ft-grid { grid-template-columns: 2fr 1fr 1.4fr; } .ft-brand { grid-column: auto; } }
@media (min-width: 1024px) { .ft-grid { grid-template-columns: 5fr 2fr 3fr; } }

/* ============ Modal comercial (logica intacta em assets/contact-flow.js; so re-skin) ============ */
.cf-back { position: fixed; inset: 0; z-index: var(--v-z-modal); display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10,10,9,.88); opacity: 0; }
.cf-back[hidden] { display: none; }
.cf-back.show { opacity: 1; }
:root[data-motion="full"] .cf-back { transition: opacity 300ms var(--v-ease-premium); }
:root[data-motion="full"] .cf-panel { transform: scale(.98); transition: transform 300ms var(--v-ease-premium); }
:root[data-motion="full"] .cf-back.show .cf-panel { transform: none; }
:root[data-motion="reduced"] .cf-back { transition: opacity 200ms linear; }
.cf-panel { position: relative; width: 100%; max-width: 640px; max-height: calc(100dvh - 40px); overflow: auto; padding: 48px 40px 40px; background: var(--v-surface-1); border: var(--v-border-contact); color: var(--v-ink); text-align: left; }
.cf-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--v-ink-3); border: 1px solid var(--v-line-2); }
.cf-x:hover { color: var(--v-ink); border-color: var(--v-line-strong); }
.cf-title { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-weight: 300; font-size: 36px; line-height: 1.1; letter-spacing: -0.015em; padding-right: 48px; text-wrap: balance; }
.cf-text { margin-top: 16px; font-size: var(--v-fs-body); line-height: 1.6; color: var(--v-ink-3); }
.cf-options { margin-top: 32px; display: flex; flex-direction: column; }
.cf-option { display: flex; flex-direction: column; gap: 8px; padding: 22px 0; border-top: 1px solid var(--v-line-2); }
.cf-label { display: flex; align-items: center; gap: 10px; font-size: var(--v-fs-micro); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--v-gold); }
.cf-label svg { width: 16px; height: 16px; }
.cf-value { font-size: 17px; overflow-wrap: anywhere; }
.cf-btn { margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; min-height: var(--v-btn-h); padding: 0 28px; font-size: var(--v-fs-ui); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; transition: background-color var(--v-dur-button-hover) ease, border-color var(--v-dur-button-hover) ease; }
.cf-btn.primary { background: var(--v-ink); color: var(--v-bg); }
.cf-btn.primary:hover { background: var(--v-gold-hover); }
.cf-btn.ghost { border: 1px solid var(--v-line-strong); font-weight: 500; }
.cf-btn.ghost:hover { border-color: var(--v-ink); }
body.cf-locked { overflow: hidden; }
@media (max-width: 767px) { .cf-back { padding: 0; } .cf-panel { max-width: none; height: 100%; max-height: none; padding: 72px 22px 32px; } }
@media (min-width: 768px) { .cf-option { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; } .cf-label { width: 100%; } .cf-btn { margin-top: 0; } }

/* ============ Paginas internas: cabecalho de pagina ============ */
.page-hero { padding: calc(var(--v-sec-pad) * .72) var(--v-m) calc(var(--v-sec-pad) * .5); display: flex; flex-direction: column; gap: 24px; border-bottom: 1px solid var(--v-line); }
.page-hero .h1 { max-width: 15em; }
.page-lede { font-size: var(--v-fs-lead); line-height: var(--v-lh-lead); color: var(--v-ink-3); max-width: 620px; }
.crumb ol { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--v-fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--v-muted); }
.crumb li + li::before { content: '/'; margin-right: 10px; color: var(--v-faint); }
.crumb a { display: inline-flex; align-items: center; min-height: 24px; }
.crumb a:hover { color: var(--v-ink); }
.crumb [aria-current] { color: var(--v-ink-3); }
@media (pointer: coarse) { .crumb a { min-height: var(--v-touch-min); } }

/* ============ /work/ (indice) ============ */
.wlist { padding: var(--v-sec-pad) var(--v-m); display: flex; flex-direction: column; gap: var(--v-work-row-gap); }
.wrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: var(--v-work-row-gap); border-bottom: 1px solid var(--v-line); }
.wrow:last-child { border-bottom: 0; padding-bottom: 0; }
.wrow-info { display: flex; flex-direction: column; gap: 14px; align-self: center; }
.wrow-n { font-size: var(--v-fs-eyebrow); color: var(--v-gold); }
.wrow-name { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-weight: 300; font-size: var(--v-fs-h3); line-height: 1.1; letter-spacing: -0.015em; }
.wrow-name a:hover { color: var(--v-gold-hover); }
.wrow-type { font-size: var(--v-fs-small); color: var(--v-ink-3); }
.wrow-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--v-fs-small); color: var(--v-ink-3); }
.wrow-ctas { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; }
@media (min-width: 768px) { .wrow { grid-template-columns: repeat(var(--v-cols), minmax(0, 1fr)); column-gap: var(--v-g); } .wrow-media { grid-column: 1 / span 4; } .wrow-info { grid-column: 5 / span 4; } }
@media (min-width: 1024px) { .wrow-media { grid-column: 1 / span 6; } .wrow-info { grid-column: 8 / span 5; } }

/* ============ /sobre/ (fotos reais aprovadas no cabecalho) ============ */
.ax-hero { padding: calc(var(--v-sec-pad) * .72) var(--v-m) var(--v-sec-pad); display: flex; flex-direction: column; gap: 22px; border-bottom: 1px solid var(--v-line); }
.ax-hero-in { row-gap: 48px; align-items: center; }
.ax-hero-text { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 1024px) { .ax-hero-text { grid-column: 1 / span 6; } .ax-hero .about-media { grid-column: 8 / span 5; } }
.ax-sec { padding: var(--v-sec-pad) var(--v-m) 0; row-gap: 24px; }
.ax-k { grid-column: 1 / -1; }
.ax-body { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 20px; }
.ax-lede { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-size: var(--v-about-lead); line-height: 1.45; color: var(--v-ink-2); }
.ax-text { font-size: var(--v-fs-body); line-height: var(--v-lh-body); color: var(--v-ink-3); max-width: 640px; }
.ax-caps { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--v-line-2); }
.ax-caps li { padding: 18px 0; border-bottom: 1px solid var(--v-line); font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-size: var(--v-fs-cap-title); }
.ax-steps { display: flex; flex-direction: column; border-top: 1px solid var(--v-line-2); }
.ax-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid var(--v-line); }
.ax-sn { font-size: var(--v-fs-eyebrow); color: var(--v-gold); padding-top: 4px; }
.ax-st { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-size: 22px; }
.ax-sd { grid-column: 2; font-size: 15px; line-height: 1.6; color: var(--v-ink-4); }
.ax-cta { padding: var(--v-sec-pad) var(--v-m); display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }
@media (min-width: 768px) { .ax-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--v-g); } }
@media (min-width: 1024px) {
  .ax-k { grid-column: 1 / span 4; }
  .ax-body { grid-column: 5 / span 8; }
  .ax-steps li { grid-template-columns: 48px minmax(0, 220px) minmax(0, 1fr); }
  .ax-sd { grid-column: auto; }
}

/* ============ Lab (indice e estudo) ============ */
.labx-grid { padding: var(--v-sec-pad) var(--v-m); display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px var(--v-g); }
@media (min-width: 430px) { .labx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .labx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.study { padding: calc(var(--v-sec-pad) * .6) var(--v-m) var(--v-sec-pad); display: flex; flex-direction: column; gap: 32px; }
.study-film { margin: 0; align-self: center; width: 100%; }
.study-film video { width: 100%; height: auto; background: var(--v-surface-3); }
.study-film--p { max-width: 560px; }
.study-film--l { max-width: 1120px; }
.study-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 22px; border-top: 1px solid var(--v-line); font-size: var(--v-fs-micro); letter-spacing: .08em; text-transform: uppercase; }
.study-nav a { display: inline-flex; align-items: center; min-height: 24px; color: var(--v-ink-3); }
.study-nav a:hover { color: var(--v-ink); }
@media (pointer: coarse) { .study-nav a { min-height: var(--v-touch-min); } }

/* ============ Privacidade ============ */
.legal { padding: calc(var(--v-sec-pad) * .72) var(--v-m) var(--v-sec-pad); }
.legal-in { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.legal h1 { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-weight: 300; font-size: var(--v-fs-h1); line-height: var(--v-lh-h1); letter-spacing: -0.022em; margin-bottom: 12px; }
.legal h2 { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-weight: 400; font-size: 26px; line-height: 1.2; margin-top: 28px; }
.legal p, .legal li { font-size: var(--v-fs-body); line-height: var(--v-lh-body); color: var(--v-ink-3); }
.legal ul { list-style: disc; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.legal a { color: var(--v-ink); border-bottom: 1px solid var(--v-gold-underline); overflow-wrap: anywhere; }
.legal strong { color: var(--v-ink); font-weight: 500; }

/* ============ Cases (shell V3; conteudo factual da V2 preservado) ============ */
.case-hero { padding: calc(var(--v-sec-pad) * .72) 0 0; display: flex; flex-direction: column; }
.case-hero-in { padding: 0 var(--v-m) 56px; display: flex; flex-direction: column; gap: 24px; }
.case-title { max-width: 14em; }
.case-hero-row { display: flex; flex-direction: column; gap: 28px; }
.case-lede { font-size: var(--v-fs-lead); line-height: var(--v-lh-lead); color: var(--v-ink-3); max-width: 640px; }
.case-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.case-hero-media { margin: 0 var(--v-m); border: 1px solid var(--v-line); }
@media (min-width: 1024px) { .case-hero-row { flex-direction: row; justify-content: space-between; align-items: flex-end; } .case-ctas { flex: none; } }
.case-meta-sec { padding: 44px var(--v-m) 0; }
.case-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--v-g); border-top: 1px solid var(--v-line-2); }
.case-meta > div { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--v-line); }
.case-meta dt { font-size: var(--v-fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--v-muted); }
.case-meta dd { font-size: 15px; display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.case-meta a { border-bottom: 1px solid var(--v-gold-underline); display: inline-flex; min-height: 24px; align-items: center; }
@media (min-width: 768px) { .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .case-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } .case--cico .case-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case-sec { padding: var(--v-sec-pad) 0 0; }
.case-sec-in { padding: 0 var(--v-m); row-gap: 24px; }
.case-k { grid-column: 1 / -1; }
.case-body { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
@media (min-width: 1024px) { .case-k { grid-column: 1 / span 3; } .case-body { grid-column: 4 / span 9; } }
.case-stmt { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-weight: 300; font-size: var(--v-fs-h3); line-height: 1.15; letter-spacing: -0.015em; max-width: 22em; text-wrap: balance; }
.case-text { font-size: var(--v-fs-body); line-height: var(--v-lh-body); color: var(--v-ink-3); max-width: 680px; }
.case-pair dt, .case-rows dt { font-size: var(--v-fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--v-muted); }
.case-pair dd { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--v-ink-3); max-width: 680px; }
.case-rows { display: flex; flex-direction: column; border-top: 1px solid var(--v-line-2); }
.case-rows > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--v-line); }
.case-rows dd { font-size: 15px; color: var(--v-ink-3); }
@media (min-width: 768px) { .case-rows > div { grid-template-columns: 200px minmax(0, 1fr); } }
.case-fig { margin: 0; border: 1px solid var(--v-line); background: var(--v-surface-3); overflow: clip; }
.case-fig--bleed { margin: 56px var(--v-m) 0; }
.case-fig--phone { max-width: 320px; }
.case-phones { margin: 0 calc(-1 * var(--v-m)); padding: 0 var(--v-m); display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--v-m); scrollbar-width: none; }
.case-phones::-webkit-scrollbar { display: none; }
.case-phones li { flex: none; width: min(68vw, 280px); scroll-snap-align: start; }
@media (min-width: 768px) { .case-phones { overflow: visible; margin: 0; padding: 0; } .case-phones li { flex: 1 1 0; width: auto; max-width: 280px; } }
.case-split { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 768px) { .case-split { flex-direction: row; align-items: flex-start; } .case-split > .case-text { flex: 1; } }
.case-flow { display: flex; flex-direction: column; border-top: 1px solid var(--v-line-2); }
.case-flow li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; padding: 14px 0; border-bottom: 1px solid var(--v-line); }
.case-flow-n { font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace; font-size: var(--v-fs-micro); color: var(--v-gold); padding-top: 3px; }
.case-flow-k { font-size: 15px; font-weight: 500; }
.case-flow-v { grid-column: 2; font-size: var(--v-fs-ui); color: var(--v-muted); }
.case-list { display: flex; flex-direction: column; border-top: 1px solid var(--v-line-2); }
.case-list li { padding: 14px 0; border-bottom: 1px solid var(--v-line); font-size: 15px; color: var(--v-ink-3); }
.case-diagram { display: flex; flex-direction: column; gap: 20px; padding: var(--v-sys-pad); background: #0D0D0C; border: 1px solid var(--v-line); }
.sys-head { display: flex; align-items: center; gap: 10px; font-size: var(--v-fs-micro); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--v-gold); }
.cico-diagram { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cico-diagram li { border: 1px solid rgba(237,233,224,.16); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.cico-diagram li.is-key, .cico-diagram li.is-auth { border-color: var(--v-gold-line); }
.cico-k { font-size: 15px; font-weight: 500; }
.cico-diagram .cico-d { font-size: var(--v-fs-ui); color: var(--v-muted); line-height: 1.5; }
.cico-never { font-size: var(--v-fs-eyebrow); color: var(--v-muted); }
@media (min-width: 768px) { .cico-diagram { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cico-diagram { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.umap { display: grid; gap: 12px; padding: var(--v-sys-pad); background: #0D0D0C; border: 1px solid var(--v-line); }
.umap-center { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-size: 26px; display: flex; flex-direction: column; gap: 4px; }
.umap-center span { font-family: 'Archivo', 'Archivo Fallback', Arial, sans-serif; font-size: var(--v-fs-ui); color: var(--v-muted); }
.umap-nodes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) { .umap-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.umap-node { border: 1px solid rgba(237,233,224,.16); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.umap-k { font-size: 15px; font-weight: 500; }
.umap-d { font-size: var(--v-fs-ui); color: var(--v-muted); }
.case-live { margin: 0; }
.case-live-link { display: inline-flex; flex-wrap: wrap; gap: .25em; align-items: baseline; max-width: 100%; font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-weight: 300; font-size: var(--v-fs-h2); line-height: 1.1; letter-spacing: -0.015em; border-bottom: 1px solid var(--v-gold-underline); padding-bottom: 6px; overflow-wrap: anywhere; }
.case-live-link:hover { color: var(--v-gold-hover); }
.case-live-host { min-width: 0; overflow-wrap: anywhere; }
.case-live-st { margin-top: 18px; }
.case-next { margin-top: var(--v-sec-pad); border-top: 1px solid var(--v-line); }
.case-next-link { display: flex; flex-direction: column; gap: 12px; padding: var(--v-sec-pad) var(--v-m); }
.case-next-name { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-weight: 300; font-size: var(--v-fs-h2); line-height: 1.1; letter-spacing: -0.015em; }
.case-next-link:hover .case-next-name { color: var(--v-gold-hover); }
.case-next-type { font-size: var(--v-fs-small); color: var(--v-ink-3); }