:root{
  --gold:#e1b737;
  --gold-ink:#a8801a;
  --lb:#8fd7f4;
  --mb:#196eaf;
  --db:#135582;
  --ink:#17344a;
  --cream:#fdf9f0;
  --sand:#f7edd9;
  --sky:#e8f5fc;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* The eyebrow / caption role. Was Open Sans Condensed; Nathan dropped it on
     2026-08-13 so the page loads one family instead of two. Montserrat sets
     wider than a condensed face at the same size, so the tracking on .date
     was pulled back to compensate — see .date below. */
  --cond:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:17px;font-weight:500;line-height:1.7;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
/* EWWW wraps every image in a <picture> to serve WebP. A <picture> is inline by
   default, so it silently inserts an inline box between each tile and its
   <img> — and every sizing rule on this page (.short img, .fac-photo img,
   .rphoto img, .sphoto img, all of which set width/height 100%) was written
   assuming the img is a direct child. display:contents removes the wrapper
   from layout entirely, so those rules resolve against the real container
   again, exactly as they do in the local comp where no wrapper exists. */
picture{display:contents}
p{margin:0 0 1.2em}p:last-child{margin-bottom:0}
h1,h2,h3{margin:0;line-height:1.08;color:var(--db)}

/* Balanced line breaks on anything that reads as a heading, so a headline never
   drops its last word onto a line of its own ("DIVE DEEP with / us!" on a
   phone). This restates the site-wide rule in core/bww-base-styles.md: that one
   lives in Kadence's global CSS, which this template deliberately dequeues, so
   the page does not inherit it. The .statement/.subhead/.capline/.pull/.choose
   classes are display-sized <p> elements doing a heading's job, so they are
   included by class. Body copy is left alone. */
h1,h2,h3,.statement,.subhead,.capline,.pull,.choose{text-wrap:balance}

.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(22px,5vw,52px);position:relative;z-index:2}
.narrow{max-width:840px}
section{position:relative;padding:clamp(60px,8.5vw,110px) 0;overflow:hidden}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:58px;
  padding:16px 40px;border-radius:999px;font-weight:700;font-size:1.02rem;
  text-decoration:none;background:var(--gold);color:#0f2c40;
  box-shadow:0 10px 24px rgba(225,183,55,.35);
  transition:transform .16s,box-shadow .16s,background .16s;
}
.btn:hover{background:#ecc44f;transform:translateY(-2px);box-shadow:0 14px 30px rgba(225,183,55,.45)}
.btn-line{
  display:inline-flex;align-items:center;justify-content:center;min-height:58px;
  padding:16px 36px;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;
  color:var(--db);border:2px solid rgba(19,85,130,.4);background:rgba(255,255,255,.6);
  transition:border-color .16s,transform .16s;
}
.btn-line:hover{border-color:var(--db);transform:translateY(-2px)}
.btn-line.on-photo{color:#fff;border-color:rgba(255,255,255,.7);background:rgba(9,32,48,.25)}
.btn-line.on-photo:hover{border-color:#fff}
.btnrow{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}

.date{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.15em;
  font-size:clamp(.85rem,1.6vw,1rem);font-weight:700;color:var(--mb);
}
.date .sep{color:var(--gold);padding:0 10px}

/* ---------- waves ---------- */
/* margin-bottom:-1px pulls the next section up by one pixel so it covers the
   divider's last row. Without it a sub-pixel gap opens between the wave's
   bottom edge and the section below, and the .dv element's own background —
   the colour of the section ABOVE — shows through as a hairline. Very visible
   on a high-DPR phone where the wave meets a dark section. Safe on all eight
   dividers: in every one the svg's fill already equals the following section's
   background, so a 1px overlap is invisible. */
.dv{height:clamp(44px,7vw,92px);line-height:0;margin-bottom:-1px}
.dv svg{width:100%;height:100%;display:block}
.flip{transform:scaleY(-1)}

/* ---------- bubbles ---------- */
.bub{position:absolute;border-radius:50%;pointer-events:none;z-index:1}
.bub.b1{background:radial-gradient(circle at 35% 30%,rgba(143,215,244,.5),rgba(143,215,244,.12))}
.bub.b2{background:radial-gradient(circle at 35% 30%,rgba(225,183,55,.38),rgba(225,183,55,.08))}
.bub.b3{border:2px solid rgba(143,215,244,.45)}

/* ---------- reveal top bar (hidden until the hero scrolls away) ---------- */
.top{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(253,249,240,.92);backdrop-filter:blur(10px);
  transform:translateY(-100%);transition:transform .28s ease;
  box-shadow:0 4px 18px rgba(19,85,130,.10);
}
.top.show{transform:translateY(0)}
.top-in{max-width:1200px;margin:0 auto;padding:8px clamp(18px,4vw,40px);display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,30px)}
.top-in img{width:72px}
.top-in .btn{min-height:42px;padding:8px 24px;font-size:.9rem;box-shadow:0 6px 16px rgba(225,183,55,.3)}

/* ---------- hero ---------- */
.hero{background:var(--cream);padding-top:clamp(26px,3.5vw,52px);padding-bottom:clamp(30px,4.5vw,56px)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.hero .logo{width:clamp(165px,19vw,235px);margin:0 0 clamp(20px,3vw,32px)}
.hero h1{
  font-size:clamp(2.15rem,5.2vw,3.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.03;
  margin:0 0 6px;
}
.hero h1 .ren{color:var(--mb)}
.squig{width:clamp(130px,16vw,200px);margin:10px 0 18px;display:block}
.hero .sub{
  font-size:clamp(.98rem,1.6vw,1.16rem);font-weight:500;color:#3c5a70;max-width:46ch;margin:0 0 18px;
}
.hero .date{margin-bottom:24px;display:block}
.hero .btnrow{justify-content:flex-start}
.hero-octo-col{display:none}

/* mobile + tablet: hero centres around the octopus */
@media(max-width:899px){
  .hero{text-align:center;padding-top:12px}
  .hero .logo{margin-left:auto;margin-right:auto;margin-bottom:8px;width:clamp(128px,34vw,165px)}
  .hero h1{margin-bottom:4px}
  .hero .sub{margin-left:auto;margin-right:auto;max-width:38ch;margin-bottom:12px}
  .hero .date{margin-bottom:18px}
  .hero .squig{display:none}
  .hero .btnrow{justify-content:center;gap:12px}
  .hero-octo-m{
    position:relative;width:clamp(150px,42vw,200px);margin:0 auto 4px;
    filter:drop-shadow(0 16px 34px rgba(225,183,55,.4));
  }
  .hero-octo-m::before{
    content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
    width:150%;height:150%;border-radius:50%;z-index:-1;
    background:radial-gradient(circle,rgba(225,183,55,.22),rgba(225,183,55,0) 68%);
  }
}
@media(min-width:900px){
  .hero-grid{grid-template-columns:1.28fr .72fr;gap:40px}
  .hero-octo-col{display:block}
  .hero-octo-col img{width:min(330px,94%);margin:0 auto;filter:drop-shadow(0 18px 44px rgba(225,183,55,.35))}
  .hero-octo-m{display:none}
  .hero .btnrow{flex-wrap:nowrap}
  .hero .btn,.hero .btn-line{white-space:nowrap}
}
@media(max-width:619px){
  .btnrow{flex-direction:column;align-items:stretch}
  .btnrow .btn,.btnrow .btn-line{width:100%}
  /* "Book a discovery call to learn more" measures 294px at 16px/700 and was
     wrapping to two lines. Every pill is full width at this breakpoint, so the
     side padding is not doing visual work — only constraining the text box.
     Trimming it (never the font size) holds one line down to 360px, which
     covers the common Android width as well as every iPhone. Below ~345px it
     wraps again, and wrapping is the correct fallback there. */
  .btn-line{padding-left:8px;padding-right:8px}
}

.hero-photo{position:relative;background:var(--cream)}
.hero-photo img{width:100%;height:clamp(430px,60vw,780px);object-fit:cover;object-position:50% 52%}
.hero-photo::before{
  content:"";position:absolute;top:0;left:0;right:0;height:30%;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,#fdf9f0 0%,rgba(253,249,240,.55) 45%,rgba(253,249,240,0) 100%);
}
.hero-photo svg{position:absolute;left:0;width:100%;height:clamp(44px,7vw,92px);z-index:2}
.hero-photo .w-bot{bottom:-1px;transform:scaleY(-1)}

/* ---------- statements & lists ---------- */
.statement{
  font-size:clamp(1.55rem,3.8vw,2.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;
  color:var(--db);max-width:26ch;margin:0 auto clamp(30px,4vw,44px);text-align:center;
}
.statement .soft{font-weight:500}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:0 0 clamp(36px,5vw,54px)}
.chip{
  display:inline-flex;align-items:center;gap:12px;background:#fff;border-radius:999px;
  padding:15px 26px;font-weight:600;color:var(--db);font-size:1.02rem;
  box-shadow:0 8px 22px rgba(19,85,130,.10);
}
.chip::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--gold);flex:none}
.chip:nth-child(even)::before{background:var(--lb)}

.blist{list-style:none;margin:0;padding:0}
.blist li{position:relative;padding:0 0 0 32px;margin-bottom:15px;line-height:1.55}
.blist li::before{
  content:"";position:absolute;left:2px;top:.5em;width:12px;height:12px;border-radius:50%;
  background:var(--gold);
}
.blist li:nth-child(even)::before{background:var(--lb)}
.blist.minus li::before{background:#c9d8e2;width:11px;height:11px}
/* Inline text link inside body copy. The page had no anchor style at all until
   the Camp Bay Lodge link went in (2026-08-17), so a bare <a> fell back to
   browser-default blue-and-underlined against a brand palette. Underline sits
   below the baseline rather than through the descenders, and the hover moves to
   the gold ink so it reads as the same family as the buttons. */
.tlink{
  color:var(--mb);font-weight:600;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(25,110,175,.45);transition:color .18s,text-decoration-color .18s;
}
.tlink:hover,.tlink:focus-visible{color:var(--gold-ink);text-decoration-color:var(--gold)}
/* .tlink on its own line under a fact, e.g. "Visit the lodge" under Location.
   The trailing ↗ is the conventional off-site marker and is decorative only —
   the aria-label on the anchor carries "opens in a new tab" for screen readers.
   The underline lives on the inner <span>, not on the anchor: text-decoration
   propagates to ::after and cannot be cancelled there, so underlining the anchor
   puts a stray dash under the arrow. */
/* padding, not margin, for the gap under the fact text: it buys a ~40px tap
   target on a phone while the underline still sits 12px below the line above. */
.flink{
  display:inline-flex;align-items:center;gap:6px;font-size:.92rem;text-decoration:none;
  margin-top:4px;padding:8px 0;
}
.flink>span{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(25,110,175,.45);transition:text-decoration-color .18s;
}
.flink:hover>span,.flink:focus-visible>span{text-decoration-color:var(--gold)}
.flink::after{content:"\2197";font-size:1.05em;line-height:1}
@media(min-width:620px){
  .blist.twocol{columns:2;column-gap:34px}
  .blist.twocol li{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
}
.leadin{font-weight:700;color:var(--db);font-size:1.08rem;margin:0 0 20px}
.capline{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.04em;font-weight:700;
  font-size:clamp(1.3rem,3.1vw,2rem);line-height:1.22;color:var(--gold-ink);margin-top:26px;
}
.cols{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,60px)}
@media(min-width:860px){.cols{grid-template-columns:1fr 1fr}
  .cols.cols-inc{grid-template-columns:1.42fr 1fr}}

h2.head{font-size:clamp(1.9rem,4.8vw,3.2rem);font-weight:800;letter-spacing:-.025em;margin:0 0 clamp(28px,4vw,42px)}
h2.head.mid{text-align:center}
.subhead{
  text-align:center;font-size:clamp(1.35rem,3.2vw,2.05rem);font-weight:700;
  letter-spacing:-.02em;line-height:1.2;color:var(--db);
  margin:calc(-1 * clamp(12px,2vw,20px)) auto clamp(32px,4.5vw,50px);max-width:24ch;
}

/* ---------- quote cards ---------- */
.qcard{
  background:var(--mb);color:#fff;border-radius:34px;padding:clamp(30px,5vw,54px) clamp(26px,5vw,60px);
  box-shadow:0 22px 50px rgba(19,85,130,.28);position:relative;max-width:900px;margin:0 auto;
}
.qcard .qm{font-family:Georgia,serif;font-size:4.6rem;line-height:.6;color:var(--gold);display:block;margin-bottom:20px}
.qcard blockquote{margin:0;font-style:italic;font-weight:500;font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.7}
.qcard cite{display:block;margin-top:20px;font-style:normal;font-family:var(--cond);text-transform:uppercase;letter-spacing:.2em;font-size:.82rem;color:var(--gold)}
.qcard.white{background:#fff;color:var(--ink)}
.qcard.white cite{color:var(--gold-ink)}

.duoq{display:grid;grid-template-columns:1fr;gap:26px;max-width:960px;margin:clamp(40px,6vw,64px) auto 0}
@media(min-width:800px){.duoq{grid-template-columns:1fr 1fr}}
.duoq .qcard{margin:0;border-radius:28px;padding:30px 32px}
.duoq .qcard:first-child{transform:rotate(-1.2deg)}
.duoq .qcard:last-child{transform:rotate(1.1deg)}

/* ---------- rounded photo ---------- */
.rphoto{border-radius:34px;overflow:hidden;box-shadow:0 24px 54px rgba(19,85,130,.22);position:relative}
.rphoto img{width:100%;height:100%;object-fit:cover}
.rphoto .cap{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3vw,34px);
  background:linear-gradient(to top,rgba(9,32,48,.78),rgba(9,32,48,.25) 60%,transparent);
  color:#fff;font-family:var(--cond);text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(.95rem,1.7vw,1.22rem);font-weight:700;text-align:center;line-height:1.3;
}

/* ---------- deep band ---------- */
.deep{background:linear-gradient(to bottom,#0f4a72 0%,#0a3355 55%,#072940 100%);color:#cfe6f6}
/* The bubbles need side margin to live in. Above 900px the wrap is narrower than
   the section and they sit beside the copy; below it the wrap runs edge to edge
   and every bubble lands on text. They are decorative, so they go. */
@media(max-width:899px){.deep .bub{display:none}}
.deep h2.head{color:#fff}
.deep .pull{
  font-size:clamp(1.4rem,3.4vw,2.3rem);font-weight:700;letter-spacing:-.02em;line-height:1.25;
  color:var(--lb);max-width:27ch;margin:0 0 30px;
}
.deep p{color:#bcd9ec}
.deep .qcard{background:rgba(255,255,255,.08);box-shadow:none;border:1.5px solid rgba(143,215,244,.25)}

/* "What makes Dive Deep so unique?" reads as a descent rather than as one tall
   column beside a short one. Three beats: the surface (subhead + lede, centred),
   entering the water (the sensory copy paired with the underwater photo), and
   deeper (a narrow centred measure carrying the embodiment argument). The copy
   roughly doubled on 2026-08-13 and the old two-column balance could not hold
   it — the text column ran to twice the height of the image column beside it. */
.deep-sub{
  text-align:center;font-size:clamp(1.2rem,2.8vw,1.7rem);font-weight:700;
  letter-spacing:-.01em;color:var(--lb);
  margin:calc(-1 * clamp(14px,2.2vw,24px)) auto clamp(22px,3vw,30px);
}
.deep-lede{
  text-align:center;max-width:52ch;margin:0 auto clamp(40px,5.5vw,64px);
  font-size:clamp(1.02rem,2.1vw,1.16rem);text-wrap:balance;
}
/* Same rule the facilitator bios follow: centred running text is hard to read,
   and on a phone this lede runs to six lines. Centre it where it is short. */
@media(max-width:619px){.deep-lede{text-align:left}}
.deep-lede strong{color:#fff;font-weight:700}
.deep .pull.mid{max-width:28ch;margin-left:auto;margin-right:auto;text-align:center}
/* In the two-column beat the pull is bound by the column, not by max-width, so
   the size is what controls the rag. Her rewrite took this sentence from 8 words
   to 15; at the old 2.3rem cap it set in five uneven lines inside a 491px column.
   Measured at 1440: 1.85rem gives three. The centred .mid pull keeps the larger
   size because it spans the full wrap. */
.deep .cols .pull{font-size:clamp(1.24rem,2.6vw,1.85rem);max-width:none}
/* Beat 3 mirrors beat 2: photo left, copy right, so the two read as a
   checkerboard on desktop. Below 860px .cols collapses to one column and the
   copy is ordered first, matching beat 2, so the mobile reading order stays
   statement-then-photo rather than flipping every other block. Both pulls now
   sit inside .cols, which is what makes them the same size as each other —
   Nathan asked for that explicitly on 2026-08-17. Do not give one .mid again. */
@media(max-width:859px){.cols.cols-flip>.sphoto{order:2}}

.deep-narrow{max-width:60ch;margin:clamp(44px,6vw,72px) auto 0}
.embody{
  font-size:clamp(1.18rem,2.6vw,1.55rem);font-weight:600;color:#fff;
  margin:clamp(6px,1.4vw,12px) 0 clamp(22px,3vw,30px);
}
.embody strong{color:var(--gold);font-weight:800}
.deep-close{
  text-align:center;max-width:42ch;margin:clamp(44px,6vw,70px) auto 0;
  font-size:clamp(1.22rem,2.9vw,1.75rem);font-weight:700;line-height:1.3;
  letter-spacing:-.02em;color:#fff;text-wrap:balance;
}
/* The mascot now sits alone at the centre of the third beat, at every width, so
   the old two-element breakpoint swap (.octo-stage / .octo-inline) is retired.
   Keep this class in the two animation selector lists below. */
.octo-solo{
  display:block;width:min(200px,50%);margin:clamp(26px,3.6vw,38px) auto;
  filter:drop-shadow(0 16px 44px rgba(225,183,55,.38));
}

/* ---------- the octopus drifts ---------- */
/* Nathan, 2026-08-13: "very subtly kind of floats up and down", then, having
   seen 10px over 6s live: "it's moving too slowly, you can barely see it...
   these are people who are going to be scrolling past it, so they need to be
   able to notice the movement. It just doesn't need to be in your face."

   The number that matters is velocity, not amplitude — a scrolling eye catches
   motion by speed. 10px/6s was 1.7px per second, below the threshold for
   peripheral vision. This is 18px over 2.8s, 6.4px per second, chosen by Nathan
   from a side-by-side of four speeds. If it is ever retuned, judge it the same
   way: at the size it appears in the hero, looking slightly away from it.

   Four selectors because the mascot appears twice (the hero and "What makes
   Dive Deep so unique?") and each location has a separate element per
   breakpoint. Miss one and the octopus animates on desktop but sits still on a
   phone.

   Only `transform` is animated, so it composites on the GPU and never triggers
   layout — which matters on a page carrying two dozen images and a long form. */
@keyframes dd-float{
  from{transform:translateY(0)}
  to{transform:translateY(-18px)}
}
.hero-octo-col img,
.hero-octo-m,
.octo-solo{
  animation:dd-float 2.8s ease-in-out infinite alternate;
}
/* A permanently looping animation is precisely what this setting exists for. */
@media(prefers-reduced-motion:reduce){
  .hero-octo-col img,
  .hero-octo-m,
  .octo-solo{animation:none}
}

/* ---------- panels ---------- */
.panel{
  background:#fff;border-radius:30px;padding:clamp(26px,4vw,40px);
  box-shadow:0 14px 36px rgba(19,85,130,.10);
}
.panel h3{font-size:1.25rem;font-weight:700;margin:0 0 20px}
.panel.tint{background:#dcedf8;box-shadow:none}

/* ---------- accordion ---------- */
details{
  background:#fff;border-radius:22px;margin-bottom:14px;overflow:hidden;
  box-shadow:0 10px 26px rgba(19,85,130,.09);
}
summary{
  list-style:none;cursor:pointer;padding:22px 66px 22px 28px;position:relative;
  font-weight:700;font-size:1.05rem;color:var(--db);line-height:1.4;min-height:56px;
  display:flex;align-items:center;
}
summary::-webkit-details-marker{display:none}
summary:hover{background:#f6fbfe}
summary:focus-visible{outline:3px solid var(--mb);outline-offset:-3px}
summary::after{
  content:"";position:absolute;right:22px;top:50%;margin-top:-16px;width:32px;height:32px;
  border-radius:50%;background:var(--gold);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M11 14 l5 5 5-5" fill="none" stroke="%230f2c40" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  transition:transform .2s;
}
details[open] summary::after{transform:rotate(180deg)}
.dbody{padding:0 28px;overflow:hidden;transition:height .32s cubic-bezier(.4,0,.2,1)}
.dbody>*:first-child{margin-top:2px}
.dbody::after{content:"";display:block;height:26px}
@media(prefers-reduced-motion:reduce){.dbody{transition:none}}

/* ---------- videos ---------- */
.shorts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(min-width:700px){.shorts{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.shorts{grid-template-columns:repeat(5,1fr)}}
.short{
  position:relative;aspect-ratio:9/16;border-radius:26px;overflow:hidden;text-decoration:none;
  background:var(--db);display:block;
  box-shadow:0 12px 30px rgba(19,85,130,.16);
  transition:transform .16s,box-shadow .16s;
}
.short:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(19,85,130,.26)}
.short:focus-visible{outline:3px solid var(--mb);outline-offset:3px}
.short img{width:100%;height:100%;object-fit:cover}
/* Sits over the poster so the gold mark stays legible whatever the frame shows. */
.short::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(9,32,48,.45),rgba(9,32,48,0) 45%);
}
.short .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:60px;height:60px;border-radius:50%;background:var(--gold);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(9,32,48,.45);
  transition:transform .16s;
}
.short:hover .play{transform:translate(-50%,-50%) scale(1.08)}
.short .play svg{margin-left:4px}

/* ---------- video lightbox ---------- */
/* Native <dialog>: Esc, focus handling and the top layer come free. The iframe
   is injected on open and removed on close, so YouTube loads nothing until
   someone actually clicks, and closing genuinely stops playback rather than
   hiding a still-playing frame. */
.dd-lb{
  border:0;padding:0;background:transparent;overflow:visible;
  max-width:min(430px,92vw);width:100%;
}
.dd-lb::backdrop{background:rgba(4,20,31,.86);backdrop-filter:blur(4px)}
.dd-lb-frame{
  position:relative;aspect-ratio:9/16;max-height:82vh;margin:0 auto;
  border-radius:26px;overflow:hidden;background:#04141f;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.dd-lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dd-lb-close{
  position:absolute;top:-54px;right:0;width:44px;height:44px;border:0;border-radius:50%;
  background:var(--gold);color:#0f2c40;font-size:1.5rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
}
.dd-lb-close:hover{background:#ecc44f}
.dd-lb-close:focus-visible{outline:3px solid #fff;outline-offset:2px}
.dd-lb-inner{position:relative;max-height:82vh}
@media(max-width:520px){.dd-lb-close{top:-50px}}

/* ---------- logistics ---------- */
.facts{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:700px){.facts{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.facts{grid-template-columns:repeat(3,1fr)}}
.fact{background:#fff;border-radius:26px;padding:26px 28px;box-shadow:0 12px 30px rgba(19,85,130,.09)}
.facts.pair{margin-top:18px}
@media(min-width:700px){.facts.pair{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.facts.pair{grid-template-columns:1fr 1fr}}
.fact dt{font-family:var(--cond);text-transform:uppercase;letter-spacing:.18em;font-size:.85rem;font-weight:700;color:var(--gold-ink);margin-bottom:10px}
.fact dd{margin:0;line-height:1.65}

/* ---------- facilitators ---------- */
.fac{display:grid;grid-template-columns:1fr;gap:clamp(22px,3.4vw,38px);align-items:start}
@media(min-width:880px){
  /* Portrait photo left, both bios stacked right (Nathan, 2026-08-13). The
     photo column is the narrower one so a 3:4 portrait does not tower over two
     stacked cards. */
  .fac{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .fac-photo{align-self:stretch}
  .fac-photo img{height:100%}
}
.fac-photo{border-radius:30px;overflow:hidden;box-shadow:0 20px 46px rgba(19,85,130,.2)}
/* object-position sits above centre so the faces stay in frame when the column
   stretches taller than the photo's own 3:4. */
.fac-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 32%}
.fac-bios{display:grid;gap:clamp(16px,2.4vw,24px)}
.fac-bios h3{font-size:clamp(1.2rem,2.4vw,1.45rem);margin:0 0 12px}
/* Names and bios stay left-aligned at every width — see design/README.md. */

/* ---------- section photo ---------- */
.sphoto{border-radius:34px;overflow:hidden;box-shadow:0 20px 46px rgba(19,85,130,.18);position:relative}
.sphoto img{width:100%;object-fit:cover}
.sphoto.wide img{aspect-ratio:16/9}
.sphoto.tall img{aspect-ratio:4/5}
.sphoto.square img{aspect-ratio:1/1;object-position:50% 42%}
/* The "space to..." descent: its own centred moment under the photo pair.
   Deliberately full width and centred rather than squeezed into the half
   column beside the square photo, where three one-line fragments read as
   ragged text rather than as a rhythm. */
.ladder{text-align:center;max-width:34ch;margin:clamp(44px,6vw,72px) auto 0}
.ladder .subhead{max-width:none;margin:0 0 clamp(26px,3.4vw,36px)}
.ladder .step{
  font-size:clamp(1.06rem,2.4vw,1.32rem);font-weight:600;color:var(--db);
  line-height:1.4;margin:0 0 14px;
}
.ladder .resolve{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.04em;font-weight:700;
  font-size:clamp(1.12rem,2.7vw,1.6rem);line-height:1.25;color:var(--gold-ink);
  margin:clamp(28px,3.6vw,38px) 0 0;
}
.photo-pair{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,46px);align-items:center}
@media(max-width:879px){.photo-pair>.sphoto{order:-1}}
@media(min-width:880px){.photo-pair{grid-template-columns:1fr 1fr}}

/* ---------- close: the sunset sinks into the water ---------- */
/* No buttons here and no wave at the foot: the photo's overlay resolves to the
   exact colour .dd-register starts on, so the two read as one continuous scene. */
.close{position:relative;padding:0;background:var(--cream)}
.close .ph{position:relative}
.close .ph img{width:100%;height:clamp(520px,68vw,740px);object-fit:cover;object-position:50% 40%}
.close .ph::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom,var(--sky) 0%,rgba(232,245,252,.5) 9%,rgba(232,245,252,0) 22%),
    linear-gradient(to bottom,rgba(13,61,94,.28) 0%,rgba(13,61,94,.34) 38%,rgba(10,50,78,.84) 74%,#072940 92%,#072940 100%);
}
.close .ph img{filter:saturate(.78)}
.close .ph svg{position:absolute;top:-1px;left:0;width:100%;height:clamp(44px,7vw,92px);z-index:2}
.close-in{position:absolute;left:0;right:0;bottom:0;z-index:3;text-align:center;padding:0 22px clamp(52px,7.5vw,92px)}
.close-in h2{color:#fff;font-size:clamp(2.3rem,6.6vw,4.6rem);font-weight:800;letter-spacing:-.03em;margin:0 0 16px;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.close-in .date{color:#fff;display:block;margin-bottom:18px}
.close-in .date .sep{color:var(--gold)}
/* Reads straight into the button below it: "Register below or [Book a discovery
   call to learn more]". It is a sentence fragment on purpose, so it must sit
   close to the button and never be re-worded into a standalone line. */
.close-in .choose{
  color:#fff;font-weight:600;font-size:clamp(1rem,2.1vw,1.18rem);line-height:1.45;
  margin:0 auto 14px;text-shadow:0 2px 14px rgba(0,0,0,.5);
}

/* ---------- password gate ---------- */
.dd-gate{
  min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 24px;background:var(--cream);
}
.dd-gate-logo{width:min(220px,60%);margin:0 auto 28px}
.dd-gate h1{font-size:clamp(1.4rem,3.4vw,2rem);font-weight:700;color:var(--db);margin:0 0 22px}
.dd-gate form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}
.dd-gate label{display:flex;gap:10px;align-items:center;font-weight:600;color:var(--db)}
.dd-gate input[type=password]{
  min-height:52px;border-radius:999px;border:2px solid rgba(19,85,130,.35);
  padding:10px 22px;font-family:var(--sans);font-size:1rem;
}
.dd-gate input[type=submit]{
  min-height:52px;padding:12px 34px;border:0;border-radius:999px;cursor:pointer;
  background:var(--gold);color:#0f2c40;font-family:var(--sans);font-weight:700;font-size:1rem;
}

/* ---------- registration: the form sits in the deep water ---------- */
/* The gradient opens on #072940, the colour the sunset photo above closes on.
   The card is cream, so Gravity Forms renders on exactly the ground it renders
   on today — the dark is mood, the card is legibility. Form 14 is long and
   mixed (radios, selects, product fields, a Stripe card field); restyling all
   of that for a dark ground would break on the next GF update. */
.dd-register{
  background:linear-gradient(to bottom,#072940 0%,#061e30 46%,#04141f 100%);
  padding:clamp(44px,6vw,74px) 0 clamp(60px,8.5vw,104px);
  overflow:hidden;
}
.dd-register .burst{width:clamp(64px,8vw,96px);margin:0 auto clamp(14px,2vw,22px);display:block;opacity:.92}
.dd-register h2.head{color:#fff;margin:0 0 clamp(26px,3.6vw,40px)}
.formcard{
  background:var(--cream);border-radius:clamp(26px,3.4vw,42px);
  padding:clamp(24px,4vw,50px) clamp(20px,4vw,52px);
  box-shadow:0 30px 72px rgba(0,0,0,.45);
}
.dd-register .gform_wrapper{margin-top:0}
.dd-register .gform_wrapper .gform_footer{display:flex;justify-content:center}
.dd-register .gform_wrapper .gform_button{
  min-height:58px;padding:16px 40px;border-radius:999px;border:0;cursor:pointer;
  background:var(--gold);color:#0f2c40;font-family:var(--sans);font-weight:700;font-size:1.02rem;
  box-shadow:0 10px 24px rgba(225,183,55,.35);
}
.dd-register .gform_wrapper .gform_button:hover{background:#ecc44f}