@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

  :root {
    /* base channels — the panel rewrites these three to retheme everything */
    --paper-rgb: 244, 242, 238;
    /* menu lateral (identidade navy + dourado, Space Mono) */
    --sb-bg: #242638;
    --sb-ink: #D7DAD6;
    --sb-gold: #F6BF4A;
    --sb-copper: #C18B43;
    --sb-panel: #DFDEDD;
    --mono: "Space Mono", ui-monospace, monospace;
    --ink-rgb: 22, 20, 15;
    --stone: #E7E2D8;

    --off-white: rgb(var(--paper-rgb));
    --ink: rgb(var(--ink-rgb));
    --ink-80: rgba(var(--ink-rgb), 0.80);
    --ink-55: rgba(var(--ink-rgb), 0.55);
    --ink-35: rgba(var(--ink-rgb), 0.35);
    --ink-12: rgba(var(--ink-rgb), 0.12);
    --terra: #ef4854;
    --terra-soft: #f47179;
    --paper-80: rgba(var(--paper-rgb), 0.80);
    --paper-55: rgba(var(--paper-rgb), 0.55);
    --paper-35: rgba(var(--paper-rgb), 0.35);
    --paper-12: rgba(var(--paper-rgb), 0.14);
    --serif: "Fraunces", Georgia, serif;
    --sans: "Inter", system-ui, sans-serif;
    --display: "Archivo", "Inter", sans-serif; /* swiss/architectural display for the body below the hero */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --gutter: clamp(1.5rem, 6vw, 7rem);
    --maxw: 1480px;
    --img-gap: 2px; /* distância única entre imagens em todo o site */
  }

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

  html { scroll-behavior: smooth; }

  body {
    background: var(--off-white);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

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

  ::selection { background: var(--terra); color: var(--off-white); }

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

  .eyebrow {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--terra);
    display: inline-flex;
    align-items: center;
    gap: 1rem;
  }
  .eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--terra);
    display: inline-block;
  }

  /* ============ MENU — botão hambúrguer + sidebar esquerdo oculto ============ */
  /* Sem hero/header: a página começa na 1ª seção; respiro no topo p/ o botão. */
  #top { padding-top: clamp(2rem, 5vh, 3rem); }

  .menu-btn {
    position: fixed; top: clamp(1.1rem, 2.4vw, 1.6rem); left: clamp(1.1rem, 2.4vw, 1.6rem);
    z-index: 320; width: 48px; height: 48px; display: grid; place-items: center;
    background: var(--sb-bg); border: none; border-radius: 12px; cursor: pointer;
    box-shadow: 0 10px 26px -10px rgba(0,0,0,0.55);
    transition: transform 0.35s var(--ease), box-shadow 0.3s var(--ease), opacity 0.3s var(--ease);
  }
  .menu-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0,0,0,0.62); }
  .menu-btn:focus-visible { outline: 2px solid var(--sb-gold); outline-offset: 3px; }
  .menu-btn .bars { position: relative; width: 20px; height: 12px; }
  .menu-btn .bars span {
    position: absolute; left: 0; width: 100%; height: 2px; background: #fff;
    border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
  }
  .menu-btn .bars span:nth-child(1) { top: 0; }
  .menu-btn .bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
  .menu-btn .bars span:nth-child(3) { bottom: 0; }
  /* aberto: o hambúrguer some — fechar agora é pelo X dentro do sidebar */
  body.menu-open .menu-btn { opacity: 0; pointer-events: none; transform: scale(0.85); }

  .menu-scrim {
    position: fixed; inset: 0; z-index: 300; background: rgba(13,11,8,0.42);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease);
  }
  body.menu-open .menu-scrim { opacity: 1; pointer-events: auto; }

  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 310;
    width: min(300px, 88vw); height: 100svh;
    background: var(--sb-bg); color: var(--sb-ink);
    font-family: var(--mono);
    transform: translateX(-100%); transition: transform 0.55s var(--ease);
    display: flex; flex-direction: column;
    padding: clamp(4.2rem, 8vh, 5rem) clamp(1.5rem, 4vw, 2rem) clamp(1.2rem, 3vh, 1.6rem);
    box-shadow: 30px 0 80px -30px rgba(0,0,0,0.55);
  }
  body.menu-open .sidebar { transform: translateX(0); }

  /* botão X de fechar — canto superior direito, dentro do sidebar */
  .sidebar .sb-close {
    position: absolute; top: clamp(1rem, 2.6vh, 1.45rem); right: clamp(1rem, 3vw, 1.35rem);
    z-index: 2; width: 36px; height: 36px; display: grid; place-items: center;
    background: none; border: none; cursor: pointer; color: var(--sb-ink);
    border-radius: 9px; transition: color 0.2s var(--ease), background 0.2s var(--ease);
  }
  .sidebar .sb-close:hover, .sidebar .sb-close:focus-visible {
    color: var(--sb-gold); background: rgba(255,255,255,0.07); outline: none;
  }
  .sidebar .sb-close::before, .sidebar .sb-close::after {
    content: ""; position: absolute; width: 19px; height: 2px;
    background: currentColor; border-radius: 2px;
  }
  .sidebar .sb-close::before { transform: rotate(45deg); }
  .sidebar .sb-close::after { transform: rotate(-45deg); }

  /* seletor de idioma PT/EN/IT */
  .sidebar .sb-lang {
    flex: none; align-self: flex-start; display: inline-flex; align-items: center;
    border: 1px solid rgba(212,220,214,0.5); border-radius: 4px; padding: 3px 7px;
    margin-bottom: 1.4rem;
  }
  .sidebar .sb-lng {
    background: none; border: none; cursor: pointer; color: var(--sb-ink);
    font-family: var(--mono); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.04em;
    padding: 0 2px; opacity: 0.7; transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
  }
  .sidebar .sb-lng.on { opacity: 1; color: var(--sb-gold); }
  .sidebar .sb-lng:hover { opacity: 1; }
  .sidebar .sb-lang i { opacity: 0.55; font-style: normal; font-size: 0.62rem; }

  /* área de navegação (rola se PROJETOS expandir além da altura) */
  .sidebar .sb-navwrap {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;
  }
  .sidebar .sb-navwrap::-webkit-scrollbar { width: 6px; }
  .sidebar .sb-navwrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 3px; }
  .sidebar .sb-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin: auto 0; padding: 0.6rem 0; }

  /* itens de topo (HOME, PROJETOS, MARCAS...) */
  .sidebar .sb-item {
    display: inline-block; align-self: flex-start;
    background: none; border: none; cursor: pointer; text-align: left;
    font-family: var(--mono); font-size: 0.98rem; line-height: 1.1; font-weight: 400;
    letter-spacing: 0.02em; color: var(--sb-ink); text-decoration: none; text-transform: uppercase;
    text-shadow: -0.6px 0 rgba(255,70,100,0.30), 0.6px 0 rgba(40,220,228,0.26);
    transition: color 0.2s var(--ease);
  }
  .sidebar .sb-item:hover, .sidebar .sb-item:focus-visible { color: var(--sb-gold); outline: none; }
  .sidebar .sb-item.cur { color: var(--sb-gold); }

  /* grupo PROJETOS (acordeão) */
  .sidebar .sb-proj { display: flex; flex-direction: column; align-items: flex-start; }
  .sidebar .sb-proj.open > .sb-proj-toggle { color: var(--sb-gold); }

  /* painel de categorias */
  .sidebar .sb-submenu {
    display: none; flex-direction: column; align-items: flex-start; align-self: flex-start;
    margin: 0.7rem 0 0.2rem 0.6rem; background: var(--sb-panel); border-radius: 10px;
    padding: 1rem 0.9rem 1.05rem;
  }
  .sidebar .sb-proj.open > .sb-submenu { display: flex; }
  .sidebar .sb-cat {
    font-family: var(--mono); color: #100f10; text-decoration: none; cursor: pointer;
    font-size: 0.74rem; line-height: 1.18; font-weight: 500; letter-spacing: 0.01em;
    text-transform: uppercase; white-space: nowrap;
    padding: 3px 7px; margin: 0 -7px 0.62rem; border-radius: 2px;
    text-shadow: -0.5px 0 rgba(210,40,40,0.24), 0.5px 0 rgba(0,155,165,0.2);
    transition: background 0.12s var(--ease), color 0.12s var(--ease);
  }
  .sidebar .sb-cat:last-child { margin-bottom: 0; }
  .sidebar .sb-cat:hover, .sidebar .sb-cat.sel { background: #100f10; color: #fff; text-shadow: none; }

  /* rodapé: logo + caixa dourada + copyright */
  .sidebar .sb-bottom { flex: none; margin-top: 0.8rem; display: flex; flex-direction: column; }
  .sidebar .sb-logo-img { width: clamp(140px, 52%, 168px); height: auto; display: block; margin-bottom: 0.85rem; }
  .sidebar .sb-goldbox {
    width: clamp(140px, 52%, 168px); background: var(--sb-gold); border-radius: 10px;
    padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 2px;
  }
  .sidebar .sb-goldbox span {
    font-family: var(--mono); font-size: 0.56rem; line-height: 1.25; font-weight: 700;
    letter-spacing: 0.02em; color: var(--sb-bg); white-space: nowrap;
  }
  .sidebar .sb-copy {
    margin-top: 0.7rem; font-family: var(--mono); font-size: 0.5rem; font-weight: 700;
    letter-spacing: 0.03em; color: var(--sb-copper);
  }

  @media (prefers-reduced-motion: reduce) {
    .menu-btn, .menu-scrim, .sidebar, .menu-btn .bars span, .sidebar .sb-item, .sidebar .sb-cat, .sidebar .sb-lng, .sidebar .sb-close { transition: none !important; }
  }

  /* ============ FOOTER (Swiss monumental, dark) ============ */
  footer { background: var(--ink); color: var(--paper-80); padding-block: clamp(3rem, 6vw, 4.5rem); }
  .foot-top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 2.5rem; }
  .foot-mark { font-family: var(--sans); font-weight: 600; letter-spacing: 0.4em; color: var(--off-white); font-size: 1.3rem; }
  .foot-tag { margin-top: 0.9rem; font-family: var(--display); font-weight: 500; color: var(--paper-55); font-size: 1.05rem; letter-spacing: -0.01em; }
  .foot-cols { display: flex; gap: clamp(2.5rem, 6vw, 6rem); flex-wrap: wrap; }
  .foot-col { display: flex; flex-direction: column; gap: 0.9rem; }
  .foot-col .h { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-35); margin-bottom: 0.3rem; }
  .foot-col a { font-size: 0.92rem; color: var(--paper-80); transition: color 0.3s var(--ease); }
  .foot-col a:hover { color: var(--terra-soft); }
  .foot-bottom {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: 1.6rem;
    border-top: 1px solid var(--paper-12);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
    font-size: 0.74rem; letter-spacing: 0.06em; color: var(--paper-35);
  }


  /* ============ MOTION ENGINE ============ */
  /* Initial hidden states apply ONLY when JS is on (html.js), so content is
     never trapped invisible without JS. The engine runs for everyone. */
  html.js [data-anim] {
    opacity: 0;
    transition:
      opacity 1.15s var(--ease),
      transform 1.25s var(--ease),
      clip-path 1.25s var(--ease),
      filter 1.15s var(--ease);
    transition-delay: calc(var(--i, 0) * 0.085s);
    will-change: opacity, transform;
  }
  html.js [data-anim="fade-up"]    { transform: translateY(46px); }
  html.js [data-anim="fade-up-sm"] { transform: translateY(22px); }
  html.js [data-anim="fade"]       { transform: none; }
  html.js [data-anim="slide-left"] { transform: translateX(-54px); }
  html.js [data-anim="slide-right"]{ transform: translateX(54px); }
  html.js [data-anim="scale-in"]   { transform: scale(0.92); }
  html.js [data-anim="blur-in"]    { transform: translateY(28px); filter: blur(16px); }
  html.js [data-anim="clip-up"]    { clip-path: inset(0 0 102% 0); transform: translateY(0.32em); }
  html.js [data-anim="curtain"]    { clip-path: inset(0 100% 0 0); opacity: 1; }
  html.js [data-anim="curtain-up"] { clip-path: inset(102% 0 0 0); opacity: 1; }
  html.js [data-anim="line-x"]     { transform: scaleX(0); transform-origin: left; opacity: 1; }
  html.js [data-anim="line-y"]     { transform: scaleY(0); transform-origin: top;  opacity: 1; }

  /* Trigger is decoupled from the effect: we observe the SECTION (never clipped,
     so the IntersectionObserver always reports it) and reveal its children. This
     fixes clip-path effects whose zeroed area made the observer never fire. */
  html.js [data-reveal].seen [data-anim] {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
    filter: none;
  }

  /* continuous scroll parallax — applied to children so it never fights the
     reveal transform on the wrapper */
  html.js [data-parallax] { will-change: transform; }

  /* ============ SCROLL PROGRESS ============ */
  .scroll-prog {
    position: fixed; top: 0; left: 0; right: 0;
    height: 2px; z-index: 160;
    transform: scaleX(0); transform-origin: left;
    background: linear-gradient(90deg, var(--terra), var(--terra-soft));
    pointer-events: none;
  }

  /* ============ FILM GRAIN ============ */
  .grain {
    position: fixed; inset: -120%;
    z-index: 70; pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    animation: grainShift 7s steps(6) infinite;
    mix-blend-mode: multiply;
  }
  @keyframes grainShift {
    0%{transform:translate(0,0)} 16%{transform:translate(-4%,3%)} 33%{transform:translate(3%,-4%)}
    50%{transform:translate(-3%,2%)} 66%{transform:translate(4%,3%)} 83%{transform:translate(-2%,-3%)} 100%{transform:translate(0,0)}
  }

  /* ============ FOOTER — oversized mark (serif, top-to-bottom fade) ============ */
  .foot-mega {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(4rem, 18vw, 16rem); line-height: 0.82;
    letter-spacing: -0.03em; color: var(--off-white);
    margin-top: clamp(2.5rem, 6vw, 5rem); overflow: hidden;
    white-space: nowrap;
  }
  .foot-mega > span {
    display: inline-block;
    background: linear-gradient(180deg, rgb(var(--paper-rgb)) 0%, rgba(var(--paper-rgb), 0.38) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* ============ REDUCED MOTION ============ */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    * { scroll-behavior: auto !important; }
  }


  /* ===================== PROJETOS (mosaico editorial — sketch 007 · D) ===================== */
  #projetos { padding-block: clamp(3rem, 7vh, 6rem); position: relative; }
  #projetos .pj-eyebrow { display: flex; justify-content: space-between; align-items: end; gap: 2rem;
    border-top: 2px solid var(--ink); padding-top: 1rem; margin-bottom: clamp(1.5rem, 4vh, 2.4rem); }
  #projetos .pj-meta { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.06em;
    color: var(--ink-55); font-variant-numeric: tabular-nums; }
  /* grid 3x3 exato (spec aprovada) */
  #projetos { --pj-gap: var(--img-gap); } /* espaco unico entre imagens/grades — igual nas 3 secoes */
  #projetos .mosaico { display: grid; grid-template-columns: 36fr 28fr 36fr; grid-template-rows: 1fr 1fr 1fr;
    gap: var(--pj-gap); aspect-ratio: 1 / 1; }
  #projetos .mosaico + .mosaico, #projetos .dgrid3 + .mosaico { margin-top: var(--pj-gap); }
  #projetos .mosaico > * { min-width: 0; min-height: 0; }
  #projetos .m-top    { grid-column: 1 / 3; grid-row: 1 / 2; }
  #projetos .m-tall   { grid-column: 3 / 4; grid-row: 1 / 3; }
  #projetos .m-side   { grid-column: 1 / 2; grid-row: 2 / 4; }
  #projetos .m-center { grid-column: 2 / 3; grid-row: 2 / 3; }
  #projetos .m-bottom { grid-column: 2 / 4; grid-row: 3 / 4; }
  #projetos .dgrid3 { display: grid; grid-template-columns: 64fr 36fr; gap: var(--pj-gap); margin-top: var(--pj-gap); min-height: 320px; }
  #projetos .dgrid3 > * { min-width: 0; }
  /* cards */
  #projetos .dcard { position: relative; overflow: hidden; background: var(--off-white); cursor: pointer; display: block; }
  #projetos .ph { position: absolute; inset: 0; background: var(--ink); --h: 28;
    background-image:
      repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 7%),
      linear-gradient(155deg, hsl(var(--h) 24% 17%) 0%, hsl(calc(var(--h) + 6) 30% 26%) 48%, hsl(calc(var(--h) + 10) 38% 40%) 100%); }
  #projetos .ph::after { content: ""; position: absolute; inset: 0;
    background: radial-gradient(120% 80% at 70% 20%, rgba(255,236,210,0.18), transparent 55%); }
  #projetos .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
  #projetos .dcard:hover .ph img { transform: scale(1.05); }
  #projetos .ph-mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif);
    font-weight: 300; font-size: clamp(2rem, 5vw, 4.5rem); color: rgba(255,255,255,0.09); letter-spacing: -0.03em; }
  #projetos .ph-label { position: absolute; bottom: 0.85rem; left: 1rem; z-index: 2; font-size: 0.6rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); font-family: var(--display); font-weight: 500; }
  #projetos .ovl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0.9rem 1.05rem;
    background: linear-gradient(to top, rgba(13,11,8,0.88), rgba(13,11,8,0.05) 74%, transparent);
    color: var(--off-white); display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
  #projetos .ovl .nm { font-family: var(--serif); font-weight: 500; font-size: clamp(0.95rem,1.6vw,1.4rem); line-height: 1.05; }
  #projetos .ovl .lc { font-family: var(--display); font-size: 0.58rem; letter-spacing: 0.1em; opacity: 0.82; margin-top: 0.25rem; }
  #projetos .ovl .yr { font-family: var(--display); font-size: 0.68rem; opacity: 0.8; font-variant-numeric: tabular-nums; }
  #projetos .rn { position: absolute; top: 0.7rem; left: 0.9rem; z-index: 4; font-family: var(--display); font-weight: 700;
    font-size: 0.6rem; letter-spacing: 0.16em; color: #fff; mix-blend-mode: difference; }
  #projetos .pj-tag { position: absolute; top: 0.7rem; right: 0.8rem; z-index: 4; background: var(--terra); color: #fff;
    font-family: var(--display); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.3rem 0.5rem; font-weight: 600; }
  /* bloco de vídeo */
  #projetos .pj-video .vlabel { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center; gap: 0.2rem; padding: 0 clamp(1.4rem,3vw,2.6rem);
    background: linear-gradient(90deg, rgba(13,11,8,0.55), rgba(13,11,8,0.12) 60%, transparent); color: var(--off-white); }
  #projetos .pj-video .play { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.55); border-radius: 50%;
    display: grid; place-items: center; margin-bottom: 0.7rem; transition: background 0.3s var(--ease); }
  #projetos .pj-video .play::after { content: ""; border-left: 11px solid var(--off-white); border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; margin-left: 3px; }
  #projetos .pj-video:hover .play { background: rgba(255,255,255,0.16); }
  #projetos .pj-video .l1 { font-family: var(--display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; }
  #projetos .pj-video .l2 { font-family: var(--display); font-size: 0.64rem; letter-spacing: 0.14em; opacity: 0.7; }
  /* painel de texto branco */
  #projetos .pj-text { background: #fff; padding: clamp(1.3rem,2.2vw,2rem); display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start; text-align: left; gap: 0.9rem; }
  #projetos .pj-text .hd { font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase; }
  #projetos .pj-text .sm { font-size: 0.8rem; line-height: 1.55; color: var(--ink-55); max-width: 32ch; }
  #projetos .pj-text .sm em { font-style: normal; color: var(--terra); font-weight: 500; }
  #projetos .pj-text .big { font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem,1.9vw,1.8rem);
    line-height: 1.06; letter-spacing: -0.02em; text-transform: uppercase; }
  /* painel navy */
  #projetos .pj-navy { background: #1B2740; color: #E9EBF1; padding: clamp(1.3rem,2.2vw,2rem); display: flex;
    flex-direction: column; justify-content: center; gap: 0.85rem; }
  #projetos .pj-navy .pre { font-family: var(--display); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(233,235,241,0.5); }
  #projetos .pj-navy .big { font-family: var(--display); font-weight: 800; font-size: clamp(1.05rem,1.6vw,1.5rem); line-height: 1.12; text-transform: uppercase; }
  #projetos .pj-navy .sub { font-size: 0.76rem; line-height: 1.5; color: rgba(233,235,241,0.68); max-width: 30ch; }
  #projetos .pj-navy a { font-family: var(--display); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--terra-soft); margin-top: 0.2rem; width: fit-content;
    border-bottom: 1px solid rgba(244,113,121,0.4); padding-bottom: 0.25rem; transition: color 0.3s var(--ease); }
  #projetos .pj-navy a:hover { color: #fff; }
  /* citação clara */
  #projetos .pj-quote { background: var(--off-white); padding: clamp(1.5rem,2.8vw,2.6rem); display: flex;
    flex-direction: column; justify-content: center; gap: 1.1rem; }
  #projetos .pj-quote .pre { font-family: var(--display); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terra); }
  #projetos .pj-quote q { quotes: none; font-family: var(--display); font-weight: 800; font-size: clamp(1.2rem,1.9vw,1.7rem);
    line-height: 1.18; letter-spacing: -0.02em; text-transform: uppercase; }
  #projetos .pj-quote .att { font-family: var(--serif); font-style: italic; color: var(--ink-55); font-size: 0.92rem; }
  @media (max-width: 760px) {
    #projetos .mosaico { grid-template-columns: 1fr; grid-template-rows: none; aspect-ratio: auto; }
    #projetos .mosaico > * { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 220px; }
    #projetos .dgrid3 { grid-template-columns: 1fr; }
    #projetos .pj-text, #projetos .pj-navy, #projetos .pj-quote { min-height: auto; }
  }

  /* ===================== CELEBRAR (portfólio em linha — sketch 008 · A) ===================== */
  #celebrar { padding-block: clamp(4rem, 9vh, 7rem); --coral: #ef4854; --pf-green: #9AA597; }
  #celebrar .pf-eyebrow { font-family: var(--display); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--coral); display: flex; align-items: center; gap: 0.9rem;
    margin-bottom: clamp(1.6rem, 4vh, 2.6rem); }
  #celebrar .pf-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--coral); }
  /* SPEC EXATA — padrão de linha (1 linha = 1 projeto) */
  #celebrar .portfolio { display: grid; grid-template-columns: 24fr 56fr 20fr; grid-template-rows: repeat(6, auto);
    column-gap: 24px; row-gap: var(--img-gap); }
  #celebrar .pf-text { grid-column: 1 / 2; grid-row: 1 / 3; align-self: start;
    border-left: 2px solid var(--pf-green); padding-left: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
  #celebrar .pf-text h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem,2vw,2rem);
    color: var(--coral); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.04; }
  #celebrar .pf-text p { color: var(--ink-55); font-size: 0.9rem; line-height: 1.65; }
  #celebrar .pf-text blockquote { font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 1.05rem; line-height: 1.42; }
  #celebrar .pf-text hr { width: 100%; height: 0; border: none; border-top: 1px solid var(--ink-12); margin: 0.4rem 0; }
  #celebrar .pf-text cite { display: block; font-style: normal; font-family: var(--display); font-size: 0.8rem; color: var(--ink-55); letter-spacing: 0.04em; margin-top: 0.7rem; }
  /* imagens 16/9, cover, alinhadas na mesma margem esquerda (col 2) */
  #celebrar .pf-photo { grid-column: 2 / 3; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); --h: 28;
    background-image:
      repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 8%),
      linear-gradient(150deg, hsl(var(--h) 22% 18%) 0%, hsl(calc(var(--h) + 6) 30% 27%) 50%, hsl(calc(var(--h) + 10) 38% 42%) 100%); }
  #celebrar .pf-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 72% 18%, rgba(255,236,210,0.16), transparent 55%); }
  #celebrar .pf-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.85s var(--ease); }
  /* único efeito no hover: leve zoom da imagem (sem máscara nem texto) */
  #celebrar .pf-photo:hover img, #celebrar .pf-photo:focus-visible img { transform: scale(1.06); }
  #celebrar .pf-photo .ph-mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif);
    font-weight: 300; font-size: clamp(1.6rem,4vw,3rem); color: rgba(255,255,255,0.09); letter-spacing: -0.03em; }
  #celebrar .pf-photo .ph-label { position: absolute; bottom: 0.7rem; left: 0.9rem; font-size: 0.56rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: rgba(255,255,255,0.55); font-family: var(--display); font-weight: 500; }
  /* legenda fixa ao lado da imagem (col 3) */
  #celebrar .pf-cap { grid-column: 3 / 4; align-self: center; display: flex; flex-direction: column; gap: 0.45rem; }
  #celebrar .pf-cap .cc { font-family: var(--display); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-35); }
  #celebrar .pf-cap .cn { font-family: var(--display); font-weight: 800; font-size: clamp(0.95rem,1.2vw,1.2rem);
    letter-spacing: 0.02em; text-transform: uppercase; color: var(--coral); line-height: 1.12; }
  #celebrar .pf-cap .cy { font-style: italic; font-size: 0.8rem; color: var(--ink-55); }
  #celebrar .r1 { grid-row: 1; } #celebrar .r2 { grid-row: 2; } #celebrar .r3 { grid-row: 3; }
  #celebrar .r4 { grid-row: 4; } #celebrar .r5 { grid-row: 5; } #celebrar .r6 { grid-row: 6; }
  @media (max-width: 720px) {
    #celebrar .portfolio { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 28px; }
    #celebrar .portfolio > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  }

  /* ===================== CASE MIRAI (tira vertical de faixas — sketch 009) ===================== */
  #case-mirai { padding-block: clamp(4rem, 9vh, 7rem); --coral: #ef4854; }
  #case-mirai .mirai { display: grid; row-gap: var(--img-gap); }
  #case-mirai .faixa { display: grid; gap: var(--img-gap); }
  #case-mirai .faixa-1 { grid-template-columns: 1fr 1fr 1fr; }
  #case-mirai .faixa-2 { grid-template-columns: 40fr 60fr; align-items: stretch; }
  #case-mirai .faixa-2 .ph { align-self: start; }
  #case-mirai .faixa-3, #case-mirai .faixa-4 { grid-template-columns: 1fr; }
  #case-mirai .faixa-5 { grid-template-columns: 75fr 25fr; align-items: stretch; }
  #case-mirai .faixa-6 { grid-template-columns: 1fr 1fr 1fr; }
  #case-mirai .faixa-7 { grid-template-columns: 25fr 75fr; align-items: stretch; }
  #case-mirai .fill { aspect-ratio: auto !important; }
  #case-mirai .ph { position: relative; overflow: hidden; background: var(--ink); --h: 28;
    background-image:
      repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 9%),
      linear-gradient(150deg, hsl(var(--h) 22% 17%) 0%, hsl(calc(var(--h) + 6) 30% 26%) 50%, hsl(calc(var(--h) + 10) 38% 41%) 100%); }
  #case-mirai .ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 70% 18%, rgba(255,236,210,0.15), transparent 55%); }
  #case-mirai .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.85s var(--ease); }
  #case-mirai .ph:hover img { transform: scale(1.06); }
  /* dica de clique: mouse branco (botão esquerdo destacado) que pulsa ao passar o mouse */
  #case-mirai .ph .tap-hint { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: clamp(46px, 6vw, 62px); height: clamp(46px, 6vw, 62px); opacity: 0; pointer-events: none;
    transition: opacity 0.35s var(--ease); }
  #case-mirai .ph:hover .tap-hint, #case-mirai .ph:focus-within .tap-hint { opacity: 1; }
  #case-mirai .ph .tap-hint::before { content: ""; position: absolute; inset: 0; transform-origin: 50% 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M13 9V1.07c3.94.49 7 3.85 7 7.93zM6.34 20.66A8 8 0 0 1 4 15v-4h16v4c0 2.12-.84 4.16-2.34 5.66A8 8 0 0 1 12 23c-2.12 0-4.16-.84-5.66-2.34M11 9V1.07A8.01 8.01 0 0 0 4.25 7C4.09 7.64 4 8.31 4 9zM6.34 7C6.82 5.65 7.78 4.5 9 3.81V7z'/%3E%3C/svg%3E") center/contain no-repeat;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.6)); }
  #case-mirai .ph:hover .tap-hint::before { animation: tap-press 1.3s var(--ease) infinite; }
  #case-mirai .ph .tap-hint::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%;
    border: 2px solid rgba(255,255,255,0.9); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  #case-mirai .ph:hover .tap-hint::after { animation: tap-ripple 1.3s var(--ease) infinite; }
  @keyframes tap-press { 0%, 100% { transform: translateY(0) scale(1); } 38% { transform: translateY(3px) scale(0.88); } 56% { transform: translateY(3px) scale(0.88); } }
  @keyframes tap-ripple { 0%, 32% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 44% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.85); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); } }
  #case-mirai .ph .lbl { position: absolute; bottom: 0.7rem; left: 0.9rem; font-size: 0.58rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: rgba(255,255,255,0.6); font-family: var(--display); font-weight: 500; }
  #case-mirai .ph .mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif);
    font-weight: 300; font-size: clamp(1.4rem,3.5vw,3rem); color: rgba(255,255,255,0.08); }
  #case-mirai .a-4x5 { aspect-ratio: 4 / 5; } #case-mirai .a-3x4 { aspect-ratio: 3 / 4; }
  #case-mirai .a-21x9 { aspect-ratio: 21 / 9; } #case-mirai .a-16x9 { aspect-ratio: 16 / 9; } #case-mirai .a-2x3 { aspect-ratio: 2 / 3; }
  #case-mirai .creditos { position: relative; background: #fff; padding: clamp(1.5rem,3vw,2.6rem);
    padding-right: clamp(2.6rem,4vw,3.6rem); display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start; gap: 0.55rem; }
  #case-mirai .creditos .cc { font-family: var(--display); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-35); }
  #case-mirai .creditos .cn { font-family: var(--display); font-weight: 800; font-size: clamp(2rem,4vw,3.4rem);
    letter-spacing: 0.01em; text-transform: uppercase; color: var(--coral); line-height: 1; }
  #case-mirai .creditos .cy { font-style: italic; font-size: 0.9rem; color: var(--ink-55); margin-bottom: 0.4rem; }
  #case-mirai .creditos hr { width: 48px; height: 0; border: none; border-top: 1px solid var(--ink-12); margin: 0.7rem 0 1rem; }
  #case-mirai .creditos .cred { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.7rem; }
  #case-mirai .creditos .cl { font-family: var(--display); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral); }
  #case-mirai .creditos .cv { font-size: 0.9rem; color: var(--ink-55); line-height: 1.4; }
  #case-mirai .creditos .cv a { color: var(--coral); text-decoration: none; }
  #case-mirai .creditos .cv a:hover { text-decoration: underline; }
  #case-mirai .creditos .vmark { position: absolute; top: 50%; right: clamp(0.7rem,1.4vw,1.2rem); transform: translateY(-50%);
    writing-mode: vertical-rl; font-family: var(--display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.32em;
    text-transform: lowercase; color: var(--coral); }
  @media (max-width: 720px) {
    #case-mirai .faixa-1, #case-mirai .faixa-6 { grid-template-columns: 1fr 1fr; }
    #case-mirai .faixa-2, #case-mirai .faixa-5, #case-mirai .faixa-7 { grid-template-columns: 1fr; }
    #case-mirai .fill { aspect-ratio: 16 / 9 !important; }
    #case-mirai .creditos { padding-right: 2.6rem; }
  }

  /* ===================== LIGHTBOX (clicar na imagem → abre na página, fundo preto) ===================== */
  #projetos .ph img, #celebrar .pf-photo img, #case-mirai .ph img { cursor: zoom-in; }
  .lightbox { position: fixed; inset: 0; z-index: 500; background: #000;
    display: flex; align-items: center; justify-content: center; padding: clamp(0.5rem, 3vw, 2.5rem);
    opacity: 0; visibility: hidden; transition: opacity 0.28s var(--ease), visibility 0.28s; cursor: zoom-out; }
  .lightbox.open { opacity: 1; visibility: visible; }
  .lightbox .lb-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: default;
    box-shadow: 0 24px 70px rgba(0,0,0,0.6); }
  .lb-close { position: fixed; top: 16px; right: 20px; z-index: 2; background: none; border: none; color: #fff;
    font-size: 2.1rem; line-height: 1; cursor: pointer; opacity: 0.75; transition: opacity 0.2s; }
  .lb-close:hover { opacity: 1; }

  /* ===================== SOBRE / QUEM SOMOS (réplica fiel ultima.png — sketch 010 · B) =====================
     Paleta própria (amostrada da referência): fundo claro + cards navy + logo dourado +
     pipes/accents cobre. Auto-contida — independente do customizador de tema. */
  #sobre {
    --sb-navy: #242638;
    --sb-ink: #242638;
    --sb-ink-80: rgba(36, 38, 56, 0.86);
    --sb-gold: #F6BF4A;
    --sb-copper: #C6824C;
    --sb-radius: 10px;
    background: #E5E5E7;
    color: var(--sb-ink);
    padding: clamp(3.5rem, 8vw, 8rem) 0;
  }
  #sobre .sb-p { font-family: var(--sans); color: var(--sb-ink-80); font-size: clamp(0.86rem, 1vw, 0.95rem); line-height: 1.62; }
  #sobre .sb-p + .sb-p { margin-top: 0.85rem; }
  #sobre .sb-p em { font-style: italic; }

  #sobre .sb-head { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: stretch; }
  #sobre .sb-bar { width: 3px; background: var(--sb-copper); align-self: stretch; }
  #sobre .sb-stmt { font-family: var(--display); font-weight: 800; text-transform: uppercase;
    font-size: clamp(1.02rem, 1.65vw, 1.55rem); line-height: 1.2; letter-spacing: 0.004em; color: var(--sb-ink); }
  #sobre .sb-sub { font-family: var(--display); font-weight: 700; text-transform: uppercase;
    font-size: clamp(0.9rem, 1.3vw, 1.1rem); line-height: 1.22; letter-spacing: 0.02em; color: var(--sb-ink); align-self: center; }

  /* região 1 — card Filippo + texto */
  #sobre .sb-r1 { display: grid; grid-template-columns: 27% 1fr; gap: clamp(1.8rem, 4vw, 4rem); align-items: start; }
  #sobre .sb-card { background: var(--sb-navy); border-radius: var(--sb-radius); padding: 1.5rem 1.4rem 1.7rem;
    text-align: center; box-shadow: 0 6px 20px rgba(36, 38, 56, 0.10); }
  #sobre .sb-kicker { color: var(--sb-gold); font-family: var(--display); font-weight: 600; font-size: 0.6rem;
    letter-spacing: 0.36em; text-transform: uppercase; }
  #sobre .sb-logo { color: var(--sb-gold); font-family: var(--display); font-weight: 800; font-size: 1.85rem;
    letter-spacing: 0.01em; margin: 0.35rem 0 1.15rem; }
  #sobre .sb-portrait { width: 100%; aspect-ratio: 1 / 1.04; border-radius: 6px; overflow: hidden; background: #191b29;
    display: grid; place-items: center;
    background-image: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255, 255, 255, 0.03) 12px 24px); }
  #sobre .sb-portrait img { width: 100%; height: 100%; object-fit: cover; }
  #sobre .sb-portrait .sb-pt { color: rgba(255, 255, 255, 0.34); font-family: var(--display); font-size: 0.58rem;
    letter-spacing: 0.24em; text-transform: uppercase; text-align: center; line-height: 1.5; }
  #sobre .sb-cap { color: rgba(255, 255, 255, 0.82); font-family: var(--serif); font-style: italic; font-size: 0.95rem; margin-top: 1rem; }
  #sobre .sb-r1-text { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 0.15rem; }
  #sobre .sb-block { display: flex; flex-direction: column; gap: 0.9rem; }

  /* região 2 — banda "Luz pensada" + lead */
  #sobre .sb-band { background: var(--sb-navy); border-radius: var(--sb-radius); width: 66%;
    margin: clamp(2rem, 4vw, 3rem) 0 0 auto; padding: 1.1rem 1.7rem; display: flex; align-items: center; gap: 1.4rem;
    box-shadow: 0 6px 20px rgba(36, 38, 56, 0.10); }
  #sobre .sb-icon { flex: none; width: 60px; height: 60px; color: var(--sb-copper); }
  #sobre .sb-btxt { color: var(--sb-copper); font-family: var(--display); font-weight: 800; text-transform: uppercase;
    font-size: clamp(1rem, 1.85vw, 1.5rem); line-height: 1.1; letter-spacing: 0.01em; }
  #sobre .sb-lead { max-width: 60%; margin-top: clamp(1.6rem, 3vw, 2.3rem); }

  /* região 2b — foto equipe + colunas justificadas */
  #sobre .sb-r2b { display: grid; grid-template-columns: 42% 1fr; gap: clamp(1.5rem, 3vw, 3rem);
    margin: clamp(1.8rem, 3.5vw, 3rem) 0; align-items: stretch; }
  #sobre .sb-team { background: var(--sb-navy); border-radius: var(--sb-radius); min-height: 250px; display: flex;
    align-items: flex-end; padding: 1.5rem; overflow: hidden;
    background-image: repeating-linear-gradient(135deg, transparent 0 16px, rgba(255, 255, 255, 0.035) 16px 32px);
    box-shadow: 0 6px 20px rgba(36, 38, 56, 0.10); }
  #sobre .sb-team img { width: 100%; height: 100%; object-fit: cover; }
  #sobre .sb-team .sb-lbl { color: #fff; font-family: var(--display); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; font-size: 1rem; line-height: 1.18; }
  #sobre .sb-cols .sb-p { text-align: justify; font-size: clamp(0.8rem, 0.95vw, 0.85rem); line-height: 1.6; }
  #sobre .sb-cols .sb-p + .sb-p { margin-top: 0.8rem; }

  /* região 3 — fecho */
  #sobre .sb-r3 { margin-top: clamp(1.8rem, 3.5vw, 3rem); display: flex; flex-direction: column; gap: 1rem; }
  #sobre .sb-r3 .sb-p2 { text-align: justify; }

  @media (max-width: 860px) {
    #sobre .sb-r1, #sobre .sb-r2b { grid-template-columns: 1fr; }
    #sobre .sb-card { max-width: 360px; margin: 0 auto; }
    #sobre .sb-band, #sobre .sb-lead { width: 100%; max-width: 100%; }
    #sobre .sb-team { min-height: 210px; }
  }
  @media (max-width: 520px) {
    #sobre .sb-band { flex-direction: column; text-align: center; }
  }

  /* ===================== HOME — mosaico full-screen de categorias (sketch 011-A) ===================== */
  html.home { scroll-snap-type: y proximity; }
  #home { --pj-gap: var(--img-gap); }
  #home .home-set { min-height: 100svh; display: grid; gap: var(--pj-gap);
    grid-template-columns: 36fr 28fr 36fr; grid-template-rows: 1fr 1fr 1fr; scroll-snap-align: start; }
  /* mesma distância entre os 2 blocos que há entre os quadros de cada bloco */
  #home .home-set + .home-set { margin-top: var(--pj-gap); }
  #home .home-set > * { min-width: 0; min-height: 0; }
  #home .m-top { grid-column: 1 / 3; grid-row: 1 / 2; }
  #home .m-tall { grid-column: 3 / 4; grid-row: 1 / 3; }
  #home .m-side { grid-column: 1 / 2; grid-row: 2 / 4; }
  #home .m-center { grid-column: 2 / 3; grid-row: 2 / 3; }
  #home .m-bottom { grid-column: 2 / 4; grid-row: 3 / 4; }
  #home .dcard { position: relative; overflow: hidden; background: var(--ink); cursor: pointer; display: block; }
  #home .ph { position: absolute; inset: 0; background: var(--ink); --h: 28;
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 7%),
      linear-gradient(155deg, hsl(var(--h) 24% 16%) 0%, hsl(calc(var(--h) + 6) 30% 25%) 48%, hsl(calc(var(--h) + 10) 38% 40%) 100%); }
  #home .ph::after { content:""; position:absolute; inset:0; background: radial-gradient(120% 80% at 70% 20%, rgba(255,236,210,0.16), transparent 55%); }
  #home .ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease); }
  #home .dcard:hover .ph img { transform: scale(1.05); }
  /* overlay: máscara preta translúcida + texto centralizado, visível só no hover/foco */
  #home .ovl { position:absolute; inset:0; z-index:3; padding: clamp(1rem,2vw,1.8rem);
    background: rgba(13,11,8,0.5);
    color: var(--off-white); display:flex; flex-direction:column; justify-content:center; align-items:center;
    text-align:center; gap:0.35rem; opacity:0; transition: opacity 0.4s var(--ease); }
  #home .dcard:hover .ovl, #home .dcard:focus-visible .ovl { opacity:1; }
  #home .ovl .nm { font-family: var(--serif); font-weight:500; font-size: clamp(1.2rem,1.9vw,2.1rem); line-height:1.05; }
  #home .ovl .tg { font-family: var(--serif); font-style:italic; font-weight:300; font-size: clamp(0.82rem,1vw,1.1rem);
    color: rgba(255,255,255,0.82); }
  #home .pj-text { background:#fff; padding: clamp(1.3rem,2.2vw,2.4rem); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:0.9rem; }
  #home .pj-text .hd { font-family: var(--display); font-weight:800; font-size:1.05rem; letter-spacing:0.14em; text-transform:uppercase; }
  #home .pj-text .sm { font-size:0.82rem; line-height:1.55; color: var(--ink-55); }
  #home .pj-text .sm em { font-style:normal; color: inherit; font-weight:500; }
  #home .pj-text .big { font-family: var(--display); font-weight:800; font-size: clamp(1.1rem,1.7vw,1.7rem); line-height:1.08; letter-spacing:-0.02em; text-transform:uppercase; }
  #home .pj-navy { background:#1B2740; color:#E9EBF1; padding: clamp(1.3rem,2.2vw,2.4rem); display:flex; flex-direction:column; justify-content:center; gap:0.85rem; }
  #home .pj-navy .pre { font-family: var(--display); font-size:0.64rem; letter-spacing:0.18em; text-transform:uppercase; color: rgba(233,235,241,0.5); }
  #home .pj-navy .big { font-family: var(--display); font-weight:800; font-size: clamp(1.05rem,1.6vw,1.6rem); line-height:1.12; text-transform:uppercase; }
  #home .pj-navy .sub { font-size:0.78rem; line-height:1.5; color: rgba(233,235,241,0.68); }
  #home .pj-navy a { font-family: var(--display); font-weight:700; font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color: var(--sb-gold); margin-top:0.2rem; width:fit-content; transition: color 0.3s var(--ease); }
  #home .pj-navy a:hover { color:#fff; }
  .setdots { position: fixed; right: clamp(0.8rem,2vw,1.5rem); top:50%; transform: translateY(-50%); z-index:150; display:flex; flex-direction:column; gap:0.6rem; }
  .setdots button { width:9px; height:9px; border-radius:50%; border:1px solid var(--ink-35); background:transparent; cursor:pointer; padding:0; transition: all 0.25s var(--ease); }
  .setdots button.on { background: var(--terra); border-color: var(--terra); transform: scale(1.25); }
  @media (max-width: 720px) {
    html.home { scroll-snap-type: none; }
    #home .home-set { min-height: 0; grid-template-columns: 1fr; grid-template-rows: none; }
    #home .home-set > * { grid-column: auto !important; grid-row: auto !important; min-height: 68vw; }
    #home .pj-text, #home .pj-navy { min-height: auto; padding-block: 2.6rem; }
    .setdots { display: none; }
  }

  /* categoria/projeto: foto vira link clicável (sem cursor zoom) */
  #celebrar .pf-photo { display: block; }
  #celebrar a.pf-photo img, #home .ph img { cursor: pointer; }

  /* ===================== BLOG — listagem + post (layout do sketch 005-contato · A) =====================
     Fio superior + kicker mono numerado + declaração gigante em serif; as "linhas de dados"
     do contato viram linhas de post (listagem) e ficha do artigo (post). */
  #blog, #post { padding-block: clamp(4rem, 9vh, 7rem); --coral: #ef4854; }

  /* fio + kicker (compartilhado) */
  .bl-rule { border-top: 2px solid var(--ink); padding-top: 1rem; display: flex;
    justify-content: space-between; align-items: baseline; gap: 1rem;
    margin-bottom: clamp(1.8rem, 4vh, 2.8rem); }
  .bl-kicker { font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.28em; text-transform: uppercase; color: var(--coral); }
  .bl-back { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-55); transition: color 0.2s var(--ease); }
  .bl-back:hover { color: var(--coral); }

  /* declaração gigante da listagem */
  #blog .bl-stmt { font-family: var(--serif); font-weight: 600;
    font-size: clamp(2.6rem, 7vw, 6rem); line-height: 0.94; letter-spacing: -0.035em;
    max-width: 12ch; margin-bottom: clamp(2.2rem, 5vh, 3.6rem); }
  #blog .bl-stmt em, #post .po-title em { font-style: normal; color: var(--coral); }

  /* linhas de posts (foto + data/título/excerpt + seta) */
  #blog .bl-row { display: grid; grid-template-columns: clamp(120px, 16vw, 190px) 1fr auto;
    gap: clamp(1rem, 2.5vw, 2.2rem); align-items: center;
    border-top: 1px solid var(--ink-12); padding-block: clamp(1.1rem, 2.4vh, 1.7rem); }
  #blog .bl-row:last-child { border-bottom: 1px solid var(--ink-12); }
  #blog .bl-ph { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); display: block; }
  #blog .bl-ph img { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform 0.85s var(--ease); }
  #blog .bl-row:hover .bl-ph img { transform: scale(1.06); }
  #blog .bl-info { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
  #blog .bl-date { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--ink-55); }
  #blog .bl-title { font-family: var(--display); font-weight: 800;
    font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1.1; letter-spacing: -0.01em;
    transition: color 0.25s var(--ease); }
  #blog .bl-row:hover .bl-title { color: var(--coral); }
  #blog .bl-excerpt { font-size: 0.9rem; line-height: 1.55; color: var(--ink-55); max-width: 62ch; }
  #blog .bl-arrow { font-family: var(--mono); font-size: 1.15rem; color: var(--coral);
    opacity: 0; transform: translateX(-8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
  #blog .bl-row:hover .bl-arrow { opacity: 1; transform: none; }

  /* post — cabeçalho: título gigante + ficha (espelho do contato) */
  #post .po-head { display: grid; grid-template-columns: 1.4fr 1fr;
    gap: clamp(2.5rem, 6vw, 5rem); align-items: end; margin-bottom: clamp(2.4rem, 5vh, 4rem); }
  #post .po-title { font-family: var(--serif); font-weight: 600;
    font-size: clamp(2.2rem, 5.5vw, 4.6rem); line-height: 0.96; letter-spacing: -0.035em; }
  #post .po-ficha { display: flex; flex-direction: column; }
  #post .po-row { border-top: 1px solid var(--ink-12); padding-top: 0.7rem;
    margin-bottom: 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; }
  #post .po-row:last-child { margin-bottom: 0; }
  #post .po-row .k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--ink-55); }
  #post .po-row .v { font-family: var(--display); font-weight: 700; font-size: 1rem; }

  /* post — corpo em coluna de leitura */
  #post .po-body { max-width: 68ch; }
  #post .po-body p { font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.75;
    color: var(--ink-80); margin-bottom: 1.2rem; }
  #post .po-body h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase;
    font-size: 1.02rem; letter-spacing: 0.03em; margin: 2.2rem 0 1rem; color: var(--ink); }
  #post .po-body figure { margin: 2rem 0; }
  #post .po-body figure img { width: 100%; display: block; }
  #post .po-body figcaption { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-35); margin-top: 0.55rem; }

  /* post não encontrado */
  #post .po-missing { border-top: 1px solid var(--ink-12); padding-top: 1.2rem; display: flex;
    flex-direction: column; gap: 0.8rem; }
  #post .po-missing .cn { font-family: var(--display); font-weight: 800; font-size: 1.3rem; text-transform: uppercase; }
  #post .po-missing a { color: var(--coral); font-family: var(--mono); font-size: 0.72rem;
    letter-spacing: 0.12em; text-transform: uppercase; }

  @media (max-width: 760px) {
    #blog .bl-row { grid-template-columns: 96px 1fr; }
    #blog .bl-arrow { display: none; }
    #blog .bl-excerpt { display: none; }
    #post .po-head { grid-template-columns: 1fr; align-items: start; gap: 1.8rem; }
  }