@font-face { font-family: "Bricolage"; src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Mono"; src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

.playlab__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.playlab__card{border-radius:20px;overflow:hidden;background:var(--paper);color:var(--ink);display:flex;flex-direction:column}
.playlab__copy{padding:28px 32px 32px;flex:1}
.playlab__copy h3{font:750 clamp(28px,3vw,40px)/1.08 var(--display);letter-spacing:-.04em;margin:12px 0}
.playlab__copy p:not(.kicker){font-size:15px;line-height:1.6;color:var(--ink-muted);max-width:440px;margin-bottom:24px}
.playlab__copy .kicker{color:var(--accent-ink)}
.playlab__copy .btn{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.playlab__copy .btn:hover{background:var(--accent-ink)}
.playlab__copy small{display:block;color:var(--ink-muted);font-size:11px;margin-top:14px}
.playlab .art{position:relative;width:min(100%,420px);height:330px;align-self:center;display:grid;place-items:center}
.playlab .disc{position:absolute;width:68%;aspect-ratio:1;background:var(--accent);border-radius:50%}
.playlab .portrait{position:relative;width:340px;max-width:100%;aspect-ratio:1;transform-origin:50% 88%;cursor:pointer;border-radius:40%;-webkit-tap-highlight-color:transparent}
.playlab .portrait img{display:block;width:100%;height:100%;object-fit:contain}
.playlab .eye{position:absolute;width:11.4%;height:9.8%;left:38.3%;top:44%;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;pointer-events:none;overflow:hidden}
.playlab .eye--right{left:59.5%;top:43.55%}
.playlab .pupil{width:43%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff 0 7%,transparent 8%),radial-gradient(circle,#171310 0 42%,#603921 43% 65%,#19130e 66%)}
.playlab .face-hit{position:absolute;inset:0;opacity:0;pointer-events:none}
.playlab .is-hit .face-hit{opacity:1}.playlab .is-hit .face-normal,.playlab .is-hit .eye{visibility:hidden}
.playlab .boxing-glove{position:absolute;width:48%;left:110%;top:35%;z-index:5;pointer-events:none;opacity:0;transform:rotate(-15deg)}
.playlab .ouch{position:absolute;top:14%;left:8%;z-index:6;background:var(--paper);color:var(--ink);border:3px solid var(--ink);padding:10px 16px;box-shadow:4px 4px var(--ink);font:800 38px/1 var(--display);transform:rotate(-12deg);opacity:0;pointer-events:none}
.playlab .impact{position:absolute;left:40%;top:38%;z-index:4;color:#fff0ac;font-size:100px;line-height:1;text-shadow:3px 0 var(--ink),-3px 0 var(--ink),0 3px var(--ink),0 -3px var(--ink);opacity:0;pointer-events:none}
.playlab .is-punching .boxing-glove{animation:lab-punch 560ms cubic-bezier(.2,.7,.2,1) both}
.playlab .is-hit .portrait{animation:lab-recoil 480ms ease-out both}
.playlab .is-hit .ouch{animation:lab-autch 1400ms ease-out both}
.playlab .is-hit .impact{animation:lab-impact 300ms ease-out both}
@keyframes lab-punch{0%{opacity:0;transform:translateX(0) rotate(-15deg)}12%{opacity:1}32%,40%{opacity:1;transform:translateX(-148%) rotate(-8deg)}68%{opacity:1}100%{opacity:0;transform:translateX(0) rotate(12deg)}}
@keyframes lab-recoil{0%{transform:translate(0) rotate(0)}18%{transform:translate(-24px,6px) rotate(-9deg)}45%{transform:translate(10px,-3px) rotate(4deg)}72%{transform:translate(-4px,1px) rotate(-2deg)}100%{transform:translate(0) rotate(0)}}
@keyframes lab-autch{0%{opacity:0;transform:rotate(-12deg) scale(.5)}12%,80%{opacity:1;transform:rotate(-12deg) scale(1)}100%{opacity:0;transform:rotate(-9deg) scale(.95)}}
@keyframes lab-impact{0%{opacity:1;transform:scale(.6)}40%{opacity:1;transform:scale(1.3) rotate(20deg)}100%{opacity:0;transform:scale(1.5) rotate(30deg)}}
.playlab .is-reduced-punch .boxing-glove,.playlab .is-reduced-punch .impact{display:none}
.playlab .is-reduced-punch .portrait{animation:none}.playlab .is-reduced-punch.is-hit .ouch{animation:none;opacity:1}
.playlab__shoe{height:330px;position:relative;display:grid;place-items:center;background:#a8e6eb;isolation:isolate}
.playlab__shoe>span{position:absolute;font:800 clamp(60px,6vw,100px)/.88 var(--display);letter-spacing:-.06em;opacity:.09;transform:rotate(-8deg);z-index:-1}
.playlab__shoe img{width:90%;max-height:300px;object-fit:contain;transform:scaleX(-1)}
.game-dialog{width:min(1200px,96vw);max-width:96vw;height:92dvh;max-height:92dvh;padding:0;border:1px solid var(--line);border-radius:18px;background:var(--bg);color:var(--text)}
.game-dialog::backdrop{background:#000b}
.game-dialog>header{height:74px;display:flex;align-items:center;gap:20px;padding:12px 22px;border-bottom:1px solid var(--line)}
.game-dialog h2{font:700 24px var(--display);margin:0;margin-right:auto}
.game-dialog header a{font-size:12px;color:var(--muted)}
.game-dialog [data-game-media]{height:calc(100% - 74px)}
.game-dialog iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:760px){.playlab__grid{grid-template-columns:1fr}.playlab__copy{padding:24px}.game-dialog>header{gap:12px;padding:10px 12px}.game-dialog h2{font-size:18px}.game-dialog header a{font-size:10px;max-width:90px}.game-dialog header .btn{padding:9px 12px;font-size:12px}}

:root {
  --bg: #0f0f0d;
  --bg-2: #171714;
  --bg-3: #22211d;
  --line: #2f2e29;
  --text: #efebe2;
  --muted: #a6a194;           /* 7.4:1 sobre --bg */
  --accent: #ff5a2b;          /* 6.1:1 sobre --bg */
  --paper: #efe9dc;
  --ink: #141310;
  --ink-muted: #57534a;       /* 6.4:1 sobre --paper */
  --ink-line: #cfc6b3;
  --accent-ink: #b23a10;      /* 5.2:1 sobre --paper */
  --display: "Bricolage", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --radius: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.02; margin: 0; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i { width: 1em; height: 1em; vertical-align: -.12em; flex: none; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.dot { color: var(--accent); font-style: normal; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--ink); padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; color: var(--ink); }
.pending { background: #ffe066; color: #2b2300; padding: 0 .2em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.draft-banner { background: #ffe066; color: #2b2300; font-size: .875rem; padding: 8px var(--gutter); text-align: center; }
.draft-banner .pending { background: #2b2300; color: #ffe066; }

/* grão subtil */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── topo ─────────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.top.is-scrolled { border-bottom-color: var(--line); }
.top__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; }
.brand__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--text); color: var(--bg); font: 700 .8rem/1 var(--display); transition: background .3s; }
.brand:hover .brand__mark { background: var(--accent); }
.menu { list-style: none; display: flex; gap: 2px; align-items: center; }
.menu a { display: block; padding: 8px 12px; border-radius: 999px; text-decoration: none; font-size: .9375rem; color: var(--muted); }
.menu a:hover, .menu a.is-active { color: var(--text); }
.menu a:hover { background: var(--bg-3); }
.menu .menu__cta, .menu .menu__cta.is-active { background: var(--text); color: var(--bg); margin-left: 8px; }
.menu .menu__cta:hover { background: var(--accent); color: var(--ink); }
.menu-btn { display: none; }
@media (max-width: 760px) {
  .menu-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
  .menu-btn__bars, .menu-btn__bars::before { display: block; width: 16px; height: 1.6px; background: currentColor; position: relative; transition: transform .3s var(--ease); }
  .menu-btn__bars::before { content: ""; position: absolute; top: 5px; }
  .menu-btn__bars { transform: translateY(-2.5px); }
  .menu-btn[aria-expanded="true"] .menu-btn__bars { transform: rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: translateY(-5px) rotate(-90deg); }
  .js .menu { position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; background: var(--bg); border-bottom: 1px solid var(--line); display: none; }
  .js .menu.is-open { display: flex; }
  .js .menu a { padding: 14px 4px; border-radius: 0; font-size: 1.125rem; color: var(--text); border-bottom: 1px solid var(--line); }
  .js .menu .menu__cta { margin: 14px 0 0; text-align: center; border-radius: 999px; border: 0; }
  html:not(.js) .menu { flex-wrap: wrap; justify-content: flex-end; }
  html:not(.js) .brand__name { display: none; }
}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { padding: clamp(32px, 6vw, 72px) 0 clamp(48px, 7vw, 88px); position: relative; background: radial-gradient(70% 60% at 85% 0%, rgba(255, 90, 43, .14), transparent 70%); }
.hero__grid { display: grid; gap: 40px; align-items: center; position: relative; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.hero__eyebrow { font: 500 .8125rem/1.4 var(--mono); color: var(--muted); display: flex; align-items: center; gap: 10px; margin-bottom: 22px; text-transform: uppercase; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: live 2s infinite; flex: none; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 43, .6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 90, 43, 0); } }
.hero__title { font-size: clamp(4rem, 13vw, 10.5rem); line-height: .84; letter-spacing: -.055em; font-weight: 780; margin-left: -.05em; }
.hero__title .w { display: block; }
.hero__title .w + .w { padding-left: .55em; }
.hero__role { font: 600 clamp(1.1rem, 1.8vw, 1.35rem)/1.3 var(--display); margin: 26px 0 10px; letter-spacing: -.01em; }
.hero__lead { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.125rem); max-width: 44ch; margin-bottom: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--text); text-decoration: none; font-weight: 600; font-size: .9875rem; background: transparent; cursor: pointer; transition: background .2s, color .2s, transform .2s var(--ease), border-color .2s; }
.btn:hover { background: var(--text); color: var(--bg); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn--primary:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn--ghost { border-color: transparent; text-decoration: underline; text-underline-offset: .25em; padding: 0 12px; }
.btn--ghost:hover { background: transparent; color: var(--accent); }

/* ── estúdio (camadas) ────────────────────────────────────────────────── */
.studio { background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 10px; box-shadow: 0 40px 100px -40px #000; max-width: 540px; width: 100%; justify-self: center; }
.studio__bar { display: flex; align-items: center; gap: 12px; padding: 4px 6px 12px; font: 500 .75rem/1 var(--mono); color: var(--muted); }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line); }
.dots i:first-child { background: var(--accent); border-color: var(--accent); }
.studio__file b { color: var(--accent); }
.studio__mode { margin-left: auto; padding: 5px 9px; border-radius: 6px; background: var(--bg-3); color: var(--text); text-transform: uppercase; letter-spacing: .06em; }

.stage { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #6b6a68; isolation: isolate; container-type: inline-size; }
.stage__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .7s var(--ease), transform .9s var(--ease), top .7s var(--ease), left .7s var(--ease), width .7s var(--ease), height .7s var(--ease), border-radius .7s; }
.ov { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; pointer-events: none; font-family: var(--mono); font-size: max(10px, 2.6cqi); }
.stage[data-layer="marketing"] .ov--marketing,
.stage[data-layer="design"] .ov--design,
.stage[data-layer="video"] .ov--video,
.stage[data-layer="web"] .ov--web,
.stage[data-layer="ia"] .ov--ia { opacity: 1; visibility: visible; }

/* Marketing: peça publicitária */
.ad { position: absolute; left: 5%; right: 5%; bottom: 5%; background: rgba(15, 15, 13, .84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 12px; padding: 4.5cqi; font-family: var(--body); transform: translateY(14px); transition: transform .6s var(--ease); }
.stage[data-layer="marketing"] .ad { transform: none; }
.ad p { margin: 0; }
.ad__top { display: flex; align-items: center; gap: 8px; font-size: 3cqi; font-weight: 600; }
.ad__logo { display: grid; place-items: center; width: 7cqi; height: 7cqi; border-radius: 50%; background: var(--accent); color: var(--ink); font: 700 2.6cqi/1 var(--display); }
.ad__tag { margin-left: auto; font-weight: 400; color: var(--muted); font-size: 2.6cqi; }
.ad .ad__head { font: 750 8.4cqi/.98 var(--display); letter-spacing: -.035em; margin: 3.5cqi 0; }
.ad__head span { color: var(--accent); }
.ad__cta { display: flex; justify-content: space-between; background: var(--text); color: var(--ink); border-radius: 8px; padding: 2.6cqi 3.4cqi; font-weight: 700; font-size: 3.2cqi; }
.stage[data-layer="marketing"] .stage__img { transform: scale(1.04); }

/* Design: duotone, retícula, grelha e marcas de corte */
.stage[data-layer="design"] .stage__img { filter: grayscale(1) contrast(1.35) brightness(1.08); }
.duo { position: absolute; inset: 0; background: var(--accent); mix-blend-mode: multiply; }
.halftone { position: absolute; inset: 0; background-image: radial-gradient(rgba(15, 15, 13, .6) 30%, transparent 32%); background-size: 1.6cqi 1.6cqi; mix-blend-mode: multiply; opacity: .5; -webkit-mask-image: linear-gradient(115deg, transparent 35%, #000 85%); mask-image: linear-gradient(115deg, transparent 35%, #000 85%); }
.grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .25) 1px, transparent 1px); background-size: 33.333% 33.333%; }
.crop { position: absolute; width: 8%; height: 8%; border: 0 solid var(--text); }
.crop--tl { top: 4%; left: 4%; border-top-width: 2px; border-left-width: 2px; }
.crop--tr { top: 4%; right: 4%; border-top-width: 2px; border-right-width: 2px; }
.crop--bl { bottom: 4%; left: 4%; border-bottom-width: 2px; border-left-width: 2px; }
.crop--br { bottom: 4%; right: 4%; border-bottom-width: 2px; border-right-width: 2px; }
.measure { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); background: var(--bg); color: var(--text); padding: .4em .8em; border-radius: 4px; white-space: nowrap; }
.swatches { position: absolute; right: 6%; top: 14%; display: grid; gap: 6px; }
.swatches i { width: 6cqi; height: 6cqi; border-radius: 4px; background: var(--c); border: 1.5px solid var(--text); }

/* Vídeo: barras, REC, timecode, timeline */
.stage[data-layer="video"] .stage__img { filter: contrast(1.12) saturate(.75) sepia(.12); transform: scale(1.08); }
.bars { position: absolute; inset: 0; border-top: 9cqi solid #000; border-bottom: 13cqi solid #000; }
.rec { position: absolute; top: 12cqi; left: 6%; display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 700; }
.rec i { width: 2.2cqi; height: 2.2cqi; border-radius: 50%; background: #ff3b30; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tc { position: absolute; top: 12cqi; right: 6%; color: var(--text); font-variant-numeric: tabular-nums; }
.safe { position: absolute; top: 20%; bottom: 22%; left: 9%; right: 9%; border: 1px dashed rgba(255, 255, 255, .45); }
.track { position: absolute; left: 4%; right: 4%; bottom: 2cqi; height: 8cqi; }
.clips { position: absolute; top: 0; left: 0; right: 0; height: 45%; display: flex; gap: 2px; }
.clips i { flex: 1; background: rgba(255, 90, 43, .9); border-radius: 2px; }
.clips i:nth-child(2) { flex: 2; background: rgba(239, 235, 226, .8); }
.clips i:nth-child(4) { flex: .6; }
.wave { position: absolute; top: 55%; bottom: 0; left: 0; right: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .6) 0 1px, transparent 1px 3px); -webkit-mask-image: radial-gradient(ellipse 30% 100% at 25% 50%, #000, transparent), radial-gradient(ellipse 25% 100% at 72% 50%, #000, transparent); mask-image: radial-gradient(ellipse 30% 100% at 25% 50%, #000, transparent), radial-gradient(ellipse 25% 100% at 72% 50%, #000, transparent); }
.playhead { position: absolute; top: -1cqi; bottom: 0; width: 2px; background: var(--text); left: 0; animation: scrub 6s linear infinite; }
@keyframes scrub { to { left: 100%; } }

/* Web: janela de browser, réguas, caixas de layout */
.stage[data-layer="web"] { background: #1b1b18; }
.stage[data-layer="web"] .stage__img { top: 10%; left: 6%; width: 88%; height: 84%; border-radius: 6px; }
.ruler { position: absolute; top: 2.5%; left: 6%; right: 6%; height: 5%; border-bottom: 1px solid #44433d; display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.ruler i { font-style: normal; }
.box { position: absolute; }
.box--margin { left: 24%; right: 20%; top: 14%; bottom: 36%; background: rgba(255, 166, 87, .18); border: 1px dashed #ffa657; }
.box--content { left: 30%; right: 26%; top: 20%; bottom: 42%; background: rgba(121, 192, 255, .2); border: 1px solid #79c0ff; }
.box--content b { position: absolute; top: -1.9em; left: -1px; background: #79c0ff; color: #0b1a2b; padding: .15em .5em; font-weight: 600; border-radius: 3px 3px 0 0; }
.tag { position: absolute; background: var(--bg); color: var(--text); padding: .45em .7em; border-radius: 5px; border: 1px solid var(--line); white-space: nowrap; }
.tag--a { left: 9%; bottom: 9%; color: #7ee787; }
.tag--b { right: 9%; bottom: 18%; color: #d2a8ff; }

/* IA: máscara de seleção */
.mask { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255, 90, 43, .32) 0 3px, rgba(255, 90, 43, .06) 3px 9px); }
.stage[data-layer="ia"] .mask { animation: maskin 2.2s var(--ease) both; }
@keyframes maskin { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.scan { position: absolute; left: 0; right: 0; height: 2px; background: var(--text); box-shadow: 0 0 14px 3px var(--accent); top: 100%; opacity: 0; }
.stage[data-layer="ia"] .scan { animation: scan 2.2s var(--ease) both; }
@keyframes scan { from { top: 0; opacity: 1; } 85% { opacity: 1; } to { top: 100%; opacity: 0; } }
.chip-ia { position: absolute; top: 5%; left: 5%; background: var(--bg); color: var(--text); padding: .5em .9em; border-radius: 999px; border: 1px solid var(--accent); }
.prompt { position: absolute; left: 5%; right: 5%; bottom: 5%; background: rgba(15, 15, 13, .85); color: var(--text); padding: 1em 1.2em; border-radius: 10px; border: 1px solid var(--line); }
.prompt i { display: inline-block; width: .55em; height: 1.1em; background: var(--accent); vertical-align: -.2em; margin-left: .3em; animation: blink 1s steps(2) infinite; }

.studio__ctrl { display: flex; gap: 6px; align-items: stretch; margin-top: 10px; }
.layers { display: flex; flex: 1; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.layers::-webkit-scrollbar { display: none; }
.layers button { position: relative; flex: 1; min-width: 64px; min-height: 48px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 10px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; text-align: left; font-weight: 600; font-size: .875rem; overflow: hidden; color: var(--muted); transition: color .2s, border-color .2s, background .2s; }
.layers__n { font: 500 .6875rem/1 var(--mono); }
.layers button:hover { color: var(--text); }
.layers button[aria-selected="true"] { color: var(--text); border-color: var(--accent); background: #2a1a13; }
.layers button[aria-selected="true"] .layers__n { color: var(--accent); }
.layers__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); }
.studio.is-auto .layers button[aria-selected="true"] .layers__bar { animation: fill var(--dur, 5s) linear forwards; }
@keyframes fill { to { width: 100%; } }
.pause { width: 48px; flex: none; border: 1px solid var(--line); background: var(--bg-3); border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.pause:hover { border-color: var(--muted); }
.pause__icon { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.pause[aria-pressed="true"] .pause__icon { border: 0; width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.studio__text { margin: 12px 6px 4px; min-height: 3em; color: var(--muted); font-size: .9375rem; line-height: 1.5; }

/* ── faixa de disciplinas ─────────────────────────────────────────────── */
.marquee { border-block: 1px solid var(--line); overflow: hidden; padding: 18px 0; background: var(--bg-2); }
.marquee__track { display: flex; width: max-content; gap: 28px; align-items: center; animation: marquee 40s linear infinite; font: 700 clamp(1.6rem, 4vw, 3rem)/1 var(--display); letter-spacing: -.03em; }
.marquee__track span:nth-of-type(2n) { color: transparent; -webkit-text-stroke: 1.2px var(--text); }
.marquee__track i { font-style: normal; color: var(--accent); font-size: .6em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── secções ──────────────────────────────────────────────────────────── */
.section { padding: clamp(72px, 11vw, 140px) 0; }
.section--alt { background: var(--bg-2); }
.section--paper { background: var(--paper); color: var(--ink); --muted: var(--ink-muted); --line: var(--ink-line); }
.section--paper a:hover { color: var(--accent-ink); }
.section--paper :focus-visible { outline-color: var(--accent-ink); }
.section__head { display: grid; gap: 16px; margin-bottom: clamp(40px, 6vw, 72px); }
.kicker { font: 500 .8125rem/1 var(--mono); color: var(--accent); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.section--paper .kicker { color: var(--accent-ink); }
.section__title { font-size: clamp(2.6rem, 7.2vw, 5.6rem); letter-spacing: -.045em; line-height: .92; }
.section__intro { color: var(--muted); max-width: 52ch; margin: 0; line-height: 1.9; }
@media (min-width: 900px) { .section__head { grid-template-columns: 1.3fr 1fr; align-items: end; } .section__head .kicker { grid-column: 1 / -1; } }
.sub { font-size: 1.6rem; margin: clamp(64px, 9vw, 112px) 0 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.eyebrow { font: 500 .8125rem/1.4 var(--mono); text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: flex; gap: 12px; align-items: baseline; }
.num { color: var(--accent); }

.status { display: inline-flex; align-items: center; gap: 6px; font: 600 .75rem/1 var(--body); padding: 5px 10px 5px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; vertical-align: .1em; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--entregue { color: #7fd69a; }
.status--em-desenvolvimento { color: #ffb257; }
.status--em-desenvolvimento::before { animation: pulse 2s infinite; }
.status--prototipo { color: #aab2ff; }
.status--em-curso { color: #ffd166; }
@keyframes pulse { 50% { opacity: .25; } }

.frame { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--bg-3); box-shadow: 0 30px 70px -36px #000; }
.frame img { width: 100%; transition: transform 1.2s var(--ease); }
.frame:hover img { transform: scale(1.02); }
.frame--phone { border-radius: 22px; border: 5px solid #000; background: #000; }
.frame--phone img { border-radius: 16px; }
.caption { font: 400 .75rem/1.4 var(--mono); color: var(--muted); margin: 14px 0 0; }

/* ── DGym ─────────────────────────────────────────────────────────────── */
.feature { display: grid; gap: clamp(28px, 4vw, 48px); padding: clamp(22px, 4vw, 56px); border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(120% 80% at 100% 0%, rgba(255, 90, 43, .12), transparent 60%), var(--bg-2); }
.feature__title { font-size: clamp(3.4rem, 10vw, 8rem); letter-spacing: -.055em; line-height: .85; }
.feature__kind { color: var(--muted); margin: 16px 0 0; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.feature__lead { font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.45; margin: 20px 0 0; max-width: 40ch; }
.phones { display: flex; gap: 14px; justify-content: flex-end; margin-top: -18%; padding-right: 4%; position: relative; }
.phones .frame--phone { width: 32%; max-width: 210px; }
.feature__placeholder { border: 1px solid var(--line); border-radius: var(--radius); min-height: 300px; display: grid; place-content: center; text-align: center; gap: 18px; padding: 32px; background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255, 255, 255, .025) 14px 28px); }
.ph__code { font: 500 .8125rem/1 var(--mono); color: var(--muted); }
.ph__name { font: 780 clamp(3rem, 8vw, 6rem)/.9 var(--display); letter-spacing: -.05em; }
.ph__bar { width: min(260px, 60vw); height: 4px; border-radius: 4px; background: var(--bg-3); overflow: hidden; margin: 0 auto; }
.ph__bar i { display: block; height: 100%; width: 40%; background: var(--accent); animation: load 2.4s var(--ease) infinite alternate; }
@keyframes load { from { transform: translateX(-60%); } to { transform: translateX(210%); } }
.feature__strip { display: grid; gap: 16px; align-items: start; }
.feature__strip .frame--phone { max-width: 220px; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 5fr 7fr; grid-template-areas: "head media" "body media" "strip strip"; column-gap: 56px; }
  .feature__head { grid-area: head; }
  .feature__media, .feature__placeholder { grid-area: media; align-self: start; position: sticky; top: 96px; }
  .feature__body { grid-area: body; }
  .feature__strip { grid-area: strip; grid-template-columns: 2fr 1fr; margin-top: 16px; }
}

.facts { margin: 0; display: grid; }
.facts > div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.facts dt { font: 500 .75rem/1.6 var(--mono); text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; }
.facts dd p { margin: 0; }
.facts ul { padding-left: 1.1em; }
.facts li + li { margin-top: 4px; }
.facts li::marker { color: var(--accent); }
@media (min-width: 600px) { .facts > div { grid-template-columns: 130px 1fr; gap: 16px; } }

/* ── casos ────────────────────────────────────────────────────────────── */
.cases { display: grid; gap: clamp(80px, 11vw, 140px); padding-top: clamp(80px, 10vw, 128px); }
.case { display: grid; gap: 28px; }
.case__media { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; }
.case__media .frame--desk { grid-column: 1 / -1; }
.case__media .frame--desk ~ .frame--desk { grid-column: 1 / -1; }
.case__media .frame--phone { width: clamp(110px, 24vw, 180px); grid-column: 2; margin-top: -30%; margin-right: 6%; position: relative; }
.case__media .frame--desk + .frame--desk + .frame--phone { margin-top: 0; }
.case__media .frame--portrait { grid-column: 1 / -1; max-width: 420px; }
.case__title { font-size: clamp(2.4rem, 5.4vw, 4rem); letter-spacing: -.045em; margin-bottom: 14px; }
.case__lead { font-size: 1.15rem; line-height: 1.5; margin-bottom: 22px; }
.extlink { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--accent); padding-bottom: 2px; }
@media (min-width: 900px) {
  .case { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
  .case:nth-child(even) .case__media { order: 2; }
  .case__text { position: sticky; top: 96px; }
}

/* ── outros ───────────────────────────────────────────────────────────── */
.minis { list-style: none; display: grid; gap: 40px 28px; }
@media (min-width: 700px) { .minis { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .minis { grid-template-columns: repeat(3, 1fr); } }
.mini .frame { margin-bottom: 16px; }
.mini__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mini__title { font-size: 1.6rem; }
.mini__kind { color: var(--muted); font: 500 .75rem/1.4 var(--mono); text-transform: uppercase; margin: 6px 0 10px; }
.mini p { margin-bottom: 8px; }
.mini .extlink { margin-top: 6px; }

/* ── timeline ─────────────────────────────────────────────────────────── */
.tl { overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 10px; scrollbar-width: thin; }
.tl__inner { position: relative; min-width: 900px; padding: 34px 0 6px 150px; }
.tl__ruler { position: absolute; left: 150px; right: 0; top: 0; height: 24px; border-bottom: 1px solid var(--ink); }
.tl__ruler span { position: absolute; bottom: 5px; font: 500 .6875rem/1 var(--mono); color: var(--ink-muted); padding-left: 5px; }
.tl__ruler span::before { content: ""; position: absolute; left: 0; bottom: -5px; height: 9px; border-left: 1px solid var(--ink); }
.tl__track { position: relative; height: 46px; border-bottom: 1px dashed var(--ink-line); }
.tl__label { position: absolute; left: -150px; width: 140px; top: 50%; transform: translateY(-50%); font: 500 .6875rem/1.2 var(--mono); text-transform: uppercase; color: var(--ink-muted); }
.tl__lane { position: absolute; inset: 0; }
.clip { position: absolute; top: 9px; bottom: 9px; border-radius: 6px; background: #77705f; color: #fff; font: 600 .75rem/1 var(--body); display: flex; align-items: center; padding: 0 10px; white-space: nowrap; transform-origin: left; }
.clip span { overflow: hidden; text-overflow: ellipsis; }
.clip--accent { background: var(--accent); color: var(--ink); }
.clip--fs { background-image: linear-gradient(90deg, var(--paper), transparent 30%); padding-left: 18%; }
.clip--fe { background-image: linear-gradient(90deg, transparent 55%, var(--paper)); }
.clip--short { background: none; color: var(--ink); padding: 0; }
.clip--short::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; min-width: 6px; border-radius: 4px; background: #77705f; }
.clip--short.clip--accent::before { background: var(--accent); }
.clip--short span { position: absolute; left: calc(100% + 8px); overflow: visible; }
.clip--above { top: 1px; bottom: auto; height: 8px; z-index: 1; }
.clip--above::before { background: var(--ink) !important; }
.clip--above span { top: -2px; font-size: .6875rem; color: var(--ink); background: var(--paper); padding: 0 4px; left: calc(100% + 4px); }
.tl__head { position: absolute; top: 14px; bottom: 0; width: 2px; background: var(--accent-ink); margin-left: 150px; transform: translateX(-1px); }
.tl__head span { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--accent-ink); color: #fff; font: 600 .6875rem/1 var(--mono); padding: 4px 6px; border-radius: 4px; }
.tl__inner { --lane: calc(100% - 150px); }
.tl__note { font: 400 .75rem/1.4 var(--mono); color: var(--ink-muted); margin: 12px 0 48px; }
.js .tl.reveal .clip { transform: scaleX(0); transition: transform 1.1s var(--ease) .2s; }
.js .tl.reveal.is-in .clip { transform: none; }

/* ── experiência ──────────────────────────────────────────────────────── */
.jobs { list-style: none; }
.job { display: grid; gap: 6px; padding: 28px 0; border-top: 1px solid var(--line); }
.job__when { font: 500 .8125rem/1.6 var(--mono); color: var(--muted); margin: 0; }
.job__org { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.03em; }
.job--hl .job__org::after { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-left: 10px; vertical-align: .35em; }
.job__role { color: var(--muted); margin: 6px 0 12px; font-weight: 500; }
.job__prog { font-size: .9375rem; margin: -6px 0 12px; }
.job ul { padding-left: 1.1em; max-width: 64ch; }
.job li + li { margin-top: 4px; }
.job li::marker { color: var(--accent-ink); }
.job__brands { font-size: .9375rem; color: var(--muted); margin: 12px 0 0; }
@media (min-width: 900px) { .job { grid-template-columns: 220px 1fr; gap: 32px; } .job__when { padding-top: .7em; } }
.other { border-top: 1px solid var(--line); padding-top: 28px; display: grid; gap: 8px; }
.other h3 { font: 600 1.05rem/1.3 var(--body); letter-spacing: 0; }
.other p { color: var(--muted); max-width: 72ch; margin: 0; }
@media (min-width: 900px) { .other { grid-template-columns: 220px 1fr; gap: 32px; } }

/* ── competências ─────────────────────────────────────────────────────── */
.skills { display: grid; gap: 16px; }
@media (min-width: 800px) { .skills { grid-template-columns: repeat(3, 1fr); } }
.skill { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: var(--bg-2); transition: border-color .3s, transform .4s var(--ease); }
.skill:hover { border-color: var(--accent); transform: translateY(-3px); }
.skill__n { font: 500 .75rem/1 var(--mono); color: var(--accent); margin-bottom: 30px; }
.skill h3 { font-size: 1.5rem; margin-bottom: 16px; }
.skill ul { list-style: none; }
.skill li { padding: 8px 0; border-top: 1px solid var(--line); }
.tools { margin: clamp(48px, 7vw, 80px) 0 0; display: grid; }
.tools > div { display: grid; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.tools dt { font: 500 .8125rem/1.4 var(--mono); text-transform: uppercase; color: var(--muted); }
.tools dd { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.key { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 3px 0 var(--line); font-weight: 500; font-size: .9375rem; transition: transform .15s, box-shadow .15s; }
.key:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.key b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: var(--bg-3); font: 600 .75rem/1 var(--mono); color: var(--accent); }
@media (min-width: 800px) { .tools > div { grid-template-columns: 280px 1fr; align-items: center; } }

/* ── sobre ────────────────────────────────────────────────────────────── */
.about { display: grid; gap: 32px; }
.about__side .section__title { margin-top: 16px; }
.about__text { max-width: 62ch; font-size: 1.125rem; }
.about__facts { margin: 32px 0 0; display: grid; font-size: 1rem; }
.about__facts > div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.about__facts dt { font: 500 .75rem/1.6 var(--mono); text-transform: uppercase; color: var(--muted); }
.about__facts dd { margin: 0; }
.about__facts span { color: var(--muted); }
@media (min-width: 900px) { .about { grid-template-columns: 5fr 7fr; gap: 64px; } .about__facts > div { grid-template-columns: 130px 1fr; gap: 16px; } }

/* ── contacto ─────────────────────────────────────────────────────────── */
.contact { position: relative; overflow: hidden; }
.contact::before { content: ""; position: absolute; right: -20vw; bottom: -30vw; width: 70vw; height: 70vw; background: radial-gradient(closest-side, rgba(255, 90, 43, .18), transparent); pointer-events: none; }
.contact__title { font-size: clamp(3.4rem, 12vw, 10rem); letter-spacing: -.055em; line-height: .86; margin: 20px 0 48px; }
.contact__list { list-style: none; margin-bottom: 40px; border-top: 1px solid var(--line); position: relative; }
.contact__list li { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.contact .k { font: 500 .75rem/1 var(--mono); text-transform: uppercase; color: var(--muted); min-width: 120px; }
.contact__list a, .contact__list .v { font-family: var(--display); font-size: clamp(1.2rem, 4.4vw, 2.4rem); letter-spacing: -.025em; text-decoration: none; word-break: break-word; }
.contact__list a { background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size .35s var(--ease); }
.contact__list a:hover, .contact__list a:focus-visible { background-size: 100% 2px; }
.copy { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; font-size: .875rem; }
.copy:hover { border-color: var(--accent); }
.copy.is-done { border-color: #7fd69a; color: #7fd69a; }

.foot { color: var(--muted); font-size: .875rem; border-top: 1px solid var(--line); }
.foot__inner { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-top: 24px; padding-bottom: 24px; }
.foot p { margin: 0; }
.foot a { color: var(--text); }

/* ── movimento ────────────────────────────────────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .hero__title .w { transform: translateY(.3em); opacity: 0; transition: transform 1.1s var(--ease), opacity 1.1s var(--ease); }
.js .hero__title.is-in .w { transform: none; opacity: 1; }
.js .hero__title.is-in .w + .w { transition-delay: .1s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .hero__title .w, .js .tl.reveal .clip { opacity: 1; transform: none; }
}
@media print { .top, .hero__actions, .skip, .draft-banner, .studio__ctrl, body::after { display: none; } }

/* Telemóvel: o estúdio e o texto nunca alargam a grelha. */
.hero__grid > * { min-width: 0; }
@media (max-width: 520px) {
  .layers button { flex: none; min-width: 0; padding: 6px 10px; font-size: .8125rem; }
  .studio__ctrl { gap: 4px; }
  .pause { width: 44px; }
  .hero__title .w + .w { padding-left: .35em; }
}

/* ── fotografia: mosaico ─────────────────────────────────────────────── */
.mosaic { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.mosaic__item { margin: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--bg-3); }
.mosaic__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.92); }
.mosaic__item:hover img { transform: scale(1.04); filter: none; }
.mosaic__item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

/* ── vídeos ao longo do dia ──────────────────────────────────────────── */
.liveday { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px 18px; background: var(--bg-2); }
.liveday__k { font: 500 .75rem/1 var(--mono); text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.liveday__track { list-style: none; display: flex; justify-content: space-between; position: relative; }
.liveday__track::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: linear-gradient(90deg, var(--accent), #ffb257); }
.liveday__track li { position: relative; display: grid; justify-items: center; gap: 8px; font: 600 .8125rem/1 var(--mono); }
.liveday__track li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); }
.js .liveday__track li::before { animation: ping 2.8s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .2s); }
@keyframes ping { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 43, 0); } 10% { box-shadow: 0 0 0 6px rgba(255, 90, 43, .35); } }

/* ── podcast ──────────────────────────────────────────────────────────── */
.pod { grid-column: 1 / -1; position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; padding: clamp(18px, 3vw, 32px); display: grid; grid-template-rows: auto 1fr auto auto; gap: 14px; background: radial-gradient(90% 90% at 0% 100%, rgba(255, 90, 43, .35), transparent 60%), linear-gradient(160deg, #1f1d19, #0f0f0d); border: 1px solid var(--line); }
.pod__label { font: 500 .75rem/1 var(--mono); color: var(--accent); letter-spacing: .06em; }
.pod__name { align-self: end; font: 780 clamp(2.6rem, 7vw, 5.2rem)/.86 var(--display); letter-spacing: -.055em; }
.pod__wave { display: flex; align-items: center; gap: 3px; height: 64px; }
.pod__wave i { flex: 1; height: var(--h); border-radius: 3px; background: var(--text); opacity: .85; transform-origin: center; animation: wave 1.4s ease-in-out infinite alternate; animation-delay: var(--d); }
.pod__wave i:nth-child(-n+18) { background: var(--accent); }
@keyframes wave { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.pod__meta { display: flex; justify-content: space-between; font: 500 .75rem/1 var(--mono); color: var(--muted); }
.pod__meta b { color: var(--text); font-weight: 600; }

/* ── bobina ───────────────────────────────────────────────────────────── */
.reel { background: var(--bg-2); border-top: 1px solid var(--line); overflow: hidden; }
.reel__strip { --pad: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); list-style: none; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 4px var(--pad) 24px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.reel__item { flex: none; width: clamp(200px, 22vw, 260px); scroll-snap-align: start; }
.reel__item figure { margin: 0; }
.reel__item:nth-child(even) { margin-top: 48px; }
.reel__vid { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.reel__vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__vid::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 70%, rgba(0, 0, 0, .55)); }
.reel__btn { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; cursor: pointer; display: grid; place-items: end start; padding: 12px; }
.reel__icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(15, 15, 13, .7); position: relative; }
.reel__icon::before { content: ""; position: absolute; left: 12px; top: 10px; width: 10px; height: 14px; border-left: 3px solid var(--text); border-right: 3px solid var(--text); box-sizing: border-box; }
.reel__btn[aria-pressed="true"] .reel__icon::before { border: 0; width: 0; height: 0; left: 13px; top: 10px; border-left: 11px solid var(--text); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.reel__btn:focus-visible { outline-offset: -4px; border-radius: 16px; }
.reel figcaption { font-size: .875rem; color: var(--muted); margin-top: 10px; line-height: 1.4; }
.reel figcaption b { display: block; color: var(--text); font: 600 .75rem/1.6 var(--mono); text-transform: uppercase; }
@media (max-width: 600px) { .reel__item:nth-child(even) { margin-top: 0; } .reel__item { width: 62vw; } }

/* ── layouts do mosaico ──────────────────────────────────────────────── */
.mosaic--wide { grid-template-columns: repeat(2, 1fr); }
.mosaic--wide .mosaic__item, .mosaic--wide .mosaic__item:first-child { grid-column: auto; aspect-ratio: 16 / 9; }
.mosaic--tall { grid-template-columns: repeat(3, 1fr); }
.mosaic--tall .mosaic__item, .mosaic--tall .mosaic__item:first-child { grid-column: auto; aspect-ratio: 4 / 5; }
.mosaic--tall .mosaic__item:nth-child(3n+2) { transform: translateY(18px); }
.mosaic--tall { padding-bottom: 18px; }

/* ── 23 vídeos no dia ────────────────────────────────────────────────── */
.live23 { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 20px; border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px 20px; background: radial-gradient(80% 120% at 0% 0%, rgba(255, 90, 43, .2), transparent 60%), var(--bg-2); }
.live23__n { margin: 0; font: 780 clamp(4rem, 9vw, 6.5rem)/.8 var(--display); letter-spacing: -.06em; color: var(--accent); }
.live23__t { margin: 0; font-size: 1.05rem; line-height: 1.35; max-width: 22ch; }
.live23__t b { color: var(--text); }
.live23__bars { grid-column: 1 / -1; display: flex; gap: 3px; margin-top: 14px; height: 26px; align-items: flex-end; }
.live23__bars i { flex: 1; border-radius: 2px; background: var(--accent); height: 100%; opacity: .9; transform-origin: bottom; }
.live23__bars i:nth-child(odd) { height: 70%; opacity: .6; }
.js .reveal .live23__bars i { transform: scaleY(0); transition: transform .5s var(--ease); transition-delay: calc(var(--k) * 45ms); }
.js .reveal.is-in .live23__bars i { transform: none; }

/* ── antes / depois ──────────────────────────────────────────────────── */
.ba { grid-column: 1 / -1; position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 30px 70px -36px #000; background: var(--bg-3); user-select: none; touch-action: pan-y; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--text); transform: translateX(-1px); pointer-events: none; }
.ba__knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--text); color: var(--ink); display: grid; place-items: center; font: 700 1rem/1 var(--body); box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.ba__tag { position: absolute; top: 12px; padding: 6px 10px; border-radius: 6px; background: rgba(15, 15, 13, .8); font: 600 .75rem/1 var(--mono); text-transform: uppercase; pointer-events: none; }
.ba__tag--l { left: 12px; }
.ba__tag--r { right: 12px; color: var(--accent); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba:has(.ba__range:focus-visible) .ba__knob { outline: 3px solid var(--accent); outline-offset: 3px; }
.mosaic--film { grid-template-columns: repeat(4, 1fr); }
.mosaic--film .mosaic__item, .mosaic--film .mosaic__item:first-child { grid-column: auto; aspect-ratio: 9 / 16; }

/* ── técnica de produção ─────────────────────────────────────────────── */
.prod { background: var(--bg); }
.ab { border: 1px solid var(--line); border-radius: 18px; padding: clamp(16px, 3vw, 28px); background: radial-gradient(70% 120% at 0% 0%, rgba(255, 90, 43, .14), transparent 60%), var(--bg-2); margin-bottom: clamp(40px, 6vw, 64px); }
.ab__top { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.ab__label { margin: 0; display: flex; align-items: center; gap: 10px; font: 500 .8125rem/1.3 var(--mono); text-transform: uppercase; color: var(--muted); }
.ab__switch { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); }
.ab__switch button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-weight: 600; font-size: .875rem; color: var(--muted); transition: background .25s, color .25s; }
.ab__switch button[aria-checked="true"] { background: var(--text); color: var(--bg); }
.ab__spec { position: relative; display: grid; border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 1200 / 220; }
.ab__img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s var(--ease); }
.ab__img--after { opacity: 0; }
.ab[data-v="1"] .ab__img--after { opacity: 1; }
.ab__head { position: absolute; top: 0; bottom: 0; left: var(--p, 0%); width: 2px; background: var(--text); box-shadow: 0 0 12px var(--accent); }
.ab__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }
.ab__play { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px 0 16px; border-radius: 999px; border: 0; background: var(--accent); color: var(--ink); font-weight: 700; cursor: pointer; }
.ab__icon { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.ab__play[aria-pressed="true"] .ab__icon { width: 10px; height: 13px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.ab__hint { margin: 0; color: var(--muted); font-size: .875rem; }
.prod__list { list-style: none; display: grid; gap: 0; counter-reset: p; }
@media (min-width: 700px) { .prod__list { grid-template-columns: repeat(2, 1fr); column-gap: 40px; } }
@media (min-width: 1100px) { .prod__list { grid-template-columns: repeat(3, 1fr); } }
.prod__item { padding: 22px 0 26px; border-top: 1px solid var(--line); }
.prod__n { font: 500 .75rem/1 var(--mono); color: var(--accent); }
.prod__item h3 { font-size: 1.45rem; margin: 14px 0 8px; }
.prod__item p { color: var(--muted); margin: 0; max-width: 40ch; }
.mosaic--mix { grid-template-columns: repeat(3, 1fr); }
.mosaic--mix .mosaic__item:nth-child(-n+3) { grid-column: auto; aspect-ratio: 9 / 16; }
.mosaic--mix .mosaic__item:nth-child(n+4) { aspect-ratio: 1; }
.case__note { grid-column: 1 / -1; margin: 0; }

/* ── percurso + competências (secção clara) ──────────────────────────── */
.subhead { margin: clamp(56px, 8vw, 96px) 0 28px; padding-top: 28px; border-top: 2px solid var(--ink); display: grid; gap: 10px; }
.subhead h3 { font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: -.035em; }
.subhead p { color: var(--muted); margin: 0; max-width: 60ch; }
@media (min-width: 900px) { .subhead { grid-template-columns: 1fr 1fr; align-items: end; } }
.section--paper .skill { background: rgba(255, 255, 255, .55); }
.section--paper .skill:hover { border-color: var(--accent-ink); }
.section--paper .skill__n { color: var(--accent-ink); }
.section--paper .key { background: #fff; }
.section--paper .key b { background: var(--paper); color: var(--accent-ink); }

/* ── detalhes recolhíveis ────────────────────────────────────────────── */
.more > summary { list-style: none; cursor: pointer; display: none; }
.more > summary::-webkit-details-marker { display: none; }
@media (max-width: 760px) {
  .more > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; font: 500 .8125rem/1 var(--mono); text-transform: uppercase; color: var(--muted); }
  .more > summary::after { content: "+"; font: 400 1.4rem/1 var(--body); color: var(--accent); }
  .more[open] > summary { margin-bottom: 8px; }
  .more[open] > summary::after { content: "–"; }
  /* timeline: no telemóvel fica só a lista, que já tem o detalhe */
  .tl, .tl__note { display: none; }
  /* outros projetos em faixa horizontal */
  .minis { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 12px; }
  .mini { flex: none; width: 78vw; scroll-snap-align: start; }
  .section { padding: 64px 0; }
  .cases { gap: 64px; padding-top: 56px; }
}

/* ── telemóvel: página mais curta ────────────────────────────────────── */
@media (max-width: 760px) {
  .feature__strip { display: none; }
  .case__media .frame--desk ~ .frame--desk { display: none; }
  .mosaic__item:nth-child(n+4) { display: none; }
  .mosaic--film, .mosaic--tall { grid-template-columns: repeat(3, 1fr); }
  .mosaic--wide .mosaic__item:nth-child(n+3) { display: none; }
  .skill { padding: 18px; }
  .skill__n { margin-bottom: 12px; }
  .skill ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .skill li { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .875rem; }
  .tools > div { padding: 12px 0; }
  .key { padding: 4px 10px; box-shadow: none; font-size: .875rem; }
  .key b { display: none; }
  .job { padding: 22px 0; }
  .prod__item { padding: 16px 0 18px; }
  .prod__item h3 { margin: 8px 0 4px; font-size: 1.25rem; }
  .about__text { font-size: 1rem; }
}
.menu .menu__lang { font: 600 .8125rem/1 var(--mono); border: 1px solid var(--line); margin-left: 4px; }

/* ═══ Revisão final: narrativa Marketing + Web + Conteúdo ═════════════════ */
/* hero */
.hero__thesis { font: 650 clamp(1.5rem, 2.6vw, 2.15rem)/1.12 var(--display); letter-spacing: -.03em; margin: 20px 0 10px; max-width: 20ch; }
.hero__lead { margin-bottom: 22px; }
.hero__pillars { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.hero__pillars li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .875rem; font-weight: 500; }
.hero__pillars li span { font: 500 .6875rem/1 var(--mono); color: var(--accent); }
.hero__pillars .hero__across { border-style: dashed; color: var(--muted); }

/* pilares */
.pgrid { display: grid; gap: 16px; }
@media (min-width: 900px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
.pillar { position: relative; border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px 22px; background: var(--bg-2); display: flex; flex-direction: column; transition: border-color .3s, transform .4s var(--ease); }
.pillar:hover { border-color: var(--accent); transform: translateY(-3px); }
.pillar__n { font: 500 .75rem/1 var(--mono); color: var(--accent); margin-bottom: 26px; }
.pillar h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -.035em; }
.pillar__line { color: var(--muted); margin: 10px 0 18px; }
.pillar ul { list-style: none; margin-bottom: 18px; }
.pillar li { padding: 7px 0; border-top: 1px solid var(--line); font-size: .9375rem; }
.pillar__cta { margin-top: auto; font-weight: 600; text-decoration: none; color: var(--accent); font-size: .9375rem; }
.pillar__cta:hover { color: var(--text); }
.aiband { position: relative; border-radius: 16px; padding: 18px 22px; display: grid; gap: 6px 24px; background: linear-gradient(90deg, rgba(255, 90, 43, .16), rgba(255, 90, 43, .04) 70%), var(--bg-2); border: 1px solid rgba(255, 90, 43, .45); }
.aiband p { margin: 0; }
.aiband__k { font: 600 .8125rem/1.4 var(--mono); text-transform: uppercase; color: var(--accent); white-space: nowrap; }
@media (min-width: 900px) {
  .aiband { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; margin-top: -4px; }
  .aiband::before { content: ""; position: absolute; left: 16.66%; right: 16.66%; top: -17px; height: 16px; border-left: 1px dashed rgba(255, 90, 43, .6); border-right: 1px dashed rgba(255, 90, 43, .6); background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(255, 90, 43, .6) calc(50% - .5px), rgba(255, 90, 43, .6) calc(50% + .5px), transparent calc(50% + .5px)); }
}

/* como se ligam */
.flow { margin-top: clamp(48px, 7vw, 80px); }
.flow__title { font: 500 .8125rem/1 var(--mono); text-transform: uppercase; color: var(--muted); margin-bottom: 18px; letter-spacing: .04em; }
.flow__steps { list-style: none; display: grid; gap: 10px; position: relative; }
@media (min-width: 900px) { .flow__steps { grid-template-columns: repeat(3, 1fr); } .flow__step--ai { grid-column: 1 / -1; } }
.flow__step { font: 600 clamp(1.15rem, 2vw, 1.5rem)/1.25 var(--display); letter-spacing: -.02em; padding: 18px 20px; border-left: 2px solid var(--line); color: var(--muted); transition: color .6s var(--ease), border-color .6s var(--ease); transition-delay: calc(var(--i) * .25s); }
.flow__step b { color: var(--text); font-weight: 700; }
.flow.is-in .flow__step { color: var(--text); border-color: var(--accent); }
.flow__step--ai { border-left: 0; border-top: 2px dashed var(--line); padding-left: 0; }
.flow.is-in .flow__step--ai { border-color: var(--accent); }
.flow__step--ai b { color: var(--accent); }

/* filtro e tags */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -12px 0 8px; }
.filters__k { font: 500 .75rem/1 var(--mono); text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.filter { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-weight: 600; font-size: .9375rem; color: var(--muted); transition: all .2s; }
.filter:hover { color: var(--text); border-color: var(--muted); }
.filter[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.ptags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.ptag { font: 600 .6875rem/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 6px 9px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); }
.ptag--growth { color: #7fd69a; border-color: rgba(127, 214, 154, .4); }
.ptag--web { color: #8ab4ff; border-color: rgba(138, 180, 255, .4); }
.ptag--content { color: #ffb257; border-color: rgba(255, 178, 87, .4); }
.ptag--ai { color: var(--accent); border-color: rgba(255, 90, 43, .5); }
[hidden] { display: none !important; }

/* briefing do projeto */
.brief { margin: 0; display: grid; }
.brief > div { display: grid; gap: 4px; padding: 13px 0; border-top: 1px solid var(--line); }
.brief dt { font: 500 .75rem/1.6 var(--mono); text-transform: uppercase; color: var(--muted); }
.brief dd { margin: 0; }
.brief ul { padding-left: 1.1em; }
.brief li + li { margin-top: 3px; }
.brief li::marker { color: var(--accent); }
.brief__tools { color: var(--muted); font-size: .9375rem; }
.brief__result dd { font-weight: 600; padding-left: 12px; border-left: 2px solid var(--accent); }
@media (min-width: 600px) { .brief > div { grid-template-columns: 120px 1fr; gap: 16px; } }
.case .eyebrow .status { margin-left: 6px; }
.case__media .frame--phone { width: clamp(100px, 22vw, 170px); }

/* growth */
.growth { background: var(--bg-2); border-top: 1px solid var(--line); }
.stats { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: clamp(32px, 5vw, 56px); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stats li { background: var(--bg); padding: 24px; display: grid; gap: 8px; }
.stats b { font: 750 clamp(2.6rem, 6vw, 4.2rem)/.9 var(--display); letter-spacing: -.05em; color: var(--accent); }
.stats span { color: var(--muted); max-width: 26ch; }
.channels { list-style: none; display: grid; gap: 0 40px; }
@media (min-width: 700px) { .channels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .channels { grid-template-columns: repeat(3, 1fr); } }
.channels li { padding: 18px 0 20px; border-top: 1px solid var(--line); }
.channels h3 { font-size: 1.25rem; margin-bottom: 6px; }
.channels p { color: var(--muted); margin: 0; }

/* web */
.wsteps { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: clamp(32px, 5vw, 48px); }
@media (min-width: 760px) { .wsteps { grid-template-columns: repeat(4, 1fr); } }
.wsteps li { display: flex; gap: 10px; align-items: baseline; padding: 14px 16px; border: 1px solid var(--ink-line); border-radius: 12px; font: 650 1.15rem/1 var(--display); background: rgba(255, 255, 255, .5); }
.wsteps span { font: 500 .6875rem/1 var(--mono); color: var(--accent-ink); }
.sites { list-style: none; display: grid; gap: 28px; }
@media (min-width: 800px) { .sites { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; } }
.site a { display: block; text-decoration: none; color: inherit; }
.site__shots { position: relative; display: block; padding-right: 40px; }
.site__shots .frame--desk { display: block; aspect-ratio: 16 / 10; }
.site__shots .frame--desk img { height: 100%; object-fit: cover; object-position: top; }
.site__shots .frame--phone { position: absolute; right: 0; bottom: -18px; width: 26%; max-width: 120px; aspect-ratio: 9 / 19; }
.site__shots .frame--phone img { height: 100%; object-fit: cover; object-position: top; }
.site__meta { display: grid; gap: 4px; margin-top: 28px; }
.site__live { font: 600 .6875rem/1 var(--mono); text-transform: uppercase; color: #24613a; display: inline-flex; align-items: center; gap: 6px; }
.site__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2f9e5a; }
.site__meta b { font: 700 1.4rem/1.2 var(--display); letter-spacing: -.02em; }
.site__meta > span:last-child { color: var(--ink-muted); }
.site a:hover b { color: var(--accent-ink); }
.site a:hover .frame img { transform: scale(1.02); }

/* showreel */
.showreel { margin-bottom: 28px; }
.showreel__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #000; padding: 0; cursor: pointer; color: var(--text); }
.showreel__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .4s; }
.showreel__frame:hover .showreel__poster { transform: scale(1.02); }
.showreel__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0, 0, 0, .65)); }
.showreel__play { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px; padding: 14px 24px 14px 16px; border-radius: 999px; background: var(--accent); color: var(--ink); font-weight: 700; }
.showreel__play svg { width: 28px; height: 28px; }
.showreel__meta, .showreel__soon { position: absolute; z-index: 1; left: 20px; bottom: 18px; font: 500 .8125rem/1.3 var(--mono); text-transform: uppercase; }
.showreel__frame--soon { cursor: default; }
.showreel__frame--soon .showreel__poster { opacity: .45; filter: grayscale(.4); }
.showreel__soon b { display: block; font: 750 clamp(2rem, 6vw, 4rem)/.9 var(--display); letter-spacing: -.05em; text-transform: none; margin-bottom: 8px; }
.reel__intro { color: var(--muted); margin: 0 0 18px; }
.content .prod { padding-top: clamp(24px, 4vw, 48px); }

/* diálogos */
dialog { color: var(--text); }
dialog::backdrop { background: rgba(8, 8, 7, .78); backdrop-filter: blur(6px); }
.cvd { border: 1px solid var(--line); border-radius: 20px; background: var(--bg-2); padding: 0; width: min(560px, calc(100vw - 32px)); }
.cvd__inner { padding: 26px; }
.cvd__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cvd__head h2 { font-size: 2rem; letter-spacing: -.04em; }
.cvd__close, .srd__close { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-weight: 600; }
.cvd__close:hover, .srd__close:hover { border-color: var(--accent); }
.cvd__intro { color: var(--muted); margin: 8px 0 18px; }
.cvd__list { list-style: none; display: grid; gap: 8px; }
.cvd__opt { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); text-decoration: none; transition: border-color .2s, background .2s; }
.cvd__opt:hover, .cvd__opt:focus-visible { border-color: var(--accent); background: #2a1a13; color: var(--text); }
.cvd__k { font: 700 1.15rem/1.2 var(--display); }
.cvd__t { grid-column: 1; color: var(--muted); font-size: .9375rem; }
.cvd__dl { grid-column: 2; grid-row: 1 / 3; align-self: center; font: 600 .75rem/1 var(--mono); color: var(--accent); }
.cvd__foot { margin: 16px 0 0; color: var(--muted); font-size: .9375rem; }
.cvd__foot a { color: var(--text); }
.srd { border: 0; padding: 0; background: transparent; width: min(1200px, calc(100vw - 32px)); max-width: none; overflow: visible; }
.srd__close { position: absolute; right: 0; top: -56px; background: var(--bg-2); }
.srd__media { aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; }
.srd__media video, .srd__media iframe { width: 100%; height: 100%; border: 0; display: block; }

/* percurso curto */
.jobs2 { list-style: none; margin-top: 8px; }
.job2 { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line); }
.job2__when { font: 500 .8125rem/1.6 var(--mono); color: var(--muted); margin: 0; }
.job2 h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -.025em; }
.job2 h3 span { color: var(--accent-ink); font-weight: 600; }
.job2 p { margin: 4px 0 0; color: var(--muted); }
.job2__prog { font-style: italic; }
.job2--now h3::after { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-left: 10px; vertical-align: .3em; }
@media (min-width: 900px) { .job2 { grid-template-columns: 200px 1fr; gap: 32px; } .job2__when { padding-top: .45em; } }
.tools2 { margin: 0; display: grid; }
.tools2 > div { display: grid; gap: 6px; padding: 16px 0; border-top: 1px solid var(--line); }
.tools2 dt { font: 600 .8125rem/1.4 var(--mono); text-transform: uppercase; color: var(--accent-ink); }
.tools2 dd { margin: 0; font-size: 1.05rem; }
@media (min-width: 800px) { .tools2 > div { grid-template-columns: 200px 1fr; align-items: baseline; gap: 32px; } }
.textlink { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; color: inherit; }

/* contacto */
.contact__lead { font: 600 clamp(1.15rem, 2.2vw, 1.6rem)/1.3 var(--display); letter-spacing: -.02em; max-width: 30ch; margin: 18px 0 0; color: var(--muted); }
.contact__title { margin-top: 10px; }

@media (max-width: 760px) {
  .hero__thesis { max-width: none; }
  .hero__pillars li { font-size: .8125rem; padding: 6px 10px; }
  .site__shots { padding-right: 28px; }
  .stats li { padding: 18px 20px; }
}
@media (prefers-reduced-motion: reduce) { .flow__step { color: var(--text); } }
@media (min-width: 1000px) {
  .hero { padding-top: 28px; }
  .hero .hero__title { font-size: clamp(4rem, 8.6vw, 8.4rem); }
  .hero__pillars { margin-bottom: 22px; }
}

.foot a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 760px) {
  .pillar ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .pillar li { font-size: .875rem; }
  .pillar__n { margin-bottom: 14px; }
  .more--did > summary { min-height: 40px; }
  .case { gap: 20px; }
  .content .prod__item p { font-size: .9375rem; }
}

/* ═══ Revisão visual: projetos, cartões, showreel e diagrama ══════════════ */
.section__title { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }

/* projetos */
.cases2 { display: grid; gap: clamp(72px, 9vw, 120px); padding-top: clamp(48px, 6vw, 72px); }
.case2 { display: grid; gap: 28px 56px; align-items: center; }
@media (min-width: 960px) {
  .case2 { grid-template-columns: 7fr 5fr; }
  .case2--flip { grid-template-columns: 5fr 7fr; }
  .case2--flip .case2__visual { order: 2; }
}
.case2__main { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 40px 90px -40px #000; }
.case2__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.case2:hover .case2__img { transform: scale(1.025); }
.case2__main .ba, .case2__main .pod { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
.case2__badge { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border-radius: 14px; background: rgba(15, 15, 13, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .875rem; max-width: 300px; line-height: 1.3; }
.case2__badge .case2__n { font: 750 2.6rem/.8 var(--display); letter-spacing: -.05em; color: var(--accent); }
.case2__strip { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 10px; margin-top: 10px; }
.case2__strip li { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); }
.case2__strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .5s; filter: saturate(.9); }
.case2__strip li:hover img { transform: scale(1.06); filter: none; }
.case2__title { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -.045em; line-height: .95; margin: 6px 0 14px; }
.case2__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.case2__meta .ptags { margin: 0; }
.case2__challenge { font: 600 clamp(1.1rem, 1.6vw, 1.3rem)/1.38 var(--display); letter-spacing: -.01em; margin: 0 0 16px; }
.case2__result { display: grid; gap: 4px; margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; background: rgba(255, 90, 43, .09); border: 1px solid rgba(255, 90, 43, .35); font-weight: 600; }
.case2__result span { font: 500 .6875rem/1 var(--mono); text-transform: uppercase; color: var(--accent); }
.case2__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-weight: 600; transition: border-color .2s, background .2s; }
.case2__link span { color: var(--muted); font-weight: 500; }
.case2__link:hover { border-color: var(--accent); background: rgba(255, 90, 43, .08); color: var(--text); }
.case2 .brief > div { padding: 11px 0; }
.case2 .caption { margin-top: 10px; }
@media (max-width: 600px) { .case2__strip { grid-template-columns: repeat(min(var(--n, 4), 3), 1fr); } .case2__strip li:nth-child(n+4) { display: none; } }

/* mais trabalho */
.mcards { list-style: none; display: grid; gap: 16px; }
@media (min-width: 640px) { .mcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mcards { grid-template-columns: repeat(4, 1fr); } }
.mcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bg-2); transition: border-color .3s, transform .4s var(--ease); }
.mcard:hover { border-color: var(--accent); transform: translateY(-3px); }
.mcard__pic { aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.mcard__pic img { width: 100%; height: 100%; object-fit: cover; }
.mcard__type { display: grid; place-items: end start; height: 100%; padding: 18px; font: 750 1.9rem/.95 var(--display); letter-spacing: -.045em; background: radial-gradient(90% 90% at 100% 0%, rgba(255, 90, 43, .45), transparent 60%), #141310; }
.mcard__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mcard h3 { font-size: 1.3rem; letter-spacing: -.02em; }
.mcard .ptags { margin: 6px 0 8px; }
.mcard p { margin: 0 0 6px; font-size: .9375rem; }
.mcard__role { color: var(--muted); }
.mcard__link { margin-top: auto; padding-top: 8px; font-weight: 600; text-decoration: none; color: var(--accent); }

/* showreel: parede de excertos enquanto o vídeo final não existe */
.srwall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; background: #000; }
.srwall video { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.85); }
.showreel__frame--soon::after { background: radial-gradient(70% 90% at 30% 100%, rgba(0, 0, 0, .85), transparent 70%), linear-gradient(transparent 50%, rgba(0, 0, 0, .55)); }
.showreel__soon { left: clamp(18px, 3vw, 36px); bottom: clamp(18px, 3vw, 32px); }
.showreel__soon b { font-size: clamp(2.6rem, 8vw, 6.5rem); margin-bottom: 10px; }
.showreel__soon span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(15, 15, 13, .6); }
.showreel__soon span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 1.4s steps(2) infinite; }
@media (max-width: 700px) { .srwall { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); } .srwall video:nth-child(n+5) { display: none; } .showreel__frame { aspect-ratio: 4 / 5; } }

/* diagrama "como se ligam" */
.flow__nodes { list-style: none; display: grid; gap: 14px; position: relative; }
@media (min-width: 900px) {
  .flow__nodes { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .flow__nodes::before { content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: 2px; background: var(--line); }
  .flow__nodes::after { content: ""; position: absolute; left: 8px; top: 8px; height: 2px; width: calc(100% - 16px); background: linear-gradient(90deg, var(--accent), #ffb257); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) .2s; }
  .flow.is-in .flow__nodes::after { transform: none; }
}
.flow__node { position: relative; display: grid; gap: 6px; padding-top: 30px; }
.flow__dot { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); transition: border-color .4s, box-shadow .4s, background .4s; transition-delay: calc(.3s + var(--i) * .45s); z-index: 1; }
.flow.is-in .flow__dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 6px rgba(255, 90, 43, .18); }
.flow__node b { font: 750 clamp(1.6rem, 3vw, 2.4rem)/1 var(--display); letter-spacing: -.04em; }
.flow__node span { font: 500 1.05rem/1.4 var(--body); color: var(--muted); }
.flow__rail { margin: 26px 0 0; padding: 16px 20px; border-radius: 14px; border: 1px dashed rgba(255, 90, 43, .6); font-size: 1.05rem; background: rgba(255, 90, 43, .06); }
.flow__rail b { color: var(--accent); }
@media (max-width: 899px) { .flow__node { padding: 0 0 0 32px; } .flow__dot { top: 4px; } }
@media (prefers-reduced-motion: reduce) { .flow__nodes::after { transform: none; } .flow__dot { border-color: var(--accent); background: var(--accent); } }
.mcard__pic img[src*="boneco"] { object-position: center 35%; }
.case2__link { max-width: 100%; white-space: nowrap; }
.case2__link span:not(.sr-only) { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.playlab__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.playlab__eyes{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:440px}
.playlab__eyes .art{justify-self:center;height:400px}
.playlab__eyes .portrait{width:390px}
.playlab__eyes h2{font:750 clamp(38px,5vw,68px)/1.03 var(--display);letter-spacing:-.05em;margin:16px 0}
.playlab__shoe,.playlab__bulk,.playlab__padel{height:260px}
.playlab__bulk{background:#111;color:#f4f2ed;padding:26px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.playlab__bulk strong{font:900 clamp(32px,3.3vw,54px)/.9 var(--display);letter-spacing:-.04em}
.playlab__bulk em{font-style:normal;color:#f43245}.playlab__bulk span,.playlab__bulk small{font:700 12px var(--mono)}
.playlab__padel{position:relative;background:#183d35;color:#d1aa68;padding:20px;display:flex;flex-direction:column;justify-content:space-between}
.playlab__padel svg{width:100%;height:185px}.playlab__padel span,.playlab__padel b{font:700 11px var(--mono);letter-spacing:.1em}
.playlab__padel b{position:absolute;bottom:16px;right:20px;border:1px solid currentColor;border-radius:30px;padding:6px 10px}
.playlab__grid .playlab__copy{padding:26px}.playlab__grid .playlab__copy h3{font-size:30px}
.playlab__grid .playlab__copy{display:flex;flex-direction:column}.playlab__grid .playlab__copy .btn{margin-top:auto;align-self:flex-start}
@media(max-width:1000px){.playlab__grid{grid-template-columns:1fr 1fr}.playlab__grid>article:last-child{grid-column:1/-1}}
@media(max-width:760px){.playlab__eyes{grid-template-columns:1fr}.playlab__eyes .art{height:330px}.playlab__eyes .portrait{width:340px}.playlab__grid{grid-template-columns:1fr}.playlab__grid>article:last-child{grid-column:auto}}
.case2__visual,.case2__copy{min-width:0}.case2__strip{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
@media(max-width:600px){.case2__strip{grid-template-columns:repeat(min(var(--n,4),3),minmax(0,1fr))}}
@media(max-width:959px){.case2{grid-template-columns:minmax(0,1fr)}.case2>*{min-width:0}.case2__link{max-width:100%;overflow-wrap:anywhere}}

.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:40px}
.project-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg-2);min-width:0}
.project-card__visual{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2);color:var(--text)}
.project-card__visual>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.project-card__visual:hover>img{transform:scale(1.025)}
.project-card__visual .pod{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:0}
.project-card__type{height:100%;display:grid;place-items:center;padding:24px;font:750 clamp(30px,4vw,64px)/1.05 var(--display);letter-spacing:-.04em;background:var(--accent);color:var(--ink);text-align:center}
.project-card__copy{padding:28px}.project-card__copy h3{font:750 clamp(28px,3vw,38px)/1.1 var(--display);letter-spacing:-.035em;margin:18px 0 12px}.project-card__copy h3 a{text-decoration:none}.project-card__copy p{font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:24px}
.project-card__copy .textlink{display:inline-flex;align-items:center;gap:10px}.project-grid [hidden]{display:none}
.page-actions{margin-top:40px}.home-background{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.home-background p{margin:20px 0;line-height:1.7}.home-background .section__title{font-size:clamp(32px,4vw,52px)}
.home-playground__inner{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:center}.home-playground__inner>img{width:100%;height:auto}.home-playground__inner p:not(.kicker){color:var(--muted);max-width:600px;margin:20px 0 28px;line-height:1.6}.home-playground__inner .section__title{font-size:clamp(32px,4vw,52px)}
.page-intro{padding-bottom:0}.page-intro .section__title{max-width:850px}.page-intro .section__intro{margin-top:28px;max-width:650px}.breadcrumb{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px;margin-bottom:32px}.breadcrumb a{color:var(--text)}
.project-detail .mosaic{margin-top:48px}.project-method{border-block:1px solid var(--line);padding:28px 0}.project-method>summary{cursor:pointer;list-style:none;font:600 clamp(18px,2vw,26px)/1.4 var(--display)}.project-method[open]>summary{margin-bottom:30px}
@media(max-width:760px){.project-grid,.home-background{grid-template-columns:1fr}.project-grid{gap:24px}.project-card__copy{padding:24px}.home-background{gap:24px}.home-playground__inner{grid-template-columns:1fr;gap:16px}.home-playground__inner>img{width:160px}.breadcrumb{font-size:12px}}
@media(prefers-reduced-motion:reduce){.project-card__visual>img{transition:none}}

/* Direção editorial: composição, prova e ritmo. */
.page-home .hero{padding-top:64px;padding-bottom:0;overflow:hidden;background:radial-gradient(ellipse at 85% 15%,rgba(255,90,43,.13),transparent 55%)}
.page-home .hero__grid{grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.page-home .hero__title{font-size:clamp(90px,10.5vw,164px);line-height:.82;letter-spacing:-.065em}
.page-home .hero__title .w+.w{padding-left:0}.page-home .hero__thesis{font-size:clamp(26px,3vw,40px);max-width:20ch;margin-top:30px;line-height:1.08}.page-home .hero__lead{max-width:42ch;font-size:15px;line-height:1.65;margin:20px 0}.hero__disciplines{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;margin-bottom:26px}.hero__disciplines span{color:var(--accent);padding:0 8px}
.hero-portrait{position:relative;margin:0;padding-top:24px}.hero-portrait__photo{aspect-ratio:4/4.8;border-radius:48% 48% 12px 12px;overflow:hidden;background:var(--paper);position:relative}.hero-portrait__photo img{width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:saturate(.55) contrast(1.06)}
.hero-portrait__mark{position:absolute;top:8px;left:0;font:600 12px var(--mono);z-index:2;color:var(--muted)}.hero-portrait__star{position:absolute;right:-24px;bottom:52px;font-size:110px;line-height:1;color:var(--accent);transform:rotate(-12deg)}.hero-portrait figcaption{display:flex;justify-content:space-between;gap:12px;font:500 10px var(--mono);letter-spacing:.08em;padding:18px 0;color:var(--muted)}
.hero__footer{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);margin-top:52px;padding-top:24px;padding-bottom:24px;font:500 11px var(--mono);color:var(--muted)}.hero__footer a{color:var(--text);text-decoration:none}

.project-grid--editorial{gap:64px 32px}.project-card--editorial{border:0;border-radius:0;background:transparent}.project-card--editorial .project-card__visual{border-radius:14px;background:var(--bg-2)}.project-card--editorial .project-card__copy{padding:24px 0 0}.project-card--editorial .project-card__copy h3{font-size:clamp(32px,4vw,54px);margin:16px 0}.project-card--editorial .project-card__copy p{max-width:54ch}.project-grid--editorial>.project-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.45fr 1fr;gap:36px;align-items:center}.project-grid--editorial>.project-card:first-child .project-card__visual{aspect-ratio:4/3}.project-grid--editorial>.project-card:first-child .project-card__copy{padding:0}.project-grid--editorial>.project-card:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.45fr;gap:36px;align-items:center}.project-grid--editorial>.project-card:last-child .project-card__visual{order:2;aspect-ratio:16/10}.project-grid--editorial>.project-card:last-child .project-card__copy{padding:0}
.project-card__arrow{position:absolute;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink);font-size:26px;transition:transform .25s}.project-card__visual:hover .project-card__arrow{transform:rotate(45deg)}.project-card__preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .3s}.project-card__visual.is-previewing .project-card__preview{opacity:1}.project-card__preview-label{position:absolute;top:18px;left:18px;background:#111c;color:#fff;padding:8px 12px;border-radius:30px;font:500 10px var(--mono);letter-spacing:.08em}
.project-detail .case2{grid-template-columns:minmax(0,1fr);gap:48px;align-items:start}.project-detail .case2__main{aspect-ratio:16/9;max-height:700px}.project-detail .case2__body{display:grid;grid-template-columns:1.3fr 1fr;gap:24px 56px;align-items:start}.project-detail .case2__body>.eyebrow,.project-detail .case2__body>.case2__title,.project-detail .case2__body>.case2__meta,.project-detail .case2__body>.case2__challenge{grid-column:1/-1;margin:0}.project-detail .case2__challenge{max-width:850px}.project-detail .brief{grid-column:1;grid-row:5/span 2}.project-detail .case2__result{grid-column:2;padding:30px;font-size:clamp(22px,2.6vw,36px);line-height:1.2;letter-spacing:-.025em;margin:0;background:var(--paper);color:var(--ink);border:0;border-radius:12px}.project-detail .case2__result span{font:500 11px var(--mono);color:var(--accent-ink);margin-bottom:12px;letter-spacing:.1em}.project-detail .case2__link{grid-column:2;max-width:100%;overflow-wrap:anywhere;margin:0;justify-self:start}.project-next{display:flex;justify-content:space-between;align-items:center;gap:32px;border-top:1px solid var(--line);padding-top:40px;margin-top:70px}.project-next>a:last-child{text-decoration:none;display:flex;flex-direction:column;gap:12px}.project-next strong{font:700 clamp(24px,3vw,40px)/1.1 var(--display);letter-spacing:-.04em}.about-studio{margin-top:40px}.about-studio .studio{max-width:420px}
@media(max-width:999px){.page-home .hero__grid{gap:32px}.page-home .hero__title{font-size:clamp(76px,12vw,125px)}.hero-portrait__star{font-size:80px;right:-12px}.project-detail .case2__body{gap:24px 32px}}
@media(max-width:760px){.page-home .hero{padding-top:40px}.page-home .hero__grid{grid-template-columns:1fr;gap:32px}.page-home .hero__title{font-size:clamp(90px,23vw,140px)}.page-home .hero__eyebrow{font-size:10px}.page-home .hero__thesis{font-size:30px}.hero-portrait{width:min(100%,440px);justify-self:center}.hero-portrait__photo{aspect-ratio:4/4.3}.hero-portrait__star{font-size:86px;right:0;bottom:46px}.hero__footer{margin-top:28px;font-size:10px}.hero__footer>span{max-width:19ch}.project-grid--editorial{gap:48px}.project-grid--editorial>.project-card:first-child,.project-grid--editorial>.project-card:last-child{display:flex;flex-direction:column;gap:0;align-items:stretch}.project-grid--editorial>.project-card:last-child .project-card__visual{order:0}.project-grid--editorial>.project-card:first-child .project-card__copy,.project-grid--editorial>.project-card:last-child .project-card__copy{padding-top:24px}.project-detail .case2__body{display:block}.project-detail .case2__body>*{margin-bottom:24px!important}.project-detail .case2__title{font-size:34px}.project-detail .case2__result{padding:24px}.project-next{flex-direction:column;align-items:flex-start}.project-detail .case2__main{aspect-ratio:4/3}}
@media(prefers-reduced-motion:reduce){.project-card__preview-label,.project-card__preview{display:none}.project-card__arrow{transition:none}}
@media(hover:none),(pointer:coarse){.project-card__preview-label{display:none}}
@media(min-width:761px){.project-detail .case2__body:not(.has-results){grid-template-columns:minmax(0,1fr)}.project-detail .case2__body:not(.has-results) .brief{max-width:850px;grid-row:auto}.project-detail .case2__body:not(.has-results) .case2__link{grid-column:1}}
.page-home .hero .studio{max-width:540px}.home-playground__inner{grid-template-columns:350px minmax(0,1fr);gap:48px}.home-playground .art{width:350px;height:350px;max-width:100%;overflow:hidden}.home-playground .portrait{width:340px}.home-playground__actions{display:flex;flex-wrap:wrap;gap:12px}.home-playground .disc{opacity:.95}.home-playground .ouch{font-size:32px}
@media(max-width:760px){.home-playground__inner{grid-template-columns:minmax(0,1fr);gap:24px}.home-playground .art{justify-self:center;width:min(350px,100%);height:330px}.home-playground .portrait{max-width:100%}.page-home .hero .studio{max-width:440px}}

.web-mockup{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 25% 5%,#ffffffc9,transparent 65%),var(--mockup-tone);container-type:inline-size}
.web-mockup__halo{position:absolute;width:68%;aspect-ratio:1;left:36%;top:-26%;border:1px solid #ffffff85;border-radius:50%;box-shadow:0 0 0 42px #ffffff15,0 0 0 84px #ffffff10;pointer-events:none}
.web-mockup::after{content:"";position:absolute;left:10%;right:8%;bottom:5%;height:7%;border-radius:50%;background:#24232135;filter:blur(14px);z-index:-1}
.web-mockup__laptop{position:absolute;width:79%;left:5%;top:11%;transform:rotate(-3deg);transition:transform .55s var(--ease)}
.web-mockup__display{position:relative;padding:1.7% 1.5% 1.5%;background:linear-gradient(140deg,#5c5b5a,#151515 35%,#333);border:1px solid #8d8d8a;border-radius:2.2cqw 2.2cqw .5cqw .5cqw;box-shadow:0 2.8cqw 4cqw -2cqw #26242170}
.web-mockup__camera{position:absolute;width:.45cqw;aspect-ratio:1;border-radius:50%;background:#090909;left:50%;top:.45cqw;box-shadow:inset 0 0 1px #888}
.web-mockup__screen{aspect-ratio:16/10;overflow:hidden;border-radius:1cqw 1cqw .2cqw .2cqw;background:#fff}
.web-mockup__screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.web-mockup__base{position:relative;margin-left:-5%;width:110%;height:1.9cqw;border-radius:0 0 45% 45% / 0 0 100% 100%;background:linear-gradient(#e4e3e1,#b4b5b6 45%,#747577);box-shadow:0 .8cqw 1.1cqw -.5cqw #3337}
.web-mockup__base::before{content:"";position:absolute;left:41%;width:18%;height:42%;border-radius:0 0 .8cqw .8cqw;background:linear-gradient(#8a8b8c,#c8c8c7)}
.web-mockup__phone{position:absolute;right:6%;bottom:9%;width:20%;aspect-ratio:390/844;padding:.75%;border-radius:3cqw;background:linear-gradient(120deg,#696966,#151515 45%,#555);box-shadow:0 2cqw 3.5cqw #28252050,inset 0 0 0 1px #ffffff80;transform:rotate(5deg);transition:transform .55s var(--ease)}
.web-mockup__phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:2.3cqw;background:#fff}
.web-mockup__island{position:absolute;top:2.4%;left:34%;width:32%;height:2.5%;background:#141414;border-radius:2cqw;z-index:1}
.project-card__visual:hover .web-mockup__laptop{transform:translateY(-1.2%) rotate(-1.5deg)}
.project-card__visual:hover .web-mockup__phone{transform:translateY(-2%) rotate(2deg)}
.project-detail .web-mockup__laptop{top:10%}
@media(prefers-reduced-motion:reduce){.web-mockup__laptop,.web-mockup__phone{transition:none}.project-card__visual:hover .web-mockup__laptop{transform:rotate(-3deg)}.project-card__visual:hover .web-mockup__phone{transform:rotate(5deg)}}
.project-detail .case2__main:has(.web-mockup){aspect-ratio:16/10;max-height:none}

.product-case__intro{max-width:1000px;margin-bottom:36px}.product-case h2{font:650 clamp(30px,4.5vw,60px)/1.06 var(--display);letter-spacing:-.045em;margin:16px 0 24px;max-width:20ch}.product-case__intro h2{font-size:clamp(38px,5.5vw,76px);max-width:21ch}.product-case__lead{font-size:clamp(18px,2vw,24px);line-height:1.55;max-width:65ch;color:var(--muted)}.product-case__facts{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;border-top:1px solid var(--line);padding-top:24px;margin:32px 0 0}.product-case__facts dt{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}.product-case__facts dd{margin:0;line-height:1.5;font-size:15px}.product-case>.caption{margin-top:12px}.product-case__nav{display:flex;gap:12px 32px;flex-wrap:wrap;border-block:1px solid var(--line);padding:20px 0;margin-top:36px}.product-case__nav a{font-size:14px;text-decoration:none;padding:6px 0}.product-case__nav span{font:500 11px var(--mono);color:var(--accent);margin-right:10px}.product-case__nav a:hover{text-decoration:underline;text-underline-offset:5px}.product-case__section{padding-top:clamp(64px,8vw,108px);scroll-margin-top:110px}.product-case__section p{line-height:1.7;color:var(--muted)}.product-case__challenge{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}.product-case__challenge>div:last-child{padding-top:44px}.product-case__challenge p+p{margin-top:20px}.product-case__section-intro{max-width:65ch}.product-journey{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.product-journey li{position:relative;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}.product-journey__number{font:500 12px var(--mono);color:var(--accent)}.product-journey h3{font:650 25px var(--display);letter-spacing:-.02em;margin:32px 0 12px}.product-journey p{font-size:14px;margin:0}.product-journey li:not(:last-child)::after{content:'→';position:absolute;right:-14px;top:24px;z-index:1;background:var(--bg);border-radius:50%;width:26px;height:26px;text-align:center;color:var(--accent)}.product-decisions{display:grid;gap:72px;margin-top:44px}.product-decision{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:center}.product-decision__number{font:650 clamp(60px,8vw,100px)/1 var(--display);letter-spacing:-.06em;color:var(--accent);opacity:.65}.product-decision h3{font:650 clamp(28px,3.2vw,42px)/1.1 var(--display);letter-spacing:-.03em;margin:20px 0}.product-decision__reason{border-left:2px solid var(--accent);padding:4px 0 4px 20px;margin-top:28px;color:var(--text)!important}.product-decision__reason span{display:block;font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.product-decision__visual{display:flex;justify-content:center;gap:20px;padding:36px 24px 24px;border-radius:18px;background:radial-gradient(ellipse at 0 0,#fff9,transparent 70%),#dbe3d7}.product-decision__visual figure{margin:0;min-width:0;width:230px}.product-decision__screen{padding:7px;border:1px solid #6a6a64;background:#222;border-radius:24px;box-shadow:0 18px 28px -12px #24241d60;overflow:hidden}.product-decision__screen img{display:block;width:100%;height:auto;border-radius:18px}.product-decision__visual figcaption{color:#44483f;font-size:11px;line-height:1.5;margin-top:16px}.product-decision--2 .product-decision__copy{order:2}.product-decision__visual--pair figure{width:46%}.product-decision__visual--desktop{padding:28px}.product-decision__visual--desktop figure{width:100%}.product-decision__visual--desktop .product-decision__screen{border-radius:12px;padding:6px}.product-decision__visual--desktop img{border-radius:6px}.product-case__status{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}.product-case__status>div{padding:28px;border:1px solid var(--line);border-radius:14px}.product-case__status>div:first-child{background:var(--bg-2)}.product-case__status h3{font:650 24px var(--display);margin:0 0 20px}.product-case__status ul{padding-left:20px;color:var(--muted)}.product-case__status li{line-height:1.65;margin-bottom:12px}.product-case__status li:last-child{margin-bottom:0}.product-case__status-note{max-width:80ch;font-size:14px;margin-top:24px}
@media(max-width:760px){.product-case__facts{grid-template-columns:1fr;gap:20px}.product-case__challenge,.product-decision{grid-template-columns:1fr;gap:24px}.product-case__challenge>div:last-child{padding-top:0}.product-journey{grid-template-columns:1fr 1fr;gap:12px}.product-journey li{padding:20px}.product-journey li::after{display:none}.product-journey h3{font-size:22px;margin-top:24px}.product-decision--2 .product-decision__copy{order:0}.product-decisions{gap:56px}.product-decision__visual{padding:24px 18px;gap:12px}.product-decision__screen{padding:5px;border-radius:18px}.product-decision__screen img{border-radius:13px}.product-decision__visual--desktop{padding:16px}.product-case__status{grid-template-columns:1fr}.product-case__nav{gap:8px 20px}.product-case__nav a{font-size:12px}}
.brand-case__decisions{display:grid;gap:80px;margin-top:48px}.brand-decision__heading{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:28px}.brand-decision h3{font:650 clamp(28px,3.5vw,46px)/1.08 var(--display);letter-spacing:-.035em;margin-top:18px}.brand-case__shots{display:flex;gap:20px;justify-content:center;padding:28px;background:var(--bg-2);border:1px solid var(--line);border-radius:18px}.brand-case__shots figure{margin:0;min-width:0;flex:1}.brand-case__shots img{display:block;width:100%;height:auto;border-radius:10px}.brand-case__shots--pair figure{width:50%}.brand-case__shots .brand-case__shot--phone{flex:0 1 300px;padding:7px;border:1px solid #666;border-radius:26px;background:#222;box-shadow:0 18px 30px #0003}.brand-case__shot--phone img{border-radius:20px}.brand-case__videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.brand-case__videos figure{margin:0}.brand-case__videos video{display:block;width:100%;aspect-ratio:9/16;object-fit:contain;background:#000;border-radius:14px}.brand-case__videos figcaption{font-size:13px;margin-top:12px;color:var(--muted)}.brand-case__results{padding:36px;margin-top:48px;border-radius:18px;background:var(--paper);color:var(--ink)}.brand-case__results dl{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:0}.brand-case__results dl>div{display:flex;flex-direction:column-reverse;gap:12px}.brand-case__results dd{font:650 clamp(48px,7vw,90px)/1 var(--display);letter-spacing:-.06em;margin:0}.brand-case__results dt{font-size:15px;max-width:28ch}.brand-case__results p{font-size:13px;line-height:1.6;margin-top:24px;max-width:80ch}.brand-case__delivered{padding:0;list-style:none;border-top:1px solid var(--line);margin:28px 0}.brand-case__delivered li{padding:16px 0;border-bottom:1px solid var(--line);line-height:1.5}.brand-case__delivered li::before{content:'↗';color:var(--accent);margin-right:12px}.product-journey{grid-template-columns:repeat(var(--steps,4),minmax(0,1fr))}.project-status-filter{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}.project-status-filter label{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.project-status-filter select{padding:12px 36px 12px 14px;max-width:100%;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);color:var(--text);font:inherit}.project-filter-count{margin:0;color:var(--muted);font-size:13px}.hero__cases{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-top:22px}.hero__cases>span{font:500 9px var(--mono);letter-spacing:.08em;color:var(--muted)}.hero__cases a{font-size:13px;text-decoration:none;text-underline-offset:4px}.hero__cases a:hover{text-decoration:underline}
@media(max-width:760px){.brand-decision__heading{grid-template-columns:1fr;gap:20px}.brand-case__videos{gap:12px;grid-template-columns:1fr}.brand-case__videos figure{max-width:300px;width:100%;justify-self:center}.brand-case__shots{padding:16px;gap:12px}.brand-case__shots--pair{flex-direction:column}.brand-case__shots--pair figure{width:100%}.brand-case__results{padding:24px}.brand-case__results dl{gap:20px}.brand-case__results dt{font-size:13px}.product-journey{grid-template-columns:1fr 1fr}.project-status-filter{gap:12px}.project-status-filter label{width:100%}.hero__cases>span{width:100%}}
.video-selection__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.video-selection figure{margin:0}.video-selection video{display:block;width:100%;height:420px;object-fit:contain;background:#070707;border-radius:14px}.video-selection figcaption{margin-top:16px}.image-viewer{width:min(1100px,94vw);max-height:90vh;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--bg);color:var(--text)}.image-viewer::backdrop{background:#000c;backdrop-filter:blur(6px)}.image-viewer header{display:flex;gap:20px;align-items:center;justify-content:space-between}.image-viewer h2{font:650 22px var(--display);margin:0}.image-viewer header button{background:var(--paper);color:var(--ink);padding:10px 14px;border:0;border-radius:20px;cursor:pointer}.image-viewer>p{font-size:13px;line-height:1.5;color:var(--muted);margin:16px 0}.image-viewer__body{overflow:auto;max-height:65vh;text-align:center;background:#111;border-radius:8px}.image-viewer__body img{display:block;width:100%;height:auto}.image-viewer__body img[src*="mobile"],.image-viewer__body img[src*="dgym-join"],.image-viewer__body img[src*="dgym-member"],.image-viewer__body img[src*="dgym-activity"]{max-width:620px;margin:auto}
@media(max-width:760px){.video-selection__grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:12px;gap:16px}.video-selection figure{scroll-snap-align:start}.video-selection video{height:360px}.image-viewer{padding:14px}}
.brand-case__shots{align-items:flex-start}.brand-decision{scroll-margin-top:110px}
.product-demo{padding:32px;margin-top:48px;border:1px solid var(--line);border-radius:18px;background:var(--bg-2)}.product-demo h2{font-size:clamp(28px,3.5vw,44px);max-width:24ch}.product-demo>p:not(.eyebrow){max-width:75ch;line-height:1.6;color:var(--muted);font-size:14px}.product-demo video{display:block;width:100%;height:auto;margin-top:24px;border-radius:10px;background:#090909}.case-contact{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:36px;margin-top:72px;background:var(--paper);color:var(--ink);border-radius:16px}.case-contact h2{font:650 clamp(26px,3vw,38px)/1.1 var(--display);letter-spacing:-.03em;max-width:22ch;margin:12px 0}.case-contact p{line-height:1.5}.case-contact>div:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:18px;flex-shrink:0}.case-contact .kicker{color:var(--accent-ink)}
@media(max-width:760px){.product-demo{padding:20px}.case-contact{padding:24px;flex-direction:column;align-items:flex-start}}
.product-demo{scroll-margin-top:100px}
.product-demo video{max-height:60vh;object-fit:contain}
.glow-guide{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin:48px 0 0;scroll-margin-top:100px;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--bg-2)}.glow-guide__copy{padding:48px 0 48px 48px}.glow-guide__copy h2{font:650 clamp(32px,4vw,54px)/1.05 var(--display);letter-spacing:-.045em;max-width:12ch;margin:20px 0}.glow-guide__copy>p:not(.eyebrow){line-height:1.7;max-width:36ch;color:var(--muted)}.glow-guide__map{padding:0;margin:36px 0;list-style:none;display:grid;gap:18px}.glow-guide__map li{display:flex;align-items:center;gap:16px;color:var(--muted);transition:color .2s}.glow-guide__map span{display:grid;place-items:center;border:1px solid var(--line);width:34px;height:34px;border-radius:50%;font:12px var(--mono)}.glow-guide__map [aria-current]{color:var(--text)}.glow-guide__map [aria-current] span{background:#fa4ad3;color:#171017;border-color:#fa4ad3}.glow-guide__stage{display:grid;place-items:center;padding:44px 24px;background:radial-gradient(ellipse at 50% 40%,#f7ace4,#dbc5dd 70%,#ccb6d1);min-width:0;align-self:stretch}.glow-phone{position:relative;width:100%;max-width:340px;min-height:620px;padding:34px 22px 26px;border:6px solid #292329;border-radius:44px;background:#0b0b0e;color:#fff;box-shadow:0 30px 50px -20px #34213788,0 0 0 1px #847486;isolation:isolate;font-family:var(--sans, sans-serif)}.glow-phone::after{content:'';position:absolute;bottom:9px;left:35%;right:35%;height:4px;border-radius:8px;background:#fff5}.glow-phone__island{position:absolute;top:9px;left:37%;width:26%;height:16px;background:#000;border-radius:20px}.glow-phone__brand{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #ffffff22;padding:12px 0 18px}.glow-phone__brand img{display:block;width:104px;height:52px;object-fit:contain}.glow-phone__brand span{font:8px var(--mono);letter-spacing:.08em;color:#c7bbc7}.glow-phone__note{font-size:10px!important;line-height:1.5;color:#c7bbc7!important;margin:16px 0 10px!important}.glow-progress{display:flex;gap:6px;margin-bottom:28px}.glow-progress i{height:3px;flex:1;background:#36303b;border-radius:2px}.glow-progress .is-active{background:#fa4ad3}.glow-phone [hidden]{display:none!important}.glow-phone h3{font:700 32px/1.05 var(--display);letter-spacing:-.03em;margin:12px 0 24px;color:#fff}.glow-step{color:#f78bdd!important;font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em;margin:0!important}.glow-phone fieldset{padding:0;border:0;margin:0 0 18px;min-width:0}.glow-phone legend{font-size:11px;color:#c7bbc7;margin-bottom:10px}.glow-option{display:block;position:relative;cursor:pointer;margin-bottom:8px}.glow-option input{position:absolute;opacity:0;width:1px;height:1px}.glow-option>span{display:flex;gap:12px;align-items:center;padding:16px 12px;border:1px solid #ffffff30;border-radius:12px;background:#ffffff06;font-size:13px;line-height:1.4;transition:background .2s,border-color .2s}.glow-option small{color:#bcaabc;font:9px var(--mono)}.glow-option b{margin-left:auto;color:#f78bdd;font-weight:400}.glow-option input:checked+span{border-color:#fa4ad3;background:#fa4ad31a}.glow-option input:focus-visible+span{outline:2px solid #fff;outline-offset:3px}.glow-days .glow-option b,.glow-times .glow-option b{display:none}.glow-days{display:grid;gap:6px;grid-template-columns:repeat(3,minmax(0,1fr))}.glow-days .glow-option>span{justify-content:center;text-align:center;padding:16px 6px;font-size:11px;min-height:64px}.glow-times{display:grid;gap:6px;grid-template-columns:repeat(3,minmax(0,1fr))}.glow-times .glow-option>span{justify-content:center;padding:14px 4px;font-size:12px}.glow-primary{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;padding:16px;margin:24px 0 0;border:0;border-radius:12px;background:#fa4ad3;color:#160d15;font:650 13px var(--display);text-decoration:none;cursor:pointer}.glow-primary:disabled{background:#353039;color:#a89ba8;cursor:default}.glow-primary:not(:disabled):hover{background:#ff82e4}.glow-back,.glow-reset{background:none;color:#d4c7d4;border:0;padding:14px 0;font-size:11px;cursor:pointer}.glow-reset{display:block;color:#f78bdd;padding:0}.glow-summary{margin:0;border-top:1px solid #ffffff24}.glow-summary>div{padding:12px 0;border-bottom:1px solid #ffffff24}.glow-summary dt{color:#c7bbc7;font-size:10px;margin-bottom:6px}.glow-summary dd{margin:0;font-size:14px;line-height:1.4}.glow-end{font-size:11px!important;line-height:1.6;color:#c7bbc7!important;margin:16px 0!important}.glow-phone section:not([hidden]){animation:glow-enter .22s ease-out}@keyframes glow-enter{from{opacity:.3;transform:translateY(7px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.glow-phone section:not([hidden]){animation:none}}@media(max-width:760px){.glow-guide{grid-template-columns:minmax(0,1fr);gap:0}.glow-guide__copy{padding:28px}.glow-guide__copy h2{max-width:16ch}.glow-guide__map{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0;font-size:12px}.glow-guide__map li{gap:7px}.glow-guide__stage{padding:32px 14px}.glow-phone{padding:34px 16px 26px;border-width:5px;border-radius:36px;min-height:620px}.glow-phone h3{font-size:29px}} 


.catalog-group{grid-column:1/-1;font:600 clamp(24px,3vw,34px)/1.15 var(--display);letter-spacing:-.025em;border-top:1px solid var(--line);padding-top:32px;margin:16px 0 0}.catalog-group:first-child{margin-top:0}.catalog-group[hidden]{display:none}
@media(max-width:760px){.page-home .hero{padding-top:24px}.page-home .hero__grid{gap:24px}.page-home .hero__title{font-size:clamp(60px,16vw,90px)}.page-home .hero__eyebrow{margin-bottom:16px;font-size:9px}.page-home .hero__thesis{font-size:23px;margin-top:20px;margin-bottom:14px}.page-home .hero__lead{font-size:14px;line-height:1.5;margin-bottom:18px;max-width:34ch}.page-home .hero__actions{gap:8px}.page-home .hero__actions .btn{padding:0 16px;font-size:13px;min-height:44px}.page-home .hero .stage{aspect-ratio:1.15}.page-home .hero .studio__text{font-size:12px;line-height:1.5}.product-case__section{padding-top:56px}.brand-case__decisions{gap:48px;margin-top:28px}}

.hero-studio{width:100%;max-width:540px;min-width:0;justify-self:center}.hero-motion{display:flex;align-items:center;gap:14px;width:100%;border:1px solid var(--line);border-radius:12px;padding:15px 18px;background:var(--bg-2);color:var(--text);margin-top:14px;text-align:left;font:600 14px var(--display);cursor:pointer}.hero-motion__play{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border:1px solid var(--line);border-radius:50%}.hero-motion__play svg{width:16px;height:16px}.hero-motion small{display:block;font:11px var(--mono);color:var(--muted);margin-top:5px;line-height:1.5}.hero-motion>span:last-child{margin-left:auto;font-size:20px}.hero-motion:hover{border-color:var(--accent)}.hero-motion:focus-visible{outline:2px solid var(--accent);outline-offset:4px}@media(max-width:760px){.hero-motion{padding:14px}.hero-motion small{font-size:9px}}

.project-detail .case2__main--social{aspect-ratio:auto;max-height:none;background:none;overflow:visible}.social-reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.social-reels>a{display:block;text-decoration:none;min-width:0;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;overflow:hidden}.social-reels img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}.social-reels>a>span{position:relative;display:block;padding:16px 38px 16px 16px;font-size:13px}.social-reels b{font-weight:500}.social-reels small{display:block;color:var(--muted);font:10px var(--mono);margin-top:8px}.social-reels em{position:absolute;right:16px;top:18px;font-style:normal}.social-reels>a:hover{border-color:var(--accent)}.case2__main--social figcaption{margin-top:18px;font-size:13px}.project-detail:has(#projeto-boneco) .mosaic{grid-template-columns:minmax(0,360px);justify-content:center}.project-detail:has(#projeto-boneco) .mosaic__item{grid-column:1;grid-row:auto}.project-detail:has(#projeto-boneco) .mosaic__item img{height:auto;max-height:none;object-fit:contain}@media(max-width:760px){.social-reels{grid-template-columns:1fr;max-width:360px;margin:auto;gap:20px}.case2__main--social figcaption{text-align:center}}

/* Final visual refinement: the work leads, controls stay quiet. */
.reading-progress{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;z-index:101;pointer-events:none}
.project-card{transition:border-color .25s,box-shadow .25s}
.project-card:focus-within{border-color:#777063}
.project-card__visual{isolation:isolate}
.project-card__visual::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(400px circle at var(--light-x,50%) var(--light-y,50%),#ffffff16,transparent 70%);opacity:0;transition:opacity .3s;z-index:1}
.project-card__explore{position:absolute;right:18px;bottom:18px;z-index:2;background:#171714ed;color:var(--text);border:1px solid #ffffff38;padding:9px 15px;border-radius:8px;font:500 12px var(--body);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.project-card__visual>img{transition:transform .55s var(--ease)}
.project-card__visual:is(:hover,:focus-visible)::after{opacity:1}
.project-card__visual:is(:hover,:focus-visible) .project-card__explore{opacity:1;transform:none}
.project-card__visual:is(:hover,:focus-visible)>img{transform:scale(1.025)}
.project-card .ptag{color:var(--muted);border-color:var(--line);font-size:9px;letter-spacing:.06em;border-radius:4px}
.project-card .status{font-size:10px;background:transparent}
.project-card__copy .textlink{text-decoration:none;display:inline-block;padding-bottom:4px;border-bottom:1px solid var(--line);transition:border-color .2s,color .2s}
.project-card__copy .textlink:hover{border-color:var(--accent)}

.hero-motion{transition:border-color .25s,background .25s}
.hero-motion:hover{background:#22211d}
.project-detail:has(#projeto-boneco) .case2__main{width:min(100%,420px);margin:0 auto;aspect-ratio:auto;max-height:none;background:none}
.project-detail:has(#projeto-boneco) .case2__main>img{height:auto;object-fit:contain;max-height:none;border-radius:14px}
.project-next>a:last-child{transition:color .2s}
@media(hover:none),(pointer:coarse){.project-card__explore{display:none}}
@media(prefers-reduced-motion:reduce){.project-card,.project-card__visual>img,.project-card__visual::after,.project-card__explore,.hero-motion{transition:none}.project-card__visual:is(:hover,:focus-visible)>img{transform:none}.project-card__visual::after{display:none}}

.image-detail{cursor:zoom-in}.image-detail:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}

.brand-case__cover{margin:0;border-radius:18px;overflow:hidden}.brand-case__cover img{display:block;width:100%;height:auto}
.brand-case__shots--gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0;background:none;border:0;gap:24px;align-items:start}
.brand-case__shots--gallery figure{width:auto}.brand-case__shots--gallery figure:first-child{grid-column:1/-1}
.brand-case--beach24h .brand-case__videos{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin:0 auto;gap:32px}
@media(max-width:760px){.brand-case__shots--gallery{grid-template-columns:1fr;gap:18px}.brand-case--beach24h .brand-case__videos{grid-template-columns:1fr;gap:28px}}

.video-frame-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:18px}
.video-frame-links>a{display:block;position:relative;overflow:hidden;border-radius:16px;text-decoration:none;background:var(--bg-2)}
.video-frame-links img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;transition:transform .35s}
.video-frame-links>a>span{position:absolute;inset:auto 0 0;padding:36px 18px 18px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;font-weight:500}
.video-frame-links small{display:block;margin-top:6px;font-size:12px;font-weight:400;opacity:.8}
.video-frame-links>a:hover img{transform:scale(1.025)}
.video-frame-links>a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:760px){.video-frame-links{grid-template-columns:1fr;max-width:380px;margin:auto;padding:0;gap:20px}}
@media(prefers-reduced-motion:reduce){.video-frame-links img{transition:none}.video-frame-links>a:hover img{transform:none}}

.audio-proof .ab{margin-bottom:0}
.audio-proof .section__intro{max-width:680px}
@media(max-width:560px){.audio-proof .ab__switch{display:flex;width:100%}.audio-proof .ab__switch button{flex:1;min-width:0;padding:8px;font-size:.8rem}.audio-proof .ab__spec{min-height:76px}.audio-proof .ab__hint{max-width:100%;font-size:.8rem}}
.ab__spec{grid-template-columns:minmax(0,1fr);min-width:0;width:100%}
.ab__img{min-width:0}