/* small cleanup pass — bsn, 6 May */
/* ===================================================================
   TUCK & DIVE — design tokens
   Palette: deep pool ink + teal, bright aqua accent, coral energy,
   medal gold. Display type is condensed/impact (diving = the vertical
   drop); body is a calm geometric sans; a monospace face carries
   results data like a scoreboard.
=================================================================== */
:root{
  --ink:        #071A26;
  --pool:       #0C3F52;
  --pool-2:     #0F5C73;
  --aqua:       #2BC4E0;
  --aqua-dim:   #8FDDEC;
  --foam:       #F4FAFB;   /* light background */
  --foam-dim:   #DCEBEE;
  --coral:      #FF6B4A;   /* CTA / energy accent */
  --gold:       #F0B429;   /* medal gold — brightened so it reads as the standout medal */
  --silver:     #B9C4CC;
  --bronze:     #D9A26D;   /* medal bronze — lightened/desaturated so it sits behind gold, not ahead of it */
  --ink-70:     rgba(7,26,38,0.7);
  --white-70:   rgba(255,255,255,0.72);

  --display: ui-rounded, "Avenir Next", "Trebuchet MS", -apple-system, BlinkMacSystemFont, sans-serif;
  --body: "Avenir Next", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", "SF Mono", Consolas, monospace;

  --maxw: 1180px;
  --radius: 8px;
  --shadow-soft: 0 22px 70px rgba(7,26,38,0.16);
  --shadow-card: 0 16px 44px rgba(7,26,38,0.09);
}

/* ---------------- Mobile-first section app pass ---------------- */
.js body.section-mode .page-panel{
  display:none !important;
}
.js body.section-mode .page-panel.is-active-section{
  display:block !important;
  animation:sectionIn .22s ease-out both;
}
@keyframes sectionIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
body.section-mode{
  background:#f5fbfd;
}
body.section-mode main{
  display:block;
}
body.section-mode .site-footer{
  margin-top:0;
}
.home-section-cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-top:26px;
  max-width:760px;
}
.home-section-cards a{
  display:grid;
  gap:4px;
  min-height:102px;
  padding:14px;
  border:1px solid rgba(143,221,236,0.28);
  border-radius:20px;
  color:#fff;
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(12px);
}
.home-section-cards span{
  color:#8fddec;
  font-size:12px;
  font-weight:950;
}
.home-section-cards strong{
  font-size:18px;
  line-height:1.05;
}
.home-section-cards small{
  color:rgba(255,255,255,0.78);
  font-weight:750;
}
.logo-options-panel{
  grid-column:1 / -1;
  margin-top:10px;
  padding:14px;
  border:1px solid rgba(143,221,236,0.2);
  border-radius:24px;
  background:rgba(7,26,38,0.42);
  backdrop-filter:blur(14px);
}
.logo-options-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.logo-options-grid figure{
  display:grid;
  gap:8px;
  margin:0;
}
.logo-options-grid img{
  width:100%;
  height:96px;
  object-fit:contain;
  padding:8px;
  border-radius:16px;
  background:#fff;
}
.logo-options-grid figcaption{
  color:#fff;
  font-size:12px;
  font-weight:900;
  text-align:center;
}
.brand-wordmark{
  aspect-ratio:760 / 300;
}

body.section-mode .team-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
body.section-mode .coach-card img{
  aspect-ratio:1 / 1;
  max-height:260px;
  object-position:center 12%;
}
body.section-mode .coach-card div{
  padding:20px;
}
body.section-mode .coach-card h3{
  font-size:23px;
}

body.section-mode .tools-section .sheet-builder-grid{
  grid-template-columns:1fr;
}
body.section-mode .tools-section .sheet-preview{
  position:static;
}
body.section-mode .tools-section .sheet-toolbar{
  grid-template-columns:1.2fr .72fr 1fr;
}
body.section-mode .tools-section .dive-row{
  grid-template-columns:32px .68fr 1fr .68fr .62fr .62fr minmax(150px, 1.35fr);
  gap:8px;
  padding:9px;
  align-items:end;
}
body.section-mode .tools-section .dive-code-wrap{
  grid-column:auto;
}
body.section-mode .tools-section .dive-number{
  width:30px;
  height:36px;
  border-radius:11px;
}
body.section-mode .tools-section .sheet-rows{
  max-height:none;
  overflow:visible;
}
body.section-mode .tools-section .sheet-toolbar input,
body.section-mode .tools-section .sheet-toolbar select,
body.section-mode .tools-section .dive-row select{
  min-height:40px;
  padding:8px 9px;
}

@media (max-width:760px){
  .site-nav{
    position:sticky;
  }
  .home-hero .wrap{
    display:grid;
    gap:18px;
  }
  .home-section-cards{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    margin-top:18px;
  }
  .home-section-cards a{
    min-height:82px;
    padding:12px;
    border-radius:18px;
  }
  .logo-options-panel{
    margin-top:0;
    padding:12px;
  }
  .logo-options-grid{
    grid-template-columns:1fr;
  }
  .logo-options-grid img{
    height:78px;
  }
  .hero-logo-stage{
    order:-1;
    margin-inline:auto;
  }
  body.section-mode .section-band,
  body.section-mode .vision-band,
  body.section-mode .video-band,
  body.section-mode .tools-section,
  body.section-mode .results-section,
  body.section-mode .outreach-band,
  body.section-mode .snapshot-band{
    min-height:calc(100svh - 66px);
    padding-top:28px;
    padding-bottom:32px;
  }
  body.section-mode .team-grid{
    grid-template-columns:1fr;
  }
  body.section-mode .coach-card{
    display:grid;
    grid-template-columns:112px minmax(0, 1fr);
    align-items:stretch;
    border-radius:22px;
  }
  body.section-mode .coach-card img{
    height:100%;
    max-height:none;
    aspect-ratio:auto;
    border-width:0;
  }
  body.section-mode .coach-card div{
    padding:14px;
  }
  body.section-mode .coach-card h3{
    font-size:20px;
    margin-bottom:6px;
  }
  body.section-mode .coach-role{
    font-size:12px;
    margin-bottom:4px;
  }
  body.section-mode .coach-card p:not(.section-kicker):not(.coach-role){
    font-size:13.5px;
    line-height:1.45;
  }
  body.section-mode .coach-achievements{
    gap:6px;
    margin-top:10px;
  }
  body.section-mode .coach-achievements li{
    padding:7px 9px 7px 27px;
    font-size:11.5px;
    border-radius:12px;
  }
  body.section-mode .coach-achievements li::before{
    left:9px;
    width:9px;
    height:9px;
    box-shadow:0 0 0 3px rgba(255,90,50,0.12);
  }
  body.section-mode .tools-section #dd-finder{
    display:grid;
    gap:14px;
  }
  body.section-mode .tools-section .sheet-toolbar{
    grid-template-columns:1fr 1fr;
  }
  body.section-mode .tools-section .sheet-toolbar label:first-child{
    grid-column:1 / -1;
  }
  body.section-mode .tools-section .dive-row{
    grid-template-columns:28px 1fr 1fr 1fr;
    gap:7px;
    padding:8px;
    border-radius:16px;
  }
  body.section-mode .tools-section .dive-row label{
    font-size:9px;
  }
  body.section-mode .tools-section .dive-number{
    width:28px;
    height:38px;
    grid-row:span 2;
  }
  body.section-mode .tools-section .dive-code-wrap{
    grid-column:2 / -1;
  }
  body.section-mode .tools-section .sheet-toolbar input,
  body.section-mode .tools-section .sheet-toolbar select,
  body.section-mode .tools-section .dive-row select{
    min-height:36px;
    padding:7px 8px;
    border-radius:12px;
    font-size:12px;
  }
  body.section-mode .tools-section .sheet-builder-panel,
  body.section-mode .tools-section .sheet-preview{
    padding:12px;
    border-radius:20px;
  }
  body.section-mode .tools-section .sheet-table{
    min-width:520px;
  }
}

/* ---------------- Final continuous-scroll correction ---------------- */
.js body .page-panel{
  display:block !important;
}
body{
  overflow-x:hidden;
}
.site-nav{
  position:sticky;
}
.home-hero{
  min-height:min(820px, calc(100svh - 72px));
}
.hero-grid{
  grid-template-columns:minmax(0, 1fr) minmax(260px, 0.48fr);
}
.hero-logo-stage{
  isolation:isolate;
  animation:heroFloat 5.2s ease-in-out infinite;
}
.hero-logo-stage::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:999px;
  background:conic-gradient(from 90deg, rgba(43,196,224,0), rgba(43,196,224,0.48), rgba(255,255,255,0.3), rgba(43,196,224,0));
  z-index:-2;
  animation:logoSpin 12s linear infinite;
}
.hero-logo-stage::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:999px;
  background:rgba(255,255,255,0.86);
  z-index:-1;
  box-shadow:0 22px 60px rgba(7,26,38,0.28);
}
.hero-logo-stage img{
  width:82%;
  margin:auto;
  filter:drop-shadow(0 12px 18px rgba(7,26,38,0.18));
}
@keyframes heroFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
@keyframes logoSpin{
  to{ transform:rotate(360deg); }
}

.centre-heading{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:18px;
}
.centre-heading .centre-logo{
  flex:0 0 auto;
  width:82px;
  max-height:82px;
  object-fit:contain;
  margin:0;
}
.centre-heading .centre-logo.wide{
  width:124px;
}
.centre-heading .section-kicker{
  margin-bottom:4px;
}
.centre-heading .centre-title{
  margin:0;
}

.result-event-stack{
  display:grid;
  gap:34px;
}
.result-event{
  overflow:hidden;
  border:1px solid rgba(143,221,236,0.22);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow:0 22px 60px rgba(0,0,0,0.22);
}
.result-event-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  padding:24px 24px 18px;
}
.result-event-head h3{
  color:#fff;
  font-size:clamp(28px, 4vw, 48px);
  line-height:1;
}
.result-carousel{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(280px, 38%);
  gap:14px;
  overflow-x:auto;
  padding:0 24px 22px;
  scroll-snap-type:x mandatory;
  scrollbar-color:var(--aqua) rgba(255,255,255,0.12);
}
.result-carousel:focus-visible{ outline:3px solid var(--aqua); outline-offset:3px; }
.result-carousel img{
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  object-position:center 20%;
  border-radius:22px;
  scroll-snap-align:start;
  box-shadow:0 18px 36px rgba(0,0,0,0.24);
}
.result-table-wrap{
  overflow-x:auto;
  padding:0 24px 24px;
}
.result-table{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0 8px;
  color:#eaf9fd;
  font-size:14px;
}
.result-table th{
  padding:0 14px 8px;
  color:var(--aqua-dim);
  font-size:11px;
  font-weight:950;
  text-align:left;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.result-table td{
  padding:13px 14px;
  background:rgba(255,255,255,0.08);
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  font-weight:760;
}
.result-table td:first-child{
  border-left:1px solid rgba(255,255,255,0.08);
  border-radius:14px 0 0 14px;
  color:#fff;
  font-weight:950;
}
.result-table td:last-child{
  border-right:1px solid rgba(255,255,255,0.08);
  border-radius:0 14px 14px 0;
}
.medal-chip{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:4px 10px;
  border-radius:999px;
  color:#1a1304;
  background:#d8e5eb;
  font-size:12px;
  font-weight:950;
  vertical-align:middle;
}
.medal-chip.gold{ background:linear-gradient(135deg, #fff3b0, #f0b429); }
.medal-chip.silver{ background:linear-gradient(135deg, #eef5f8, #b9c4cc); }
.medal-chip.bronze{ background:linear-gradient(135deg, #f3ddc4, #d9a26d); color:#5b3d0a; }

.position-chip{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:4px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  vertical-align:middle;
  border:1px solid transparent;
}
.position-chip.near-podium{
  background:linear-gradient(135deg, #ffd9c2, #ff9a6b);
  color:#5c2408;
}
.position-chip.top10{
  background:linear-gradient(135deg, #c7f3ff, #6fd6ee);
  color:#073045;
}
.position-chip.finisher{
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.24);
  color:#eaf9fd;
}

/* ---------------- FAQ ---------------- */
/* wired up quickly one evening — B.S.N., 21 Jun */
.faq-list{
  display:grid;
  gap:12px;
  max-width:820px;
}
.faq-item{
  background:#fff;
  border:1px solid var(--foam-dim);
  border-radius:var(--radius-lg, 20px);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  cursor:pointer;
  font-weight:800;
  font-size:16.5px;
  color:var(--ink);
  list-style:none;
}
.faq-item summary > span:first-child{ font-size:inherit; line-height:1.35; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-icon{
  flex:none;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--sky, var(--foam-dim));
  color:var(--pool-2);
  font-weight:900;
  transition:transform 0.15s ease;
}
.faq-item[open] .faq-icon{ transform:rotate(45deg); background:var(--duo-green-dark); color:#fff; }
.faq-answer{ padding:0 22px 20px; color:#3C5560; line-height:1.6; }
.faq-answer p{ margin:0; }

.minimal-tools{
  padding:78px 0;
  background:#f7fcfd;
}
.minimal-tools .section-head{
  max-width:760px;
}
.minimal-tools .tools-grid{
  gap:18px;
}
.minimal-tools .tool-card{
  border:1px solid #dbeef3;
  border-radius:20px;
  box-shadow:none;
  background:#fff;
}
.minimal-tools #dd-finder{
  display:grid;
  grid-template-columns:minmax(0, .75fr) minmax(320px, .65fr);
  gap:18px;
  padding:22px;
}
.minimal-tools #sheet-builder{
  padding:22px;
}
.minimal-tools .sheet-builder-grid{
  grid-template-columns:1fr;
}
.minimal-tools .sheet-preview{
  position:static;
}
.minimal-tools .sheet-builder-panel,
.minimal-tools .sheet-preview,
.minimal-tools .dd-card{
  border:1px solid #dbeef3;
  border-radius:18px;
  box-shadow:none;
  background:#fff;
}
.minimal-tools .sheet-toolbar{
  grid-template-columns:1.2fr .72fr 1fr;
  gap:10px;
}
.minimal-tools .dive-row{
  grid-template-columns:32px .68fr 1fr .68fr .62fr .62fr minmax(150px, 1.35fr);
  gap:8px;
  padding:9px;
  border-radius:14px;
}
.minimal-tools .dive-code-wrap{
  grid-column:auto;
}
.minimal-tools .dive-number{
  width:30px;
  height:36px;
  border-radius:10px;
}
.minimal-tools .sheet-rows{
  max-height:none;
  overflow:visible;
}
.minimal-tools .sheet-toolbar input,
.minimal-tools .sheet-toolbar select,
.minimal-tools .dive-row select{
  min-height:40px;
  padding:8px 9px;
  border-radius:12px;
  border-width:1px;
}

@media (max-width:980px){
  .hero-grid{
    grid-template-columns:1fr;
  }
  .hero-logo-stage{
    width:min(150px, 42vw);
    justify-self:center;
  }
  .result-carousel{
    grid-auto-columns:minmax(250px, 78%);
  }
  .minimal-tools #dd-finder{
    grid-template-columns:1fr;
  }
}
@media (max-width:760px){
  .wrap{
    padding-left:16px;
    padding-right:16px;
  }
  .home-hero .wrap{
    padding-top:76px;
    padding-bottom:42px;
  }
  .hero-logo-stage{
    width:min(130px, 38vw);
  }
  .centre-heading{
    align-items:flex-start;
    gap:12px;
  }
  .centre-heading .centre-logo{
    width:58px;
    max-height:58px;
  }
  .centre-heading .centre-logo.wide{
    width:92px;
  }
  .result-event{
    border-radius:22px;
  }
  .result-event-head{
    display:grid;
    padding:18px 16px 14px;
  }
  .result-carousel{
    grid-auto-columns:86%;
    gap:10px;
    padding:0 16px 16px;
  }
  .result-carousel img{
    border-radius:16px;
    aspect-ratio:4 / 3;
    object-position:center 18%;
  }
  .result-table-wrap{
    padding:0 16px 16px;
  }
  .result-table{
    min-width:640px;
    font-size:12.5px;
  }
  .result-table td{
    padding:10px 11px;
  }
  .minimal-tools{
    padding:50px 0;
  }
  .minimal-tools #dd-finder,
  .minimal-tools #sheet-builder{
    padding:14px;
  }
  .minimal-tools .sheet-toolbar{
    grid-template-columns:1fr 1fr;
  }
  .minimal-tools .sheet-toolbar label:first-child{
    grid-column:1 / -1;
  }
  .minimal-tools .dive-row{
    grid-template-columns:28px 1fr 1fr 1fr;
    gap:7px;
    padding:8px;
  }
  .minimal-tools .dive-row label{
    font-size:9px;
  }
  .minimal-tools .dive-number{
    width:28px;
    height:38px;
    grid-row:span 2;
  }
  .minimal-tools .dive-code-wrap{
    grid-column:2 / -1;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(43,196,224,0.13), transparent 28rem),
    linear-gradient(180deg, #f8fcfd 0%, var(--foam) 42%, #edf6f8 100%);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; letter-spacing:0; margin:0; }
p{ margin:0; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--aqua); display:flex; align-items:center; gap:10px; font-weight:600;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--coral); display:inline-block; }

/* focus visibility */
a:focus-visible, button:focus-visible, .tab:focus-visible{
  outline:2px solid var(--coral); outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------- Depth gauge (signature motif) ----------------
   A vertical rule marking dive depths — 0m surface / 1m / 3m / 10m —
   used as a recurring divider that literally encodes the sport's own
   units instead of a generic numbered list. */
.gauge{
  display:flex; align-items:center; gap:0; margin:64px 0 40px;
  color:var(--pool-2);
}
.gauge .line{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--foam-dim) 15%,var(--foam-dim) 85%,transparent); }
.gauge .marks{ display:flex; gap:22px; padding:0 20px; font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; color:#7C97A0; }
.gauge .marks span::after{ content:"m"; opacity:0.6; }
.gauge.on-dark{ color:var(--aqua-dim); }
.gauge.on-dark .line{ background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18) 15%,rgba(255,255,255,0.18) 85%,transparent); }
.gauge.on-dark .marks{ color:var(--aqua-dim); }

/* ---------------- Nav ---------------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(7,26,38,0.82); backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:background 0.2s ease, box-shadow 0.2s ease;
}
.site-nav.is-scrolled{
  background:rgba(7,26,38,0.96);
  box-shadow:0 12px 34px rgba(7,26,38,0.2);
}
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding:14px 28px; }
.brand{ display:flex; align-items:center; gap:12px; font-family:var(--display); font-size:22px; color:#fff; letter-spacing:0.02em; }
.brand-logo{ height:64px; width:auto; display:block; filter:drop-shadow(0 8px 16px rgba(0,0,0,0.18)); }
.brand-copy{ display:flex; flex-direction:column; line-height:1.2; gap:2px; }
.brand-name{ font-weight:600; }
.brand small{ font-family:var(--mono); font-size:10px; color:var(--aqua-dim); letter-spacing:0.16em; display:block; font-weight:500; }
.nav-links{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:2px; list-style:none; margin:0; padding:0; }
.nav-links a{
  color:var(--white-70); font-size:13.5px; font-weight:600; padding:9px 11px; border-radius:20px;
  transition:background 0.15s, color 0.15s;
}
.nav-links a:hover{ color:#fff; background:rgba(255,255,255,0.08); }
.nav-links a.active{ color:var(--ink); background:var(--aqua); font-weight:600; }
.nav-links a.athlete-link{
  color:#fff;
  background:linear-gradient(135deg, rgba(227,169,74,0.96), rgba(255,90,50,0.92));
  box-shadow:0 10px 24px rgba(227,169,74,0.18);
}
.nav-toggle{ display:none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:1320px){
  .nav-links{
    position:fixed; inset:74px 0 auto 0; height:0; overflow:hidden; flex-direction:column;
    background:rgba(7,26,38,0.98); padding:0 28px; gap:4px; transition:height 0.25s ease, padding 0.25s ease;
    box-shadow:0 26px 50px rgba(0,0,0,0.24);
  }
  .nav-links.open{ height:calc(100vh - 74px); padding-top:18px; }
  .nav-links a{ padding:13px 6px; border-radius:0; border-bottom:1px solid rgba(255,255,255,0.06); color:var(--white-70); background:none; }
  .nav-links a:hover{ color:#fff; background:transparent; }
  .nav-links a.active{ background:none; color:var(--aqua); }
  .nav-toggle{
    display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; padding:8px;
  }
  .nav-toggle-label{ font-family:var(--body); font-size:13px; font-weight:800; color:var(--ink); }
  .nav-toggle-bars{ display:flex; flex-direction:column; gap:5px; }
  .nav-toggle-bars span{ width:22px; height:2px; background:var(--ink); display:block; transition:transform 0.2s ease, opacity 0.2s ease; }
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px;
  padding:13px 24px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(7,26,38,0.13); }
.btn-coral{ background:var(--duo-green-dark); color:#fff; }
.btn-coral:hover{ background:#B93A22; }
.btn-ghost{ border-color:rgba(255,255,255,0.35); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,0.1); }
.btn-line{ border-color:var(--pool-2); color:var(--pool); }
.btn-line:hover{ background:var(--foam-dim); }
.self-start{ align-self:flex-start; margin-top:26px; }

/* ---------------- Page hero (interior pages) ---------------- */
.page-hero{
  background:
    linear-gradient(135deg, rgba(7,26,38,0.95), rgba(12,63,82,0.92)),
    url("images/hero-diver.jpg") center 28% / cover;
  color:#fff; padding:86px 0 68px; position:relative; overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; inset:auto 0 0; height:110px;
  background:linear-gradient(to bottom, transparent, var(--foam));
  pointer-events:none;
}
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{ font-size:clamp(40px,7vw,72px); line-height:0.98; margin:10px 0 14px; }
.page-hero .lede{ max-width:640px; font-size:17.5px; color:var(--white-70); }

/* ---------------- Section basics ---------------- */
section{ padding:14px 0; }
.page-main{ padding-top:60px; padding-bottom:30px; }
.section-head{ max-width:760px; margin-bottom:38px; }
.section-head.major{ max-width:900px; }
.section-head h2{ font-size:clamp(38px,5.8vw,68px); color:var(--ink); margin-top:12px; line-height:0.98; }
.section-head p{ color:#3C5560; font-size:16px; margin-top:12px; }
.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--pool-2);
  font-family:var(--mono);
  font-size:13px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.section-kicker::before{
  content:"";
  width:34px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--gold), var(--aqua));
  box-shadow:none;
}
.section-kicker.light{ color:var(--aqua-dim); }
.light-head h2{ color:#fff; }

/* ---------------- Announcement board ---------------- */
/* Hidden by default via inline style (set in announcements.js) whenever
   there's nothing active to show — a marketing site shouldn't display
   an empty "news" box to visitors. */
.announcements-section{ padding-top:34px; padding-bottom:10px; }
.announcements-section h2{ font-size:clamp(24px,3.2vw,32px); color:var(--ink); margin:2px 0 18px; }
.announcement-list{ display:grid; gap:12px; }
.announcement-card{
  display:flex; flex-direction:column; gap:4px;
  background:linear-gradient(135deg, rgba(255,107,74,0.08), rgba(12,63,82,0.05));
  border:1px solid rgba(255,107,74,0.28);
  border-radius:14px;
  padding:16px 20px;
}
.announcement-title{ font-weight:800; color:var(--ink); font-size:15px; }
.announcement-message{ color:#3C5560; font-size:14px; line-height:1.5; }

/* Image carousel — a "colossal" full-width slide that auto-advances,
   sliding left. Used whenever at least one announcement has a photo
   attached; falls back to the plain text list above (announcement-list)
   for text-only announcements, or when none have images yet.

   Photos posted by coaches can be any shape — a tall portrait of one
   athlete, a wide banner, a square Instagram-style graphic. A fixed
   aspect-ratio box with object-fit:cover cropped whatever didn't match
   it, chopping heads off portrait shots and losing the edges of wide
   ones. Instead each slide now has two layers: a full-bleed blurred
   copy of the same photo filling the frame (so there's never an empty
   letterbox bar), with the actual photo centered on top at its full,
   uncropped shape via object-fit:contain. Every photo displays whole,
   regardless of its own dimensions. */
.announcement-carousel{
  position:relative; width:100%; overflow:hidden; border-radius:var(--radius);
  height:420px; background:#0c1f28; box-shadow:var(--shadow-card);
}
.announcement-carousel-track{
  display:flex; height:100%; transition:transform 0.7s cubic-bezier(.65,0,.35,1);
}
.announcement-slide{
  position:relative; flex:0 0 100%; height:100%; overflow:hidden;
}
.announcement-slide-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:blur(32px) brightness(0.55) saturate(1.15); transform:scale(1.2);
}
.announcement-slide-fg{
  position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block;
}
.announcement-slide-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:34px 28px 20px; color:#fff;
  background:linear-gradient(0deg, rgba(7,26,38,0.88), rgba(7,26,38,0));
}
.announcement-slide-caption p.announcement-title{ color:#fff; font-size:17px; }
.announcement-slide-caption p.announcement-message{ color:rgba(255,255,255,0.82); }
.announcement-carousel-dots{
  position:absolute; bottom:14px; right:20px; z-index:2; display:flex; gap:6px;
}
.announcement-carousel-dots button{
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.4); border:none; padding:0; cursor:pointer;
}
.announcement-carousel-dots button.active{ background:var(--coral); width:20px; border-radius:999px; }
@media (max-width:760px){
  .announcement-carousel{ height:300px; }
  .announcement-slide-caption{ padding:20px 16px 14px; }
}

/* ---------------- New Student Journey — a real timeline: one
   connecting line running behind every numbered stop, instead of a
   plain card grid. Horizontal on wide screens, a single vertical
   line down the left on narrow ones. ---------------- */
.journey-track{
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:28px; position:relative;
}
.journey-track::before{
  content:""; position:absolute; top:17px; left:calc(10% - 18px); right:calc(10% - 18px); height:3px;
  background:linear-gradient(90deg, rgba(255,107,74,0.15), var(--coral) 15%, var(--coral) 85%, rgba(255,107,74,0.15));
  z-index:0;
}
.journey-step{
  position:relative; padding:0 14px; text-align:center; z-index:1;
}
.journey-num{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%;
  background:var(--coral); color:#fff; font-family:var(--display); font-weight:700; font-size:15px; margin-bottom:16px;
  box-shadow:0 0 0 6px var(--bg, #F7F9FA), 0 8px 18px rgba(255,107,74,0.35);
}
.journey-step h3{ font-family:var(--body); font-weight:800; font-size:16px; color:var(--ink); margin-bottom:6px; }
.journey-step p{ color:#3C5560; font-size:13.5px; line-height:1.5; }
@media (max-width:1080px){
  .journey-track{ grid-template-columns:repeat(3,1fr); row-gap:36px; }
  .journey-track::before{ display:none; }
}
@media (max-width:640px){
  .journey-track{ grid-template-columns:1fr; gap:0; padding-left:26px; margin-top:8px; }
  .journey-track::before{
    display:block; top:0; bottom:26px; left:11px; right:auto; width:3px; height:auto;
    background:linear-gradient(180deg, rgba(255,107,74,0.15), var(--coral) 10%, var(--coral) 90%, rgba(255,107,74,0.15));
  }
  .journey-step{ text-align:left; padding:0 0 30px 26px; margin-left:-26px; }
  .journey-num{ position:absolute; left:-26px; top:-2px; margin-bottom:0; width:28px; height:28px; font-size:13px; }
  .journey-step h3, .journey-step p{ margin-left:8px; }
}

/* ---------------- Testimonials ---------------- */
.testimonial-card{ padding:26px; display:flex; flex-direction:column; gap:14px; }
.testimonial-card blockquote{ margin:0; }
.testimonial-card blockquote p{ color:var(--ink); font-size:15px; line-height:1.6; font-style:italic; }
.testimonial-name{ color:#7C97A0; font-size:13px; font-weight:700; margin:0; }

/* ---------------- Cards ---------------- */
.card{
  background:rgba(255,255,255,0.92); border-radius:var(--radius); border:1px solid rgba(190,215,220,0.7);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.card:hover{ box-shadow:0 22px 60px rgba(7,26,38,0.13); }

/* ---------------- Footer ---------------- */
.site-footer{ background:var(--ink); color:var(--white-70); padding:52px 0 30px; margin-top:80px; }
.site-footer .wrap{ display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; }
.site-footer .brand{ margin-bottom:14px; }
.site-footer .brand-logo{ height:58px; }
.site-footer .cols{ display:flex; gap:56px; flex-wrap:wrap; }
.site-footer h3{ font-family:var(--body); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--aqua-dim); margin-bottom:12px; font-weight:600; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14.5px; }
.site-footer a:hover{ color:#fff; }
.footer-blurb{ max-width:280px; font-size:14px; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,0.1); margin-top:36px; padding-top:20px; font-size:13px; color:#6E8B96; }
.foot-bottom .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.foot-credit{ padding-top:10px; font-size:12px; color:#4d6b76; text-align:center; }

/* ---------------- Wave divider ---------------- */
.wave{ display:block; width:100%; height:auto; }

/* ---------------- Medal + result chips ----------------
   Each chip is a single, self-contained badge: medal (or place)
   PLUS the event/height nested inside it, so the two pieces of
   information that matter — what they won, and in what event —
   are never visually separated. */
.chip{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  padding:6px 6px 6px 13px; border-radius:22px; white-space:nowrap; line-height:1.3;
}
.chip .ev{
  font-family:var(--mono); font-weight:600; font-size:11.5px; letter-spacing:0.02em;
  padding:5px 10px; border-radius:14px; background:rgba(255,255,255,0.55);
}
.chip.gold{ background:var(--gold); color:#5B3D0A; }
.chip.gold .ev{ color:#5B3D0A; }
.chip.silver{ background:var(--silver); color:#3C454A; }
.chip.silver .ev{ color:#3C454A; }
.chip.bronze{ background:var(--bronze); color:#6b4a28; }
.chip.bronze .ev{ color:#6b4a28; }
.chip.place{ background:#EEF4F5; color:#3C5560; padding-left:14px; }
.chip.place .ev{ background:rgba(255,255,255,0.75); }

/* ---------------- Results list (single continuous list) ---------------- */
.results-list{ display:flex; flex-direction:column; gap:16px; }
.meet-card{ padding:26px 26px 20px; }
.results-list .meet-card:nth-child(-n+5){
  border-color:rgba(227,169,74,0.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(227,169,74,0.16), transparent 16rem),
    rgba(255,255,255,0.96);
}
.results-list .meet-card:nth-child(-n+5) h3{ color:#073045; }
.results-list .meet-card:nth-child(-n+5) .tier{ color:#9b640d; }
.meet-card .tier{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--coral); margin-bottom:8px; display:block;
}
.meet-card h3{ font-family:var(--body); font-weight:800; font-size:18px; color:var(--pool); margin-bottom:16px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.meet-card h3 .yr{ font-family:var(--mono); font-size:13px; color:#7C97A0; font-weight:600; }
.athlete-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 0; border-top:1px solid #EEF4F5; flex-wrap:wrap; }
.athlete-row:first-of-type{ border-top:none; }
.athlete-row .name{ font-weight:700; font-size:14.5px; }
.athlete-row .results{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

/* ---------------- Stats row ---------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.stat{ text-align:left; padding:0 22px; border-left:1px solid rgba(255,255,255,0.14); }
.stat:first-child{ padding-left:0; border-left:none; }
.stat .num{ font-family:var(--display); font-size:clamp(30px,4vw,46px); color:var(--aqua); line-height:1; }
.stat .lbl{ font-size:12.5px; color:var(--white-70); margin-top:8px; }
@media (max-width:760px){
  .stats{ grid-template-columns:repeat(2,1fr); gap:22px 0; }
  .stat{ border-left:none; padding-left:0; }
}

/* ---------------- Utility grids ---------------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:900px){
  .grid-2{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
}

.pill{ display:inline-block; font-size:13px; font-weight:600; padding:7px 14px; border-radius:20px; background:var(--foam-dim); color:var(--pool); }
.pill-row{ display:flex; gap:10px; flex-wrap:wrap; }
.center-cta{ text-align:center; padding:10px 0 60px; }
.center-cta p{ color:#3C5560; margin-bottom:18px; }

.centre-card{ grid-template-columns:1fr 1fr; }
.centre-showcase{
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(340px, 0.92fr);
  margin-bottom:36px;
  border:0;
  background:#fff;
  box-shadow:0 26px 74px rgba(7,26,38,0.14);
}
.centre-showcase.goregaon-card{ grid-template-columns:minmax(340px, 0.92fr) minmax(0, 1.08fr); }
.centre-photo{ min-height:390px; overflow:hidden; background:var(--pool); }
.centre-photo img{ width:100%; height:100%; object-fit:cover; }
.centre-copy{ padding:38px; display:flex; flex-direction:column; justify-content:center; }
.centre-logo{
  width:112px;
  max-height:92px;
  object-fit:contain;
  margin-bottom:22px;
  filter:drop-shadow(0 12px 18px rgba(7,26,38,0.12));
}
.centre-logo.wide{ width:min(280px, 100%); max-height:88px; object-position:left center; }
.profile-row{
  display:grid;
  grid-template-columns:minmax(260px, 330px) 1fr;
  gap:40px;
  align-items:center;
}
.coach-profile{ margin-bottom:70px; }
.coach-profile.compact{ margin-bottom:20px; }
.profile-row img{
  width:100% !important;
  aspect-ratio:4 / 5;
  height:auto !important;
  object-fit:cover;
  object-position:center top;
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
.profile-name{
  font-family:var(--body);
  font-size:32px;
  margin:10px 0 2px;
  color:var(--ink);
  font-weight:800;
}
.profile-copy{
  color:#3C5560;
  margin:16px 0 20px;
  font-size:15.5px;
  max-width:560px;
}
@media (max-width:700px){
  .profile-row{ grid-template-columns:1fr; }
  .profile-row img{ max-width:360px; margin:0 auto; }
}
@media (max-width:760px){
  .centre-card{ grid-template-columns:1fr !important; }
  .centre-photo{ min-height:260px; order:0 !important; }
  .centre-copy{ order:1 !important; padding:28px; }
  .centre-logo{ width:96px; max-height:78px; }
  .centre-logo.wide{ width:min(230px, 100%); }
}

/* gallery */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gallery img{ border-radius:var(--radius); height:230px; width:100%; object-fit:cover; box-shadow:var(--shadow-card); }
@media (max-width:760px){ .gallery{ grid-template-columns:1fr 1fr; } .gallery img{ height:170px; } }

/* ---------------- World-class polish layer ---------------- */
.home-hero{
  min-height:calc(100vh - 74px);
  background:
    linear-gradient(90deg, rgba(7,26,38,0.96) 0%, rgba(7,26,38,0.78) 45%, rgba(7,26,38,0.2) 100%),
    linear-gradient(0deg, rgba(7,26,38,0.42), rgba(7,26,38,0.08)),
    url("images/bg-pool-board.jpg") center / cover no-repeat;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.home-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:36%;
  background:linear-gradient(to bottom, transparent, rgba(244,250,251,0.98));
  pointer-events:none;
}
.home-hero .wrap{
  position:relative;
  z-index:1;
  min-height:calc(100vh - 74px);
  display:grid;
  grid-template-columns:minmax(0, 0.92fr) minmax(360px, 0.72fr);
  gap:42px;
  align-items:end;
  padding-top:74px;
  padding-bottom:54px;
}
.hero-grid{ display:block; max-width:720px; }
.hero-copy{ align-self:center; max-width:760px; }
.hero-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.hero-kicker .dot{ width:9px; height:9px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 9px rgba(255,90,50,0.15); }
.hero-title{
  font-size:clamp(58px, 10vw, 132px);
  line-height:0.87;
  max-width:820px;
  text-wrap:balance;
}
.hero-lede{
  max-width:590px;
  color:rgba(255,255,255,0.78);
  font-size:clamp(16px, 1.7vw, 20px);
  margin:26px 0 32px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-logo-stage{
  position:relative;
  align-self:center;
  justify-self:center;
  width:min(360px, 86vw);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.hero-logo-stage::before,
.hero-logo-stage::after,
.hero-logo-orbit{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:50%;
  z-index:-1;
}
.hero-logo-stage::before{
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.22);
  backdrop-filter:blur(10px);
  box-shadow:0 30px 90px rgba(0,0,0,0.28);
}
.hero-logo-stage::after{
  inset:0;
  border:2px dashed rgba(143,221,236,0.42);
  animation:orbitSpin 18s linear infinite;
}
.hero-logo-orbit{
  inset:15%;
  border:10px solid rgba(255,90,50,0.22);
  border-left-color:rgba(43,196,224,0.62);
  border-bottom-color:rgba(227,169,74,0.58);
  animation:orbitSpin 12s linear infinite reverse;
}
.hero-logo-stage img{
  width:72%;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,0.24));
}
.hero-logo-caption{
  position:absolute;
  left:50%;
  bottom:6%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  align-items:center;
  white-space:nowrap;
  padding:9px 12px;
  border-radius:999px;
  color:#073045;
  background:#fff;
  box-shadow:inset 0 -4px 0 rgba(7,26,38,0.1), 0 16px 30px rgba(0,0,0,0.16);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.hero-logo-caption strong{
  color:#e8501f;
}
@keyframes orbitSpin{ to{ transform:rotate(360deg); } }
.hero-stage{
  align-self:end;
  display:grid;
  gap:16px;
  position:relative;
}
.hero-stage{ display:none; }
.hero-stage::before{
  content:"";
  position:absolute;
  inset:7% -8% 22% 14%;
  border:1px solid rgba(143,221,236,0.36);
  border-radius:999px;
  transform:rotate(-18deg);
  pointer-events:none;
}
.hero-stage img{
  width:100%;
  height:min(56vh, 570px);
  object-fit:cover;
  object-position:68% 62%;
  border-radius:18px;
  box-shadow:0 34px 90px rgba(0,0,0,0.38);
  border:1px solid rgba(255,255,255,0.18);
}
.hero-panel{
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(16px);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:0 26px 70px rgba(0,0,0,0.22);
}

/* ---------------- Continuous homepage sections ---------------- */
.portal-strip{
  padding:78px 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(43,196,224,0.16), transparent 22rem),
    #fff;
  border-bottom:1px solid rgba(190,215,220,0.7);
}
.portal-grid{
  display:grid;
  grid-template-columns:minmax(0, 0.9fr) minmax(360px, 0.8fr);
  gap:30px;
  align-items:center;
}
.portal-grid.compact h2{ margin-bottom:0; }
.portal-grid h2{
  font-size:clamp(46px, 7vw, 86px);
  line-height:1;
  margin:8px 0 14px;
}
.portal-grid p{ color:#3C5560; max-width:590px; }
.mini-login{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:16px;
  align-items:end;
  padding:34px;
  border-radius:24px;
  background:linear-gradient(135deg, #f7fbfc, #fff);
  box-shadow:0 28px 80px rgba(7,26,38,0.16);
}
.mini-login label{
  display:grid;
  gap:7px;
  font-size:12px;
  font-weight:800;
  color:var(--pool);
}
.mini-login input{
  width:100%;
  border:1px solid #c9dce1;
  border-radius:10px;
  padding:16px 15px;
  font:inherit;
}
.mini-login .login-note{
  grid-column:1 / -1;
  min-height:20px;
  color:#b13a22 !important;
  font-weight:800;
  margin:0;
}
.forgot-link{
  grid-column:1 / -1;
  color:var(--pool-2);
  font-size:13px;
  font-weight:800;
  justify-self:start;
}
.dd-finder-band{
  padding:92px 0;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,90,50,0.18), transparent 23rem),
    linear-gradient(180deg, #f7fff3, #ecf9ff);
}
.dd-grid{
  display:grid;
  grid-template-columns:minmax(0, 0.82fr) minmax(360px, 0.76fr);
  gap:34px;
  align-items:center;
}
.dd-copy h2{
  font-size:clamp(42px, 6vw, 76px);
  line-height:0.96;
}
.dd-copy p:not(.section-kicker){
  color:#36535e;
  font-size:17px;
  margin-top:18px;
  max-width:680px;
}
.dd-card{
  padding:30px;
  border-radius:28px;
  background:#fff;
  border:2px solid rgba(255,90,50,0.22);
  box-shadow:0 28px 80px rgba(58,32,24,0.14);
}
.dd-card label{
  display:block;
  color:#1f6f35;
  font-weight:900;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:10px;
}
.dd-search{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}
.dd-search input{
  min-width:0;
  border:2px solid #d7edda;
  border-radius:16px;
  padding:16px;
  font:inherit;
  font-weight:800;
  text-transform:uppercase;
}
.dd-result{
  margin-top:18px;
  padding:24px;
  border-radius:22px;
  background:linear-gradient(135deg, #ff6b4a, #e8451f);
  color:#fff;
  display:grid;
  gap:4px;
}
.dd-result span{ font-size:13px; text-transform:uppercase; letter-spacing:0.12em; font-weight:900; }
.dd-result strong{ font-size:clamp(42px, 8vw, 76px); line-height:1; }
.dd-result small{ color:rgba(255,255,255,0.86); font-weight:800; }
.dd-format{
  margin-top:16px;
  color:#36535e;
  font-size:14px;
}
.video-band{
  padding:92px 0;
  color:#fff;
  background:
    radial-gradient(circle at 12% 15%, rgba(43,196,224,0.22), transparent 26rem),
    linear-gradient(135deg, #071a26, #0c3f52 74%);
}
.video-grid{
  display:grid;
  grid-template-columns:minmax(0, 0.72fr) minmax(420px, 1fr);
  gap:38px;
  align-items:center;
}
.video-grid h2{
  font-size:clamp(38px, 6vw, 72px);
  line-height:0.96;
}
.video-grid p:not(.section-kicker){
  color:rgba(255,255,255,0.76);
  margin:18px 0 26px;
  font-size:17px;
}
.intro-video{
  width:100%;
  border-radius:18px;
  box-shadow:0 34px 90px rgba(0,0,0,0.32);
  border:1px solid rgba(255,255,255,0.14);
  background:#000;
}
.snapshot-band{
  padding:58px 0;
  color:#fff;
  background:
    radial-gradient(circle at 10% 0%, rgba(227,169,74,0.35), transparent 22rem),
    linear-gradient(135deg, #071a26, #0f5c73);
}
.snapshot-grid{
  display:grid;
  grid-template-columns:minmax(240px, 0.42fr) 1fr;
  gap:36px;
  align-items:center;
}
.snapshot-intro h2{
  font-size:clamp(34px, 5vw, 64px);
  line-height:0.98;
}
.snapshot-metrics{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.snapshot-metrics div{
  min-height:160px;
  padding:22px;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:14px;
  background:rgba(255,255,255,0.08);
}
.snapshot-metrics strong{
  display:block;
  color:var(--gold);
  font-family:var(--display);
  font-size:clamp(34px, 4vw, 52px);
  line-height:1;
}
.snapshot-metrics span{
  display:block;
  margin-top:10px;
  color:rgba(255,255,255,0.76);
}
.results-section{
  padding:92px 0;
  background:
    radial-gradient(circle at 80% 0%, rgba(227,169,74,0.3), transparent 28rem),
    linear-gradient(135deg, #071a26, #0c3f52 72%, #071a26);
}
.tournament-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
}
.tournament-stack{
  display:grid;
  gap:34px;
}
.result-category{ margin-top:58px; }
.result-category:first-of-type{ margin-top:0; }
.result-category > h3{
  color:#fff;
  font-family:var(--body);
  font-size:clamp(30px, 4.5vw, 52px);
  font-weight:900;
  margin-bottom:20px;
}
.tournament-card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 34px 100px rgba(0,0,0,0.28);
  border:1px solid rgba(227,169,74,0.28);
}
.tournament-card > img{
  width:100%;
  height:auto;
  object-fit:contain;
  background:#f7fbfc;
}
.tournament-body{ padding:28px; }
.tournament-tier{
  font-family:var(--mono);
  font-size:12px;
  font-weight:800;
  color:#9b640d;
  text-transform:uppercase;
  letter-spacing:0.12em;
}
.tournament-body h3{
  font-family:var(--body);
  font-size:26px;
  line-height:1.12;
  margin:8px 0 20px;
}
.winner-list{
  display:grid;
  gap:12px;
}
.winner-list div{
  display:grid;
  grid-template-columns:62px minmax(170px, 0.7fr) minmax(180px, 1fr) minmax(90px, 0.36fr);
  gap:16px;
  align-items:center;
  padding:14px;
  border-radius:16px;
  background:#f4fafb;
}
.winner-list span{ color:#3C5560; }
.winner-list img{ width:58px; height:68px; object-fit:contain; }
.winner-list strong{ display:block; color:var(--ink); }
.result-name{
  color:var(--ink) !important;
  font-weight:950;
  letter-spacing:0.04em;
}
.result-dive{ font-weight:750; }
.result-place{
  justify-self:end;
  color:#8b5b0b !important;
  font-weight:950;
  text-transform:uppercase;
}
.place-medal{
  min-width:50px;
  width:auto;
  padding:0 10px;
  height:46px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  background:linear-gradient(135deg, var(--pool-2), var(--ink));
}
.centre-title{
  font-family:var(--body);
  font-size:28px;
  font-weight:900;
  margin:4px 0 12px;
}
.centre-text{ color:#3C5560; margin-bottom:18px; }
.centre-address{
  padding:14px 16px;
  border-radius:12px;
  background:#eef6f8;
  color:var(--pool);
  margin-bottom:18px;
}
.vision-band{
  padding:86px 0;
  background:linear-gradient(180deg, #f8fcfd, #eef6f8);
}
.vision-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.vision-card{
  padding:36px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(190,215,220,0.7);
  box-shadow:var(--shadow-card);
}
.vision-card h3{
  font-family:var(--body);
  font-size:28px;
  font-weight:900;
  margin-bottom:14px;
}
.vision-card p{
  color:#3C5560;
  font-size:17px;
  line-height:1.65;
}
.team-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.coach-card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.coach-card img{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:center 16%;
  background:linear-gradient(180deg, #dff4f8, #ffffff);
}
.coach-tushar img{ object-position:center 22%; }
.coach-neha img{ object-position:center 18%; }
.coach-paras img{ object-position:center 22%; }
.coach-card div{ padding:24px; }
.coach-role{
  font-family:var(--body);
  font-size:17px;
  font-weight:950;
  color:var(--pool-2);
  margin-bottom:8px;
}
.coach-card h3{
  font-family:var(--body);
  font-size:24px;
  font-weight:900;
  margin-bottom:10px;
}
.coach-card p:not(.section-kicker):not(.coach-role){ color:#3C5560; }
.coach-achievements{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:9px;
}
.coach-achievements li{
  position:relative;
  padding:10px 12px 10px 38px;
  border-radius:16px;
  color:#244c56;
  background:#f1fbfe;
  border:2px solid #d9f1f6;
  font-weight:850;
  font-size:14px;
}
.coach-achievements li::before{
  content:"";
  position:absolute;
  left:13px;
  top:50%;
  width:14px;
  height:14px;
  border-radius:50%;
  background:linear-gradient(135deg, #ff6b4a, #e8451f);
  box-shadow:0 0 0 4px rgba(255,90,50,0.12);
  transform:translateY(-50%);
}
.outreach-band{
  padding:92px 0;
  color:#fff;
  background:
    linear-gradient(135deg, rgba(7,26,38,0.96), rgba(15,92,115,0.78)),
    url("images/ryp-dist-4.jpg") center / cover;
}
.outreach-grid{
  display:grid;
  grid-template-columns:minmax(0, 0.85fr) minmax(380px, 1fr);
  gap:38px;
  align-items:center;
}
.outreach-grid h2{
  font-size:clamp(38px, 6vw, 72px);
  line-height:0.96;
}
.outreach-grid p:not(.section-kicker){
  color:rgba(255,255,255,0.76);
  margin-top:18px;
  font-size:17px;
}
.outreach-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.outreach-gallery img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,0.26);
}
.outreach-gallery img:first-child{ grid-row:span 2; height:454px; }
.contact-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.contact-card{
  display:block;
  padding:26px;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-card);
  border:1px solid rgba(190,215,220,0.7);
}
.contact-card h3{
  font-family:var(--body);
  font-size:22px;
  font-weight:900;
  margin-bottom:12px;
}
.contact-card p{ color:#3C5560; margin-top:8px; }
.contact-link{ background:linear-gradient(135deg, #fff, #eef6f8); }
.contact-hero{
  padding:110px 0 86px;
  color:#fff;
  background:
    linear-gradient(135deg, rgba(7,26,38,0.94), rgba(12,63,82,0.72)),
    url("images/bg-pool-board.jpg") center / cover;
}
.contact-hero h1{
  font-size:clamp(48px, 8vw, 96px);
  line-height:0.92;
  max-width:860px;
}
.contact-hero p:not(.section-kicker){
  color:rgba(255,255,255,0.76);
  max-width:620px;
  margin-top:20px;
  font-size:18px;
}
.contact-form-shell{
  display:grid;
  grid-template-columns:minmax(0, 0.8fr) minmax(360px, 1fr);
  gap:34px;
  align-items:start;
  margin-top:42px;
  padding:36px;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-card);
}
.contact-form-shell h2{
  font-size:clamp(32px, 5vw, 58px);
  line-height:1;
  margin-bottom:14px;
}
.contact-form-shell p{ color:#3C5560; }
.contact-form{
  display:grid;
  gap:14px;
}
.contact-form label{
  display:grid;
  gap:7px;
  color:var(--pool);
  font-weight:800;
  font-size:13px;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  border:1px solid #c9dce1;
  border-radius:10px;
  padding:13px 14px;
  font:inherit;
  background:#f8fcfd;
}
.contact-form textarea{ min-height:130px; resize:vertical; }
.contact-card a{ color:var(--pool-2); font-weight:800; }
.hero-panel p{ color:rgba(255,255,255,0.78); font-size:14.5px; margin-top:8px; }
.hero-metrics{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:18px;
}
.metric{
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius);
  padding:15px;
  background:rgba(7,26,38,0.28);
}
.metric strong{
  display:block;
  color:var(--aqua);
  font-family:var(--display);
  font-size:32px;
  line-height:1;
}
.metric span{ display:block; color:rgba(255,255,255,0.72); font-size:12.5px; margin-top:6px; }
.section-band{ padding:84px 0; }
.section-band.tight{ padding:54px 0; }
.feature-card{ min-height:100%; padding:28px; position:relative; }
.feature-card::before{
  content:"";
  display:block;
  width:42px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--coral), var(--aqua));
  margin-bottom:20px;
}
.feature-card h3{ font-family:var(--body); font-weight:800; font-size:20px; }
.feature-card p{ color:#3C5560; font-size:15px; margin-top:10px; }
.spotlight{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:28px;
  align-items:stretch;
}
.spotlight-media{
  min-height:460px;
  background:url("images/results-juniornat-1.jpg") center / cover no-repeat;
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.spotlight-copy{
  background:var(--ink);
  color:#fff;
  border-radius:var(--radius);
  padding:42px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.spotlight-copy h2{ font-size:clamp(32px, 5vw, 54px); line-height:0.98; margin-top:12px; }
.spotlight-copy p{ color:var(--white-70); margin-top:18px; }
.podium-strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin-top:26px;
}
.podium-strip .card{ padding:22px; box-shadow:none; }
.achievement-crown{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(320px, 0.72fr);
  gap:28px;
  align-items:end;
  margin-bottom:24px;
  padding:38px;
  border-radius:18px;
  color:#fff;
  background:
    radial-gradient(circle at 78% 0%, rgba(227,169,74,0.5), transparent 23rem),
    linear-gradient(135deg, #071a26, #0c3f52 72%);
  box-shadow:0 30px 90px rgba(7,26,38,0.18);
  overflow:hidden;
  position:relative;
}
.achievement-crown::after{
  content:"";
  position:absolute;
  inset:-40% auto auto -12%;
  width:420px;
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:50%;
}
.achievement-crown h2{
  position:relative;
  z-index:1;
  font-size:clamp(34px, 5vw, 62px);
  line-height:0.98;
  max-width:820px;
  margin-top:12px;
}
.crown-stats{
  position:relative;
  z-index:1;
  display:grid;
  gap:10px;
}
.crown-stats div{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,0.16);
}
.crown-stats strong{ color:var(--gold); font-size:22px; }
.crown-stats span{ color:rgba(255,255,255,0.74); text-align:right; }
.achievement-spotlight .spotlight-copy{
  background:
    radial-gradient(circle at 100% 0%, rgba(227,169,74,0.28), transparent 18rem),
    var(--ink);
}
.medal-wall{ perspective:1000px; }
.medal-card{
  position:relative;
  min-height:168px;
  background:linear-gradient(180deg, #fff 0%, #f8fbfc 100%);
  border-color:rgba(227,169,74,0.34);
  box-shadow:0 20px 60px rgba(7,26,38,0.13), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
.medal-card::before{
  content:"";
  position:absolute;
  top:16px;
  right:16px;
  width:56px;
  aspect-ratio:1;
  border-radius:50%;
  opacity:0.86;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,0.18));
}
.gold-card::before{
  background:radial-gradient(circle at 34% 30%, #fff8d6, #f0b429 48%, #b9860f 100%);
}
.bronze-card::before{
  background:radial-gradient(circle at 34% 30%, #f6e4d0, #d9a26d 52%, #a97c50 100%);
}
.medal-card::after{
  content:"";
  position:absolute;
  top:68px;
  right:37px;
  width:14px;
  height:58px;
  background:linear-gradient(#0f5c73, #2bc4e0);
  transform:skewX(-14deg);
  opacity:0.28;
}
.medal-athlete{
  margin-top:12px;
  font-weight:800;
  font-size:15px;
  padding-right:58px;
}
.medal-detail{
  font-size:13px;
  color:#5E7178;
  padding-right:28px;
}
.admissions-band{
  padding:72px 0 20px;
  background:linear-gradient(180deg, rgba(244,250,251,0), rgba(220,235,238,0.62));
}
.admissions-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:30px;
  align-items:end;
}
.admissions-grid h2{
  font-size:clamp(32px, 5vw, 56px);
  line-height:1;
  max-width:760px;
  margin-top:12px;
}
.admissions-grid p:not(.eyebrow){
  color:#3C5560;
  max-width:640px;
  margin-top:14px;
}
.admission-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.results-monument{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(300px, 0.64fr);
  gap:30px;
  align-items:center;
  margin-bottom:36px;
  padding:44px;
  border-radius:18px;
  color:#fff;
  background:
    radial-gradient(circle at 84% 20%, rgba(227,169,74,0.48), transparent 24rem),
    linear-gradient(135deg, #071a26, #0c3f52 66%, #102330);
  box-shadow:0 34px 90px rgba(7,26,38,0.2);
  overflow:hidden;
  position:relative;
}
.results-monument h2{
  font-size:clamp(38px, 6vw, 72px);
  line-height:0.94;
  margin-top:12px;
  max-width:720px;
}
.results-monument p{ color:rgba(255,255,255,0.74); max-width:580px; margin-top:16px; }
.monument-medals{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:220px;
  position:relative;
}
.monument-medals::before{
  content:"";
  position:absolute;
  inset:auto 0 20px;
  height:28px;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,0.34), transparent 70%);
}
.monument-medal{
  width:104px;
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  font-size:13px;
  text-transform:uppercase;
  box-shadow:inset 0 3px 8px rgba(255,255,255,0.42), inset 0 -10px 20px rgba(0,0,0,0.2), 0 22px 38px rgba(0,0,0,0.24);
  position:relative;
}
.monument-medal::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(255,255,255,0.46);
  border-radius:50%;
}
.gold-medal{ background:radial-gradient(circle at 34% 30%, #fff8d6, #f0b429 46%, #b9860f 100%); transform:translateY(-30px) scale(1.18); }
.silver-medal{ background:radial-gradient(circle at 34% 30%, #fff, #b9c4cc 48%, #68747a 100%); }
.bronze-medal{ background:radial-gradient(circle at 34% 30%, #f6e4d0, #d9a26d 50%, #a97c50 100%); transform:translateY(22px); }
.login-page{
  min-height:calc(100vh - 74px);
  background:
    linear-gradient(120deg, rgba(7,26,38,0.94), rgba(7,26,38,0.62)),
    url("images/centre-goregaon-new.jpg") center / cover;
  color:#fff;
}
.login-shell{
  min-height:calc(100vh - 74px);
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(340px, 430px);
  gap:44px;
  align-items:center;
  padding-top:70px;
  padding-bottom:70px;
}
.login-story h1{
  font-size:clamp(48px, 8vw, 92px);
  line-height:0.9;
  max-width:760px;
  margin-top:16px;
}
.login-story > p{ color:rgba(255,255,255,0.76); max-width:560px; margin-top:22px; font-size:18px; }
.portal-status{
  margin-top:34px;
  display:grid;
  gap:12px;
  max-width:520px;
}
.portal-status div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,0.18);
}
.portal-status span{ color:rgba(255,255,255,0.6); }
.portal-status strong{ text-align:right; }
.login-card{
  background:rgba(255,255,255,0.94);
  color:var(--ink);
  border:1px solid rgba(255,255,255,0.5);
  border-radius:18px;
  padding:32px;
  box-shadow:0 34px 90px rgba(0,0,0,0.32);
}
.login-logo{ width:74px; margin-bottom:18px; }
.login-card h2{ font-family:var(--body); font-size:28px; font-weight:800; }
.login-card p{ color:#526a73; font-size:14.5px; margin-top:8px; }
.login-card label{
  display:grid;
  gap:8px;
  margin-top:18px;
  font-weight:700;
  font-size:13px;
  color:var(--pool);
}
.login-card input{
  width:100%;
  border:1px solid #cadde2;
  border-radius:10px;
  padding:14px 15px;
  font:inherit;
  background:#f8fcfd;
  color:var(--ink);
}
.login-card button{ width:100%; justify-content:center; margin-top:22px; }
.login-note{ min-height:22px; color:var(--pool) !important; font-weight:700; }
.cta-band{
  background:
    linear-gradient(135deg, rgba(7,26,38,0.95), rgba(15,92,115,0.82)),
    url("images/ryp-dist-4.jpg") center / cover;
  color:#fff;
  padding:74px 0;
  margin-top:52px;
}
.cta-band .wrap{ display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap; }
.cta-band h2{ font-size:clamp(30px, 5vw, 54px); max-width:740px; line-height:1; }
.cta-band p{ color:var(--white-70); max-width:580px; margin-top:14px; }
.reveal{ opacity:1; transform:none; transition:opacity 0.5s ease, transform 0.5s ease; }
.js .reveal{ opacity:0; transform:translateY(46px) scale(0.96); }
.reveal.is-visible{ opacity:1; transform:none; }
.lightbox{
  position:fixed; inset:0; z-index:100; display:none; place-items:center;
  background:rgba(7,26,38,0.9); padding:24px;
}
.lightbox.open{ display:grid; }
.lightbox img{ max-height:86vh; max-width:min(1100px, 92vw); border-radius:var(--radius); box-shadow:0 30px 90px rgba(0,0,0,0.45); }
.lightbox button{
  position:absolute; top:18px; right:18px; border:0; border-radius:999px; width:42px; height:42px;
  background:#fff; color:var(--ink); font-size:24px; cursor:pointer;
}
@media (max-width:980px){
  .home-hero{ background-position:62% 18%; }
  .home-hero .wrap{ grid-template-columns:1fr; align-items:end; }
  .hero-copy{ padding-top:42px; }
  .hero-stage{ max-width:620px; }
  .spotlight{ grid-template-columns:1fr; }
  .podium-strip{ grid-template-columns:1fr 1fr; }
  .achievement-crown{ grid-template-columns:1fr; }
  .results-monument{ grid-template-columns:1fr; }
  .login-shell{ grid-template-columns:1fr; }
  .admissions-grid{ grid-template-columns:1fr; }
  .admission-actions{ justify-content:flex-start; }
  .portal-grid, .snapshot-grid, .outreach-grid{ grid-template-columns:1fr; }
  .video-grid, .dd-grid{ grid-template-columns:1fr; }
  .snapshot-metrics{ grid-template-columns:1fr 1fr; }
  .tournament-grid, .vision-grid, .team-grid, .contact-grid{ grid-template-columns:1fr; }
  .mini-login{ grid-template-columns:1fr; }
  .winner-list div{ grid-template-columns:56px 1fr; }
  .result-name,.result-dive,.result-place{ justify-self:start; }
  .result-place{ grid-column:2; }
  .contact-form-shell{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .wrap{ padding-left:20px; padding-right:20px; }
  .site-nav .wrap{ padding-left:20px; padding-right:20px; }
  .brand-logo{ height:52px; }
  .brand{ font-size:18px; }
  .brand small{ display:none; }
  .home-hero{
    min-height:auto;
    background:
      linear-gradient(180deg, rgba(7,26,38,0.72), rgba(7,26,38,0.95) 58%, rgba(7,26,38,0.98)),
      url("images/hero-diver.jpg") 68% 52% / cover no-repeat;
  }
  .home-hero .wrap{ min-height:auto; padding-top:96px; padding-bottom:34px; }
  .hero-title{ font-size:clamp(44px, 17vw, 72px); }
  .hero-stage img{ height:390px; object-position:66% 62%; }
  .hero-metrics{ grid-template-columns:1fr 1fr; }
  .section-band{ padding:58px 0; }
  .spotlight-media{ min-height:300px; }
  .spotlight-copy{ padding:28px; }
  .podium-strip{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:1fr; }
  .footer .wrap, .site-footer .wrap{ display:block; }
  .achievement-crown{ padding:26px; }
  .crown-stats div{ display:block; }
  .crown-stats span{ display:block; text-align:left; margin-top:2px; }
  .results-monument{ padding:28px; }
  .monument-medals{ min-height:180px; transform:scale(0.86); transform-origin:left center; justify-content:flex-start; }
  .login-shell{ padding-top:46px; padding-bottom:46px; }
  .portal-status div{ display:block; }
  .portal-status strong{ display:block; text-align:left; margin-top:3px; }
  .login-card{ padding:24px; }
  .snapshot-metrics{ grid-template-columns:1fr; }
  .tournament-card > img{ height:auto; }
  .dd-search{ grid-template-columns:1fr; }
  .outreach-gallery{ grid-template-columns:1fr; }
  .outreach-gallery img, .outreach-gallery img:first-child{ height:240px; grid-row:auto; }
}

@media (max-width:760px){
  main > section{
    margin:14px 0;
  }
  main > section:not(.results-section):not(.video-band):not(.outreach-band):not(.snapshot-band):not(.sheet-builder-band){
    border-radius:30px;
  }
  .portal-strip,
  .vision-band,
  .dd-finder-band,
  .sheet-builder-band,
  .section-band{
    padding-top:54px;
    padding-bottom:54px;
  }
  .hero-grid{
    gap:18px;
  }
  .hero-logo-stage{
    width:min(140px, 40vw);
    margin:0 auto 10px;
  }
  .hero-logo-caption{
    font-size:10px;
    bottom:3%;
  }
  .coach-achievements li{
    font-size:13px;
  }
}

/* ---------------- Friendly academy refresh ----------------
   A brighter, chunkier system inspired by modern learning apps while
   keeping the Tuck & Dive pool, aqua, coral, and medal accents intact. */
:root{
  --radius:24px;
  --radius-lg:32px;
  --radius-pill:999px;
  --duo-green:#FF6B4A;
  --duo-green-dark:#CC3F26;
  --sky:#DDF7FF;
  --shadow-card:0 8px 0 rgba(7,26,38,0.08), 0 22px 46px rgba(7,26,38,0.08);
  --shadow-soft:0 10px 0 rgba(7,26,38,0.08), 0 30px 70px rgba(7,26,38,0.12);
}

body{
  background:
    radial-gradient(circle at 8% 3%, rgba(43,196,224,0.18), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(255,90,50,0.12), transparent 24rem),
    linear-gradient(180deg, #f8feff 0%, #eefbff 42%, #f7fff3 100%);
}

.site-nav{
  background:rgba(255,255,255,0.94);
  border-bottom:2px solid rgba(15,92,115,0.08);
  box-shadow:0 6px 0 rgba(7,26,38,0.04);
}
.site-nav.is-scrolled{
  background:rgba(255,255,255,0.98);
  box-shadow:0 8px 0 rgba(7,26,38,0.06), 0 18px 36px rgba(7,26,38,0.08);
}
.brand{ color:var(--ink); }
.brand small{ color:var(--pool-2); }
.nav-links a{
  color:#4f6b75;
  border-radius:var(--radius-pill);
  font-weight:850;
}
.nav-links a:hover{ color:var(--pool); background:#eaf8fb; }
.nav-links a.active{
  color:#073045;
  background:var(--sky);
  box-shadow:inset 0 -4px 0 rgba(15,92,115,0.12);
}
.nav-links a.athlete-link{
  background:var(--coral);
  box-shadow:inset 0 -4px 0 rgba(126,42,20,0.22), 0 12px 26px rgba(255,90,50,0.18);
}

.btn{
  border-radius:16px;
  font-weight:900;
  border:0;
  box-shadow:inset 0 -4px 0 rgba(7,26,38,0.18);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(1px); box-shadow:inset 0 -2px 0 rgba(7,26,38,0.18); }
.btn-coral{ background:var(--duo-green-dark); }
.btn-line{
  background:#fff;
  border:2px solid #d7edf2;
  color:var(--pool);
  box-shadow:inset 0 -4px 0 rgba(15,92,115,0.1);
}
.btn-ghost{
  background:rgba(255,255,255,0.14);
  border:2px solid rgba(255,255,255,0.75);
  box-shadow:inset 0 -4px 0 rgba(255,255,255,0.14);
}
.btn-ghost:hover{ background:rgba(255,255,255,0.24); }

.section-head h2,
.portal-grid h2,
.dd-copy h2,
.video-grid h2,
.outreach-grid h2{
  font-weight:950;
}
.section-kicker{
  gap:8px;
  padding:7px 12px;
  border-radius:var(--radius-pill);
  background:#eaf8fb;
  color:var(--pool-2);
  letter-spacing:0.08em;
}
.section-kicker::before{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--duo-green);
  box-shadow:0 0 0 4px rgba(255,90,50,0.14);
}
.section-kicker.light{
  color:#dffaff;
  background:rgba(255,255,255,0.12);
}

.card,
.coach-card,
.vision-card,
.contact-card,
.mini-login,
.dd-card,
.contact-form-shell,
.tournament-card,
.hero-panel{
  border:2px solid rgba(15,92,115,0.08);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}

.home-hero{
  border-bottom:0;
}
.hero-title{
  text-shadow:0 8px 0 rgba(7,26,38,0.16);
}
.hero-lede{
  background:rgba(7,26,38,0.3);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:22px;
  padding:16px 18px;
}

.portal-strip,
.vision-band,
.section-band,
.dd-finder-band{
  position:relative;
}
.portal-strip{
  background:
    radial-gradient(circle at 85% 16%, rgba(43,196,224,0.18), transparent 24rem),
    linear-gradient(180deg, #ffffff, #f1fbfe);
}
.mini-login{
  background:#fff;
  border-color:#d9f1f6;
}
.mini-login input,
.login-card input,
.contact-form input,
.contact-form textarea,
.dd-search input{
  border:2px solid #d9edf2;
  border-radius:18px;
  background:#fbfeff;
  font-weight:750;
}
.mini-login input:focus,
.login-card input:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.dd-search input:focus{
  outline:0;
  border-color:var(--aqua);
  box-shadow:0 0 0 4px rgba(43,196,224,0.14);
}

.feature-card{
  background:#fff;
  border-color:#d9f1f6;
}
.feature-card::before{
  width:48px;
  height:8px;
  background:linear-gradient(90deg, var(--duo-green), var(--aqua));
}
.feature-card h3,
.vision-card h3,
.contact-card h3,
.coach-card h3{
  font-weight:950;
}

.coach-card{
  background:linear-gradient(180deg, #fff, #f5fdff);
}
.coach-card img{
  border:12px solid #fff;
  border-radius:28px;
  box-shadow:inset 0 -4px 0 rgba(7,26,38,0.08);
}
.coach-role{
  display:inline-flex;
  padding:7px 12px;
  border-radius:var(--radius-pill);
  background:#e9f8fb;
  color:var(--pool);
}

.vision-band{
  background:
    radial-gradient(circle at 8% 15%, rgba(255,90,50,0.14), transparent 22rem),
    linear-gradient(180deg, #f9feff, #eefaff);
}
.vision-card{
  border-color:#d9f1f6;
}
.vision-card:first-child{ border-top:8px solid var(--aqua); }
.vision-card:last-child{ border-top:8px solid var(--duo-green); }

.centre-showcase{
  border:2px solid #d9f1f6;
  border-radius:34px;
  box-shadow:var(--shadow-soft);
}
.centre-photo img{
  border-radius:28px;
}
.centre-logo{
  background:#fff;
  border:2px solid #e5f3f6;
  border-radius:22px;
  padding:10px;
}

.video-band{
  background:
    radial-gradient(circle at 90% 10%, rgba(255,90,50,0.14), transparent 23rem),
    linear-gradient(135deg, #073045, #0f5c73 58%, #147d94);
}
.intro-video{
  border:10px solid rgba(255,255,255,0.12);
  border-radius:32px;
}

.results-section{
  background:
    radial-gradient(circle at 10% 0%, rgba(227,169,74,0.24), transparent 26rem),
    radial-gradient(circle at 95% 18%, rgba(43,196,224,0.18), transparent 24rem),
    linear-gradient(180deg, #071a26, #0c3f52 58%, #071a26);
}
.result-category > h3{
  display:inline-flex;
  padding:10px 18px;
  border-radius:20px;
  background:rgba(255,255,255,0.1);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,0.16);
}
.tournament-card{
  border:2px solid rgba(227,169,74,0.24);
  box-shadow:0 10px 0 rgba(0,0,0,0.18), 0 32px 80px rgba(0,0,0,0.28);
}
.tournament-card > img{
  background:#fff;
  border-bottom:2px solid #edf3f4;
}
.winner-list div{
  border:2px solid #e3f3f6;
  background:#fbfeff;
  box-shadow:inset 0 -3px 0 rgba(15,92,115,0.06);
}
.place-medal{
  background:linear-gradient(180deg, #e9f8fb, #d7f1f8);
  color:var(--pool);
  box-shadow:inset 0 -4px 0 rgba(15,92,115,0.14);
}

.contact-section,
.contact-form-shell{
  background:
    radial-gradient(circle at 10% 10%, rgba(43,196,224,0.14), transparent 20rem),
    #fff;
}
.contact-card{
  border-color:#d9f1f6;
}
.site-footer{
  border-top:10px solid var(--aqua);
  margin-top:0;
}

@media (max-width:760px){
  .section-head h2{ font-size:clamp(34px, 11vw, 52px); line-height:1.02; }
  .section-kicker{ font-size:11px; }
  .hero-lede{ padding:14px; }
  .coach-card img{ border-width:8px; }
  .centre-showcase{ border-radius:26px; }
  .tournament-body{ padding:20px; }
}

/* ---------------- Duolingo-style results feed ----------------
   Tournament photos become compact achievement thumbnails instead of
   full posters, so the records stay fast to scan. */
.achievement-wall .section-head{
  margin-bottom:52px;
}
.achievement-wall .tournament-stack{
  gap:20px;
}
.achievement-wall .result-category{
  margin-top:64px;
}
.achievement-wall .result-category > h3{
  margin-bottom:22px;
  font-size:clamp(26px, 3.8vw, 44px);
}
.achievement-wall .tournament-card{
  display:grid;
  grid-template-columns:minmax(170px, 250px) minmax(0, 1fr);
  align-items:stretch;
  overflow:visible;
  padding:12px;
  border-radius:34px;
  background:linear-gradient(180deg, #ffffff, #f8feff);
}
.achievement-wall .tournament-card > img{
  width:100%;
  height:100%;
  min-height:190px;
  max-height:280px;
  object-fit:cover;
  object-position:center;
  border-radius:24px;
  border:2px solid #e2f1f5;
  box-shadow:inset 0 -4px 0 rgba(7,26,38,0.08);
}
.achievement-wall .tournament-body{
  padding:10px 10px 10px 22px;
  display:grid;
  align-content:center;
}
.achievement-wall .tournament-tier{
  display:inline-flex;
  justify-self:start;
  padding:7px 12px;
  border-radius:999px;
  background:#fff4dc;
  color:#86580b;
  box-shadow:inset 0 -3px 0 rgba(227,169,74,0.18);
}
.achievement-wall .winner-list{
  gap:8px;
  margin-top:14px;
}
.achievement-wall .winner-list div{
  grid-template-columns:52px minmax(150px, 0.7fr) minmax(160px, 1fr) minmax(92px, 0.34fr);
  padding:10px 12px;
  border-radius:18px;
}
.achievement-wall .winner-list img{
  width:46px;
  height:52px;
}
.achievement-wall .place-medal{
  min-width:46px;
  height:40px;
  font-size:13px;
}
.achievement-wall .result-name{
  font-size:14px;
}
.achievement-wall .result-dive,
.achievement-wall .result-place{
  font-size:13.5px;
}

@media (max-width:980px){
  .achievement-wall .tournament-card{
    grid-template-columns:minmax(130px, 190px) minmax(0, 1fr);
  }
  .achievement-wall .tournament-card > img{
    min-height:160px;
    max-height:230px;
  }
  .achievement-wall .winner-list div{
    grid-template-columns:48px 1fr;
  }
  .achievement-wall .result-dive,
  .achievement-wall .result-place{
    grid-column:2;
    justify-self:start;
  }
}

@media (max-width:700px){
  .achievement-wall .tournament-card{
    display:block;
    padding:10px;
    border-radius:26px;
  }
  .achievement-wall .tournament-card > img{
    height:150px;
    min-height:150px;
    max-height:150px;
    border-radius:20px;
  }
  .achievement-wall .tournament-body{
    padding:16px 4px 4px;
  }
  .achievement-wall .winner-list div{
    grid-template-columns:44px 1fr;
    gap:8px 12px;
    padding:10px;
  }
  .achievement-wall .winner-list img{
    width:40px;
    height:46px;
  }
  .achievement-wall .place-medal{
    min-width:40px;
    height:36px;
    font-size:12px;
  }
}

/* Restore DD finder as the bright learning-app feature block. */
#dd-finder.dd-finder-band{
  padding:96px 0;
  background:
    radial-gradient(circle at 12% 14%, rgba(255,90,50,0.26), transparent 25rem),
    radial-gradient(circle at 92% 6%, rgba(43,196,224,0.22), transparent 22rem),
    linear-gradient(180deg, #fff4ef 0%, #e9fbff 100%);
}
#dd-finder .section-kicker{
  background:#ffe4da;
  color:#e8501f;
}
#dd-finder .section-kicker::before{
  background:#ff6b4a;
  box-shadow:0 0 0 5px rgba(255,90,50,0.18);
}
#dd-finder .dd-copy h2{
  color:#8a2a0d;
  text-shadow:0 5px 0 rgba(255,90,50,0.08);
}
#dd-finder .dd-copy p:not(.section-kicker){
  color:#c94a1f;
  font-weight:650;
}
#dd-finder .dd-card{
  border:3px solid #ffc2a8;
  border-radius:34px;
  background:#ffffff;
  box-shadow:0 10px 0 rgba(204,63,38,0.18), 0 30px 70px rgba(58,32,24,0.14);
}
#dd-finder .dd-card label{
  color:#e8501f;
}
#dd-finder .dd-search{
  grid-template-columns:minmax(0, 1fr) auto;
}
#dd-finder .dd-search input{
  border:3px solid #ffd2bd;
  border-radius:20px;
  background:#fffaf7;
  color:#8a2a0d;
  box-shadow:inset 0 -4px 0 rgba(255,90,50,0.08);
}
#dd-finder .dd-search input:focus{
  border-color:#ff6b4a;
  box-shadow:0 0 0 5px rgba(255,90,50,0.18), inset 0 -4px 0 rgba(255,90,50,0.08);
}
#dd-finder .btn-coral{
  background:#ff6b4a;
  color:#fff;
  box-shadow:inset 0 -5px 0 #e8451f, 0 12px 24px rgba(255,90,50,0.22);
}
#dd-finder .btn-coral:hover{
  background:#ff8264;
}
#dd-finder .dd-result{
  border:3px solid #ffb99a;
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,0.36), transparent 9rem),
    linear-gradient(135deg, #ff6b4a 0%, #e8451f 54%, #2bc4e0 100%);
  box-shadow:inset 0 -7px 0 rgba(58,32,24,0.16);
}
#dd-finder .dd-result strong{
  font-weight:950;
  text-shadow:0 5px 0 rgba(7,26,38,0.12);
}
#dd-finder .dd-result.not-found{
  background:linear-gradient(135deg, #ff6b4a, #e24d32);
  border-color:#ffc2b5;
}
#dd-finder .dd-format{
  color:#c94a1f;
  background:#f2ffed;
  border:2px solid #daf5d2;
  border-radius:18px;
  padding:12px 14px;
}

@media (max-width:760px){
  #dd-finder .dd-search{
    grid-template-columns:1fr;
  }
  #dd-finder .dd-card{
    padding:22px;
    border-radius:28px;
  }
}

/* ---------------- Dive sheet builder ---------------- */
.sheet-builder-band{
  padding:96px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(255,90,50,0.22), transparent 25rem),
    radial-gradient(circle at 92% 10%, rgba(43,196,224,0.22), transparent 25rem),
    linear-gradient(180deg, #f6fff2 0%, #eefbff 100%);
}
.sheet-builder-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(390px, 0.78fr);
  gap:34px;
  align-items:start;
}
.sheet-builder-panel,
.sheet-preview{
  border:3px solid #d2f3c8;
  border-radius:34px;
  background:#fff;
  box-shadow:0 10px 0 rgba(204,63,38,0.14), 0 30px 70px rgba(58,32,24,0.12);
}
.sheet-builder-panel{ padding:28px; }
.sheet-preview{
  padding:28px;
  position:sticky;
  top:118px;
  background:
    radial-gradient(circle at 100% 0%, rgba(43,196,224,0.16), transparent 15rem),
    linear-gradient(180deg, #ffffff, #fffaf7);
}
.sheet-toolbar{
  display:grid;
  grid-template-columns:1fr minmax(160px, 0.65fr) 1fr;
  gap:18px;
  margin-bottom:24px;
}
.sheet-toolbar label,
.dive-row label{
  display:grid;
  gap:7px;
  color:#e8501f;
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.sheet-toolbar input,
.sheet-toolbar select,
.dive-row select{
  width:100%;
  min-width:0;
  border:3px solid #ffd2bd;
  border-radius:18px;
  background:#fffaf7;
  color:#8a2a0d;
  font:inherit;
  font-weight:800;
  padding:13px 12px;
  box-shadow:inset 0 -4px 0 rgba(255,90,50,0.08);
}
.sheet-toolbar input:focus,
.sheet-toolbar select:focus,
.dive-row select:focus{
  outline:0;
  border-color:#ff6b4a;
  box-shadow:0 0 0 5px rgba(255,90,50,0.16), inset 0 -4px 0 rgba(255,90,50,0.08);
}
.sheet-rows{
  display:grid;
  gap:18px;
}
.dive-row{
  display:grid;
  grid-template-columns:46px repeat(3, minmax(120px, 1fr));
  gap:14px 16px;
  align-items:end;
  padding:18px;
  border:2px solid #e0f3dc;
  border-radius:24px;
  background:linear-gradient(180deg, #ffffff, #f7fff4);
}
.dive-row .dive-code-wrap{
  grid-column:span 2;
}
.dive-number{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:15px;
  background:#ff6b4a;
  color:#fff;
  font-weight:950;
  box-shadow:inset 0 -5px 0 #e8451f;
}
.dive-code-badge{
  min-height:49px;
  display:grid;
  place-items:center;
  padding:8px 10px;
  border-radius:18px;
  background:#eaf8fb;
  color:var(--pool);
  font-weight:950;
  box-shadow:inset 0 -4px 0 rgba(15,92,115,0.1);
}
.dive-code-badge.is-missing{
  color:#b13a22;
  background:#fff0eb;
  box-shadow:inset 0 -4px 0 rgba(255,90,50,0.12);
}
.sheet-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}
.sheet-preview-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin:-12px -12px 24px;
  padding:22px;
  border-radius:26px;
  background:
    radial-gradient(circle at 100% 12%, rgba(255,255,255,0.3), transparent 10rem),
    linear-gradient(135deg, #ff6b4a, #e8451f);
  color:#fff;
  box-shadow:inset 0 -6px 0 rgba(140,40,10,0.28);
}
.sheet-preview h3{
  font-family:var(--body);
  font-size:clamp(28px, 3.4vw, 42px);
  font-weight:950;
  color:#fff;
}
.sheet-preview-meta,
#sheetPreviewMeta{
  color:rgba(255,255,255,0.84);
  font-weight:750;
}
.sheet-total-group{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.sheet-total{
  min-width:112px;
  text-align:center;
  padding:12px;
  border-radius:22px;
  color:#8a2a0d;
  background:#fff;
  box-shadow:inset 0 -5px 0 rgba(7,26,38,0.1);
}
.sheet-total.sheet-average{
  min-width:96px;
  background:rgba(255,255,255,0.82);
}
.sheet-total.sheet-average strong{
  font-size:26px;
}
.sheet-total span{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:950;
}
.sheet-total strong{
  display:block;
  font-size:32px;
  line-height:1;
}
.sheet-table-wrap{
  overflow:auto;
  padding:2px 2px 10px;
}
.sheet-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
  font-size:14px;
}
.sheet-table th{
  color:#e8501f;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  text-align:left;
  padding:0 9px;
}
.sheet-table td{
  background:#ffffff;
  color:#274d2d;
  font-weight:800;
  padding:12px 9px;
  border-top:2px solid #dff3d9;
  border-bottom:2px solid #dff3d9;
  box-shadow:0 5px 0 rgba(255,90,50,0.08);
}
.sheet-table td:first-child{
  border-left:2px solid #dff3d9;
  border-radius:14px 0 0 14px;
}
.sheet-table td:last-child{
  border-right:2px solid #dff3d9;
  border-radius:0 14px 14px 0;
}
.sheet-row-no{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#ff6b4a;
  color:#fff;
  box-shadow:inset 0 -4px 0 #e8451f;
}
.sheet-code-pill,
.sheet-dd-pill,
.sheet-group-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  border-radius:999px;
  padding:6px 10px;
  font-weight:950;
  white-space:nowrap;
}
.sheet-code-pill{
  background:#e9f8fb;
  color:var(--pool);
  box-shadow:inset 0 -3px 0 rgba(15,92,115,0.1);
}
.sheet-dd-pill{
  background:#fff4dc;
  color:#8b5b0b;
  box-shadow:inset 0 -3px 0 rgba(227,169,74,0.18);
}
.sheet-group-pill{
  color:#fff;
  background:linear-gradient(135deg, var(--pool-2), var(--aqua));
  box-shadow:inset 0 -3px 0 rgba(7,26,38,0.14);
}
.group-front{ background:linear-gradient(135deg, #ff6b4a, #e8451f); }
.group-back{ background:linear-gradient(135deg, #2bc4e0, #0f5c73); }
.group-reverse{ background:linear-gradient(135deg, #ff6b4a, #d94d31); }
.group-inward{ background:linear-gradient(135deg, #e3a94a, #b77a16); }
.group-twist{ background:linear-gradient(135deg, #7c6cff, #2bc4e0); }
.group-armstand{ background:linear-gradient(135deg, #071a26, #0f5c73); }
.sheet-code-pill.missing,
.sheet-dd-pill.missing{
  background:#fff0eb;
  color:#b13a22;
  box-shadow:inset 0 -3px 0 rgba(255,90,50,0.14);
}
.sheet-row-missing td{
  background:#fff8f5;
}
.sheet-hint{
  margin-top:14px;
  color:#4c6b53;
  font-size:13px;
  font-weight:750;
}

@media (max-width:1100px){
  .sheet-builder-grid{ grid-template-columns:1fr; }
  .sheet-preview{ position:static; }
}
@media (max-width:900px){
  .sheet-toolbar{ grid-template-columns:1fr; }
  .dive-row{ grid-template-columns:42px minmax(0, 1fr) minmax(0, 1fr); }
  .dive-row label,
  .dive-code-wrap{ grid-column:auto / span 1; }
  .dive-row .dive-code-wrap{ grid-column:2 / -1; }
}
@media (max-width:620px){
  .sheet-builder-panel,
  .sheet-preview{ padding:18px; border-radius:28px; }
  .dive-row{ grid-template-columns:1fr; }
  .dive-number{ width:100%; }
  .dive-row .dive-code-wrap{ grid-column:auto; }
  .sheet-preview-head{ display:grid; }
  .sheet-total-group{ width:100%; }
  .sheet-total{ width:100%; }
}

@media print{
  @page{ margin:12mm; }
  body{
    background:#eefbff !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
  body *{ visibility:hidden !important; }
  #sheetPreview, #sheetPreview *{ visibility:visible !important; }
  #sheetPreview{
    position:absolute !important;
    inset:0 auto auto 0;
    width:100%;
    min-height:90vh;
    padding:24px !important;
    box-shadow:0 0 0 8px #d2f3c8 inset !important;
    border:3px solid #ff6b4a !important;
    border-radius:28px !important;
    background:
      radial-gradient(circle at 92% 8%, rgba(43,196,224,0.24), transparent 16rem),
      radial-gradient(circle at 8% 92%, rgba(255,90,50,0.18), transparent 18rem),
      #ffffff !important;
  }
  #sheetPreview::after{
    content:"TUCK & DIVE";
    position:absolute;
    right:24px;
    bottom:18px;
    color:rgba(15,92,115,0.12);
    font-size:42px;
    font-weight:950;
    letter-spacing:0.08em;
  }
  .sheet-preview-head{
    background:linear-gradient(135deg, #ff6b4a, #e8451f) !important;
    color:#fff !important;
  }
  .sheet-table td,
  .sheet-table th{
    font-size:12px !important;
  }
  .site-nav, .site-footer, .sheet-hint{ display:none !important; }
}

/* ---------------- 2026 mobile-first refinement ---------------- */
.brand-wordmark{
  width:clamp(172px, 18vw, 248px);
  height:auto !important;
  max-height:64px;
  object-fit:contain;
}
.site-nav .wrap{
  gap:16px;
}
.nav-login{
  display:grid;
  grid-template-columns:110px 104px auto;
  gap:8px;
  align-items:center;
  margin-left:8px;
}
.nav-login input{
  min-width:0;
  width:100%;
  border:2px solid #d7edf2;
  border-radius:12px;
  padding:9px 10px;
  color:var(--ink);
  background:#fff;
  font:inherit;
  font-size:12px;
  font-weight:800;
}
.nav-login button{
  border:0;
  border-radius:12px;
  padding:10px 12px;
  color:#fff;
  background:#ff6b4a;
  box-shadow:inset 0 -4px 0 #e8451f;
  font-weight:950;
  cursor:pointer;
}
.nav-login .login-note{
  grid-column:1 / -1;
  min-height:0;
  color:#b13a22 !important;
  font-size:11px;
  font-weight:900;
}
.home-hero{
  min-height:min(760px, calc(100svh - 74px));
  background:
    linear-gradient(90deg, rgba(7,26,38,0.92) 0%, rgba(7,26,38,0.66) 45%, rgba(7,26,38,0.08) 100%),
    linear-gradient(0deg, rgba(7,26,38,0.46), rgba(7,26,38,0.08)),
    url("images/hero-premium-pool.jpg") center 48% / cover no-repeat;
}
.hero-logo-stage img{
  width:68%;
}
.hero-title{
  max-width:760px;
}
main > section{
  scroll-margin-top:92px;
}
.section-band,
.vision-band,
.video-band,
.results-section,
.outreach-band,
.snapshot-band,
.tools-section{
  border-top:1px solid rgba(15,92,115,0.08);
}
.tools-section{
  padding:88px 0;
  background:
    radial-gradient(circle at 10% 4%, rgba(255,90,50,0.18), transparent 24rem),
    radial-gradient(circle at 90% 0%, rgba(43,196,224,0.18), transparent 26rem),
    linear-gradient(180deg, #f7fff3, #eefbff);
}
.tools-grid{
  display:grid;
  gap:24px;
}
.tool-card{
  border:3px solid #d2f3c8;
  border-radius:30px;
  background:#fff;
  box-shadow:0 8px 0 rgba(204,63,38,0.12), 0 22px 50px rgba(58,32,24,0.1);
}
.tools-section #dd-finder,
.tools-section #sheet-builder{
  padding:24px;
  background:#fff;
}
.tools-section #dd-finder{
  display:grid;
  grid-template-columns:minmax(0, 0.78fr) minmax(320px, 0.72fr);
  gap:22px;
  align-items:center;
}
.tools-section .dd-copy h2,
.tools-section .sheet-builder-band .section-head h2{
  font-size:clamp(28px, 4vw, 44px);
  line-height:1.02;
}
.tools-section .dd-card{
  padding:22px;
  border-radius:24px;
  box-shadow:none;
}
.tools-section .dd-result{
  padding:18px;
}
.tools-section .dd-result strong{
  font-size:clamp(38px, 6vw, 58px);
}
.tools-section .sheet-builder-grid{
  grid-template-columns:minmax(0, 1fr) minmax(320px, 0.82fr);
  gap:20px;
}
.tools-section .sheet-builder-panel,
.tools-section .sheet-preview{
  padding:18px;
  border-width:2px;
  border-radius:24px;
  box-shadow:none;
}
.tools-section .sheet-toolbar{
  grid-template-columns:1fr 160px 1fr;
  gap:10px;
  margin-bottom:14px;
}
.tools-section .dive-row{
  grid-template-columns:38px repeat(3, minmax(96px, 1fr));
  gap:9px;
  padding:12px;
  border-radius:18px;
}
.tools-section .dive-number{
  width:34px;
  height:34px;
  border-radius:12px;
}
.tools-section .sheet-toolbar input,
.tools-section .sheet-toolbar select,
.tools-section .dive-row select{
  padding:10px;
  border-width:2px;
  border-radius:14px;
  font-size:13px;
}
.tools-section .sheet-toolbar label,
.tools-section .dive-row label{
  font-size:10.5px;
  gap:5px;
}
.tools-section .sheet-rows{
  gap:10px;
  max-height:520px;
  overflow:auto;
  padding-right:3px;
}
.tools-section .sheet-preview-head{
  margin:-6px -6px 14px;
  padding:14px;
  border-radius:20px;
}
.tools-section .sheet-preview h3{
  font-size:clamp(22px, 3vw, 30px);
}
.tools-section .sheet-total strong{
  font-size:26px;
}
.tools-section .sheet-table{
  font-size:12px;
  border-spacing:0 7px;
}
.tools-section .sheet-table td{
  padding:8px 7px;
}
.tools-section .sheet-code-pill,
.tools-section .sheet-dd-pill,
.tools-section .sheet-group-pill{
  min-height:28px;
  padding:5px 8px;
}

@media (max-width:1320px){
  .nav-links a{
    padding-left:8px;
    padding-right:8px;
  }
}

@media (max-width:1320px){
  .site-nav .wrap{
    align-items:center;
  }
  .nav-login{
    display:none;
  }
  .nav-links.open ~ .nav-login{
    position:fixed;
    inset:calc(74px + 14px) 20px auto;
    z-index:60;
    display:grid;
    grid-template-columns:1fr 1fr auto;
    padding:14px;
    border:2px solid rgba(143,221,236,0.25);
    border-radius:20px;
    background:#fff;
    box-shadow:0 18px 40px rgba(0,0,0,0.22);
  }
  .nav-links.open{
    padding-top:112px;
  }
  .tools-section #dd-finder,
  .tools-section .sheet-builder-grid{
    grid-template-columns:1fr;
  }
  .tools-section .sheet-preview{
    position:static;
  }
}

@media (max-width:760px){
  body{
    font-size:16px;
    line-height:1.66;
    background:#f5fbfd;
  }
  .wrap{
    padding-left:16px;
    padding-right:16px;
  }
  .site-nav .wrap{
    padding:10px 16px;
  }
  .brand-wordmark{
    width:164px;
    max-height:48px;
  }
  .nav-links{
    inset:66px 0 auto 0;
  }
  .nav-links.open{
    height:calc(100vh - 66px);
    padding-top:116px;
  }
  .nav-links.open ~ .nav-login{
    inset:80px 16px auto;
    grid-template-columns:1fr;
  }
  .home-hero{
    min-height:auto;
    background:
      linear-gradient(180deg, rgba(7,26,38,0.52), rgba(7,26,38,0.9) 54%, rgba(7,26,38,0.96)),
      url("images/hero-premium-pool.jpg") 48% 42% / cover no-repeat;
  }
  .home-hero .wrap{
    padding-top:76px;
    padding-bottom:30px;
  }
  .hero-logo-stage{
    width:min(140px, 40vw);
  }
  .hero-logo-caption{
    display:none;
  }
  .hero-title{
    font-size:clamp(38px, 13vw, 56px);
    line-height:0.96;
    text-shadow:0 4px 0 rgba(7,26,38,0.16);
  }
  .hero-lede{
    font-size:15.5px;
    line-height:1.58;
    margin:18px 0 20px;
  }
  .hero-actions .btn{
    width:100%;
    justify-content:center;
  }
  main{
    display:grid;
    gap:12px;
  }
  main > section{
    margin:0;
    border-radius:0;
  }
  .section-head{
    margin-bottom:24px;
  }
  .section-head h2{
    font-size:clamp(28px, 9vw, 42px);
    line-height:1.08;
  }
  .section-head p,
  .feature-card p,
  .vision-card p,
  .centre-text,
  .contact-card p{
    font-size:15.5px;
    line-height:1.68;
  }
  .section-kicker{
    font-size:10.5px;
    max-width:100%;
  }
  .team-grid,
  .grid-3,
  .vision-grid,
  .contact-grid{
    gap:16px;
  }
  .coach-card div,
  .feature-card,
  .vision-card,
  .contact-card{
    padding:20px;
  }
  .coach-card h3,
  .contact-card h3{
    font-size:21px;
  }
  .tools-section{
    padding:48px 0;
  }
  .tools-section #dd-finder,
  .tools-section #sheet-builder{
    padding:16px;
    border-radius:24px;
  }
  .tools-section .sheet-toolbar{
    grid-template-columns:1fr;
  }
  .tools-section .dive-row{
    grid-template-columns:1fr 1fr;
  }
  .tools-section .dive-number{
    width:100%;
    grid-column:1 / -1;
  }
  .tools-section .dive-row .dive-code-wrap{
    grid-column:1 / -1;
  }
  .tools-section .sheet-table{
    min-width:560px;
  }
  .tools-section .sheet-preview-head{
    display:grid;
  }
  .tools-section .sheet-total-group{
    width:100%;
  }
  .tools-section .sheet-total{
    width:100%;
  }
}

/* ---------------- Final mobile-only readability overrides ---------------- */
.js body.section-mode .page-panel{
  display:none !important;
}
.js body.section-mode .page-panel.is-active-section{
  display:block !important;
  animation:sectionIn .22s ease-out both;
}
body.section-mode main{
  display:block !important;
  gap:0 !important;
}
body.section-mode .site-footer{
  margin-top:0;
}
.home-section-cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-top:26px;
  max-width:760px;
}
.home-section-cards a{
  display:grid;
  gap:4px;
  min-height:102px;
  padding:14px;
  border:1px solid rgba(143,221,236,0.28);
  border-radius:20px;
  color:#fff;
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(12px);
}
.home-section-cards span{
  color:#8fddec;
  font-size:12px;
  font-weight:950;
}
.home-section-cards strong{
  font-size:18px;
  line-height:1.05;
}
.home-section-cards small{
  color:rgba(255,255,255,0.78);
  font-weight:750;
}
.logo-options-panel{
  grid-column:1 / -1;
  margin-top:10px;
  padding:14px;
  border:1px solid rgba(143,221,236,0.2);
  border-radius:24px;
  background:rgba(7,26,38,0.42);
  backdrop-filter:blur(14px);
}
.logo-options-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.logo-options-grid figure{
  display:grid;
  gap:8px;
  margin:0;
}
.logo-options-grid img{
  width:100%;
  height:96px;
  object-fit:contain;
  padding:8px;
  border-radius:16px;
  background:#fff;
}
.logo-options-grid figcaption{
  color:#fff;
  font-size:12px;
  font-weight:900;
  text-align:center;
}
body.section-mode .team-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
body.section-mode .coach-card img{
  aspect-ratio:1 / 1;
  max-height:260px;
  object-position:center 12%;
}
body.section-mode .tools-section .sheet-builder-grid{
  grid-template-columns:1fr;
}
body.section-mode .tools-section .sheet-preview{
  position:static;
}
body.section-mode .tools-section .sheet-toolbar{
  grid-template-columns:1.2fr .72fr 1fr;
}
body.section-mode .tools-section .dive-row{
  grid-template-columns:32px .68fr 1fr .68fr .62fr .62fr minmax(150px, 1.35fr);
  gap:8px;
  padding:9px;
  align-items:end;
}
body.section-mode .tools-section .dive-code-wrap{
  grid-column:auto !important;
}
body.section-mode .tools-section .dive-number{
  width:30px;
  height:36px;
  border-radius:11px;
}
body.section-mode .tools-section .sheet-rows{
  max-height:none;
  overflow:visible;
}
body.section-mode .tools-section .sheet-toolbar input,
body.section-mode .tools-section .sheet-toolbar select,
body.section-mode .tools-section .dive-row select{
  min-height:40px;
  padding:8px 9px;
}

@media (max-width:760px){
  .home-section-cards{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px;
    margin-top:18px;
  }
  .home-section-cards a{
    min-height:82px;
    padding:12px;
    border-radius:18px;
  }
  .logo-options-panel{
    margin-top:0;
    padding:12px;
  }
  .logo-options-grid{
    grid-template-columns:1fr;
  }
  .logo-options-grid img{
    height:78px;
  }
  .hero-logo-stage{
    margin-inline:auto;
  }
  body.section-mode .section-band,
  body.section-mode .vision-band,
  body.section-mode .video-band,
  body.section-mode .tools-section,
  body.section-mode .results-section,
  body.section-mode .outreach-band,
  body.section-mode .snapshot-band{
    min-height:calc(100svh - 66px);
    padding-top:28px;
    padding-bottom:32px;
  }
  body.section-mode .team-grid{
    grid-template-columns:1fr !important;
  }
  body.section-mode .coach-card{
    display:grid;
    grid-template-columns:112px minmax(0, 1fr);
    align-items:stretch;
    border-radius:22px;
  }
  body.section-mode .coach-card img{
    width:100%;
    height:100%;
    max-height:none;
    aspect-ratio:auto;
    border-width:0;
  }
  body.section-mode .coach-card div{
    padding:14px;
  }
  body.section-mode .coach-card h3{
    font-size:20px;
    margin-bottom:6px;
  }
  body.section-mode .coach-role{
    font-size:12px;
    margin-bottom:4px;
  }
  body.section-mode .coach-card p:not(.section-kicker):not(.coach-role){
    font-size:13.5px;
    line-height:1.45;
  }
  body.section-mode .coach-achievements{
    gap:6px;
    margin-top:10px;
  }
  body.section-mode .coach-achievements li{
    padding:7px 9px 7px 27px;
    font-size:11.5px;
    border-radius:12px;
  }
  body.section-mode .coach-achievements li::before{
    left:9px;
    width:9px;
    height:9px;
    box-shadow:0 0 0 3px rgba(255,90,50,0.12);
  }
  body.section-mode .tools-section .sheet-toolbar{
    grid-template-columns:1fr 1fr !important;
  }
  body.section-mode .tools-section .sheet-toolbar label:first-child{
    grid-column:1 / -1;
  }
  body.section-mode .tools-section .dive-row{
    grid-template-columns:28px 1fr 1fr 1fr !important;
    gap:7px;
    padding:8px;
    border-radius:16px;
  }
  body.section-mode .tools-section .dive-row label{
    font-size:9px;
  }
  body.section-mode .tools-section .dive-number{
    width:28px;
    height:38px;
    grid-row:span 2;
    grid-column:auto !important;
  }
  body.section-mode .tools-section .dive-code-wrap{
    grid-column:2 / -1 !important;
  }
  body.section-mode .tools-section .sheet-toolbar input,
  body.section-mode .tools-section .sheet-toolbar select,
  body.section-mode .tools-section .dive-row select{
    min-height:36px;
    padding:7px 8px;
    border-radius:12px;
    font-size:12px;
  }
  body.section-mode .tools-section .sheet-builder-panel,
  body.section-mode .tools-section .sheet-preview{
    padding:12px;
    border-radius:20px;
  }
  body.section-mode .tools-section .sheet-table{
    min-width:520px;
  }
}

/* ---------------- Logo badges: circle-in-circle treatment ----------------
   Consolidated last so it reliably wins over earlier logo rules.
   Replaces the old "square logo in a circle" look everywhere the mark repeats. */
.logo-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  isolation:isolate;
  flex:none;
}
.logo-badge::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  background:conic-gradient(from 90deg, rgba(43,196,224,0), rgba(43,196,224,0.55), rgba(255,255,255,0.4), rgba(43,196,224,0));
  z-index:-2;
  animation:logoSpin 9s linear infinite;
}
.logo-badge::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:#fff;
  z-index:-1;
  box-shadow:0 6px 16px rgba(7,26,38,0.16);
}
.logo-badge img{
  width:88%;
  height:88%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 3px 6px rgba(7,26,38,0.14));
}
.logo-badge--nav{ width:52px; height:52px; transition:transform 0.35s ease; }
.logo-badge--footer{ width:50px; height:50px; }
.brand:hover .logo-badge--nav{ transform:rotate(14deg) scale(1.08); }
.brand-word{
  font-family:var(--display);
  font-weight:700;
  font-size:20px;
  letter-spacing:0.01em;
  white-space:nowrap;
}
.site-footer .brand-word{ color:#fff; }
@media (max-width:420px){
  .brand-word{ font-size:16px; }
  .logo-badge--nav{ width:42px; height:42px; }
}

.hero-logo-stage{
  position:relative;
  width:min(280px, 60vw);
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
  margin:0 auto;
  animation:heroFloat 5.2s ease-in-out infinite;
}
.hero-logo-stage::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 90deg, rgba(43,196,224,0), rgba(43,196,224,0.5), rgba(255,255,255,0.32), rgba(43,196,224,0));
  z-index:-2;
  animation:logoSpin 12s linear infinite;
}
.hero-logo-stage::after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:50%;
  background:rgba(255,255,255,0.92);
  z-index:-1;
  box-shadow:0 22px 60px rgba(7,26,38,0.28);
}
.hero-logo-orbit{
  position:absolute;
  inset:-24px;
  border-radius:50%;
  border:1.5px dashed rgba(255,255,255,0.28);
  animation:logoSpin 22s linear infinite reverse;
}
.hero-logo-stage img{
  width:62%;
  height:62%;
  object-fit:contain;
  filter:drop-shadow(0 12px 18px rgba(7,26,38,0.18));
  animation:heroPulse 4.4s ease-in-out infinite;
}
@keyframes heroPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.045); }
}
@media (max-width:760px){
  .hero-logo-stage{ width:min(130px, 36vw); order:0; }
}

/* ---------------- Book & Other Resources ---------------- */
.book-card{
  display:grid;
  grid-template-columns:minmax(180px, 240px) 1fr;
  gap:32px;
  align-items:center;
  background:#fff;
  border:1px solid var(--foam-dim);
  border-radius:var(--radius-lg, 24px);
  box-shadow:var(--shadow-card);
  padding:28px;
}
.book-cover-frame{ position:relative; }
.book-cover{
  width:100%;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(7,26,38,0.18);
  display:block;
}
.book-badge{
  position:absolute;
  top:12px;
  left:-8px;
  background:var(--coral, #ff6b4a);
  color:#fff;
  font-family:var(--mono, monospace);
  font-size:11px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:0 6px 6px 0;
  box-shadow:0 6px 14px rgba(7,26,38,0.25);
}
.book-info h3{ font-family:var(--body); font-size:26px; font-weight:900; margin:6px 0 12px; }
.book-info p{ color:#3C5560; line-height:1.6; }
.book-info .btn{ margin-top:16px; }

@media (max-width:760px){
  .book-card{ grid-template-columns:1fr; text-align:center; }
  .book-cover-frame{ max-width:200px; margin:0 auto; }
}

/* ---------------- mobile hero/coach fixes ---------------- */
@media (max-width:760px){
  .coach-card img{ aspect-ratio:5 / 5.4; }
  .hero-logo-stage{ display:none; }
}

/* =====================================================================
   NAV + HERO — clean rebuild, isolated namespace (td*)
   Written from scratch on 14 Jul after repeated conflicts with the
   older nav/hero rules above. Nothing above this point uses the
   td- prefix, so nothing above can accidentally override this.
   Mobile-first: base rules are the phone layout; ONE min-width query
   switches to desktop. No other breakpoints touch these classes.
   ===================================================================== */
.tdnav{
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid rgba(7,26,38,0.1);
}
.tdnav.is-scrolled{ box-shadow: 0 8px 24px rgba(7,26,38,0.08); }
.tdnav-row{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.tdnav-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.tdnav-logo{
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px rgba(7,26,38,0.16);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tdnav-logo img{ width: 92%; height: 92%; object-fit: contain; }
.tdnav-word{
  font-family: var(--body);
  font-weight: 800;
  font-size: 17px;
  color: #071a22;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.tdnav-toggle{
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.tdnav-toggle-text{ font-weight: 700; font-size: 13px; color: #071a22; font-family: var(--body); }
.tdnav-toggle-bars{ display: flex; flex-direction: column; gap: 5px; }
.tdnav-toggle-bars span{ width: 22px; height: 2px; background: #071a22; display: block; }
.tdnav-panel{
  display: none;
  width: 100%;
  order: 3;
}
.tdnav-panel.is-open{ display: block; }
.tdnav-links{
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.tdnav-links a{
  display: block;
  padding: 13px 4px;
  color: #071a22;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-top: 1px solid rgba(7,26,38,0.08);
}
.tdnav-links li:first-child a{ border-top: none; }
.tdnav-links a.tdnav-contact{ color: #ff6b4a; font-weight: 800; }
.tdnav-links a.is-active{ color: #ff6b4a; }
.tdnav-login-link{
  display: block;
  margin-top: 14px;
  padding: 12px 14px;
  border: none;
  border-radius: 999px;
  background: #ff6b4a;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 rgba(180,60,30,0.35);
  transition: background 0.15s ease, transform 0.15s ease;
}
.tdnav-login-link:hover{ background: #ff8264; transform: translateY(-1px); }
.tdnav-login-link:active{ transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(180,60,30,0.35); }

@media (min-width: 1100px){
  .tdnav-row{ flex-wrap: nowrap; gap: 24px; }
  .tdnav-toggle{ display: none; }
  .tdnav-panel{
    display: flex !important;
    order: 0;
    width: auto;
    align-items: center;
    gap: 28px;
    flex: 1;
    justify-content: flex-end;
  }
  .tdnav-links{ flex-direction: row; gap: 2px; margin: 0; }
  .tdnav-links a{ border-top: none; padding: 9px 14px; border-radius: 999px; }
  .tdnav-links a:hover{ background: rgba(7,26,38,0.06); }
  .tdnav-links a.tdnav-contact{
    background: #0c3f52;
    color: #fff;
    box-shadow: inset 0 -3px 0 rgba(6,26,36,0.5);
    transition: transform 0.12s ease, background 0.12s ease;
  }
  .tdnav-links a.tdnav-contact:hover{ background: #145874; transform: translateY(-1px); }
  .tdnav-links a.tdnav-contact:active{ transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(6,26,36,0.5); }
  .tdnav-login-link{
    margin: 0;
    padding: 9px 14px;
  }
}

.tdhero{
  background:
    linear-gradient(180deg, rgba(7,26,38,0.7), rgba(7,26,38,0.92)),
    url("images/hero-premium-pool.jpg") center 45% / cover no-repeat;
  padding: 56px 20px 48px;
  min-height: 88vh;
  min-height: 88svh;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.tdhero-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  padding: 0 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 28px;
  position: relative;
  z-index: 1;
}
.tdhero-copy{ width: 100%; }
.tdhero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.14);
  padding: 7px 14px;
  border-radius: 999px;
  margin: 0 0 18px;
}
.tdhero-eyebrow-dot{ width: 7px; height: 7px; border-radius: 50%; background: #ff6b4a; flex: none; display:inline-block; }
.tdhero-title{
  font-family: var(--body);
  font-size: clamp(32px, 6vw, 68px);
  line-height: 1.04;
  color: #fff;
  font-weight: 900;
  margin: 0 0 16px;
  max-width: 16ch;
}
.tdhero-lede{
  color: rgba(255,255,255,0.87);
  font-size: 16px;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 0 28px;
}
.tdhero-actions{ display: flex; gap: 12px; flex-wrap: wrap; }
.tdhero-btn{
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 800;
  font-size: 14.5px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.tdhero-btn:active{ transform: translateY(2px); }
.tdhero-btn-primary{ background: #ff6b4a; color: #fff; }
.tdhero-btn-ghost{ background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.85); }
.tdhero-btn-ghost:hover{ background: rgba(255,255,255,0.22); }

@media (min-width: 760px){
  .tdhero{ padding: 72px 20px 64px; min-height: 78vh; min-height: min(78svh, 560px); }
}

/* ---------------- team grid overflow fix ----------------
   .team-grid had no mobile column override anywhere in the file,
   so it stayed 3 columns on phones and forced the whole page wider
   than the screen — that's what was slicing off the heading/photo. */
@media (max-width: 760px){
  .team-grid{ grid-template-columns: 1fr; }
}

/* ---------------- tdhero: animated logo + duolingo-style rounded type ----------------
   Re-added per request, built inside the same isolated td- namespace so it
   can't tangle with the old hero-logo-stage rules (which no longer exist). */
.tdnav-word,
.tdnav-toggle-text,
.tdnav-links a,
.tdhero-eyebrow,
.tdhero-title,
.tdhero-btn{
  font-family: var(--display);
}
.tdhero-logo{
  width: 128px;
  height: 128px;
  margin: 0;
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
}
.tdhero-logo-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.45);
  animation: tdheroSpin 16s linear infinite;
}
.tdhero-logo::before{
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 26px rgba(7,26,38,0.32);
}
.tdhero-logo img{
  position: relative;
  z-index: 1;
  width: 84%;
  height: 84%;
  object-fit: contain;
  animation: tdheroPulse 4.5s ease-in-out infinite;
}
@keyframes tdheroSpin{ to{ transform: rotate(360deg); } }
@keyframes tdheroPulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
}
.tdhero-btn-primary{ background: #ff6b4a; box-shadow: inset 0 -4px 0 rgba(200,70,40,0.3); }

@media (min-width: 760px){
  .tdhero-inner{ flex-direction: row; justify-content: flex-start; align-items: center; gap: 64px; }
  .tdhero-copy{ width: auto; flex: 0 1 560px; }
  .tdhero-logo{ width: 200px; height: 200px; margin: 0; }
}
@media (min-width: 1180px){
  .tdhero-logo{ width: 230px; height: 230px; }
  .tdhero-inner{ gap: 90px; }
}
@media (prefers-reduced-motion: reduce){
  .tdhero-logo-ring, .tdhero-logo img{ animation: none; }
}

/* ---------------- global typography consistency pass ----------------
   Audited every live h2/h3 selector in the file (dead selectors from
   old page versions, like .portal-grid/.login-card/.cta-band, were
   ignored — they don't match anything in the current HTML). Every
   section heading now shares one scale instead of five different ones. */
.section-head h2,
.dd-copy h2,
.video-grid h2,
.snapshot-intro h2,
.outreach-grid h2,
#dd-finder .dd-copy h2{
  font-size: clamp(38px, 5.8vw, 68px) !important;
  line-height: 0.98 !important;
}
@media (max-width: 760px){
  .section-head h2,
  .dd-copy h2,
  .video-grid h2,
  .snapshot-intro h2,
  .outreach-grid h2,
  #dd-finder .dd-copy h2{
    font-size: clamp(28px, 9vw, 42px) !important;
    line-height: 1.08 !important;
  }
}

/* ---------------- Tools section: dark navy theme ----------------
   Matches the same dark blue used in Results (#071a26 -> #0c3f52),
   so the site reads as one consistent theme instead of the tools
   living in their own separate light "app" style. Every actionable
   button (Find DD, Print/Save PDF, Reset) stays coral/orange —
   only passive containers, cards, and text move to navy. */

.tools-section,
#dd-finder.dd-finder-band,
.sheet-builder-band{
  background:
    radial-gradient(circle at 10% 4%, rgba(255,90,50,0.22), transparent 24rem),
    radial-gradient(circle at 90% 0%, rgba(227,169,74,0.18), transparent 26rem),
    linear-gradient(135deg, #071a26, #0c3f52 72%, #071a26) !important;
}

/* section labels + headings on dark */
.tools-section .section-kicker,
#dd-finder .section-kicker{
  background: rgba(255,255,255,0.12) !important;
  color: #ffcdb8 !important;
}
.tools-section .section-kicker::before,
#dd-finder .section-kicker::before{
  background: #ff6b4a !important;
  box-shadow: 0 0 0 5px rgba(255,107,74,0.25) !important;
}
#dd-finder .dd-copy h2,
.sheet-builder-band .section-head h2{
  color: #fff !important;
  text-shadow: none !important;
}
#dd-finder .dd-copy p:not(.section-kicker),
.sheet-builder-band .section-head p{
  color: rgba(255,255,255,0.72) !important;
}

/* cards: translucent light panels instead of white/light-tinted */
#dd-finder .dd-card,
.sheet-builder-panel,
.sheet-preview,
.tool-card{
  background: rgba(255,255,255,0.05) !important;
  border: 2px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 30px 70px rgba(0,0,0,0.3) !important;
}
.sheet-preview{
  background:
    radial-gradient(circle at 100% 0%, rgba(43,196,224,0.1), transparent 15rem),
    rgba(255,255,255,0.05) !important;
}

/* labels */
#dd-finder .dd-card label,
.sheet-toolbar label,
.dive-row label{
  color: #ffcdb8 !important;
}

/* inputs/selects: dark fill, light border, white text */
#dd-finder .dd-search input,
.sheet-toolbar input,
.sheet-toolbar select,
.dive-row select{
  background: rgba(4,20,29,0.6) !important;
  border: 2px solid rgba(255,255,255,0.18) !important;
  color: #fff !important;
  box-shadow: none !important;
}
#dd-finder .dd-search input::placeholder,
.sheet-toolbar input::placeholder{
  color: rgba(255,255,255,0.4) !important;
}
#dd-finder .dd-search input:focus,
.sheet-toolbar input:focus,
.sheet-toolbar select:focus,
.dive-row select:focus{
  border-color: #ff6b4a !important;
  box-shadow: 0 0 0 4px rgba(255,107,74,0.25) !important;
}

/* dive rows */
.dive-row{
  background: rgba(255,255,255,0.04) !important;
  border: 2px solid rgba(255,255,255,0.12) !important;
}
.dive-number{
  background: #ff6b4a !important;
  color: #fff !important;
}

/* result card: dark with a coral glow, keeps the "found it" moment bright */
#dd-finder .dd-result{
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,0.08), transparent 9rem),
    rgba(255,255,255,0.05) !important;
  border: 2px solid rgba(255,107,74,0.45) !important;
  box-shadow: 0 0 0 4px rgba(255,107,74,0.1) !important;
}
#dd-finder .dd-result strong{
  color: #ffb99a !important;
  text-shadow: none !important;
}
#dd-finder .dd-result.not-found{
  background: rgba(255,90,50,0.12) !important;
  border-color: rgba(255,90,50,0.5) !important;
}
#dd-finder .dd-format{
  color: rgba(255,255,255,0.72) !important;
  background: rgba(255,255,255,0.05) !important;
  border: 2px solid rgba(255,255,255,0.14) !important;
}

/* generated sheet table rows */
.sheet-hint{ color: rgba(255,255,255,0.6) !important; }
.sheet-code-pill{ background: rgba(43,196,224,0.16) !important; color: #bdeeff !important; }
.sheet-dd-pill{ background: rgba(227,169,74,0.2) !important; color: #ffe0a3 !important; }
.sheet-row-missing td{ background: rgba(255,90,50,0.1) !important; }

/* action buttons stay exactly coral — explicit, so nothing above touches them */
#dd-finder .btn-coral,
.sheet-builder-panel .btn-coral,
.sheet-builder-panel .btn-line{
  background: #ff6b4a !important;
  color: #fff !important;
  box-shadow: inset 0 -5px 0 #e8451f, 0 12px 24px rgba(255,90,50,0.28) !important;
  border-color: transparent !important;
}
.sheet-builder-panel .btn-line{
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  box-shadow: none !important;
}

/* ---------------- Tools section: correction — light, bright, navy+coral as ACCENTS ----------------
   The dark-navy-background version above was a mistake: it made headings
   nearly invisible (dark ink text on dark navy) and read as heavy/moody
   rather than a fast, legible utility. Real UX reference (Duolingo, and
   any well-built tool UI) uses dark color as TEXT and accent, not as the
   dominant background for something people need to read quickly.
   This block supersedes the dark theme above by being later in the file. */

.tools-section,
#dd-finder.dd-finder-band,
.sheet-builder-band{
  background:
    radial-gradient(circle at 10% 4%, rgba(255,90,50,0.12), transparent 24rem),
    radial-gradient(circle at 90% 0%, rgba(12,63,82,0.08), transparent 26rem),
    #f7fbfd !important;
}

/* headings: dark navy on light = strong, confident, actually readable */
.tools-section .section-head h2,
#dd-finder .dd-copy h2,
.sheet-builder-band .section-head h2{
  color: #071a26 !important;
  text-shadow: none !important;
}
.tools-section .section-head p,
#dd-finder .dd-copy p:not(.section-kicker),
.sheet-builder-band .section-head p{
  color: #3c5560 !important;
}
.tools-section .section-kicker,
#dd-finder .section-kicker{
  background: #ffe4da !important;
  color: #c94a1f !important;
}
.tools-section .section-kicker::before,
#dd-finder .section-kicker::before{
  background: #ff6b4a !important;
  box-shadow: 0 0 0 5px rgba(255,107,74,0.18) !important;
}

/* cards: white, with a navy top accent instead of a full dark fill */
#dd-finder .dd-card,
.sheet-builder-panel,
.sheet-preview,
.tool-card{
  background: #fff !important;
  border: 2px solid #dbe7ec !important;
  border-top: 6px solid #0c3f52 !important;
  box-shadow: 0 20px 50px rgba(7,26,38,0.1) !important;
}

/* labels: navy, not coral-on-dark anymore */
#dd-finder .dd-card label,
.sheet-toolbar label,
.dive-row label{
  color: #0c3f52 !important;
}

/* inputs: light fill, navy border, dark readable text */
#dd-finder .dd-search input,
.sheet-toolbar input,
.sheet-toolbar select,
.dive-row select{
  background: #f7fbfd !important;
  border: 2px solid #cfe0e7 !important;
  color: #071a26 !important;
  box-shadow: none !important;
}
#dd-finder .dd-search input::placeholder,
.sheet-toolbar input::placeholder{
  color: #93a8b0 !important;
}
#dd-finder .dd-search input:focus,
.sheet-toolbar input:focus,
.sheet-toolbar select:focus,
.dive-row select:focus{
  border-color: #ff6b4a !important;
  box-shadow: 0 0 0 4px rgba(255,107,74,0.16) !important;
}

.dive-row{
  background: #fff !important;
  border: 2px solid #e6eef1 !important;
}
.dive-number{
  background: #ff6b4a !important;
  color: #fff !important;
  box-shadow: inset 0 -4px 0 #e8451f !important;
}

/* result card: light with a bold coral border, dark readable number */
#dd-finder .dd-result{
  background: #fff5f0 !important;
  border: 2px solid #ff6b4a !important;
  box-shadow: none !important;
}
#dd-finder .dd-result strong{
  color: #c94a1f !important;
  text-shadow: none !important;
}
#dd-finder .dd-result.not-found{
  background: #fff0eb !important;
  border-color: #ff6b4a !important;
}
#dd-finder .dd-format{
  color: #3c5560 !important;
  background: #f7fbfd !important;
  border: 2px solid #dbe7ec !important;
}

.sheet-hint{ color: #4c6b53 !important; }
.sheet-code-pill{ background: #e9f8fb !important; color: #0c3f52 !important; }
.sheet-dd-pill{ background: #fff4dc !important; color: #8b5b0b !important; }
.sheet-row-missing td{ background: #fff8f5 !important; }

/* buttons stay exactly coral, ghost button becomes navy-outlined on light */
.sheet-builder-panel .btn-line{
  background: #fff !important;
  color: #0c3f52 !important;
  border: 2px solid #0c3f52 !important;
  box-shadow: none !important;
}

/* ---------------- grid blowout fix: team section ----------------
   Real bug, confirmed by screenshot: grid items don't shrink below
   their content's natural size by default (this includes an <img>'s
   intrinsic dimensions), even inside a 1fr track. That let the coach
   card (and therefore the whole grid, and the whole section) render
   wider than the phone screen, which is why both the photo and the
   heading above it were cut off at the same edge — the section itself
   was oversized, not just one element. min-width:0 explicitly allows
   the grid item to shrink to fit, which is the standard fix. */
.team-grid{
  min-width: 0;
}
.coach-card{
  min-width: 0;
}
.coach-card img{
  min-width: 0;
  max-width: 100%;
}

/* ---------------- grid blowout fix: training centres section ----------------
   Same bug class as the team-grid fix above, but worse: this grid had
   a hard 340px minimum column and NO mobile override to stack at all.
   On any phone narrower than ~370px that alone guarantees horizontal
   overflow. Would have caused the identical "need to zoom out" issue
   the moment the Centres section was reached. */
@media (max-width: 760px){
  .centre-showcase,
  .centre-showcase.goregaon-card{
    grid-template-columns: 1fr;
    min-width: 0;
  }
  .centre-photo{ min-height: 260px; }
}

/* ---------------- grid blowout fix: video section + academy snapshot ----------------
   Same bug, two more instances found via a full audit of every grid
   container on the page: .video-grid had a hard 420px minimum column
   and .snapshot-grid a hard 240px minimum, and NEITHER had any mobile
   override at all — not a broken one, none. Both guaranteed overflow
   on a phone screen. This was a systemic gap, not one-off bugs, which
   is why they kept surfacing section by section instead of all at once. */
@media (max-width: 760px){
  .video-grid{
    grid-template-columns: 1fr;
    min-width: 0;
  }
  .snapshot-grid{
    grid-template-columns: 1fr;
    min-width: 0;
  }
}
.video-grid,
.snapshot-grid{
  min-width: 0;
}

/* =====================================================================
   MOBILE-FIRST LAYOUT SYSTEM — single source of truth
   Rewritten 14 Jul, same approach as the nav/hero rebuild that never
   had a bug reported against it: base rules ARE the mobile layout
   (no media query needed to "fix" mobile after the fact), and ONE
   min-width:760px query adds the desktop multi-column layouts. This
   replaces reliance on the old file's scattered, sometimes-missing,
   sometimes-conflicting max-width overrides for every section below.
   Nothing above this point needs to be correct anymore for layout —
   only for color/type, which is unaffected by any rule here.
   ===================================================================== */

.team-grid,
.vision-grid,
.video-grid,
.centre-showcase,
.centre-showcase.goregaon-card,
.book-card,
.outreach-grid,
.outreach-gallery,
.snapshot-grid,
.contact-grid,
.sheet-builder-grid{
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
}
.snapshot-metrics{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
}
.centre-showcase .centre-photo{ min-height: 240px; }

@media (min-width: 760px){
  .team-grid{ grid-template-columns: repeat(3, 1fr); }
  .vision-grid{ grid-template-columns: 1fr 1fr; }
  .video-grid{ grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); }
  .centre-showcase{ grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  .centre-showcase.goregaon-card{ grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
  .centre-showcase .centre-photo{ min-height: 390px; }
  .book-card{ grid-template-columns: minmax(180px, 240px) 1fr; }
  .outreach-grid{ grid-template-columns: 1fr 1fr; }
  .outreach-gallery{ grid-template-columns: repeat(3, 1fr); }
  .snapshot-grid{ grid-template-columns: minmax(0, 0.42fr) 1fr; }
  .snapshot-metrics{ grid-template-columns: repeat(4, 1fr); }
  .contact-grid{ grid-template-columns: repeat(3, 1fr); }
  .sheet-builder-grid{ grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.78fr); }
}

/* every grid item allowed to shrink below its content's natural size —
   the actual root cause of every "need to zoom out" bug found today */
.coach-card,
.vision-card,
.centre-copy,
.centre-photo,
.outreach-gallery img,
.contact-card,
.tool-card,
.sheet-builder-panel,
.sheet-preview{
  min-width: 0;
}
.centre-photo img,
.outreach-gallery img,
.book-cover,
.coach-card img{
  min-width: 0;
  max-width: 100%;
}

/* ---------------- Site forms (inquiry + careers) ---------------- */
.inquiry-wrap{ margin-top:36px; padding-top:32px; border-top:1px solid var(--foam-dim); }
.careers-section{ background:var(--foam); }
.site-form{ display:grid; gap:14px; max-width:640px; margin-top:18px; }
.site-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.site-form label{
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--body); font-size:13px; font-weight:700; color:var(--pool);
}
.site-form input, .site-form textarea{
  font-family:var(--body); font-size:14.5px; font-weight:500; color:var(--ink);
  padding:12px 14px; border-radius:var(--radius); border:1px solid var(--foam-dim);
  background:#fff;
}
.site-form input:focus, .site-form textarea:focus{ outline:none; border-color:var(--aqua); box-shadow:0 0 0 4px rgba(43,196,224,0.14); }
.site-form textarea{ resize:vertical; font-family:var(--body); }
.site-form input[type="file"]{ padding:9px 14px; }
.form-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px; }
.form-status{ font-family:var(--body); font-size:13.5px; font-weight:700; color:var(--pool-2); }
.form-status.is-error{ color:#C94A1F; }
.form-status.is-success{ color:#1A7A3C; }
@media (max-width:640px){
  .site-form .form-row{ grid-template-columns:1fr; }
}

/* ---------------- Skip link (accessibility) ----------------
   Visually hidden until keyboard-focused, then jumps straight to the
   hero/main content — lets a keyboard user bypass the 8-link nav on
   every single page load instead of tabbing through it every time. */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:1000;
  background:#0c3f52;
  color:#fff;
  padding:12px 20px;
  border-radius:0 0 10px 0;
  font-weight:800;
  text-decoration:none;
}
.skip-link:focus{
  left:0;
}

/* ---------------- Accessibility + language widget ----------------
   Floating button (bottom-right) opening a panel with text-size,
   contrast/grayscale/underline/readable-font toggles, plus a language
   grid backed by real, hand-authored translations (translations.js) —
   swapped in instantly client-side, no external translation service. */
.a11y-fab{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:900;
  width:54px;
  height:54px;
  border-radius:50%;
  border:none;
  background:var(--pool);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:var(--shadow-soft);
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.a11y-fab svg{ width:26px; height:26px; fill:#fff; }
.a11y-fab:hover{ background:var(--pool-2); transform:translateY(-2px); }
.a11y-fab.is-open{ background:var(--coral); }
.a11y-fab:focus-visible{ outline:3px solid var(--aqua); outline-offset:3px; }

.a11y-panel{
  position:fixed;
  right:20px;
  bottom:84px;
  z-index:900;
  width:min(340px, calc(100vw - 40px));
  max-height:min(72vh, 620px);
  overflow-y:auto;
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow-soft);
  padding:18px;
  display:none;
  font-family:var(--body);
  color:var(--ink);
}
.a11y-panel.is-open{ display:block; animation:sectionIn .16s ease-out both; }

.a11y-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.a11y-panel-head h2{
  font-family:var(--display); font-size:18px; margin:0; color:var(--pool);
}
.a11y-close{
  border:none; background:var(--foam); color:var(--ink);
  width:30px; height:30px; border-radius:50%; font-size:18px; line-height:1;
  cursor:pointer;
}
.a11y-close:hover{ background:var(--foam-dim); }

.a11y-section{ margin-bottom:16px; }
.a11y-section:last-child{ margin-bottom:0; }
.a11y-section-label{
  display:block; font-size:12px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--pool-2); margin-bottom:8px;
}
.a11y-btn-row{ display:flex; gap:8px; }
.a11y-btn-row--wrap{ flex-wrap:wrap; }

.a11y-chip{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  border:1px solid var(--foam-dim); background:var(--foam); color:var(--ink);
  border-radius:10px; padding:8px 4px; cursor:pointer; font-weight:800;
}
.a11y-chip[data-size="large"]{ font-size:18px; }
.a11y-chip[data-size="larger"]{ font-size:21px; }
.a11y-chip-sub{ font-size:10px; font-weight:600; color:var(--ink-70); }
.a11y-chip[aria-pressed="true"]{
  background:var(--pool); border-color:var(--pool); color:#fff;
}
.a11y-chip[aria-pressed="true"] .a11y-chip-sub{ color:var(--white-70); }

.a11y-toggle{
  border:1px solid var(--foam-dim); background:var(--foam); color:var(--ink);
  border-radius:20px; padding:8px 14px; font-size:13.5px; font-weight:700;
  cursor:pointer;
}
.a11y-toggle[aria-pressed="true"]{
  background:var(--pool); border-color:var(--pool); color:#fff;
}

.a11y-reset{
  width:100%; border:1px solid var(--coral); background:#fff; color:var(--coral);
  border-radius:10px; padding:9px; font-weight:800; cursor:pointer;
}
.a11y-reset:hover{ background:var(--coral); color:#fff; }

.a11y-section--lang{ border-top:1px solid var(--foam-dim); padding-top:14px; }
.a11y-lang-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
}
.a11y-lang-btn{
  border:1px solid var(--foam-dim); background:var(--foam); color:var(--ink);
  border-radius:8px; padding:7px 8px; font-size:13px; font-weight:600;
  text-align:left; cursor:pointer;
}
.a11y-lang-btn:hover{ background:var(--foam-dim); }
.a11y-lang-btn.is-active{ background:var(--pool); border-color:var(--pool); color:#fff; }
.a11y-lang-note{
  margin:10px 0 0; font-size:11.5px; color:var(--ink-70); line-height:1.4;
}

@media (max-width:480px){
  .a11y-fab{ right:14px; bottom:14px; }
  .a11y-panel{ right:14px; bottom:78px; }
}

/* ---- Display modes toggled by accessibility.js ----
   The fab/panel live outside <body> (appended to <html> — see
   accessibility.js), so these body-scoped overrides can never touch the
   widget itself and don't need any :not() exclusion gymnastics. */
html.a11y-contrast body{
  background:#000 !important; color:#fff !important;
}
html.a11y-contrast body,
html.a11y-contrast body *{
  background-color:#000 !important;
  color:#fff !important;
  border-color:#fff !important;
}
html.a11y-contrast img,
html.a11y-contrast video{ filter:grayscale(1) contrast(1.2); }
html.a11y-contrast a{ color:#FFD966 !important; }
html.a11y-contrast .a11y-panel,
html.a11y-contrast .a11y-panel *{
  background-color:#000 !important; color:#fff !important; border-color:#fff !important;
}
html.a11y-contrast .a11y-chip[aria-pressed="true"],
html.a11y-contrast .a11y-toggle[aria-pressed="true"],
html.a11y-contrast .a11y-lang-btn.is-active{
  background-color:#FFD966 !important; color:#000 !important;
}

html.a11y-grayscale body{ filter:grayscale(1); }

html.a11y-underline-links a{ text-decoration:underline !important; }

html.a11y-readable-font body,
html.a11y-readable-font body *{
  font-family:"Atkinson Hyperlegible", Verdana, "Segoe UI", Arial, sans-serif !important;
  letter-spacing:.01em !important;
}

/* ================= Motion system =================
   Site-wide animation pass. Builds on infrastructure that already
   existed rather than duplicating it: the .reveal/.is-visible pair
   above (script.js's IntersectionObserver), the hero logo's
   tdheroSpin/tdheroPulse keyframes, and the accessibility widget's
   toggle mechanism. Two independent kill-switches are honoured
   everywhere below: the OS-level prefers-reduced-motion query, and a
   new "Reduce motion" toggle in the accessibility panel
   (html.a11y-reduce-motion, wired in accessibility.js). */

@keyframes tdFadeUp{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}
@keyframes tdPopIn{
  0%{ opacity:0; transform:scale(0.86); }
  70%{ opacity:1; transform:scale(1.03); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes tdShine{
  from{ transform:translateX(-120%) skewX(-12deg); }
  to{ transform:translateX(220%) skewX(-12deg); }
}
@keyframes tdDrawLineH{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}
@keyframes tdDrawLineV{
  from{ transform:scaleY(0); }
  to{ transform:scaleY(1); }
}
@keyframes tdFloat{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
@keyframes tdGlowPulse{
  0%, 100%{ box-shadow:0 6px 18px rgba(255,107,74,0.35); }
  50%{ box-shadow:0 10px 34px rgba(255,107,74,0.65), 0 0 0 6px rgba(255,107,74,0.12); }
}
@keyframes tdGoldShimmer{
  0%{ background-position:-200% 0; }
  100%{ background-position:200% 0; }
}

/* Reveal-on-scroll stagger: script.js adds .reveal-d1..d6 to children of
   grid/list containers based on their index, so cards in a row pop in one
   after another instead of all at once. The base .reveal/.is-visible pair
   already existed — this only adds a per-item delay on top of it. */
.js .reveal{ transition-duration:0.85s; transition-timing-function:cubic-bezier(0.16, 1.15, 0.3, 1); }
.reveal-d1.is-visible{ transition-delay:0.06s; }
.reveal-d2.is-visible{ transition-delay:0.12s; }
.reveal-d3.is-visible{ transition-delay:0.18s; }
.reveal-d4.is-visible{ transition-delay:0.24s; }
.reveal-d5.is-visible{ transition-delay:0.30s; }
.reveal-d6.is-visible{ transition-delay:0.36s; }

/* Hero entrance — the logo already animated on its own; the copy and
   buttons used to just snap in with no motion at all. Bigger travel
   distance (see the tdFadeUp keyframe above) and a longer stagger so
   this reads as a clear sequence, not a flicker. */
.js .tdhero-eyebrow{ opacity:0; animation:tdFadeUp 0.8s ease 0.05s forwards; }
.js .tdhero-title{ opacity:0; animation:tdFadeUp 0.8s ease 0.22s forwards; }
.js .tdhero-lede{ opacity:0; animation:tdFadeUp 0.8s ease 0.42s forwards; }
.js .tdhero-actions{ opacity:0; animation:tdFadeUp 0.8s ease 0.62s forwards; }
/* Continuous idle motion — on-load/scroll reveals only fire once and are
   easy to miss entirely if the page is already in view. These loop
   forever so there's always something visibly moving: the hero logo
   pops in then drifts gently up and down (stacked on top of its
   existing ring-spin/image-pulse), and the primary CTA breathes with a
   soft glow. */
.js .tdhero-logo{
  opacity:0;
  animation-name: tdPopIn, tdFloat;
  animation-duration: 0.9s, 4s;
  animation-delay: 0.15s, 1.1s;
  animation-timing-function: ease, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
}
.tdhero-btn-primary{ animation:tdGlowPulse 2.4s ease-in-out infinite; }

/* Button + nav-link micro-interactions — bigger, springier lift than a
   typical 2px nudge so hovering a button is unmistakable. */
.tdhero-btn-primary:hover{ transform:translateY(-4px) scale(1.04); box-shadow:0 14px 30px rgba(255,107,74,0.5); }
.tdhero-btn-ghost:hover{ transform:translateY(-4px) scale(1.04); }
.tdhero-btn{ transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease; }
.tdnav-links a{ position:relative; }
.tdnav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px;
  background:currentColor; transition:right 0.25s ease;
}
.tdnav-links a:hover::after{ right:0; }
.tdnav-logo img{ transition:transform 0.3s ease; }
.tdnav-brand:hover .tdnav-logo img{ transform:rotate(-12deg) scale(1.15); }

/* Card hover-lift — every major card family that previously had no hover
   feedback (team/coach cards, vision cards, book card, testimonials, DD
   tool card, centre showcase cards, FAQ rows). Bigger lift + a slight
   scale so it reads clearly instead of a barely-there nudge. */
.coach-card, .vision-card, .book-card, .testimonial-card, .tool-card, .dd-card,
.centre-card, .faq-item{
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}
.coach-card:hover, .vision-card:hover, .book-card:hover, .testimonial-card:hover,
.tool-card:hover, .dd-card:hover, .centre-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 24px 48px rgba(7,26,38,0.18);
}
.faq-item:hover{ transform:translateX(4px); box-shadow:0 10px 24px rgba(7,26,38,0.1); }

/* ---------------- Floating idle motion, broadened ----------------
   Was only on the hero logo before — now on a small icon/photo element
   in most sections (journey numbers, FAQ +, the book badge, coach
   photos) so there's visible life throughout the page, not just in the
   hero. Deliberately NOT applied to whole cards that already animate
   their own `transform` on hover (vision/testimonial/tool/book/dd/
   centre cards, coach-card, faq-item above) — a continuous animation
   and a hover transition fighting over the same `transform` property
   causes visible jitter, so floating always targets a child element
   instead of the card itself. Each group is staggered via nth-of-type
   so a row doesn't bob in perfect unison, which reads as glitchy rather
   than alive. */
@keyframes tdFloatSm{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
.js .journey-num{ animation:tdFloatSm 3.2s ease-in-out infinite; }
.js .journey-step:nth-of-type(2) .journey-num{ animation-delay:0.4s; }
.js .journey-step:nth-of-type(3) .journey-num{ animation-delay:0.8s; }
.js .journey-step:nth-of-type(4) .journey-num{ animation-delay:1.2s; }
.js .journey-step:nth-of-type(5) .journey-num{ animation-delay:1.6s; }

.js .faq-icon{ display:inline-block; animation:tdFloatSm 2.6s ease-in-out infinite; }
.js .faq-item:nth-of-type(2n) .faq-icon{ animation-delay:0.5s; }
.js .faq-item:nth-of-type(3n) .faq-icon{ animation-delay:0.9s; }

.js .book-badge{ display:inline-block; animation:tdFloatSm 3s ease-in-out infinite; }

.js .coach-card img{ animation:tdFloatSm 4s ease-in-out infinite; }
.js .coach-paras img{ animation-delay:0.5s; }
.js .coach-neha img{ animation-delay:1s; }

.js .tdnav-eyebrow-dot, .js .tdhero-eyebrow-dot{ display:inline-block; animation:tdFloatSm 2s ease-in-out infinite; }

/* ---------------- Continuous background motion: rising bubbles ----------------
   Everything above is triggered by scroll or hover — it starts and stops.
   This is different on purpose: a diving-themed field of bubbles that
   never stops moving, the whole time the hero is on screen, so the page
   has ambient life even if nobody scrolls or touches anything. Runs
   behind .tdhero-inner (z-index 0 vs 1) and is clipped to the hero by
   its overflow:hidden, so nothing leaks into the section below. Purely
   decorative — aria-hidden in the markup. */
.td-bubbles{
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.td-bubbles span{
  position: absolute;
  bottom: -40px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0.12) 70%, transparent 76%);
  border: 1px solid rgba(255,255,255,0.25);
  opacity: 0;
}
@keyframes tdBubbleRise{
  0%{ transform: translateY(0) translateX(0); opacity: 0; }
  8%{ opacity: 0.65; }
  92%{ opacity: 0.4; }
  100%{ transform: translateY(-620px) translateX(24px); opacity: 0; }
}
.js .td-bubbles span{ animation: tdBubbleRise linear infinite; }
.td-bubbles span:nth-child(1){ left: 4%;  width: 10px; height: 10px; animation-duration: 9s;  animation-delay: 0s; }
.td-bubbles span:nth-child(2){ left: 12%; width: 16px; height: 16px; animation-duration: 12s; animation-delay: 1.4s; }
.td-bubbles span:nth-child(3){ left: 20%; width: 8px;  height: 8px;  animation-duration: 7.5s;animation-delay: 2.6s; }
.td-bubbles span:nth-child(4){ left: 29%; width: 20px; height: 20px; animation-duration: 14s; animation-delay: 0.6s; }
.td-bubbles span:nth-child(5){ left: 37%; width: 12px; height: 12px; animation-duration: 10s; animation-delay: 3.4s; }
.td-bubbles span:nth-child(6){ left: 45%; width: 9px;  height: 9px;  animation-duration: 8s;  animation-delay: 1.9s; }
.td-bubbles span:nth-child(7){ left: 53%; width: 18px; height: 18px; animation-duration: 13s; animation-delay: 4.2s; }
.td-bubbles span:nth-child(8){ left: 61%; width: 11px; height: 11px; animation-duration: 9.5s; animation-delay: 0.9s; }
.td-bubbles span:nth-child(9){ left: 68%; width: 15px; height: 15px; animation-duration: 11s; animation-delay: 2.2s; }
.td-bubbles span:nth-child(10){ left: 75%; width: 7px; height: 7px;  animation-duration: 7s;  animation-delay: 3.8s; }
.td-bubbles span:nth-child(11){ left: 82%; width: 19px; height: 19px; animation-duration: 15s; animation-delay: 1.1s; }
.td-bubbles span:nth-child(12){ left: 89%; width: 10px; height: 10px; animation-duration: 8.5s; animation-delay: 2.9s; }
.td-bubbles span:nth-child(13){ left: 95%; width: 13px; height: 13px; animation-duration: 10.5s; animation-delay: 4.6s; }
.td-bubbles span:nth-child(14){ left: 58%; width: 6px;  height: 6px;  animation-duration: 6.5s; animation-delay: 5.2s; }

/* Decorative floating quote mark on each testimonial — a pure ::before,
   so no HTML changes needed. */
.testimonial-card blockquote{ position:relative; }
.testimonial-card blockquote::before{
  content:"\201C"; position:absolute; top:-30px; left:-6px; font-size:64px; line-height:1;
  font-family:Georgia, serif; color:var(--coral); opacity:0.22; pointer-events:none;
}
.js .testimonial-card blockquote::before{ display:inline-block; animation:tdFloatSm 3.6s ease-in-out infinite; }
.js .testimonial-grid .testimonial-card:nth-of-type(2) blockquote::before{ animation-delay:0.6s; }
.js .testimonial-grid .testimonial-card:nth-of-type(3) blockquote::before{ animation-delay:1.2s; }

/* The accessibility fab already lifts on hover; giving it a slow,
   continuous bob too (like a chat-bubble widget) keeps it from reading
   as a static, easy-to-miss corner icon. */
.js .a11y-fab{ animation:tdFloatSm 3.8s ease-in-out infinite; }
.js .a11y-fab:hover{ animation-play-state:paused; }

/* Medal/position chip shine-sweep — gold chips now sweep continuously on
   a loop (not just on hover) so the results section always has visible
   motion instead of relying on someone hovering a specific chip. */
.medal-chip, .position-chip{ position:relative; overflow:hidden; }
.medal-chip::after, .position-chip::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:36%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,0.75), transparent);
  transform:translateX(-120%) skewX(-12deg);
  pointer-events:none;
}
.medal-chip:hover::after, .position-chip:hover::after{ animation:tdShine 0.9s ease; }
.js .medal-chip.gold::after{ animation:tdShine 2.6s ease-in-out infinite; animation-delay:1s; }

/* Journey timeline — the connecting line now draws itself in once the
   timeline scrolls into view, timed with the step pop-ins the existing
   .reveal system already gives .journey-step. script.js adds
   .reveal-track-drawn the moment the track is observed. */
.js .journey-track::before{ transform:scaleX(0); transform-origin:left center; }
.js .journey-track.reveal-track-drawn::before{ animation:tdDrawLineH 1s ease forwards; }
@media (max-width:640px){
  .js .journey-track::before{ transform:scaleY(0); transform-origin:top left; }
  .js .journey-track.reveal-track-drawn::before{ animation:tdDrawLineV 1s ease forwards; }
}

/* Accessibility panel controls get the same quick feedback as everything
   else, instead of feeling like a separate, static widget. */
.a11y-toggle, .a11y-chip, .a11y-lang-btn{ transition:transform 0.15s ease, background-color 0.15s ease; }
.a11y-toggle:hover, .a11y-chip:hover, .a11y-lang-btn:hover{ transform:translateY(-1px); }

/* ================= Medal tally + sparkle burst =================
   Two additions that mirror the portal app's newest animation pass:
   a count-up stat strip (built by script.js from the .medal-chip counts
   already in the DOM, so it can never drift out of sync with the results
   tables below it) and a one-shot sparkle burst on gold medal chips the
   first time they scroll into view. Both sit on top of the existing
   .reveal / IntersectionObserver system rather than replacing it. */
.td-medal-tally{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  margin:8px 0 44px;
}
.td-medal-tally-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 24px;
  border-radius:20px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(6px);
  min-width:150px;
}
.td-medal-tally-icon{ font-size:28px; line-height:1; }
.td-medal-tally-text{ display:flex; flex-direction:column; }
.td-tally-number{
  font-family:var(--body);
  font-weight:900;
  font-size:30px;
  color:#fff;
  line-height:1;
}
.td-medal-tally-item[data-medal="gold"] .td-tally-number{ color:var(--gold); }
.td-medal-tally-item[data-medal="silver"] .td-tally-number{ color:#dfe7ea; }
.td-medal-tally-item[data-medal="bronze"] .td-tally-number{ color:#e3a86a; }
.td-tally-label{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:rgba(255,255,255,0.65);
  margin-top:2px;
}
@keyframes tdTallyLand{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.16); }
  100%{ transform:scale(1); }
}
.td-tally-number.is-landed{ animation:tdTallyLand 0.4s cubic-bezier(0.34,1.56,0.64,1); }

/* Sparkle burst — small particles thrown outward and faded, fired once
   on a gold medal chip the moment it scrolls into view (script.js hooks
   this into the same observer that adds .is-visible). Chip already has
   position:relative (see .medal-chip, .position-chip above), so the
   burst just needs an absolutely-positioned host. */
@keyframes tdSparkleFly{
  0%{ opacity:1; transform:translate(-50%, -50%) rotate(var(--tdangle)) translateX(0) scale(1); }
  70%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%, -50%) rotate(var(--tdangle)) translateX(var(--tddist)) scale(0.3); }
}
.td-sparkle-particle{
  position:absolute;
  top:50%;
  left:50%;
  width:5px;
  height:5px;
  border-radius:999px;
  background:#fff3b0;
  pointer-events:none;
  animation:tdSparkleFly 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
}

/* ================= Floating inquiry button =================
   A persistent CTA (built by script.js, appended once to <body>) that
   follows the visitor down the page and jumps straight to the inquiry
   form on click — for anyone who decides mid-scroll, on the Journey
   timeline or the results wall, that they want to get in touch, instead
   of making them hunt back up to the nav. Sits bottom-left specifically
   so it never fights the accessibility fab, which already owns
   bottom-right. Hides itself once the inquiry form is already on screen
   (see script.js) since there's no point floating a "go to the form"
   button over the form itself. */
.td-float-inquiry{
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:850;
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px 20px 13px 16px;
  border-radius:999px;
  background:var(--duo-green-dark, var(--coral));
  color:#fff;
  font-family:var(--body);
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 14px 34px rgba(180,60,30,0.38);
  border:none;
  cursor:pointer;
  transform:translateY(0) scale(1);
  opacity:1;
  transition:transform 0.25s cubic-bezier(0.22,1.4,0.36,1), opacity 0.25s ease, box-shadow 0.2s ease, background 0.15s ease;
}
.td-float-inquiry svg{ width:19px; height:19px; fill:none; stroke:#fff; stroke-width:1.8; flex-shrink:0; }
.td-float-inquiry:hover{ background:#B93A22; transform:translateY(-3px) scale(1.03); box-shadow:0 18px 40px rgba(180,60,30,0.46); }
.td-float-inquiry:active{ transform:translateY(0) scale(0.96); box-shadow:0 8px 20px rgba(180,60,30,0.34); }
.td-float-inquiry:focus-visible{ outline:3px solid var(--aqua); outline-offset:3px; }
.js .td-float-inquiry{ animation:tdFloatSm 3.6s ease-in-out infinite; }
.js .td-float-inquiry:hover{ animation-play-state:paused; }
.td-float-inquiry.is-hidden{
  opacity:0;
  transform:translateY(14px) scale(0.92);
  pointer-events:none;
}
@media (max-width:480px){
  .td-float-inquiry{ left:14px; bottom:14px; padding:12px 16px 12px 14px; font-size:13px; }
  .td-float-inquiry-text{ display:none; }
  .td-float-inquiry{ width:48px; height:48px; padding:0; justify-content:center; border-radius:50%; }
  .td-float-inquiry svg{ width:21px; height:21px; }
}

/* -------- Reduced motion: two switches, one effect --------
   1) OS-level prefers-reduced-motion, respected automatically.
   2) The accessibility widget's own "Reduce motion" toggle
      (html.a11y-reduce-motion) for visitors who want stillness
      regardless of their OS setting. Both collapse every animation/
      transition on the page to effectively nothing and force every
      .reveal/hero element straight to its final, fully-visible state. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal,
  .js .tdhero-eyebrow, .js .tdhero-title, .js .tdhero-lede, .js .tdhero-actions, .js .tdhero-logo{
    opacity:1 !important; transform:none !important; animation:none !important;
  }
}
html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after{
  animation-duration:0.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:0.001ms !important;
  scroll-behavior:auto !important;
}
html.a11y-reduce-motion.js .reveal,
html.a11y-reduce-motion.js .tdhero-eyebrow,
html.a11y-reduce-motion.js .tdhero-title,
html.a11y-reduce-motion.js .tdhero-lede,
html.a11y-reduce-motion.js .tdhero-actions,
html.a11y-reduce-motion.js .tdhero-logo{
  opacity:1 !important; transform:none !important; animation:none !important;
}
html.a11y-reduce-motion .tdhero-logo-ring,
html.a11y-reduce-motion .tdhero-logo img{ animation:none !important; }