:root {
  --ink: #0b0c0d;
  --paper: #f1eee8;
  --muted: #75726c;
  --line: rgba(11, 12, 13, 0.16);
  --acid: #d4fb3f;
  --blue: #6881ff;
  --orange: #fe7855;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --mono: "DM Mono", monospace;
  --pad: clamp(1.25rem, 4.5vw, 5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.noise { position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); }
.page-glow { position: fixed; width: 45vw; height: 45vw; pointer-events: none; filter: blur(80px); opacity: .12; border-radius: 50%; z-index: -1; }
.glow-one { background: var(--blue); top: -25vw; right: -18vw; }
.glow-two { background: var(--acid); bottom: 10vh; left: -30vw; }
.section-shell { width: min(100%, 1500px); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

.site-header { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem var(--pad); }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-weight: 800; font-size: .9rem; letter-spacing: -.04em; }
.brand-mark { display: grid; width: 2rem; height: 2rem; place-items: center; background: var(--ink); color: var(--paper); font: 500 .65rem var(--mono); letter-spacing: -.1em; }
.site-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.7rem); font-size: .78rem; font-weight: 700; }
.site-nav > a:not(.nav-contact) { position: relative; }
.site-nav > a:not(.nav-contact)::after { content: ""; position: absolute; height: 1px; left: 0; right: 100%; bottom: -.4rem; background: var(--ink); transition: right .25s ease; }
.site-nav > a:hover::after { right: 0; }
.nav-contact { padding: .65rem 1rem; background: var(--ink); color: var(--paper); }
.nav-contact span, .text-link span, .button span { display: inline-block; margin-left: .35rem; transition: transform .25s ease; }
.nav-contact:hover span, .text-link:hover span, .button:hover span { transform: translate(3px, -3px); }
.nav-toggle { display: none; }

.hero { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(300px, .97fr); align-items: center; gap: clamp(2rem, 6vw, 9rem); min-height: calc(100svh - 5rem); padding-top: clamp(4rem, 9vh, 8rem); padding-bottom: clamp(5rem, 10vh, 9rem); }
.eyebrow, .section-kicker { margin: 0; color: var(--muted); font: 500 .66rem/1.4 var(--mono); letter-spacing: .07em; }
.eyebrow { display: flex; align-items: center; gap: .55rem; }
.eyebrow span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 .19rem rgba(212, 251, 63, .25); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 780px; margin: 1.45rem 0 1.6rem; font-size: clamp(3.35rem, 7.1vw, 7.2rem); line-height: .94; letter-spacing: -.085em; font-weight: 700; }
em { font-family: var(--serif); font-weight: 600; letter-spacing: -.06em; }
.hero-intro { max-width: 36rem; color: #4b4a47; font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 2rem; margin-top: 2.35rem; }
.button { display: inline-flex; align-items: center; padding: 1rem 1.25rem; font-size: .78rem; font-weight: 800; transition: transform .25s ease, background .25s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--ink); color: var(--paper); }
.text-link { display: inline-block; font-size: .78rem; font-weight: 800; border-bottom: 1px solid var(--ink); padding-bottom: .28rem; }
.hero-meta { display: flex; gap: clamp(2.2rem, 4vw, 4.5rem); margin-top: clamp(4rem, 8vh, 7rem); }
.meta-label { display: block; margin-bottom: .45rem; color: var(--muted); font: 500 .58rem var(--mono); letter-spacing: .08em; }
.hero-meta strong { font-size: .7rem; line-height: 1.6; letter-spacing: -.02em; }

.hero-art { width: min(100%, 540px); justify-self: end; }
.art-topline, .art-bottomline { display: flex; justify-content: space-between; padding: .75rem 0; font: 500 .55rem var(--mono); letter-spacing: .06em; }
.art-topline { border-bottom: 1px solid var(--line); }
.art-bottomline { color: var(--muted); }
.portrait-panel { position: relative; isolation: isolate; height: clamp(390px, 44vw, 590px); overflow: hidden; background: #d4d0c8; }
.portrait-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(145deg, transparent 20%, rgba(11,12,13,.2)); }
.portrait-initials { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-52%, -44%); color: var(--ink); font-size: clamp(11rem, 22vw, 19rem); line-height: .7; font-weight: 800; letter-spacing: -.19em; mix-blend-mode: multiply; }
.orb { position: absolute; border-radius: 50%; }
.orb-large { width: 80%; aspect-ratio: 1; top: -5%; left: -16%; background: var(--acid); box-shadow: inset -20px -20px 50px rgba(0,0,0,.14); }
.orb-small { width: 32%; aspect-ratio: 1; right: 6%; bottom: 9%; background: var(--blue); box-shadow: inset -16px -16px 30px rgba(0,0,0,.2); }
.art-grid { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49.8%, rgba(11,12,13,.25) 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, rgba(11,12,13,.25) 50%, transparent 50.2%); background-size: 37px 37px; opacity: .52; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.portrait-caption { position: absolute; z-index: 3; bottom: 1rem; left: 1rem; right: 1rem; display: flex; justify-content: space-between; color: var(--ink); font: 500 .64rem var(--mono); letter-spacing: .11em; }

.marquee { overflow: hidden; background: var(--ink); color: var(--paper); padding: 1.2rem 0; white-space: nowrap; }
.marquee-track { display: inline-flex; align-items: center; gap: 2.3rem; min-width: max-content; animation: move 30s linear infinite; font-size: clamp(1.45rem, 2.6vw, 2.6rem); font-weight: 800; letter-spacing: -.07em; }
.marquee i { color: var(--acid); font-style: normal; font-size: .7em; }
@keyframes move { to { transform: translateX(-50%); } }

.intro-grid { display: grid; grid-template-columns: 1fr minmax(0, 2.05fr); gap: 2rem; padding-top: clamp(7rem, 14vw, 14rem); padding-bottom: clamp(7rem, 13vw, 12rem); }
.intro-statement { max-width: 870px; }
.intro-statement > p:first-child { margin: 0; font-size: clamp(2.2rem, 4.3vw, 4.5rem); line-height: 1.08; letter-spacing: -.07em; font-weight: 700; }
.intro-detail { max-width: 32rem; margin: 2rem 0 0 auto; color: #55524d; font-size: .94rem; line-height: 1.75; }

.services { padding-bottom: clamp(7rem, 12vw, 11rem); }
.section-heading { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 2rem; align-items: end; margin-bottom: 3.8rem; }
.section-heading h2, .work-heading h2, .process h2, .contact h2 { margin: 0; font-size: clamp(2.65rem, 5vw, 5.1rem); line-height: .97; letter-spacing: -.08em; }
.section-heading > p:last-child { margin: 0; color: #55524d; font-size: .88rem; line-height: 1.65; }
.service-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-card { position: relative; min-height: 29rem; padding: 1.5rem clamp(1.2rem, 2.3vw, 2.6rem) 2rem; display: flex; flex-direction: column; border-right: 1px solid var(--line); transition: background .35s ease, color .35s ease; }
.service-card:last-child { border-right: 0; }
.service-card:hover, .service-card.featured { background: var(--ink); color: var(--paper); }
.service-number { font: 500 .6rem var(--mono); color: var(--muted); }
.featured .service-number, .service-card:hover .service-number { color: #a8a7a0; }
.service-card h3 { margin: auto 0 1.25rem; font-size: clamp(1.7rem, 2.4vw, 2.55rem); line-height: .98; letter-spacing: -.07em; }
.service-card p { color: #68655f; font-size: .82rem; line-height: 1.7; }
.featured p, .service-card:hover p { color: #c5c3bd; }
.service-card ul { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 1.1rem 0 0; list-style: none; }
.service-card li { padding: .36rem .45rem; border: 1px solid var(--line); font: 500 .55rem var(--mono); letter-spacing: .03em; }
.featured li, .service-card:hover li { border-color: rgba(255,255,255,.2); }
.service-icon { position: absolute; top: 3.9rem; right: 1.7rem; width: 4.25rem; height: 4.25rem; }
.icon-web { border: 1px solid var(--ink); }
.featured .icon-web, .service-card:hover .icon-web { border-color: var(--paper); }
.icon-web::before { content: ""; position: absolute; left: 0; right: 0; top: .9rem; border-top: 1px solid currentColor; }.icon-web span { position: absolute; width: .25rem; height: .25rem; top: .32rem; background: currentColor; border-radius: 50%; }.icon-web span:nth-child(1){left:.35rem}.icon-web span:nth-child(2){left:.8rem}.icon-web span:nth-child(3){left:1.25rem}
.icon-product { transform: rotate(-21deg); border: 1px solid var(--ink); border-radius: 50%; }.icon-product span { position: absolute; inset: .75rem; border: 1px solid currentColor; border-radius: 50%; }.icon-product span:nth-child(2){inset:1.55rem}.icon-product span:nth-child(3){width:.45rem;height:.45rem;inset:auto;left:1.8rem;top:1.8rem;background:currentColor;border-radius:50%}
.icon-play { display:grid; place-items:center; border: 1px solid var(--ink); border-radius: 50%; }.icon-play span { width:0;height:0;border-top:.62rem solid transparent;border-bottom:.62rem solid transparent;border-left:.95rem solid currentColor;margin-left:.2rem; }
.featured .service-icon, .service-card:hover .service-icon { border-color: var(--paper); }

.consulting { display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(3rem,8vw,10rem);padding-bottom:clamp(7rem,12vw,12rem); }
.consulting-intro { align-self:start;position:sticky;top:2rem; }.consulting-intro h2 { margin:1.35rem 0 1.45rem;font-size:clamp(2.7rem,4.8vw,5.1rem);line-height:.96;letter-spacing:-.08em; }.consulting-intro > p { max-width:30rem;color:#5c5953;font-size:.9rem;line-height:1.75; }.consulting-links { display:flex;align-items:center;gap:1.1rem;margin-top:2rem; }
.consulting-offer { border-top:1px solid var(--line); }.offer-card { position:relative;min-height:13.6rem;padding:1.45rem 6rem 1.5rem 0;border-bottom:1px solid var(--line); }.offer-card > span { color:var(--muted);font:500 .58rem var(--mono);letter-spacing:.05em; }.offer-card h3 { margin:1.25rem 0 .75rem;font-size:clamp(1.65rem,2.8vw,2.8rem);line-height:.94;letter-spacing:-.075em; }.offer-card p { max-width:31rem;margin:0;color:#5d5a54;font-size:.82rem;line-height:1.7; }.offer-card::after { content:"↗";position:absolute;right:0;top:1.4rem;width:2.45rem;height:2.45rem;display:grid;place-items:center;border:1px solid var(--line);font-size:1.05rem;transition:.25s ease; }.offer-card:hover::after { transform:translate(3px,-3px);background:var(--ink);color:var(--paper); }

.case-study { position:relative;overflow:hidden;background:var(--ink);color:var(--paper);padding-top:clamp(5rem,8vw,8rem);padding-bottom:clamp(5rem,8vw,8rem); }.case-study::before { content:"";position:absolute;width:47rem;height:47rem;top:-22rem;left:-12rem;border-radius:50%;background:var(--acid);filter:blur(2px);opacity:.95; }.case-study::after { content:"";position:absolute;inset:0;opacity:.18;background:linear-gradient(90deg,transparent 49.8%,#fff 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,#fff 50%,transparent 50.2%);background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent 80%); }.case-study-grid { position:relative;z-index:1;display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(3rem,8vw,10rem); }.case-label { padding-top:.2rem; }.case-label .section-kicker { color:#aeaea7; }.case-mark { display:block;margin:1.2rem 0 1rem;font-size:clamp(4rem,8vw,8rem);font-weight:800;line-height:.75;letter-spacing:-.13em; }.case-label > p:last-child { color:#c3c2bb;font:500 .68rem/1.7 var(--mono);letter-spacing:.02em; }.case-content h2 { margin:0 0 1.7rem;font-size:clamp(2.65rem,5vw,5.3rem);line-height:.97;letter-spacing:-.085em; }.case-content > p { max-width:45rem;color:#c9c7c1;font-size:.91rem;line-height:1.8; }.case-content .case-lead { color:var(--paper);font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.65; }.case-pillars { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.22); }.case-pillars span { color:var(--acid);font:500 .62rem var(--mono); }.case-pillars h3 { margin:.75rem 0 .45rem;font-size:1.2rem;letter-spacing:-.06em; }.case-pillars p { margin:0;color:#bdbbb5;font-size:.72rem;line-height:1.65; }.case-link { margin-top:2.5rem;border-color:var(--paper); }

.work { padding-bottom: clamp(7rem, 12vw, 12rem); }
.work-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: end; padding-bottom: 3.5rem; }
.work-heading .text-link { justify-self: start; grid-column: 2; }
.project-grid { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr 1fr; gap: 1.15rem; }
.project { display: block; }.project-main { grid-row: span 2; }
.project-art { position: relative; min-height: 16rem; overflow: hidden; padding: 1rem; }.project-main .project-art { height: 100%; min-height: 37rem; }
.project-index { position: relative; z-index: 3; font: 500 .58rem var(--mono); letter-spacing: .05em; }
.project-info { display: flex; justify-content: space-between; align-items: end; padding: .9rem 0 .2rem; }.project-info h3 { margin: 0 0 .2rem; font-size: 1rem; letter-spacing: -.05em; }.project-info p { margin: 0; color: var(--muted); font-size: .66rem; }.project-arrow { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--line); transition: background .25s, color .25s, transform .25s; }.project:hover .project-arrow { background: var(--ink); color: var(--paper); transform: translate(3px,-3px); }
.project-laos { background: #d4ff39; }.atomic-core { position:absolute;width:19%;aspect-ratio:1;left:41%;top:42%;border-radius:50%;background:#0b0c0d;box-shadow: 0 0 0 1rem rgba(11,12,13,.07); }.atomic-orbit { position:absolute;left:18%;top:25%;width:65%;height:47%;border:1px solid #0b0c0d;border-radius:50%; }.orbit-one { transform: rotate(50deg); }.orbit-two { transform: rotate(-50deg); }.atomic-label { position:absolute;z-index:2;bottom:5%;left:7%;font-size:clamp(3.7rem, 7vw, 7rem);font-weight:800;line-height:.73;letter-spacing:-.12em; }.atomic-label small { display:block;margin:.7rem 0 0 .15rem;font:500 .12em var(--mono);letter-spacing:-.03em; }.project-corner { position:absolute;right:1.1rem;bottom:1rem;font-size:3.2rem; }
.project-calorify { background: var(--orange); }.pixini-word { position:absolute;left:6%;bottom:6%;font-size:clamp(3.1rem, 5.4vw, 5.1rem);font-weight:800;letter-spacing:-.12em;line-height:.7; }.pixini-shape { position:absolute;border-radius:50%;background:#f7d772; }.pixini-shape.one{width:35%;aspect-ratio:1;right:-2%;top:-13%}.pixini-shape.two{width:18%;aspect-ratio:1;right:29%;top:25%;background:#0b0c0d}.pixini-shape.three{width:13%;aspect-ratio:1;right:15%;bottom:17%;background:#6881ff}
.project-leotech { background: #1e2361; color:#f1eee8; }.project-leotech .project-index { color:#b3b8fa }.planet{position:absolute;width:56%;aspect-ratio:1;right:-9%;bottom:-36%;border-radius:50%;background:linear-gradient(145deg,#b2baff 10%,#3340c3 50%,#10133d 75%);box-shadow:-20px -20px 50px rgba(255,255,255,.1) inset}.moon{position:absolute;width:6%;aspect-ratio:1;right:45%;top:32%;border-radius:50%;background:#d4fb3f}.space-ring{position:absolute;width:44%;height:18%;right:0;bottom:15%;border:1px solid #d4fb3f;border-radius:50%;transform:rotate(-30deg)}.space-copy{position:absolute;left:7%;bottom:8%;font:500 clamp(1.5rem,3vw,2.5rem)/.86 var(--mono);letter-spacing:-.1em}

.process { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding-bottom: clamp(7rem, 12vw, 12rem); }.process-intro { align-self: start; }.process-intro h2 { margin-top: 1.5rem; }.process-steps { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line); }.process-steps li { display:grid; grid-template-columns: 6.5rem 1fr; gap:1rem; padding: 1.8rem 0 2rem; border-bottom: 1px solid var(--line); }.process-steps li > span { color:var(--muted);font:500 .6rem var(--mono); }.process-steps h3 { margin:0 0 .55rem;font-size:clamp(1.35rem,2vw,2rem);letter-spacing:-.06em; }.process-steps p { max-width:28rem;margin:0;color:#615e59;font-size:.85rem;line-height:1.65; }

.contact { position: relative; overflow: hidden; padding-top: clamp(5rem, 8vw, 8rem); padding-bottom: clamp(5rem, 8vw, 8rem); color: var(--paper); background: var(--ink); }.contact .section-kicker { position:relative;z-index:1;color:#999993; }.contact-content { position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;margin-top:2rem;align-items:end; }.contact h2 { font-size:clamp(3.4rem,7vw,7rem); }.contact-content > p { max-width:25rem;margin:0;color:#c8c6c1;line-height:1.7;font-size:.95rem; }.contact-actions { display:flex;align-items:center;gap:1.3rem;margin-top:2.3rem; }.button-light { background:var(--acid);color:var(--ink); }.contact-social { color:var(--paper);border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:.3rem;font-size:.76rem;font-weight:700 }.contact-orb { position:absolute;width:55rem;aspect-ratio:1;right:-17rem;bottom:-36rem;border-radius:50%;background:var(--blue);opacity:.55;filter:blur(3px); }

.contact-form-wrap { position:relative;z-index:1;max-width:38rem;margin-top:3rem; }
.contact-form { display:flex;flex-direction:column;gap:1.1rem; }
.contact-field-row { display:grid;grid-template-columns:1fr 1fr;gap:1.1rem; }
.contact-field { display:flex;flex-direction:column;gap:.5rem; }
.contact-field > span { color:#a6a49e;font:500 .62rem var(--mono);letter-spacing:.06em; }
.contact-field > span em { font-style:normal;opacity:.75; }
.contact-field input, .contact-field textarea, .contact-field select { width:100%;padding:.8rem .9rem;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:var(--paper);font:500 .88rem/1.5 var(--sans);resize:vertical; }
.contact-field textarea { min-height:3.4rem; }
.contact-field input::placeholder, .contact-field textarea::placeholder { color:#8a8880; }
.contact-field select option { color:var(--ink);background:var(--paper); }
.contact-field input:focus-visible, .contact-field textarea:focus-visible, .contact-field select:focus-visible { outline:3px solid var(--blue);outline-offset:2px; }
.contact-honeypot { position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden; }
.contact-form .cf-turnstile { margin-top:.1rem; }
.contact-form > button { align-self:flex-start;margin-top:.3rem;border:0;cursor:pointer; }
.contact-feedback { margin:0 0 1.5rem;padding:.9rem 1.05rem;border-left:3px solid var(--acid);background:rgba(212,251,63,.1);color:var(--paper);font-size:.85rem;line-height:1.65; }
.contact-feedback[hidden] { display:none; }
.contact-feedback-error { border-left-color:var(--orange);background:rgba(254,120,85,.12); }
.contact-form-wrap .contact-actions { margin-top:2.3rem; }

.site-footer { display:flex;justify-content:space-between;align-items:center;padding-top:1.5rem;padding-bottom:1.5rem;font-size:.62rem;color:#68655f; }.site-footer p { margin:0; }.back-to-top { font-weight:800;color:var(--ink); }

.analytics-preferences { padding:.35rem 0;border:0;border-bottom:1px solid currentColor;background:transparent;color:var(--ink);font:800 .62rem var(--sans);cursor:pointer; }
.analytics-preferences:focus-visible, .analytics-consent button:focus-visible { outline:3px solid var(--blue);outline-offset:3px; }
.analytics-consent[hidden] { display:none; }
.analytics-consent { position:fixed;z-index:30;left:max(1rem,env(safe-area-inset-left));right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(1.25rem,4vw,4rem);max-width:70rem;margin:0 auto;padding:clamp(1.25rem,3vw,2rem);border:1px solid rgba(255,255,255,.22);background:var(--ink);color:var(--paper);box-shadow:0 1.25rem 4rem rgba(0,0,0,.35); }
.analytics-consent-kicker { margin:0 0 .65rem;color:var(--acid);font:500 .6rem var(--mono);letter-spacing:.08em; }
.analytics-consent h2 { margin:0 0 .65rem;font-size:clamp(1.55rem,3vw,2.55rem);line-height:1;letter-spacing:-.06em; }
.analytics-consent p:last-child { max-width:48rem;margin:0;color:#cfcdc7;font-size:.78rem;line-height:1.65; }
.analytics-consent-actions { display:flex;align-items:center;gap:.75rem; }
.analytics-consent button { min-height:2.75rem;padding:.78rem 1rem;border:1px solid rgba(255,255,255,.32);background:transparent;color:var(--paper);font:800 .7rem var(--sans);white-space:nowrap;cursor:pointer; }
.analytics-consent .analytics-consent-accept { border-color:var(--acid);background:var(--acid);color:var(--ink); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 800px) {
  .site-header { padding-top:1.1rem;padding-bottom:1.1rem; }.nav-toggle { position:relative;z-index:12;display:grid;gap:.3rem;width:2.5rem;height:2.5rem;padding:.65rem;background:var(--ink);border:0;place-content:center; }.nav-toggle span { display:block;width:1.05rem;height:1px;background:var(--paper);transition:transform .2s ease; }.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(2.7px) rotate(45deg); }.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-2.7px) rotate(-45deg); }.site-nav { position:absolute;z-index:11;inset:0 0 auto;background:var(--paper);padding:5.2rem var(--pad) 1.8rem;display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem;opacity:0;pointer-events:none;transform:translateY(-1rem);transition:.2s ease;box-shadow:0 14px 30px rgba(0,0,0,.08); }.site-nav.open { opacity:1;pointer-events:auto;transform:none; }.hero { grid-template-columns:1fr;min-height:auto;padding-top:4.2rem; }.hero-art { width:100%;max-width:530px;justify-self:start; }.hero-copy { max-width:680px; }.hero-meta { margin-top:3.5rem; }.intro-grid, .section-heading, .work-heading, .process, .contact-content, .consulting, .case-study-grid { grid-template-columns:1fr; }.intro-grid { gap:1.8rem; }.intro-detail { margin-left:0; }.section-heading { margin-bottom:2.5rem; }.work-heading .text-link { grid-column:auto; }.service-list { grid-template-columns:1fr; }.service-card { min-height:21rem;border-right:0;border-bottom:1px solid var(--line); }.service-card:last-child { border-bottom:0; }.consulting-intro { position:static; }.consulting-offer { margin-top:-.7rem; }.case-label { display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:1rem; }.case-label .section-kicker { grid-column:span 2; }.case-mark { margin:0; }.case-pillars { gap:.8rem; }.project-grid { grid-template-columns:1fr; }.project-main { grid-row:auto; }.project-main .project-art { min-height:28rem; }.process-steps { margin-top:1rem; }.contact-content { gap:2rem; }.contact-orb { width:35rem;right:-22rem;bottom:-20rem; }.contact-field-row { grid-template-columns:1fr; }.site-footer { gap:1rem;flex-wrap:wrap; }.site-footer p { order:3;width:100%; }
}

@media (max-width: 800px) {
  .analytics-consent { grid-template-columns:1fr;align-items:start; }
  .analytics-consent-actions { flex-wrap:wrap; }
}

@media (max-width: 480px) {
  h1 { font-size:clamp(3.25rem,16vw,4.5rem); }.hero-actions, .consulting-links { align-items:flex-start;flex-direction:column;gap:1.25rem; }.hero-meta { gap:1.6rem; }.portrait-panel { height: 390px; }.case-pillars { grid-template-columns:1fr;gap:1.4rem; }.project-main .project-art { min-height:25rem; }.atomic-label { font-size:4.5rem; }.process-steps li { grid-template-columns:3.2rem 1fr; }.contact-actions { align-items:flex-start;flex-direction:column; }.site-footer { align-items:flex-start;flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; }.marquee-track { animation:none; }.reveal { opacity:1;transform:none;transition:none; } }

/* Pagina de privacidad. Mobile-first: la base es el telefono y min-width solo anade.
   Sin .reveal a proposito: una pagina que explica derechos no puede depender de que
   el observador de scroll llegue a ejecutarse para ser legible. */
.footer-link { color:var(--ink);font-weight:800;border-bottom:1px solid var(--line);padding-bottom:.15rem; }
.footer-link:hover { border-color:var(--ink); }

.legal-hero { padding-top:clamp(2.2rem,6vw,4.5rem);padding-bottom:clamp(3rem,7vw,5.5rem); }
.legal-hero h1 { max-width:17ch;margin:1.35rem 0 1.5rem;font-size:clamp(2.6rem,8vw,5.6rem); }
.legal-lead { max-width:36rem;margin:0;color:#4b4a47;font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.65; }
.legal-actions { display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem;margin-top:2.2rem; }
.legal-index { display:flex;flex-wrap:wrap;gap:.45rem;margin:2.6rem 0 0;padding:0;list-style:none; }
.legal-index a { display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .85rem;border:1px solid var(--line);color:#55524d;font:500 .58rem var(--mono);letter-spacing:.05em;transition:background .25s ease,color .25s ease; }
.legal-index a:hover { background:var(--ink);color:var(--paper); }
.legal-index a:focus-visible, .legal-prose a:focus-visible, .legal-optout a:focus-visible, .footer-link:focus-visible { outline:3px solid var(--blue);outline-offset:3px; }

.legal-section { padding-top:clamp(2.8rem,7vw,5rem);padding-bottom:clamp(2.8rem,7vw,5rem);border-top:1px solid var(--line); }
.legal-section h2 { margin:1.15rem 0 1.5rem;font-size:clamp(2.05rem,6vw,3.6rem);line-height:.99;letter-spacing:-.075em; }
.legal-prose p { max-width:36rem;margin:0 0 1.1rem;color:#55524d;font-size:.9rem;line-height:1.8; }
.legal-prose p:last-child { margin-bottom:0; }
.legal-prose strong { color:var(--ink);font-weight:800; }
.legal-prose a, .legal-optout .section-shell > p a { border-bottom:1px solid currentColor;font-weight:800; }
.legal-note { max-width:36rem;margin:1.9rem 0 0;padding:1rem 1.15rem;border-left:3px solid var(--orange);background:rgba(254,120,85,.1);color:#5d5a54;font-size:.82rem;line-height:1.7; }
.legal-note strong { display:block;margin-bottom:.35rem;color:var(--ink);font:800 .6rem var(--mono);letter-spacing:.06em; }
.legal-updated { margin:0;color:var(--muted);font:500 .6rem var(--mono);letter-spacing:.06em; }

.legal-list { margin:2.2rem 0 0;padding:0;list-style:none;border-top:1px solid var(--line); }
.legal-list > li { padding:1.25rem 0 1.4rem;border-bottom:1px solid var(--line); }
.legal-list > li > :first-child { display:block;margin:0 0 .6rem;color:var(--muted);font:500 .6rem/1.55 var(--mono);letter-spacing:.05em;overflow-wrap:anywhere; }
.legal-list h3 { margin:0 0 .5rem;font-size:1.05rem;letter-spacing:-.05em; }
.legal-list p { max-width:34rem;margin:0 0 .8rem;color:#55524d;font-size:.85rem;line-height:1.7; }
.legal-list p:last-child { margin-bottom:0; }
.legal-prose code, .legal-list p code, .legal-optout .section-shell > p code { font:500 .92em var(--mono);letter-spacing:0;overflow-wrap:anywhere; }
.legal-prose code, .legal-list p code { color:var(--ink); }
.legal-optout .section-shell > p code { color:var(--paper); }

.legal-optout { position:relative;overflow:hidden;padding-top:clamp(3.5rem,9vw,7rem);padding-bottom:clamp(3.5rem,9vw,7rem);background:var(--ink);color:var(--paper); }
.legal-optout::before { content:"";position:absolute;width:30rem;aspect-ratio:1;right:-19rem;top:-15rem;border-radius:50%;background:var(--blue);opacity:.45;filter:blur(3px); }
.legal-optout .section-shell { position:relative;z-index:1; }
.legal-optout .section-kicker { color:#999993; }
.legal-optout h2 { margin:1.15rem 0 1.4rem;font-size:clamp(2.5rem,8vw,5rem);line-height:.97;letter-spacing:-.08em; }
.legal-optout .section-shell > p { max-width:36rem;color:#c9c7c1;font-size:.9rem;line-height:1.75; }
.legal-optout h3 { margin:2.4rem 0 .6rem;font-size:1.1rem;letter-spacing:-.05em; }
/* Tarjeta del interruptor, sobre el fondo oscuro de la seccion. El selector de
   parrafos de arriba es de hijo directo a proposito: el estilo de prosa de la
   seccion (max-width, .9rem) no debe entrar en la tarjeta y pisar los tamanos
   que fija oposicion.js con sus propias clases. */
.optout-control { max-width:36rem;margin:2.2rem 0 2.6rem;padding:clamp(1.2rem,4vw,1.75rem);border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05); }
.optout-control p { margin:0; }
.optout-fallback { color:#cfcdc7;font-size:.85rem;line-height:1.7; }

@media (min-width: 801px) {
  .legal-actions { flex-direction:row;align-items:center;gap:2rem; }
  .legal-list > li { display:grid;grid-template-columns:15rem minmax(0,1fr);gap:2rem;align-items:start; }
  .legal-list > li > :first-child { margin:.2rem 0 0; }
}

/* Interruptor de oposicion (oposicion.js). Los selectores llevan la etiqueta
   delante para ganarle a `.optout-control p`, que fija margin 0. El color se
   hereda de la seccion y solo se atenua: asi el control sigue siendo legible si
   algun dia se coloca sobre fondo claro. */
p.oposicion-kicker { margin:0 0 .85rem;color:inherit;opacity:.62; }
p.oposicion-estado { margin:0 0 .6rem;font-size:.95rem;line-height:1.5; }
p.oposicion-estado strong { font-weight:800; }
p.oposicion-detalle { margin:0;color:inherit;opacity:.8;font-size:.82rem;line-height:1.7; }
button.oposicion-accion { min-height:2.75rem;max-width:100%;margin:1.35rem 0 0;border:0;text-align:left;cursor:pointer; }
button.oposicion-accion:focus-visible { outline:3px solid var(--blue);outline-offset:3px; }
p.oposicion-confirmacion { margin:1.35rem 0 0;padding:.8rem .95rem;border-left:3px solid var(--acid);background:rgba(212,251,63,.08);color:inherit;font-size:.8rem;line-height:1.65; }
p.oposicion-confirmacion:empty { display:none; }
p.oposicion-nota { margin:1.1rem 0 0;color:inherit;opacity:.7;font-size:.72rem;line-height:1.6; }