@font-face{font-family:Alro;src:url(../fonts/alro.woff2) format("woff2");font-weight:700;font-display:block}
@font-face{font-family:Mont;src:url(../fonts/mont-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Mont;src:url(../fonts/mont-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Mont;src:url(../fonts/mont-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Mont;src:url(../fonts/mont-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Mont;src:url(../fonts/mont-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#f2f2f1;--card:#fff;--ink:#252323;--ink-2:#5f5d5d;--mute:#9b9999;--line:rgba(37,35,35,.16);
  --teal:#88d3da;--r:clamp(10px,1vw,18px);
  --gut:clamp(20px,4vw,72px);--max:1440px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#f2f2f1;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:transparent;color:var(--ink);font-family:Mont,system-ui,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--teal);color:var(--ink)}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* paper background (texture from the PDF) — fixed layer, painted once */
.paper{position:fixed;inset:0;z-index:-1;background:#f2f2f1 url(../img/bg.webp) center/cover no-repeat;pointer-events:none}

/* ---------- rulers (desktop) ---------- */
:root{--rw:0px}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){:root{--rw:20px}}
body{padding-left:var(--rw)}
.ruler{position:fixed;z-index:60;pointer-events:none;background:rgba(242,242,241,.94);color:#8d8b8b;display:none}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){.ruler,.ruler__c{display:block}}
.ruler--x{top:0;left:20px;right:0;height:20px;border-bottom:1px solid var(--line)}
.ruler--y{top:20px;left:0;bottom:0;width:20px;border-right:1px solid var(--line)}
.ruler__c{position:fixed;top:0;left:0;width:20px;height:20px;z-index:61;background:#f2f2f1;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:none}
.ruler canvas{position:absolute;inset:0;width:100%;height:100%}
.ruler__m{position:absolute;background:#2f8cff;will-change:transform}
.ruler--x .ruler__m{top:0;left:0;bottom:0;width:1px}
.ruler--y .ruler__m{left:0;top:0;right:0;height:1px}
.ruler__tag{position:absolute;top:3px;left:0;background:#2f8cff;color:#fff;font-size:9px;font-weight:600;padding:1px 4px;border-radius:2px;will-change:transform;font-variant-numeric:tabular-nums}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--ink);color:#f2f2f1;display:grid;place-items:center;will-change:transform}
.loader__box{position:relative;padding:clamp(16px,2.6vw,36px) clamp(26px,4.4vw,64px)}
.loader__word{display:flex;font-family:Alro;font-size:clamp(64px,13vw,210px);line-height:.8;overflow:hidden;padding-bottom:.06em}
.loader__word span{display:block}
.loader svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.loader rect{fill:none;stroke:var(--teal);stroke-width:1.5;vector-effect:non-scaling-stroke}
.loader .h{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--ink);border:1.5px solid var(--teal);transform:scale(0)}
.loader__tag{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%);background:var(--teal);color:var(--ink);font-size:11px;font-weight:700;padding:3px 8px;border-radius:3px;white-space:nowrap;opacity:0;font-variant-numeric:tabular-nums}
.loader__meta{position:absolute;left:var(--gut);right:var(--gut);bottom:var(--gut);display:flex;justify-content:space-between;align-items:flex-end;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#a9a7a7}
.loader__count{font-family:Alro;font-size:clamp(36px,5vw,72px);letter-spacing:0;color:#f2f2f1;line-height:1;font-variant-numeric:tabular-nums}
body.is-loading{overflow:hidden}

/* hero selection box (designer placing each glyph) */
.selbox{position:absolute;left:0;top:0;width:10px;height:10px;pointer-events:none;opacity:0;z-index:3}
.selbox::before{content:"";position:absolute;inset:0;border:1.5px solid #2f8cff}
.selbox i{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:#fff;border:1.5px solid #2f8cff}
.selbox i:nth-child(1){left:0;top:0}.selbox i:nth-child(2){left:100%;top:0}.selbox i:nth-child(3){left:0;top:100%}.selbox i:nth-child(4){left:100%;top:100%}
.selbox i:nth-child(5){left:50%;top:0}.selbox i:nth-child(6){left:100%;top:50%}.selbox i:nth-child(7){left:50%;top:100%}.selbox i:nth-child(8){left:0;top:50%}
.selbox i:nth-child(n+5){opacity:0}
.selbox em:empty{display:none}
.selbox em{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);background:#2f8cff;color:#fff;font-style:normal;font-size:11px;font-weight:600;padding:2px 7px;border-radius:3px;white-space:nowrap;opacity:0;font-variant-numeric:tabular-nums}
.selbox svg{position:absolute;left:100%;top:100%;width:18px;height:18px;margin:4px 0 0 4px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}

/* hover selection on logos */
.sel{position:absolute;inset:-14px -18px;pointer-events:none;opacity:0;transition:opacity .35s var(--ease)}
.sel::before{content:"";position:absolute;inset:0;border:1.5px solid #2f8cff}
.sel b{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff;border:1.5px solid #2f8cff}
.sel b:nth-child(1){left:0;top:0}.sel b:nth-child(2){left:100%;top:0}.sel b:nth-child(3){left:0;top:100%}.sel b:nth-child(4){left:100%;top:100%}
.sel em{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);background:#2f8cff;color:#fff;font-style:normal;font-size:10px;font-weight:600;padding:2px 6px;border-radius:3px;white-space:nowrap}
.logos__cell:hover .sel{opacity:1}

/* ---------- header ---------- */
.nav{position:fixed;top:var(--rw);left:var(--rw);right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:20px var(--gut);transition:transform .6s var(--ease),background .4s}
.nav.is-hidden{transform:translateY(-110%)}
.nav.is-solid{background:rgba(247,247,246,.9)}
.nav__brand{font-family:Alro;font-size:24px;display:flex;align-items:center;gap:8px}
.nav__brand i{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.nav__links{display:flex;gap:clamp(16px,2.4vw,36px);font-size:13px;font-weight:600;letter-spacing:.02em}
.nav__links a{position:relative;padding:4px 0}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav__links a:hover::after,.nav__links a.on::after{transform:scaleX(1);transform-origin:left}
.nav__idx{font-size:12px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
@media (max-width:760px){.nav__links a:not(.keep){display:none}}

/* ---------- reveal primitives ---------- */
.mask{display:block;overflow:hidden}
.mask>span{display:block;will-change:transform}
[data-fade]{will-change:transform,opacity}

/* ---------- selection frame ---------- */
.frame{position:absolute;inset:0;pointer-events:none}
.frame svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.frame rect{fill:none;stroke:rgba(37,35,35,.28);stroke-width:1;vector-effect:non-scaling-stroke}
.frame .h{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--paper);border:1px solid rgba(37,35,35,.4);transform:scale(0)}

/* chapter badge (from the PDF) */
.chap{display:flex;justify-content:center;position:relative;z-index:2}
.chap__badge{display:flex;align-items:center;background:var(--card);border-radius:16px;padding:12px 24px 12px 14px;box-shadow:0 18px 40px -26px rgba(0,0,0,.28)}
.chap__num{font-family:Alro;font-size:clamp(64px,7vw,120px);line-height:.72;color:#ececeb;letter-spacing:-.04em;margin-right:-.22em}
.chap__title{display:flex;flex-direction:column;align-items:flex-end;position:relative}
.chap__title strong{font-weight:700;font-size:clamp(26px,2.8vw,46px);line-height:1;letter-spacing:-.01em}
.chap__title em{font-style:normal;font-family:Alro;color:var(--teal);font-size:clamp(18px,1.9vw,30px);line-height:.9}

.chapter{position:relative;padding-top:clamp(120px,14vw,220px)}
.board{position:relative;margin-top:calc(-1 * clamp(38px,3.6vw,62px));padding:clamp(70px,7vw,110px) clamp(16px,4vw,70px) clamp(40px,5vw,80px)}
.lead{max-width:640px;margin:clamp(28px,3vw,44px) auto 0;text-align:center;color:var(--ink-2);font-size:clamp(15px,1.15vw,18px);line-height:1.6}

/* ---------- HERO ---------- */
.hero{position:relative;height:200vh}
.hero__sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.hero__bg svg{width:120vw;height:auto;overflow:visible}
.hero__bg text{font-family:Alro;font-size:640px;fill:none;stroke:rgba(37,35,35,.2);stroke-width:1;vector-effect:non-scaling-stroke}
.hero__name{position:absolute;top:clamp(90px,14vh,140px);left:0;right:0;text-align:center;color:var(--ink-2)}
.hero__name b{display:block;font-weight:600;font-size:clamp(15px,1.4vw,24px)}
.hero__name span{display:block;font-weight:300;font-size:clamp(13px,1.3vw,22px)}
.hero__wm{position:relative;width:min(64vw,1240px);will-change:transform;font-weight:inherit}
.hero__wm>svg{display:block;width:100%;height:auto;overflow:visible}
.hero__wm .g{will-change:transform}
.hero__loc{position:absolute;bottom:clamp(50px,9vh,100px);left:0;right:0;text-align:center;font-weight:500;color:var(--ink-2);font-size:clamp(14px,1.3vw,22px)}
.hero__hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:1px;height:40px;background:var(--line);overflow:hidden}
.hero__hint::after{content:"";position:absolute;left:0;top:-50%;width:100%;height:50%;background:var(--ink);animation:drip 2s var(--ease) infinite}
@keyframes drip{to{top:100%}}
@media (max-width:760px){.hero__wm{width:86vw}.hero__bg svg{width:190vw}.hero{height:170vh}}

/* ---------- ABOUT ---------- */
.about{padding-top:clamp(40px,6vw,100px)}
.about__grid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.4vw,24px);align-items:stretch}
.about__photo{grid-column:1/5;grid-row:1/3;align-self:end}
.about__photo img{width:100%}
.about__intro{grid-column:5/13;grid-row:1;align-self:end;padding:0 0 clamp(10px,1.5vw,24px) clamp(0px,1.5vw,24px)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.about__hi{margin-top:14px;font-size:clamp(34px,4.2vw,72px);line-height:1.02;font-weight:500;letter-spacing:-.02em}
.about__hi b{display:block;font-family:Alro;font-weight:700;letter-spacing:-.01em}
.about__p{margin-top:clamp(16px,1.8vw,28px);color:var(--ink-2);font-size:clamp(15px,1.15vw,18px);line-height:1.65;max-width:56ch}
.about__card{border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:0 24px 50px -36px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center}
.about__card img{width:100%}
.c-exp{grid-column:5/9;grid-row:2}
.c-int{grid-column:9/13;grid-row:2}
.c-contact{grid-column:1/5;grid-row:3}
.c-skills{grid-column:5/13;grid-row:3}
@media (max-width:1000px){
  .about__photo{grid-column:1/7;grid-row:1}
  .about__intro{grid-column:7/13;grid-row:1;padding-left:0}
  .c-exp{grid-column:1/7;grid-row:2}.c-int{grid-column:7/13;grid-row:2}
  .c-contact{grid-column:1/7;grid-row:3}.c-skills{grid-column:1/13;grid-row:4}
}
@media (max-width:640px){
  .about__photo,.about__intro,.c-exp,.c-int,.c-contact,.c-skills{grid-column:1/13;grid-row:auto}
  .about__photo{max-width:420px}
}

/* ---------- TOC ---------- */
.toc{padding-top:clamp(140px,16vw,240px)}
.toc__inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(30px,5vw,90px);align-items:center;padding:clamp(50px,6vw,90px) clamp(20px,4vw,70px)}
.toc__title{font-family:Alro;font-size:clamp(60px,8vw,150px);line-height:.84;letter-spacing:-.02em}
.toc__title em{font-style:normal;color:#8f8d8d}
.toc__list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.4vw,22px)}
.toc__item{position:relative;display:flex;align-items:center;justify-content:flex-end;min-height:clamp(80px,7vw,118px);padding-right:clamp(16px,1.6vw,26px);isolation:isolate}
.toc__item:last-child{grid-column:1/3;justify-self:center;width:calc(50% - 11px)}
.toc__item .num{position:absolute;left:0;top:50%;transform:translateY(-50%);font-family:Alro;font-size:clamp(84px,8vw,150px);line-height:.7;color:rgba(37,35,35,.13);z-index:1;letter-spacing:-.04em;transition:color .6s var(--ease)}
.toc__item .bg{position:absolute;inset:10% 0 10% 32%;background:var(--card);border-radius:14px;z-index:-1;box-shadow:0 18px 40px -30px rgba(0,0,0,.3);transition:transform .6s var(--ease)}
.toc__item .t{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-end}
.toc__title .tw{display:block;white-space:nowrap}
.toc__title .ch{display:inline-block}
.toc__item strong{font-weight:700;font-size:clamp(19px,1.8vw,32px);line-height:1}
.toc__item .t em{font-style:normal;font-family:Alro;color:var(--teal);font-size:clamp(15px,1.4vw,24px);line-height:.9}
.toc__item:hover .num{color:var(--teal)}
.toc__item:hover .bg{transform:scale(1.04)}
@media (max-width:900px){.toc__inner{grid-template-columns:1fr}.toc__list{grid-template-columns:1fr}.toc__item:last-child{grid-column:auto;width:100%}}

/* ---------- LOGOS ---------- */
.logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(150px,13vw,230px);position:relative}
.logos__lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.logos__lines line{stroke:rgba(37,35,35,.3);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.logos__cell{position:relative;min-width:0}
.logos__cell{display:grid;place-items:center}
.logos__art{position:relative;width:var(--w,40%);transition:transform .8s var(--ease)}
@media (max-width:760px){.logos__art{width:calc(var(--w,40%) * 1.55)}}
.logos__art img{display:block;width:100%;height:auto}
.logos__cell:hover .logos__art{transform:scale(1.05)}
.logos__cell[data-k="skin"]{--w:35.6%}
.logos__cell[data-k="jrm"]{--w:45.9%}
.logos__cell[data-k="mm"]{--w:49.4%}
.logos__cell[data-k="dccutz"]{--w:31.0%}
.logos__cell[data-k="sanpatricio"]{--w:48.3%}
.logos__cell[data-k="piedra"]{--w:31.2%}
.logos__cell[data-k="pampered"]{--w:43.5%}
.logos__cell[data-k="upspaces"]{--w:42.5%}
.logos__cell[data-k="sky"]{--w:42.4%}
.logos__cell figcaption{display:none;position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--mute);opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.logos__cell:hover figcaption{opacity:1;transform:none}
@media (max-width:760px){.logos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:clamp(120px,32vw,180px)}.logos__lines{display:none}.logos__cell{border-bottom:1px dashed var(--line)}}

/* ---------- BRANDING (horizontal) ---------- */
.branding{position:relative;padding-top:clamp(120px,14vw,220px)}
.hs{position:relative;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:70px}
.hs__track{display:flex;gap:clamp(48px,6vw,110px);padding:0 calc(50vw - min(40vw,(100vh - 250px) / 1.42) / 2) 0 var(--gut);will-change:transform;align-items:flex-start}
.proj{flex:none;width:min(40vw,calc((100vh - 250px) / 1.42))}
.proj__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(8px,.8vw,14px)}
.proj__grid .head{grid-column:1/3}
.proj__stack{display:grid;gap:clamp(8px,.8vw,14px);grid-template-rows:repeat(3,minmax(0,1fr))}
.tile{border-radius:var(--r);overflow:hidden;background:#e9e9e8;box-shadow:0 24px 50px -36px rgba(0,0,0,.35)}
.tile img{width:100%;height:100%;object-fit:cover}
.proj__meta{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:20px}
.proj__meta h3{font-weight:700;font-size:clamp(18px,1.5vw,24px)}
.proj__meta p{color:var(--ink-2);font-size:14px;margin-top:4px}
.proj__meta span{font-family:Alro;font-size:22px;color:var(--mute)}
.hs__bar{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(24px,5vh,48px);height:1px;background:var(--line)}
.hs__bar i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0)}
@media (max-width:900px){
  .hs{height:auto;overflow:visible;padding:60px 0 0}
  .hs__track{flex-direction:column;padding:0 var(--gut);gap:72px}
  .proj{width:100%}.proj__stack .tile img{aspect-ratio:499/267}.hs__bar{display:none}
}

/* ---------- SOCIAL ---------- */
.social__wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,90px);margin-top:clamp(60px,7vw,110px);align-items:start}
.social__phone{position:sticky;top:12vh}
.social__phone img{width:100%}
.social__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.4vw,24px)}
.social__grid .post:nth-child(even){position:relative;top:clamp(40px,6vw,110px)}
.post{border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -40px rgba(0,0,0,.45)}
.post img{width:100%;aspect-ratio:493/657;object-fit:cover}
.social__cap{grid-column:1/3;margin-top:clamp(60px,8vw,140px)}
@media (max-width:900px){.social__wrap{grid-template-columns:1fr}.social__phone{position:relative;top:auto;max-width:440px;margin:0 auto}}

/* ---------- WEB (laptop showcase) ---------- */
.wshow{position:relative;height:620vh;margin-top:clamp(20px,3vw,40px)}
.wshow__sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.wshow__inner{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,8.8fr);gap:clamp(24px,4vw,70px);align-items:center;width:100%}
.wshow__count{font-family:Alro;font-size:clamp(40px,4vw,68px);line-height:1;color:var(--mute)}
.wshow__count span{color:var(--ink)}
.wshow__list{list-style:none;margin-top:clamp(20px,2.4vw,36px);display:grid;gap:4px}
.wshow__list li{padding:10px 0 10px 16px;border-left:2px solid var(--line);color:var(--mute);transition:color .5s var(--ease),border-color .5s var(--ease)}
.wshow__list li b{display:block;font-size:clamp(14px,1.1vw,17px);font-weight:600}
.wshow__list li span{display:block;font-size:12px;margin-top:2px;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .5s var(--ease)}
.wshow__list li.on{color:var(--ink);border-color:var(--ink)}
.wshow__list li.on span{max-height:20px;opacity:1;color:var(--ink-2)}
.wshow__bar{margin-top:clamp(20px,2.4vw,36px);height:2px;background:var(--line);position:relative}
.wshow__bar i{position:absolute;inset:0;background:var(--teal);transform-origin:left;transform:scaleX(0)}
.wshow__device{position:relative;container-type:inline-size;will-change:transform}
.wshow__device>img{width:100%;position:relative;z-index:1}
.wshow__screen{position:absolute;left:12.38%;top:8.85%;width:72.5%;height:61.73%;overflow:hidden;z-index:2;background:#fff}
.wsite{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0;will-change:transform,opacity}
.wsite:first-child{opacity:1}
.wshow__url{position:absolute;z-index:3;left:39.5%;top:6.1%;width:18.5%;height:1.9%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:.72cqw;font-weight:500;color:#555;white-space:nowrap;overflow:hidden}
@media (max-width:900px){
  .wshow{height:520vh}
  .wshow__inner{grid-template-columns:1fr;gap:18px}
  .wshow__list{display:none}.wshow__count{font-size:34px}
  .wshow__info{order:2}
}

/* ---------- PRESENTATION ---------- */
.pres__rows{margin-top:clamp(60px,7vw,110px);display:flex;flex-direction:column;gap:clamp(12px,1.3vw,22px);overflow:hidden}
.pres__row{display:flex;gap:clamp(12px,1.3vw,22px);will-change:transform;width:max-content}
.slide{flex:none;width:clamp(220px,22vw,400px);border-radius:10px;overflow:hidden;box-shadow:0 20px 40px -30px rgba(0,0,0,.45)}
.slide img{width:100%;aspect-ratio:390/217;object-fit:cover}
.pres__brochure{max-width:980px;margin:clamp(70px,8vw,130px) auto 0}
.pres__brochure img{width:100%;-webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,#000 72%,transparent 100%)}

/* ---------- OUTRO ---------- */
.outro{position:relative;height:100vh;height:100svh;min-height:620px;display:grid;place-items:center;overflow:hidden;margin-top:clamp(100px,12vw,200px)}
.outro__bg{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;pointer-events:none}
.outro__row{display:flex;white-space:nowrap;font-family:Alro;font-size:clamp(120px,21vw,400px);line-height:.95;color:transparent;-webkit-text-stroke:1px rgba(37,35,35,.1);width:max-content}
.outro__row span{padding-right:.35em}
.outro__row.a{animation:mq 60s linear infinite}
.outro__row.b{animation:mq 70s linear infinite reverse}
@keyframes mq{to{transform:translateX(-33.333%)}}
.outro__wm{position:relative;width:min(74vw,1320px)}
.outro__wm>svg{display:block;width:100%;height:auto;overflow:visible}
.outro__cta{position:absolute;bottom:clamp(96px,15vh,160px);left:0;right:0;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:0 var(--gut)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:60px;background:var(--ink);color:#fff;font-weight:600;font-size:15px;transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.btn:hover{background:var(--teal);color:var(--ink);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--teal)}
.btn svg{width:16px;height:16px}
.outro__foot{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:var(--ink-2);font-size:clamp(12px,1vw,16px);font-weight:500;padding:0 var(--gut)}
@media (max-width:760px){.outro__wm{width:88vw}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.hero,.web__stage{height:auto}.hero__sticky,.web__sticky{position:relative}}