@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/HankenGrotesk-normal-300_600.woff2) format('woff2')}
@font-face{font-family:'Newsreader Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Newsreader-display-400.woff2) format('woff2')}
@font-face{font-family:'Newsreader Display';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/Newsreader-display-italic-400.woff2) format('woff2')}
@font-face{font-family:'Newsreader Text';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Newsreader-text-400.woff2) format('woff2')}

/* Presencial, boutique edition.
   One light palette: cream carries the page, sand and plaster step it down, ink (a warm
   charcoal, never black) for text, bronze for the accent and champagne for light. Instrument
   Newsreader in two optical cuts (display at 72, text at 20), Hanken Grotesk for reading. One radius: none.
   Layout sequence: lit hero, editorial statement, asymmetric index, pinned
   timeline, dense spec index, offset emblem, split contact. No two adjacent alike. */
:root {
  --cream: #F4EFE7; --sand: #E9E1D4; --plaster: #DCD2C2;
  --ink: #2B2724; --mute: #6B6157; --line: rgba(43, 39, 36, .14);
  --bronze: #7E5F33; --champagne: #D8C39A;
  --serif: 'Newsreader Display', Georgia, 'Times New Roman', serif;
  --serif-text: 'Newsreader Text', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --e-out: cubic-bezier(.16, 1, .3, 1); --e-std: cubic-bezier(.4, 0, .2, 1);
  --d-fast: 160ms; --d-base: 260ms; --d-slow: 420ms; --d-deliberate: 700ms;
  --pad: clamp(20px, 4.5vw, 72px);
  --gap-section: clamp(96px, 14vh, 190px);
  --fg: var(--ink); --fg-2: var(--mute); --hair: var(--line); --accent: var(--bronze);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--mute) var(--cream); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--cream); color: var(--fg); font: 300 1.0625rem/1.6 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; caret-color: var(--bronze); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
em { font-style: italic; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--champagne); color: var(--ink); }
:focus-visible { outline: 1px solid var(--bronze); outline-offset: 5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 300; padding: 12px 16px; background: var(--ink); color: var(--cream); text-decoration: none; }
.skip:focus { top: 16px; }

/* surfaces: three warm tones of one light palette. Cream carries the page; sand and plaster
   step it down for the statement, the spec index and the close. Nothing darker than ink. */
.band-cream { background: var(--cream); }
.band-sand { background: var(--sand); }
.band-plaster { background: var(--plaster); --fg-2: #5C534A; --accent: #6A4E28; --hair: rgba(43, 39, 36, .18); }

/* type */
.h2 { font: 400 clamp(2.4rem, 5vw, 4.4rem)/.98 var(--serif); letter-spacing: -.02em; }
.link-arrow { display: inline-flex; align-items: center; gap: .55em; min-height: 44px; text-decoration: none; font-size: .95rem; letter-spacing: .01em;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 100% 1px no-repeat; transition: background-size var(--d-slow) var(--e-out), color var(--d-fast); }
.link-arrow::after { content: ""; width: 14px; height: 1px; background: currentColor; transform-origin: left; transition: transform var(--d-slow) var(--e-out); }
.link-arrow:hover { background-size: 0 1px; background-position: 100% calc(100% - 9px); color: var(--accent); }
.link-arrow:hover::after { transform: scaleX(1.6); }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border: 1px solid currentColor;
  font: 400 .95rem var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; background: none; color: inherit; white-space: nowrap; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform var(--d-slow) var(--e-out); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:active::before { background: #3A3430; }
.btn span { transition: color var(--d-base) var(--e-std); }
.btn-ink { color: var(--ink); }
.btn-ink:hover span, .btn-ink:focus-visible span { color: var(--cream); }
.btn:disabled { opacity: .55; cursor: progress; }

/* header: ink on every band; a light page needs no blend tricks */
.hdr { position: fixed; inset: 0 0 auto; z-index: 200; display: flex; align-items: center; gap: 40px; padding: 22px var(--pad); color: var(--ink); pointer-events: none; }
.hdr > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 400 1.55rem/1 var(--serif-text); letter-spacing: -.01em; white-space: nowrap; }
.mark { width: 34px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1; flex: none; }
.nav { display: flex; gap: 34px; margin-left: auto; }
.nav a, .lang { text-decoration: none; font-size: .88rem; letter-spacing: .02em; padding: 10px 0; position: relative; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--d-slow) var(--e-out); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.hdr-end { display: flex; align-items: center; gap: 22px; }
.lang { min-width: 44px; text-align: center; }
.hdr-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid currentColor; text-decoration: none; font-size: .88rem; letter-spacing: .01em; white-space: nowrap; transition: background-color var(--d-base), color var(--d-base); }
.hdr-cta:hover { background: currentColor; color: var(--cream); }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; position: relative; }
.menu-btn i { position: absolute; left: 11px; right: 11px; height: 1px; background: currentColor; transition: transform var(--d-slow) var(--e-out); }
.menu-btn i:first-of-type { top: 18px; } .menu-btn i:last-of-type { top: 25px; }
.menu-btn[aria-expanded="true"] i:first-of-type { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 150; background: var(--sand); color: var(--ink); display: flex; flex-direction: column; padding: 110px var(--pad) 40px; overflow-y: auto; overscroll-behavior: contain; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; margin-top: auto; }
.menu nav > a { font: 400 clamp(2.6rem, 11vw, 4.2rem)/1.05 var(--serif); text-decoration: none; border-bottom: 1px solid var(--line); padding: 10px 0; letter-spacing: -.02em; }
.menu-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; font-size: .9rem; color: var(--mute); }
.menu-foot a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 960px) {
  .nav, .hdr-cta { display: none; }
  .menu-btn { display: block; }
  .hdr-end { margin-left: auto; gap: 8px; }
  .brand { font-size: 1.3rem; }
}

/* hero: two warm lights meet on plaster */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; }
.hero-gl, .hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-fallback { z-index: -2; background:
  radial-gradient(42vmax 42vmax at 44% 44%, rgba(216, 195, 154, .6), transparent 62%),
  radial-gradient(36vmax 36vmax at 60% 54%, rgba(228, 207, 190, .55), transparent 64%), var(--cream); }
.hero-in { position: relative; padding: 96px var(--pad) clamp(40px, 8vh, 88px); }  /* top clears the fixed header on short viewports */
.hero-h { max-width: 12ch; font: 400 clamp(3.2rem, 7vw, 6.2rem)/.95 var(--serif); letter-spacing: -.02em; margin-left: -.02em; }
.hero-h .line { display: block; }
.hero-h .line:nth-child(2) { padding-left: .5em; }
.hero-h em { color: var(--accent); }
.hero { --fg-2: #514840; --accent: #6A4E28; }
@media (max-width: 430px) { :lang(es) .hero-h { font-size: clamp(2.4rem, 12vw, 3.2rem); } }
.hero-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 60px; margin-top: clamp(28px, 5vh, 52px); padding-top: 24px; border-top: 1px solid var(--hair); }
.hero-sub { max-width: 46ch; font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--fg-2); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }

/* statement: editorial stack, narrow measure, on the same noir */
.statement { padding: var(--gap-section) var(--pad) calc(var(--gap-section) * 1.1); }
.statement-p { max-width: 24ch; font: 400 clamp(1.8rem, 3.6vw, 3.2rem)/1.12 var(--serif); letter-spacing: -.02em; }

/* services: asymmetric index, title column and a list */
.services { padding: var(--gap-section) var(--pad) calc(var(--gap-section) * .8); border-top: 1px solid var(--hair); }
.services-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 40px clamp(40px, 7vw, 120px); align-items: start; }
.services-lead { position: sticky; top: 120px; }
.services-p { max-width: 36ch; margin-top: 26px; color: var(--fg-2); font-size: 1.05rem; }
.svc-list { border-top: 1px solid var(--hair); }
.svc { display: grid; grid-template-columns: 1fr minmax(0, 36ch); gap: 12px 40px; align-items: baseline; padding: clamp(26px, 4vh, 40px) 0; border-bottom: 1px solid var(--hair); }
.svc-t { font: 400 clamp(2rem, 3.6vw, 3.4rem)/.98 var(--serif); letter-spacing: -.025em; transition: font-style var(--d-fast), color var(--d-base); }
.svc-d { color: var(--fg-2); transition: color var(--d-base); }
@media (hover: hover) { .svc:hover .svc-t { font-style: italic; color: var(--accent); } .svc:hover .svc-d { color: var(--fg); } }
@media (max-width: 1180px) { .svc { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr; } .services-lead { position: static; } }

/* process: a typographic timeline that scrolls sideways under a pin on wide screens */
.process { position: relative; }
.process-pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(44px, 8vh, 90px); padding: var(--gap-section) 0; overflow: hidden; }
.process-head { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 16px 48px; padding: 0 var(--pad); }
.process-sub { color: var(--fg-2); padding-bottom: .5rem; max-width: 40ch; }
.process-bar { grid-column: 1 / -1; height: 1px; background: var(--hair); position: relative; }
.process-bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.process-track { display: flex; gap: clamp(28px, 5vw, 80px); width: max-content; padding: 0 var(--pad); }
.step { width: clamp(280px, 30vw, 440px); padding-top: 26px; border-top: 1px solid var(--hair); }
.step h3 { font: 400 clamp(1.9rem, 3vw, 2.8rem)/1 var(--serif); letter-spacing: -.02em; }
.step .day { color: var(--accent); margin-right: .35em; font-variant-numeric: tabular-nums; }
.step p { margin-top: 18px; color: var(--fg-2); font-size: .98rem; max-width: 34ch; }
.step-after { border-top-color: var(--accent); }
.no-pin .process-pin, .no-js .process-pin, .reduce .process-pin { min-height: 0; }
.no-pin .process-track, .no-js .process-track, .reduce .process-track { width: auto; flex-direction: column; gap: 0; }
.no-pin .step, .no-js .step, .reduce .step { width: auto; padding: 26px 0 30px; }
.no-pin .process-bar, .no-js .process-bar, .reduce .process-bar { display: none; }
@media (max-width: 900px) {
  .process-head { grid-template-columns: 1fr; }
  .process-pin { min-height: 0; }
  .process-track { width: auto; flex-direction: column; gap: 0; }
  .step { width: auto; padding: 26px 0 30px; }
  .process-bar { display: none; }
}

/* included: a dense two-column spec index */
.included { padding: var(--gap-section) var(--pad); }
.inc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(40px, 6vw, 96px); margin-top: clamp(36px, 6vh, 64px); border-top: 1px solid var(--hair); }
.inc-list li { padding: 18px 0; border-bottom: 1px solid var(--hair); font-size: 1.02rem; display: flex; gap: 18px; align-items: baseline; }
.inc-list li::before { content: ""; flex: none; width: 18px; height: 1px; background: var(--accent); transform: translateY(-.35em); }
@media (max-width: 760px) { .inc-list { grid-template-columns: 1fr; } }

/* studio: copy beside a sand panel that carries the mark, drawn large, running off the right edge */
.studio { padding: 0 0 var(--gap-section); overflow: hidden; }
.studio-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 40px clamp(40px, 7vw, 110px); align-items: center; padding-left: var(--pad); }
.studio-copy { padding: var(--gap-section) 0; }
.studio-copy .h2 { max-width: 12ch; }
.studio-copy em { color: var(--accent); }
.studio-p { max-width: 46ch; margin-top: 30px; color: var(--fg-2); font-size: 1.1rem; }
.studio-lines { margin-top: 44px; border-top: 1px solid var(--hair); max-width: 46ch; }
.studio-lines li { padding: 16px 0; border-bottom: 1px solid var(--hair); font: 400 clamp(1.25rem, 1.8vw, 1.55rem)/1.25 var(--serif-text); letter-spacing: 0; }
.emblem { margin: 0; align-self: stretch; min-height: 520px; overflow: hidden; background: var(--sand); display: flex; align-items: center; justify-content: center; }
.emblem svg { width: 74%; height: auto; overflow: visible; }
.emblem circle { fill: none; stroke: var(--bronze); stroke-width: 1; vector-effect: non-scaling-stroke; }
.emblem path { fill: var(--champagne); fill-opacity: .55; stroke: none; }
@media (max-width: 900px) {
  .studio-grid { grid-template-columns: 1fr; padding-left: 0; }
  .studio-copy { padding: var(--gap-section) var(--pad) 0; }
  .emblem { min-height: 0; aspect-ratio: 4 / 3; margin: 56px 0 0 var(--pad); }
}

/* contact, on plaster */
.contact { padding: var(--gap-section) var(--pad) calc(var(--gap-section) * .8); }
.contact-in { display: grid; grid-template-columns: 1fr minmax(0, 560px); gap: 60px clamp(40px, 7vw, 120px); align-items: start; }
.contact-h { font: 400 clamp(2.6rem, 5.8vw, 5rem)/.97 var(--serif); letter-spacing: -.02em; max-width: 12ch; }
.contact-intro { max-width: 42ch; margin-top: 30px; color: var(--fg-2); font-size: 1.1rem; }
.contact-open { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-size: .9rem; letter-spacing: .02em; }
.contact-open::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.price-line { margin-top: 26px; font-size: .92rem; letter-spacing: .02em; color: var(--accent); }
.direct { margin-top: 30px; font-size: .95rem; color: var(--fg-2); }
.direct a { color: var(--fg); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.form { display: grid; gap: 8px; padding-top: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.field { position: relative; padding-top: 18px; }
.field input { width: 100%; min-height: 58px; padding: 18px 0 10px; border: 0; border-bottom: 1px solid var(--hair); background: none; color: var(--fg); font: 300 1.0625rem var(--sans); border-radius: 0; outline: none; transition: border-color var(--d-base); }
.field label { position: absolute; left: 0; top: 38px; color: var(--fg-2); font-size: 1rem; pointer-events: none; transform-origin: left top; transition: transform var(--d-slow) var(--e-out), color var(--d-base); }
.field input:focus, .field input:not(:placeholder-shown) { border-color: var(--fg); }
.field input:focus + label, .field input:not(:placeholder-shown) + label { transform: translateY(-24px) scale(.78); color: var(--accent); }
.field input:focus-visible { outline: none; box-shadow: 0 2px 0 0 var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn-submit { justify-self: start; margin-top: 30px; }
.form-status { min-height: 1.4em; margin-top: 14px; color: var(--accent); }
.form-note { font-size: .82rem; color: var(--fg-2); }
@media (max-width: 900px) { .contact-in { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* footer, quiet */
.ftr { padding: clamp(48px, 8vh, 80px) var(--pad) 28px; border-top: 1px solid var(--hair); }
.ftr-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.ftr-brand { display: inline-flex; align-items: center; gap: 12px; font: 400 1.4rem/1 var(--serif-text); }
.ftr-h { font: 400 .8rem var(--sans); letter-spacing: .06em; color: var(--fg-2); margin-bottom: 16px; }
.ftr li a { display: inline-flex; min-height: 36px; align-items: center; text-decoration: none; font-size: .95rem; transition: color var(--d-fast); }
.ftr li a:hover { color: var(--accent); }
.ftr-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: clamp(40px, 7vh, 64px); padding-top: 20px; border-top: 1px solid var(--hair); font-size: .82rem; color: var(--fg-2); }
@media (max-width: 700px) { .ftr-cols { grid-template-columns: 1fr; gap: 28px; } }

/* reduced motion: everything visible, nothing pinned, only colour transitions kept */
@media (prefers-reduced-motion: reduce) {
  .btn::before, .nav a::after, .link-arrow, .link-arrow::after, .menu-btn i, .field label { transition-duration: 1ms !important; }
  .emblem svg { transform: none; }
}

/* 404 page (404.html at the site root) */
.nf { min-height: 100svh; display: grid; place-items: center; padding: 120px var(--pad) 80px; text-align: left; }
.nf-in { max-width: 44ch; }
.nf h1 { font: 400 clamp(2.6rem, 6vw, 4.6rem)/.98 var(--serif); letter-spacing: -.02em; }
.nf h1 em { color: var(--bronze); }
.nf p { margin-top: 22px; color: var(--fg-2); font-size: 1.1rem; }
.nf p + p { margin-top: 10px; }
.nf-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 34px; }