/* ============================================================
   COLOURS
   ============================================================ */
:root{
  --void:#150E2E;      /* deepest purple-black: hero, joining, footer */
  --purple:#2A1852;    /* dark purple: philosophy                     */
  --indigo:#2C1E6B;    /* blue-purple: headings, who-it's-for         */
  --accent:#0B6E60;    /* accent on LIGHT backgrounds (deep green)    */
                       /* deep blue alternative: #1A5FA8              */
  --tint:#F5F3FB;      /* pale purple: the whole approach section     */
  --aqua:#39ECDA;      /* accent on DARK backgrounds                  */
  --ink:#14131A;
  --paper:#FFFFFF;
  --line:#E2E6EF;
  --muted:#4E5063;
  --dim:#C3BCE0;
  --gutter:clamp(1.25rem,5vw,4.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.0625rem,0.99rem + 0.35vw,1.1875rem);line-height:1.62;font-optical-sizing:auto}
img,svg{max-width:100%;display:block}
p{margin:0 0 1.1em}
a{color:inherit}

h1,h2,h3{font-family:"Sora",system-ui,sans-serif;font-weight:700;line-height:1.07;letter-spacing:-0.03em;margin:0}
h2{font-size:clamp(1.8rem,1.25rem + 2.1vw,2.9rem);max-width:22ch;margin-bottom:1.2rem;color:var(--indigo)}
/* short headings that should sit on one line on desktop */
h2.wide{max-width:36ch}
h3{font-size:1.1rem;font-weight:600;letter-spacing:-0.015em;margin-bottom:0.4rem}

.eyebrow{font-family:"Sora",sans-serif;font-weight:600;font-size:0.88rem;letter-spacing:0.09em;text-transform:uppercase;color:var(--accent);display:block;margin:0 0 1.1rem}
.dark .eyebrow{color:var(--aqua)}

.wrap{max-width:76rem;margin:0 auto;padding-inline:var(--gutter)}
section{padding-block:clamp(3.25rem,7vw,6rem)}
.split{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr}
@media(min-width:56rem){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .split.wide-left{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .split.middle{align-items:center}
}
.measure{max-width:44rem}

.dark{color:#fff}
.dark h2,.dark h3{color:#fff}
.dark p{color:var(--dim)}
.dark strong{color:#fff;font-weight:600}
.bg-void{background:var(--void)}
.bg-purple{background:var(--purple)}
.bg-indigo{background:var(--indigo)}
.bg-tint{background:var(--tint)}

/* ---------- logo ---------- */
.logo{width:clamp(9.5rem,16vw,12rem);height:auto;color:#fff}
.logo-lockup{display:inline-block;line-height:0}

/* ---------- header ---------- */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.75rem;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{padding-top:clamp(1.5rem,4vw,3rem);padding-bottom:clamp(3rem,7vw,5rem)}
.hero h1{font-size:clamp(2.4rem,1.15rem + 5.2vw,4.7rem);max-width:18ch;margin-bottom:1.5rem}

.hero h1,.hero .lede,.hero .practical,.hero .actions{opacity:0;transform:translateY(16px);animation:heroIn .85s cubic-bezier(.22,.7,.3,1) forwards}
.hero h1{animation-delay:.08s}
.hero .lede{animation-delay:.20s}
.hero .practical{animation-delay:.32s}
.hero .actions{animation-delay:.42s}
@keyframes heroIn{to{opacity:1;transform:none}}

.hl{
  color:var(--aqua);
  background-image:linear-gradient(100deg,
    var(--aqua) 0%, var(--aqua) 40%, #C9FFF8 47%, #FFFFFF 50%, #C9FFF8 53%, var(--aqua) 60%, var(--aqua) 100%);
  background-size:300% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:sweep 3s cubic-bezier(.45,0,.25,1) 1s infinite;
}
@keyframes sweep{0%{background-position:100% 0}60%{background-position:0% 0}100%{background-position:0% 0}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1,.hero .lede,.hero .practical,.hero .actions{opacity:1;transform:none;animation:none}
  .hl{animation:none;background-image:none;-webkit-text-fill-color:var(--aqua);color:var(--aqua)}
}

.lede{font-size:clamp(1.08rem,1rem + 0.45vw,1.28rem);max-width:44rem}
.dark .lede{color:var(--dim)}
.hero .lede{color:#F0EDFB}   /* brighter than other dark-section text; #FFFFFF if you want it brighter still */

.practical{list-style:none;display:flex;flex-wrap:wrap;gap:0.55rem;margin:2.2rem 0 0;padding:0}
.practical li{font-family:"Sora",sans-serif;font-weight:600;font-size:0.92rem;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(57,236,218,.45);border-radius:100px;padding:0.5rem 1rem;white-space:nowrap}

.actions{display:flex;flex-wrap:wrap;gap:0.85rem;margin-top:2rem}
.btn{display:inline-block;font-family:"Sora",sans-serif;font-weight:600;font-size:0.92rem;padding:0.95rem 1.7rem;text-decoration:none;background:var(--aqua);color:var(--void);border:2px solid var(--aqua);border-radius:2px;transition:background .18s,border-color .18s,color .18s}
.btn:hover{background:#fff;border-color:#fff}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn.ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.dark a:focus-visible{outline-color:var(--aqua)}

/* ---------- approach: figures band ---------- */
.figures{
  display:flex;flex-wrap:wrap;gap:0.4rem 2.25rem;margin:2.25rem 0 2rem;padding:1.1rem 0;
  border-top:1px solid #DCD6EE;border-bottom:1px solid #DCD6EE;list-style:none;
}
.figures li{
  font-family:"Sora",sans-serif;font-weight:700;letter-spacing:-0.03em;color:var(--accent);
  font-size:clamp(1.15rem,1rem + 0.7vw,1.6rem);line-height:1.2;
}
@media(max-width:40rem){
  .figures{flex-direction:column;gap:0.55rem}
}

/* ---------- approach: adventure carousel ---------- */
.adv-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3rem}
.adv-head h3{font-family:"Sora",sans-serif;font-weight:700;font-size:clamp(1.2rem,1.05rem + 0.6vw,1.5rem);letter-spacing:-0.03em;color:var(--indigo);margin:0}
.adv-hint{font-family:"Sora",sans-serif;font-size:0.8rem;font-weight:500;color:var(--accent)}

.adv-scroll{
  display:flex;gap:0.8rem;margin-top:1.25rem;padding-bottom:0.9rem;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:#C4BBE4 transparent;
}
.adv-scroll::-webkit-scrollbar{height:6px}
.adv-scroll::-webkit-scrollbar-thumb{background:#C4BBE4;border-radius:100px}
.adv-scroll::-webkit-scrollbar-track{background:transparent}

.adv-card{
  flex:0 0 13.5rem;scroll-snap-align:start;background:#fff;border:1px solid #E4DFF2;
  border-radius:12px;padding:0.8rem;transition:transform .2s ease,box-shadow .2s ease;
}
.adv-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(21,14,46,.10)}
.adv-card .thumb{width:100%;aspect-ratio:3/2;border-radius:8px;overflow:hidden;margin-bottom:0.7rem}
.adv-card .thumb svg{width:100%;height:100%}
.adv-card h4{font-family:"Sora",sans-serif;font-weight:700;font-size:0.95rem;letter-spacing:-0.025em;color:var(--indigo);margin:0 0 0.3rem}
.adv-card p{font-size:0.88rem;line-height:1.42;color:var(--muted);margin:0}

/* ---------- what children build ---------- */
.build{border-top:1px solid var(--line);padding-block:clamp(2.25rem,4vw,3.25rem)}
.build:first-of-type{border-top:2px solid var(--indigo)}
.build .k{font-family:"Sora",sans-serif;font-weight:600;font-size:0.88rem;letter-spacing:0.09em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:0.5rem}
.build h3{font-size:clamp(1.3rem,1.1rem + 0.8vw,1.75rem);font-weight:700;letter-spacing:-0.03em;color:var(--indigo);margin-bottom:0.9rem}
.build p{color:var(--muted)}
.artwork{margin-top:1.5rem}
.build p:last-of-type{margin-bottom:0}
.build:last-of-type{padding-bottom:0}
.shot{border-radius:12px;overflow:hidden;background:var(--tint)}
.shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* ---------- philosophy ---------- */
.teaser{font-family:"Sora",sans-serif;font-weight:700;font-size:clamp(1.05rem,0.95rem + 0.6vw,1.4rem);line-height:1.45;letter-spacing:-0.03em;color:#fff;max-width:34ch;margin:0 0 1.7rem}
.arrow-link{display:inline-block;font-family:"Sora",sans-serif;font-weight:600;font-size:1rem;color:var(--aqua);text-decoration:none;border-bottom:2px solid rgba(57,236,218,.4);padding-bottom:2px}
.arrow-link:hover{border-bottom-color:var(--aqua)}

/* ---------- day timeline ---------- */
.daybar{font-family:"Sora",sans-serif;font-weight:700;font-size:clamp(1.5rem,1.15rem + 1.5vw,2.3rem);letter-spacing:-0.035em;color:var(--indigo);margin:0 0 2.4rem}
.daybar em{font-style:normal;color:inherit}
.tl{list-style:none;margin:0;padding:0 0 0 1.9rem;position:relative;max-width:46rem}
.tl::before{content:"";position:absolute;left:0.32rem;top:0.5rem;bottom:0.5rem;width:2px;background:var(--line)}
.tl-phase{position:relative;padding:0 0 0.9rem;margin-top:1.6rem}
.tl-phase:first-child{margin-top:0}
.tl-phase span{font-family:"Sora",sans-serif;font-weight:600;font-size:0.88rem;letter-spacing:0.09em;text-transform:uppercase;color:var(--accent)}
.tl-phase::before{content:"";position:absolute;left:-1.9rem;top:0.14rem;width:0.75rem;height:0.75rem;background:var(--indigo)}
.tl-item{position:relative;padding:0 0 1.9rem}
.tl-item::before{content:"";position:absolute;left:-1.9rem;top:0.45rem;width:0.75rem;height:0.75rem;border-radius:50%;background:#fff;border:2px solid var(--accent)}
.tl-item .t{font-family:"IBM Plex Mono",monospace;font-size:0.78rem;letter-spacing:0.06em;color:var(--accent);display:block;margin-bottom:0.15rem}
.tl-item b{display:block;font-family:"Sora",sans-serif;font-weight:700;font-size:1.18rem;letter-spacing:-0.025em;color:var(--indigo);margin-bottom:0.35rem}
.tl-item p{margin:0;color:var(--muted);font-size:1rem}
.tl-item.rest{padding-bottom:1.5rem}
.tl-item.rest::before{border-color:var(--line);background:var(--line)}
.tl-item.rest b{font-family:"Source Serif 4",Georgia,serif;font-weight:400;font-size:1rem;color:var(--muted);letter-spacing:0}

/* ---------- who ---------- */
.wants{margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.22)}
.wants li{padding:1.15rem 0 1.15rem 2.2rem;border-bottom:1px solid rgba(255,255,255,.22);position:relative;color:#fff;font-family:"Sora",sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:-0.015em;line-height:1.35}
.wants li::before{content:"";position:absolute;left:0;top:1.55rem;width:0.7rem;height:0.7rem;background:var(--aqua)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);margin-top:0.5rem}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:1.2rem 2.2rem 1.2rem 0;position:relative;list-style:none;font-family:"Sora",sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:-0.02em;color:var(--indigo)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:1.05rem;font-family:"Sora",sans-serif;color:var(--accent);font-size:1.3rem;font-weight:600}
details[open] summary::after{content:"–"}
details .ans{padding:0 0 1.35rem;color:var(--muted);max-width:46rem}
details .ans p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
footer{padding-block:clamp(2.75rem,5vw,4rem) 2.5rem}
.foot-grid{display:grid;gap:2.25rem;grid-template-columns:1fr}
@media(min-width:44rem){.foot-grid{grid-template-columns:1.4fr repeat(3,1fr)}}
.foot-brand .logo{margin-bottom:1rem}
.foot-brand p{font-family:"Sora",sans-serif;font-size:0.9rem;color:var(--dim);margin:0}
.foot-col h4{font-family:"Sora",sans-serif;font-weight:600;font-size:0.88rem;letter-spacing:0.09em;text-transform:uppercase;color:var(--aqua);margin:0 0 0.9rem}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:0.6rem}
.foot-col a{font-family:"Sora",sans-serif;font-weight:400;font-size:0.95rem;color:#E5E1F5;text-decoration:none;border-bottom:1px solid transparent}
.foot-col a:hover{border-bottom-color:var(--aqua);color:#fff}
.foot-base{margin-top:2.75rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:0.5rem 2rem;justify-content:space-between;font-family:"Sora",sans-serif;font-size:0.82rem;color:var(--dim)}

/* ---------- scroll reveal ---------- */
.rise{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ============================================================
   HEADER NAV
   ============================================================ */
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:0.35rem 1.5rem}
.site-nav a{font-family:"Sora",sans-serif;font-weight:500;font-size:0.92rem;color:#E5E1F5;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.site-nav a:hover{color:#fff;border-bottom-color:var(--aqua)}
.site-nav .nav-cta{font-weight:600;color:var(--void);background:var(--aqua);border:2px solid var(--aqua);border-radius:2px;padding:0.55rem 1.05rem;border-bottom-color:var(--aqua)}
.site-nav .nav-cta:hover{background:#fff;border-color:#fff;color:var(--void)}
@media(max-width:34rem){
  .site-head{gap:1.1rem}
  .site-nav{width:100%;gap:0.6rem 1.1rem}
}

/* ============================================================
   INNER PAGES
   ============================================================ */
.page-hero{padding-top:clamp(1.5rem,4vw,2.5rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.page-hero h1{font-size:clamp(2rem,1.3rem + 3.2vw,3.4rem);max-width:20ch;margin-bottom:1.1rem;color:#fff}
.page-hero .lede{color:#F0EDFB}
.back-link{display:inline-block;margin-top:2rem;font-family:"Sora",sans-serif;font-weight:600;font-size:0.95rem;color:var(--accent);text-decoration:none}
.back-link:hover{text-decoration:underline}

/* ============================================================
   FORMS
   ============================================================ */
.form{max-width:38rem;margin-top:0.5rem}
.form fieldset{border:0;padding:0;margin:0 0 2.25rem}
.form legend{font-family:"Sora",sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:-0.025em;color:var(--indigo);padding:0;margin-bottom:0.35rem}
.form .legend-note{color:var(--muted);font-size:0.95rem;margin:0 0 1.25rem}
.field{margin-bottom:1.25rem}
.field label{display:block;font-family:"Sora",sans-serif;font-weight:600;font-size:0.95rem;color:var(--indigo);margin-bottom:0.35rem}
.field .opt{font-weight:400;color:var(--muted);font-size:0.85rem}
.field .hint{display:block;font-size:0.88rem;color:var(--muted);margin-top:0.3rem;font-family:"Sora",sans-serif;font-weight:400}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  width:100%;font-family:"Source Serif 4",Georgia,serif;font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid #CBD1E0;border-radius:6px;padding:0.7rem 0.85rem;
  transition:border-color .15s,box-shadow .15s;
}
.field textarea{min-height:6.5rem;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,110,96,.15)}
.field input:invalid:not(:placeholder-shown){border-color:#C1502E}

.choices{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.15rem}
.choices label{
  display:inline-flex;align-items:center;gap:0.45rem;margin:0;cursor:pointer;
  font-family:"Sora",sans-serif;font-weight:500;font-size:0.92rem;color:var(--ink);
  background:#fff;border:1px solid #CBD1E0;border-radius:100px;padding:0.45rem 0.9rem;
}
.choices input{accent-color:var(--accent);margin:0}
.choices label:has(input:checked){border-color:var(--accent);background:#EAF4F2;color:var(--accent)}

.consent{display:flex;gap:0.7rem;align-items:flex-start;font-family:"Sora",sans-serif;font-size:0.92rem;color:var(--muted);line-height:1.5}
.consent input{accent-color:var(--accent);margin-top:0.25rem;flex:0 0 auto}
.form .btn{background:var(--indigo);border-color:var(--indigo);color:#fff;cursor:pointer;font-size:0.98rem}
.form .btn:hover{background:var(--accent);border-color:var(--accent)}
.form-note{font-family:"Sora",sans-serif;font-size:0.88rem;color:var(--muted);margin-top:1rem}

.form-status{display:none;margin-top:1.25rem;padding:1rem 1.15rem;border-radius:8px;font-family:"Sora",sans-serif;font-size:0.95rem}
.form-status.ok{display:block;background:#EAF4F2;border:1px solid var(--accent);color:var(--accent)}
.form-status.err{display:block;background:#FBEDE9;border:1px solid #C1502E;color:#8F3A1D}

/* ============================================================
   BOOKING EMBED
   ============================================================ */
.embed-slot{
  border:1px dashed #C5BFE0;border-radius:12px;background:var(--tint);
  min-height:20rem;margin-top:1.25rem;display:flex;align-items:center;justify-content:center;
  padding:2rem;text-align:center;font-family:"Sora",sans-serif;font-size:0.95rem;color:var(--muted);line-height:1.7;
}

/* ============================================================
   PHILOSOPHY PAGE
   ============================================================ */
.creed{border-top:2px solid var(--indigo);max-width:46rem}
.belief{border-bottom:1px solid var(--line);padding-block:clamp(1.75rem,3.5vw,2.5rem)}
.belief h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);max-width:24ch;margin-bottom:0.75rem}
.belief p{margin:0;color:var(--muted)}
.creed + .actions{margin-top:clamp(2rem,4vw,2.75rem)}