/* Hallmark · macrostructure: Marquee Hero · pre-emit critique: P5 H4 E4 S5 R4 V5
 * genre: atmospheric · tone: escuro e atmosférico · theme: Midnight
 * anchor hue: amber · enrichment: none · nav: N9 · footer: Ft2
 * audience: pequenas empresas, startups e equipes de produto · use: contato por e-mail
 */
@import url("tokens.css");
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-behavior: smooth; }
body { background: var(--color-paper); color: var(--color-body); font: 400 var(--text-base)/1.55 var(--font-body); }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
h1,h2,h3,p { margin-block-start: 0; }
h1,h2,h3 { color: var(--color-ink); font-family: var(--font-display); font-style: normal; line-height: 1.04; letter-spacing: -0.055em; overflow-wrap: anywhere; min-width: 0; }
.skip-link { position: absolute; z-index: 100; inset-block-start: var(--space-md); inset-inline-start: var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-sm); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.site-header { position: absolute; z-index: 10; inset-block-start: 0; inset-inline: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); width: min(100%, 1800px); margin-inline: auto; padding: var(--space-lg) clamp(1rem, 4vw, 4rem); }
.site-header-inner { position: relative; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); text-decoration: none; font: 700 var(--text-base)/1 var(--font-display); letter-spacing: -0.045em; white-space: nowrap; }
.wordmark-sign { color: var(--color-accent); font-size: 1.45rem; font-weight: 400; letter-spacing: -0.18em; padding-inline-end: var(--space-xs); }
.header-link { color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-accent); }
.header-link:hover { color: var(--color-accent); }
.header-link:active { transform: translateY(1px); }
.marquee { position: relative; min-height: 100svh; display: flex; align-items: end; overflow: clip; border-block-end: var(--rule-hair) solid var(--color-rule); }
.marquee-light { position: absolute; pointer-events: none; inset: 0; background: radial-gradient(circle at 76% 69%, color-mix(in oklch, var(--color-accent) 14%, transparent), transparent 38%); opacity: .85; }
.marquee-inner { position: relative; z-index: 1; width: min(100%, 1800px); margin-inline: auto; padding: var(--space-5xl) clamp(1rem, 4vw, 4rem) var(--space-xl); }
.hero-context { color: var(--color-accent); font: 500 var(--text-sm)/1.3 var(--font-body); letter-spacing: 0.025em; margin-block-end: var(--space-2xl); }
.hero-context span { color: var(--color-muted); padding-inline: var(--space-xs); }
.marquee h1 { font-size: var(--text-display); font-weight: 600; margin-block-end: var(--space-4xl); max-width: 13ch; }
.marquee h1 span { color: var(--color-accent); }
.marquee-bottom { display: flex; justify-content: space-between; align-items: end; gap: var(--space-xl); }
.marquee-bottom p { max-width: 27ch; color: var(--color-body); font-size: var(--text-lg); line-height: 1.4; margin: 0; }
.marquee-bottom a { color: var(--color-ink); text-decoration: none; white-space: nowrap; font-size: var(--text-sm); display: inline-flex; align-items: center; gap: var(--space-lg); min-height: 44px; }
.marquee-bottom a:hover { color: var(--color-accent); }
.section-wrap { width: min(100%, 1800px); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 4rem); }
.statement { padding-block: var(--space-5xl); }
.statement-meta { display: flex; justify-content: space-between; gap: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); letter-spacing: 0.04em; margin-block-end: var(--space-4xl); }
.statement h2 { font-size: clamp(2.5rem, 6.5vw, 6rem); font-weight: 500; max-width: 18ch; margin-block-end: var(--space-4xl); }
.statement h2 span { color: var(--color-muted); }
.statement-foot { display: grid; gap: var(--space-xl); align-items: end; }
.statement-foot p { font-size: var(--text-lg); line-height: 1.5; max-width: 58ch; margin: 0; }
.statement-foot strong { color: var(--color-ink); font-weight: 600; }
.about-hero { min-height: 70svh; display: flex; flex-direction: column; justify-content: end; padding-block: var(--space-5xl) var(--space-3xl); }
.about-kicker, .about-definition > p { color: var(--color-accent); font-size: var(--text-sm); letter-spacing: .04em; }
.about-hero h1 { font-size: clamp(3.5rem, 9vw, 8rem); font-weight: 600; margin-block: var(--space-xl) var(--space-3xl); }
.about-hero h1 span { color: var(--color-accent); }
.about-lead { max-width: 50ch; font-size: clamp(1.25rem, 2.5vw, 2rem); line-height: 1.42; margin: 0; }
.about-definition { display: grid; gap: var(--space-xl); padding-block: var(--space-4xl); border-block-start: var(--rule-hair) solid var(--color-rule); border-block-end: var(--rule-hair) solid var(--color-rule); }
.about-definition h2 { font-size: clamp(3rem, 7vw, 6rem); margin-block-end: var(--space-lg); }
.about-definition div > p { max-width: 36ch; font-family: var(--font-display); font-size: clamp(1.25rem, 2.7vw, 2.5rem); line-height: 1.2; letter-spacing: -.035em; color: var(--color-ink); overflow-wrap: anywhere; }
.about-definition strong { font-weight: 500; }
.about-description { display: grid; gap: var(--space-3xl); padding-block: var(--space-5xl); }
.about-description h2 { max-width: 14ch; font-size: var(--text-2xl); }
.about-description p { max-width: 48ch; font-size: var(--text-lg); }
.about-close { padding-block: var(--space-5xl); border-block-start: var(--rule-hair) solid var(--color-rule); }
.about-close p { max-width: 17ch; color: var(--color-ink); font: 500 clamp(2.5rem, 5vw, 5rem)/1.08 var(--font-display); letter-spacing: -.045em; margin-block-end: var(--space-3xl); }
.inline-action { width: fit-content; display: inline-flex; gap: var(--space-lg); align-items: center; min-height: 44px; text-decoration: none; white-space: nowrap; color: var(--color-accent); border-block-end: var(--rule-hair) solid var(--color-accent); }
.inline-action:hover { color: var(--color-ink); border-color: var(--color-ink); }
.principles { padding-block: var(--space-4xl) var(--space-5xl); border-block-start: var(--rule-hair) solid var(--color-rule); }
.principles-heading { display: grid; gap: var(--space-lg); margin-block-end: var(--space-4xl); }
.principles-heading h2 { font-size: var(--text-2xl); margin: 0; }
.principles-heading p { max-width: 40ch; font-size: var(--text-lg); margin: 0; }
.principles-list { display: grid; }
.principles-list article { border-block-start: var(--rule-hair) solid var(--color-rule); padding-block-start: var(--space-lg); }
.principles-list article > span { color: var(--color-accent); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.principles-list h3 { font-size: var(--text-xl); font-weight: 500; margin-block: var(--space-lg) var(--space-sm); }
.principles-list p { max-width: 45ch; margin-block: 0 var(--space-2xl); }
.work { padding-block: var(--space-5xl); background: var(--color-paper-2); }
.section-title { margin-block-end: var(--space-4xl); }
.section-title p, .practice-intro > p, .contact > p { color: var(--color-accent); font-size: var(--text-sm); letter-spacing: 0.04em; margin-block-end: var(--space-lg); }
.section-title h2, .practice h2, .contact h2 { font-size: var(--text-2xl); margin-block-end: var(--space-md); }
.section-title > span { color: var(--color-muted); }
.project-list { border-block-start: var(--rule-hair) solid var(--color-rule); }
.project { padding-block: var(--space-xl); border-block-end: var(--rule-hair) solid var(--color-rule); }
.project-head { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-lg); align-items: baseline; }
.project-number { color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.project h3 { font-size: clamp(2rem, 4.5vw, 4.75rem); font-weight: 500; margin: 0; }
.project-kind { grid-column: 2; color: var(--color-muted); font-size: var(--text-sm); }
.project-detail { display: grid; gap: var(--space-lg); padding-inline-start: calc(2rem + var(--space-lg)); margin-block-start: var(--space-lg); }
.project-detail p { max-width: 48ch; margin: 0; }
.project-detail a { width: fit-content; font-size: var(--text-sm); white-space: nowrap; }
.project-detail a { display: inline-flex; align-items: center; gap: var(--space-lg); min-height: 44px; color: var(--color-accent); text-decoration: none; border-block-end: var(--rule-hair) solid var(--color-accent); }
.project-detail a:hover { color: var(--color-ink); border-color: var(--color-ink); }
.project-detail a:active { transform: translateY(1px); }
.practice { padding-block: var(--space-5xl); display: grid; gap: var(--space-4xl); }
.practice h2 { font-size: clamp(2.5rem, 5vw, 5rem); }
.practice-body > p { font-size: var(--text-lg); line-height: 1.5; max-width: 44ch; margin-block-end: var(--space-3xl); }
.practice-lines { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md) var(--space-lg); }
.practice-lines span { padding-block-start: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); font-size: var(--text-sm); }
.contact { padding-block: var(--space-5xl); border-block-start: var(--rule-hair) solid var(--color-rule); }
.contact h2 { font-size: clamp(2.8rem, 7vw, 7rem); margin-block-end: var(--space-4xl); }
.contact-bottom { display: grid; gap: var(--space-xl); align-items: end; }
.contact-bottom p { font-size: var(--text-lg); max-width: 28ch; margin: 0; }
.contact-link { background: none; border: 0; color: var(--color-accent); font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 2rem); text-decoration: none; border-block-end: var(--rule-hair) solid var(--color-accent); width: fit-content; display: inline-flex; align-items: center; gap: var(--space-xl); padding: 0 0 var(--space-xs); white-space: nowrap; cursor: pointer; }
.contact-link:hover { color: var(--color-ink); border-color: var(--color-ink); }
.contact-link:active { transform: translateY(1px); }
.contact-link:disabled { opacity: .55; cursor: not-allowed; }
.inquiry-dialog { position: fixed; inset: 0; width: min(100% - 2rem, 720px); max-height: min(90dvh, 900px); margin: auto; padding: 0; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); color: var(--color-body); overflow: auto; }
.inquiry-dialog::backdrop { background: color-mix(in oklch, var(--color-paper) 82%, transparent); }
.inquiry-dialog form { padding: clamp(1.25rem, 4vw, 3rem); }
.dialog-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); color: var(--color-accent); font-size: var(--text-sm); letter-spacing: .04em; }
.dialog-close { width: 44px; height: 44px; display: grid; place-items: center; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-3); color: var(--color-ink); font: 400 1.5rem/1 var(--font-body); cursor: pointer; }
.dialog-close:hover { border-color: var(--color-accent); }
.dialog-close:active { transform: translateY(1px); }
.dialog-close:disabled { opacity: .55; cursor: not-allowed; }
.dialog-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin-block: var(--space-2xl) var(--space-3xl); }
.dialog-progress span { height: 3px; background: var(--color-rule); }
.dialog-progress span.is-current { background: var(--color-accent); }
.form-counter { color: var(--color-accent); font-size: var(--text-sm); margin-block-end: var(--space-md); }
.form-step h2, .form-success h2 { font-size: clamp(2rem, 4vw, 3rem); margin-block-end: var(--space-2xl); }
.form-step label { display: flex; justify-content: space-between; gap: var(--space-md); color: var(--color-ink); font-weight: 600; margin-block-end: var(--space-sm); }
.form-step label span { color: var(--color-muted); font-size: var(--text-sm); font-weight: 400; }
.form-step input, .form-step textarea { display: block; width: 100%; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-base)/1.5 var(--font-body); padding: var(--space-md); outline: 2px solid transparent; outline-offset: 1px; }
.form-step input { min-height: 52px; margin-block-end: var(--space-lg); }
.form-step textarea { min-height: 170px; resize: vertical; }
.form-step input:hover, .form-step textarea:hover { border-color: var(--color-muted); }
.form-step input:focus-visible, .form-step textarea:focus-visible { border-color: var(--color-accent); outline-color: var(--color-focus); }
.form-step input[aria-invalid="true"], .form-step textarea[aria-invalid="true"] { border-color: var(--color-error); }
.form-step input:disabled, .form-step textarea:disabled { opacity: .55; cursor: not-allowed; }
.field-hint { min-height: 1lh; color: var(--color-muted); font-size: var(--text-sm); margin-block: var(--space-sm) 0; }
.field-pair { display: grid; gap: 0 var(--space-lg); }
.review-list { margin: 0; border-block-start: var(--rule-hair) solid var(--color-rule); }
.review-list div { padding-block: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule); }
.review-list dt { color: var(--color-muted); font-size: var(--text-sm); }
.review-list dd { color: var(--color-ink); margin: var(--space-xs) 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.honeypot { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { min-height: 1lh; color: var(--color-error); margin-block: var(--space-lg) 0; }
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-block-start: var(--space-2xl); }
.form-button { min-height: 48px; border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-lg); font: 600 var(--text-base)/1 var(--font-body); white-space: nowrap; cursor: pointer; }
.form-button-primary { background: var(--color-accent); color: var(--color-accent-ink); border: var(--rule-hair) solid var(--color-accent); margin-inline-start: auto; }
.form-button-primary:hover { background: var(--color-ink); border-color: var(--color-ink); }
.form-button-secondary { background: transparent; color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule); }
.form-button-secondary:hover { border-color: var(--color-ink); }
.form-button:active { transform: translateY(1px); }
.form-button:disabled { opacity: .55; cursor: not-allowed; }
.form-success p:not(.form-counter) { max-width: 55ch; }
.site-footer { width: min(100%, 1800px); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-md); padding: var(--space-lg) clamp(1rem, 4vw, 4rem); border-block-start: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.site-footer a:hover { color: var(--color-accent); }
@media (min-width: 40rem) { .statement-foot { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); }.about-definition { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }.about-description { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }.principles-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }.principles-list article { display: grid; grid-template-columns: 3rem minmax(0, .85fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; padding-block: var(--space-xl); }.principles-list h3 { margin: 0; }.principles-list p { margin: 0; }.project-head { grid-template-columns: 2rem minmax(0, 1fr) auto; }.project-kind { grid-column: auto; }.project-detail { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }.practice { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }.contact-bottom { grid-template-columns: minmax(0, 1fr) auto; }.field-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 39.99rem) { .site-header { padding-block: var(--space-md); }.marquee { min-height: 100svh; }.marquee-inner { padding-block-end: var(--space-xl); }.marquee h1 { margin-block-end: var(--space-3xl); font-size: clamp(2.7rem, 13vw, 4.2rem); }.marquee-bottom { align-items: end; }.marquee-bottom p { font-size: var(--text-base); max-width: 19ch; }.statement, .work, .practice, .contact { padding-block: var(--space-4xl); }.statement-meta { margin-block-end: var(--space-3xl); }.statement h2 { margin-block-end: var(--space-3xl); }.practice-lines { grid-template-columns: minmax(0, 1fr); }.contact-link { font-size: 1.1rem; }.site-footer { flex-direction: column; align-items: start; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }