:root{
  --paper:#f8f6ed;
  --ink:#182a22;
  --muted:#6f7568;
  --path:#c64e45;
  --moss:#d7dfc3;
  --line:rgba(24,42,34,.14);
  --display:"Archivo",sans-serif;
  --body:"Space Grotesk",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
body:before{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.09;background-image:linear-gradient(rgba(24,42,34,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(24,42,34,.25) 1px,transparent 1px);background-size:48px 48px}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.skip-link{position:fixed;z-index:100;left:16px;top:12px;transform:translateY(-140%);background:var(--ink);color:#fff;padding:10px 14px;border-radius:999px;font-weight:900}
.skip-link:focus-visible{transform:translateY(0)}
a:focus-visible{outline:3px solid var(--path);outline-offset:4px}
.curtain{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:var(--ink);color:var(--paper);clip-path:inset(0 0 0 0);pointer-events:none}
.curtain span{position:absolute;top:32px;left:32px;color:var(--moss);font-size:12px;font-weight:900;letter-spacing:.28em;text-transform:uppercase}
.curtain strong{font-family:var(--display);font-size:clamp(54px,12vw,188px);line-height:.76;letter-spacing:-.09em;text-transform:uppercase;text-align:center}
.nav{position:fixed;z-index:30;left:50%;top:22px;transform:translateX(-50%);display:flex;justify-content:space-between;align-items:center;width:min(92vw,660px);min-height:58px;padding:8px 10px 8px 8px;border-radius:999px;background:rgba(248,246,237,.76);border:1px solid rgba(24,42,34,.16);backdrop-filter:blur(18px)}
.brand{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--display);font-weight:900;font-size:12px}
.nav div{display:flex;gap:22px;padding-right:14px;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.hero{position:relative;min-height:120dvh;padding:120px clamp(18px,5vw,76px) 86px;display:grid;grid-template-columns:.96fr 1.04fr;align-items:center;gap:40px;overflow:hidden}
.map-field{position:absolute;inset:7% 5%;border-radius:48px;background:radial-gradient(circle at 20% 20%,rgba(198,78,69,.16),transparent 22%),radial-gradient(circle at 78% 62%,rgba(215,223,195,.7),transparent 28%);border:1px solid var(--line);opacity:.75}
.path{position:absolute;left:13%;top:28%;width:72%;height:44%;border:2px solid rgba(198,78,69,.48);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(-10deg);will-change:transform}
.dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--path);box-shadow:0 0 0 8px rgba(198,78,69,.12);will-change:transform}
.d1{left:18%;top:30%}.d2{right:22%;top:45%}.d3{left:48%;bottom:22%}
.hero-copy{position:relative;z-index:4}
.hero-copy p{max-width:600px;margin:0 0 24px;color:var(--path);font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.hero-copy h1{max-width:980px;margin:0;font-family:var(--display);font-size:clamp(54px,7.2vw,112px);line-height:.84;letter-spacing:-.09em;text-transform:uppercase;text-wrap:balance}
.word{display:inline-block;white-space:nowrap}
.char{display:inline-block;will-change:transform,opacity}
.button{display:inline-flex;align-items:center;gap:16px;margin-top:30px;min-height:56px;padding:8px 8px 8px 24px;border-radius:999px;background:var(--path);color:#fff;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1);touch-action:manipulation}
.button i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);font-style:normal;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.button:hover{transform:translateY(-4px);box-shadow:0 24px 70px rgba(198,78,69,.24)}
.button:hover i{transform:translate(3px,-2px) scale(1.08)}
.button:active{transform:translateY(-1px) scale(.98)}
.button.dark{background:var(--ink);color:var(--paper)}
.photo-stack{position:relative;z-index:3;height:min(76vh,780px);perspective:1100px;transform-style:preserve-3d}
.frame{position:absolute;border-radius:34px;box-shadow:0 44px 130px rgba(24,42,34,.24);will-change:transform,opacity,clip-path}
.f1{left:7%;top:8%;width:78%;height:52%}
.f2{left:0;bottom:7%;width:48%;height:38%}
.f3{right:0;bottom:0;width:48%;height:44%}
.route{position:relative;display:grid;grid-template-columns:.78fr 1.22fr;gap:80px;padding:150px clamp(18px,7vw,110px);background:var(--ink);color:var(--paper)}
.route aside{align-self:start}
.route h2,.close h2{margin:0;font-family:var(--display);font-size:clamp(48px,8vw,136px);line-height:.82;letter-spacing:-.08em;text-transform:uppercase;text-wrap:balance}
.route aside p{max-width:520px;color:rgba(248,246,237,.66);font-size:clamp(18px,2vw,26px);line-height:1.25;font-weight:600}
.route-list{display:grid;gap:18px}
.route-list article{position:relative;min-height:220px;padding:30px;border-radius:34px;background:rgba(248,246,237,.08);border:1px solid rgba(248,246,237,.12);overflow:hidden;will-change:transform,opacity}
.route-list span{font-family:var(--display);font-size:72px;line-height:.8;letter-spacing:-.08em;color:var(--moss)}
.route-list h3{margin:28px 0 10px;font-family:var(--display);font-size:34px;letter-spacing:-.04em;text-transform:uppercase}
.route-list p{max-width:520px;margin:0;color:rgba(248,246,237,.68);font-weight:600;line-height:1.45}
.gallery{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;padding:18px;background:var(--paper)}
.gallery img{min-height:56vh;border-radius:34px;will-change:transform,opacity}
.gallery img:first-child{grid-row:span 2;min-height:calc(112vh + 18px)}
.close{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:130px clamp(18px,7vw,110px);background:var(--moss);color:var(--ink)}
.close p{margin:0 0 18px;color:var(--path);font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.motion-lite .map-field,.motion-lite .dot{display:none}
.motion-lite .frame,.motion-lite .route-list article,.motion-lite .gallery img{will-change:auto}
@media(max-width:820px){
  .nav{top:14px;width:calc(100vw - 24px)}
  .nav div{gap:14px;font-size:10px}
  .hero{grid-template-columns:1fr;min-height:100dvh;padding:96px 16px 60px;gap:22px}
  .map-field{inset:72px 12px auto;height:44vh;border-radius:28px}
  .hero-copy{order:2}
  .hero-copy p{font-size:10px;margin-bottom:14px}
  .hero-copy h1{font-size:50px;line-height:.84}
  .photo-stack{order:1;height:44vh}
  .frame{border-radius:22px}
  .route{grid-template-columns:1fr;padding:90px 16px;gap:36px}
  .route h2,.close h2{font-size:48px}
  .route-list article{min-height:190px;padding:24px;border-radius:24px}
  .gallery{grid-template-columns:1fr;padding:12px}
  .gallery img,.gallery img:first-child{min-height:360px;grid-row:auto;border-radius:24px}
  .close{display:grid;padding:90px 16px}
}
@media(prefers-reduced-motion:reduce){
  .curtain{display:none}
  *,*:before,*:after{animation:none!important;transition:none!important}
}