:root{
  --bg:#0b1220;
  --panel:#101a2b;
  --panel2:#132033;
  --text:#e9f0ff;
  --muted:#aeb9d7;
  --line:rgba(255,255,255,.10);
  --shadow:0 18px 55px rgba(0,0,0,.34);
  --radius:22px;
  --accent:#6d95ff;
  --accent2:#28d1df;
  --water:#7ddfff;
  --ok:#21c98b;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(900px 580px at 16% -8%, rgba(109,149,255,.22), transparent 62%),
    radial-gradient(900px 680px at 88% 4%, rgba(40,209,223,.16), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0a1320 100%);
}
body.blogPage::before{
  background:
    radial-gradient(920px 620px at 24% -8%, rgba(125,223,255,.38), transparent 63%),
    radial-gradient(900px 620px at 90% 8%, rgba(37,183,214,.26), transparent 60%),
    linear-gradient(180deg, #071827 0%, #092032 55%, #07121f 100%);
}
a{color:inherit}
img{max-width:100%}
.container{max-width:1180px;margin:0 auto;padding:18px 20px}
.muted{color:var(--muted)}
.dot{opacity:.45}

.header{
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--line);
  background:rgba(9,15,28,.78);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.blogHeader{background:rgba(7,28,43,.78)}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:62px;
  padding-top:9px;
  padding-bottom:9px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:max-content}
.logoFrame,.brandMark{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 auto;
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.logoFrame img,.brandMark img{width:44px;height:44px;object-fit:contain;display:block}
.brandText{display:flex;flex-direction:column;line-height:1.12}
.brandTitle{font-size:18px;font-weight:850;letter-spacing:.1px}
.brandSubtitle{font-size:12px;color:var(--muted);margin-top:3px}
.nav{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.nav a{
  color:var(--muted);
  text-decoration:none;
  border:1px solid transparent;
  border-radius:999px;
  padding:8px 11px;
  font-size:14px;
}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.06);border-color:var(--line)}

.heroSplit{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:20px;
  align-items:start;
  padding:34px 0 20px;
}
.heroCopy{
  padding:14px 0 0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.eyebrow{margin:0 0 10px;color:#b9d3ff;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:800}
.heroCopy h1,.swimHero h1,.swimHero h2{
  margin:0;
  font-size:clamp(36px,5.2vw,58px);
  line-height:1.02;
  letter-spacing:-.048em;
  max-width:860px;
}
.lead{font-size:clamp(17px,1.7vw,20px);line-height:1.46;max-width:760px;margin:14px 0 0}
.heroActions,.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.heroPills{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.pill{
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  border-radius:999px;
  padding:7px 11px;
  font-size:13px;
  color:var(--muted);
}
.pill.water{border-color:rgba(125,223,255,.24);background:rgba(40,209,223,.08);color:#c4eff7}

.btn{
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:inherit;
  min-height:42px;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.btn:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}
.btn.primary{background:rgba(109,149,255,.24);border-color:rgba(109,149,255,.48)}
.btn.primary:hover{background:rgba(109,149,255,.31)}
.btn.ghost{background:rgba(0,0,0,.14)}
.btn.bright{background:rgba(255,255,255,.90);border-color:rgba(255,255,255,.92);color:#073049;font-weight:750}
.btn.bright:hover{background:#fff}
.btn.brightGhost{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.36);color:#fff}

.card,.aboutCard{
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.032));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.aboutCard{padding:18px;display:flex;flex-direction:column;gap:14px}
.aboutHead{display:flex;gap:13px;align-items:center}
.aboutImgWrap{width:72px;height:72px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.04);flex:0 0 auto}
.aboutImg{width:100%;height:100%;object-fit:cover;display:block}
.aboutName{font-size:19px;font-weight:850;letter-spacing:.1px}
.aboutRole{font-size:13px;margin-top:3px}
.aboutText{margin:0;line-height:1.57}
.facts{display:grid;gap:9px;margin:0}
.facts div{display:grid;grid-template-columns:104px 1fr;gap:12px;border-top:1px solid var(--line);padding-top:9px}
.facts dt{text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--muted)}
.facts dd{margin:0;color:var(--text)}
.aboutLinks{margin-top:auto}

.sectionIntro{margin:34px 0 16px}
.sectionIntro h2{margin:0;font-size:clamp(27px,3vw,40px);letter-spacing:-.035em}
.sectionIntro p{margin:10px 0 0;max-width:920px;font-size:18px;line-height:1.5}
.projectGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:14px}
.projectCard{padding:20px;display:flex;flex-direction:column;gap:16px;min-height:300px;overflow:hidden}
.projectCard.featured{min-height:340px}
.cardTop{display:flex;flex-direction:column;gap:12px}
.cardTop h3{font-size:23px;line-height:1.18;margin:0;letter-spacing:-.02em}
.projectCard p{margin:0;line-height:1.48}
.tag{display:inline-flex;width:max-content;border-radius:999px;padding:6px 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:var(--text)}
.tag.live{border-color:rgba(33,201,139,.42);background:rgba(33,201,139,.13)}
.tag.mvp{border-color:rgba(109,149,255,.42);background:rgba(109,149,255,.14)}
.details{display:grid;gap:12px;border-top:1px solid var(--line);padding-top:14px;margin-top:auto}
.details div{display:grid;grid-template-columns:104px 1fr;gap:12px}
.details.compact{margin-top:0}
.details span{text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--muted)}
.details p{color:var(--text)}

.swimSection{margin-top:46px}
.swimHero{
  overflow:hidden;
  min-height:430px;
  border-color:rgba(125,223,255,.30);
  background:
    linear-gradient(90deg, rgba(4,25,42,.84), rgba(4,25,42,.48) 56%, rgba(206,248,255,.14)),
    url("./assets/img/pool-bg.jpg") center/cover no-repeat;
}
.swimHeroOverlay{
  padding:clamp(22px,4vw,42px);
  max-width:760px;
  min-height:430px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
  background:linear-gradient(90deg, rgba(3,18,31,.52), rgba(3,18,31,.20));
}
.swimHero p{font-size:18px;line-height:1.55;margin:16px 0 0;color:#e4faff}
.swimHero .eyebrow{color:#c9f6ff}
.swimIntro{margin-top:28px}
.heroTileGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.heroTile{
  min-height:188px;
  border-radius:22px;
  border:1px solid rgba(125,223,255,.25);
  background:
    linear-gradient(180deg, rgba(221,250,255,.13), rgba(80,209,230,.06)),
    radial-gradient(420px 180px at 12% 0%, rgba(125,223,255,.18), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  box-shadow:var(--shadow);
  padding:20px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.heroTile::after{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  bottom:-52px;
  height:90px;
  background:repeating-linear-gradient(90deg, rgba(125,223,255,.16) 0 18px, transparent 18px 54px);
  transform:rotate(-2deg);
  opacity:.75;
}
.heroTile>*{position:relative;z-index:1}
.heroTile span{display:inline-flex;color:#a9f1ff;font-weight:850;letter-spacing:.11em;font-size:12px;margin-bottom:auto}
.heroTile h3{margin:30px 0 10px;font-size:25px;letter-spacing:-.025em}
.heroTile p{margin:0;color:#c7d4ee;line-height:1.45}

.blogMainHero{margin-top:28px;min-height:500px}
.blogMainHero .swimHeroOverlay{min-height:500px;max-width:850px}
.blogPage .heroTile{background:linear-gradient(180deg, rgba(221,250,255,.20), rgba(80,209,230,.08)), rgba(255,255,255,.045)}
.draftStrip{padding:22px;margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.draftStrip p{margin:7px 0 0;line-height:1.45}
.footer{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;padding:34px 0 22px}
.footer a{color:var(--muted)}

@media (max-width:980px){
  .heroSplit{grid-template-columns:1fr;padding-top:26px}
  .projectGrid,.heroTileGrid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .container{padding:16px}
  .topbar{align-items:flex-start;flex-direction:column;gap:12px;min-height:auto;padding-top:10px;padding-bottom:10px}
  .brand{min-width:0}
  .nav{justify-content:flex-start}
  .brandSubtitle{display:none}
  .heroSplit{padding-top:18px}
  .heroCopy{padding-top:0}
  .heroCopy h1,.swimHero h1,.swimHero h2{font-size:40px;line-height:1}
  .lead,.sectionIntro p,.swimHero p{font-size:17px}
  .projectGrid,.heroTileGrid{grid-template-columns:1fr}
  .facts div,.details div{grid-template-columns:1fr;gap:5px}
  .swimHero,.swimHeroOverlay,.blogMainHero,.blogMainHero .swimHeroOverlay{min-height:unset}
  .draftStrip{align-items:stretch;flex-direction:column}
}
@media (max-width:520px){
  .logoFrame,.brandMark{width:42px;height:42px;border-radius:13px}
  .logoFrame img,.brandMark img{width:42px;height:42px}
  .brandTitle{font-size:17px}
  .nav a{padding:8px 10px}
  .aboutCard,.projectCard,.swimHeroOverlay,.heroTile,.draftStrip{padding:18px}
  .btn{width:100%}
}

/* v4: real blog articles instead of placeholder category cards */
.swimHero{min-height:360px}
.swimHeroOverlay{min-height:360px;max-width:820px}
.blogMainHero{margin-top:24px;min-height:380px}
.blogMainHero .swimHeroOverlay{min-height:380px;max-width:880px}
.swimHero h1,.swimHero h2{font-size:clamp(34px,4.5vw,54px)}

.blogLeadSection{margin-top:26px}
.postGrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.9fr);gap:16px;margin-top:16px}
.postGrid.single{grid-template-columns:minmax(0,1fr)}
.postCard{padding:24px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.postCard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--water),rgba(109,149,255,.55),transparent);opacity:.85}
.postCard h3{font-size:clamp(24px,2.4vw,34px);line-height:1.12;letter-spacing:-.035em;margin:0}
.postCard p{margin:0;line-height:1.55;color:#c9d5ee;font-size:17px}
.postCard .actions{margin-top:auto}
.postMeta{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.postBadge{display:inline-flex;align-items:center;border:1px solid rgba(125,223,255,.22);background:rgba(125,223,255,.07);color:#c7f5ff;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:750;letter-spacing:.02em}
.seriesCard{padding:24px;background:linear-gradient(180deg,rgba(125,223,255,.10),rgba(255,255,255,.035));border-color:rgba(125,223,255,.22)}
.seriesCard h3{margin:0 0 12px;font-size:23px;letter-spacing:-.02em}
.seriesCard p{margin:0 0 14px;line-height:1.55;color:#c9d5ee}
.seriesList{list-style:none;margin:0;padding:0;display:grid;gap:9px;counter-reset:series}
.seriesList li{counter-increment:series;position:relative;padding-left:34px;line-height:1.4;color:#dce6fa}
.seriesList li::before{content:counter(series,decimal-leading-zero);position:absolute;left:0;top:0;color:#a9f1ff;font-weight:850;font-size:12px;letter-spacing:.08em}

.articleHeader{padding:42px 0 24px;max-width:980px}
.articleHeader h1{font-size:clamp(38px,5.2vw,68px);line-height:.98;letter-spacing:-.055em;margin:0}
.articleHeader .lead{max-width:900px;color:#cbd7f1}
.articleMeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.articleMeta span{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);border-radius:999px;padding:7px 10px;color:#c9d5ee;font-size:13px}
.articleLayout{display:grid;grid-template-columns:minmax(0,800px) minmax(220px,1fr);gap:30px;align-items:start;margin-top:10px}
.articleContent{min-width:0}
.articleContent section{scroll-margin-top:90px;margin:0 0 34px}
.articleContent h2{font-size:clamp(28px,3vw,42px);line-height:1.08;letter-spacing:-.04em;margin:0 0 14px}
.articleContent p{font-size:18px;line-height:1.72;color:#d7e0f5;margin:0 0 17px}
.articleContent ul{margin:0 0 18px;padding-left:22px;color:#d7e0f5;font-size:18px;line-height:1.65}
.articleContent li{margin:4px 0}
.articleContent code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:1px 6px;color:#eaf6ff;font-size:.92em}
.articleAside{position:sticky;top:92px;padding:18px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid var(--line)}
.articleAside strong{display:block;margin-bottom:10px;color:#fff}
.articleAside a{display:block;text-decoration:none;color:#bfcceb;padding:8px 0;border-top:1px solid rgba(255,255,255,.07);font-size:14px;line-height:1.35}
.articleAside a:first-of-type{border-top:0}
.articleAside a:hover{color:#fff}
.articleFigure{margin:24px 0 30px;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.045);box-shadow:var(--shadow)}
.articleFigure a{display:block}
.articleFigure img{display:block;width:100%;height:auto;background:#fff}
.articleFigure figcaption{padding:12px 15px;color:#bdc9e4;line-height:1.45;font-size:14px;border-top:1px solid rgba(255,255,255,.09)}
.articleFigure.small{max-width:620px}
.flowDiagram{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0 30px}
.flowStep{position:relative;padding:18px;border-radius:18px;background:linear-gradient(180deg,rgba(125,223,255,.11),rgba(255,255,255,.04));border:1px solid rgba(125,223,255,.20);min-height:105px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.flowStep strong{font-size:17px;line-height:1.25}
.flowStep span{font-size:13px;line-height:1.35;color:#bcd0ec}
.flowStep::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:#a9f1ff;font-weight:900;z-index:2}
.flowStep:nth-child(3n)::after,.flowStep:last-child::after{display:none}
.articleCallout{padding:22px;margin:24px 0 30px;border-radius:20px;background:linear-gradient(180deg,rgba(109,149,255,.16),rgba(125,223,255,.07));border:1px solid rgba(125,223,255,.22)}
.articleCallout p{margin:0;color:#e7f5ff}
.nextBox{padding:24px;margin-top:38px;display:flex;gap:18px;justify-content:space-between;align-items:center}
.nextBox div{max-width:760px}
.nextBox h2{margin:0 0 8px;font-size:28px;letter-spacing:-.03em}
.nextBox p{margin:0;color:#c9d5ee;line-height:1.55}

@media (max-width:980px){
  .postGrid,.articleLayout{grid-template-columns:1fr}
  .articleAside{position:static;order:-1}
  .flowDiagram{grid-template-columns:1fr 1fr}
  .flowStep:nth-child(3n)::after{display:block}
  .flowStep:nth-child(2n)::after,.flowStep:last-child::after{display:none}
}
@media (max-width:760px){
  .swimHero,.swimHeroOverlay,.blogMainHero,.blogMainHero .swimHeroOverlay{min-height:unset}
  .articleHeader{padding:28px 0 18px}
  .articleContent p,.articleContent ul{font-size:17px;line-height:1.65}
  .flowDiagram{grid-template-columns:1fr}
  .flowStep::after{display:none!important}
  .nextBox{flex-direction:column;align-items:stretch}
}
@media (max-width:520px){
  .postCard,.seriesCard,.articleAside,.nextBox{padding:18px}
}

/* AdSense readiness pass: informational sections and utility pages */
.infoGrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:16px;margin:20px 0 34px}
.infoCard{padding:24px}
.infoCard h2,.legalPage h1,.contactPage h1{margin:0;font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-.04em}
.infoCard h3{margin:0 0 10px;font-size:25px;letter-spacing:-.025em}
.infoCard p{margin:12px 0 0;font-size:17px;line-height:1.58}
.infoCard.soft{background:linear-gradient(180deg,rgba(125,223,255,.10),rgba(255,255,255,.035));border-color:rgba(125,223,255,.22)}
.projectCard.flagship{border-color:rgba(125,223,255,.30);background:linear-gradient(180deg,rgba(125,223,255,.105),rgba(255,255,255,.035))}
.flagshipTag{border-color:rgba(125,223,255,.44);background:rgba(125,223,255,.13);color:#d4f8ff}
.legalPage,.contactPage{max-width:900px;margin:0 auto;padding-top:36px}
.legalIntro,.contactIntro{font-size:18px;line-height:1.62;margin:14px 0 0;color:var(--muted)}
.contentCard{padding:26px;margin-top:20px}
.contentCard h2{font-size:clamp(24px,2.7vw,34px);line-height:1.12;letter-spacing:-.03em;margin:30px 0 10px}
.contentCard h2:first-child{margin-top:0}
.contentCard p,.contentCard li{font-size:17px;line-height:1.68;color:#d7e0f5}
.contentCard ul{margin:10px 0 0;padding-left:22px}
.contactBox{display:grid;gap:14px;margin-top:18px}
.contactRow{display:grid;grid-template-columns:140px 1fr;gap:14px;padding-top:14px;border-top:1px solid var(--line)}
.contactRow:first-child{border-top:0;padding-top:0}
.contactRow span:first-child{text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--muted);font-weight:800}
.contactRow a{color:#dff8ff}
@media (max-width:760px){
  .infoGrid{grid-template-columns:1fr}
  .contactRow{grid-template-columns:1fr;gap:4px}
  .contentCard,.infoCard{padding:20px}
}

/* v7: unified button color and stronger Swimtopia project page */
.btn.primary,
.btn.bright{
  background:rgba(125,223,255,.16);
  border-color:rgba(125,223,255,.42);
  color:var(--text);
  font-weight:650;
}
.btn.primary:hover,
.btn.bright:hover{
  background:rgba(125,223,255,.23);
  border-color:rgba(125,223,255,.58);
}
.btn.ghost,
.btn.brightGhost{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.13);
  color:var(--text);
}
.btn.ghost:hover,
.btn.brightGhost:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.20);
}
.projectPage{max-width:1120px;margin:0 auto;padding-top:32px}
.projectHero{padding:clamp(24px,4vw,42px);margin-bottom:18px}
.flagshipHero{
  border-color:rgba(125,223,255,.30);
  background:
    radial-gradient(700px 360px at 8% 0%, rgba(125,223,255,.16), transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.032));
}
.projectHero h1{margin:0;font-size:clamp(42px,6vw,78px);line-height:.96;letter-spacing:-.055em}
.projectStory{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.storyCard{padding:26px}
.storyCard h2{margin:0 0 12px;font-size:clamp(25px,2.7vw,36px);line-height:1.08;letter-spacing:-.035em}
.storyCard p{font-size:17px;line-height:1.68;color:#d7e0f5;margin:0 0 15px}
.storyCard p:last-child{margin-bottom:0}
.featureList{display:grid;gap:12px}
.featureList div{padding-top:12px;border-top:1px solid var(--line)}
.featureList div:first-child{padding-top:0;border-top:0}
.featureList strong{display:block;margin-bottom:4px;color:#f1f6ff}
.featureList span{display:block;color:#c8d4ee;line-height:1.5}
@media (max-width:860px){.projectStory{grid-template-columns:1fr}.projectPage{padding-top:20px}}


/* v8: about page and link-only strength records */
.aboutPage,.strengthPage{max-width:1120px;margin:0 auto;padding-top:32px}
.aboutHero,.strengthHero{padding:clamp(24px,4vw,42px);margin-bottom:18px;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;align-items:center}
.aboutHero h1,.strengthHero h1{margin:0;font-size:clamp(40px,5.8vw,72px);line-height:.98;letter-spacing:-.055em}
.aboutMiniCard{border:1px solid rgba(125,223,255,.22);background:rgba(125,223,255,.07);border-radius:20px;padding:16px;display:flex;gap:14px;align-items:center}
.aboutMiniImg{width:96px;height:96px;border-radius:22px;object-fit:cover;border:1px solid var(--line)}
.aboutMiniCard strong{display:block;font-size:18px}
.aboutMiniCard span{display:block;color:var(--muted);line-height:1.4;margin-top:5px}
.aboutStoryGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wideStory{grid-column:1 / -1}
.publicProjectList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.publicProjectList a{display:block;text-decoration:none;border:1px solid var(--line);border-radius:18px;padding:16px;background:rgba(255,255,255,.04)}
.publicProjectList a:hover{background:rgba(255,255,255,.075);border-color:rgba(125,223,255,.24)}
.publicProjectList strong{display:block;font-size:18px;margin-bottom:6px}
.publicProjectList span{display:block;color:var(--muted);line-height:1.45}
.strengthHero code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:1px 6px;color:#eaf6ff;font-size:.92em}
.strengthControls{padding:18px 20px;display:flex;gap:14px;align-items:center;margin-bottom:16px}
.strengthControls label{text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--muted);font-weight:800}
.strengthControls select{min-width:220px;border-radius:14px;border:1px solid rgba(125,223,255,.28);background:#101a2b;color:var(--text);padding:11px 14px;font:inherit}
.strengthLayout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.75fr);gap:16px}
.strengthTableCard,.strengthSummary{padding:24px}
.tableHead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
.tableHead h2,.strengthSummary h2{margin:0;font-size:clamp(26px,3vw,38px);line-height:1.1;letter-spacing:-.035em}
.tableWrap{overflow:auto;border-radius:18px;border:1px solid var(--line)}
.recordsTable{width:100%;border-collapse:collapse;min-width:560px;background:rgba(255,255,255,.025)}
.recordsTable th,.recordsTable td{text-align:left;padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.recordsTable th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:rgba(255,255,255,.04)}
.recordsTable tr:last-child td{border-bottom:0}
.recordsTable td:last-child{font-size:18px;color:#eaf6ff}
.strengthSummary ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.strengthSummary li{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:10px;line-height:1.35}
.strengthSummary li:first-child{border-top:0;padding-top:0}
.strengthSummary li span{color:var(--muted)}
.smallNote{font-size:14px;line-height:1.55;margin:18px 0 0}
@media (max-width:900px){
  .aboutHero,.strengthHero,.aboutStoryGrid,.strengthLayout{grid-template-columns:1fr}
  .publicProjectList{grid-template-columns:1fr}
}
@media (max-width:560px){
  .aboutHero,.strengthHero,.strengthTableCard,.strengthSummary{padding:20px}
  .aboutMiniCard,.strengthControls{align-items:stretch;flex-direction:column}
  .strengthControls select{min-width:0;width:100%}
}

/* v9: cleaner strength records header and matrix table */
.strengthHeroCompact{grid-template-columns:minmax(0,1fr) minmax(220px,320px);padding:clamp(22px,3vw,34px)}
.strengthHeroCompact h1{font-size:clamp(36px,5vw,58px)}
.strengthHeroCompact .lead{max-width:720px}
.strengthHeroNote{border:1px solid rgba(125,223,255,.22);background:rgba(125,223,255,.06);border-radius:18px;padding:16px;line-height:1.45}
.strengthHeroNote strong{display:block;margin-bottom:6px;color:#eaf6ff}
.strengthHeroNote span{display:block;color:var(--muted);font-size:14px}
.strengthHeroNote code{font-size:.88em}
.recordsMatrix{min-width:920px}
.recordsMatrix th,.recordsMatrix td{text-align:center;vertical-align:middle}
.recordsMatrix th:first-child,.recordsMatrix td:first-child{text-align:left;position:sticky;left:0;background:#121d2d;z-index:1}
.recordsMatrix th:first-child{background:#172235;z-index:2}
.recordsMatrix td{font-size:17px;color:#eaf6ff}
.recordsMatrix td.personCell{font-size:18px;color:var(--text)}
.recordsMatrix .emptyRecord{color:rgba(190,204,226,.45);font-weight:600}
@media (max-width:900px){
  .strengthHeroCompact{grid-template-columns:1fr}
}

/* v10: simplified strength records page */
.strengthPageSimple{padding-top:26px}
.strengthOnlyCard{padding:clamp(20px,3vw,30px)}
.strengthPlainHead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:18px}
.strengthPlainHead h1{margin:0;font-size:clamp(30px,4vw,48px);letter-spacing:-.045em;line-height:1}
.strengthSelectWrap{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.strengthSelectWrap select{min-width:180px;border-radius:14px;border:1px solid rgba(125,223,255,.28);background:#101a2b;color:var(--text);padding:11px 14px;font:inherit;text-transform:none;letter-spacing:0;font-weight:500}
.recordsMatrix{min-width:920px}
.recordsMatrix th,.recordsMatrix td{text-align:center;vertical-align:middle}
.recordsMatrix th:first-child,.recordsMatrix td:first-child{text-align:left;position:sticky;left:0;background:#121d2d;z-index:1}
.recordsMatrix th:first-child{background:#172235;z-index:2}
.recordsMatrix td{font-size:17px;color:#eaf6ff}
.recordsMatrix td.personCell{font-size:18px;color:var(--text)}
.recordsMatrix .emptyRecord{color:rgba(190,204,226,.45);font-weight:600}
@media (max-width:700px){
  .strengthPlainHead{align-items:stretch;flex-direction:column}
  .strengthSelectWrap{align-items:stretch;flex-direction:column;gap:8px}
  .strengthSelectWrap select{width:100%;min-width:0}
}

/* v11: dynamic strength records values */
.recordsMatrix .recordValue{display:block;font-size:18px;line-height:1.15;color:#eaf6ff}
.recordsMatrix .recordDate{display:block;margin-top:5px;font-size:12px;line-height:1;color:var(--muted);font-weight:700}
.recordsStatus{text-align:center!important;color:var(--muted)!important;padding:28px 16px!important}



/* v8: blog hub + post thumbnails */
.blogHubIntro{padding-top:34px}
.blogHubIntro h1{font-size:clamp(40px,5vw,64px);line-height:.98;letter-spacing:-.055em;margin:0 0 14px}
.postCard.hasThumb{padding-top:0}
.postThumb{display:block;width:calc(100% + 48px);max-width:none;margin:-24px -24px 6px;height:220px;object-fit:cover;border-bottom:1px solid rgba(255,255,255,.10);filter:saturate(.94) contrast(1.03)}
.postCard.hasThumb::before{display:none}
@media (max-width:700px){.postThumb{width:calc(100% + 36px);margin:-18px -18px 4px;height:180px}}

/* v10: compact home blog link */
.homeBlogLink{margin-top:42px;padding:24px;border:1px solid rgba(255,255,255,.11);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))}
.homeBlogLink h2{margin:0 0 10px;font-size:clamp(28px,3vw,42px);letter-spacing:-.04em}
.homeBlogLink .actions{margin-top:18px}

/* v11: second attendance article and blog post stack */
.codeBlock{display:block;margin:18px 0 22px;padding:16px 18px;border-radius:16px;background:rgba(7,13,24,.72);border:1px solid rgba(255,255,255,.13);overflow:auto;color:#eaf6ff;font-size:14px;line-height:1.55;box-shadow:var(--shadow)}
.codeBlock code{background:transparent!important;border:0!important;padding:0!important;color:inherit!important;font-size:inherit!important;white-space:pre-wrap}
.postsStack{display:grid;gap:16px;min-width:0}

/* v12: series navigation on blog hub */
.seriesNavGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:22px 0 34px}
.seriesNavCard{padding:22px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.028))}
.seriesNavCard h3{margin:0;font-size:clamp(24px,2.4vw,34px);line-height:1.12;letter-spacing:-.035em}
.seriesNavCard p{margin:0;color:#c9d5ee;line-height:1.55;font-size:16px}
.seriesNavList{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.seriesNavList li a{display:grid;gap:3px;padding:12px 14px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.035);color:#eaf1ff;text-decoration:none;transition:border-color .15s ease,transform .15s ease,background .15s ease}
.seriesNavList li a:hover{border-color:rgba(125,223,255,.42);background:rgba(125,223,255,.08);transform:translateY(-1px)}
.seriesNavList li span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:850}
@media (max-width:800px){.seriesNavGrid{grid-template-columns:1fr}}


/* v13: cleaner blog series navigation */
.blogSeriesIntro{margin-top:28px;padding:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.45fr);gap:20px;align-items:end;background:linear-gradient(135deg,rgba(125,223,255,.09),rgba(255,255,255,.035));border-color:rgba(125,223,255,.18)}
.blogSeriesIntro h2{margin:0 0 10px;font-size:clamp(30px,4vw,48px);line-height:1;letter-spacing:-.045em}
.blogSeriesIntro p{margin:0;max-width:940px;line-height:1.6;font-size:17px}
.publishRhythm{display:grid;gap:10px}
.publishRhythm span{display:block;padding:12px 14px;border:1px solid rgba(125,223,255,.20);border-radius:16px;background:rgba(8,16,30,.38);color:var(--muted);line-height:1.35}
.publishRhythm strong{display:block;color:#eaf6ff;margin-bottom:2px}
.seriesNavGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0 34px}
.seriesNavCard{padding:22px;display:grid;gap:16px;align-content:start;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border-color:rgba(255,255,255,.12)}
.seriesNavHead h3{margin:0 0 8px;font-size:clamp(24px,2.5vw,34px);letter-spacing:-.035em;line-height:1.08}
.seriesNavHead p{margin:0;color:#c9d5ee;line-height:1.55;font-size:16px}
.seriesNavList{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:series}
.seriesNavList li{counter-increment:series}
.seriesNavList a{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;padding:12px 14px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(8,16,30,.34);text-decoration:none;color:#eaf2ff;line-height:1.35}
.seriesNavList a:hover{border-color:rgba(125,223,255,.32);background:rgba(125,223,255,.07)}
.seriesNavList a span{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#bcd0f5;font-weight:800;white-space:nowrap}
.seriesFooter{margin-top:30px;padding:24px;background:linear-gradient(180deg,rgba(125,223,255,.075),rgba(255,255,255,.025));border-color:rgba(125,223,255,.16)}
.seriesFooter h2{margin:0 0 14px;font-size:clamp(24px,2.8vw,34px);letter-spacing:-.035em;line-height:1.1}
.seriesFooterList{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px;counter-reset:articleSeries}
.seriesFooterList li{display:block;line-height:1.4;color:#eaf2ff}
.seriesFooterList a,.seriesFooterList .current,.seriesFooterList .planned{display:block;padding:12px 14px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(8,16,30,.32);line-height:1.4;color:#eaf2ff;text-decoration:none}
.seriesFooterList a:hover{border-color:rgba(125,223,255,.32);background:rgba(125,223,255,.07)}
.seriesFooterList span{display:block;margin-bottom:3px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#bcd0f5;font-weight:800}
.seriesFooterList .current{border-color:rgba(125,223,255,.26);background:rgba(125,223,255,.08)}
.seriesFooterList .planned{color:#aebbd4;border-style:dashed}
.textLink{color:#cfeeff;text-underline-offset:4px;font-weight:700}
@media (max-width:780px){.blogSeriesIntro,.seriesNavGrid{grid-template-columns:1fr}.blogSeriesIntro{align-items:start}.seriesNavList a{grid-template-columns:1fr}.seriesNavList a span{white-space:normal}}


/* v14: architecture diagram in strength records article */
.architectureFlow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:stretch;margin:22px 0 26px}
.flowStep{border:1px solid rgba(125,223,255,.20);border-radius:18px;background:linear-gradient(180deg,rgba(125,223,255,.08),rgba(255,255,255,.03));padding:16px;min-height:132px;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--shadow)}
.flowStep strong{display:block;color:#eaf6ff;font-size:18px;line-height:1.15;margin-bottom:8px;letter-spacing:-.02em}
.flowStep span{display:block;color:var(--muted);font-size:14px;line-height:1.45}
.flowArrow{display:flex;align-items:center;justify-content:center;color:#9edcff;font-size:26px;font-weight:900;margin:0 -6px}
@media (max-width:1100px){.architectureFlow{grid-template-columns:1fr}.flowArrow{transform:rotate(90deg);min-height:18px}.flowStep{min-height:auto}}

/* v16: article code blocks */
.articleContent pre{overflow:auto;padding:16px 18px;border:1px solid rgba(125,223,255,.18);border-radius:16px;background:rgba(8,16,30,.58);color:#eaf6ff;line-height:1.55;font-size:14px}
.articleContent pre code{background:transparent;border:0;padding:0;color:inherit;font-size:inherit}

/* v17: refreshed about page */
.aboutPage{padding-top:28px}
.aboutHero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:22px;align-items:stretch;padding:28px;margin-bottom:22px}
.aboutHeroCopy h1{font-size:clamp(44px,5vw,72px);line-height:.95;letter-spacing:-.06em;margin:0 0 16px}
.aboutHeroCopy p{font-size:18px;line-height:1.6;color:#c9d5ee;margin:0 0 14px}
.aboutProfile{padding:22px;background:linear-gradient(180deg,rgba(125,223,255,.10),rgba(255,255,255,.035));border-color:rgba(125,223,255,.22)}
.profileTop{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.profileTop img{width:76px;height:76px;border-radius:20px;object-fit:cover;border:1px solid rgba(255,255,255,.16)}
.profileTop strong{display:block;font-size:22px;line-height:1.1}
.profileTop span{display:block;margin-top:4px;color:var(--muted)}
.profileFacts{display:grid;gap:0;margin:0 0 18px}
.profileFacts div{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.10)}
.profileFacts dt{text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--muted);font-weight:800}
.profileFacts dd{margin:0;color:#eaf2ff;line-height:1.35}
.aboutStoryGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:28px}
.aboutStoryCard{padding:24px}
.aboutStoryCard h2{font-size:clamp(25px,2.7vw,38px);line-height:1.08;letter-spacing:-.04em;margin:0 0 14px}
.aboutStoryCard p{font-size:17px;line-height:1.62;color:#c9d5ee;margin:0 0 13px}
.aboutStoryCard p:last-child{margin-bottom:0}
.aboutStoryCard.wideStory{grid-column:1 / -1}
.aboutStoryCard .actions{margin-top:18px}
@media (max-width:900px){.aboutHero,.aboutStoryGrid{grid-template-columns:1fr}.profileFacts div{grid-template-columns:1fr}}

/* v18: records project page */
.recordsProjectPage{padding-top:28px}
.recordsHero{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:24px;align-items:center;padding:28px}
.recordsHero h1{font-size:clamp(44px,5vw,72px);line-height:.95;letter-spacing:-.06em;margin:0 0 16px}
.projectHeroImage{margin:0;border:1px solid rgba(255,255,255,.12);border-radius:22px;overflow:hidden;background:rgba(8,16,30,.35)}
.projectHeroImage img{display:block;width:100%;height:100%;object-fit:cover}
.projectStoryGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:22px 0}
.projectStoryCard{padding:24px}
.projectStoryCard h2,.projectCta h2{font-size:clamp(25px,2.8vw,40px);line-height:1.08;letter-spacing:-.04em;margin:0 0 14px}
.projectStoryCard p,.projectCta p{font-size:17px;line-height:1.62;color:#c9d5ee;margin:0 0 13px}
.projectStoryCard p:last-child,.projectCta p:last-child{margin-bottom:0}
.projectStoryCard.wideStory{grid-column:1 / -1}
.projectFlow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:center;margin:18px 0 20px}
.projectFlow span{display:flex;align-items:center;justify-content:center;min-height:82px;text-align:center;padding:12px;border:1px solid rgba(125,223,255,.20);border-radius:16px;background:rgba(125,223,255,.07);color:#eaf6ff;font-weight:800;line-height:1.25}
.projectFlow b{display:flex;align-items:center;justify-content:center;color:#9edcff;font-size:22px}
.projectFigure{margin:0}
.projectFigure img{max-height:420px;object-fit:cover;object-position:top}
.projectTechList{margin:10px 0 0;padding-left:20px;color:#c9d5ee;line-height:1.8;font-size:17px}
.projectCta{padding:28px;margin:22px 0 28px}
@media (max-width:1000px){.recordsHero,.projectStoryGrid{grid-template-columns:1fr}.projectFlow{grid-template-columns:1fr}.projectFlow b{transform:rotate(90deg);min-height:16px}.projectFigure img{max-height:none}}

/* v19: Swimtopia project page */
.swimtopiaPage{padding-top:28px}
.swimtopiaHero{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.95fr);gap:24px;align-items:center;padding:28px}
.swimtopiaHero h1{font-size:clamp(48px,5.4vw,78px);line-height:.92;letter-spacing:-.06em;margin:0 0 16px}
.swimtopiaHero p:not(.eyebrow){font-size:18px;line-height:1.6;color:#c9d5ee}
.swimtopiaHero .projectHeroImage img{max-height:420px;object-position:top}
.swimFeatureList{grid-template-columns:repeat(2,minmax(0,1fr))}
.projectFigure.wideFigure{grid-column:1 / -1}
.projectFigure.wideFigure img{max-height:620px}
@media (max-width:1000px){.swimtopiaHero{grid-template-columns:1fr}.swimFeatureList{grid-template-columns:1fr}}

/* v20: FormKit project page */
.formkitProjectPage{padding-top:28px}
.formkitHero{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.95fr);gap:24px;align-items:center;padding:28px}
.formkitHero h1{font-size:clamp(44px,5vw,72px);line-height:.95;letter-spacing:-.06em;margin:0 0 16px}
.formkitHero p:not(.eyebrow){font-size:18px;line-height:1.6;color:#c9d5ee}
.formkitHero .projectHeroImage img{max-height:430px;object-position:top}
.formkitFlow{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1000px){.formkitHero{grid-template-columns:1fr}.formkitFlow{grid-template-columns:1fr}}