/* ------------------------------------------------------------
   Vero — Portfólio · Hero (fundo)
   A imagem é a hero. O código só a apresenta bem: entrada suave,
   câmera que respira, paralaxe leve, sol que pulsa, brilhos na grama.
------------------------------------------------------------ */
:root {
  --sky-top: #F3F1EE;
  --sky-horizon: #FBD7A8;
  --orange: #F26A1B;
  --grass: #F27A22;
  --grass-deep: #E2521A;

  --ink: #24140A;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "San Francisco", system-ui, "Helvetica Neue", sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sky-top);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--grass); color: #fff; }

/* ------------------------------------------------------------
   Hero
------------------------------------------------------------ */
.hero {
  /* afastamento da câmera: 1 = imagem colada na tela; menor = mais longe */
  --zoom: 0.84;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100svh;
  min-height: 560px;
  background: linear-gradient(180deg, #F3F5F7 0%, var(--sky-top) 60%, #F6F1EA 100%);
}

.hero-scene {
  position: absolute;
  inset: 0;
}

/* a câmera: recua a partir da base (o primeiro plano fica ancorado embaixo) */
.hero-zoom {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  transform: scale(var(--zoom));
  opacity: 0;
  will-change: transform, opacity;
}
.hero.is-ready .hero-zoom {
  opacity: 1;
  animation:
    reveal 2s var(--ease-out) both,
    breathe 26s ease-in-out infinite alternate;
}

.hero-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 64%;
}
/* imagem principal: bordas laterais e topo se fundem com as extensões/céu */
.hero-img--main {
  z-index: 1;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%);
  mask-composite: intersect;
}
/* extensões espelhadas, levemente desfocadas para esconder a emenda */
.hero-img--mirror {
  transform: scaleX(-1);
  filter: blur(1.5px) saturate(1.02);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 10%);
}
/* deslocadas 6% para dentro: ficam por baixo da faixa de fusão da principal */
.hero-img--left  { left: -94%; }
.hero-img--right { left: 94%; }

/* sol atrás do horizonte */
.hero-sun {
  position: absolute;
  z-index: 2;
  left: 52%;
  top: 43%;
  width: 90vmax;
  height: 90vmax;
  translate: -50% -50%;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(255, 240, 205, 0.75) 0%,
    rgba(255, 214, 150, 0.45) 12%,
    rgba(255, 190, 120, 0.18) 26%,
    rgba(255, 170, 100, 0) 46%
  );
  mix-blend-mode: soft-light;
  opacity: 0.7;
  animation: sunpulse 7s ease-in-out infinite alternate;
  will-change: opacity;
}

/* brilhos (canvas) */
.hero-sparkles {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* vinheta muito leve para dar profundidade às bordas */
.hero-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(120, 45, 5, 0.16) 100%);
}

/* ------------------------------------------------------------
   Animações
------------------------------------------------------------ */
@keyframes reveal {
  from { opacity: 0; scale: 1.05; }
  to   { opacity: 1; scale: 1; }
}
@keyframes breathe {
  from { scale: 1; }
  to   { scale: 1.035; }
}
@keyframes sunpulse {
  from { opacity: 0.55; }
  to   { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-sun { animation: none; }
  .hero.is-ready .hero-zoom { animation: none; opacity: 1; }
  .hero-sparkles { display: none; }
}

/* ------------------------------------------------------------
   Responsivo
------------------------------------------------------------ */
@media (max-aspect-ratio: 1/1) {
  /* retrato: sem recuo (as extensões laterais duplicariam a estrada) */
  .hero { --zoom: 1; }
  .hero-img--mirror { display: none; }
  .hero-img--main { -webkit-mask-image: none; mask-image: none; }
  .hero-img { object-position: 50% 70%; }
  .hero-sun { left: 52%; top: 40%; width: 140vmax; height: 140vmax; }
}

/* ------------------------------------------------------------
   Título
------------------------------------------------------------ */
.hero-content {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  padding: clamp(118px, 17svh, 190px) clamp(20px, 5vw, 64px) 0;
  pointer-events: none;
}

.hero-sub {
  margin: 0;
  max-width: 44ch;
  text-align: center;
  text-wrap: balance;
  font-family: var(--font);
  font-size: clamp(16px, 1.35vw, 21px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #6B3A1C; /* marrom-laranja: contraste no céu, mesma família da paleta */
  pointer-events: auto;
  opacity: 0;
  translate: 0 12px;
}
.hero.is-ready .hero-sub {
  animation: title-in 1.4s var(--ease-out) 0.7s forwards;
}

/* Botões */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
  margin-top: clamp(6px, 1.2vw, 14px);
  pointer-events: auto;
  opacity: 0;
  translate: 0 12px;
}
.hero.is-ready .hero-actions {
  animation: title-in 1.4s var(--ease-out) 0.95s forwards;
}

.btn {
  --btn-dark: #2A1A10;   /* marrom quase preto */
  --btn-cream: #F4ECDF;  /* creme */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color 0.3s var(--ease-out),
    color 0.3s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    transform 0.4s var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* principal: pílula escura sólida */
.btn-primary {
  color: #fff;
  background: var(--btn-dark);
  box-shadow: 0 10px 24px -12px rgba(42, 26, 16, 0.6);
}
.btn-primary:hover {
  background: #3A2416;
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -14px rgba(42, 26, 16, 0.65);
}

/* secundário: pílula creme com ícone circular escuro */
.btn-secondary {
  color: var(--btn-dark);
  background: var(--btn-cream);
  padding-right: 12px;
  box-shadow: 0 10px 24px -14px rgba(90, 50, 20, 0.35);
}
.btn-secondary:hover {
  background: #FAF4E9;
  transform: translateY(-1px);
}
.btn-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--btn-dark);
  color: #fff;
  transition: transform 0.4s var(--ease-out);
}
.btn-icon svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-secondary:hover .btn-icon { transform: translateX(2px); }


.hero-title {
  margin: 0;
  max-width: 18ch;
  text-align: center;
  text-wrap: balance;
  font-family: var(--font);
  font-size: clamp(34px, 5.2vw, 80px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  /* degradê do laranja da paleta: claro no topo, profundo na base */
  color: var(--orange);
  background: linear-gradient(180deg, #F98A34 0%, var(--orange) 48%, #C9420F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.08em; /* evita cortar descendentes do clip */
  pointer-events: auto;
  opacity: 0;
  translate: 0 14px;
}
.hero.is-ready .hero-title {
  animation: title-in 1.4s var(--ease-out) 0.45s forwards;
}

@keyframes title-in {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero.is-ready .hero-title,
  .hero.is-ready .hero-sub,
  .hero.is-ready .hero-actions { animation: none; opacity: 1; translate: 0 0; }
}

@media (max-aspect-ratio: 1/1) {
  .hero-content { padding-top: clamp(108px, 15svh, 150px); gap: 14px; }
  .hero-title { font-size: clamp(32px, 9vw, 52px); max-width: 12ch; }
  .hero-sub { font-size: 16px; max-width: 30ch; }
  .hero-actions { gap: 10px; margin-top: 8px; }
  .btn { height: 46px; padding: 0 20px; font-size: 15px; }
  .btn-secondary { padding-right: 11px; }
}

/* ------------------------------------------------------------
   Serviços — cards empilhados no scroll
------------------------------------------------------------ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.services {
  --cream: #F7F2EB;
  --card-top: 6svh;      /* onde o card "gruda" */
  --card-h: 80svh;       /* altura do card */
  --peek: 14px;          /* quanto cada card anterior espia por cima */
  position: relative;
  background: var(--cream);
  padding: clamp(40px, 8svh, 96px) clamp(16px, 3vw, 40px) clamp(64px, 12svh, 140px);
}

.stack {
  position: relative;
  width: min(1240px, 100%);
  margin: 0 auto;
}

.card {
  position: sticky;
  top: calc(var(--card-top) + var(--i) * var(--peek));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 560px;
  height: var(--card-h);
  padding: clamp(28px, 4vw, 56px);
  border-radius: clamp(20px, 2.4vw, 32px);
  color: #fff;
  transform-origin: 50% 0;
  will-change: transform, filter;
  box-shadow: 0 -10px 40px -20px rgba(42, 26, 16, 0.35);
}
.card + .card { margin-top: 24svh; }   /* o próximo começa abaixo da dobra */

.card--1 { background: #2A1A10; }
.card--2 { background: #7A3512; }
.card--3 { background: var(--orange); }

.card-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: clamp(48px, 7.4vw, 112px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.card-title__a { color: #F7F2EB; }
.card-title__b { color: rgba(247, 242, 235, 0.45); }
.card--3 .card-title__b { color: rgba(255, 244, 232, 0.6); }

.card-foot { display: grid; gap: clamp(18px, 2.4vw, 28px); }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tags li {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.card--3 .tags li {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

.card-text {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
.card-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

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

@media (max-width: 720px) {
  .services { --card-top: 4svh; --card-h: 84svh; --peek: 10px; }
  .card { min-height: 520px; padding: 24px 20px 24px; border-radius: 22px; }
  .card-title { font-size: clamp(40px, 12.5vw, 56px); }
  .tags li { padding: 7px 12px; font-size: 12px; }
  .card-text { font-size: 15px; gap: 10px; }
}

/* ------------------------------------------------------------
   Resultados — arcos + chips flutuantes + números
------------------------------------------------------------ */
.results {
  --paper: #FFFDFB;
  --arc: #E9E0D4;
  --chip-border: #EEE6DC;
  --ink-2: #8A7466;
  position: relative;
  background: var(--paper);
  padding: clamp(48px, 9svh, 110px) clamp(16px, 3vw, 40px) clamp(64px, 12svh, 140px);
  overflow: hidden;
}

.stage {
  container-type: inline-size;
  position: relative;
  width: min(1200px, 100%);
  margin: 0 auto;
  padding-top: 28cqw;            /* área dos chips */
}

.arcs {
  position: absolute;
  left: 50%;
  top: -10cqw;
  width: 100%;
  height: auto;
  translate: -50% 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 96%);
}

/* traços de luz percorrendo os arcos (mostram o sentido do giro) */
.runner {
  fill: none;
  stroke: var(--orange);
  stroke-opacity: 0.4;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 170 9999;
  transform-box: view-box;
  transform-origin: 600px 760px;
  animation: spin-cw 90s linear infinite;
}
.runner--ccw { animation-name: spin-ccw; }
@keyframes spin-cw  { to { transform: rotate(360deg); } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }

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

/* chips */
.chips {
  position: absolute;
  inset: 0;
  margin: 0; padding: 0; list-style: none;
  pointer-events: none;
}
.chip {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1cqw);
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: #2A1A10;
  background: #fff;
  border: 1px solid var(--chip-border);
  box-shadow: 0 8px 22px -12px rgba(42, 26, 16, 0.25);
  opacity: var(--o, 1);
  white-space: nowrap;
}
@media (max-width: 1320px) { .chip--edge { display: none; } }
.chip svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.chip--pill { height: 34px; padding: 0 12px; border-radius: 999px; }
.chip--pill svg { color: var(--orange); }
.chip--heart svg { fill: var(--orange); stroke: var(--orange); }
.chip--ok { color: #187A47; background: #E4F6EC; border-color: #BFE7CF; }
.chip--ok svg { color: #1E9E5A; }

.chip--tile {
  flex-direction: column;
  gap: 4px;
  width: 44px; height: 44px;
  border-radius: 12px;
}
.chip--tile svg { width: 20px; height: 20px; color: var(--orange); }
.chip--tile small { font-size: 10px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-2); line-height: 1; }
.chip--tile:has(small) { width: auto; height: auto; padding: 8px 10px 7px; }

.chip--avatar {
  width: 44px; height: 44px;
  border-radius: 999px;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(160deg, #F98A34, #E25A16);
  border-color: #fff;
}
.chip--avatar-ring { box-shadow: 0 0 0 3px #FFE1CB, 0 8px 22px -12px rgba(42,26,16,.25); }

.chip--wa { color: #14603A; background: #E7F8EE; border-color: #BFE7CF; }
.chip--wa svg { fill: #25D366; stroke: none; }

.chip--new { color: #8A3D0E; background: #FFF1E6; border-color: #FFD9BF; }
.chip--new svg { color: var(--orange); }

.chip--metric { font-weight: 600; letter-spacing: 0.01em; gap: 6px; padding-right: 9px; }
.chip--metric .arrow {
  width: 20px; height: 20px;
  padding: 3px;
  border-radius: 999px;
  stroke-width: 2.4;
}
.chip--metric .arrow--up   { color: #1E9E5A; background: #E4F6EC; }
.chip--metric .arrow--down { color: #D9362B; background: #FCE8E6; }

.chip--check {
  width: 36px; height: 36px;
  border-radius: 999px;
  justify-content: center;
  color: #fff;
  background: var(--orange);
  border-color: #FFD1B3;
}
.chip--check svg { stroke-width: 2.4; }

/* corpo */
.results-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 2.6vw, 30px);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 0; padding: 0; list-style: none;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
}
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.facts li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--orange);
}
.facts strong { color: #2A1A10; font-weight: 700; }

.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px clamp(28px, 4.5vw, 64px);
  margin: 0;
}
.stats div { display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; }
.stats dd {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(36px, 4.2vw, 58px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #2A1A10;
}
.stats dt {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}

.results-title {
  margin: 4px 0 0;
  max-width: 22ch;
  font-family: var(--font);
  font-size: clamp(26px, 2.9vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #2A1A10;
  text-wrap: balance;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 0; padding: 0; list-style: none;
}
.pills li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: #4A3325;
  background: #fff;
  border: 1px solid var(--chip-border);
  box-shadow: 0 6px 18px -12px rgba(42, 26, 16, 0.2);
}
.pills svg {
  width: 16px; height: 16px;
  fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 720px) {
  .stage { padding-top: 62cqw; }
  .arcs { width: 200%; top: -30cqw; }
  /* menos chips; geometria dos arcos dobra de escala */
  .chip { left: calc(50% + (var(--x) - 50) * 2%); top: calc(var(--y) * 2cqw - 10cqw); }
  .chip:nth-child(n+5) { display: none; }   /* mantém pedidos, ROAS, curtidas e avatar */
  .stats { flex-direction: column; gap: 18px; }
  .stats dd { font-size: 34px; }
  .results-title { font-size: 26px; }
  .pills li { height: 36px; font-size: 13px; }
}

/* ------------------------------------------------------------
   Trabalhos — carrossel contínuo de sites
------------------------------------------------------------ */
.works {
  --paper: #FFFFFF;
  position: relative;
  background: var(--paper);
  padding: clamp(56px, 10svh, 120px) 0 clamp(64px, 12svh, 140px);
  overflow: hidden;
}

.works-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 0 clamp(16px, 3vw, 40px);
  margin-bottom: clamp(36px, 6svh, 64px);
}
.works-kicker {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 600;
  color: var(--orange);
}
.works-title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #2A1A10;
  text-wrap: balance;
}
.works-sub {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5;
  color: #8A7466;
  text-wrap: balance;
}
.btn-arrow { padding-right: 8px; gap: 12px; margin-top: 8px; }
.btn-arrow .btn-icon { background: var(--orange); width: 30px; height: 30px; }
.btn-arrow .btn-icon svg { width: 15px; height: 15px; }
.btn-arrow:hover .btn-icon { transform: translateX(3px); }

/* faixa */
.marquee {
  --gap: 0px;
  --card-w: 440px;
  position: relative;
  width: 100%;
  padding: 56px 0 40px;
  perspective: 1300px;
  perspective-origin: 50% 40%;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  margin: 0; padding: 0; list-style: none;
  transform-style: preserve-3d;
  will-change: transform;
}

.work {
  flex: 0 0 var(--card-w);
  transform-style: preserve-3d;
  will-change: transform;
}
/* arco: nas pontas o site está perto e virado para o centro;
   no meio ele recua para o fundo (JS escreve --n = posição -1..1) */
.work .shot {
  --n: 0;
  /* 1 no centro, 0 nas pontas — travado em [0,1] para não inverter fora da tela */
  --k: clamp(0, calc(1 - var(--n) * var(--n)), 1);
  transform:
    translateX(calc(var(--n) * var(--k) * -170px))   /* puxa para o centro conforme recua */
    translateY(calc(var(--k) * -44px))
    rotateY(calc(var(--n) * -30deg))
    translateZ(calc(180px - var(--k) * 720px));
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  opacity: var(--fade, 1);
}

/* "janela" do site */
.shot {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(42, 26, 16, 0.08);
  box-shadow: 0 24px 50px -30px rgba(42, 26, 16, 0.35);
}
.shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(42, 26, 16, 0.06);
}
.shot-bar i { width: 8px; height: 8px; border-radius: 999px; background: rgba(42, 26, 16, 0.22); }
.shot-bar span { flex: 1; height: 12px; margin-left: 8px; border-radius: 6px; background: rgba(42, 26, 16, 0.08); }

.shot-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 498;
  object-fit: cover;
  object-position: 50% 0;
  background: #F1EDE7;
}

.shot figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px 15px;
  font-family: var(--font);
  background: #fff;
  border-top: 1px solid rgba(42, 26, 16, 0.07);
}
.shot figcaption strong { font-size: 14px; font-weight: 600; color: #2A1A10; }
.shot figcaption span { font-size: 12.5px; color: #8A7466; }

@media (max-width: 720px) {
  .marquee { --card-w: 300px; --gap: 8px; perspective: 800px; padding-top: 28px; }
  .work .shot { transform: translateY(calc(var(--k) * -24px)) rotateY(calc(var(--n) * -24deg)) translateZ(calc(80px - var(--k) * 360px)); }
}

/* ------------------------------------------------------------
   Header
------------------------------------------------------------ */
.site-header {
  position: fixed;
  z-index: 50;
  top: clamp(12px, 2vw, 20px);
  left: 50%;
  translate: -50% 0;
  width: min(1200px, calc(100% - clamp(24px, 5vw, 48px)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 62px;
  padding: 0 10px 0 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 10px 30px -18px rgba(42, 26, 16, 0.4);
  transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.site-header.is-stuck {
  background: rgba(255, 253, 251, 0.85);
  border-color: rgba(42, 26, 16, 0.08);
  box-shadow: 0 14px 34px -20px rgba(42, 26, 16, 0.5);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand-logo {
  display: block;
  width: auto;
  height: 26px;
}
.brand--footer .brand-logo { height: 30px; }

.site-nav {
  display: flex;
  gap: clamp(18px, 2.4vw, 34px);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  color: #6B5346;
}
.site-nav a {
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: color 0.25s var(--ease-out);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.site-nav a:hover { color: #2A1A10; }
.site-nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.btn-sm { height: 44px; padding: 0 18px; font-size: 14.5px; }
.btn-sm.btn-arrow { padding-right: 6px; gap: 10px; }
.btn-sm .btn-icon { width: 28px; height: 28px; background: var(--orange); }
.btn-sm .btn-icon svg { width: 14px; height: 14px; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(42, 26, 16, 0.06);
  cursor: pointer;
  place-items: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 17px; height: 2px;
  border-radius: 2px;
  background: #2A1A10;
  transition: transform 0.35s var(--ease-out), opacity 0.25s var(--ease-out);
}
.site-header.is-open .nav-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.site-header.is-open .nav-toggle span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* ------------------------------------------------------------
   Footer
------------------------------------------------------------ */
.site-footer {
  background: #2A1A10;
  color: #F7F2EB;
  padding: clamp(56px, 10svh, 110px) clamp(16px, 3vw, 40px) clamp(24px, 3vw, 34px);
}
.footer-inner {
  width: min(1200px, 100%);
  margin: 0 auto;
  display: grid;
  gap: clamp(40px, 6vw, 72px);
}

.footer-cta { display: grid; gap: 16px; justify-items: start; }
.footer-kicker {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--orange);
}
.footer-title {
  margin: 0;
  max-width: 17ch;
  font-family: var(--font);
  font-size: clamp(32px, 5vw, 68px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #F7F2EB;
  text-wrap: balance;
}
.footer-title em { font-style: normal; color: var(--orange); }

.footer-lead {
  margin: 2px 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
  color: rgba(247, 242, 235, 0.72);
}

.footer-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.footer-actions .btn-primary { background: var(--orange); color: #fff; }
.footer-actions .btn-primary:hover { background: #FA7420; }
.footer-actions .btn-primary .btn-icon { background: #2A1A10; }
.btn-ghost {
  color: #F7F2EB;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid rgba(247, 242, 235, 0.14);
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h3 {
  margin: 0 0 4px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(247, 242, 235, 0.55);
}
.footer-col a, .footer-note {
  font-size: 15px;
  color: rgba(247, 242, 235, 0.86);
  text-decoration: none;
  transition: color 0.25s var(--ease-out);
}
.footer-col a:hover { color: var(--orange); }
.footer-note { color: rgba(247, 242, 235, 0.55); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: clamp(20px, 3vw, 30px);
  border-top: 1px solid rgba(247, 242, 235, 0.14);
}
.brand--footer { color: #F7F2EB; }
.footer-copy { margin: 0; font-size: 13px; color: rgba(247, 242, 235, 0.5); }
.footer-social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  color: #F7F2EB;
  border: 1px solid rgba(247, 242, 235, 0.22);
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.footer-social svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.footer-social a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

@media (max-width: 860px) {
  .site-header { padding-right: 8px; }
  .site-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px;
    border-radius: 20px;
    background: rgba(255, 253, 251, 0.94);
    border: 1px solid rgba(42, 26, 16, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 48px -28px rgba(42, 26, 16, 0.5);
    opacity: 0;
    translate: 0 -8px;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out), translate 0.3s var(--ease-out);
  }
  .site-nav a { padding: 13px 14px; border-radius: 12px; font-size: 16px; }
  .site-nav a::after { display: none; }
  .site-nav a:hover { background: rgba(242, 106, 27, 0.08); }
  .site-header.is-open .site-nav { opacity: 1; translate: 0 0; pointer-events: auto; }
  .header-actions .btn-sm { display: none; }
  .nav-toggle { display: grid; }

  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-bottom { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .footer-cols { grid-template-columns: 1fr; }
}