/* Fonts hosted with the site so they always load */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/jost-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/jost-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/jost-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); }

/* Gladwater Diving: Tailwind, Fathom, Windsock, white */
:root {
  --fathom: #044251;
  --tailwind: #21A5A5;
  --windsock: #F05523;
  --white: #ffffff;
  --shallows: #E4F4F4; /* light tint of Tailwind for the upper water */
  --ink: #04323d;
  --head: "Jost", "Futura", "Century Gothic", sans-serif;
  --body: "Bricolage Grotesque", system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

h1, h2, h3 {
  font-family: var(--head);
  font-weight: 700;
  text-transform: uppercase; /* Futura-style headlines are always all caps */
  letter-spacing: 0.015em;
  line-height: 1.02;
  margin: 0;
}
h1 { font-size: clamp(2.8rem, 8vw, 6.4rem); }
h2 { font-size: clamp(2rem, 5vw, 3.6rem); }
h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
p { margin: 0 0 1em; max-width: 62ch; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--windsock); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: clamp(64px, 10vw, 128px) 0; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--white);
  backdrop-filter: blur(6px);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 14px; padding-bottom: 14px;
}
.brand { text-decoration: none; font-family: var(--head); font-weight: 700; text-transform: uppercase; line-height: 1; }
.brand b { display: block; font-size: 1.5rem; letter-spacing: 0.08em; color: var(--fathom); }
.brand span { display: block; font-size: 0.8rem; letter-spacing: 0.32em; color: var(--tailwind); margin-top: 3px; }
/* Hamburger menu, shown at every width */
.menu-btn {
  position: relative; z-index: 40; width: 48px; height: 48px; padding: 0;
  background: transparent; border: 0; cursor: pointer; border-radius: 50%;
  display: grid; place-content: center; gap: 6px;
}
.menu-btn span { display: block; width: 28px; height: 3px; background: var(--fathom); border-radius: 2px; transition: transform .2s ease, opacity .2s ease, background .2s ease; }
.menu-open .menu-btn span { background: var(--white); }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.menu {
  position: fixed; inset: 0; z-index: 30; background: var(--fathom); color: var(--white);
  display: flex; align-items: center; overflow-y: auto; padding: 96px 0 48px;
}
.menu[hidden] { display: none; }
.menu .wrap { width: 100%; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { border-top: 2px solid var(--tailwind); }
.menu li:last-child { border-bottom: 2px solid var(--tailwind); }
.menu a {
  display: block; padding: 18px 0; text-decoration: none;
  font-family: var(--head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.6rem, 5vw, 3rem); letter-spacing: 0.02em; line-height: 1.1;
}
.menu a:hover { color: var(--tailwind); }
.menu a:focus-visible { outline-color: var(--windsock); }
.menu-open { overflow: hidden; }
.menu-open .site-header { z-index: 50; background: transparent; backdrop-filter: none; }
.menu-open .brand b { color: var(--white); }
.gauge { transition: opacity .2s ease; }
.menu-open .gauge { opacity: 0; }

/* Buttons */
.btn {
  display: inline-block; text-decoration: none;
  background: var(--windsock); color: var(--white);
  font-weight: 700; font-size: 1.15rem;
  padding: 14px 28px; border-radius: 2px;
  transition: transform .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.link-under { font-weight: 600; text-decoration-color: var(--windsock); text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* Hero */
/* Full-bleed hero image with the headline over the dark water */
.hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(520px, 84vh, 880px); padding: 0; overflow: hidden; background: var(--fathom); color: var(--white); }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(3, 40, 52, 0.92) 0%, rgba(3, 40, 52, 0.55) 38%, rgba(3, 40, 52, 0) 68%); }
.hero-copy { position: relative; z-index: 1; width: 100%; padding-top: 120px; padding-bottom: clamp(40px, 7vw, 88px); }
.hero h1 { color: var(--white); max-width: 14ch; text-shadow: 0 2px 24px rgba(3, 40, 52, 0.45); }
.hero p.lede { font-size: 1.3rem; margin: 24px 0 28px; max-width: 46ch; }
.hero .link-under { color: var(--white); }

/* The foster program message: the second thing people see */
/* Half and half: message on the left, the door photo filling the right half edge to edge */
.foster-band { background: var(--tailwind); color: var(--fathom); padding: 0; overflow: hidden; }
.band-split { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(420px, 46vw, 560px); }
.band-text {
  align-self: center;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px) clamp(40px, 6vw, 88px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}
.band-text p { max-width: 40ch; }
.band-photo { position: relative; margin: 0; min-height: 320px; }
.band-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; display: block; }
.band-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 36px clamp(16px, 3vw, 32px) 16px;
  background: linear-gradient(to top, rgba(3, 40, 52, 0.85), rgba(3, 40, 52, 0));
  color: var(--white); font-size: 0.95rem; line-height: 1.35; text-align: right;
}
.foster-band h2 { color: var(--fathom); font-size: clamp(2rem, 4.6vw, 3.4rem); }
.foster-band p { font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; }
.btn-dark { display: inline-block; background: var(--fathom); color: var(--white); font-weight: 700; font-size: 1.15rem; padding: 14px 28px; border-radius: 2px; text-decoration: none; transition: transform .15s ease; }
.btn-dark:hover { transform: translateY(-2px); }

/* Compass: smaller, beside the specialties. The needle swings once when it scrolls into view. */
.specialties { display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 4vw, 56px); align-items: center; margin-top: 56px; }
.specialties .sub { margin-top: 0; }
.dial { width: 150px; height: 150px; }
.dial .needle { transform-origin: 200px 200px; transform: rotate(28deg); }
.dial.settle.in-view .needle { animation: settle 2.6s cubic-bezier(.2,.8,.2,1) 0.2s both; }
@keyframes settle { from { transform: rotate(-140deg); } to { transform: rotate(28deg); } }
@media (prefers-reduced-motion: reduce) { .dial.settle.in-view .needle { animation: none; } }

/* Training */
.training { background: var(--shallows); }
.training h2 { color: var(--fathom); margin-bottom: 12px; }
.training .intro { margin-bottom: 48px; }
.course {
  display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 16px 40px;
  align-items: start; padding: 32px 0;
  border-top: 3px solid var(--fathom);
}
.course:last-child { border-bottom: 3px solid var(--fathom); }
.course h3 { color: var(--fathom); }
.course p { margin: 0; }
.course a { white-space: nowrap; }

/* Approach */
.approach { background: var(--white); }
.approach .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 96px); }
.approach h2 { color: var(--fathom); }
.approach .big { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.1; color: var(--tailwind); margin: 0 0 20px; }

/* Dark water: articles + contact */
.deep { background: var(--fathom); color: var(--white); }
.deep h2 { color: var(--white); }
.deep .link-under { color: var(--white); }
.post-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 32px; align-items: baseline;
  padding: 28px 0; border-top: 2px solid var(--tailwind); text-decoration: none; color: inherit;
}
.post-row:last-of-type { border-bottom: 2px solid var(--tailwind); }
.post-row h3 { color: var(--white); }
.post-row p { margin: 6px 0 0; color: #cfe7ea; }
.post-row time { color: var(--tailwind); font-weight: 600; white-space: nowrap; }
.post-row:hover h3 { text-decoration: underline; text-decoration-color: var(--windsock); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.articles-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }

.contact { background: #03323d; color: var(--white); text-align: left; }
.contact h2 { color: var(--white); margin-bottom: 20px; }
.contact a.mail { font-family: var(--head); font-weight: 700; font-size: clamp(1.6rem, 4.5vw, 3rem); color: var(--tailwind); text-decoration-color: var(--windsock); text-decoration-thickness: 4px; text-underline-offset: 8px; }

footer { background: #03323d; color: #9cc4c9; padding: 28px 0 40px; font-size: 0.95rem; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { color: #cfe7ea; }

footer p { margin: 0 0 0.6em; }

/* One-page additions */
section[id] { scroll-margin-top: 72px; }
.page-head h2 { color: var(--fathom); font-size: clamp(2.4rem, 6vw, 4.4rem); max-width: 16ch; }
.prose-section h3 { color: var(--fathom); font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 1.8em 0 0.4em; }
.prose-section h2 + p { margin-top: 12px; }
.foster-details { padding-top: clamp(32px, 5vw, 56px); }
.training .intro { max-width: 62ch; font-size: 1.2rem; margin-bottom: 8px; }
.training h3.sub { color: var(--fathom); font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin: 0 0 12px; }
.approach .lede { font-size: 1.3rem; }
.intro-dark { color: #cfe7ea; max-width: 62ch; margin-bottom: 32px; }
.sub-dark { font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--white); margin: 0 0 12px; }
.sub-dark.gap { margin-top: 48px; }

/* Library entries: articles open in place, no page change */
.entry { border-top: 2px solid var(--tailwind); }
.entry:last-of-type { border-bottom: 2px solid var(--tailwind); }
.entry summary, .entry-link {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 32px; align-items: baseline;
  padding: 24px 0; cursor: pointer; list-style: none; text-decoration: none; color: inherit;
}
.entry summary::-webkit-details-marker { display: none; }
.entry-link { border-top: 2px solid var(--tailwind); border-bottom: 2px solid var(--tailwind); cursor: pointer; }
.entry-title { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.1; color: var(--white); grid-column: 1; }
.entry-note { grid-column: 1; color: #cfe7ea; }
.entry time, .entry-tag { grid-column: 2; grid-row: 1; color: var(--tailwind); font-weight: 600; white-space: nowrap; }
.entry summary:hover .entry-title, .entry-link:hover .entry-title { text-decoration: underline; text-decoration-color: var(--windsock); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.entry[open] summary .entry-title::after { content: "  \2212"; color: var(--windsock); }
.entry:not([open]) summary .entry-title::after { content: "  +"; color: var(--windsock); }
.entry-body { padding: 8px 0 40px; max-width: 62ch; }
.entry-body h4 { font-family: var(--head); text-transform: uppercase; font-size: 1.3rem; color: var(--tailwind); margin: 1.6em 0 0.3em; letter-spacing: 0.02em; }
.entry-body p, .entry-body li { font-size: 1.15rem; line-height: 1.7; }
.entry-body .draft-note { color: var(--ink); }
.footer-logo { display: block; width: 150px; height: auto; margin-bottom: 12px; }

/* Logo in the header: dark on light, light while the menu is open */
.brand img { display: block; height: 52px; width: auto; }
.brand .logo-light { display: none; }
.menu-open .brand .logo-dark { display: none; }
.menu-open .brand .logo-light { display: block; }

/* Placeholder marker: anything still to be written or supplied */
.todo { outline: 2px dashed var(--windsock); outline-offset: 2px; border-radius: 3px; padding: 0 4px; font-size: 0.95em; background: #fff3ee; color: var(--ink); }

/* Home extras */
.cta-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 0; }
.strip { padding: 0 0 clamp(40px, 6vw, 72px); background: var(--white); }
/* Photo strip: one continuous row, 200px high, full images at any orientation */
.marquee { display: flex; width: max-content; animation: scroll-strip var(--dur, 40s) linear infinite; }
.marquee:hover { animation-play-state: paused; }
.track { display: flex; flex: none; list-style: none; margin: 0; padding: 0; }
.track li { flex: none; padding-right: 12px; }
.track img { display: block; height: 200px; width: auto; border-radius: 4px; }
.photo { height: 200px; background: var(--shallows); border: 2px dashed var(--tailwind); border-radius: 4px; display: grid; place-items: center; text-align: center; padding: 8px; font-size: 0.9rem; }
.strip { overflow: hidden; }
@keyframes scroll-strip { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .strip { overflow-x: auto; }
  .marquee { animation: none; }
  .marquee .track[aria-hidden="true"] { display: none; }
}
.students-band { background: var(--tailwind); color: var(--fathom); padding: clamp(40px, 6vw, 72px) 0; }
.students-band .band { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(20px, 5vw, 72px); align-items: center; }
.students-band h2 { color: var(--fathom); font-size: clamp(1.8rem, 4vw, 2.8rem); }
.students-band p { color: var(--fathom); font-size: 1.2rem; font-weight: 500; }
.students-band .link-under { color: var(--fathom); }
.reviews { background: var(--shallows); }
.reviews h2 { color: var(--fathom); margin-bottom: 32px; }
.review-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-bottom: 24px; }
.review { margin: 0; border-top: 4px solid var(--windsock); padding-top: 16px; }
.review blockquote { margin: 0 0 12px; font-size: 1.15rem; }
.review figcaption { font-weight: 600; color: var(--fathom); }

/* Inner pages */
.page-head { background: var(--shallows); padding: clamp(48px, 8vw, 96px) 0 clamp(32px, 5vw, 56px); }
.page-head h1 { color: var(--fathom); font-size: clamp(2.4rem, 6.5vw, 4.8rem); max-width: 18ch; }
.page-head .lede { font-size: 1.3rem; margin: 20px 0 24px; }
.page-head.with-photo .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.hero-photo { margin: 0; }
.hero-photo img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: cover; border-radius: 6px; border: 4px solid var(--fathom); }
.hero-photo figcaption { margin-top: 10px; font-size: 0.95rem; color: var(--fathom); }
@media (max-width: 860px) { .page-head.with-photo .wrap { grid-template-columns: 1fr; } .hero-photo img { max-height: 60vh; } }
.prose-section { padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 10vw, 112px); background: var(--white); }
.narrow > * { max-width: 62ch; }
.prose-section h2 { color: var(--fathom); font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 2em 0 0.5em; }
.prose-section h2:first-child { margin-top: 0; }
.prose-section li, .prose-section p { font-size: 1.15rem; }
.steps { padding-left: 1.3em; }
.steps li { margin-bottom: 0.6em; padding-left: 0.3em; }
.ladder { list-style: none; margin: 0 0 40px; padding: 0; counter-reset: step; }
.ladder .course { counter-increment: step; }
.ladder .course h3::before { content: counter(step) ". "; color: var(--windsock); }
.training h2.sub, .list-page h2.sub { font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--fathom); margin: 8px 0 16px; }
.list-page h2.sub.gap { margin-top: 56px; }
.signup { margin-top: 32px; }

/* Depth gauge */
.gauge {
  position: fixed; right: 18px; top: 96px; bottom: 32px; width: 54px; z-index: 15;
  pointer-events: none; font-family: var(--head); font-weight: 600;
}
.gauge .rail { position: absolute; right: 6px; top: 0; bottom: 0; width: 3px; background: var(--tailwind); opacity: .7; border-radius: 2px; }
.gauge .rail::before {
  content: ""; position: absolute; right: 3px; top: 0; bottom: 0; width: 10px;
  background: repeating-linear-gradient(to bottom, var(--tailwind) 0 2px, transparent 2px 24px); opacity: .8;
}
.gauge .marker {
  position: absolute; right: 0; top: 0; transform: translateY(-50%);
  background: var(--windsock); color: var(--white); border-radius: 999px;
  padding: 3px 10px; font-size: 0.95rem; line-height: 1.2; white-space: nowrap; right: 14px;
}
.gauge .marker::after { content: ""; position: absolute; right: -8px; top: 50%; width: 8px; height: 3px; background: var(--windsock); transform: translateY(-50%); }

/* Article pages */
.article-head { background: var(--shallows); padding: clamp(48px, 8vw, 96px) 0 clamp(32px, 5vw, 56px); }
.article-head h1 { font-size: clamp(2.2rem, 6vw, 4.4rem); color: var(--fathom); max-width: 16ch; }
.article-head time { display: block; margin-top: 20px; color: var(--fathom); font-weight: 600; }
.article-body { padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 10vw, 112px); }
.article-body .wrap > * { max-width: 62ch; }
.article-body h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--fathom); margin: 2em 0 0.5em; }
.article-body p, .article-body li { font-size: 1.2rem; line-height: 1.7; }
.article-body ul { padding-left: 1.2em; }
.draft-note { background: var(--shallows); border-left: 6px solid var(--windsock); padding: 14px 18px; border-radius: 4px; font-size: 1rem; }
.list-page { background: var(--white); padding-top: clamp(48px, 8vw, 96px); }
.list-page h1 { color: var(--fathom); font-size: clamp(2.6rem, 7vw, 5rem); margin-bottom: 40px; }
.list-page .post-row { border-color: var(--fathom); }
.list-page .post-row h3 { color: var(--fathom); }
.list-page .post-row p { color: var(--ink); }
.list-page .post-row time { color: var(--windsock); }

@media (max-width: 860px) {
  .approach .wrap { grid-template-columns: 1fr; }
  .band-split { grid-template-columns: 1fr; }
  .band-text { padding: 40px var(--gutter); }
  .band-photo { min-height: 340px; }
  .hero > img { object-position: 58% 40%; }
  .specialties { grid-template-columns: 1fr; }
  .dial { width: 120px; height: 120px; }
  .course { grid-template-columns: 1fr; }
  .gauge { top: auto; bottom: 16px; right: 16px; width: auto; height: auto; }
  .gauge .rail { display: none; }
  .gauge .marker { position: static; transform: none; display: inline-block; }
  .gauge .marker::after { display: none; }
  .review-row, .students-band .band { grid-template-columns: 1fr; }
}

/* ---- Layout pass: hero, band, two-column details, stages, about ---- */
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 4rem); max-width: 13ch; }
.hero > img { left: auto; right: -20%; width: 120%; object-position: 50% 40%; }
.hero::after { background: linear-gradient(to right, rgba(4,66,81,0.96) 0%, rgba(4,66,81,0.85) 30%, rgba(4,66,81,0) 62%), linear-gradient(to top, rgba(3,40,52,0.6) 0%, rgba(3,40,52,0) 40%); }
.band-text h2 { margin-bottom: 20px; }
.band-text p { margin-bottom: 28px; }

.foster-details { background: var(--white); padding: clamp(40px,6vw,72px) 0 clamp(56px,8vw,96px); }
.foster-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.foster-details h3 { color: var(--fathom); font-size: clamp(1.3rem,2.2vw,1.6rem); margin: 0 0 8px; }
.foster-details .col > * + h3 { margin-top: 2em; }
.foster-details p, .foster-details li { font-size: 1.1rem; }
.foster-details .steps { padding-left: 1.2em; }
.foster-details .steps li { margin-bottom: 10px; }
.foster-details .links { display: flex; gap: 24px; flex-wrap: wrap; }

.students { background: var(--white); padding: clamp(56px,8vw,96px) 0; border-top: 1px solid var(--shallows); }
.students h2 { color: var(--fathom); margin-bottom: 12px; }
.students .intro { max-width: 62ch; font-size: 1.2rem; margin-bottom: 40px; }
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px,4vw,56px); }
.stage { border-top: 4px solid var(--tailwind); padding-top: 20px; }
.stage h3 { color: var(--fathom); font-size: clamp(1.3rem,2.2vw,1.6rem); margin: 0 0 12px; }

.approach { padding: clamp(56px,8vw,104px) 0; }
.approach .wrap { display: block; }
.about-top { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(24px,6vw,96px); align-items: start; }
.good-diver { margin-top: clamp(40px,6vw,72px); padding-top: clamp(32px,5vw,56px); border-top: 4px solid var(--tailwind); }
.good-diver h3 { color: var(--tailwind); font-size: 1.1rem; letter-spacing: .08em; margin: 0 0 16px; }
.good-diver p { font-family: var(--head); font-weight: 700; text-transform: uppercase; color: var(--fathom); font-size: clamp(1.5rem,3.4vw,2.6rem); line-height: 1.15; max-width: 28ch; margin: 0; }
.training, .reviews, .deep { padding-top: clamp(56px,8vw,96px); padding-bottom: clamp(56px,8vw,96px); }

@media (max-width: 860px) {
  .hero { display: block; min-height: 0; }
  .hero > img { position: static; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; object-position: 55% 40%; display: block; }
  .hero::after { display: none; }
  .hero-copy { padding-top: 32px; padding-bottom: 48px; background: var(--fathom); }
  .foster-grid, .stages, .about-top { grid-template-columns: 1fr; }
}
.hero h1 { max-width: 15ch; text-wrap: balance; font-size: clamp(2.1rem, 4.2vw, 3.6rem); }
.hero > img { right: -26%; width: 126%; }
.good-diver p { font-size: clamp(1.3rem, 2.4vw, 1.9rem); max-width: 40ch; line-height: 1.25; }
.strip { padding: clamp(40px,6vw,72px) 0 clamp(40px,6vw,72px); }
.foster-band + .foster-details { padding-top: clamp(56px,8vw,96px); }
.hero h1 { max-width: 20ch; text-wrap: wrap; }
@media (max-width:480px){ .hero h1 { font-size: 1.75rem; } }
.hero::after { display: none; }
.hero h1 { text-shadow: 0 2px 4px rgba(3,40,52,.55), 0 4px 28px rgba(3,40,52,.6); }
.hero p.lede { text-shadow: 0 1px 3px rgba(3,40,52,.7), 0 2px 18px rgba(3,40,52,.55); }
@media (max-width:860px){ .hero h1, .hero p.lede { text-shadow: none; } }

/* ---- Photo placements ---- */
.photo-band { margin: 0; line-height: 0; background: var(--fathom); }
.photo-band img { width: 100%; height: clamp(320px, 52vw, 720px); object-fit: cover; display: block; }
.photo-band.wrasse img { object-position: 50% 50%; }
.photo-band.ladder img { object-position: 50% 45%; }

.deep-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: stretch; }
.deep-photo { margin: 0; position: relative; min-height: 360px; border-radius: 6px; overflow: hidden; }
.deep-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }

.about-top { grid-template-columns: 1fr 1.6fr 1fr; }
.about-photo { margin: 0; }
.about-photo img { width: 100%; height: auto; display: block; border-radius: 6px; aspect-ratio: 3/4; object-fit: cover; }

@media (max-width: 860px) {
  .deep-grid { grid-template-columns: 1fr; }
  .deep-photo { min-height: 0; aspect-ratio: 4/3; }
  .about-top { grid-template-columns: 1fr; }
  .about-photo { max-width: 360px; }
  .photo-band img { height: 56vw; min-height: 220px; }
}
.about-top { grid-template-columns: 0.8fr 1.3fr 1.1fr; } @media (max-width:860px){ .about-top { grid-template-columns: 1fr; } }
.band-split { grid-template-columns: 2fr 1fr; }
@media (max-width: 860px) { .band-split { grid-template-columns: 1fr; } }
.stages { grid-template-columns: repeat(2, 1fr); } @media (max-width:860px){ .stages { grid-template-columns: 1fr; } }

/* ---- Parallax bands ---- */
.photo-band { position: relative; overflow: hidden; height: clamp(320px, 52vw, 720px); }
.photo-band img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; will-change: transform; }
@media (max-width: 860px) { .photo-band { height: 56vw; min-height: 220px; } .photo-band img { height: 130%; } }
@media (prefers-reduced-motion: reduce) { .photo-band img { top: 0; height: 100%; transform: none !important; } }

/* ---- Hero parallax wrapper ---- */
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero .hero-media > img { position: absolute; left: auto; right: -26%; top: -12%; width: 126%; height: 124%; object-fit: cover; object-position: 50% 40%; will-change: transform; }
@media (max-width: 860px) {
  .hero-media { position: relative; aspect-ratio: 4/3; }
  .hero .hero-media > img { left: 0; right: auto; width: 100%; height: 124%; object-position: 55% 40%; }
}
@media (prefers-reduced-motion: reduce) { .hero .hero-media > img { top: 0; height: 100%; transform: none !important; } }
.band-text .eyebrow { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 1rem; color: var(--fathom); margin: 0 0 14px; max-width: none; }
.band-text .tagline { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem; color: var(--white); margin: 0 0 24px; }
.band-text .tagline { font-size: 1.2rem; }
.band-text .eyebrow { color: var(--white); font-size: 1.3rem; }
.foster-details .enroll { text-align: center; margin-top: clamp(40px,6vw,72px); padding-top: clamp(32px,5vw,56px); border-top: 4px solid var(--tailwind); }
.foster-details .enroll h3 { font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom: 12px; }
.foster-details .enroll p { max-width: 52ch; margin-left: auto; margin-right: auto; }
.foster-details .enroll .links { justify-content: center; margin-top: 20px; }
.foster-details .enroll { border-top: 0; padding-top: 0; }
.foster-details .enroll::before { content: ""; display: block; border-top: 4px solid var(--tailwind); margin-bottom: clamp(32px,5vw,56px); }
.foster-details .source { margin-top: 16px; }

/* Enrollment band */
.foster-details { padding-bottom: clamp(48px,7vw,88px); }
.enroll-band { background: var(--tailwind); color: var(--fathom); padding: clamp(48px,7vw,88px) 0; }
.enroll-band .enroll, .foster-details .enroll { margin-top: 0; padding-top: 0; border-top: 0; text-align: center; }
.enroll-band .enroll::before { display: none; }
.enroll-band h3 { color: #fff; font-size: clamp(1.8rem,3.4vw,2.6rem); margin: 0 0 14px; }
.enroll-band p { color: var(--fathom); font-size: 1.2rem; font-weight: 500; max-width: 56ch; margin-left: auto; margin-right: auto; }
.enroll-band .links { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.enroll-band .link-under { color: var(--fathom); }
.nowrap { white-space: nowrap; }

/* ---- Dive Logs: card grid ---- */
.deep .intro-dark { max-width: 60ch; margin: 12px 0 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.chip { font: inherit; font-weight: 600; font-size: 1rem; color: var(--white); background: transparent; border: 2px solid rgba(255,255,255,.35); border-radius: 2px; padding: 8px 18px; cursor: pointer; transition: background .15s, border-color .15s; }
.chip:hover { border-color: var(--tailwind); }
.chip.on { background: var(--tailwind); border-color: var(--tailwind); color: var(--fathom); }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { display: flex; flex-direction: column; background: rgba(255,255,255,.07); border-radius: 10px; overflow: hidden; color: var(--white); text-decoration: none; transition: transform .2s ease, background .2s ease; }
.card:hover { transform: translateY(-4px); background: rgba(255,255,255,.12); }
.card[hidden] { display: none; }
.card-media { aspect-ratio: 16/10; overflow: hidden; background: var(--tailwind); }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.04); }
.card-media.plain { display: flex; align-items: center; justify-content: center; }
.card-media.plain span { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(2.2rem,5vw,3.4rem); letter-spacing: .06em; color: var(--fathom); }
.card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; flex: 1; }
.card-tag { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; color: var(--tailwind); }
.card h3 { color: var(--white); font-size: clamp(1.25rem,2vw,1.55rem); margin: 0; line-height: 1.15; }
.card p { color: rgba(255,255,255,.85); font-size: 1.05rem; margin: 0; }
.card-meta { margin-top: auto; padding-top: 6px; font-size: .95rem; color: rgba(255,255,255,.6); }
.card.featured { grid-column: span 2; flex-direction: row; }
.card.featured .card-media { flex: 1.2; aspect-ratio: auto; min-height: 300px; }
.card.featured .card-body { flex: 1; justify-content: center; padding: 32px; }
.card.featured h3 { font-size: clamp(1.6rem,2.8vw,2.2rem); }
.more-row { text-align: center; margin-top: 36px; }
.more-btn { font: inherit; font-weight: 700; font-size: 1.1rem; color: var(--fathom); background: var(--tailwind); border: 0; border-radius: 2px; padding: 14px 30px; cursor: pointer; }
.more-btn[hidden] { display: none; }
@media (max-width: 960px) { .card-grid { grid-template-columns: repeat(2, 1fr); } .card.featured { grid-column: span 2; } }
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } .card.featured { grid-column: auto; flex-direction: column; } .card.featured .card-media { aspect-ratio: 16/10; min-height: 0; } .card.featured .card-body { padding: 22px 24px 26px; } }
.card-media { position: relative; }
.card-media img { position: absolute; inset: 0; }
.card.featured .card-media { min-height: 340px; }
.card.featured .card-body p { max-width: 36ch; }
.card-media.plain { aspect-ratio: 16/7; }

/* ---- Dive Logs hero ---- */
.deep { padding-top: 0; }
.photo-band.logs-hero { height: clamp(340px, 42vw, 560px); background: var(--fathom); }
.logs-hero img { object-position: 50% 42%; }
.logs-hero-copy { position: absolute; left: 0; right: 0; bottom: clamp(28px, 5vw, 56px); z-index: 1; line-height: 1.5; }
.logs-hero-copy h2 { color: var(--white); margin: 0 0 10px; text-shadow: 0 2px 4px rgba(3,40,52,.5), 0 4px 28px rgba(3,40,52,.6); }
.logs-hero-copy .intro-dark { margin: 0; color: var(--white); font-size: 1.25rem; max-width: 46ch; text-shadow: 0 1px 3px rgba(3,40,52,.7), 0 2px 18px rgba(3,40,52,.6); }
.logs-body { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(56px, 8vw, 96px); }
.logs-hero img { object-position: 50% 58%; }
.logs-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to right, rgba(3,40,52,.78) 0%, rgba(3,40,52,.5) 38%, rgba(3,40,52,0) 70%), linear-gradient(to top, rgba(3,40,52,.55) 0%, rgba(3,40,52,0) 45%); }
@media (max-width: 860px) { .logs-hero::after { background: linear-gradient(to top, rgba(3,40,52,.8) 0%, rgba(3,40,52,.35) 55%, rgba(3,40,52,0) 100%); } }
.photo-band.logs-hero { height: clamp(420px, 54vw, 780px); }
.logs-hero img { object-position: 50% 50%; }
@media (max-width: 860px) { .photo-band.logs-hero { height: clamp(380px, 100vw, 560px); } }

/* ---- Specialty cards ---- */
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.spec { background: var(--white); border-radius: 10px; border-top: 5px solid var(--tailwind); padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 0 rgba(4,66,81,.06); }
.spec h3 { color: var(--fathom); font-size: clamp(1.3rem,2vw,1.6rem); margin: 0; line-height: 1.1; }
.spec-padi { font-size: 1.05rem; margin: 0; }
.spec-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.spec-facts li { font-size: .9rem; font-weight: 600; color: var(--fathom); background: var(--shallows); border-radius: 999px; padding: 4px 12px; }
.spec .why { margin: auto 0 0; padding: 16px 18px; border-radius: 8px; background: var(--shallows); border: 0; }
.spec .why-label { display: block; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--tailwind); margin-bottom: 6px; }
.spec .why p { margin: 0; font-size: 1.05rem; }
.spec .why.empty { background: transparent; border: 2px dashed rgba(4,66,81,.25); }
.spec .why.empty p { color: rgba(4,66,81,.55); font-style: italic; }
@media (max-width: 960px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .spec-grid { grid-template-columns: 1fr; } }
.training .signup { margin-top: 48px; }
.spec.more { grid-column: span 2; background: var(--fathom); border-top-color: var(--windsock); justify-content: center; }
.spec.more h3, .spec.more p { color: var(--white); }
.spec.more .link-under { color: var(--white); }
@media (max-width: 640px) { .spec.more { grid-column: auto; } }

/* Footer, matched to gladwater.com */
footer { background: #1b414f; color: #cebbf7; padding: 56px 0 28px; font-size: 0.95rem; }
footer { color: #ceebf7; }
footer a { color: #ceebf7; }
footer .footer-top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; padding-bottom: 56px; font-size: 0.95rem; }
footer .footer-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; }
footer .footer-bottom p { margin: 0; font-family: var(--head); text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; line-height: 2; }
footer .fb-left { color: #fff; }
footer .fb-right { text-align: right; color: #ceebf7; }
footer .gh { color: #FFE600; }
@media (max-width: 700px) { footer .fb-right { text-align: left; } }
footer .fb-right-wrap { display: flex; align-items: flex-end; gap: 22px; }
footer .g-mark { display: block; height: 88px; width: auto; flex: none; }
@media (max-width: 700px) { footer .fb-right-wrap { flex-direction: column; align-items: flex-start; } footer .g-mark { height: 64px; } }
.tagline .i { color: #FFE600; }
.band-text .eyebrow { color: #FFE600; }
.enroll-band h3 .gb { color: #FFE600; }
footer .fb-left-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
footer .fb-left-wrap .g-mark { height: 88px; }
footer .fb-right-wrap { display: block; }
footer { padding-top: 48px; }

/* Good-diver statement over the ladder photo */
.photo-band.ladder { height: clamp(560px, 58vw, 840px); }
.photo-band.ladder img { object-position: 70% 50%; }
.photo-band.ladder::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to right, rgba(3,40,52,.82) 0%, rgba(3,40,52,.62) 38%, rgba(3,40,52,0) 62%); }
.ladder-copy { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; line-height: 1.5; }
.ladder-copy .wrap { width: 100%; }
.ladder-copy .good-diver { margin: 0; padding: 0; border: 0; max-width: min(52%, 640px); }
.ladder-copy .good-diver h3 { color: #FFE600; margin: 0 0 14px; }
.ladder-copy .good-diver p { color: #fff; font-size: clamp(1.05rem, 1.6vw, 1.5rem); line-height: 1.3; max-width: none; text-shadow: 0 1px 3px rgba(3,40,52,.6), 0 2px 16px rgba(3,40,52,.5); }
@media (max-width: 860px) {
  .photo-band.ladder { height: auto; background: var(--fathom); }
  .photo-band.ladder img { position: relative; top: 0; width: 100%; height: 70vw; transform: none !important; object-position: 80% 35%; }
  .photo-band.ladder::after { display: none; }
  .ladder-copy { position: relative; display: block; padding: 36px 0 48px; }
  .ladder-copy .good-diver { max-width: none; }
  .ladder-copy .good-diver p { font-size: 1.1rem; }
}

/* Specialty card photos */
.spec-img { margin: -26px -26px 4px; line-height: 0; border-radius: 5px 5px 0 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--fathom); }
.spec-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.btn-yellow { display: inline-block; background: #FFE600; color: var(--fathom); font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 1.05rem; padding: 14px 30px; border-radius: 2px; text-decoration: none; transition: transform .15s ease; }
.btn-yellow:hover { transform: translateY(-2px); }
.enroll-band .links { align-items: center; }

/* Dive Logs: every card is vertical and the same size */
.card.featured, .card.featured .card-media, .card.featured .card-body { grid-column: auto !important; flex-direction: column; }
.card.featured { flex-direction: column !important; }
.card.featured .card-media { flex: none; aspect-ratio: 16/10; min-height: 0; }
.card.featured .card-body { flex: 1; justify-content: flex-start; padding: 22px 24px 26px; }
.card.featured h3 { font-size: clamp(1.25rem,2vw,1.55rem); }
.card.featured .card-body p { max-width: none; }
.card-media.plain { aspect-ratio: 16/10; }
footer .g-mark { filter: drop-shadow(.5px 0 0 rgba(206,235,247,.9)) drop-shadow(-.5px 0 0 rgba(206,235,247,.9)) drop-shadow(0 .5px 0 rgba(206,235,247,.9)) drop-shadow(0 -.5px 0 rgba(206,235,247,.9)); }
.about-top { grid-template-columns: 0.55fr 1.7fr 1fr; } @media (max-width:860px){ .about-top { grid-template-columns: 1fr; } }
.approach .about-text .lede, .approach .about-text p { font-size: 1.2rem; line-height: 1.6; }
.btn.btn-gold { background: #FFE600; color: var(--fathom); }
.approach .about-text .lede, .approach .about-text p { font-size: 1.02rem; line-height: 1.6; }
.training h2::before, .training h3.sub::before, .training h2.sub::before { content:""; display:block; width:56px; height:6px; border-radius:3px; background:var(--windsock); margin-bottom:16px; }

/* Compact dropdown menu panel, modeled on gladwater.com */
.menu {
  inset: 80px max(16px, calc(50vw - 488px)) auto auto; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 96px);
  display: block; padding: 0; border-radius: 0; overflow-y: auto; background: var(--fathom);
  border-bottom: 4px solid var(--daybreak, #FFE600); box-shadow: 0 18px 40px rgba(4,66,81,.35); animation: menu-in .18s ease;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.menu .wrap { padding: 0; max-width: none; }
.menu li, .menu li:last-child { border: 0; }
.menu li + li { border-top: 1px solid rgba(199,236,249,.35); }
.menu a {
  padding: 18px 28px; font-size: 1.1rem; letter-spacing: .16em; color: var(--white);
  transition: background .15s ease, color .15s ease;
}
.menu a::before { display: none; }
.menu a:hover, .menu a:focus-visible { background: var(--tailwind); color: #FFE600; padding-left: 28px; outline: 0; }
.menu-open { overflow: auto; }
.menu-open .site-header { background: var(--fathom); }
.menu-open .menu-btn { background: var(--windsock); border-radius: 8px; width: 48px; height: 48px; outline: 3px solid #FFE600; outline-offset: 3px; }
.menu-open .menu-btn span { background: var(--white); }
.menu-open .gauge { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .menu { animation: none; } .menu a { transition: none; } }
.menu { border-top: 1px solid rgba(199,236,249,.45); }
.menu li:last-child { border-top: 1px solid rgba(199,236,249,.35); }
.training .eyebrow-orange { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 1.3rem; color: var(--windsock); margin: 0 0 14px; max-width: none; }
.training h2.no-bar::before { display: none; }
.spec .why p { font-size: .92rem; font-style: italic; line-height: 1.5; }
/* Match the "Why I teach it" boxes across each row of specialty cards */
.spec:not(.more) { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 14px; }
.spec-top { display: flex; flex-direction: column; gap: 14px; }
.spec:not(.more) .why { margin: 0; align-self: stretch; }
.spec.more { grid-row: span 2; }
.approach .about-text .lede, .approach .about-text p { font-size: .92rem; line-height: 1.6; }
/* Courses page hero: full-width surface photo, text anchored low over the water */
.hero.hero-courses .hero-media > img { left: 0; right: auto; top: -26%; width: 100%; height: 130%; object-position: 50% 55%; }
.hero.hero-courses .hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(3,40,52,.88) 0%, rgba(3,40,52,.55) 32%, rgba(3,40,52,0) 60%), linear-gradient(to right, rgba(3,40,52,.45) 0%, rgba(3,40,52,0) 55%); }
@media (max-width: 860px) { .hero.hero-courses .hero-media > img { top: 0; height: 100%; object-position: 50% 40%; } .hero.hero-courses .hero-media::after { display: none; } }
.stages { grid-template-columns: repeat(3, 1fr); } @media (max-width:860px){ .stages { grid-template-columns: 1fr; } }

/* Current Students: stacked rows, in course order */
.stages { display: block; counter-reset: stage; margin-top: 36px; border-bottom: 1px solid rgba(4,66,81,.18); }
.stage { counter-increment: stage; display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(20px, 4vw, 64px); padding: 32px 0; border-top: 1px solid rgba(4,66,81,.18); }
.stage > h3 { margin: 0; display: flex; align-items: baseline; gap: 16px; }
.stage > h3::before { content: counter(stage); font-family: var(--head); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--windsock); }
.stage-body { max-width: 62ch; }
.stage-body > p { margin: 0 0 14px; }
.stage-body > p:last-child, .stage-body > .sub:last-child { margin-bottom: 0; }
.stage .sub { margin: 0 0 22px; padding-left: 18px; border-left: 4px solid var(--tailwind); }
.stage .sub h4 { margin: 0 0 6px; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .9rem; color: var(--tailwind); }
.stage .sub p { margin: 0; }
@media (max-width: 760px) { .stage { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; } }
.students-head { display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 4vw, 56px); align-items: center; }
.students-head h2 { margin-top: 0; }
@media (max-width: 860px) { .students-head { grid-template-columns: 1fr; } }

/* About: favorite moment video */
.moment { background: var(--shallows); padding: clamp(48px, 7vw, 88px) 0; }
.moment .eyebrow-orange { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 1.3rem; color: var(--windsock); margin: 0 0 18px; }
.moment-video { margin: 0; }
.moment-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 10px; background: var(--fathom); }
.moment-video figcaption { margin-top: 12px; font-size: .95rem; color: var(--fathom); }

/* Video play/pause button, and bio at normal size */
.vid-wrap { position: relative; }
.vid-toggle { position: absolute; right: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; background: rgba(4,66,81,.78); cursor: pointer; display: grid; place-content: center; padding: 0; transition: background .15s ease, transform .15s ease; }
.vid-toggle:hover, .vid-toggle:focus-visible { background: var(--windsock); transform: scale(1.06); }
.vid-toggle[data-state="paused"] { width: 84px; height: 84px; right: 50%; bottom: 50%; margin: 0 -42px -42px 0; }
.vid-toggle .vt-icon { display: block; }
.vid-toggle[data-state="paused"] .vt-icon { width: 0; height: 0; border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent #fff; margin-left: 6px; }
.vid-toggle[data-state="playing"] .vt-icon { width: 18px; height: 20px; border-left: 6px solid #fff; border-right: 6px solid #fff; }
.approach .about-text .lede, .approach .about-text p { font-size: 1.2rem; line-height: 1.6; }
.about-photo figcaption { margin-top: 14px; line-height: 1.35; color: var(--fathom); }
.about-photo figcaption strong { display: block; font-family: var(--head); text-transform: uppercase; letter-spacing: .06em; font-size: 1.15rem; margin-bottom: 4px; }
.about-photo figcaption span { display: block; font-size: 1rem; }

.photo-band.fins img { object-position: 50% 45%; }
.photo-band.reef img { object-position: 50% 62%; }

.photo-band.fins { height: clamp(420px, 70vw, 1000px); }
.photo-band.fins img { top: -4%; height: 108%; object-position: 50% 50%; }
@media (max-width: 860px) { .photo-band.fins { height: 80vw; min-height: 300px; } .photo-band.fins img { height: 108%; } }

.photo-band.reef img { object-position: 50% 65%; }
.photo-band.tablecoral img { object-position: 50% 68%; }

.photo-band.tablecoral { height: clamp(460px, 78vw, 1100px); }
.photo-band.tablecoral img { top: -4%; height: 108%; object-position: 50% 60%; }
@media (max-width: 860px) { .photo-band.tablecoral { height: 100vw; min-height: 340px; } .photo-band.tablecoral img { height: 108%; } }

.photo-band.tablecoral img { object-position: 50% 78%; }

.gb-logo { display: block; box-sizing: content-box; width: min(250px, 100%); height: auto; padding: 22px; margin: 0 auto 18px; }

.foster-band .launch { margin: 0 0 26px; }
.foster-band .launch span { display: inline-block; background: var(--windsock); color: #fff; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 1.05rem; padding: 8px 16px; border-radius: 2px; }

/* ---- Foster program: five distinct bands ---- */
.fd { background: var(--white); }
.fd-sec { padding: clamp(44px,6.5vw,84px) 0; position: relative; }
.fd-sec .wrap.fd-narrow { max-width: calc(780px + 2 * var(--gutter)); }
.fd-sec h3 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 0 0 16px; color: var(--fathom); }
.fd-sec h3::after { content: ""; display: block; width: 56px; height: 6px; border-radius: 3px; background: var(--windsock); margin-top: 14px; }
.fd-sec p, .fd-sec li { font-size: 1.15rem; line-height: 1.6; }
.fd-sec p + p { margin-top: 14px; }
.fd-what { background: var(--white); }
.fd-why { background: var(--fathom); color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cpath d='M0 14 Q15 0 30 14 T60 14 T90 14 T120 14' fill='none' stroke='%2321A5A5' stroke-opacity='.28' stroke-width='2'/%3E%3C/svg%3E"); }
.fd-why h3 { color: #fff; }
.fd-why h3::after { background: #FFE600; }
.fd-why p { color: #fff; font-size: 1.22rem; }
.fd-why a { color: #fff; }
.fd-day { background: var(--shallows);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Ccircle cx='24' cy='30' r='7' fill='none' stroke='%2321A5A5' stroke-opacity='.3' stroke-width='2.5'/%3E%3Ccircle cx='78' cy='64' r='4.5' fill='none' stroke='%2321A5A5' stroke-opacity='.3' stroke-width='2.5'/%3E%3Ccircle cx='46' cy='92' r='3' fill='none' stroke='%2321A5A5' stroke-opacity='.3' stroke-width='2'/%3E%3C/svg%3E"); }
.fd-steps { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; counter-reset: st; }
.fd-steps li { counter-increment: st; background: #fff; border-radius: 16px; padding: 22px 20px 22px; box-shadow: 0 2px 0 rgba(4,66,81,.12); font-size: 1.02rem; line-height: 1.5; }
.fd-steps li::before { content: counter(st); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--windsock); color: #fff; font: 700 1.15rem/1 var(--head); margin-bottom: 14px; }
.fd-steps li strong { display: block; font-family: var(--head); text-transform: uppercase; letter-spacing: .02em; color: var(--fathom); font-size: 1.1rem; margin-bottom: 6px; }
.fd-faq { background: var(--tailwind); padding-bottom: clamp(44px,6.5vw,84px); }
.fd-faq h3 { color: #fff; }
.fd-faq h3::after { background: #FFE600; }
.fd-qs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 26px; }
.fd-qs > div { background: #fff; border-radius: 16px; padding: 22px 22px 24px; border-top: 6px solid var(--tailwind); box-shadow: 0 2px 0 rgba(4,66,81,.12); }
.fd-qs h4 { font-family: var(--head); text-transform: uppercase; color: var(--fathom); font-size: 1.12rem; line-height: 1.2; margin: 0 0 8px; }
.fd-qs p { font-size: 1.02rem; margin: 0; }
.fd-safety { background: var(--white); }
.fd-checks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.fd-checks li { position: relative; padding: 0 0 0 44px; }
.fd-checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%; background: var(--tailwind) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; }
.fd-safety .source { margin-top: 26px; }
.fd-sec .wrap.fd-narrow { max-width: var(--max); }
.fd-narrow > * { max-width: 780px; }
@media (min-width: 1000px) { .fd-steps { grid-template-columns: repeat(5, 1fr); } .fd-qs { grid-template-columns: repeat(4, 1fr); } }
.btn-ghost-w { display: inline-block; margin: 6px; padding: 14px 26px; border: 3px solid #fff; border-radius: 2px; color: #fff; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.btn-ghost-w:hover { background: #fff; color: var(--fathom); }
/* photo backgrounds for Why Discover Scuba and What a day looks like */
.fd-why { background-color: var(--fathom);
  background-image: linear-gradient(90deg, rgba(4,66,81,.9) 0%, rgba(4,66,81,.72) 42%, rgba(4,66,81,.1) 100%), url(images/bg-whale-sharks.jpg);
  background-size: cover; background-position: center right; background-repeat: no-repeat; }
.fd-why p { max-width: 620px; text-shadow: 0 1px 12px rgba(4,40,50,.5); }
.fd-why .wrap > * { max-width: 620px; }
.fd-day { background-color: var(--fathom);
  background-image: linear-gradient(180deg, rgba(4,66,81,.82) 0%, rgba(4,66,81,.55) 100%), url(images/bg-octopus.jpg);
  background-size: cover; background-position: center 50%; background-repeat: no-repeat; padding-bottom: clamp(90px,12vw,170px); }
.fd-day h3 { color: #fff; }
.fd-day h3::after { background: #FFE600; }
@media (max-width: 700px) {
  .fd-why { background-image: linear-gradient(rgba(4,66,81,.82), rgba(4,66,81,.82)), url(images/bg-whale-sharks.jpg); }
}


/* Colored heading bars + photo parallax sections */
.fd-bar { background: var(--windsock); color: #fff; padding: clamp(26px,4vw,44px) 0; }
.fd-bar h3 { margin: 0; color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.fd-bar h3::after { content: ""; display: block; width: 56px; height: 6px; border-radius: 3px; background: #fff; margin-top: 14px; }
.fd-photo { position: relative; overflow: hidden; isolation: isolate; background: var(--fathom); background-image: none; }
.fd-photo .px-bg { position: absolute; left: 0; right: 0; top: -18%; height: 136%; z-index: -2; background-size: cover; background-position: center; background-repeat: no-repeat; will-change: transform; }
.fd-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.fd-why .px-bg { background-image: url(images/bg-whale-sharks.jpg); background-position: right center; }
.fd-why::before { background: linear-gradient(90deg, rgba(4,66,81,.9) 0%, rgba(4,66,81,.72) 42%, rgba(4,66,81,.1) 100%); }
.fd-day .px-bg { background-image: url(images/bg-octopus.jpg); }
.fd-day::before { background: linear-gradient(180deg, rgba(4,66,81,.8) 0%, rgba(4,66,81,.5) 100%); }
.fd-photo.fd-why { padding: clamp(48px,7vw,96px) 0; }
.fd-photo.fd-day { padding: clamp(48px,6vw,80px) 0 clamp(90px,12vw,170px); }
.fd-photo.fd-day .fd-steps { margin-top: 0; }
@media (max-width: 700px) { .fd-why::before { background: rgba(4,66,81,.8); } }
/* What a day looks like: Daybreak yellow accents */
.fd-bar-yellow { background: #FFE600; }
.fd-bar-yellow h3 { color: var(--fathom); }
.fd-bar-yellow h3::after { background: var(--fathom); }
.fd-day .fd-steps li::before { background: #FFE600; color: var(--fathom); }

/* How to enroll: swell */
.enroll-band { background-color: var(--tailwind); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 560' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 400 C380 270 820 460 1440 290 V560 H0 Z' fill='%23F05523'/%3E%3Cpath d='M0 422 C380 292 820 482 1440 312 V560 H0 Z' fill='%23FFE600'/%3E%3Cpath d='M0 444 C380 314 820 504 1440 334 V560 H0 Z' fill='%23EAE1D6'/%3E%3Cpath d='M0 466 C380 336 820 526 1440 356 V560 H0 Z' fill='%2351453A'/%3E%3Cpath d='M0 488 C380 358 820 548 1440 378 V560 H0 Z' fill='%2355663D'/%3E%3Cpath d='M0 510 C380 380 820 570 1440 400 V560 H0 Z' fill='%23044251'/%3E%3C/svg%3E"); background-size: cover; background-position: center bottom; background-repeat: no-repeat; padding-bottom: clamp(150px,18vw,230px); }

.enroll-band .reach { margin: 18px 0 0; color: var(--fathom); font-weight: 700; font-size: 1.15rem; }
.enroll-band .reach a { color: #fff; font-family: var(--head); letter-spacing: .04em; text-decoration: none; border-bottom: 3px solid #FFE600; }
.enroll-band .reach { text-align: center; max-width: none; margin-left: auto; margin-right: auto; }
@media (max-width: 700px) { .enroll-band { background-size: 100% auto; background-position: center bottom; padding-bottom: 150px; } }

.about-photo figcaption .about-reach { margin-top: 10px; font-weight: 600; }
.about-photo figcaption .about-reach a { font-family: var(--head); font-weight: 700; letter-spacing: .04em; color: var(--fathom); text-decoration: none; border-bottom: 3px solid var(--windsock); white-space: nowrap; }
footer .fb-link { color: inherit; text-decoration: none; }
footer .fb-thin { font-weight: 300; }
footer .fb-bold { font-weight: 700; }
footer { font-weight: 600; }
footer .fb-thin { font-weight: 300; }
footer .fb-bold { font-weight: 700; }
footer .fb-link { transition: color .15s ease; }
footer .fb-link:hover, footer .fb-link:focus-visible { color: #fff; }
footer .fb-link:hover, footer .fb-link:focus-visible { color: #fff; font-weight: 700; }

/* Article hero photo with parallax */
.article-head.has-photo { position: relative; overflow: hidden; isolation: isolate; background: var(--fathom); padding: clamp(80px, 14vw, 170px) 0 clamp(48px, 8vw, 96px); }
.article-head.has-photo .px-bg { position: absolute; left: 0; right: 0; top: -18%; height: 136%; z-index: -2; background-size: cover; background-position: center; background-repeat: no-repeat; will-change: transform; }
.article-head.has-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,66,81,.55) 0%, rgba(4,66,81,.35) 40%, rgba(4,66,81,.8) 100%); }
.article-head.has-photo h1, .article-head.has-photo time, .article-head.has-photo .link-under { color: var(--white); }
.article-head.has-photo h1 { text-shadow: 0 2px 18px rgba(4,66,81,.5); }
.article-back { margin-top: 48px; }
.article-head.has-photo { min-height: clamp(460px, 78vh, 760px); display: flex; align-items: flex-end; padding: clamp(80px, 12vw, 140px) 0 clamp(48px, 7vw, 88px); }
.article-head.has-photo .wrap { width: 100%; }

/* Hero subtitle: "at Dive World Austin" on its own line except on phones */
.nowrap { white-space: nowrap; }
@media (max-width: 600px) { .br-wide { display: none; } .nowrap { white-space: normal; } .hero .lede, .lede { text-wrap: balance; } }