.campspage{--coral:#FF2D4B;--purple:#BF9BDE;--green:#46b889;--cream:#F7F5F9;--cream2:#EFECF2;--paper:#FFFFFF;--display:"Hanken Grotesk",sans-serif;--body:"Hanken Grotesk",sans-serif;--accent:"Fraunces",serif;--edge:3px solid var(--ink);--edge-2:2px solid var(--ink);--pop:6px 7px 0 rgba(23,24,43,.10);--pop-lg:10px 12px 0 rgba(23,24,43,.09);--pop-sm:4px 5px 0 rgba(23,24,43,.11);--r-xs:12px;--r-sm:16px;--r-md:22px;--r-lg:28px;--r-xl:36px;--r-2xl:42px}
.campspage,.campspage *{box-sizing:border-box}
.campspage{scroll-behavior:smooth}
.campspage{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
.campspage button,.campspage a{font:inherit}
.campspage a{color:inherit;text-decoration:none}
.campspage .page{overflow:hidden}
.campspage .wrap{width:min(1240px,calc(100% - 40px));margin:0 auto;position:relative;z-index:2}
.campspage .nav-menu{display:flex;align-items:center;justify-content:center;gap:30px;flex:1;}
.campspage .nav-menu a{color:var(--ink);font-weight:800;font-size:.98rem;letter-spacing:-.02em;
  transition:.2s var(--ease);}
.campspage .nav-menu a:hover{color:var(--pink)}
@media (max-width:980px){.campspage .nav-menu{gap:18px}
.campspage .nav-menu a{font-size:.92rem}}
@media (max-width:780px){.campspage .nav-menu{order:3;display:none;width:100%;
    flex-direction:column;align-items:flex-start;gap:12px;
    padding:8px 4px 4px;}}
@media (max-width:560px){}
.campspage .tag{display:inline-flex;align-items:center;gap:9px;
  font:800 10px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;}
.campspage .tag::before{content:"";width:24px;height:2px;background:currentColor}
.campspage .btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;
  padding:15px 21px;font-weight:800;transition:.28s var(--ease)}
.campspage .btn:hover{transform:translateY(-3px)}
.campspage .btn.pink{background:var(--pink);color:#fff;box-shadow:0 15px 0 rgba(23,24,43,.08)}
.campspage .btn.dark{background:var(--ink);color:#fff}
.campspage .btn.line{border:2px solid var(--ink);background:transparent;color:var(--ink)}
.campspage .hero{position:relative;
  min-height:92vh;
  overflow:hidden;
  background:var(--band2);
  color:#fff;}
.campspage .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.campspage .hero-media video,.campspage .hero-media img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;}
.campspage .hero-media video{z-index:1;pointer-events:none}
.campspage .hero-media video::-webkit-media-controls,.campspage .hero-media video::-webkit-media-controls-enclosure{display:none!important}
.campspage .hero-media img{z-index:0}
.campspage .hero-media::after{content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg, rgba(10,16,37,.42) 0%, rgba(10,16,37,.58) 42%, rgba(10,16,37,.76) 100%),
    radial-gradient(circle at 50% 42%, rgba(0,0,0,.08), rgba(0,0,0,.34) 72%);}
.campspage .hero-grid{position:relative;z-index:2;
  display:grid;grid-template-columns:1fr;
  align-items:center;justify-items:center;
  min-height:92vh;padding:110px 0 126px;
  text-align:center;}
.campspage .hero-copy{position:relative;z-index:4;max-width:920px;}
.campspage .hero .tag{color:var(--yellow);
  justify-content:center;}
.campspage .hero .tag::before{background:currentColor}
.campspage .hero h1{margin:20px auto 0;
  font:800 clamp(4rem,7.4vw,8.8rem)/.84 var(--display);
  letter-spacing:-.085em;
  max-width:860px;}
.campspage .hero h1 .line1{display:block}
.campspage .hero h1 .line2{display:inline-block;
  margin-top:8px;
  padding:2px 17px 7px;
  background:var(--coral);
  color:#fff;
  transform:rotate(-1.8deg);}
.campspage .hero h1 em{display:block;
  margin-top:9px;
  font-family:var(--accent);
  font-weight:600;
  color:var(--soft);}
.campspage .hero-lede{max-width:700px;margin:24px auto 0;
  color:rgba(255,255,255,.84);font-size:1.05rem;line-height:1.7;font-weight:600;}
.campspage .hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.campspage .quick-camps{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:31px}
.campspage .quick-camps span{padding:9px 11px;border:1.5px solid rgba(255,255,255,.18);
  border-radius:999px;background:rgba(255,255,255,.16);
  color:#fff;
  font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.campspage .hero-floating-note{position:absolute;right:24px;bottom:120px;z-index:3;
  width:220px;padding:16px 16px 14px;
  border-radius:20px;background:rgba(255,255,255,.92);color:var(--ink);
  box-shadow:0 24px 40px -24px rgba(0,0,0,.35);
  text-align:left;}
.campspage .hero-floating-note small{display:block;color:var(--pink);font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
.campspage .hero-floating-note strong{display:block;margin-top:6px;font:800 1rem/1.08 var(--display);}
.campspage .hero-floating-note span{display:block;margin-top:6px;color:var(--muted);font-size:.74rem;line-height:1.42;font-weight:600;}
.campspage .hero-wave{position:absolute;left:-2%;right:-2%;bottom:-1px;height:95px;z-index:2;}
.campspage .hero-wave svg{width:100%;height:100%;display:block}
.campspage .manifesto{position:relative;padding:90px 0 96px;background:#fffdf9}
.campspage .manifesto-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:start}
.campspage .manifesto-left .tag{color:var(--blue)}
.campspage .manifesto h2{margin-top:13px;font:800 clamp(2.8rem,4.8vw,5.2rem)/.94 var(--display);
  letter-spacing:-.068em}
.campspage .manifesto h2 em{font-family:var(--accent);font-weight:600;color:var(--pink)}
.campspage .big-sentence{padding-top:4px;
  font:800 clamp(2.1rem,3.8vw,4.4rem)/1.02 var(--display);
  letter-spacing:-.05em}
.campspage .big-sentence span:nth-child(1){color:var(--pink)}
.campspage .big-sentence span:nth-child(2){color:var(--blue)}
.campspage .big-sentence span:nth-child(3){color:var(--yellow)}
.campspage .big-sentence span:nth-child(4){color:var(--purple)}
.campspage .manifesto p{max-width:740px;margin-top:19px;color:var(--muted);
  line-height:1.7;font-weight:600}
.campspage .day{position:relative;padding:90px 0 104px;background:var(--cream)}
.campspage .day-head{text-align:center;max-width:860px;margin:0 auto}
.campspage .day-head .tag{color:var(--pink)}
.campspage .day-head h2{margin-top:12px;font:800 clamp(2.8rem,4.8vw,5.1rem)/.94 var(--display);letter-spacing:-.066em}
.campspage .day-head h2 em{font-family:var(--accent);font-weight:600;color:var(--pink)}
.campspage .day-head p{max-width:640px;margin:16px auto 0;color:var(--muted);line-height:1.68;font-weight:600}
.campspage .day-picker{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:42px}
.campspage .opt{position:relative;cursor:pointer;text-align:left;font-family:var(--body);color:var(--ink);
  border:3px solid var(--ink);border-radius:22px;background:var(--paper);
  padding:15px 24px 14px;min-width:188px;
  box-shadow:5px 6px 0 rgba(23,24,43,.10);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),
             background .26s var(--ease),color .26s var(--ease)}
.campspage .opt:hover{transform:translateY(-3px);box-shadow:7px 9px 0 rgba(23,24,43,.13)}
.campspage .opt-k{display:block;font:800 1.2rem/1 var(--display);letter-spacing:-.035em}
.campspage .opt-t{display:block;margin-top:7px;font-size:.82rem;font-weight:700;color:var(--muted)}
.campspage .opt-h{position:absolute;top:-11px;right:16px;background:var(--ink);color:#fff;
  border-radius:999px;padding:4px 10px;
  font:800 8px/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
.campspage .opt.is-on{background:var(--pink);color:#fff;transform:translateY(-3px);box-shadow:7px 9px 0 var(--ink)}
.campspage .opt.is-on .opt-t{color:rgba(255,255,255,.84)}
.campspage .opt.is-on .opt-h{background:#fff;color:var(--ink)}
.campspage .runsheet{position:relative;margin-top:34px;padding:28px 54px 24px;
  border:3px solid var(--ink);border-radius:36px;background:var(--paper);
  box-shadow:10px 12px 0 rgba(23,24,43,.08)}
.campspage .rs-rule{display:flex;justify-content:space-between;padding-bottom:11px;
  font:800 9px/1 var(--display);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.campspage .rs-track{position:relative;height:108px}
.campspage .blk{position:absolute;top:0;bottom:0;left:var(--l);width:calc(var(--w) - 7px);
  padding:12px 13px;overflow:hidden;color:#fff;
  border:2.5px solid var(--ink);border-radius:17px;background:var(--c);
  transition:background .45s var(--ease),border-color .45s var(--ease),
             color .45s var(--ease),transform .28s var(--ease)}
.campspage .blk b{display:block;font:800 .85rem/1.1 var(--display);letter-spacing:-.025em}
.campspage .blk i{display:block;margin-top:6px;font-style:normal;
  font:800 9px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;opacity:.74}
.campspage .blk.on-light{color:var(--ink)}
.campspage .blk:hover{transform:translateY(-4px)}
.campspage .blk.is-off{background:#e5e3ea;border-color:#c8c6d3;color:#9aa0ae}
.campspage .blk.is-off i{opacity:.9}
.campspage .buzzer{position:absolute;top:63%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:78px;height:78px;border-radius:50%;background:var(--pink);color:#fff;
  border:3px solid var(--ink);
  box-shadow:0 0 0 9px rgba(241,47,134,.15),4px 5px 0 var(--ink);
  display:grid;place-items:center;text-align:center;
  transition:left .55s var(--ease)}
.campspage .buzzer b{display:block;font:800 .98rem/1 var(--display);letter-spacing:-.03em}
.campspage .buzzer span{display:block;margin-top:3px;
  font:800 7px/1 var(--display);letter-spacing:.11em;text-transform:uppercase;opacity:.82}
.campspage .day-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.campspage .fact{border:2.5px solid var(--ink);border-radius:20px;background:var(--paper);
  padding:15px 18px;box-shadow:5px 6px 0 rgba(23,24,43,.07);
  transition:background .35s var(--ease)}
.campspage .fact small{display:block;font:800 8px/1 var(--display);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.campspage .fact strong{display:block;margin-top:8px;font:800 1.34rem/1 var(--display);letter-spacing:-.035em}
.campspage .fact.is-lunch.on{background:var(--yellow)}
.campspage .fact.is-lunch.on small{color:rgba(23,24,43,.62)}
.campspage .camp-types{position:relative;padding:92px 0 100px;background:#fffdf9}
.campspage .camp-types-head{display:grid;grid-template-columns:1fr .8fr;gap:48px;align-items:end}
.campspage .camp-types-head .tag{color:var(--pink)}
.campspage .camp-types-head h2{margin-top:12px;font:800 clamp(2.8rem,4.8vw,5.1rem)/.94 var(--display);letter-spacing:-.066em}
.campspage .camp-types-head h2 em{font-family:var(--accent);font-weight:600;color:var(--pink)}
.campspage .camp-types-head p{color:var(--muted);line-height:1.68;font-weight:600}
.campspage .poster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:42px}
.campspage .poster{--c:var(--pink);
  position:relative;min-height:390px;padding:28px 24px 24px;
  background:var(--c);border:3px solid var(--ink);overflow:hidden;
  transition:.3s var(--ease)}
.campspage .poster:nth-child(1){--c:var(--yellow);border-radius:34px 12px 26px 16px}
.campspage .poster:nth-child(2){--c:var(--blue);border-radius:var(--r-xs) 32px 14px 30px;transform:translateY(26px)}
.campspage .poster:nth-child(3){--c:#f3a9c5;border-radius:30px 13px 34px 12px}
.campspage .poster:nth-child(4){--c:#b69de7;border-radius:14px 30px 12px 34px;transform:translateY(32px)}
.campspage .poster:hover{transform:translateY(-7px) rotate(-.5deg)}
.campspage .poster:nth-child(2):hover,.campspage .poster:nth-child(4):hover{transform:translateY(18px) rotate(.5deg)}
.campspage .poster-icon{position:relative;width:112px;height:112px;border-radius:50%;background:var(--paper);
  border:3px solid var(--ink);display:grid;place-items:center;font-size:50px;
  box-shadow:6px 7px 0 rgba(23,24,43,.14)}
.campspage .poster::after{content:"";position:absolute;right:-45px;bottom:-45px;width:150px;height:150px;
  border-radius:50%;border:24px solid rgba(255,255,255,.18)}
.campspage .poster small{display:block;margin-top:60px;font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.campspage .poster h3{margin-top:8px;font:800 1.7rem/1 var(--display);letter-spacing:-.045em}
.campspage .poster p{margin-top:12px;color:rgba(23,24,43,.75);font-size:.82rem;line-height:1.54;font-weight:600;max-width:250px}
.campspage .doodle-mark{position:absolute;right:20px;top:27px;width:52px;height:52px}
.campspage .doodle-mark path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.campspage .adventure{position:relative;padding:105px 0 112px;background:var(--cream);overflow:hidden}
.campspage .adventure-head{text-align:center;max-width:820px;margin:0 auto}
.campspage .adventure-head .tag{color:var(--blue)}
.campspage .adventure-head h2{margin-top:12px;font:800 clamp(2.8rem,4.8vw,5.1rem)/.94 var(--display);letter-spacing:-.066em}
.campspage .adventure-head h2 em{font-family:var(--accent);font-weight:600;color:var(--pink)}
.campspage .adventure-head p{margin:16px auto 0;max-width:650px;color:var(--muted);line-height:1.68;font-weight:600}
.campspage .map{position:relative;height:880px;margin-top:40px}
.campspage .map svg.route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.campspage .map .map-base{fill:none;stroke:#d1d5df;stroke-width:4;stroke-dasharray:8 12;stroke-linecap:round}
.campspage .map .map-live{fill:none;stroke:url(#mapGradient);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:2100;stroke-dashoffset:2100;animation:drawMap 3s var(--ease) .25s forwards}
@keyframes drawMap{to{stroke-dashoffset:0}}
.campspage .stop{--c:var(--pink);
  position:absolute;width:210px;text-align:center}
.campspage .stop-icon{width:92px;height:92px;margin:0 auto;border-radius:50%;
  background:var(--c);border:3px solid var(--ink);display:grid;place-items:center;
  font-size:38px;box-shadow:6px 7px 0 rgba(23,24,43,.11);
  transition:.3s var(--ease)}
.campspage .stop:hover .stop-icon{transform:translateY(-7px) rotate(-4deg)}
.campspage .stop h3{margin-top:14px;font:800 1.05rem/1.05 var(--display);letter-spacing:-.025em}
.campspage .stop p{margin:7px auto 0;color:var(--muted);font-size:.72rem;line-height:1.42;font-weight:600;max-width:190px}
.campspage .s1{--c:var(--pink);left:2%;top:56px}
.campspage .s2{--c:var(--blue);left:28%;top:8px}
.campspage .s3{--c:var(--yellow);left:55%;top:70px}
.campspage .s4{--c:var(--purple);right:1%;top:19px}
.campspage .s5{--c:var(--green);right:8%;top:337px}
.campspage .s6{--c:var(--blue);left:58%;top:414px}
.campspage .s7{--c:var(--yellow);left:29%;top:348px}
.campspage .s8{--c:var(--pink);left:4%;top:462px}
.campspage .s9{--c:var(--purple);left:40%;top:667px}
.campspage .map.is-live .stop{cursor:pointer}
.campspage .map.is-live .stop-icon{opacity:.72;transform:scale(.92)}
.campspage .map.is-live .stop.on .stop-icon{opacity:1;transform:scale(1);
  box-shadow:6px 7px 0 rgba(23,24,43,.11),0 0 0 9px rgba(255,255,255,.62)}
@media (hover:hover){.campspage .map.is-live .stop:hover .stop-icon{opacity:1;transform:translateY(-7px) rotate(-4deg)}}
.campspage .stop-icon{position:relative;overflow:hidden}
.campspage .stop-glyph{position:relative;z-index:1;transition:opacity .22s var(--ease)}
.campspage .stop-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:50%;opacity:0;transform:scale(1.06);
  transition:opacity .26s var(--ease),transform .4s var(--ease);
  pointer-events:none;z-index:0}
.campspage .stop-icon.clip-on .stop-clip{opacity:1;transform:scale(1)}
.campspage .stop-icon.clip-on .stop-glyph{opacity:0}
.campspage .stop:hover{z-index:6}
.campspage .stop .stop-icon.clip-on,.campspage .map.is-live .stop:hover .stop-icon.clip-on{transform:translateY(-34px) scale(1.75);
  box-shadow:10px 12px 0 rgba(23,24,43,.14),0 0 0 6px rgba(255,255,255,.62)}
.campspage .map-spark-halo{fill:rgba(255,255,255,.62);stroke:none}
.campspage .map-spark{fill:#fff;stroke:var(--ink);stroke-width:3}
.campspage .special-note{position:absolute;right:2%;bottom:18px;width:310px;
  padding:18px 18px 16px;background:#fff;border:3px solid var(--ink);
  border-radius:18px;transform:rotate(2.5deg);box-shadow:6px 7px 0 var(--ink)}
.campspage .special-note strong{display:block;font:800 1rem/1.05 var(--display)}
.campspage .special-note p{margin-top:7px;color:var(--muted);font-size:.76rem;line-height:1.45;font-weight:600}
.campspage .special-note span{display:inline-flex;margin-top:9px;padding:7px 9px;border-radius:999px;background:var(--yellow);
  font-size:7px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.campspage .final{position:relative;padding:94px 0 102px;background:var(--pink);overflow:hidden}
.campspage .final::before{content:"";position:absolute;left:-8%;top:-40px;width:116%;height:100px;
  background:var(--cream);border-radius:0 0 50% 50%/0 0 100% 100%}
.campspage .final-grid{display:grid;grid-template-columns:1fr .72fr;gap:42px;align-items:center;padding-top:35px}
.campspage .final .tag{color:var(--yellow)}
.campspage .final h2{margin-top:16px;color:#fff;
  font:800 clamp(3.3rem,6vw,6.7rem)/.88 var(--display);letter-spacing:-.08em}
.campspage .final h2 em{font-family:var(--accent);font-weight:600;color:var(--yellow)}
.campspage .final p{margin-top:18px;max-width:650px;color:rgba(255,255,255,.78);line-height:1.68;font-weight:600}
.campspage .final .btn{margin-top:26px}
.campspage .mascot-stage{position:relative;height:380px}
.campspage .mascot-circle{position:absolute;right:10px;top:25px;width:270px;height:270px;border-radius:50%;
  background:var(--yellow);border:3px solid var(--ink);box-shadow:11px 12px 0 var(--ink)}
.campspage .mascot{position:absolute;right:3px;bottom:-42px;width:355px;mix-blend-mode:multiply;
  animation:mascotBob 3.1s ease-in-out infinite}
@keyframes mascotBob{50%{transform:translateY(-8px) rotate(1deg)}}
.campspage .final-sticker{position:absolute;left:8px;top:64px;padding:14px 16px;border:3px solid var(--ink);
  border-radius:var(--r-xs);background:#fff;transform:rotate(-6deg);box-shadow:6px 7px 0 var(--ink);
  font:800 1rem/1 var(--display)}
@media (max-width:980px){.campspage .hero-grid,.campspage .manifesto-grid,.campspage .camp-types-head,.campspage .final-grid{grid-template-columns:1fr}
.campspage .hero-grid{min-height:auto;padding:68px 0 36px}
.campspage .hero-art{height:580px}
.campspage .photo-blob{right:-3%;width:98%;height:525px}
.campspage .manifesto-grid{gap:34px}
.campspage .poster-grid{grid-template-columns:1fr 1fr}
.campspage .poster:nth-child(n){transform:none}
.campspage .map{height:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:46px}
.campspage .map svg.route{display:none}
.campspage .map.is-live svg.route{display:block;z-index:0}
.campspage .map .stop{z-index:1}
.campspage .map .stop h3,.campspage .map .stop p{max-width:216px;margin-left:auto;margin-right:auto}
.campspage .map .map-base{stroke-width:3;stroke-dasharray:7 11}
.campspage .map .map-live{stroke-width:5}
.campspage .stop{position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:100%;padding:16px 10px}
.campspage .special-note{position:relative;right:auto;bottom:auto;width:100%;grid-column:1/-1;transform:none}}
@media (max-width:700px){.campspage .wrap{width:min(100% - 24px,1240px)}
.campspage .hero{min-height:88vh}
.campspage .hero-grid{min-height:88vh;padding:98px 0 118px}
.campspage .hero h1{font-size:clamp(3.3rem,15vw,5.8rem)}
.campspage .hero-lede{font-size:.98rem}
.campspage .hero-floating-note{display:none}
.campspage .manifesto,.campspage .day,.campspage .camp-types,.campspage .adventure,.campspage .final{padding-top:66px;padding-bottom:72px}
.campspage .day-picker{gap:10px}
.campspage .opt{flex:1 1 46%;min-width:0;padding:13px 16px}
.campspage .opt-k{font-size:1.02rem}
.campspage .runsheet{padding:22px 16px 18px;border-radius:28px}
.campspage .rs-rule{display:none}
.campspage .rs-track{height:auto;display:flex;flex-direction:column;gap:9px}
.campspage .blk{position:static;left:auto;width:auto;
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:13px 15px;border-radius:15px}
.campspage .blk i{margin-top:0;flex:none}
.campspage .blk:hover{transform:none}
.campspage .buzzer{position:static;transform:none;width:auto;height:auto;border-radius:16px;
    display:flex;align-items:baseline;justify-content:center;gap:9px;padding:13px 15px;
    box-shadow:0 0 0 4px rgba(241,47,134,.15),4px 5px 0 var(--ink)}
.campspage .buzzer span{margin-top:0}
.campspage .day-facts{grid-template-columns:1fr;gap:10px}
.campspage .poster-grid{grid-template-columns:1fr}
.campspage .poster{min-height:310px}
.campspage .map{grid-template-columns:1fr}
.campspage .special-note{grid-column:1}
.campspage .mascot-stage{height:315px}
.campspage .mascot-circle{width:220px;height:220px}
.campspage .mascot{width:290px}}
@media (prefers-reduced-motion:reduce){.campspage,.campspage *{animation:none!important;transition:none!important}}

/* Belt and braces: any bare path inside a decorative SVG on this page is a
   stroke, never a fill. The real rules live above, ported from the build - this
   only guards against one of them going missing, which once rendered the map as
   a black shape the size of the section. Deliberately low specificity so it
   never beats the rules it is backing up.
   .is-live stays in the markup as well as being set by the map script, so a
   visitor with no JS still sees the drawn route on a phone rather than the
   mobile rule hiding it for ever. */
.campspage .doodle-mark path,.campspage svg.route path{fill:none}

/* ---- corrections and the pieces this port adds ---- */

/* The mascot now carries a real alpha channel, so multiply is not only
   unnecessary, it tints the artwork against the yellow disc. And height:auto is
   load-bearing: the width/height attributes are presentational hints, so
   without it the browser honours height="1174" literally and the image renders
   a thousand pixels tall. The attributes stay - they reserve the right box and
   stop the section shifting as it loads. */
.campspage .mascot{height:auto;mix-blend-mode:normal}

/* The hero's secondary button sits on footage, so it needs its own treatment
   rather than the light-background .btn.line.
   The selector carries .btn.line deliberately: .campspage .hero-ghost alone is
   two classes and loses to .campspage .btn.line, which sets color:var(--ink) -
   dark text on a dark video, which is exactly how this button disappeared.
   Opacities raised too: .08 background and .38 border read as barely-there over
   moving footage, where a still photograph would have carried them. */
.campspage .btn.line.hero-ghost{background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.62);color:#fff;backdrop-filter:blur(3px)}
.campspage .btn.line.hero-ghost:hover{background:rgba(255,255,255,.26);border-color:#fff}

/* Prices. Every number on this page comes from sn_camp_prices(); these two
   rules are the only places one is displayed. */
.campspage .opt-p{display:block;margin-top:8px;font-weight:800;font-size:.86rem;color:var(--pink)}
.campspage .opt.is-on .opt-p{color:#fff}
.campspage .poster-price{margin-top:14px;font-size:.9rem;font-weight:700;color:var(--ink)}
.campspage .poster-price b{font-size:1.15rem;font-weight:800}

/* ---- enquiry form ----
   On the dark closing panel, so the fields are light-on-dark. Inputs are 16px
   on purpose: iOS zooms the viewport on focus for anything smaller, which on a
   phone throws the parent out of the layout mid-form. */
.campspage .campform{margin-top:26px;max-width:520px}
.campspage .cf-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campspage .cf-f{display:block;margin-top:12px}
.campspage .cf-f span{display:block;margin-bottom:6px;font-size:.8rem;font-weight:800;
  letter-spacing:.02em;color:rgba(255,255,255,.76)}
.campspage .cf-f input,.campspage .cf-f textarea{
  width:100%;padding:13px 14px;font:600 16px/1.4 var(--body);color:var(--ink);
  background:#fff;border:var(--edge-2);border-radius:var(--r-xs);outline:none}
.campspage .cf-f textarea{resize:vertical;min-height:78px}
.campspage .cf-f input:focus,.campspage .cf-f textarea:focus{box-shadow:0 0 0 4px rgba(242,177,42,.45)}
.campspage .cf-err,.campspage .cf-ok{margin-top:12px;font-size:.88rem;font-weight:700}
.campspage .cf-err{color:var(--yellow)}
.campspage .cf-ok{color:#fff}
.campspage #cfGo{margin-top:18px}
.campspage #cfGo[disabled]{opacity:.6;cursor:default}
.campspage .cf-call{margin-top:14px;font-size:.88rem;font-weight:600;color:rgba(255,255,255,.76)}
.campspage .cf-call a{color:#fff;font-weight:800}

@media(max-width:560px){
  .campspage .cf-two{grid-template-columns:1fr;gap:0}
}

/* Gym picker on the global page. Prices are per site, so this page routes to
   the child that can quote one rather than guessing a number true at one gym
   out of three. */
.campspage .camp-gyms{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px;max-width:460px}
.campspage .camp-gyms a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;background:#fff;border:var(--edge-2);border-radius:var(--r-xs);
  color:var(--ink);text-decoration:none;font-weight:800;box-shadow:var(--pop-sm);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.campspage .camp-gyms a:hover{transform:translate(-2px,-2px);box-shadow:var(--pop)}
.campspage .camp-gyms span{color:var(--pink);font-size:1.1rem}

/* Breadcrumbs inside the hero. They sit on the darkened footage, so they cannot
   use section.css's dark-on-light treatment. Small and low-contrast on purpose:
   navigation a parent needs if they are lost, not something competing with the
   headline. */
.campspage .hero-crumbs{margin:0 0 18px}
.campspage .hero-crumbs ol{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;
  margin:0;padding:0;list-style:none;font-size:.76rem;font-weight:700;letter-spacing:.02em}
.campspage .hero-crumbs li{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.62)}
.campspage .hero-crumbs li+li::before{content:"/";color:rgba(255,255,255,.34)}
.campspage .hero-crumbs a{color:rgba(255,255,255,.82);text-decoration:none}
.campspage .hero-crumbs a:hover{color:#fff;text-decoration:underline}
.campspage .hero-crumbs [aria-current]{color:#fff}

/* Address under the hero actions. The gym's own NAP on its own camps page -
   the local signal the child route exists for. */
.campspage .hero-addr{margin-top:22px;font-size:.86rem;font-weight:600;color:rgba(255,255,255,.78)}
.campspage .hero-addr a{color:#fff;font-weight:800}


/* ---- hero to the top of the window ----
   The theme header is opaque and in normal flow, so the hero began below it and
   the footage started a header's height down the page. Pulling it up by that
   height puts the video behind the nav and the headline where the design has it.

   The height is measured at runtime into --sn-head rather than hardcoded: the
   header is a floating pill whose height changes with the viewport, and a fixed
   number would leave a white sliver at some widths and crop the nav at others.
   0px until the script runs, so no-JS gets the old safe layout rather than a
   hero sitting under an opaque bar. */
.campspage .hero{margin-top:calc(-1 * var(--sn-head, 0px))}
.campspage .hero-grid{padding-top:calc(110px + var(--sn-head, 0px))}
@media(max-width:980px){
  .campspage .hero-grid{padding-top:calc(98px + var(--sn-head, 0px))}
}
@media(max-width:700px){
  .campspage .hero-grid{padding-top:calc(68px + var(--sn-head, 0px))}
}