@font-face{font-family:Plex;src:url(fonts/plex-sans-var.woff2) format('woff2-variations');font-weight:100 700;font-display:swap}
@font-face{font-family:PlexMono;src:url(fonts/plex-mono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:PlexMono;src:url(fonts/plex-mono-600.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --paper:#fcfcfa;--desk:#f2f2ee;--ink:#171e2b;--body:#3a4454;--biro:#24438c;
  --rule:#d3d7c9;--muted:#606b7b;--carbon:#f4e59b;--wa:#15803d;
  --space:clamp(22px,4.4vw,68px);--tab:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:clip}
body{margin:0;background:var(--desk);color:var(--ink);font:17px/1.62 Plex,Arial,sans-serif;overflow-x:clip}
h1,h2,h3,p,dl,dd,figure{margin:0}
h1,h2,h3{font-weight:600;line-height:1.08;letter-spacing:-.02em}
p{color:var(--body)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
ul,ol{margin:0;padding:0;list-style:none}
a:focus-visible,summary:focus-visible{outline:3px solid var(--biro);outline-offset:4px;border-radius:2px}
.wrap{width:100%;max-width:1220px;margin-inline:auto;padding-inline:var(--space)}
.eyebrow{font:600 12px/1 PlexMono,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--biro);margin-bottom:18px}
.skip{position:fixed;top:8px;left:8px;padding:12px;background:var(--ink);color:#fff;z-index:120;transform:translateY(-180%)}
.skip:focus{transform:none}

/* Reading progress, driven by the scroll handler. */
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:100;background:transparent;pointer-events:none}
.progress span{display:block;height:100%;width:100%;background:var(--biro);transform:scaleX(var(--read,0));transform-origin:0 50%}

.header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.brand{display:flex;align-items:center;gap:11px}
.brand b{display:block;font-size:19px;letter-spacing:-.02em}
.brand small{display:block;font:600 10px/1 PlexMono,monospace;letter-spacing:.12em;color:var(--muted);margin-top:4px}
.header nav{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:500}
.header nav a:not(.nav-cta):hover{color:var(--biro)}
.nav-cta{border:1px solid var(--ink);border-radius:3px;padding:10px 16px;background:var(--paper)}
.nav-cta:hover{background:var(--ink);color:var(--paper)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--paper);overflow:clip;border-bottom:1px solid var(--rule)}
/* Ruled paper that drifts a little as you scroll: the page feels like a job sheet. */
.hero::before{content:"";position:absolute;inset:-10% -5%;background:repeating-linear-gradient(0deg,transparent 0 33px,#e6e8dd 33px 34px);transform:translate3d(0,calc(var(--scrollY,0px)*.12),0);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 80% 20%,rgba(36,67,140,.08),transparent 70%);pointer-events:none}
.hero-inner{position:relative;display:grid;grid-template-columns:1.25fr .95fr;gap:56px;align-items:center;padding-block:clamp(52px,7vw,92px)}
.hero h1{font-size:clamp(44px,6.4vw,86px);line-height:1;letter-spacing:-.035em}
.hero h1 span{display:block}
.hero h1 .accent{color:var(--biro)}
.hero h1 .accent::after{content:"";display:block;width:clamp(120px,18vw,260px);height:4px;background:var(--biro);margin-top:14px;transform:scaleX(var(--underline,0));transform-origin:0 50%;transition:transform .9s cubic-bezier(.22,.61,.36,1) .35s}
.lead{max-width:30em;font-size:clamp(17px,1.35vw,19px);margin-top:26px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 22px;border-radius:3px;font-size:16px;font-weight:600;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.button:hover{transform:translateY(-2px)}
.button:active{transform:translateY(0)}
.whatsapp{background:var(--wa);border:1px solid var(--wa);color:#fff;box-shadow:0 3px 0 #0f5c2c}
.whatsapp:hover{box-shadow:0 5px 0 #0f5c2c}
.outline{background:var(--paper);border:1px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.outline:hover{box-shadow:0 5px 0 var(--ink)}
.personal{font-size:14px;color:var(--muted);margin-top:22px;max-width:24em}

/* The price ticket leans slightly with the scroll, like a card pinned to the board. */
.ticket{position:relative;background:var(--paper);border:1px solid var(--ink);border-top:5px solid var(--biro);border-radius:3px;box-shadow:10px 12px 0 rgba(23,30,43,.08);padding:26px 26px 0;transform:rotate(calc(var(--tilt,0)*-.55deg)) translateY(calc(var(--tilt,0)*-6px))}
.ticket-top{display:flex;justify-content:space-between;align-items:center}
.ticket-top .eyebrow{margin:0}
.ticket-row{display:grid;grid-template-columns:1fr auto;gap:2px 18px;padding:20px 0;border-top:1px solid var(--rule);margin-top:18px;align-items:center}
.ticket-row:first-of-type{margin-top:14px}
.ticket-row b{grid-column:1;grid-row:1;font-size:20px;letter-spacing:-.02em}
.ticket-row span{grid-column:1;grid-row:2;font-size:14px;color:var(--muted);max-width:22em}
.ticket-row i{grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:end;font:600 40px/1 Plex,sans-serif;font-style:normal;letter-spacing:-.04em;color:var(--biro)}
.ticket-foot{margin:6px -26px 0;padding:18px 26px;background:#f4f5f0;border-top:1px dashed #b3b9a7;font-size:14px}
.ticket-foot b{display:block;color:var(--biro)}
.ticket-foot span{color:var(--body)}
.scroll-cue{position:relative;display:flex;align-items:center;gap:10px;justify-content:center;padding-bottom:26px;margin:0;font:600 11px/1 PlexMono,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.scroll-cue span{display:block;width:1px;height:34px;background:linear-gradient(var(--biro),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:translateY(-6px)}50%{opacity:1;transform:translateY(0)}}

/* ---------- moving belt of trades ---------- */
.belt{background:var(--ink);color:var(--paper);overflow:clip;padding-block:15px}
.belt-track{display:flex;gap:44px;width:max-content;font:600 13px/1 PlexMono,monospace;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transform:translate3d(calc(var(--belt,0px)*-1),0,0)}
.belt-track span{opacity:.72}

/* ---------- sections ---------- */
.section{padding-block:clamp(64px,8vw,116px);border-top:1px solid var(--rule)}
.section:nth-of-type(even){background:var(--paper)}
h2{font-size:clamp(30px,3.9vw,52px)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;margin-bottom:44px}
.section-head p{max-width:22em;font-size:16px}

/* Big statement lines that arrive one at a time. */
.big-lines{font-size:clamp(28px,4.6vw,60px);line-height:1.12;max-width:16em}
.big-lines .line{display:block;opacity:.12;transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1);transform:translateY(12px)}
.big-lines .line.lit{opacity:1;transform:none}
.big-lines .dim.lit{color:var(--biro)}
.pitch-foot{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px;max-width:56em}
.pitch-foot p{font-size:17px}

/* ---------- work ---------- */
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.project{display:block;min-width:0}
.shot{border:1px solid var(--rule);border-radius:4px;overflow:clip;background:#fff}
.shot img{aspect-ratio:1.56;object-fit:cover;object-position:top;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.project:hover .shot img{transform:scale(1.04)}
.project-info{padding-top:18px}
.tag{display:inline-block;font:600 11px/1 PlexMono,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:2px;padding:6px 8px}
.tag.live{color:var(--wa);border-color:#bcd9c6;background:#f1f8f3}
.project h3{font-size:23px;margin-top:14px}
.project .type{font-size:13px;color:var(--muted);margin:6px 0 10px}
.project p{font-size:15px}

/* ---------- story and figures ---------- */
.story-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.story-copy p{margin-top:18px;max-width:34em}
.text-link{display:inline-block;margin-top:24px;color:var(--biro);text-decoration:underline;text-underline-offset:5px;font-size:15px}
.figures{display:grid;gap:18px}
.figures div{background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--biro);border-radius:3px;padding:22px 24px}
.figures dt{font:600 11px/1.4 PlexMono,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.figures dd{margin:8px 0 0;font-size:clamp(34px,4vw,46px);font-weight:600;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- the offer ---------- */
.offer-inner{display:grid;gap:44px}
.offer-head{max-width:44em}
.offer-head h2{margin-top:6px}
.offer-head>p{margin-top:18px;max-width:34em}
.care-note{border-left:3px solid var(--carbon);padding-left:18px;font-size:15px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.plan{position:relative;background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:30px}
.plan.feature{border:1px solid var(--ink);box-shadow:10px 12px 0 rgba(23,30,43,.08)}
.flag{position:absolute;top:-13px;left:26px;background:var(--carbon);color:#2e2910;font:600 11px/1 PlexMono,monospace;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:2px}
.plan h3{font-size:24px}
.price{display:flex;align-items:baseline;font-size:clamp(50px,6vw,72px);font-weight:600;letter-spacing:-.05em;color:var(--biro);margin-top:6px;line-height:1}
.price span{font-size:.45em;margin-right:4px}
.paid{font-size:14px;color:var(--muted);margin-top:10px}
.ticks{margin-top:22px;border-top:1px solid var(--rule);padding-top:18px;display:grid;gap:11px;font-size:15.5px}
.ticks li{display:grid;grid-template-columns:22px 1fr;align-items:start;gap:4px;color:var(--body)}
.ticks li::before{content:"";width:13px;height:8px;margin-top:7px;border-left:2.5px solid var(--biro);border-bottom:2.5px solid var(--biro);transform:rotate(-45deg)}
.plan-foot{margin-top:20px;padding-top:16px;border-top:1px dashed var(--rule);font-size:14px;color:var(--muted)}
.honest{max-width:40em;font-size:15px;color:var(--muted);border-top:1px solid var(--rule);padding-top:22px}

/* ---------- steps ---------- */
.how h2{margin-bottom:40px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.step{display:grid;grid-template-columns:auto 1fr;gap:18px;border-top:2px solid var(--rule);padding-top:20px}
.step .num{font:600 26px/1 PlexMono,monospace;color:var(--biro);letter-spacing:-.02em}
.step h3{font-size:21px}
.step p{font-size:15.5px;margin-top:10px}

/* ---------- questions ---------- */
.q-layout{display:grid;grid-template-columns:.8fr 1.4fr;gap:60px;align-items:start}
.q-aside{margin-top:18px;font-size:16px}
.q-aside a{color:var(--biro);text-decoration:underline;text-underline-offset:4px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:22px;font-size:17.5px;font-weight:500;padding-block:22px;min-height:70px}
.faq summary::-webkit-details-marker{display:none}
.faq p{padding-bottom:22px;padding-right:26px;font-size:16px;max-width:52em}
.plus{position:relative;flex:none;width:16px;height:16px}
.plus::before,.plus::after{content:"";position:absolute;background:var(--biro);inset:50% 0 auto;height:2px;transform:translateY(-50%)}
.plus::after{inset:0 50% auto;width:2px;height:100%;transform:translateX(-50%);transition:opacity .2s ease}
details[open] .plus::after{opacity:0}

/* ---------- contact ---------- */
.contact{background:var(--ink);color:var(--paper);padding-block:clamp(60px,7vw,100px)}
.contact .eyebrow{color:#a4bae9}
.contact-inner{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:center}
.contact h2{font-size:clamp(38px,5.2vw,68px);line-height:1.02}
.contact p{color:#dfe4ee;font-size:18px;max-width:34em}
.contact .actions{margin-top:26px}
.contact .outline{background:transparent;color:var(--paper);border-color:#7d8899;box-shadow:0 3px 0 #58637a}
.email{display:inline-block;margin-top:22px;color:#cfdbf4;text-decoration:underline;text-underline-offset:5px;font-size:16px}

.footer{background:var(--desk);padding-block:34px 40px}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:26px;align-items:flex-start}
.footer b{font-size:19px}
.footer p{font-size:13px;color:var(--muted);margin-top:8px}
.footer a{font-size:15px;text-decoration:underline;text-underline-offset:4px}
.back-top{align-self:flex-start}
.mobile-bar{display:none}

/* Sections arrive as you reach them. Static without JavaScript. */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.rise{opacity:0;transform:translateY(20px);animation:rise .8s cubic-bezier(.22,.61,.36,1) forwards}
.rise:nth-child(2){animation-delay:.06s}
.rise:nth-child(3){animation-delay:.12s}
.rise:nth-child(4){animation-delay:.18s}
.rise:nth-child(5){animation-delay:.24s}
h1 .rise:nth-child(1){animation-delay:.05s}
h1 .rise:nth-child(2){animation-delay:.14s}
h1 .rise:nth-child(3){animation-delay:.23s}
@keyframes rise{to{opacity:1;transform:none}}

@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:38px}
  .ticket{transform:none;max-width:560px}
  .projects,.steps{grid-template-columns:1fr}
  .story-inner,.q-layout,.contact-inner,.plans,.pitch-foot{grid-template-columns:1fr;gap:30px}
  .section-head{display:block}
  .section-head p{margin-top:16px;max-width:none}
  .project{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center}
  .project-info{padding-top:0}
  .header nav a:not(.nav-cta){display:none}
  .footer{padding-bottom:calc(var(--tab) + 30px)}
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;inset:auto 0 0;z-index:70;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--rule);padding:10px var(--space) calc(10px + env(safe-area-inset-bottom))}
  .mobile-bar a{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:3px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:600}
  .mobile-bar .wa{background:var(--wa)}
}
@media(max-width:560px){
  .project{display:block}
  .project-info{padding-top:14px}
  .ticket-row i{font-size:34px}
  .plan{padding:24px 20px}
  .figures dd{font-size:36px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.rise{opacity:1;transform:none}
  .big-lines .line{opacity:1;transform:none}
  .hero h1 .accent::after{transform:none}
  .ticket{transform:none}
  .belt-track{transform:none}
}