@font-face{font-family:LemonMilk;src:url('assets/LEMONMILK-Bold.otf') format('opentype');font-display:swap;font-weight:700}
@font-face{font-family:Technique;src:url('assets/Technique-BRK-Pro.woff2') format('woff2');font-display:swap}
:root{--black:#171717;--ink:#080808;--white:#fff;--cyan:#49efff;--blue:#0050f0;--red:#ed0000;--gray:#c9c9c9}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.55}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.site-header{min-height:92px;padding:14px clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #3c3c3c;background:rgba(23,23,23,.97)}
.nc-home{display:flex;align-items:flex-start;width:58px;height:62px;position:relative}
.nc-home img{width:100%;height:100%;object-fit:contain}
sup{font-family:Arial,sans-serif;font-size:.65rem;line-height:1}
.nc-home sup{position:absolute;right:-2%;bottom:5%;color:var(--white);font-size:.72rem;text-shadow:0 1px 2px #000}
.walo-link{display:flex;align-items:center;gap:12px;color:var(--white);font-family:LemonMilk,Arial,sans-serif;font-size:.68rem;letter-spacing:.13em}
.walo-link img{width:112px;height:auto}
.hero{min-height:720px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);overflow:hidden;border-bottom:8px solid var(--cyan)}
.hero-copy{padding:clamp(64px,8vw,120px) clamp(24px,6vw,92px);display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
.hero-copy:before{content:"";position:absolute;width:260px;height:260px;border:1px solid #373737;border-radius:50%;left:-160px;top:100px}
.eyebrow{margin:0 0 28px;color:var(--cyan);font-family:LemonMilk,Arial,sans-serif;font-size:.78rem;letter-spacing:.16em}
.eyebrow.dark{color:var(--ink)}
.hero-logo{width:min(100%,570px);position:relative;margin-left:-3%}
.hero-logo img{width:100%}
.hero-logo sup{position:absolute;right:13%;bottom:5%;font-size:1.05rem;color:var(--white);text-shadow:0 2px 3px #000}
.intro{max-width:660px;margin:28px 0 34px;color:#e1e1e1;font-size:clamp(1.15rem,2vw,1.48rem);line-height:1.5}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:15px 24px;border:2px solid currentColor;font-family:LemonMilk,Arial,sans-serif;font-size:.78rem;letter-spacing:.06em;transition:transform .18s ease,background .18s ease,color .18s ease}
.button:hover{transform:translateY(-2px)}
.button.primary{background:var(--cyan);border-color:var(--cyan);color:var(--ink);gap:12px}
.button.secondary{color:var(--white)}
.hero-portrait{position:relative;min-height:650px;background:linear-gradient(145deg,var(--blue) 0 58%,var(--cyan) 58% 100%)}
.hero-portrait:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,23,23,.18),transparent 35%)}
.hero-portrait img{position:absolute;z-index:1;right:-4%;bottom:0;width:115%;height:92%;object-fit:contain;object-position:right bottom;filter:drop-shadow(0 24px 35px rgba(0,0,0,.28))}
.stamp{position:absolute;z-index:2;top:7%;left:7%;margin:0;font-family:LemonMilk,Arial,sans-serif;font-size:clamp(1rem,2vw,1.55rem);line-height:1.15;letter-spacing:.08em}
.stamp b{color:var(--cyan)}
.context{background:var(--white);color:var(--ink);padding:clamp(70px,9vw,130px) clamp(24px,6vw,92px);display:grid;grid-template-columns:70px minmax(330px,1fr) minmax(300px,.8fr);gap:clamp(24px,5vw,80px);align-items:start}
.section-number{font-family:LemonMilk,Arial,sans-serif;border-top:5px solid var(--red);padding-top:9px;color:var(--red)}
h1,h2,h3{font-family:LemonMilk,Arial,sans-serif;margin:0;line-height:.98}
.context h1{font-size:clamp(2.6rem,6vw,6.7rem);letter-spacing:-.035em}
h1 i,h2 i{font-style:normal;color:var(--blue)}
.context-body{padding-top:48px;font-size:clamp(1.05rem,1.5vw,1.28rem)}
.context-body p{margin:0 0 18px}
.context-body strong{font-family:LemonMilk,Arial,sans-serif;font-size:.95em;line-height:1.45}
.context-body .chancleta-line{color:var(--blue);font-family:LemonMilk,Arial,sans-serif;font-size:.88em;letter-spacing:.02em}
.context-body a{display:inline-block;margin-top:20px;border-bottom:3px solid var(--blue);font-family:LemonMilk,Arial,sans-serif;font-size:.76rem;padding-bottom:5px;color:var(--blue)}
.choose{padding:clamp(76px,9vw,130px) clamp(24px,6vw,92px);background:var(--black)}
.choose-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:56px}
.choose h2{font-size:clamp(3rem,6.5vw,7rem);letter-spacing:-.035em}
.choose h2 i{color:var(--cyan)}
.channels{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #4a4a4a;border-bottom:1px solid #4a4a4a}
.channels a{padding:38px 30px 42px;border-right:1px solid #4a4a4a;min-height:300px;display:flex;flex-direction:column;transition:background .2s ease,color .2s ease}
.channels a:last-child{border-right:0}
.channels a:hover{background:var(--cyan);color:var(--ink)}
.channels span{font-family:LemonMilk,Arial,sans-serif;font-size:.7rem;color:var(--cyan);letter-spacing:.1em}
.channels a:hover span{color:var(--blue)}
.channels h3{font-size:clamp(1.35rem,2.4vw,2.4rem);margin:34px 0 18px}
.channels p{color:#cfcfcf;max-width:330px;margin:0 0 30px}
.channels a:hover p{color:#222}
.channels b{margin-top:auto;font-family:LemonMilk,Arial,sans-serif;font-size:.72rem;letter-spacing:.05em}
.handoff{position:relative;overflow:hidden;background:var(--cyan);color:var(--ink);padding:clamp(65px,8vw,110px) clamp(24px,6vw,92px);display:grid;grid-template-columns:minmax(100px,.35fr) minmax(420px,1fr) auto;gap:clamp(28px,5vw,75px);align-items:center}
.handoff:after{content:"";position:absolute;right:-150px;bottom:-180px;width:450px;height:450px;border:1px solid rgba(0,0,0,.18);border-radius:50%}
.chancleta{height:300px;margin:auto;transform:rotate(-16deg);filter:drop-shadow(0 20px 16px rgba(0,0,0,.22))}
.handoff h2{font-size:clamp(2.6rem,5.3vw,6rem);letter-spacing:-.04em}
.handoff h2 i{color:var(--blue)}
.handoff div>p:last-child{max-width:680px;font-size:1.1rem}
.button.blue{background:var(--blue);border-color:var(--blue);color:var(--white);position:relative;z-index:1;white-space:nowrap}
footer{min-height:130px;padding:28px clamp(20px,5vw,72px);display:grid;grid-template-columns:150px 1fr auto auto;gap:28px;align-items:center;border-top:8px solid var(--red);font-family:LemonMilk,Arial,sans-serif;font-size:.64rem;letter-spacing:.1em}
.footer-brand{width:67px;height:72px;position:relative}
.footer-brand img{width:100%;height:100%;object-fit:contain}
.footer-brand sup{position:absolute;right:-2%;bottom:5%;color:var(--white);font-size:.72rem;text-shadow:0 1px 2px #000}
footer nav{display:flex;gap:18px}
footer a:hover{color:var(--cyan)}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}.hero-copy{padding-bottom:54px}.hero-portrait{min-height:560px}.hero-portrait img{height:100%;width:100%;right:0}.context{grid-template-columns:45px 1fr}.context-body{grid-column:2;padding-top:0}.choose-head{display:block}.channels{grid-template-columns:1fr}.channels a{border-right:0;border-bottom:1px solid #4a4a4a;min-height:230px}.channels a:last-child{border-bottom:0}.handoff{grid-template-columns:130px 1fr}.handoff .button{grid-column:2;justify-self:start}.chancleta{height:240px}footer{grid-template-columns:140px 1fr}footer nav{grid-column:1/-1}}
@media(max-width:600px){
  .site-header{min-height:76px}.nc-home{width:47px;height:50px}.walo-link{font-size:0}.walo-link img{width:94px}.hero{min-height:auto}.hero-copy{padding-top:54px}.hero-logo{width:105%;margin-left:-6%}.hero-portrait{min-height:440px}.hero-portrait img{height:91%;width:112%;right:-11%}.stamp{top:9%;left:6%}.actions{display:grid}.button{width:100%}.context{grid-template-columns:1fr;gap:20px}.section-number{width:42px}.context-body{grid-column:1}.choose{padding-top:70px}.choose h2{font-size:2.75rem}.channels a{padding:30px 10px}.handoff{grid-template-columns:1fr;text-align:left}.chancleta{position:absolute;right:-12px;top:22px;height:170px;opacity:.28}.handoff .button{grid-column:1;width:100%}footer{grid-template-columns:1fr;text-align:center}.footer-brand{width:67px;margin:auto}footer nav{grid-column:1;justify-content:center;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

/* Keep the opening composition balanced across laptop window sizes. */
@media(min-width:901px){
  .hero{height:clamp(680px,calc(100svh - 92px),820px);min-height:680px}
  .hero-copy{padding:clamp(30px,4vh,54px) clamp(24px,6vw,92px)}
  .hero-logo{width:min(72%,390px);margin-left:-2%}
  .hero-logo sup{right:13%;bottom:5%}
  .intro{margin:18px 0 22px;font-size:clamp(1.05rem,1.55vw,1.28rem)}
  .button{min-height:52px;padding:13px 21px}
  .hero-portrait{height:100%;min-height:0}
  .hero-portrait img{right:-18%;bottom:0;width:138%;height:100%;object-fit:contain;object-position:center bottom}
  .stamp{top:7%;left:7%}
}