:root {
  --charcoal: #131212;
  --red: #bf1216;
  --red-bright: #e91c24;
  --paper: #f7f6f3;
  --white: #fff;
  --blue: #285a92;
  --green: #187a62;
  --amber: #e0a62b;
  --ink-muted: #625f5d;
  --line: #d9d6d1;
  --radius: 8px;
  --container: 1200px;
  --header-height: 76px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--charcoal); background: var(--paper); font-family: Arial, "Arial Unicode MS", sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
h1, h2, h3, p, blockquote { margin-top: 0; }
h1, h2, h3, .brand, .eyebrow, .button, .section-index { font-family: "Space Grotesk", Arial, sans-serif; }
h1, h2, h3 { letter-spacing: -.045em; line-height: 1.02; }
h1 { font-size: clamp(3.4rem, 8vw, 7.2rem); font-weight: 500; }
h2 { font-size: clamp(2.45rem, 5vw, 4.8rem); font-weight: 500; }
h3 { font-size: clamp(1.5rem, 2.7vw, 2.4rem); font-weight: 500; }
em { color: var(--red); font-style: normal; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: clamp(88px, 11vw, 160px) 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: 10px; z-index: 1000; transform: translateY(-160%); background: var(--paper); color: var(--charcoal); padding: 12px 18px; border: 2px solid var(--red); border-radius: var(--radius); font-weight: 700; }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

.site-header { position: sticky; inset: 0 0 auto; z-index: 100; height: var(--header-height); background: rgba(247,246,243,.92); border-bottom: 1px solid rgba(19,18,18,.12); backdrop-filter: blur(14px); }
.site-header-dark { color: var(--white); background: rgba(19,18,18,.94); border-bottom-color: rgba(255,255,255,.12); }
.nav-wrap { height: 100%; display: flex; align-items: center; justify-content: flex-start; gap: clamp(14px, 2vw, 28px); }
.brand { order: 0; display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; font-size: .95rem; font-weight: 700; letter-spacing: -.025em; }
.brand-symbol { position: relative; width: 36px; height: 36px; overflow: hidden; flex: 0 0 36px; background: #111; border-radius: 8px; box-shadow: 0 0 0 1px rgba(19,18,18,.14), 0 5px 12px -9px rgba(19,18,18,.8); }
.brand-symbol img { position: absolute; width: 62px; max-width: none; left: -13px; top: 3px; clip-path: inset(0 0 30% 0); }
.brand-symbol-accent { clip-path: polygon(60% 5%, 80% 5%, 72% 26%, 68% 32%, 49% 41%, 56% 25%) !important; }
.main-nav { order: 1; display: flex; align-items: center; gap: clamp(18px, 2.25vw, 34px); margin-left: auto; font-family: "Space Grotesk", Arial, sans-serif; font-size: .9rem; font-weight: 600; }
.main-nav > a:not(.button) { position: relative; padding: 10px 0; }
.main-nav > a:not(.button)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 5px; height: 2px; background: var(--red); transition: right 140ms var(--ease); }
.main-nav > a:not(.button):hover::after, .main-nav > a[aria-current="page"]::after { right: 0; }
.menu-button { order: 2; display: none; width: 48px; height: 48px; border: 0; background: transparent; align-items: center; justify-content: center; flex-direction: column; gap: 7px; cursor: pointer; }
.site-header-dark .menu-button { color: var(--white); }
.menu-button > span:not(.sr-only) { display: block; width: 24px; height: 2px; background: currentColor; transition: transform 140ms var(--ease); }
.menu-button[aria-expanded="true"] > span:nth-last-child(2) { transform: translateY(4.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] > span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.lang-switch { position: relative; order: 3; flex: 0 0 auto; z-index: 140; }
.lang-trigger { min-width: 66px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 11px; color: var(--white); background: var(--charcoal); border: 1px solid var(--charcoal); border-radius: var(--radius); cursor: pointer; font-family: "Space Grotesk", Arial, sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .06em; }
.lang-trigger svg { width: 16px; height: 16px; fill: none; stroke: #ff555a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lang-trigger i { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 140ms var(--ease); }
.lang-switch.is-open .lang-trigger i { transform: translateY(2px) rotate(225deg); }
.site-header-dark .lang-trigger { color: var(--charcoal); background: var(--paper); border-color: var(--paper); }
.lang-menu { position: absolute; top: calc(100% + 10px); right: 0; width: min(224px, calc(100vw - 32px)); padding: 7px; color: var(--white); background: var(--charcoal); border: 1px solid #45413f; border-radius: 10px; box-shadow: 0 22px 55px -24px rgba(0,0,0,.65); }
.lang-menu[hidden] { display: none; }
.lang-menu button { width: 100%; min-height: 46px; display: grid; grid-template-columns: 34px 1fr 16px; gap: 10px; align-items: center; padding: 8px 10px; color: #d8d4d1; background: transparent; border: 0; border-radius: 6px; text-align: left; cursor: pointer; }
.lang-menu button:hover, .lang-menu button:focus-visible { color: var(--white); background: #2a2726; }
.lang-menu button.is-active { color: #ff555a; background: #271b1b; }
.lang-menu small { color: #8f8985; font: 700 .64rem/1 "Space Grotesk", Arial, sans-serif; letter-spacing: .08em; }
.lang-menu span { font-weight: 700; }
.lang-menu b { color: #ff555a; font-size: .62rem; text-align: center; }

.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 13px 22px; border: 1px solid transparent; border-radius: var(--radius); font-size: .9rem; font-weight: 700; transition: transform 140ms var(--ease), background-color 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease); }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 44px; padding: 10px 18px; }
.button-red { color: var(--white); background: var(--red); }
.button-red:hover { background: #a80f13; }
.button-ghost { border-color: #aca8a3; background: rgba(255,255,255,.38); }
.button-ghost:hover { border-color: var(--charcoal); background: var(--white); }
.button-dark { color: var(--white); background: var(--charcoal); }
.button-dark:hover { background: #2b2828; }
.button-paper { color: var(--charcoal); background: var(--paper); }
.button-paper:hover { background: var(--white); }
.text-link { display: inline-flex; gap: 18px; align-items: center; font-family: "Space Grotesk", Arial, sans-serif; font-weight: 700; border-bottom: 2px solid var(--red); padding-bottom: 8px; }

.eyebrow { margin-bottom: 24px; text-transform: uppercase; color: var(--red); font-size: .76rem; letter-spacing: .14em; font-weight: 700; }
.eyebrow span { color: var(--charcoal); opacity: .45; margin: 0 8px; }
.eyebrow-light { color: #ff4a4f; }
.hero { min-height: calc(100vh - var(--header-height)); padding: clamp(62px, 8vw, 110px) 0 40px; background-image: linear-gradient(rgba(19,18,18,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(19,18,18,.045) 1px, transparent 1px); background-size: 48px 48px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: clamp(48px, 8vw, 110px); align-items: center; }
.hero-copy h1 { margin-bottom: 32px; }
.hero-lead { max-width: 650px; margin-bottom: 34px; color: var(--ink-muted); font-size: clamp(1.08rem, 1.7vw, 1.35rem); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-mark { position: relative; aspect-ratio: 1 / .92; min-height: 460px; }
.hero-mark-red { position: absolute; inset: 4% 12% 8% 5%; background: var(--red); clip-path: polygon(0 0, 100% 0, 100% 72%, 73% 100%, 0 100%); }
.hero-mark-dark { position: absolute; inset: 13% 2% 0 18%; display: grid; place-items: center; background: var(--charcoal); clip-path: polygon(18% 0, 100% 0, 100% 79%, 81% 100%, 0 100%, 0 21%); box-shadow: 0 36px 90px rgba(19,18,18,.24); }
.hero-mark-dark img { width: 90%; }
.coordinate { position: absolute; font-family: "Space Grotesk", Arial, sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .12em; }
.coordinate-a { top: 0; right: 0; color: var(--red); }
.coordinate-b { bottom: 1%; left: 2%; writing-mode: vertical-rl; }
.proof-strip { margin-top: clamp(68px, 10vw, 130px); border: 1px solid var(--line); background: rgba(247,246,243,.85); display: grid; grid-template-columns: repeat(3, 1fr); }
.proof-strip > div { min-height: 92px; padding: 18px 22px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.proof-strip > div + div { border-left: 1px solid var(--line); }
.proof-strip strong { color: var(--red); font-family: "Space Grotesk", Arial, sans-serif; font-size: 1.6rem; }
.proof-strip span { font-size: .88rem; font-weight: 700; }

.section-heading { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr); gap: clamp(40px, 8vw, 100px); align-items: end; margin-bottom: 64px; }
.section-heading h2, .capabilities h2 { margin-bottom: 0; }
.section-heading > p { max-width: 440px; margin-bottom: 8px; color: var(--ink-muted); font-size: 1.05rem; }
.projects-section { background: #eeece8; }
.project-filter-bar { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: -24px; margin-bottom: 28px; }
.project-filter-label { color: var(--ink-muted); text-transform: uppercase; letter-spacing: .12em; font: 700 .65rem/1 "Space Grotesk", Arial, sans-serif; }
.project-filter-options { display: inline-flex; gap: 3px; padding: 4px; background: rgba(247,246,243,.72); border: 1px solid #cfcbc5; border-radius: 999px; }
.project-filter-options button { position: relative; min-width: 68px; min-height: 38px; padding: 8px 15px; color: var(--ink-muted); background: transparent; border: 0; border-radius: 999px; cursor: pointer; font-family: "Space Grotesk", Arial, sans-serif; font-size: .76rem; font-weight: 700; transition: color 140ms var(--ease), background-color 140ms var(--ease); }
.project-filter-options button:hover { color: var(--charcoal); background: rgba(19,18,18,.06); }
.project-filter-options button[aria-pressed="true"] { color: var(--white); background: var(--charcoal); }
.project-filter-options button[aria-pressed="true"]::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 7px; vertical-align: 1px; background: #ff4a4f; border-radius: 50%; }
.project-stack { display: grid; gap: 28px; counter-reset: project; }
.project-card[hidden] { display: none; }
.project-card { --accent: var(--blue); position: sticky; top: calc(94px + var(--card-index) * 12px); width: 100%; min-width: 0; transform-origin: top center; min-height: 560px; display: grid; grid-template-columns: minmax(0,.82fr) minmax(420px,1.18fr); gap: clamp(30px, 5vw, 76px); align-items: center; padding: clamp(32px, 5vw, 64px); overflow: hidden; background: var(--paper); border: 1px solid #d3d0cb; border-top: 6px solid var(--accent); border-radius: 20px; box-shadow: 0 30px 80px -52px rgba(19,18,18,.65); }
.project-card > * { min-width: 0; }
.project-blue { --accent: var(--blue); --accent-soft: #dbe7f3; }
.project-green { --accent: var(--green); --accent-soft: #dcebe6; }
.project-red { --accent: var(--red); --accent-soft: #f3d9da; }
.project-oficina { --accent: #9a6108; --accent-soft: #f5e8d2; }
.project-number { position: absolute; right: 34px; top: 16px; color: var(--accent); opacity: .12; font-size: 0; }
.project-number::after { counter-increment: project; content: counter(project, decimal-leading-zero); font: 700 clamp(4rem, 9vw, 8rem)/1 "Space Grotesk", Arial, sans-serif; }
.project-copy { position: relative; z-index: 1; }
.project-brand-row { display: flex; gap: 16px; align-items: center; margin-bottom: 44px; }
.project-icon { width: 58px; height: 58px; display: grid; place-items: center; background: var(--accent); color: var(--white); border-radius: 16px; font: 700 1.45rem/1 "Space Grotesk", Arial, sans-serif; }
.project-icon-grid { border-radius: 6px 18px 6px 18px; }
.project-icon-cow { clip-path: polygon(0 0,100% 0,100% 76%,76% 100%,0 100%); border-radius: 0; }
.project-icon-image { padding: 0; overflow: hidden; background: var(--white); }
.project-icon-image img { width: 100%; height: 100%; object-fit: cover; }
.card-kicker { margin: 0 0 4px; color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font: 700 .7rem/1.2 "Space Grotesk", Arial, sans-serif; }
.project-card h3 { margin: 0; font-size: 2.25rem; }
.project-tagline { margin-bottom: 12px; color: var(--accent); font: 600 1.15rem/1.3 "Space Grotesk", Arial, sans-serif; }
.project-copy > p:not(.card-kicker):not(.project-tagline) { max-width: 480px; color: var(--ink-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 36px; }
.chips span { padding: 7px 12px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: .78rem; font-weight: 700; }
.project-status { display: inline-flex; align-items: center; gap: 9px; font: 700 .78rem/1 "Space Grotesk", Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.project-status i { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 5px var(--accent-soft); }
.project-link { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 7px; border-bottom: 2px solid var(--accent); color: var(--accent); font-family: "Space Grotesk", Arial, sans-serif; font-size: .86rem; font-weight: 700; }
.project-visual { position: relative; width: 100%; max-width: 100%; min-width: 0; min-height: 410px; display: grid; place-items: center; padding: clamp(22px, 4vw, 48px); background: linear-gradient(135deg, var(--accent-soft), rgba(255,255,255,.72)); border: 1px solid color-mix(in srgb, var(--accent) 24%, white); border-radius: 16px; overflow: hidden; }
.visual-label { position: absolute; left: 16px; top: 14px; z-index: 2; color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font: 700 .62rem/1 "Space Grotesk", Arial, sans-serif; }
.app-logo-showcase { isolation: isolate; }
.app-orbit { position: relative; width: min(72%, 300px); aspect-ratio: 1; display: grid; place-items: center; }
.app-orbit > i { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); border-radius: 50%; }
.app-orbit > i:nth-child(2) { inset: 12%; border-style: dashed; animation: orbit 22s linear infinite; }
.app-orbit > span { position: relative; z-index: 1; width: 52%; padding: 5px; background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.9); border-radius: 25%; box-shadow: 0 28px 55px -32px color-mix(in srgb, var(--accent) 75%, transparent); transform: rotate(-3deg); }
.app-orbit img { width: 100%; border-radius: 22%; }
.cowduction-poster { min-height: 0; aspect-ratio: 1498 / 1050; padding: 0; background: transparent; border: 0; border-radius: 16px; box-shadow: 0 20px 42px -24px rgba(19,18,18,.72), 0 0 0 1px rgba(19,18,18,.08); }
.cowduction-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cowduction-poster .visual-label, .app-logo-showcase .visual-label { left: 14px; top: 14px; padding: 8px 11px; color: var(--white); background: rgba(19,18,18,.78); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; text-shadow: 0 1px 8px rgba(0,0,0,.7); backdrop-filter: blur(8px); }
@keyframes orbit { to { transform: rotate(360deg); } }
.mock-window { width: 100%; max-width: 500px; overflow: hidden; background: var(--white); border: 1px solid #c8d5e3; border-radius: 12px; box-shadow: 0 30px 55px -34px rgba(40,90,146,.65); transform: rotate(-2deg); }
.mock-top { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 13px; background: var(--charcoal); }
.mock-top span { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }.mock-top span:nth-child(2){background:var(--amber)}.mock-top span:nth-child(3){background:var(--green)}
.mock-content { min-height: 270px; display: grid; grid-template-columns: 70px 1fr; }
.mock-sidebar { background: #eaf0f6; border-right: 1px solid #d6e0ea; }
.mock-main { padding: 32px 26px; }.mock-main b,.mock-main i{display:block;background:#dce6ef;border-radius:4px}.mock-main b{width:44%;height:18px;background:var(--blue);margin-bottom:18px}.mock-main i{height:8px;margin-bottom:10px}.mock-main i:nth-child(3){width:72%}
.mock-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px}.mock-grid span{height:76px;background:#eef3f7;border:1px solid #d7e2ec;border-bottom:4px solid var(--blue);border-radius:6px}
.data-panel { width: min(100%, 470px); padding: 30px; color: var(--white); background: #102a24; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; box-shadow: 0 30px 65px -34px rgba(24,122,98,.85); transform: rotate(1.5deg); }
.data-head { display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:30px;font-family:"Space Grotesk",Arial,sans-serif}.data-head span{font-size:.7rem;color:#76d1b8}
.metric-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.metric-row>div{padding:18px;background:rgba(255,255,255,.07);border-radius:8px}.metric-row small{display:block;color:#9bb8b0}.metric-row strong{font:600 2.5rem/1.2 "Space Grotesk",Arial,sans-serif}
.bars{height:120px;display:flex;align-items:end;gap:9px;margin-top:30px;border-bottom:1px solid rgba(255,255,255,.18)}.bars i{flex:1;background:#43af91;min-height:15%;border-radius:3px 3px 0 0}.bars i:nth-child(2){height:45%}.bars i:nth-child(3){height:32%}.bars i:nth-child(4){height:80%}.bars i:nth-child(5){height:58%}.bars i:nth-child(6){height:90%}.bars i:nth-child(7){height:68%}
.visual-cow{background:linear-gradient(150deg,#241318,#09090b);}.cow-scene{position:absolute;inset:0;overflow:hidden}.moon{position:absolute;width:80px;height:80px;border-radius:50%;right:15%;top:16%;background:#f5e6b3;box-shadow:0 0 50px rgba(245,230,179,.22)}.beam{position:absolute;left:45%;top:8%;width:180px;height:78%;background:linear-gradient(rgba(191,18,22,.7),rgba(191,18,22,0));clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);filter:blur(2px)}.cow{position:absolute;left:calc(45% + 67px);bottom:20%;color:#fff;font-size:2.4rem;filter:drop-shadow(0 0 14px #fff);animation:float 3.2s ease-in-out infinite}.ground{position:absolute;left:-10%;right:-10%;height:29%;bottom:-11%;background:#161518;border-radius:50% 50% 0 0}.visual-cow .visual-label{color:#ff777b}
@keyframes float{50%{transform:translateY(-18px) rotate(8deg)}}

.capabilities { color: var(--white); background: var(--charcoal); }
.capabilities-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(56px, 9vw, 130px); }
.capabilities-intro { position: sticky; top: 120px; align-self: start; }
.capabilities-intro p:last-child { max-width: 480px; margin-top: 32px; color: #bcb7b3; font-size: 1.05rem; }
.capability-list { list-style: none; padding: 0; margin: 0; }
.capability-list li { display: grid; grid-template-columns: 52px 1fr; gap: 26px; padding: 34px 0; border-top: 1px solid #423e3c; }
.capability-list li:last-child { border-bottom: 1px solid #423e3c; }
.capability-list li > span { color: #ff4a4f; font: 700 .75rem/1 "Space Grotesk", Arial, sans-serif; }
.capability-list h3 { margin: 0 0 12px; font-size: 1.8rem; }
.capability-list p { margin-bottom: 0; color: #a9a4a0; }
.manifesto { background: var(--paper); }
.manifesto-grid { display: grid; grid-template-columns: .35fr 1.65fr; gap: 24px 60px; }
.manifesto blockquote { grid-column: 2; max-width: 930px; margin-bottom: 42px; font: 500 clamp(2.35rem,5vw,5rem)/1.08 "Space Grotesk",Arial,sans-serif; letter-spacing:-.045em; }
.manifesto blockquote em { color: var(--red); }
.manifesto .text-link { grid-column: 2; justify-self: start; }
.cta-section { padding-top: 0; background: var(--paper); }
.cta-panel { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: end; padding: clamp(40px, 7vw, 82px); color: var(--white); background: var(--red); clip-path: polygon(0 0,96% 0,100% 14%,100% 100%,4% 100%,0 86%); }
.cta-panel h2 { margin-bottom: 0; }.cta-panel > div:last-child > p{max-width:480px;margin-bottom:28px;color:#ffe1e1}
.site-footer { padding: 72px 0 26px; color: #c6c1bd; background: var(--charcoal); }
.footer-main { display:flex;justify-content:space-between;gap:48px;padding-bottom:60px}.brand-footer{color:var(--white);font-size:1.1rem;margin-bottom:18px}.footer-main p{font-size:.9rem}.footer-main nav{display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));gap:12px 46px;color:var(--white);font:600 .85rem/1.4 "Space Grotesk",Arial,sans-serif}.footer-main nav a:hover{color:#ff555a}.footer-bottom{display:flex;justify-content:space-between;gap:24px;padding-top:22px;border-top:1px solid #3c3937;font-size:.75rem}
.footer-email { display: inline-flex; padding-bottom: 4px; color: var(--white); border-bottom: 1px solid #5a5552; font: 600 .82rem/1.4 "Space Grotesk", Arial, sans-serif; }
.footer-email:hover { color: #ff555a; border-color: #ff555a; }

.inner-hero { position:relative;overflow:hidden;padding:clamp(100px,12vw,175px) 0; }.inner-hero-dark{color:var(--white);background:var(--charcoal)}.inner-hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:end;position:relative;z-index:1}.inner-hero h1{font-size:clamp(3.4rem,7vw,6.6rem);margin-bottom:0}.inner-lead{max-width:440px;margin-bottom:12px;color:#bbb6b2;font-size:1.16rem}.inner-hero-lines{position:absolute;inset:0;pointer-events:none}.inner-hero-lines span{position:absolute;width:56vw;height:1px;right:-8vw;top:18%;background:#413d3b;transform:rotate(-12deg)}.inner-hero-lines span:nth-child(2){top:48%;right:-15vw;background:var(--red)}.inner-hero-lines span:nth-child(3){top:78%;right:-5vw}
.story-grid{display:grid;grid-template-columns:.35fr 1.65fr;gap:60px}.section-index{display:flex;gap:14px;align-items:flex-start;color:var(--red);font-size:.78rem;font-weight:700}.section-index span{color:var(--ink-muted);text-transform:uppercase;letter-spacing:.1em}.story-copy{max-width:840px}.story-copy h2{margin-bottom:38px}.story-copy p{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--ink-muted)}
.pillars-section{padding-top:30px}.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}.pillar{min-height:310px;padding:32px;border:1px solid var(--line);border-top:6px solid var(--accent);background:#f2f0ec}.pillar-red{--accent:var(--red)}.pillar-blue{--accent:var(--blue)}.pillar-green{--accent:var(--green)}.pillar>span{display:block;color:var(--accent);font:700 .75rem/1 "Space Grotesk",Arial,sans-serif;margin-bottom:72px}.pillar h3{font-size:2rem}.pillar p{color:var(--ink-muted)}
.portfolio-map{color:var(--white);background:var(--charcoal)}.portfolio-map .section-heading>p{color:#aaa5a1}.family-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#46413f;border:1px solid #46413f}.family-card{min-height:360px;padding:36px;background:var(--charcoal);display:flex;flex-direction:column}.family-card>span{color:#ff555a;text-transform:uppercase;letter-spacing:.12em;font:700 .68rem/1 "Space Grotesk",Arial,sans-serif}.family-card h3{margin-top:auto;margin-bottom:18px;font-size:2rem}.family-card p{color:#aaa5a1}.family-card small{align-self:flex-start;margin-top:18px;padding:6px 10px;border:1px solid #5a5552;border-radius:99px;text-transform:uppercase;letter-spacing:.1em}
.principle-section{padding-top:80px}.principle-panel{display:grid;grid-template-columns:.4fr 1.6fr;gap:60px;padding:clamp(36px,6vw,72px);color:var(--white);background:var(--red)}.principle-panel>span{text-transform:uppercase;letter-spacing:.12em;font:700 .7rem/1 "Space Grotesk",Arial,sans-serif}.principle-panel p{margin:0;font:500 clamp(1.8rem,3.5vw,3.4rem)/1.15 "Space Grotesk",Arial,sans-serif;letter-spacing:-.04em}.cta-paper{padding-top:40px}

.dev-hero{padding:clamp(68px,8vw,120px) 0 clamp(90px,10vw,145px);background-image:linear-gradient(rgba(19,18,18,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(19,18,18,.04) 1px,transparent 1px);background-size:48px 48px}.dev-hero-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(50px,8vw,110px);align-items:center}.dev-intro h1{margin-bottom:28px}.dev-intro .button{margin-top:5px}.dev-portrait{position:relative;min-height:590px;color:var(--white);background:var(--charcoal);clip-path:polygon(0 0,85% 0,100% 14%,100% 100%,15% 100%,0 86%);overflow:hidden}.portrait-v{position:absolute;width:90%;height:90%;left:10%;top:5%;background:var(--red);clip-path:polygon(0 0,30% 0,52% 54%,76% 0,100% 0,60% 88%,43% 88%);opacity:.95}.portrait-code{position:absolute;z-index:2;left:28px;top:28px;font:700 4rem/.72 "Space Grotesk",Arial,sans-serif}.portrait-code small{font-size:.8rem;letter-spacing:.2em;color:#ff8588}.portrait-label{position:absolute;z-index:2;right:26px;bottom:30px;text-align:right;text-transform:uppercase;letter-spacing:.14em;font:700 .65rem/1.5 "Space Grotesk",Arial,sans-serif}.bio-section{background:#eeece8}.practice-section{background:var(--paper)}.practice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:58px}.practice-grid article{padding-top:24px;border-top:4px solid var(--red)}.practice-grid span{color:var(--red);text-transform:uppercase;letter-spacing:.12em;font:700 .7rem/1 "Space Grotesk",Arial,sans-serif}.practice-grid h3{margin:44px 0 18px;font-size:2rem}.practice-grid p{color:var(--ink-muted)}
.dev-role { margin: -14px 0 22px; color: var(--red); text-transform: uppercase; letter-spacing: .12em; font: 700 .78rem/1.3 "Space Grotesk", Arial, sans-serif; }
.dev-connection{color:var(--white);background:var(--charcoal)}.connection-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:70px;align-items:end}.connection-grid h2{margin-bottom:0}.connection-grid>p{color:#aaa5a1;font-size:1.1rem}.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:90px;align-items:end}.contact-grid h2{margin-bottom:0}.contact-card{padding:36px;border:1px solid var(--line);border-top:6px solid var(--red);background:#eeece8}.contact-card p{font-size:1.05rem;color:var(--ink-muted)}.contact-card small{display:block;margin-top:18px;color:var(--ink-muted)}
.contact-actions { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; }

.catalog-section { position: relative; overflow: hidden; background-color: var(--paper); background-image: linear-gradient(rgba(19,18,18,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(19,18,18,.035) 1px,transparent 1px); background-size: 48px 48px; }
.catalog-section::before { position: absolute; content: ""; width: min(38vw, 520px); aspect-ratio: 1; right: -14vw; top: 4%; background: var(--red); clip-path: polygon(50% 0,100% 0,64% 50%,100% 100%,50% 100%,14% 50%); opacity: .035; }
.catalog-grid { position: relative; display: grid; gap: 34px; counter-reset: catalog; }
.catalog-card { --accent: var(--red); position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(220px, .78fr) 1.22fr; gap: clamp(36px, 7vw, 94px); align-items: center; min-height: 520px; padding: clamp(34px, 6vw, 74px); color: var(--ink); background: rgba(238,236,232,.96); border: 1px solid var(--line); border-top: 8px solid var(--accent); box-shadow: 0 28px 70px -55px rgba(19,18,18,.9); overflow: hidden; counter-increment: catalog; transition: transform 180ms var(--ease), box-shadow 180ms var(--ease); }
.catalog-card::before { position: absolute; z-index: -1; content: ""; width: 46%; aspect-ratio: 1; left: -9%; top: 50%; transform: translateY(-50%) rotate(8deg); background: color-mix(in srgb, var(--accent) 10%, transparent); clip-path: polygon(0 0,78% 0,100% 22%,100% 100%,22% 100%,0 78%); }
.catalog-card::after { position: absolute; right: 28px; top: 22px; content: counter(catalog, decimal-leading-zero); color: var(--accent); opacity: .2; font: 700 clamp(4rem, 9vw, 8rem)/1 "Space Grotesk", Arial, sans-serif; }
.catalog-card:hover { transform: translateY(-4px); box-shadow: 0 34px 80px -50px rgba(19,18,18,.78); }
.catalog-card.project-blue { --accent: var(--blue); }.catalog-card.project-green { --accent: var(--green); }.catalog-card.project-oficina { --accent: #8f4e27; }
.catalog-card img { position: relative; z-index: 1; justify-self: center; width: min(100%, 290px); height: auto; max-height: 300px; object-fit: contain; border-radius: 22%; filter: drop-shadow(0 28px 28px color-mix(in srgb, var(--accent) 24%, transparent)); }
.catalog-card img.catalog-poster { width: min(100%, 430px); max-width: 430px; max-height: none; aspect-ratio: 1498 / 1050; object-fit: contain; border-radius: 12px; }
.catalog-card h2 { margin-bottom: 16px; font-size: clamp(2.1rem, 4vw, 3.8rem); }
.catalog-card p:not(.card-kicker) { max-width: 650px; color: var(--ink-muted); }
.catalog-card div > span { display: inline-flex; margin-top: 18px; padding-bottom: 5px; color: var(--accent); border-bottom: 2px solid currentColor; font-weight: 700; }

.project-detail-hero { --accent: var(--red); position: relative; isolation: isolate; min-height: min(780px, calc(100vh - var(--header-height))); display: grid; align-items: center; padding: clamp(90px, 11vw, 155px) 0; overflow: hidden; background-color: color-mix(in srgb, var(--accent) 7%, var(--paper)); background-image: linear-gradient(color-mix(in srgb, var(--accent) 9%, transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb, var(--accent) 9%, transparent) 1px,transparent 1px); background-size: 58px 58px; }
.project-detail-hero::before { position: absolute; z-index: -1; content: ""; width: min(52vw, 760px); aspect-ratio: 1; right: -8%; top: 50%; transform: translateY(-50%) rotate(-5deg); background: var(--accent); clip-path: polygon(0 0,74% 0,100% 26%,100% 100%,26% 100%,0 74%); opacity: .11; }
.project-detail-hero::after { position: absolute; z-index: -1; content: "VALERIUS"; left: -1vw; bottom: -1.5vw; color: var(--accent); opacity: .055; font: 700 clamp(6rem, 16vw, 15rem)/.8 "Space Grotesk", Arial, sans-serif; letter-spacing: -.08em; }
.project-detail-hero.project-blue { --accent: var(--blue); }.project-detail-hero.project-green { --accent: var(--green); }.project-detail-hero.project-oficina { --accent: #8f4e27; }
.project-detail-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(50px, 8vw, 110px); align-items: center; }
.project-detail-grid h1 { margin-bottom: 24px; color: var(--accent); font-size: clamp(4.5rem, 10vw, 9rem); line-height: .86; }
.project-detail-grid .hero-lead { max-width: 650px; }
.project-detail-image { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 470px; padding: clamp(38px, 6vw, 76px); background: rgba(255,255,255,.86); border: 1px solid color-mix(in srgb, var(--accent) 28%, white); border-radius: 18px; box-shadow: 0 42px 90px -58px color-mix(in srgb, var(--accent) 75%, transparent); overflow: hidden; transform: rotate(1.5deg); }
.project-detail-image::before,.project-detail-image::after { position: absolute; z-index: -1; content: ""; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 50%; }
.project-detail-image::before { width: 84%; aspect-ratio: 1; }
.project-detail-image::after { width: 62%; aspect-ratio: 1; border-style: dashed; transform: rotate(22deg); }
.project-detail-image img { width: min(100%, 320px); height: auto; max-height: 340px; object-fit: contain; border-radius: 22%; filter: drop-shadow(0 28px 30px color-mix(in srgb, var(--accent) 25%, transparent)); }
.project-detail-poster { min-height: 0; padding: 0; overflow: hidden; }
.project-detail-poster::before,.project-detail-poster::after { display: none; }
.project-detail-poster img { width: 100%; max-width: none; max-height: none; border-radius: 0; filter: none; }
.project-detail-content { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(50px, 8vw, 110px); margin-bottom: 70px; }
.project-detail-content > div:first-child { position: relative; padding-left: clamp(24px, 4vw, 54px); border-left: 6px solid var(--red); }
.project-detail-description { max-width: 780px; margin-bottom: 38px; color: var(--ink); font: 500 clamp(1.45rem, 2.7vw, 2.25rem)/1.25 "Space Grotesk", Arial, sans-serif; letter-spacing: -.025em; }
.project-detail-content dl { align-self: start; margin: 0; padding: 18px 30px; color: var(--white); background: var(--charcoal); border-top: 7px solid var(--red); }
.project-detail-content dl div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.project-detail-content dl div:last-child { border-bottom: 0; }
.project-detail-content dt { margin-bottom: 7px; color: #aaa5a1; text-transform: uppercase; letter-spacing: .1em; font: 700 .68rem/1.2 "Space Grotesk", Arial, sans-serif; }
.project-detail-content dd { margin: 0; font-weight: 600; }

.has-motion .reveal { opacity: 0; transform: translateY(8px); transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
.has-motion .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 991px) {
  :root{--header-height:68px}.container{width:min(calc(100% - 32px),var(--container))}.nav-wrap{gap:10px}.brand-symbol{width:42px;height:42px;flex-basis:42px}.brand-symbol img{width:80px;left:-19px}.main-nav{position:absolute;top:68px;left:0;right:0;display:none;align-items:stretch;flex-direction:column;gap:4px;padding:18px 16px 24px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 20px 45px -35px rgba(19,18,18,.8)}.main-nav[data-open]{display:flex}.main-nav>a{padding:13px 8px!important}.lang-switch{order:2;margin-left:auto}.menu-button{order:3;display:flex;margin-left:0}.lang-trigger{min-width:62px;min-height:42px;padding-inline:10px}.hero-grid,.dev-hero-grid,.project-detail-grid{grid-template-columns:1fr}.hero-copy{max-width:760px}.hero-mark{max-width:640px;width:100%;margin-inline:auto}.proof-strip{grid-template-columns:1fr}.proof-strip>div+div{border-left:0;border-top:1px solid var(--line)}.section-heading,.capabilities-grid,.inner-hero-grid,.story-grid,.manifesto-grid,.connection-grid,.contact-grid,.project-detail-content{grid-template-columns:1fr}.project-stack{gap:20px;padding-bottom:clamp(42px,10vh,84px)}.project-card{position:sticky;top:calc(var(--header-height) + 10px + var(--card-index) * 7px);z-index:calc(10 + var(--card-index));grid-template-columns:1fr;transform:none!important;box-shadow:0 22px 54px -34px rgba(19,18,18,.72)}.project-visual{min-height:380px}.capabilities-intro{position:static}.manifesto blockquote,.manifesto .text-link{grid-column:1}.pillar-grid,.family-grid,.practice-grid{grid-template-columns:1fr}.pillar{min-height:260px}.family-card{min-height:280px}.cta-panel{grid-template-columns:1fr}.principle-panel{grid-template-columns:1fr}.dev-portrait{min-height:520px;max-width:620px;width:100%;margin-inline:auto}.dev-intro{order:-1}.site-header-dark{background:rgba(19,18,18,.94);color:var(--white)}.site-header-dark .main-nav{background:var(--charcoal)}.catalog-card{grid-template-columns:1fr;min-height:0}.catalog-card img{max-width:230px}.project-detail-image{min-height:360px}
  .brand-symbol{width:36px;height:36px;flex-basis:36px}.brand-symbol img{width:62px;left:-13px;top:3px}
}

@media (max-width: 575px) {
  h1{font-size:clamp(3.05rem,17vw,4.5rem)}h2{font-size:clamp(2.3rem,12vw,3.4rem)}.section{padding:80px 0}.hero{padding-top:42px}.hero-grid{display:grid;grid-template-columns:minmax(0,59fr) minmax(0,38fr);column-gap:14px;row-gap:0}.hero-copy{display:contents}.hero-copy.reveal{opacity:1;transform:none}.hero-copy .eyebrow{grid-column:1/-1;grid-row:1}.hero-copy h1{grid-column:1;grid-row:2;align-self:center;width:auto;margin-bottom:0;font-size:clamp(2.55rem,11.5vw,3.35rem);line-height:1.01}.hero-mark{position:relative;grid-column:2;grid-row:2;top:auto;right:auto;width:100%;min-height:0;aspect-ratio:1/.92;margin:0}.hero-copy .hero-lead{grid-column:1/-1;grid-row:3;max-width:none;margin-top:30px}.hero-actions{grid-column:1/-1;grid-row:4;flex-direction:column}.hero-actions .button{width:100%}.proof-strip{margin-top:70px}.section-heading{margin-bottom:40px}.project-filter-bar{align-items:stretch;flex-direction:column;gap:11px;margin-top:-14px;margin-bottom:24px}.project-filter-options{display:grid;grid-template-columns:repeat(4,1fr);width:100%}.project-filter-options button{min-width:0;padding-inline:7px}.project-stack{gap:14px;padding-bottom:54px}.project-card{top:calc(var(--header-height) + 8px + var(--card-index) * 5px);padding:24px 20px;min-height:0;border-radius:14px}.project-brand-row{margin-bottom:30px}.project-card h3{font-size:2rem}.project-number{right:18px}.project-visual{min-height:300px;padding:20px}.cowduction-poster{padding:0}.mock-content{min-height:220px;grid-template-columns:48px 1fr}.mock-main{padding:25px 17px}.data-panel{padding:20px}.manifesto-grid{gap:10px}.manifesto blockquote{font-size:2.2rem}.cta-panel{clip-path:none;padding:42px 26px}.footer-main,.footer-bottom{flex-direction:column}.footer-main nav{grid-template-columns:1fr}.inner-hero{padding:90px 0}.inner-hero-grid{gap:38px}.inner-lead{font-size:1.05rem}.story-grid{gap:42px}.pillar>span{margin-bottom:42px}.principle-panel{gap:28px}.dev-hero{padding:54px 0 86px}.dev-hero-grid{display:grid;grid-template-columns:minmax(0,59fr) minmax(0,38fr);column-gap:14px;row-gap:0}.dev-intro{display:contents}.dev-intro.reveal{opacity:1;transform:none}.dev-intro .eyebrow{grid-column:1/-1;grid-row:1}.dev-intro h1{grid-column:1;grid-row:2;align-self:center;width:auto;margin-bottom:0;font-size:clamp(2.6rem,12vw,3.45rem);line-height:1.01}.dev-portrait{position:relative;grid-column:2;grid-row:2;top:auto;right:auto;width:100%;min-height:0;aspect-ratio:1;margin:0}.dev-intro .dev-role{grid-column:1/-1;grid-row:3;margin-top:24px}.dev-intro .hero-lead{grid-column:1/-1;grid-row:4;max-width:none;margin-top:4px}.dev-intro .button{grid-column:1/-1;grid-row:5;width:100%}.portrait-code{left:12px;top:14px;font-size:1.7rem}.portrait-code small{font-size:.48rem}.portrait-label{right:10px;bottom:12px;font-size:.38rem}.practice-grid{gap:48px}.contact-grid{gap:50px}.contact-card{padding:28px 22px}.catalog-card{grid-template-columns:1fr;padding:26px}.catalog-card img{max-width:180px}.project-detail-hero{padding:72px 0}.project-detail-image{min-height:0;padding:30px}.project-detail-content{gap:42px}.contact-actions{align-items:stretch;flex-direction:column}.contact-actions .button{width:100%}
}

@media (max-width: 410px) {
  .brand > span:last-child { font-size: .88rem; }
  .menu-button { width: 42px; }
  .lang-trigger { min-width: 56px; padding-inline: 8px; gap: 6px; }
}

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