:root {
  --ink: #0b0d0c;
  --ink-soft: #171a18;
  --paper: #f2f1ed;
  --white: #ffffff;
  --muted: #a7aaa5;
  --line: rgba(11, 13, 12, .18);
  --line-dark: rgba(255, 255, 255, .18);
  --green: #00d996;
  --green-dark: #00ae78;
  --max: 1600px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 999; background: var(--green); color: var(--ink); padding: .75rem 1rem; font-weight: 800; }
.skip-link:focus { top: 1rem; }

.site-header { max-width: var(--max); margin: auto; min-height: 92px; padding: 1rem 3vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .8rem; width: fit-content; font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.brand img { width: 72px; height: 46px; object-fit: contain; object-position: left center; }
.site-header nav { display: flex; gap: 2rem; font-size: .86rem; font-weight: 650; }
.site-header nav a { border-bottom: 1px solid transparent; }
.site-header nav a:hover, .site-header nav a:focus-visible { border-color: var(--ink); }
.header-cta { justify-self: end; font-weight: 800; font-size: .86rem; border-bottom: 2px solid var(--green-dark); padding: .45rem 0; }

.hero { max-width: var(--max); margin: auto; min-height: 820px; display: grid; grid-template-columns: 1.12fr .88fr; border-bottom: 1px solid var(--line); }
.hero-copy { padding: clamp(3rem, 4.5vw, 5.5rem) 4vw 2.5rem 3vw; display: flex; flex-direction: column; justify-content: center; }
.eyebrow, .section-number { margin: 0 0 1.4rem; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { display: inline-block; background: var(--green); padding: .25rem .5rem; margin-right: .6rem; letter-spacing: .08em; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
h1 { max-width: 900px; margin: 0; font-size: clamp(3.4rem, 4.55vw, 5.45rem); line-height: .9; letter-spacing: -.06em; font-weight: 850; }
h1 em { display: block; color: var(--green-dark); font-style: normal; font-weight: 450; }
.hero-lead { max-width: 700px; margin: 1.6rem 0 0; font-size: clamp(1.05rem, 1.2vw, 1.22rem); line-height: 1.5; }
.hero-facts { max-width: 760px; list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero-facts li { padding: .9rem 1rem .85rem 0; }
.hero-facts li + li { padding-left: 1rem; border-left: 1px solid var(--line); }
.hero-facts strong, .hero-facts span { display: block; }
.hero-facts strong { font-size: 1rem; line-height: 1.2; }
.hero-facts span { margin-top: .2rem; color: #656a66; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.hero-actions { display: flex; align-items: center; gap: 2rem; margin-top: 1.8rem; }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 1.2rem; padding: .9rem 1.2rem; border: 0; cursor: pointer; font-weight: 850; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--green); color: var(--ink); }
.button-primary:hover, .button-primary:focus-visible { background: #20eead; }
.button-dark { margin-top: 1.4rem; background: var(--ink); color: white; }
.button-dark:hover, .button-dark:focus-visible { background: #252926; }
.text-link { display: inline-flex; gap: .65rem; align-items: center; font-weight: 800; border-bottom: 1px solid currentColor; padding-bottom: .3rem; }
.hero-reassurance { margin: .85rem 0 0; color: #666b67; font-size: .74rem; }
.proof-line { display: grid; grid-template-columns: repeat(3, 1fr); margin: 2.8rem 0 0; padding-top: 0; gap: 1.5rem; }
.proof-line div { border-top: 1px solid var(--line); padding-top: 1rem; }
.proof-line dt { font-size: 1.2rem; font-weight: 850; }
.proof-line dd { margin: .15rem 0 0; max-width: 140px; font-size: .72rem; color: #5d625f; line-height: 1.35; }

.hero-project { position: relative; margin: 0; min-height: 820px; overflow: hidden; background: var(--ink); }
.hero-project > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.03); }
.hero-project::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(0,0,0,.82)); }
.hero-project figcaption { position: absolute; z-index: 2; left: 2.3rem; right: 2.3rem; bottom: 2.1rem; color: white; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 1rem; }
.hero-project figcaption strong { font-size: clamp(2.7rem, 5vw, 5.8rem); line-height: .9; letter-spacing: -.06em; }
.hero-project figcaption > span:last-child { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.project-index { grid-column: 1 / -1; margin-bottom: 1rem; color: var(--green); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.measure { position: absolute; z-index: 2; color: var(--green); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; }
.measure::before { content: ""; display: inline-block; background: var(--green); }
.measure-top { top: 1.8rem; left: 1.8rem; right: 1.8rem; }
.measure-top::before { width: calc(100% - 65px); height: 1px; margin-right: .7rem; vertical-align: middle; }
.measure-side { right: 1rem; top: 44%; writing-mode: vertical-rl; }
.measure-side::before { width: 1px; height: 90px; margin-bottom: .7rem; }

.manifesto { max-width: var(--max); margin: auto; padding: 5.5rem 3vw; display: grid; grid-template-columns: 13% minmax(0, 1.45fr) minmax(250px, .55fr); gap: 3vw; align-items: start; border-bottom: 1px solid var(--line); }
.manifesto h2, .section-heading h2, .deliverable h2, .fit h2, .request h2 { margin: 0; font-size: clamp(2.8rem, 4.2vw, 5rem); line-height: .95; letter-spacing: -.06em; }
.manifesto h2 { max-width: 940px; font-size: clamp(2.8rem, 3.85vw, 4.6rem); }
.manifesto h2 span { color: #767b77; font-weight: 450; }
.manifesto > div > p { max-width: 820px; margin: 1.4rem 0 0; font-size: 1.08rem; }
.manifesto aside { align-self: center; border-left: 3px solid var(--green-dark); padding-left: 1.2rem; }
.manifesto aside p { margin: 0 0 .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; }
.manifesto aside strong { font-size: 1rem; line-height: 1.35; }

.method { background: var(--ink); color: white; padding: 6rem max(3vw, calc((100vw - var(--max)) / 2 + 3vw)); display: grid; grid-template-columns: .9fr 1.1fr; gap: 7vw; }
.section-heading { position: sticky; top: 2rem; align-self: start; }
.section-heading h2 { color: white; }
.section-heading > p:last-child { max-width: 540px; color: #b8bcb9; font-size: 1.12rem; margin-top: 2rem; }
.method-list { list-style: none; margin: 0; padding: 0; }
.method-list li { display: grid; grid-template-columns: 75px 1fr; gap: 1.2rem; padding: 2rem 0 3.5rem; border-top: 1px solid var(--line-dark); }
.method-list li > span { color: var(--green); font-size: .78rem; font-weight: 850; }
.method-list h3 { margin: 0; font-size: clamp(1.7rem, 2.6vw, 3rem); line-height: 1; letter-spacing: -.04em; }
.method-list p { color: #b8bcb9; max-width: 560px; margin: 1.1rem 0 0; }

.case-study { max-width: var(--max); margin: auto; padding: 5.5rem 3vw; }
.case-intro { display: grid; grid-template-columns: 13% minmax(0, 1.35fr) minmax(280px, .65fr); gap: 3vw; align-items: start; margin-bottom: 2.2rem; }
.case-intro h2 { max-width: 820px; margin: 0; font-size: clamp(3rem, 4.45vw, 5.3rem); line-height: .9; letter-spacing: -.06em; }
.case-intro > p:nth-of-type(2) { max-width: 440px; margin: .4rem 0 0; align-self: start; }
.case-intro .text-link { grid-column: 3; width: fit-content; margin-top: .8rem; align-self: start; }
.case-grid { display: grid; grid-template-columns: 1.35fr .65fr; grid-template-rows: 1fr 1fr; gap: 1rem; min-height: 650px; }
.case-grid figure { position: relative; margin: 0; overflow: hidden; background: #222; }
.case-grid figure.case-main { grid-row: 1 / 3; }
.case-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.case-grid figure:hover img { transform: scale(1.025); }
.case-grid figcaption { position: absolute; inset: auto 1rem 1rem; padding: .8rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: rgba(11,13,12,.82); backdrop-filter: blur(8px); color: white; }
.case-grid figcaption span { color: var(--green); font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; }
.case-grid figcaption strong { font-size: .85rem; text-align: right; }
.case-data { display: grid; grid-template-columns: repeat(4, 1fr); margin: 1rem 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case-data div { padding: 1.4rem 1rem; border-right: 1px solid var(--line); }
.case-data div:last-child { border: 0; }
.case-data dt { color: #6f7470; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; }
.case-data dd { margin: .35rem 0 0; font-weight: 750; }
.inline-cta { margin-top: 2rem; padding: 1.4rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: var(--ink); color: white; }
.inline-cta div { display: grid; }
.inline-cta span { color: #9fa49f; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; }
.inline-cta strong { margin-top: .25rem; font-size: 1.15rem; }

.demo-showcase { padding: 6rem max(3vw, calc((100vw - var(--max)) / 2 + 3vw)); background: var(--ink); color: white; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.demo-showcase-inner { display: grid; grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr); gap: clamp(3rem, 6vw, 7rem); align-items: center; }
.demo-copy .section-number { color: var(--green); }
.demo-label { display: inline-flex; margin-bottom: 1.35rem; padding: .45rem .65rem; border: 1px solid rgba(255, 120, 66, .72); color: #ff7842; font-size: .67rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.demo-copy h2 { max-width: 700px; margin: 0; font-size: clamp(2.9rem, 4.4vw, 5.15rem); line-height: .92; letter-spacing: -.06em; }
.demo-copy > p:not(.section-number):not(.demo-note) { max-width: 650px; margin: 1.5rem 0 0; color: #c0c4c1; font-size: 1.05rem; }
.demo-points { list-style: none; margin: 2.2rem 0 0; padding: 0; border-bottom: 1px solid var(--line-dark); }
.demo-points li { display: grid; grid-template-columns: 44px 1fr; gap: .8rem; padding: .8rem 0; border-top: 1px solid var(--line-dark); font-size: .9rem; font-weight: 700; }
.demo-points span { color: var(--green); font-size: .68rem; letter-spacing: .1em; }
.demo-actions { display: flex; align-items: center; gap: 1.6rem; margin-top: 2rem; }
.demo-actions .button { flex: 0 0 auto; }
.demo-actions .light { color: white; }
.demo-note { margin: .8rem 0 0; color: #888e89; font-size: .72rem; }
.demo-preview-link { display: block; min-width: 0; }
.demo-preview { margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.22); background: #111412; box-shadow: 22px 22px 0 rgba(0, 217, 150, .12); transition: transform .28s ease, border-color .28s ease; }
.demo-preview-link:hover .demo-preview, .demo-preview-link:focus-visible .demo-preview { transform: translateY(-6px); border-color: var(--green); }
.demo-browser-bar { min-height: 42px; display: flex; align-items: center; gap: .45rem; padding: 0 1rem; background: #050706; border-bottom: 1px solid rgba(255,255,255,.15); }
.demo-browser-bar > span { width: 8px; height: 8px; border-radius: 50%; background: #ff7842; }
.demo-browser-bar > span:nth-child(2) { background: var(--green); }
.demo-browser-bar > span:nth-child(3) { background: #747a75; }
.demo-browser-bar small { margin-left: auto; color: #7d837f; font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; }
.demo-preview-canvas { position: relative; overflow: hidden; background: #07100d; }
.demo-preview-cover { display: block; width: 100%; height: auto; transition: transform .6s ease; }
.demo-preview-detail { position: absolute; right: 2.4%; bottom: 4%; width: min(43%, 470px); padding: .45rem; background: #080b09; border: 1px solid rgba(255,255,255,.5); box-shadow: 0 18px 46px rgba(0,0,0,.48); transition: transform .45s ease; }
.demo-preview-detail > span { display: block; padding: .35rem .45rem .55rem; color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.demo-preview-detail img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; }
.demo-live-badge { position: absolute; left: 1.25rem; bottom: 1.25rem; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .7rem; background: rgba(5,7,6,.9); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: .64rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(8px); }
.demo-live-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(0,217,150,.14); }
.demo-preview-link:hover .demo-preview-cover, .demo-preview-link:focus-visible .demo-preview-cover { transform: scale(1.008); }
.demo-preview-link:hover .demo-preview-detail, .demo-preview-link:focus-visible .demo-preview-detail { transform: translateY(-5px); }
.demo-preview figcaption { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; }
.demo-preview figcaption span { color: #969b97; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.demo-preview figcaption strong { color: var(--green); font-size: .88rem; white-space: nowrap; }

.selected-work { padding: 6rem max(3vw, calc((100vw - var(--max)) / 2 + 3vw)); background: #dfe1dc; border-bottom: 1px solid var(--line); }
.selected-work-heading { display: grid; grid-template-columns: 13% minmax(0, 1fr) auto; gap: 3vw; align-items: end; }
.selected-work-heading h2 { max-width: 880px; margin: 0; font-size: clamp(2.8rem, 4.2vw, 5rem); line-height: .95; letter-spacing: -.06em; }
.selected-work-heading p:not(.section-number) { max-width: 720px; margin: 1.2rem 0 0; }
.selected-work-heading .text-link { margin-bottom: .5rem; white-space: nowrap; }
.work-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.work-card { display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; background: white; border: 2px solid var(--ink); transition: transform .25s ease, box-shadow .25s ease; }
.work-card:hover { transform: translateY(-7px) rotate(-.35deg); box-shadow: 12px 12px 0 var(--green); }
.work-card:nth-child(even):hover { transform: translateY(-7px) rotate(.35deg); box-shadow: 12px 12px 0 var(--ink); }
.work-card .browser-preview { position: relative; height: 360px; flex: 0 0 auto; margin: 0; overflow: hidden; background: var(--ink-soft); border-bottom: 2px solid var(--ink); }
.browser-preview::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 34px; background: #050706; border-bottom: 1px solid rgba(255,255,255,.16); }
.browser-preview::after { content: ""; position: absolute; z-index: 3; top: 12px; left: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 18px 0 0 white, 36px 0 0 #858a85; }
.work-card img { display: block; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top; transform: translateY(0); transition: transform 7.5s linear; }
.work-card:not(:hover) img { transition-duration: 1.2s; }
.work-card:hover img { transform: translateY(calc(-100% + 360px)); }
.work-card-content { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: .8rem; padding: 1.4rem; }
.work-card .work-tag { display: inline-flex; padding: .5rem .65rem; color: white; background: var(--ink); font-size: .65rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.work-card strong { font-size: clamp(1.5rem, 2vw, 2rem); line-height: .95; letter-spacing: -.035em; }
.work-card p { margin: 0; color: #555b56; font-size: .88rem; line-height: 1.55; }
.work-card small { margin-top: auto; color: #686d69; font-size: .65rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }

.deliverable { padding: 6rem max(3vw, calc((100vw - var(--max)) / 2 + 3vw)); background: #dfe1dc; }
.deliverable-title { display: grid; grid-template-columns: 18% 1fr 27%; gap: 4vw; align-items: end; }
.deliverable-title > p:last-child { margin: 0; }
.scope { margin-top: 3.5rem; display: grid; grid-template-columns: .72fr 1.28fr; background: white; border-top: 6px solid var(--green); }
.scope-price { padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); }
.scope-price > span { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 800; }
.scope-price strong { font-size: clamp(4rem, 7vw, 7.5rem); letter-spacing: -.08em; line-height: 1; margin: 3rem 0; }
.scope-price small { color: #686d69; }
.scope ul { list-style: none; margin: 0; padding: 1.4rem 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.scope li { position: relative; padding: 1.35rem 0 1.35rem 1.7rem; border-bottom: 1px solid var(--line); font-weight: 650; }
.scope li::before { content: "↗"; position: absolute; left: 0; color: var(--green-dark); font-weight: 900; }
.commitments { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.commitments article { min-height: 165px; padding: 1.4rem 1.5rem 1.3rem 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.commitments article + article { padding-left: 1.5rem; }
.commitments article:last-child { border-right: 0; }
.commitments span { color: var(--green-dark); font-size: .72rem; font-weight: 850; }
.commitments strong { margin-top: auto; font-size: 1.05rem; }
.commitments p { margin: .3rem 0 0; color: #5d625e; font-size: .84rem; line-height: 1.4; }
.process { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.process article { padding: 1.7rem 2rem 1rem 0; }
.process span { color: var(--green-dark); font-size: .72rem; font-weight: 850; }
.process h3 { font-size: 1.25rem; margin: 2.5rem 0 .5rem; }
.process p { color: #545955; margin: 0; font-size: .9rem; }

.fit { max-width: var(--max); margin: auto; padding: 6rem 3vw; }
.fit > h2 { max-width: 1080px; }
.fit-columns { display: grid; grid-template-columns: 1fr 1fr; margin-top: 4rem; border-top: 1px solid var(--line); }
.fit-columns > div { padding: 2.2rem 5vw 1rem 0; }
.fit-columns > div + div { padding-left: 5vw; border-left: 1px solid var(--line); }
.fit-columns h3 { margin: 0 0 1.2rem; font-size: 1.2rem; }
.fit-columns ul { list-style: none; margin: 0; padding: 0; }
.fit-columns li { position: relative; padding: .65rem 0 .65rem 1.4rem; color: #444a46; }
.fit-columns li::before { content: ""; position: absolute; left: 0; top: 1.25rem; width: 7px; height: 7px; background: var(--green-dark); }
.fit-note { margin: 1.5rem 0 0; padding: 1.1rem 1.2rem; background: #e3e4df; color: #4f5450; font-size: .88rem; }
.next-steps { list-style: none; margin: 0; padding: 0; }
.next-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 1rem; padding: 0 0 1.3rem; }
.next-steps li + li { padding-top: 1.3rem; border-top: 1px solid var(--line); }
.next-steps span { width: 30px; height: 30px; display: grid; place-items: center; background: var(--green); font-size: .75rem; font-weight: 900; }
.next-steps strong { font-size: 1rem; }
.next-steps p { margin: .25rem 0 0; color: #5f645f; font-size: .88rem; }

.request { background: var(--ink); color: white; padding: 6rem max(3vw, calc((100vw - var(--max)) / 2 + 3vw)); display: grid; grid-template-columns: .82fr 1.18fr; gap: 7vw; }
.request-copy > p:nth-of-type(2) { color: #bcc0bd; max-width: 560px; font-size: 1.1rem; }
.local-contact { margin-top: 2rem; color: #aeb3af; }
.local-contact strong { color: white; }
.whatsapp-link { margin-top: .8rem; color: var(--green); }
.request-note { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); display: grid; }
.request-note span { color: var(--green); font-size: .7rem; text-transform: uppercase; letter-spacing: .13em; }
.request-note strong { margin-top: .5rem; font-size: 1.5rem; }
.request-note p { color: #909591; font-size: .78rem; margin: .25rem 0 0; }
.lead-form { background: #f7f7f4; color: var(--ink); padding: clamp(1.5rem, 4vw, 3.5rem); align-self: start; }
.form-progress { margin-bottom: 2rem; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #c3c6c2; }
.form-progress span { padding: 0 0 .7rem; color: #929692; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.form-progress span + span { padding-left: 1rem; }
.form-progress span.is-active { color: var(--ink); border-bottom: 3px solid var(--green-dark); }
.form-step { margin: 0; padding: 0; border: 0; }
.form-step[hidden] { display: none; }
.form-step legend { margin-bottom: 1.5rem; padding: 0; font-size: 1.35rem; font-weight: 850; letter-spacing: -.03em; }
.lead-form label { display: grid; gap: .55rem; margin-bottom: 1.25rem; font-size: .8rem; font-weight: 800; }
.lead-form label > span { color: #747a76; font-weight: 500; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lead-form input, .lead-form select, .lead-form textarea { width: 100%; min-height: 52px; padding: .8rem .9rem; color: var(--ink); background: transparent; border: 1px solid #b9bdb9; border-radius: 0; outline: 0; }
.lead-form textarea { resize: vertical; min-height: 120px; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 2px var(--green); }
.lead-form .consent { display: flex; align-items: flex-start; gap: .7rem; font-weight: 500; line-height: 1.35; }
.lead-form .consent input { width: 18px; min-height: 18px; flex: 0 0 18px; margin: .1rem 0 0; }
.form-honey { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.legal-inline { display: inline; padding: 0; color: inherit; background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; font: inherit; }
.form-next { width: 100%; margin-top: .4rem; }
.form-actions { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; margin-top: .6rem; }
.form-back { padding: .7rem 0; background: none; border: 0; cursor: pointer; font-weight: 800; }
.form-submit { width: 100%; }
.form-status { margin: .8rem 0 0; color: #6d726e; text-align: center; font-size: .75rem; }
.form-success { padding: clamp(2rem, 4vw, 4rem); align-self: start; background: #f7f7f4; color: var(--ink); }
.form-success > span { color: var(--green-dark); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .12em; }
.form-success h3 { margin: 1rem 0 0; font-size: clamp(2.4rem, 4vw, 4.2rem); line-height: .95; letter-spacing: -.05em; }
.form-success p { margin: 1.3rem 0 1.8rem; }

footer { max-width: var(--max); margin: auto; padding: 4rem 3vw 2rem; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 3vw; }
.footer-brand img { width: 92px; height: 60px; object-fit: contain; object-position: left; }
.footer-brand p { max-width: 460px; color: #666b67; }
footer > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
footer > div > span { margin-bottom: .7rem; color: #707571; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; }
footer a { font-weight: 700; border-bottom: 1px solid var(--line); }
footer p { margin: 0; }
.legal-links button { padding: 0 0 .2rem; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; font-weight: 700; }
.copyright { grid-column: 1 / -1; margin-top: 4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: #7a7f7b; font-size: .75rem; }
.mobile-cta { display: none; }

.legal-dialog { width: min(760px, calc(100% - 2rem)); max-height: min(820px, calc(100vh - 2rem)); padding: clamp(1.5rem, 4vw, 3.5rem); color: var(--ink); background: var(--paper); border: 0; box-shadow: 0 30px 100px rgba(0,0,0,.35); }
.legal-dialog::backdrop { background: rgba(5,7,6,.72); backdrop-filter: blur(4px); }
.legal-dialog h2 { margin: 0 0 1.5rem; font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: .95; letter-spacing: -.06em; }
.legal-dialog p { color: #4f544f; }
.legal-dialog dl { display: grid; grid-template-columns: 150px 1fr; margin: 1.6rem 0; border-top: 1px solid var(--line); }
.legal-dialog dt, .legal-dialog dd { margin: 0; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.legal-dialog dt { font-weight: 800; }
.dialog-close { position: sticky; float: right; top: 0; width: 42px; height: 42px; display: grid; place-items: center; background: var(--ink); color: white; border: 0; cursor: pointer; font-size: 1.6rem; line-height: 1; }

.cookie-banner { position: fixed; z-index: 100; left: 50%; bottom: 1.2rem; width: min(1120px, calc(100% - 2.4rem)); padding: 1.35rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; color: white; background: var(--ink); border: 1px solid rgba(255,255,255,.24); box-shadow: 0 18px 70px rgba(0,0,0,.38); transform: translateX(-50%); }
.cookie-banner[hidden] { display: none; }
.cookie-banner span { color: var(--green); font-size: .65rem; font-weight: 850; text-transform: uppercase; letter-spacing: .13em; }
.cookie-banner strong { display: block; margin-top: .25rem; font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.1; }
.cookie-banner p { max-width: 720px; margin: .55rem 0 0; color: #c8ccc9; font-size: .84rem; line-height: 1.45; }
.cookie-actions { display: flex; gap: .65rem; }
.cookie-button { min-height: 46px; padding: .7rem 1rem; cursor: pointer; font-weight: 850; border: 1px solid rgba(255,255,255,.5); }
.cookie-reject { color: white; background: transparent; }
.cookie-configure { color: white; background: #2b302d; }
.cookie-accept { color: var(--ink); background: var(--green); border-color: var(--green); }
.cookie-button:hover, .cookie-button:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.cookie-settings-form { display: grid; gap: .8rem; margin-top: 1.6rem; }
.cookie-settings-form label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.cookie-settings-form label span { display: grid; gap: .25rem; }
.cookie-settings-form small { color: #656b67; font-size: .8rem; line-height: 1.4; }
.cookie-settings-form input { width: 22px; height: 22px; accent-color: var(--green-dark); }
.cookie-settings-form .button { margin-top: .6rem; }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { min-height: 560px; }
  .hero-project { min-height: 600px; }
  .manifesto { grid-template-columns: 1fr 3fr; }
  .manifesto aside { grid-column: 2; max-width: 340px; }
  .method { gap: 5vw; }
  .case-intro, .deliverable-title { grid-template-columns: 1fr 3fr; }
  .case-intro > p:nth-of-type(2), .deliverable-title > p:last-child { grid-column: 2; max-width: 600px; }
  .case-intro .text-link { grid-column: 2; }
  .selected-work-heading { grid-template-columns: 1fr 3fr; }
  .selected-work-heading .text-link { grid-column: 2; width: fit-content; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-showcase-inner { grid-template-columns: 1fr; }
  .demo-copy { max-width: 760px; }
  .scope { grid-template-columns: 1fr; }
  .scope-price { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 760px) {
  body { padding-bottom: 68px; }
  .site-header { min-height: 74px; padding: .7rem 1.1rem; }
  .brand span, .header-cta { display: none; }
  .brand img { width: 76px; height: 48px; }
  .hero-copy { min-height: auto; padding: 3.8rem 1.2rem 2.6rem; }
  h1 { font-size: clamp(2.85rem, 12.5vw, 4.4rem); }
  .hero-lead { font-size: 1rem; }
  .hero-facts { grid-template-columns: 1fr; }
  .hero-facts li, .hero-facts li + li { padding: .75rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .hero-facts li:last-child { border-bottom: 0; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 1.2rem; }
  .proof-line { margin-top: 2.6rem; gap: .7rem; }
  .proof-line dt { font-size: 1rem; }
  .proof-line dd { font-size: .65rem; }
  .hero-project { min-height: 520px; }
  .hero-project figcaption { left: 1.2rem; right: 1.2rem; bottom: 1.2rem; grid-template-columns: 1fr; }
  .hero-project figcaption > span:last-child { margin-top: .7rem; }
  .manifesto, .method, .case-study, .demo-showcase, .selected-work, .deliverable, .fit, .request { padding: 4rem 1.2rem; }
  .manifesto, .method, .case-intro, .deliverable-title, .request { grid-template-columns: 1fr; gap: 2rem; }
  .manifesto aside, .case-intro > p:nth-of-type(2), .case-intro .text-link, .deliverable-title > p:last-child { grid-column: auto; }
  .manifesto h2, .section-heading h2, .deliverable h2, .fit h2, .request h2 { font-size: clamp(2.55rem, 11.5vw, 4rem); }
  .section-heading { position: static; }
  .method-list li { grid-template-columns: 42px 1fr; }
  .case-grid { grid-template-columns: 1fr; grid-template-rows: 460px 280px 280px; min-height: auto; }
  .case-grid figure.case-main { grid-row: auto; }
  .inline-cta { align-items: flex-start; flex-direction: column; }
  .demo-actions { align-items: flex-start; flex-direction: column; gap: 1.1rem; }
  .demo-preview { box-shadow: 10px 10px 0 rgba(0, 217, 150, .12); }
  .demo-preview-detail { position: relative; right: auto; bottom: auto; width: auto; margin: .7rem; }
  .demo-live-badge { left: .75rem; bottom: auto; top: .75rem; }
  .demo-preview figcaption { align-items: flex-start; flex-direction: column; }
  .demo-browser-bar small { display: none; }
  .case-data { grid-template-columns: 1fr 1fr; }
  .case-data div:nth-child(2) { border-right: 0; }
  .scope { margin-top: 3rem; }
  .scope-price { padding: 2rem 1.3rem; }
  .scope-price strong { margin: 2rem 0; }
  .scope ul { grid-template-columns: 1fr; padding: 1rem 1.3rem; }
  .selected-work-heading, .work-grid { grid-template-columns: 1fr; }
  .selected-work-heading .text-link { grid-column: auto; }
  .selected-work-heading h2 { font-size: clamp(2.55rem, 11.5vw, 4rem); }
  .work-card .browser-preview { height: 320px; }
  .work-card:hover img { transform: none; }
  .commitments { grid-template-columns: 1fr 1fr; }
  .commitments article:nth-child(2) { border-right: 0; }
  .commitments article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .process { grid-template-columns: 1fr 1fr; }
  .fit-columns { grid-template-columns: 1fr; }
  .fit-columns > div, .fit-columns > div + div { padding: 2rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  .lead-form { padding: 1.3rem; }
  .form-actions { grid-template-columns: 1fr; }
  .form-back { order: 2; }
  footer { padding: 4rem 1.2rem 2rem; grid-template-columns: 1fr; }
  .copyright { margin-top: 2rem; }
  .mobile-cta { position: fixed; z-index: 20; display: flex; align-items: center; justify-content: space-between; left: 0; right: 0; bottom: 0; min-height: 68px; padding: 1rem 1.2rem; background: var(--green); color: var(--ink); font-weight: 900; box-shadow: 0 -8px 28px rgba(0,0,0,.18); }
  .legal-dialog { padding: 1.5rem 1.2rem; }
  .legal-dialog dl { grid-template-columns: 1fr; }
  .legal-dialog dt { padding-bottom: .15rem; border-bottom: 0; }
  .legal-dialog dd { padding-top: 0; }
  .cookie-banner { bottom: .7rem; width: calc(100% - 1.4rem); padding: 1rem; grid-template-columns: 1fr; gap: 1rem; }
  .cookie-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .cookie-button { width: 100%; }
  .cookie-accept { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}