/* Layout: full-bleed parallax painting as the opening, then flat painted colour blocks
   lifted from the artwork, one idea per section, Apple section formula, floating glass nav. */
:root{
  --chalk:#ebe6da; --chalk-2:#e0d9c9; --slate:#2b363a; --slate-2:#1f282b;
  --teal:#6f949a; --teal-pale:#bfd1d3; --moss:#6b7256; --earth:#5a4634;
  --amber:#c98a3e; --amber-hover:#d4984f; --ochre:#864a26;
  --ink:#22292c; --ink-2:rgba(34,41,44,.78); --ink-3:rgba(34,41,44,.78);
  --on-dark:#ebe6da; --on-dark-2:rgba(235,230,218,.88); --hair-dark:rgba(235,230,218,.12); --hair-light:rgba(34,41,44,.14);
  --display:"Young Serif",Georgia,"Iowan Old Style",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.28,.11,.32,1);
  --gutter:clamp(16px,4vw,40px);
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--chalk);color:var(--ink);font-family:var(--sans);font-feature-settings:"cv05","cv11";-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:.015em}
p{margin:0}

/* ---------- Nav (floating glass island) ---------- */
.nav{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 16px;border-radius:999px;
  background:rgba(235,230,218,.62);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 8px 32px rgba(31,40,43,.10),inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 .5px rgba(255,255,255,.25);
  max-width:calc(100vw - 32px)}
.nav .brand{font-family:var(--display);font-size:17px;text-decoration:none;padding-right:10px;white-space:nowrap}
.nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.nav ul a{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:500;text-decoration:none;color:var(--ink-2);transition:background .2s var(--ease),color .2s var(--ease)}
.nav ul a:hover{background:rgba(34,41,44,.06);color:var(--ink)}
.nav .cta{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:var(--slate);color:var(--chalk);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .2s var(--ease),transform .2s var(--ease)}
.nav .cta:hover{background:var(--slate-2)}
.nav .cta:active{transform:scale(.97);opacity:.85}
@media (max-width:760px){ .nav ul{display:none} .nav{padding-left:14px} }

/* ---------- Hero: five registered plates, scroll-driven parallax ---------- */
.hero{position:relative;height:clamp(560px,100svh,1100px);overflow:hidden;background:#aeb9bb}
.hero img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;will-change:transform;display:block;user-select:none;pointer-events:none}
.hero .copy{position:absolute;left:0;right:0;top:clamp(118px,15vh,188px);display:grid;justify-items:center;gap:12px;padding-inline:var(--gutter);text-align:center;will-change:transform,opacity;isolation:isolate}
.hero .copy.is-pinned{position:fixed;z-index:4}
.hero .copy::before{content:"";position:absolute;z-index:-1;left:50%;top:46%;width:min(760px,94vw);height:160%;transform:translate(-50%,-46%);background:radial-gradient(ellipse at center,rgba(235,230,218,.78) 0%,rgba(235,230,218,.34) 46%,rgba(235,230,218,0) 72%);pointer-events:none}
/* Logo slot: swap the wordmark text for an <img> of the logo. Keep it inside this box so it stays in the pale sky. */
.logo-slot{display:grid;place-items:center;width:min(640px,88vw);min-height:clamp(56px,9vw,120px)}
.logo-slot .wordmark{font-family:var(--display);font-size:clamp(44px,6.4vw,84px);line-height:1.05;letter-spacing:.02em;color:var(--slate);text-shadow:0 1px 0 rgba(255,255,255,.85),0 0 22px rgba(235,230,218,.95),0 2px 16px rgba(43,54,58,.22)}
.hero h1{font-family:var(--sans);font-weight:600;font-size:clamp(18px,2.2vw,26px);letter-spacing:.01em;line-height:1.35;color:var(--slate);max-width:34ch;text-shadow:0 1px 0 rgba(255,255,255,.8),0 0 16px rgba(235,230,218,.9)}
.hero .sub{font-size:clamp(15px,1.35vw,18px);line-height:1.5;color:var(--slate);max-width:46ch;text-wrap:balance;text-shadow:0 1px 0 rgba(255,255,255,.75),0 0 14px rgba(235,230,218,.85)}
.hero .btn{margin-top:6px}
.hero .fade{position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(to bottom,rgba(235,230,218,0),var(--chalk));pointer-events:none}
@media (max-width:760px){ .hero img{object-position:42% 62%} .hero .copy{top:max(132px,18vh)} }

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:999px;background:var(--amber);color:var(--ink);font-weight:600;font-size:16px;text-decoration:none;border:0;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease),opacity .2s var(--ease)}
.btn:hover{background:var(--amber-hover)}
.btn:active{transform:scale(.97);opacity:.85}
.btn:focus-visible,.nav a:focus-visible,.link:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.link{font-weight:500;text-decoration:none;color:var(--ochre)}
.on-dark .link,.on-moss .link,.on-earth .link{color:var(--teal-pale)}
.link::after{content:" \203A";}

/* ---------- Sections ---------- */
.section{padding-block:clamp(72px,11vw,150px);padding-inline:var(--gutter)}
.wrap{max-width:1024px;margin-inline:auto}
.center{text-align:center}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ochre)}
.on-dark .eyebrow,.on-moss .eyebrow,.on-earth .eyebrow{color:var(--teal-pale)}
.h2{font-size:clamp(34px,5vw,60px);line-height:1.2;max-width:24ch;margin-inline:auto}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.45;color:var(--ink-2);max-width:62ch;margin-inline:auto}
.on-dark .lead,.on-moss .lead,.on-earth .lead{color:var(--on-dark-2)}
.stack{display:grid;gap:22px;justify-items:center}
.stack > .btn{margin-top:8px}

.on-dark{background:var(--slate);color:var(--on-dark)}
.on-slate-2{background:var(--slate-2);color:var(--on-dark)}
.on-moss{background:var(--moss);color:#fff}
.on-earth{background:var(--earth);color:var(--on-dark)}
.on-chalk-2{background:var(--chalk-2)}

/* Statement section */
.statement{font-family:var(--display);font-size:clamp(26px,3.6vw,44px);line-height:1.32;letter-spacing:.015em;max-width:30ch;margin-inline:auto;text-wrap:balance}

/* Three fragments */
.fragments{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;text-align:left}
.fragments div{padding-top:18px;border-top:1px solid var(--hair-dark);font-size:17px;line-height:1.4}
.fragments strong{display:block;font-family:var(--display);font-weight:400;font-size:22px;margin-bottom:6px}
@media (max-width:720px){ .fragments{grid-template-columns:1fr;gap:16px} }
.pull{font-family:var(--display);font-size:clamp(22px,2.6vw,32px);margin-top:48px;color:var(--teal-pale)}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:48px;text-align:left}
.card{background:rgba(255,255,255,.55);border-radius:22px;padding:28px;display:grid;gap:12px;align-content:start;min-width:0}
.card svg{width:28px;height:28px;stroke:var(--ochre);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:22px;line-height:1.2}
.card p{font-size:16px;color:var(--ink-2);line-height:1.45}
.card.wide{grid-column:span 6}
.card.half{grid-column:span 3}
.card.third{grid-column:span 2}
@media (max-width:900px){ .card.third{grid-column:span 3} }
@media (max-width:620px){ .card.half,.card.third{grid-column:span 6} .card{padding:22px} }

/* Adventure chips */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.chips span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--hair-dark);font-size:15px;font-weight:500}

/* Community examples */
.examples{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.examples p{padding:22px;border-radius:18px;background:rgba(0,0,0,.14);font-family:var(--display);font-size:20px;line-height:1.3}
@media (max-width:720px){ .examples{grid-template-columns:1fr} }

/* Contact */
.contact{display:grid;gap:10px;justify-items:center;margin-top:28px;font-size:16px;color:var(--ink-2)}
.contact code{font-family:var(--sans);font-size:17px;color:var(--ink);background:rgba(34,41,44,.06);padding:6px 12px;border-radius:8px;user-select:all}

/* Footer */
footer{background:var(--slate-2);color:var(--on-dark-2);padding-block:36px calc(36px + env(safe-area-inset-bottom,0px));padding-inline:var(--gutter);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
footer .brand{font-family:var(--display);font-size:17px;color:var(--on-dark)}
footer nav{display:flex;flex-wrap:wrap;gap:20px}
footer a{text-decoration:none}
footer a:hover{color:var(--on-dark)}

/* Reveal */
[data-reveal]{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal]:not(.in){opacity:0;transform:translateY(22px)}
@media (prefers-reduced-motion:reduce){ .js [data-reveal]:not(.in){opacity:1;transform:none} [data-reveal]{transition:none} }

/* Placeholder image cards: swap each for a real <img> or <video> at the stated ratio */
.ph{position:relative;width:100%;max-width:100%;border-radius:16px;overflow:hidden;display:grid;place-items:center;text-align:center;padding:16px;
  background:repeating-linear-gradient(135deg,rgba(34,41,44,.045) 0 12px,transparent 12px 24px),rgba(34,41,44,.06);
  border:1px dashed rgba(34,41,44,.25);color:var(--ink-3);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.5}
.on-dark .ph,.on-moss .ph,.on-earth .ph{background:repeating-linear-gradient(135deg,rgba(235,230,218,.05) 0 12px,transparent 12px 24px),rgba(235,230,218,.07);border-color:rgba(235,230,218,.28);color:rgba(235,230,218,.92)}
.ph svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px;opacity:.8}
.ph span{display:block;max-width:26ch}
.ph small{display:block;font-weight:500;letter-spacing:.04em;text-transform:none;opacity:1;margin-top:2px}
.r219{aspect-ratio:21/9}.r169{aspect-ratio:16/9}.r43{aspect-ratio:4/3}.r34{aspect-ratio:3/4}.r11{aspect-ratio:1/1}
.showreel{margin-top:16px;max-width:860px;width:100%}
.fragments .ph{margin-bottom:16px;border-radius:14px}
.card .ph{border-radius:14px;margin-bottom:4px}
/* Adventure rail: edge-bleeding, snap scrolling */
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--gutter) 20px;margin:32px calc(-1 * var(--gutter)) 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail article{flex:0 0 clamp(220px,26vw,300px);scroll-snap-align:center;display:grid;gap:12px;text-align:left}
.rail h3{font-size:20px;line-height:1.2}
.rail p{font-size:15px;color:var(--on-dark-2);line-height:1.4}
.examples article{display:grid;gap:12px}
.examples article p{margin:0}

/* Contrast: moss cannot carry chalk text at AA, so this section uses white.
   Button labels use ink so the amber fill can stay. */
.on-moss .lead{color:rgba(255,255,255,.96)}
.on-moss .eyebrow,.on-moss .link{color:#fff}
.on-moss .ph{color:rgba(255,255,255,.96)}
.after-fragments{margin-top:40px}
.stretch{justify-items:stretch;text-align:center}
.lead-form{position:relative;display:grid;gap:14px;width:min(520px,100%);margin-inline:auto;text-align:left}
.lead-form .fields{display:grid;gap:6px}
.lead-form label{font-size:14px;font-weight:600;color:var(--ink);margin-top:10px}
.lead-form .fields > label:first-child{margin-top:0}
.lead-form input,.lead-form select,.lead-form textarea{font:inherit;font-size:16px;font-weight:400;color:var(--ink);background:#fff;border:1px solid rgba(34,41,44,.22);border-radius:12px;padding:12px 14px;width:100%;max-width:100%}
.lead-form textarea{min-height:140px;resize:vertical}
.lead-form input:focus-visible,.lead-form select:focus-visible,.lead-form textarea:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.lead-form .cf-turnstile{margin-top:8px}
.lead-form .btn{justify-self:start;margin-top:8px}
button.btn{font-family:inherit}
.lead-form .note{font-size:15px;line-height:1.45;color:var(--ochre);margin:0}
.lead-form .note:empty{display:none}
.lead-form .thanks{font-family:var(--display);font-size:clamp(22px,2.6vw,32px);line-height:1.25;margin:0}
.lead-form.is-sent .fields{display:none}
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}