:root{--bg:#efe6d2;--bg2:#e6dbc2;--fg:#12261f;--muted:#4c5a52;--accent:#e8833a;--accent2:#2f6f73;--on-accent:#fff;--on-accent2:#fff;--card:#f8f2e4;--line:rgba(18,38,31,.15);--fh:"Oswald",Impact,sans-serif;--fb:"Lora",Georgia,serif;--r:14px;--btnr:6px;--hh:0px}
h1,h2,h3{font-weight:600;text-transform:uppercase;letter-spacing:.01em}h1{font-size:clamp(2.6rem,4.4vw,4.2rem);line-height:1}
.splitv{display:grid;grid-template-columns:1fr 1fr}
.media{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:#12261f;color:#fff}
.stack,.layer{position:absolute;inset:0}
.layer{opacity:0;transform:scale(1.08);transition:opacity 1.1s ease,transform 6s ease-out}
.layer.on{opacity:1;transform:scale(1)}
.sc{width:100%;height:100%;display:block}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,17,.55),transparent 28%,transparent 55%,rgba(10,20,17,.8))}
.media .brand{position:absolute;left:34px;top:30px;display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font:600 1.5rem/1 var(--fh);text-transform:uppercase}
.brand svg{width:48px;height:48px}.brand small{display:block;font:500 12px/1.4 var(--fb);letter-spacing:.2em;opacity:.85}
.snav{position:absolute;left:34px;bottom:62px;right:34px}
.snav ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.snav a{display:flex;align-items:baseline;gap:14px;color:rgba(255,255,255,.72);text-decoration:none;font:500 1.25rem/1.3 var(--fh);text-transform:uppercase;letter-spacing:.04em;padding:4px 0;transition:color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.snav .num{font-size:.8rem;opacity:.8;width:24px}
.snav a::after{content:"";height:2px;width:0;background:var(--accent);align-self:center;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.snav a:hover{color:#fff}.snav a.on{color:#fff;transform:translateX(6px)}.snav a.on::after{width:44px}
.flow{min-width:0}
.blk{padding:110px clamp(24px,6vw,90px);border-bottom:1px solid var(--line)}
.hero{min-height:100vh;display:flex;align-items:center}
.row{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 34px}
.stats{list-style:none;margin:0;padding:0;display:flex;gap:30px;flex-wrap:wrap}.stats b{display:block;font:600 2.2rem/1 var(--fh);color:var(--accent2)}.stats span{font-size:14px;color:var(--muted)}
.trip{display:flex;gap:20px;justify-content:space-between;align-items:flex-start;padding:22px 0;border-top:1px solid var(--line)}
.trip h3{margin:0 0 2px;font-size:1.35rem}.trip .meta{font-size:14px;color:var(--accent2);font-weight:700}.trip p{margin:6px 0 0;color:var(--muted)}
.trip .price{font:600 1.6rem/1 var(--fh);color:var(--accent);white-space:nowrap}
.fine{font-size:13.5px;color:var(--muted);margin-top:14px}
.chart{display:grid;gap:6px;font-size:14px}
.crow{display:grid;grid-template-columns:150px repeat(12,1fr);gap:4px;align-items:center}
.crow.head span{text-align:center;font:600 13px var(--fh);color:var(--muted)}.crow.head span:first-child{text-align:left}
.crow span[role=cell]{height:26px;border-radius:5px;background:rgba(18,38,31,.08)}
.crow span.hit{background:var(--accent2);transform-origin:left;animation:grow .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d)}
.chart:not(.in) span.hit{animation-play-state:paused}
@keyframes grow{from{transform:scaleX(0)}}
.gl{display:grid;gap:16px}.guide{display:flex;gap:16px;align-items:center}.guide b{display:block;font:600 1.2rem var(--fh);text-transform:uppercase}.guide span{color:var(--muted);font-size:15px}
.av{width:60px;height:60px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font:600 1.2rem var(--fh);flex:none}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}.fcard .ok{margin-top:14px}
.call{margin-top:20px;font-weight:700}.call svg{display:inline;width:18px;height:18px;vertical-align:-3px}
.foot{padding:26px clamp(24px,6vw,90px);font-size:13.5px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}.foot a{color:inherit}
.inl{display:none}
/* animations inside the scenes */
.mist{animation:drift 16s ease-in-out infinite alternate}@keyframes drift{to{transform:translateX(70px)}}
.glint{animation:gl 3s ease-in-out infinite}@keyframes gl{50%{opacity:.1;transform:translateX(12px)}}
.line{stroke-dasharray:4 3;animation:cast 5s ease-in-out infinite}@keyframes cast{50%{transform:translate(4px,-6px)}}
.boat{animation:bob 4s ease-in-out infinite}@keyframes bob{50%{transform:translate(10px,4px) rotate(.6deg)}}
.rip{animation:rip 3s ease-in-out infinite}@keyframes rip{50%{transform:translateX(-14px);opacity:.3}}
.fish{animation:jump 6s ease-in-out infinite}
@keyframes jump{0%{transform:translate(-200px,620px) rotate(-10deg)}45%{transform:translate(200px,560px) rotate(-6deg)}60%{transform:translate(300px,330px) rotate(-30deg)}72%{transform:translate(400px,420px) rotate(30deg)}100%{transform:translate(800px,640px) rotate(10deg)}}
.wave{animation:wv 6s linear infinite}@keyframes wv{to{transform:translateX(-150px)}}
.ub{animation:ub 5s linear infinite}@keyframes ub{to{transform:translateY(-480px);opacity:0}}
.weed{animation:weed 5s ease-in-out infinite;transform-origin:bottom}@keyframes weed{50%{transform:skewX(4deg)}}
.tw{animation:tw 3s ease-in-out infinite}@keyframes tw{50%{opacity:.2}}
.flame{transform-origin:220px 726px;animation:fl .5s ease-in-out infinite alternate}@keyframes fl{to{transform:scale(1.06,.94) skewX(3deg)}}
.fireglow{animation:fgl 1.5s ease-in-out infinite alternate}@keyframes fgl{to{opacity:.7}}
.ember{animation:em 2.4s ease-out infinite}@keyframes em{to{transform:translate(14px,-140px);opacity:0}}
@media(max-width:900px){
 .splitv{display:block}
 .media{display:contents}
 .stack,.shade{display:none}
 .media .brand{position:static;padding:16px 20px 8px;background:#12261f}
 .snav{position:sticky;top:0;left:auto;right:auto;bottom:auto;z-index:20;background:#12261f}
 .snav ol{display:flex;overflow-x:auto;gap:4px;padding:6px 16px 14px;scrollbar-width:none}
 .snav a{font-size:1rem;padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:999px;white-space:nowrap}
 .snav a.on{transform:none;background:var(--accent);border-color:var(--accent)}.snav a::after,.snav .num{display:none}
 .inl{display:block;margin:-64px -22px 34px;height:240px;overflow:hidden}
 .hero .inl{height:300px}
 .hero{min-height:0;display:block}
 .blk{padding:64px 22px}
 .crow{grid-template-columns:96px repeat(12,1fr);gap:2px}.crow span[role=cell]{height:20px}.chart{font-size:12.5px}
 .trip{flex-direction:column;gap:8px}
}
@media (prefers-reduced-motion:reduce){.layer{transition:none;transform:none}}
