/* Inner-page design ported from the psi refsite system, hue-rotated
   purple -> ktf teal. Generated by _build_inner.py. Class-scoped;
   loaded on inner pages only (see inc/enqueue.php). */


/* --- design tokens (recolored) --- */
:root{--ink:#102223;--forest:#0a2e31;--forest-deep:#051d20;--pine:#16484c;--green:#499ea1;--green-light:#9ad1d2;--mint:#dcebeb;--ivory:#f5f3ec;--paper:#fbfaf6;--white:#ffffff;--muted:#6d6673;--line:#10222324}

/* --- shared components (signalCta, ctaArrow, xGrid, .shell) --- */
.shell{width:min(1240px,100% - 64px);margin-inline:auto}
.sectionLabel{color:#417b7d;letter-spacing:.22em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:700;line-height:1.4;display:inline-block}
.sectionLabelLight{color:var(--green-light)}
.navigationDrawerLinks a>.ctaArrow{--signal-ink:#dbf7f8;width:31px;height:31px;color:var(--signal-ink)}
.navigationDrawerFooter>a .ctaArrow{width:31px;height:31px;margin-right:-7px}
.intro>.shell{z-index:1;position:relative}
.intro .sectionLabel{text-align:center;width:100%}
@keyframes reclaimCloudTraverse{0%{background-position:calc(var(--cloud-span) * -1) var(--cloud-y)}to{background-position:0 var(--cloud-y)}}
@keyframes reclaimCloudLift{0%{transform:translateY(-1%)}to{transform:translateY(1.6%)}}
.treatments>.shell{z-index:1;position:relative}
.floridaContent .sectionLabel{margin-top:90px}
.contact{color:var(--white);background:radial-gradient(circle at 88% 36%, #beecec45, transparent 26%), linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg, #ffffff0d 1px, transparent 1px), var(--green);background-size:auto,48px 48px,48px 48px,auto;padding-block:42px;position:relative;overflow:hidden}
.contact:before{content:"";border:1px solid #ffffff38;border-radius:50%;width:440px;height:440px;position:absolute;top:50%;right:-188px;transform:translateY(-50%);box-shadow:0 0 0 46px #ffffff0e,0 0 0 92px #ffffff08}
.contactInner{z-index:1;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(122deg,#ffffff24,#042d3114 56%),#0f646952;border:1px solid #ffffff3b;border-radius:22px;grid-template-columns:minmax(0,1fr) minmax(280px,.42fr);align-items:center;gap:76px;padding:66px 64px;display:grid;position:relative;overflow:hidden;box-shadow:0 30px 80px #032b2e29}
.contactInner:before{content:"";border:1px solid #ffffff30;border-radius:50%;width:160px;height:160px;position:absolute;top:-98px;left:42%;box-shadow:0 0 0 31px #ffffff09}
.contactCopy{z-index:1;position:relative}
.contact h2{letter-spacing:-.055em;max-width:850px;margin:18px 0 13px;font-size:clamp(46px,5.4vw,78px);font-weight:300;line-height:1}
.contact p{color:#ffffffc2;max-width:620px;margin:0;font-size:14px;line-height:1.7}
.contactMicro{flex-wrap:wrap;gap:11px 22px;margin-top:28px;display:flex}
.contactMicro span{color:#ffffffb8;letter-spacing:.12em;text-transform:uppercase;align-items:center;gap:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8px;font-weight:700;display:inline-flex}
.contactMicro i{background:var(--green-light);border-radius:50%;width:5px;height:5px;box-shadow:0 0 0 4px #9ad1d21f}
.contactAction{z-index:1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#042b2e33;border:1px solid #ffffff3d;border-radius:16px;flex-direction:column;gap:17px;padding:24px;display:flex;position:relative}
.contactAction:after{content:"";border-top:1px solid #ffffff70;border-right:1px solid #ffffff70;width:22px;height:22px;position:absolute;top:11px;right:11px}
.contactAction>span{color:#ffffffa3;letter-spacing:.14em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8px;font-weight:700}
.contactAction>a{min-height:62px;color:var(--forest-deep);background:var(--white);border-radius:10px;justify-content:space-between;align-items:center;gap:22px;padding-inline:24px;font-size:14px;font-weight:650;transition:transform .18s,background .18s;display:inline-flex}
.contactAction>a:hover{background:var(--mint);transform:translateY(-2px)}
.footerUtility nav>span,.footerContact>span{color:var(--green-light);letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8px;font-weight:700;display:block}
.footerContact{text-align:right}
.footerContact a:first-of-type{letter-spacing:-.035em;font-size:27px;font-weight:320;display:block}
.footerContact a:last-of-type{color:#ffffff8c;margin-top:9px;font-size:12px;display:block}
.footerContact a:first-of-type{color:#c0e6e7}
@keyframes footerScanner{0%,16%{opacity:0;top:-100px}28%{opacity:.26}72%{opacity:.14}84%,to{opacity:0;top:100%}}
@keyframes footerRailSignal{0%,to{opacity:.25;left:-4%}50%{opacity:.85;left:86%}}
a.signalCta{--cta-color:var(--forest-deep);--cta-bg:linear-gradient(135deg, #b6e5e5 0%, #8fced0 56%, #76babc 100%);--cta-border:#ffffff80;--cta-shadow:0 14px 32px #01191b2e, 0 4px 10px #01191b1f;--signal-bg:linear-gradient(145deg, #19575c 0%, #0c3a3e 52%, #052326 100%);--signal-ink:#dbf7f8;--signal-border:#d7f7f847;--signal-glow:#7ad3d547;isolation:isolate;min-height:58px;color:var(--cta-color);border:1px solid var(--cta-border);background:var(--cta-bg);box-shadow:var(--cta-shadow), inset 0 1px 0 #ffffff6b, inset 0 -1px 0 #0326291a;letter-spacing:-.012em;border-radius:15px;justify-content:space-between;align-items:center;gap:20px;padding:7px 8px 7px 22px;font-size:13px;font-weight:680;line-height:1;transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s,border-color .24s;display:inline-flex;position:relative;overflow:hidden;transform:translateZ(0)}
a.signalCta:before{content:"";z-index:0;opacity:.72;pointer-events:none;background:linear-gradient(90deg,#00000000,#ffffff61,#00000000);width:34%;transition:left .58s cubic-bezier(.2,.75,.2,1);position:absolute;top:-60%;bottom:-60%;left:-48%;transform:skew(-19deg)}
.ctaArrow{z-index:1;width:40px;height:40px;color:var(--signal-ink,#dbf7f8);border:1px solid var(--signal-border,#d7f7f847);background:var(--signal-bg,linear-gradient(145deg, #19575c, #052326));border-radius:50%;flex:none;place-items:center;transition:transform .24s cubic-bezier(.2,.8,.2,1),background .24s,box-shadow .24s,border-color .24s;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff33,inset 0 -8px 18px #000f1029,0 7px 17px #0321242e,0 0 0 3px #7ecccd12}
.ctaArrow svg{filter:drop-shadow(0 1px 3px #95e7e92e);width:27px;height:27px;transition:transform .24s cubic-bezier(.2,.8,.2,1);overflow:visible}
.ctaSignalRing,.ctaSignalBeam,.ctaSignalHead{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.ctaSignalRing{opacity:.34;stroke-width:.9px;stroke-dasharray:4.5 3.3;transform-origin:16px 16px;animation:9s linear infinite ctaSignalOrbit}
.ctaSignalBeam{opacity:.9;stroke-width:1.7px}
.ctaSignalHead{stroke-width:1.9px}
.ctaSignalDot{fill:currentColor;filter:drop-shadow(0 0 3px var(--signal-glow,#7ad3d547));transform-origin:8.5px 16px;animation:3.2s ease-in-out infinite ctaSignalPulse}
.ctaArrowCompact svg{width:21px;height:21px}
a.signalCtaGlass{--cta-color:var(--white);--cta-bg:linear-gradient(135deg, #dcf4f533, #175d6254);--cta-border:#d9f1f257;--cta-shadow:0 18px 42px #000e0f3d, 0 4px 12px #000e0f2e;--signal-border:#e0f8f857;-webkit-backdrop-filter:blur(18px)saturate(1.15);backdrop-filter:blur(18px)saturate(1.15)}
a.signalCtaMint{--cta-bg:linear-gradient(135deg, #bfe9e9 0%, #9ad4d4 48%, #7dc2c4 100%);--cta-border:#efffff9e;--cta-shadow:0 16px 36px #001d1f38, 0 4px 12px #001d1f21}
a.signalCtaWhite{--cta-bg:linear-gradient(135deg, #ffffff 0%, #eef7f7 54%, #dceeee 100%);--cta-border:#ffffffc7;--cta-shadow:0 17px 36px #00292c29, 0 4px 12px #00292c1a}
a.signalCtaInk{--cta-color:var(--white);--cta-bg:linear-gradient(135deg, #1a494c 0%, #0b2d30 56%, #061d20 100%);--cta-border:#4a959857;--cta-shadow:0 15px 32px #051e2033, 0 4px 10px #051e201f;--signal-bg:linear-gradient(145deg, #d6f4f4 0%, #9cd9d9 58%, #74bdbf 100%);--signal-ink:#093134;--signal-border:#e6fcfd80;--signal-glow:#c3f3f35c}
a.signalCta:active{transform:translateY(-1px)scale(.985)}
.treatmentBody a.signalTextLink{--signal-bg:linear-gradient(145deg, #205d61 0%, #0e3c40 55%, #07292c 100%);--signal-ink:#dcf7f8;--signal-border:#1d5a5f33;color:#2b6e72;background:linear-gradient(135deg,#dcefefa6,#ffffffcc);border:1px solid #3b7e8029;border-radius:12px;align-items:center;gap:14px;min-height:40px;margin-top:auto;padding:5px 5px 5px 14px;transition:transform .22s,border-color .22s,box-shadow .22s;display:inline-flex;box-shadow:0 8px 19px #0d36390e,inset 0 1px #ffffffbd}
.treatmentBody a.signalTextLink .ctaArrow{border-radius:50%;width:29px;height:29px}
.treatmentBody a.signalTextLink .ctaArrow svg{width:20px;height:20px}
.heroBottom a.signalCta{border-bottom:1px solid var(--cta-border);min-width:318px;padding:7px 8px 7px 21px;font-size:13px}
.floridaContent a.primaryButton.signalCta{background:var(--cta-bg);border-radius:15px;gap:22px;min-width:226px;padding:7px 8px 7px 21px}
.faqIntro>a.signalCta{width:206px;color:var(--cta-color);border:1px solid var(--cta-border);background:var(--cta-bg);border-radius:15px;gap:16px;margin-top:32px;padding:7px 8px 7px 20px}
.contactAction>a.signalCta{width:100%;min-height:66px;color:var(--cta-color);border:1px solid var(--cta-border);background:var(--cta-bg);box-shadow:var(--cta-shadow), inset 0 1px 0 #ffffff9e, inset 0 -1px 0 #03262914;border-radius:16px;padding:8px 8px 8px 23px}
.footerPanelBottom>a.signalCta{width:100%;min-height:58px;color:var(--cta-color);border:1px solid var(--cta-border);background:var(--cta-bg);border-radius:14px;gap:13px;padding:7px 7px 7px 19px;font-size:11px;box-shadow:0 15px 34px #000f1040,0 3px 9px #000f1029,inset 0 1px #ffffff8c}
.footerPanelBottom>a.signalCta .ctaArrow{color:var(--signal-ink)}
@media (hover:hover){
a.signalCta:hover{border-color:#f1ffffad;transform:translateY(-3px);box-shadow:0 20px 42px #01191b3d,0 7px 15px #01191b21,inset 0 1px #ffffff94,inset 0 -1px #03262914}
a.signalCta:hover:before{left:118%}
a.signalCta:hover .ctaArrow{background:linear-gradient(145deg,#21666b 0%,#0f4246 52%,#072b2e 100%);border-color:#dffafb85;transform:translate(2px)scale(1.045);box-shadow:inset 0 1px #ffffff40,0 10px 22px #0321243d,0 0 0 4px #7ecccd1a}
a.signalCtaInk:hover .ctaArrow{background:linear-gradient(145deg,#e1f9f9 0%,#a8e1e1 58%,#7ec7c9 100%)}
a.signalCta:hover .ctaArrow svg,.signalTextLink:hover .ctaArrow svg,.navigationDrawerLinks a:hover .ctaArrow svg,.navigationDrawerFooter>a:hover .ctaArrow svg{transform:translate(2px)}
.treatmentBody a.signalTextLink:hover{border-color:#3b7e8047;transform:translateY(-2px);box-shadow:0 11px 24px #0d363917,inset 0 1px #ffffffd1}
.treatmentBody a.signalTextLink:hover .ctaArrow{background:linear-gradient(145deg,#297176 0%,#14494d 55%,#0a3033 100%);transform:translate(2px)scale(1.045)}
}
@keyframes ctaSignalOrbit{to{transform:rotate(360deg)}}
@keyframes ctaSignalPulse{0%,72%,to{opacity:.72;transform:scale(.78)}80%{opacity:1;transform:scale(1.35)}}
@keyframes neuroSweep{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}
@keyframes neuroOrbit{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}
@keyframes neuralPulse{0%,to{opacity:.52;transform:scale(.82)}48%{opacity:1;transform:scale(1.32)}}
@keyframes neuralSignal{to{stroke-dashoffset:-32px}}
@keyframes statusBlink{0%,to{opacity:.42}50%{opacity:1}}
@keyframes brainBreathe{0%,to{transform:translateZ(16px)scale(1)}50%{transform:translateZ(20px)scale(1.008)}}
@keyframes brainAuraBreath{0%,to{opacity:.6;transform:translate(-50%,-50%)translateZ(-12px)scale(.93)}50%{opacity:1;transform:translate(-50%,-50%)translateZ(-12px)scale(1.06)}}
@keyframes signalFlicker{0%,to{opacity:.48}45%{opacity:1}}
@keyframes hotspotRipple{0%{opacity:0;transform:scale(.35)}22%{opacity:.72}to{opacity:0;transform:scale(1.9)}}
@keyframes brainBurstAura{0%{opacity:.7;transform:translate(-50%,-50%)translateZ(-12px)scale(.88)}32%{opacity:1;transform:translate(-50%,-50%)translateZ(-12px)scale(1.28)}to{opacity:.66;transform:translate(-50%,-50%)translateZ(-12px)scale(.98)}}
@keyframes techFloatPrimary{0%,to{transform:translate(0)rotate(-.5deg)}50%{transform:translate(-2px,-6px)rotate(1.5deg)}}
@keyframes techFloatSecondary{0%,to{transform:translate(0)}50%{transform:translate(2px,-5px)}}
@keyframes techRingBreath{0%,to{opacity:.72;transform:scale(.96)}50%{opacity:1;transform:scale(1.05)}}
@keyframes techCorePulse{0%,to{opacity:.82;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@keyframes techDotTwinkle{0%,to{opacity:.58;transform:scale(.78)}50%{opacity:1;transform:scale(1.12)}}
@keyframes techDotGlow{0%,to{transform:scale(.88);box-shadow:0 0 14px #9ad1d285}50%{transform:scale(1.08);box-shadow:0 0 25px #9ad1d2e0}}
@keyframes techOrbitTurn{0%{transform:translate(0)rotate(0)}50%{transform:translateY(-4px)rotate(180deg)}to{transform:translate(0)rotate(360deg)}}
@keyframes techEdgePulse{0%,to{opacity:.76;transform:scale(.96)}50%{opacity:1;transform:scale(1.045)}}
@media (width<=1080px){
.shell{width:min(940px,100% - 48px)}
}
@media (width<=820px){
.contactInner{grid-template-columns:1fr;gap:38px;padding:54px 48px}
.contactAction{width:min(100%,440px)}
.footerContact{text-align:left}
}
@media (width<=620px){
.shell{width:calc(100% - 32px)}
.heroBottom a.signalCta{width:min(100%,340px);min-width:0;min-height:54px;padding:6px 7px 6px 17px;font-size:12px}
.floridaContent .sectionLabel{margin-top:60px}
.contact{padding-block:28px}
.contactInner{border-radius:17px;padding:42px 25px 25px}
.contact h2{font-size:50px}
.contactMicro{gap:11px 16px}
.contactAction{padding:18px}
.footerPanelBottom>a.signalCta{min-height:56px;padding:6px 6px 6px 15px}
.footerPanelBottom>a.signalCta .ctaArrow{width:37px;height:37px}
}

.contact h2     { font-size: clamp(32px, 3.6vw, 52px); }


/* Consultation form: the reference `.contact p{color:#ffffff}
` was turning the
   card's paragraphs white-on-white. Out-specify it. */
.xLeadCard .xLeadSub   { color: #6d6673; }

.xLeadCard .xLeadFine  { color: #7e7a85; }

.xLeadCard .xLeadTitle { color: #102223; }

.xLeadCard .xLeadField > span { color: #384747; }


.xGrid {
  display: grid;
  gap: clamp(16px, 2.2vw, 26px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(28px, 4vw, 48px);
}
@media (max-width: 900px){
 .xGrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
 .xGrid { grid-template-columns: 1fr; }
}


.xCard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(16,34,35,0.10);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 45px -30px rgba(5,29,32,0.5);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
}

.xCard:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -28px rgba(5,29,32,0.55); }


.xMedia {
  aspect-ratio: 4 / 5;
  background: #dcebeb center / cover no-repeat;
}

.xMedia.xMediaWide { aspect-ratio: 16 / 10; }


.xBody { padding: clamp(18px, 2vw, 24px); display: flex; flex-direction: column; gap: 7px; flex: 1; }

.xEyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #49888a; font-weight: 700;
}

.xName { font-size: clamp(19px, 2.2vw, 23px); letter-spacing: -0.02em; color: #102223; font-weight: 500; }

.xRole { color: #2b7579; font-weight: 600; font-size: 14px; }

.xMeta { color: #6d6673; font-size: 13px; }

.xReadmore { margin-top: auto; color: #2b7579; font-weight: 600; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }


/* Consultation form ------------------------------------------------------- */
.xLeadPhone { margin-top: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.xLeadPhone > span { font-size: 13px; color: rgba(245,243,236,0.7); }


.xLeadCard {
  background: #fbfaf6;
  border: 1px solid rgba(16,34,35,0.10);
  border-radius: 24px;
  padding: clamp(24px, 3vw, 38px);
  box-shadow: 0 30px 70px -30px rgba(3,20,21,0.6);
  color: #102223;
}

.xLeadKicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #49888a; font-weight: 700;
}

.xLeadTitle { font-size: clamp(24px, 3vw, 31px); letter-spacing: -0.03em; font-weight: 450; margin: 10px 0 6px; color: #102223; }

.xLeadSub { color: #6d6673; font-size: 14px; line-height: 1.6; margin: 0 0 20px; }


.xLeadGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.xLeadField { display: flex; flex-direction: column; gap: 6px; }

.xLeadField--full { grid-column: 1 / -1; }

.xLeadField > span { font-size: 12px; font-weight: 600; color: #384747; letter-spacing: 0.01em; }

.xLeadField > span b { color: #b4472e; font-weight: 700; }

.xLeadField input, .xLeadField select, .xLeadField textarea {
  font: inherit; font-size: 15px; color: #102223;
  background: #ffffff; border: 1px solid #d5dddd; border-radius: 12px;
  padding: 12px 14px; width: 100%; transition: border-color 0.15s, box-shadow 0.15s;
}

.xLeadField textarea { resize: vertical; min-height: 84px; }

.xLeadField input:focus, .xLeadField select:focus, .xLeadField textarea:focus {
  outline: none; border-color: #499ea1; box-shadow: 0 0 0 3px rgba(73,158,161,0.18);
}

.xHp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


.xLeadSubmit {
  margin-top: 18px; width: 100%; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(145deg, #205d61 0%, #0e3c40 55%, #07292c 100%);
  color: #eafeff; font: inherit; font-size: 15px; font-weight: 600;
  padding: 15px 22px; border-radius: 999px; letter-spacing: 0.01em;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  box-shadow: 0 16px 34px -16px rgba(7,41,44,0.8);
}

.xLeadSubmit:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -18px rgba(7,41,44,0.9); }

.xLeadSubmit[disabled] { opacity: 0.65; cursor: default; transform: none; }

.xLeadSpin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(234,254,255,0.35); border-top-color: #eafeff; animation: xspin 0.7s linear infinite; display: none; }

.xLeadSubmit.is-loading .xLeadSpin { display: inline-block; }

@keyframes xspin { to { transform: rotate(360deg); } }


.xLeadNote { margin: 14px 0 0; font-size: 14px; line-height: 1.5; padding: 12px 14px; border-radius: 12px; }

.xLeadNote.is-error { background: #fbeae6; color: #9a3418; border: 1px solid #f0c9bd; }

.xLeadNote.is-success { background: #e6f4f4; color: #1a696d; border: 1px solid #bee3e4; }

.xLeadFine { margin: 14px 0 0; font-size: 12px; color: #7e7a85; text-align: center; }
@media (max-width: 520px){
 .xLeadGrid { grid-template-columns: 1fr; }
}


/* Contact layout — wider form, tighter copy, single clean card (drop the
   reference's inner frame so it isn't a card-in-a-card). */
.contactInner {
  grid-template-columns: minmax(0, 1fr) minmax(440px, 0.92fr);
  gap: clamp(28px, 3vw, 52px);
  padding: clamp(32px, 4vw, 58px);
}

.contactAction {
  padding: 0; background: none; border: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

.contactAction::after { display: none; }

.xLeadCard { padding: clamp(28px, 2.6vw, 40px); }
@media (max-width: 900px){

  .contactInner { grid-template-columns: 1fr; }

  .xLeadCard { padding: 26px; }
}

.xFootContact { display: flex; flex-direction: column; gap: 3px; }

.xFootContact .xFootLabel { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(245,243,236,0.45); margin-top: 14px; }

.xFootContact .xFootLabel:first-of-type { margin-top: 0; }

.xFootContact a { color: rgba(245,243,236,0.9); font-size: 14px; }

.treatmentBody a.signalTextLink { margin-top: 22px; }


/* Footer resource rail — inset the bordered card from the screen on all sides
   when it stacks. NOTE: the global `.shell` mobile reset above (@600px) forces
   every shell full-width with `margin-inline: 0 !important`, which zeroed the
   card's side gaps. So this must be `!important` + higher specificity (two
   classes) to win, and we drop the shell's 20px inner padding since the card's
   own margin now sets the inset. */
@media (max-width: 820px) {
  .footerSignalRail.shell {
    width: auto !important;
    max-width: 100% !important;
    margin: 24px 26px 34px !important;
    padding-inline: 0 !important;
  }
}
@media (max-width: 430px){

  .footerSignalRail.shell { margin: 22px 20px 30px !important; }
}


@keyframes reclaimGlowBreath { from { opacity: .68; transform: scale(1); } to { opacity: 1; transform: scale(1.06); } }

@keyframes reclaimDust { from { background-position: 0 0; } to { background-position: 0 -440px; } }


@keyframes mycoBloomBreath { 0%, 100% { opacity: .88; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }

@keyframes mycoBloomBurst { 0% { opacity: 1; transform: scale(1); } 42% { opacity: 1; transform: scale(1.16); } 100% { opacity: .88; transform: scale(1); } }

@keyframes mycoNodeFlash { 0% { fill: #ffffff; } 100% { fill: #e8ffff; } }

.psiWorks .sectionLabel { color: var(--green-light); }
@keyframes floridaCloudDriftEast{0%{background-position:calc(var(--cloud-span) * -1) var(--cloud-y)}to{background-position:0 var(--cloud-y)}}
@keyframes floridaCloudDriftWest{0%{background-position:0 var(--cloud-y)}to{background-position:calc(var(--cloud-span) * -1) var(--cloud-y)}}
@keyframes floridaCloudFloat{0%{transform:translateY(-1.2%)scale(1.01)}to{transform:translateY(1.4%)scale(1.025)}}
.floridaContent .sectionLabel{margin-top:90px}
@keyframes testimonialProgress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes testimonialSignal{0%,to{opacity:.55;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}
@keyframes testimonialStatus{0%,to{opacity:.65}50%{opacity:1}}
@keyframes testimonialFieldPulse{0%,to{opacity:.7;transform:scale(.98)}50%{opacity:1;transform:scale(1.025)}}
@keyframes testimonialFieldDotOne{0%,to{opacity:.7;transform:translate(-15px,6px)scale(.82)}24%{opacity:1;transform:translate(8px,-5px)scale(1.08)}42%,66%{opacity:.92;transform:translate(17px,-10px)scale(.96)}84%{opacity:.78;transform:translate(-7px,3px)scale(.88)}}
@keyframes testimonialFieldDotTwo{0%,to{opacity:.62;transform:translate(-13px,-4px)scale(.78)}28%{opacity:1;transform:translate(12px,5px)scale(1.12)}46%,68%{opacity:.9;transform:translate(20px,10px)scale(.96)}86%{opacity:.74;transform:translate(-5px)scale(.86)}}
@keyframes testimonialFieldDotThree{0%,to{opacity:.66;transform:translate(-8px,15px)scale(.8)}22%{opacity:1;transform:translate(6px,-8px)scale(1.1)}42%,65%{opacity:.9;transform:translate(14px,-17px)scale(.96)}84%{opacity:.76;transform:translate(-3px,6px)scale(.88)}}
@keyframes featuredMarqueeScroll{to{transform:translate(-50%)}}
@keyframes featuredSignalRing{0%{opacity:.6;transform:scale(.65)}70%,to{opacity:0;transform:scale(1.35)}}
.floridaContent a.primaryButton.signalCta{background:var(--cta-bg);border-radius:15px;gap:22px;min-width:226px;padding:7px 8px 7px 21px}
.footerPanelBottom>a.signalCta{width:100%;min-height:58px;color:var(--cta-color);border:1px solid var(--cta-border);background:var(--cta-bg);border-radius:14px;gap:13px;padding:7px 7px 7px 19px;font-size:11px;box-shadow:0 15px 34px #000f1040,0 3px 9px #000f1029,inset 0 1px #ffffff8c}
.footerPanelBottom>a.signalCta .ctaArrow{color:var(--signal-ink)}
@keyframes neuroSweep{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}
@keyframes neuroOrbitBorder{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(-360deg)}}
@keyframes neuroOrbit{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}
@keyframes neuroScanPlane{0%,10%{opacity:0;transform:translateY(0)}20%{opacity:.72}78%{opacity:.4}90%,to{opacity:0;transform:translateY(168px)}}
@keyframes neuroWave{0%,to{opacity:.38;height:4px}35%{opacity:1;height:17px}70%{opacity:.62;height:8px}}
@keyframes neuralPulse{0%,to{opacity:.52;transform:scale(.82)}48%{opacity:1;transform:scale(1.32)}}
@keyframes neuralSignal{to{stroke-dashoffset:-32px}}
@keyframes neuralBranchSignal{to{stroke-dashoffset:-42px}}
@keyframes brainVolumeFlow{0%{opacity:.2;stroke-dashoffset:0}50%{opacity:.72}to{opacity:.2;stroke-dashoffset:-52px}}
@keyframes brainBreathe{0%,to{transform:translateZ(22px)scale(1)}50%{transform:translateZ(28px)scale(1.012)}}
@keyframes brainAuraBreath{0%,to{opacity:.6;transform:translate(-50%,-50%)translateZ(-12px)scale(.93)}50%{opacity:1;transform:translate(-50%,-50%)translateZ(-12px)scale(1.06)}}
@keyframes brainHaloPulse{0%,to{opacity:.35;transform:translate(-50%,-50%)translateZ(-7px)scale(.94)}50%{opacity:.9;transform:translate(-50%,-50%)translateZ(-7px)scale(1.04)}}
@keyframes brainHaloSpin{0%{transform:translate(-50%,-50%)translateZ(-7px)rotate(0)}to{transform:translate(-50%,-50%)translateZ(-7px)rotate(360deg)}}
@keyframes brainCoreBreath{0%,to{opacity:.42;transform:scale(.82)}50%{opacity:.84;transform:scale(1.12)}}
@keyframes brainCoreOrbit{to{transform:rotate(360deg)}}
@keyframes brainCoreDot{0%,to{opacity:.7;transform:scale(.78)}50%{opacity:1;transform:scale(1.45)}}
@keyframes brainTargetLock{0%,to{opacity:.34;transform:rotate(0)scale(.92)}45%{opacity:.92;transform:rotate(8deg)scale(1.04)}}
@keyframes brainScanBand{0%,12%{opacity:0;transform:translateY(0)}24%{opacity:.72}78%{opacity:.5}90%,to{opacity:0;transform:translateY(188px)}}
@keyframes tmsFieldPulse{0%{opacity:.22;stroke-dashoffset:0}48%{opacity:1}to{opacity:.22;stroke-dashoffset:-32px}}
@keyframes tmsEmitterCore{0%,to{opacity:.62;transform:scale(.8)}50%{opacity:1;transform:scale(1.42)}}
@keyframes brainBurstAura{0%{opacity:.7;transform:translate(-50%,-50%)translateZ(-12px)scale(.88)}32%{opacity:1;transform:translate(-50%,-50%)translateZ(-12px)scale(1.28)}to{opacity:.66;transform:translate(-50%,-50%)translateZ(-12px)scale(.98)}}
@keyframes brandMarkHeartbeat{0%,46%,66%,to{filter:drop-shadow(0 0 #9ad1d200);transform:scale(1)}51%{filter:drop-shadow(0 0 7px #9ad1d252);transform:scale(1.1)}56%{filter:drop-shadow(0 0 2px #9ad1d21a);transform:scale(1)}61%{filter:drop-shadow(0 0 5px #9ad1d233);transform:scale(1.045)}}
@keyframes footerScanner{0%,16%{opacity:0;top:-100px}28%{opacity:.26}72%{opacity:.14}84%,to{opacity:0;top:100%}}
@keyframes statusBlink{0%,to{opacity:.42}50%{opacity:1}}
@keyframes signalFlicker{0%,to{opacity:.48}45%{opacity:1}}
@keyframes hotspotRipple{0%{opacity:0;transform:scale(.35)}22%{opacity:.72}to{opacity:0;transform:scale(1.9)}}
@media (width<=620px){
.floridaContent .sectionLabel{margin-top:60px}
.footerPanelBottom>a.signalCta{min-height:56px;padding:6px 6px 6px 15px}
.footerPanelBottom>a.signalCta .ctaArrow{width:37px;height:37px}
}
@media (width<=620px){
.testimonialFooter>a.signalCta{justify-content:space-between;width:100%}
}

@keyframes stepPulse{0%,100%{box-shadow:0 0 0 0 #9ad1d240}50%{box-shadow:0 0 0 8px #9ad1d200}}

@keyframes psiMarkFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

@keyframes psiMarkGlow{ 0%,100%{opacity:.5;transform:scale(.9)} 50%{opacity:1;transform:scale(1.1)} }

@keyframes psiSporePulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.28);opacity:.72} }

/* ===== inner.css ===== */
/* =========================================================================
   Inner-page design system — single/archive/page/blog templates.
   Built on the reference tokens (--ink, --forest, --green, --ivory, --paper…)
   defined in index.css, so inner pages match the homepage exactly.
   Superpower-inspired: dark hero band, generous whitespace, one accent,
   soft rounded cards, editorial article column + sticky sidebar.
   ========================================================================= */

.innerRoot { background: var(--paper); position: relative; z-index: 1; }
.skipLink {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--forest-deep); color: #ffffff; padding: 10px 16px; border-radius: 0 0 10px 0;
}
.skipLink:focus { left: 0; }

/* Keep the fixed reference header legible over inner pages: give it a soft
   dark veil from the top (the hero band beneath it is dark anyway). */
.innerHeader::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 200%;
  background: linear-gradient(180deg, rgba(4,21,22,.55), rgba(4,21,22,0));
  pointer-events: none; z-index: -1;
}

/* ---------- Hero band ---------------------------------------------------- */
.innerHero { position: relative; color: #eaf6f6; }

/* Superpower-style hero: an inset, rounded image panel with white padding
   around it, content overlaid on the left. Sits on the paper page under a
   light header. */
.innerHero.heroPanel {
  background: var(--paper);
  padding: calc(84px + 16px) clamp(12px, 3vw, 34px) clamp(14px, 3vw, 34px);
}
body.admin-bar .innerHero.heroPanel { padding-top: calc(84px + 48px); }
@media screen and (max-width: 782px) { body.admin-bar .innerHero.heroPanel { padding-top: calc(84px + 62px); } }
.heroPanelInner {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: clamp(22px, 2.6vw, 36px);
  min-height: clamp(440px, 66vh, 640px);
  display: flex; align-items: center;
  box-shadow: 0 46px 100px -54px rgba(5,29,32,.55);
}
.heroPanelInner .innerHeroBg { position: absolute; inset: 0; z-index: 0; }
.heroPanelFill { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 130% at 80% -10%, #154347, rgba(21,67,71,0) 55%), linear-gradient(150deg, #0a2e31, #072629 55%, #051d20); }
.heroScrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(96deg, rgba(4,21,22,.82) 0%, rgba(4,25,27,.5) 40%, rgba(5,29,32,.08) 74%), linear-gradient(0deg, rgba(4,21,22,.4), rgba(4,21,22,0) 40%); }
.heroPanelContent { position: relative; z-index: 2; max-width: 780px; text-align: left; padding: clamp(28px, 4vw, 54px); }
.heroPanelContent .innerCrumbs { justify-content: flex-start; }
/* Refined superpower-scale hero type: smaller, tighter title (long treatment
   names stay ~3-4 graceful lines) and a lighter, calmer body paragraph. */
.heroPanelContent .innerHeroKicker { font-size: 10.5px; margin-bottom: 14px; }
.heroPanelContent .innerHeroTitle { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.015em; font-weight: 540; max-width: 26ch; text-wrap: balance; }
.heroPanelContent .innerHeroSub { margin: 18px 0 0; max-width: 52ch; font-size: clamp(14.5px, 1.1vw, 16.5px); line-height: 1.62; color: #c5ddde; }
@media (max-width: 620px) { .heroPanelContent { padding: 26px 22px; } .heroPanelInner { min-height: 460px; } }
/* Inside the panel the image reads clearly; only the left scrim darkens it. */
.heroPanel .innerHeroBg::after { content: none; }
/* Below ~820px the hero content fills the full width, so the desktop left-only
   scrim leaves the right side of the title/kicker/sub washed out over bright
   photos. Swap to an even, stronger overlay so the text stays legible. */
@media (max-width: 820px) {
  .heroPanel.hasBg .heroScrim {
    background: linear-gradient(178deg, rgba(4,21,22,.58) 0%, rgba(4,21,22,.74) 100%);
  }
}

/* -------- Light header (paper page + rounded hero panel) ----------------- */
.innerHeader { color: var(--ink); background: transparent; }
.innerHeader::before { display: none; }
.innerHeader .brandLight { color: var(--ink); }
.innerHeader .adaptiveHeaderBrand .pulseMark i { background: var(--green); }
.innerHeader .adaptiveNavLinks a { color: #344343; }
.innerHeader .adaptiveNavLinks a:hover { color: var(--ink); }
.innerHeader .adaptiveNavCall { color: var(--ink); }
.innerHeader .adaptiveMenuButton { color: var(--ink); background: rgba(16,34,35,.05); border-color: rgba(16,34,35,.12); }
.innerHeader .adaptiveMenuButton .navDotGrid i { background: #2c393a; }
/* Light floating pill on scroll (paper page) — mirrors the dark pill but tuned
   for the light header; higher specificity beats the dark rule in extra.css. */
.innerHeader.isScrolled { background: transparent; box-shadow: none; }
.adaptiveHeader.innerHeader.isScrolled .adaptiveNavCore.adaptiveNavSplit {
  background: rgba(251,250,246,.9);
  border: 1px solid rgba(16,34,35,.1);
  box-shadow: 0 20px 46px -22px rgba(5,29,32,.34), inset 0 1px rgba(255,255,255,.6);
}
.innerHeader.isScrolled .adaptiveMenuButton { background: rgba(16,34,35,.05); }

/* -------- Team hero on paper (light, to match the light header) ---------- */
.innerHero.teamHero { background: var(--paper); color: var(--ink); padding: calc(84px + 30px) 0 clamp(30px, 4vw, 56px); }
.teamHero .innerHeroTitle { color: var(--ink); }
.teamHero .innerHeroSub { color: #455555; }
.teamHero .innerHeroKicker { color: #417b7d; }
.teamHero .innerCrumbs a { color: #2b7579; }
.teamHero .innerCrumbs span[aria-hidden] { color: #9ab0b1; }
.teamHero .innerCrumbs .isCurrent { color: var(--ink); }
.teamHero .innerHeroChips li { background: #eaf3f3; border-color: rgba(73,158,161,.22); color: #2b595b; }
.teamHero .teamHeroCreds { color: var(--green); }
.teamHero .innerHeroGhost { border-color: rgba(16,34,35,.2); color: var(--ink); }
.teamHero .innerHeroGhost:hover { border-color: rgba(16,34,35,.4); background: rgba(16,34,35,.04); }
.teamHero .teamPortrait { border-color: rgba(16,34,35,.1); background: linear-gradient(160deg, #eef5f5, #dcebeb); }
.innerHeroGlow {
  position: absolute; width: 860px; height: 640px; max-width: 130vw;
  left: 50%; margin-left: -430px; top: -300px;
  background: radial-gradient(circle, rgba(121,211,213,.24), rgba(121,211,213,0) 66%);
  filter: blur(8px); pointer-events: none;
}
.innerHeroInner { position: relative; }
.innerCrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.innerCrumbs a { color: #9ad1d2; text-decoration: none; transition: color .2s; }
.innerCrumbs a:hover { color: #dbf7f8; }
.innerCrumbs span[aria-hidden] { color: #4e787b; }
.innerCrumbs .isCurrent { color: #cee7e8; }
.innerHeroKicker {
  display: inline-block; margin-bottom: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #7dd3d5;
}
.innerHeroTitle {
  margin: 0; max-width: 20ch; letter-spacing: -.02em; line-height: 1.04; color: #f4fafa;
  font-weight: 560; font-size: clamp(38px, 5.4vw, 74px);
}
.innerHeroSub {
  margin: 22px 0 0; max-width: 60ch; color: #bbd6d7; line-height: 1.6;
  font-size: clamp(15px, 1.5vw, 19px);
}

/* Superpower-inspired: centered composition, member orbs, grain, layered depth. */
.innerHeroGrain {
  position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.innerHeroInner.isCentered { max-width: 920px; margin-inline: auto; text-align: center; }
.innerHeroInner.isCentered .innerCrumbs { justify-content: center; }
.innerHeroInner.isCentered .innerHeroTitle { max-width: 17ch; margin-inline: auto; font-size: clamp(40px, 5.8vw, 82px); }
.innerHeroInner.isCentered .innerHeroSub { margin-left: auto; margin-right: auto; }
.innerHeroInner.isCentered .innerHeroChips,
.innerHeroInner.isCentered .innerHeroActions { justify-content: center; }
.innerHeroInner.isCentered .innerHeroChips { margin-top: 26px; }

/* Social-proof cluster (overlapping member orbs + trust line). */
.innerHeroTrust { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; color: #c2ddde; font-size: 14px; font-weight: 500; }
.heroOrbs { display: inline-flex; }
.heroOrbs i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #092a2d; margin-left: -10px; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.heroOrbs i:first-child { margin-left: 0; background: linear-gradient(150deg, #b6e5e5, #76babc); }
.heroOrbs i:nth-child(2) { background: linear-gradient(150deg, #9ad1d2, #499ea1); }
.heroOrbs i:nth-child(3) { background: linear-gradient(150deg, #dbf7f8, #9ad1d2); }

/* Cinematic hero background image (heavily overlaid so text stays legible). */
.innerHeroBg { position: absolute; inset: 0; background: center / cover no-repeat; z-index: 0; }
.innerHeroBg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(160deg, rgba(10,46,49,.80) 0%, rgba(7,38,41,.90) 48%, rgba(5,29,32,.95) 100%),
    radial-gradient(120% 120% at 50% -10%, rgba(21,67,71,.45), rgba(5,29,32,0) 60%);
}
/* Decorative concentric orbit rings behind the title (depth, "out of world"). */
.innerHeroOrbits { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.innerHeroOrbits i { position: absolute; left: 50%; top: 42%; border-radius: 50%; border: 1px solid rgba(154,209,210,.14); }
.innerHeroOrbits i:nth-child(1) { width: 540px; height: 540px; margin: -270px 0 0 -270px; animation: orbitSpin 40s linear infinite; }
.innerHeroOrbits i:nth-child(2) { width: 800px; height: 800px; margin: -400px 0 0 -400px; border-color: rgba(154,209,210,.09); animation: orbitSpin 64s linear infinite reverse; }
.innerHeroOrbits i:nth-child(3) { width: 1080px; height: 1080px; margin: -540px 0 0 -540px; border-color: rgba(154,209,210,.055); }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .innerHeroOrbits i { animation: none !important; } }

/* ---------- Content shell & two-column layout ---------------------------- */
.innerWrap { padding-block: clamp(56px, 7vw, 104px); }
.innerLayout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(36px, 5vw, 76px); align-items: start;
}
.innerLayout.isNarrow { grid-template-columns: minmax(0, 760px); justify-content: center; }
.innerMainCol { min-width: 0; }

/* ---------- Prose (the_content) ----------------------------------------- */
.innerProse { color: #354444; font-size: 17px; line-height: 1.72; }
.innerProse > *:first-child { margin-top: 0; }
.innerProse p { margin: 0 0 1.25em; }
.innerProse h2 {
  margin: 1.9em 0 .55em; color: var(--ink); letter-spacing: -.015em; line-height: 1.15;
  font-weight: 560; font-size: clamp(24px, 2.6vw, 33px);
}
.innerProse h3 {
  margin: 1.6em 0 .5em; color: var(--ink); letter-spacing: -.01em;
  font-weight: 600; font-size: clamp(19px, 2vw, 23px);
}
.innerProse h4 { margin: 1.4em 0 .4em; color: var(--ink); font-weight: 600; font-size: 17px; }
.innerProse a { color: #1d696d; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.innerProse a:hover { color: #134e52; }
.innerProse strong { color: #1c2a2b; font-weight: 640; }
.innerProse ul, .innerProse ol { margin: 0 0 1.35em; padding-left: 0; list-style: none; }
.innerProse ol { counter-reset: pr; }
.innerProse ul li, .innerProse ol li { position: relative; padding-left: 30px; margin-bottom: .6em; }
.innerProse ul li::before {
  content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 4px rgba(73,158,161,.16);
}
.innerProse ol li::before {
  counter-increment: pr; content: counter(pr); position: absolute; left: 0; top: .05em;
  width: 22px; height: 22px; border-radius: 50%; background: #e3f1f1; color: #1d696d;
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.innerProse blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--green);
  color: var(--ink); font-size: clamp(19px, 2vw, 24px); line-height: 1.45; letter-spacing: -.01em;
}
.innerProse img, .innerProse figure { max-width: 100%; height: auto; border-radius: 18px; }
.innerProse figure { margin: 1.8em 0; }
.innerProse figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.innerProse hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }

.innerLede {
  font-size: clamp(19px, 2.1vw, 24px); line-height: 1.5; color: #223132; letter-spacing: -.01em;
  margin: 0 0 1.6em;
}

/* ---------- Feature / points list --------------------------------------- */
.innerBlock { margin-top: clamp(34px, 4vw, 54px); }
.innerBlockLabel {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #417b7d;
  display: block; margin-bottom: 14px;
}
.pointList { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.pointList li {
  position: relative; padding: 16px 18px 16px 50px; border: 1px solid var(--line); border-radius: 16px;
  background: #ffffff; color: #334343; line-height: 1.55; box-shadow: 0 14px 30px -26px rgba(5,29,32,.5);
}
.pointList li::before {
  content: ""; position: absolute; left: 18px; top: 20px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------- Native FAQ accordion (single treatment) --------------------- */
.innerFaq { display: grid; gap: 12px; }
.innerFaq details {
  border: 1px solid var(--line); border-radius: 16px; background: #ffffff; overflow: hidden;
  transition: box-shadow .25s;
}
.innerFaq details[open] { box-shadow: 0 20px 44px -30px rgba(5,29,32,.5); }
.innerFaq summary {
  list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; color: var(--ink); font-weight: 560; font-size: 17px;
}
.innerFaq summary::-webkit-details-marker { display: none; }
.innerFaq summary::after {
  content: "+"; font-size: 22px; color: var(--green); font-weight: 400; line-height: 1; transition: transform .25s;
}
.innerFaq details[open] summary::after { transform: rotate(45deg); }
.innerFaq .faqBody { padding: 0 22px 20px; color: #455555; line-height: 1.65; }

/* ---------- Bespoke archive heroes (split panel: copy | composition) ------ */
.heroPanelSplit {
  position: relative; z-index: 2; width: 100%;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
  gap: clamp(20px, 3vw, 56px);
}
.heroPanelMedia { position: relative; min-height: 100%; padding-right: clamp(20px, 3vw, 56px); }
@media (max-width: 900px) { .heroPanelSplit { grid-template-columns: 1fr; } .heroPanelMedia { display: none; } }

/* -- Treatments: floating mosaic of real treatment photos ----------------- */
.heroTxMosaic { position: relative; height: clamp(380px, 52vh, 520px); }
.heroTxMosaic .m1, .heroTxMosaic .m2 {
  position: absolute; overflow: hidden;
  filter: drop-shadow(0 34px 54px rgba(0,9,10,.45));
}
.heroTxMosaic .m1 { top: 6%; right: 4%; width: 74%; clip-path: url(#txcutR); animation: heroDrift 9s ease-in-out infinite alternate; }
.heroTxMosaic .m2 { bottom: 4%; left: 0; width: 52%; clip-path: url(#txcutL); animation: heroDrift 11s ease-in-out infinite alternate-reverse; }
.heroTxMosaic img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; }
.heroTxMosaic .mDots {
  position: absolute; top: 0; left: 10%; width: 84px; height: 58px; opacity: .6;
  background-image: radial-gradient(rgba(154,209,210,.6) 1.3px, transparent 1.5px);
  background-size: 14px 14px;
}
.heroTxChip {
  position: absolute; bottom: 16%; right: 4%; z-index: 2; max-width: 92%;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(251,250,246,.94); color: var(--ink);
  border-radius: 999px; padding: 11px 18px; font-size: 13px; font-weight: 600;
  box-shadow: 0 18px 40px -18px rgba(0,9,10,.55);
  animation: heroDrift 8s ease-in-out infinite alternate;
}
.heroTxChip i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(73,158,161,.22); }
@keyframes heroDrift { from { transform: translateY(-8px); } to { transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .heroTxMosaic .m1, .heroTxMosaic .m2, .heroTxChip { animation: none !important; } }

/* -- Locations: dot-matrix Florida map + glowing pins + glass stat chip --- */
.heroLocMap { position: relative; height: clamp(400px, 56vh, 540px); }
.heroLocMap svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 0 34px rgba(125,211,213,.14));
}
.heroLocPins { position: absolute; inset: 0; pointer-events: none; }
.heroLocPins i {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: #acf0f2; box-shadow: 0 0 0 4px rgba(125,211,213,.2), 0 0 18px rgba(125,211,213,.8);
}
.heroLocPins i::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(172,240,242,.55);
  animation: pinRing 2.8s cubic-bezier(.16,1,.3,1) infinite;
}
.heroLocPins i:nth-child(2)::after { animation-delay: .6s; }
.heroLocPins i:nth-child(3)::after { animation-delay: 1.1s; }
.heroLocPins i:nth-child(4)::after { animation-delay: 1.7s; }
.heroLocPins i:nth-child(5)::after { animation-delay: 2.2s; }
@keyframes pinRing { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .heroLocPins i::after { animation: none; opacity: .4; } }
/* Glass stat chip anchored to the map's empty gulf corner. */
.heroLocChip {
  position: absolute; left: 0; bottom: 10%;
  display: inline-flex; align-items: center; gap: 14px;
  background: rgba(251,250,246,.94); color: var(--ink);
  border-radius: 20px; padding: 14px 20px;
  box-shadow: 0 24px 54px -20px rgba(0,9,10,.6);
}
.heroLocChip strong {
  font-size: clamp(40px, 4.6vw, 62px); line-height: .9; font-weight: 620; letter-spacing: -.04em;
  color: #1d696d;
}
.heroLocChip span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #417b7d; line-height: 1.7;
}

/* County ticker pinned to the panel's bottom edge. */
.heroPanelFoot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  border-top: 1px solid rgba(193,234,235,.14);
  background: rgba(2,23,25,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  overflow: hidden; padding-block: 13px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000000 8%, #000000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000000 8%, #000000 92%, transparent);
}
.heroTicker { display: flex; width: max-content; gap: 0; animation: tickerRun 60s linear infinite; }
.heroTicker ul { display: flex; list-style: none; margin: 0; padding: 0; }
.heroTicker li {
  display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #9ad1d2;
}
.heroTicker li::after { content: "·"; color: rgba(154,209,210,.5); }
@keyframes tickerRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .heroTicker { animation: none; } }

/* ---------- Treatments archive — editorial index (no card grid) ---------- */
.txArchive { padding-block: clamp(36px, 5vh, 72px); background: var(--paper); }
.txArchiveShell { width: min(1376px, 100% - 64px); margin-inline: auto; }

/* Featured treatment — the one focal point. */
.txFeature {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 4vw, 72px); align-items: center;
  background: linear-gradient(160deg, #f3f8f8 0%, #eaf3f3 100%);
  border: 1px solid rgba(16,34,35,.07); border-radius: 34px;
  padding: clamp(28px, 4vw, 60px);
}
.txFeature::before { /* dot-grid accent */
  content: ""; position: absolute; top: 26px; right: 30px; width: 84px; height: 58px;
  background-image: radial-gradient(rgba(73,158,161,.45) 1.3px, transparent 1.5px);
  background-size: 14px 14px; opacity: .6; pointer-events: none;
}
.txFeatureTitle { margin: 0 0 16px; font-size: clamp(26px, 3vw, 44px); line-height: 1.08; letter-spacing: -.024em; font-weight: 620; text-wrap: balance; }
.txFeatureTitle a { color: var(--ink); text-decoration: none; }
.txFeatureTitle a:hover { color: #1d696d; }
.txFeatureDesc { margin: 0; color: #4a5a5a; line-height: 1.7; font-size: clamp(15px, 1.1vw, 16.5px); max-width: 52ch; }
.txFeatureActions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 26px; }
.txFeatureActions .txFaqCall { margin-top: 0; }
.txFeatureMedia { margin: 0; filter: drop-shadow(0 30px 48px rgba(5,29,32,.22)); }
.txFeatureMedia .txChapterPhoto { clip-path: url(#txcutR); }
.txFeatureMedia img { width: 100%; display: block; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 32%; }

/* Numbered ledger of the remaining conditions. */
.txIndexHead { margin: clamp(34px, 5vh, 56px) 0 6px; }
.txIndex { border-top: 1px solid rgba(16,34,35,.1); }
.txIndexRow {
  display: grid; grid-template-columns: 64px 1fr 210px 52px;
  gap: clamp(18px, 2.6vw, 44px); align-items: center;
  padding-block: clamp(20px, 3vh, 30px);
  border-bottom: 1px solid rgba(16,34,35,.1);
}
.txIndexNum {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; font-weight: 700; letter-spacing: .12em; color: #499ea1;
}
.txIndexTitle { margin: 0 0 6px; font-size: clamp(18px, 1.7vw, 24px); letter-spacing: -.016em; font-weight: 620; line-height: 1.2; }
.txIndexTitle a { color: var(--ink); text-decoration: none; transition: color .2s; }
.txIndexRow:hover .txIndexTitle a { color: #1d696d; }
.txIndexDesc { margin: 0; color: #4a5a5a; line-height: 1.6; font-size: 15px; max-width: 56ch; }
.txIndexMedia {
  display: block; overflow: hidden; border-radius: 14px 34px 14px 14px;
}
.txIndexMedia img {
  width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 30%;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.txIndexRow:hover .txIndexMedia img { transform: scale(1.05); }
.txIndexGo {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(16,34,35,.16);
  display: grid; place-items: center; color: #2b7579; text-decoration: none; font-size: 18px;
  transition: background .25s, color .25s, border-color .25s, transform .3s cubic-bezier(.16,1,.3,1);
}
.txIndexRow:hover .txIndexGo { background: #2b7579; border-color: #2b7579; color: #ffffff; transform: translateX(4px); }

@media (max-width: 900px) {
  .txFeature { grid-template-columns: 1fr; }
  .txFeatureMedia { order: -1; }
  .txIndexRow { grid-template-columns: 44px 1fr 52px; }
  .txIndexMedia { display: none; }
}
@media (max-width: 560px) {
  .txIndexRow { grid-template-columns: 36px 1fr 46px; gap: 14px; }
}

/* ---------- County plates — "living signal": zero-cost ANIMATED media for
   location chapters. Breathing glow + orbiting particles + a self-drawing EKG
   care-signal + giant outlined county monogram. Four deterministic variants;
   all text pinned to the bottom-left SAFE zone (never near the cut corner). */
/* Each plate variant carries its own BRAND palette via custom properties:
   V1 teal (signature) · V2 ember/coral · V3 gold · V4 ocean ink. The hero
   care-signal card (.heroLocSig) shares the teal defaults. */
.txChapterPlate, .heroLocSig {
  --plGlow: rgba(32,109,114,.75);
  --plRing: rgba(154,209,210,.16);
  --plRingSoft: rgba(154,209,210,.09);
  --plLine: #7dd3d5;
  --plLineGlow: rgba(125,211,213,.65);
  --plDot: #acf0f2;
  --plDotGlow: rgba(172,240,242,.9);
  --plHalo: rgba(125,211,213,.18);
  --plStroke: rgba(154,209,210,.3);
  --plStrokeDim: rgba(154,209,210,.18);
  --plText: #cee7e8;
  --plSub: #7ea7a9;
}
.txChapterPlate {
  position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2;
  background: linear-gradient(152deg, #0b3236 0%, #08292c 55%, #061d20 100%);
}
/* V2 — LIGHT editorial: paper card, ink text, teal accents (a magazine feel). */
.txChapterPlate.isV2 {
  background: linear-gradient(158deg, #ffffff 0%, #f1f8f7 58%, #e6f1ef 100%);
  box-shadow: inset 0 0 0 1px rgba(15,125,128,.12);
  --plGlow: rgba(92,192,194,.22);
  --plRing: rgba(15,125,128,.16); --plRingSoft: rgba(15,125,128,.09);
  --plLine: #0f7d80; --plLineGlow: rgba(15,125,128,.4);
  --plDot: #0f7d80; --plDotGlow: rgba(15,125,128,.5);
  --plHalo: rgba(15,125,128,.14);
  --plStroke: rgba(15,125,128,.18); --plStrokeDim: rgba(15,125,128,.12);
  --plText: #123234; --plSub: #5f7a7c;
}
/* V3 — LIGHT trust dashboard: airy mint paper with teal check badges. */
.txChapterPlate.isV3 {
  background: linear-gradient(135deg, #f7fbfa 0%, #edf6f4 55%, #e1eeeb 100%);
  box-shadow: inset 0 0 0 1px rgba(15,125,128,.12);
  --plGlow: rgba(92,192,194,.2);
  --plRing: rgba(15,125,128,.16); --plRingSoft: rgba(15,125,128,.09);
  --plLine: #0f7d80; --plLineGlow: rgba(15,125,128,.4);
  --plDot: #0f7d80; --plDotGlow: rgba(15,125,128,.5);
  --plHalo: rgba(15,125,128,.14);
  --plStroke: rgba(15,125,128,.18); --plStrokeDim: rgba(15,125,128,.12);
  --plText: #123234; --plSub: #5f7a7c;
}
.txChapterPlate.isV4 {
  background: linear-gradient(170deg, #132831 0%, #0e1f27 60%, #09161c 100%);
  --plGlow: rgba(52,106,126,.6);
  --plRing: rgba(139,199,214,.16); --plRingSoft: rgba(139,199,214,.09);
  --plLine: #7fc4d3; --plLineGlow: rgba(127,196,211,.55);
  --plDot: #b5e5ef; --plDotGlow: rgba(181,229,239,.9);
  --plHalo: rgba(127,196,211,.16);
  --plStroke: rgba(158,208,221,.28); --plStrokeDim: rgba(158,208,221,.16);
  --plText: #d9eaef; --plSub: #83a0aa;
}

/* Light plates (V2 editorial · V3 dashboard): drop the dark-only signal deco,
   dim the monogram to a faint teal watermark, and add their own instruments. */
.txChapterPlate.isV2 .plateBreath, .txChapterPlate.isV3 .plateBreath,
.txChapterPlate.isV2 .plateOrbit, .txChapterPlate.isV3 .plateOrbit { display: none; }
.txChapterPlate.isV2 .plateMono, .txChapterPlate.isV3 .plateMono {
  color: transparent; -webkit-text-stroke: 1.4px rgba(15,125,128,.10); opacity: 1;
}
/* V2 — bold county headline above the numbered steps. */
.plateHeadline {
  display: block; margin: 2px 0 15px; max-width: 15ch;
  font-family: "Fraunces", Georgia, serif; font-weight: 560;
  font-size: clamp(23px, 2.7vw, 34px); line-height: 1.03; letter-spacing: -.02em;
  color: var(--plText); text-wrap: balance;
}
.txChapterPlate.isV2 .plateModule { bottom: 15%; }
/* V2 — a teal location "ping" marker, top-right. */
.txChapterPlate.isV2::before {
  content: ""; position: absolute; top: 15%; right: 12%; z-index: 1;
  width: 13px; height: 13px; border-radius: 50%; background: var(--plLine);
  box-shadow: 0 0 0 6px rgba(15,125,128,.12), 0 0 0 14px rgba(15,125,128,.055);
}
/* V3 — teal check badges + hairline rows for the trust dashboard. */
.txChapterPlate.isV3 .plateRows.isChecks li .t {
  display: grid; place-items: center; min-width: 20px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--plLine); color: #fff; font-size: 11px; font-weight: 700;
}
.txChapterPlate.isV3 .plateRows li { border-top-color: rgba(15,125,128,.12); padding: 10px 0; }

/* Slow "breathing" halo — a calm inhale/exhale rhythm. */
.plateBreath {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  top: -22%; right: -14%; pointer-events: none;
  background: radial-gradient(circle, var(--plGlow) 0%, transparent 62%);
  animation: plateBreath 7s ease-in-out infinite;
}
.txChapterPlate.isV2 .plateBreath { top: auto; bottom: -26%; right: auto; left: -12%; animation-duration: 8.5s; }
.txChapterPlate.isV3 .plateBreath { top: 30%; right: -24%; animation-duration: 7.8s; }
.txChapterPlate.isV4 .plateBreath { top: -18%; left: 22%; right: auto; animation-duration: 9s; }
@keyframes plateBreath { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.18); opacity: .95; } }

/* Dotted Florida (variant 1 only) — fully contained, never clipped. */
.plateFlWrap { position: absolute; right: 6%; bottom: 8%; width: 46%; aspect-ratio: 1; opacity: .75; }
.plateFlWrap svg { width: 100%; height: 100%; filter: drop-shadow(0 0 18px rgba(125,211,213,.14)); }

/* Orbiting particles — two rings, each carrying a glowing dot. */
.plateOrbit { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.plateOrbit i {
  position: absolute; border-radius: 50%;
  border: 1px solid var(--plRing);
}
.plateOrbit i::after {
  content: ""; position: absolute; top: -3.5px; left: 50%; width: 7px; height: 7px; border-radius: 50%;
  background: var(--plDot); box-shadow: 0 0 12px var(--plDotGlow), 0 0 0 3px var(--plHalo);
}
.plateOrbit .o1 { width: 54%; aspect-ratio: 1; animation: plateSpin 16s linear infinite; }
.plateOrbit .o2 { width: 86%; aspect-ratio: 1; border-color: var(--plRingSoft); animation: plateSpin 26s linear infinite reverse; }
.txChapterPlate.isV2 .plateOrbit .o1 { animation-duration: 20s; }
.txChapterPlate.isV3 .plateOrbit { place-items: start end; }
.txChapterPlate.isV3 .plateOrbit i { margin: -12% -10% 0 0; }
@keyframes plateSpin { to { transform: rotate(360deg); } }

/* The care signal — an EKG line that draws itself, pauses, and loops.
   Emitted on V4 only (the appointment plate); kept in the upper half so it
   never crosses the instrument/tag safe zone below. */
.plateEkg { position: absolute; left: 0; right: 0; top: 26%; width: 100%; height: 32%; overflow: visible; }
.txChapterPlate.isV4 .plateEkg { top: 14%; }
.plateEkg path {
  fill: none; stroke: var(--plLine); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 8px var(--plLineGlow));
  stroke-dasharray: 42 58; stroke-dashoffset: 100;
  animation: plateEkg 4.6s linear infinite;
}
@keyframes plateEkg { to { stroke-dashoffset: 0; } }

/* Giant OUTLINED county monogram — typographic anchor, never clipped. */
.plateMono {
  position: absolute; left: 4%; bottom: -7%; z-index: 1;
  font-size: clamp(150px, 17vw, 250px); line-height: .9; font-weight: 620; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px var(--plStroke);
  user-select: none;
}
.txChapterPlate.isV2 .plateMono { left: auto; right: 6%; }
.txChapterPlate.isV4 .plateMono { -webkit-text-stroke: 1.5px var(--plStrokeDim); color: rgba(234,246,246,.05); }

/* Useful instruments — each plate answers a real visitor question in the
   bottom-left safe zone (replaces the old rotating "Did you know" facts):
   V1 where (count + community chips) · V2 when (session timetable) ·
   V3 cost (coverage checklist) · V4 next (tappable appointment card). */
.plateModule { position: absolute; left: 7%; right: 9%; bottom: 21%; z-index: 2; color: var(--plText); }
.plateKick {
  display: block; margin-bottom: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--plSub);
}
.plateKick::after {
  content: ""; display: block; width: 30px; height: 1px; margin-top: 8px;
  background: var(--plLine); opacity: .55;
}
/* Fallback fact line (V1 when a county has no cities data yet). */
.plateLine {
  display: block; max-width: min(30ch, 82%);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(15px, 1.35vw, 18px); font-weight: 480; line-height: 1.5;
  letter-spacing: .002em; text-wrap: pretty;
}

/* V1 — communities counter + chips (real ACF data). */
.plateCount { display: flex; align-items: baseline; gap: 12px; }
.plateCount strong {
  font-size: clamp(40px, 4.4vw, 58px); font-weight: 620; letter-spacing: -.03em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.plateCount span { max-width: 15ch; font-size: 13px; line-height: 1.4; color: var(--plSub); }
.plateChips { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.plateChips li {
  border-radius: 999px; font-size: 11.5px; letter-spacing: .02em;
  border: 1px solid var(--plStrokeDim); background: rgba(255,255,255,.04);
  transition: border-color .25s, background .25s, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.plateChips li:hover { border-color: var(--plStroke); background: rgba(255,255,255,.09); transform: translateY(-1px); }
.plateChips a { display: inline-block; padding: 5px 11px; border-radius: 999px; color: inherit; text-decoration: none; }
.plateChips a:focus-visible { outline: 2px solid var(--plLine); outline-offset: 2px; }
.plateChips li.isMore { color: var(--plSub); border-style: dashed; }
/* Anchored jumps land clear of the fixed header. */
.txFaq { scroll-margin-top: 96px; }

/* V2 timetable + V3 checklist — hairline rows with a mono lead column. */
.plateRows { margin: 0; padding: 0; list-style: none; max-width: 34ch; }
.plateRows li { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--plStrokeDim); }
.plateRows li:first-child { border-top: 0; padding-top: 0; }
.plateRows .t {
  flex: none; min-width: 56px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--plLine);
}
.plateRows .l { font-size: 13.5px; line-height: 1.45; }
.plateRows.isChecks .t { min-width: 18px; font-size: 12px; }

/* V4 — appointment card: the plate's one real action (underline draws in). */
.plateNext { display: inline-flex; flex-direction: column; gap: 5px; text-decoration: none; color: var(--plText); }
.plateNext strong {
  width: max-content; padding-bottom: 4px;
  font-size: clamp(23px, 2.2vw, 30px); font-weight: 620; letter-spacing: -.015em; line-height: 1.1;
  background: linear-gradient(var(--plLine), var(--plLine)) left bottom / 0 2px no-repeat;
  transition: background-size .35s cubic-bezier(.22, 1, .36, 1);
}
.plateNext:hover strong, .plateNext:focus-visible strong { background-size: 100% 2px; }
.plateNext:focus-visible { outline: 2px solid var(--plLine); outline-offset: 4px; border-radius: 6px; }
.plateNext span { font-size: 12px; letter-spacing: .04em; color: var(--plSub); }

/* Plate delights (CSS-only, gated below): a radar sweep circles the dotted
   Florida — the care signal scanning the state — and the county tag's status
   dot emits a sonar ping (transform-based ring, so nothing can clip it). */
.plateFlWrap .flSweep {
  fill: var(--plLine); opacity: .2;
  transform-box: view-box; transform-origin: 50% 50%;
  animation: flSweep 8s linear infinite;
}
@keyframes flSweep { to { transform: rotate(360deg); } }
.plateTag i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--plLine); opacity: 0;
  animation: platePing 3.2s cubic-bezier(.22, 1, .36, 1) infinite;
}
@keyframes platePing {
  0% { transform: scale(1); opacity: .5; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .plateFlWrap .flSweep, .plateTag i::after { animation: none; }
  .plateTag i::after { opacity: 0; }
}

/* Staged instrument entrance — refsite.js flags <html>.tmsePlates and adds
   .isLive per plate as it scrolls into view (local IO, no CDN dependency).
   Hidden states exist ONLY under that flag, so no-JS visitors always see the
   finished layout. Checkmarks stamp in with an overshoot; rows/chips cascade. */
.tmsePlates .txChapterPlate .plateKick,
.tmsePlates .txChapterPlate .plateCount,
.tmsePlates .txChapterPlate .plateLine,
.tmsePlates .txChapterPlate .plateNext,
.tmsePlates .txChapterPlate .plateChips li,
.tmsePlates .txChapterPlate .plateRows li {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease, transform .65s cubic-bezier(.22, 1, .36, 1);
}
.tmsePlates .txChapterPlate.isLive .plateKick,
.tmsePlates .txChapterPlate.isLive .plateCount,
.tmsePlates .txChapterPlate.isLive .plateLine,
.tmsePlates .txChapterPlate.isLive .plateNext,
.tmsePlates .txChapterPlate.isLive .plateChips li,
.tmsePlates .txChapterPlate.isLive .plateRows li { opacity: 1; transform: none; }
.tmsePlates .txChapterPlate.isLive .plateCount,
.tmsePlates .txChapterPlate.isLive .plateLine,
.tmsePlates .txChapterPlate.isLive .plateNext { transition-delay: .16s; }
.tmsePlates .txChapterPlate.isLive .plateChips li,
.tmsePlates .txChapterPlate.isLive .plateRows li { transition-delay: .3s; }
.tmsePlates .txChapterPlate.isLive .plateChips li:nth-child(2),
.tmsePlates .txChapterPlate.isLive .plateRows li:nth-child(2) { transition-delay: .4s; }
.tmsePlates .txChapterPlate.isLive .plateChips li:nth-child(3),
.tmsePlates .txChapterPlate.isLive .plateRows li:nth-child(3) { transition-delay: .5s; }
.tmsePlates .txChapterPlate.isLive .plateChips li:nth-child(4),
.tmsePlates .txChapterPlate.isLive .plateRows li:nth-child(4) { transition-delay: .6s; }
.tmsePlates .txChapterPlate .plateRows.isChecks .t {
  display: inline-block; transform: scale(0) rotate(-30deg);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.tmsePlates .txChapterPlate.isLive .plateRows.isChecks .t { transform: none; }
.tmsePlates .txChapterPlate.isLive .plateRows.isChecks li:nth-child(1) .t { transition-delay: .45s; }
.tmsePlates .txChapterPlate.isLive .plateRows.isChecks li:nth-child(2) .t { transition-delay: .6s; }
.tmsePlates .txChapterPlate.isLive .plateRows.isChecks li:nth-child(3) .t { transition-delay: .75s; }
@media (prefers-reduced-motion: reduce) {
  .tmsePlates .txChapterPlate .plateKick,
  .tmsePlates .txChapterPlate .plateCount,
  .tmsePlates .txChapterPlate .plateLine,
  .tmsePlates .txChapterPlate .plateNext,
  .tmsePlates .txChapterPlate .plateChips li,
  .tmsePlates .txChapterPlate .plateRows li,
  .tmsePlates .txChapterPlate .plateRows.isChecks .t { opacity: 1; transform: none; transition: none; }
}

/* County tag — ALWAYS the bottom-left safe zone (cut corners live at the top).
   overflow stays visible so the status dot's ping ring is never clipped. */
.plateTag {
  position: absolute; left: 7%; bottom: 9%; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--plText);
  white-space: nowrap; max-width: 86%;
}
.plateTag i { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--plLine); box-shadow: 0 0 0 4px var(--plHalo); }
.plateTag em { font-style: normal; color: var(--plSub); }
.txChapterPlate.isV2 .plateTag { left: 7%; }

@media (prefers-reduced-motion: reduce) {
  .plateBreath, .plateOrbit i, .plateEkg path { animation: none; }
  .plateEkg path { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* Learn-more pill — the homepage styles this as `.treatmentBody a.signalTextLink`
   only, so on inner pages the link was unstyled and the arrow (a flex box)
   dropped to its own line. Define the pill globally here. */
.signalTextLink {
  --signal-bg: linear-gradient(145deg, #205d61 0%, #0e3c40 55%, #07292c 100%);
  --signal-ink: #dcf7f8;
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  color: #2b6e72; font-weight: 600; font-size: 14.5px; text-decoration: none;
  background: linear-gradient(135deg, rgba(220,239,239,.65), rgba(255,255,255,.8));
  border: 1px solid rgba(59,126,128,.16); border-radius: 12px;
  min-height: 40px; padding: 5px 5px 5px 14px;
  box-shadow: 0 8px 19px rgba(13,54,57,.055), inset 0 1px rgba(255,255,255,.75);
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.signalTextLink:hover { transform: translateY(-1px); border-color: rgba(59,126,128,.34); box-shadow: 0 12px 26px rgba(13,54,57,.12), inset 0 1px rgba(255,255,255,.75); }
.signalTextLink .ctaArrow { flex: none; width: 29px; height: 29px; border-radius: 50%; margin: 0; }
.signalTextLink .ctaArrow svg { width: 20px; height: 20px; }

/* -- Single location hero: "care signal monitor" over the living signal. -- */
.heroLocSig { position: relative; height: clamp(380px, 52vh, 520px); display: grid; place-items: center; }
.heroLocSig .plateBreath { top: -14%; right: -6%; width: 86%; }
.heroLocSig .plateOrbit i { border-color: rgba(154,209,210,.13); }
.sigMono {
  position: absolute; right: 0; bottom: -10%; z-index: 0;
  font-size: clamp(200px, 24vw, 340px); line-height: .9; font-weight: 620; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(154,209,210,.22);
  user-select: none; pointer-events: none;
}
.sigCard {
  position: relative; z-index: 2; width: min(400px, 92%);
  background: rgba(5,29,31,.58); color: #eaf6f6;
  border: 1px solid rgba(193,234,235,.16); border-radius: 22px;
  padding: 22px 24px 10px;
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 34px 80px -30px rgba(0,9,10,.7), inset 0 1px rgba(255,255,255,.07);
  animation: heroDrift 9s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .sigCard { animation: none; } }
.sigHead {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #9ad1d2;
}
.sigHead i { width: 8px; height: 8px; border-radius: 50%; background: #7dd3d5; box-shadow: 0 0 0 4px rgba(125,211,213,.18); animation: pinBlinkSig 2.2s ease-in-out infinite; }
@keyframes pinBlinkSig { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sigHead i { animation: none; } }
.sigEkg { display: block; width: 100%; height: 56px; margin: 10px 0 4px; overflow: visible; }
.sigEkg path {
  fill: none; stroke: #7dd3d5; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(125,211,213,.65));
  stroke-dasharray: 42 58; stroke-dashoffset: 100;
  animation: plateEkg 4.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .sigEkg path { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; } }
.sigRows { list-style: none; margin: 0; padding: 0; }
.sigRows li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 11px 0; border-top: 1px solid rgba(193,234,235,.1);
}
.sigRows span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #7ea7a9;
}
.sigRows strong { font-size: 14.5px; font-weight: 600; color: #eaf6f6; letter-spacing: -.01em; text-align: right; }

/* City chips inside the "areas we serve" panel (single location). */
.locCityChips { justify-content: flex-start; align-content: flex-start; gap: 9px; }
.locCityChips li {
  background: rgba(251,250,246,.85); border: 1px solid rgba(16,34,35,.1);
  border-radius: 999px; padding: 9px 16px; font-size: 13.5px; color: #334343;
  transition: background .25s, border-color .25s, color .25s;
}
.locCityChips li:hover { background: #2b7579; border-color: #2b7579; color: #ffffff; }

/* ---------- Locations archive — searchable A–Z county directory ----------- */
.locBoardHead {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px 20px; margin-top: 0;
}
.locBoardLede { margin: 0; font-size: 15px; line-height: 1.5; color: #546868; max-width: 500px; }
.locBoardLede strong { color: #206063; font-weight: 700; }

/* Toolbar — live search + A–Z jump chips. */
.locTools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 22px 0 26px; }
.locSearch {
  display: inline-flex; align-items: center; gap: 10px; flex: 1 1 260px; max-width: 340px;
  height: 48px; padding: 0 16px; border-radius: 14px; background: var(--white);
  border: 1px solid rgba(16,34,35,.14); box-shadow: 0 1px 2px rgba(16,34,35,.04);
  transition: border-color .2s, box-shadow .2s;
}
.locSearch:focus-within { border-color: #61bfc2; box-shadow: 0 0 0 3px rgba(79,196,199,.14); }
.locSearch svg { width: 19px; height: 19px; flex: none; fill: none; stroke: #6c8789; stroke-width: 1.7; stroke-linecap: round; }
.locSearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14.5px; color: var(--ink); }
.locSearch input::placeholder { color: #8ea8a9; }
.locSearch input::-webkit-search-cancel-button { -webkit-appearance: none; }

.locAlpha { display: flex; flex-wrap: wrap; gap: 6px; }
.locAlpha button {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 9px;
  border: 1px solid rgba(16,34,35,.12); background: var(--white);
  font: inherit; font-size: 12.5px; font-weight: 600; color: #43595a;
  transition: background .18s, color .18s, border-color .18s;
}
.locAlpha button:hover { border-color: #8dcfd2; color: #206063; }
.locAlpha button.isActive { background: #2b7579; border-color: #2b7579; color: #ffffff; }

/* Tile grid — separated cards, hover lift + amethyst accent. */
.locGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.locGrid .locTile[hidden] { display: none; }
.locTile {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 22px 22px 20px; border-radius: 18px; text-decoration: none;
  background: var(--white); border: 1px solid rgba(16,34,35,.10);
  box-shadow: 0 1px 2px rgba(16,34,35,.04);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
}
.locTile::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, #4cbfc3, #88dde2);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.locTile:hover {
  transform: translateY(-4px); border-color: rgba(76,191,195,.4);
  box-shadow: 0 18px 40px -22px rgba(28,99,102,.5);
}
.locTile:hover::before { transform: scaleX(1); }

.locTileTop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.locTileMark {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: #358f92;
  background: linear-gradient(150deg, rgba(76,191,195,.15), rgba(136,221,226,.1));
  border: 1px solid rgba(76,191,195,.2);
  transition: background .3s, color .3s, border-color .3s;
}
.locTile:hover .locTileMark { background: linear-gradient(150deg, #3cadb1, #5cc7cb); color: #ffffff; border-color: transparent; }
.locTileNum { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #a8c7c9; }
.locTileName {
  font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; letter-spacing: -.015em;
  color: var(--ink); line-height: 1.2; transition: color .2s;
}
.locTile:hover .locTileName { color: #1d696d; }
.locTileTag {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7c989a;
}
.locTileTag i { width: 5px; height: 5px; border-radius: 50%; background: #7dd3d5; flex: none; }
.locTileSub {
  margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: #4d5f5f;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.locTileGo {
  margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: #499ea1;
}
.locTileGo em { font-style: normal; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.locTile:hover .locTileGo em { transform: translateX(4px); }

.locNoResults { margin: 30px 2px 0; font-size: 14.5px; color: #546868; }
.locNoResults a { color: #2b7579; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 980px) { .locGrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .locGrid { grid-template-columns: 1fr; } .locSearch { max-width: none; } }

/* ---------- Editorial FAQ — split panel on the treatment template -------- */
.txFaq { padding-block: clamp(40px, 6vh, 80px); }
.txFaqShell { width: min(1376px, 100% - 64px); margin-inline: auto; }
.txFaqPanel {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #f3f8f8 0%, #eaf3f3 100%);
  border: 1px solid rgba(16,34,35,.07); border-radius: 34px;
  padding: clamp(28px, 4vw, 64px);
}
.txFaqPanel::before { /* dot-grid accent */
  content: ""; position: absolute; top: 26px; right: 30px; width: 84px; height: 58px;
  background-image: radial-gradient(rgba(73,158,161,.45) 1.3px, transparent 1.5px);
  background-size: 14px 14px; opacity: .6; pointer-events: none;
}
.txFaqGrid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 4vw, 76px); align-items: start; }
@media (max-width: 900px) { .txFaqGrid { grid-template-columns: 1fr; } }
.txFaqIntro { position: sticky; top: clamp(96px, 12vh, 132px); }
@media (max-width: 900px) { .txFaqIntro { position: static; } }
.txFaqKicker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #417b7d;
}
.txFaqKicker i { width: 22px; height: 1px; background: currentColor; display: block; }
.txFaqTitle {
  margin: 0; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.022em;
  color: var(--ink); font-weight: 620; text-wrap: balance;
}
.txFaqTitle::after { content: ""; display: block; width: 46px; height: 3px; border-radius: 3px; background: #499ea1; margin-top: 16px; }
.txFaqBlurb { margin: 18px 0 0; color: #4a5a5a; line-height: 1.65; font-size: 15.5px; max-width: 40ch; }
.txFaqCall { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: #1d696d; font-weight: 600; text-decoration: none; }
.txFaqCall:hover { color: #134e52; }

/* Numbered hairline accordion — no boxes, generous type, animated toggle. */
.txFaqList { counter-reset: faq; }
.txFaqList details { border-bottom: 1px solid rgba(16,34,35,.1); }
.txFaqList details:first-of-type { border-top: 1px solid rgba(16,34,35,.1); }
.txFaqList summary {
  list-style: none; cursor: pointer; position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(14px, 2vw, 26px);
  padding: clamp(18px, 2.4vh, 26px) 0;
  color: var(--ink); font-weight: 600; font-size: clamp(15.5px, 1.25vw, 18px); letter-spacing: -.01em;
  transition: color .2s;
}
.txFaqList summary::-webkit-details-marker { display: none; }
.txFaqList summary:hover { color: #1d696d; }
.txFaqList summary .faqNum {
  counter-increment: faq; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #499ea1;
}
.txFaqList summary .faqNum::before { content: "Q." counter(faq, decimal-leading-zero); }
.txFaqList summary .faqToggle {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(16,34,35,.16);
  display: grid; place-items: center; color: #2b7579; background: transparent;
  transition: background .25s, color .25s, transform .3s cubic-bezier(.16,1,.3,1), border-color .25s;
}
.txFaqList summary .faqToggle::before { content: "+"; font-size: 18px; line-height: 1; font-weight: 400; }
.txFaqList details[open] summary { color: #1d696d; }
.txFaqList details[open] summary .faqToggle {
  background: #2b7579; border-color: #2b7579; color: #ffffff; transform: rotate(45deg);
}
.txFaqList .faqBody {
  /* aligns under the question column (past the Q.01 gutter) */
  padding: 0 48px clamp(20px, 2.6vh, 26px) clamp(48px, 4.5vw, 62px);
  color: #4a5a5a; line-height: 1.7; font-size: 15.5px; max-width: 62ch;
}
@media (max-width: 620px) {
  /* Match the card width to the rest of the mobile page (was over-inset), and
     restack each Q&A: the "Q.01" label on its own line ABOVE the question, so
     the question and answer both sit flush-left and line up. */
  .txFaqShell { width: calc(100% - 32px); }
  .txFaqPanel { padding: 24px 20px; border-radius: 24px; }
  .txFaqList summary { grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 4px; }
  .txFaqList summary .faqNum { grid-column: 1 / -1; grid-row: 1; }
  .txFaqList summary > span:not(.faqNum):not(.faqToggle) { grid-column: 1; grid-row: 2; }
  .txFaqList summary .faqToggle { grid-column: 2; grid-row: 2; }
  .txFaqList .faqBody { padding-left: 0; padding-right: 0; }
}

/* ---------- Post bylines (team writers + medical reviewers) -------------- */
.bylineStack { display: flex; margin-bottom: 12px; }
.bylineAvatar {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--paper); box-shadow: 0 6px 16px -8px rgba(5,29,32,.4);
}
.bylineAvatar + .bylineAvatar { margin-left: -12px; }
.bylineAvatar.isInitial {
  display: inline-flex; align-items: center; justify-content: center;
  background: #eaf3f3; color: #2b7579; font-weight: 620; font-size: 18px;
}
.bylineName { color: var(--ink); text-decoration: none; }
.bylineName:hover { color: #1d696d; }
.bylineVerified {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #2b7579;
}
.bylineVerified i { width: 8px; height: 8px; border-radius: 50%; background: #499ea1; box-shadow: 0 0 0 4px rgba(73,158,161,.16); }

.postAuthors {
  margin-top: clamp(30px, 4vh, 44px);
  background: linear-gradient(160deg, #f3f8f8 0%, #eaf3f3 100%);
  border: 1px solid rgba(16,34,35,.07); border-radius: 24px;
  padding: clamp(20px, 2.6vw, 30px);
}
.postAuthorsHead {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #417b7d;
}
.postAuthorsHead i { width: 8px; height: 8px; border-radius: 50%; background: #499ea1; box-shadow: 0 0 0 4px rgba(73,158,161,.16); }
.postAuthorsGrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); }
@media (max-width: 700px) { .postAuthorsGrid { grid-template-columns: 1fr; } }
.postAuthor { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.postAuthorImg {
  width: 62px; height: 62px; border-radius: 18px; object-fit: cover; flex: none;
  box-shadow: 0 12px 26px -14px rgba(5,29,32,.45);
}
.postAuthorImg.isInitial {
  display: inline-flex; align-items: center; justify-content: center;
  background: #ffffff; color: #2b7579; font-weight: 620; font-size: 22px;
}
.postAuthorLabel {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #698385;
}
.postAuthorName { display: block; margin-top: 3px; color: var(--ink); font-weight: 620; font-size: 16px; letter-spacing: -.01em; }
.postAuthorRole { margin: 4px 0 0; color: #4a5a5a; font-size: 13.5px; line-height: 1.5; }

/* ---------- Search form (get_search_form) -------------------------------- */
.tmseSearch {
  display: flex; align-items: center; gap: 8px; max-width: 480px;
  background: #ffffff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 6px 6px 20px; box-shadow: 0 16px 36px -28px rgba(5,29,32,.5);
}
.tmseSearch input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 15px; color: var(--ink);
}
.tmseSearch input::placeholder { color: var(--muted); }
.tmseSearch button {
  border: 0; cursor: pointer; border-radius: 999px; padding: 11px 20px;
  background: #2b7579; color: #ffffff; font: inherit; font-size: 13.5px; font-weight: 600;
  transition: background .2s;
}
.tmseSearch button:hover { background: #1d696d; }

/* ---------- Sidebar ------------------------------------------------------ */
.innerAside { position: sticky; top: 96px; display: grid; gap: 18px; }
@media (max-width: 980px) { .innerAside { position: static; } }
.asideCard {
  border: 1px solid var(--line); border-radius: 22px; background: #ffffff; padding: 24px;
  box-shadow: 0 24px 55px -38px rgba(5,29,32,.55);
}
.asideCard.isDark {
  background: linear-gradient(160deg, #0f3e41 0%, #092a2d 60%, #051d20 100%);
  border-color: rgba(215,247,248,.14); color: #eaf6f6;
}
.asideKicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: #7dd3d5; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.asideCard.isDark h3 { color: #f2fbfb; }
.asideCard h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.01em; font-weight: 560; color: var(--ink); }
.asideCard p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: #cee4e5; }
.asideCard.isDark .asideCall { color: #ffffff; }
.asideCall { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin-bottom: 4px; }
.asideCallLabel { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: #8eb6b8; }
.asideCard .signalCta { width: 100%; justify-content: center; margin-top: 8px; }

.asideFacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.asideFacts li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.asideFacts li:first-child { border-top: 0; }
.asideFacts .k { color: var(--muted); }
.asideFacts .v { color: var(--ink); font-weight: 560; text-align: right; }
.asideFacts .v a { color: #1d696d; }

.asideLinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.asideLinks a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0;
  border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 15px; transition: color .2s;
}
.asideLinks li:first-child a { border-top: 0; }
.asideLinks a:hover { color: #1d696d; }
.asideLinks a span { color: var(--green); transition: transform .2s; }
.asideLinks a:hover span { transform: translateX(3px); }

/* ---------- Meta chips --------------------------------------------------- */
.metaChips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; padding: 0; list-style: none; }
.metaChips li, .chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px;
  background: #eaf3f3; border: 1px solid rgba(73,158,161,.22); color: #2b595b; font-size: 13px; font-weight: 500;
}
.metaChips.onDark li, .chip.onDark {
  background: rgba(219,248,248,.1); border-color: rgba(219,248,248,.2); color: #d5ebe9;
}

/* ---------- Team single (bio) ------------------------------------------- */
.bioGrid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(30px, 4vw, 64px); align-items: start; }
.bioPhotoWrap { position: sticky; top: 96px; }
@media (max-width: 900px) { .bioGrid { grid-template-columns: 1fr; } .bioPhotoWrap { position: static; } }
.bioPhoto {
  aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: #dcebeb center/cover no-repeat;
  border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(5,29,32,.6);
}
.bioPhoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bioPhotoCard { margin-top: 16px; border: 1px solid var(--line); border-radius: 18px; background: #ffffff; padding: 18px; }
.bioRole { color: #2b7579; font-weight: 600; font-size: 15px; margin: 0 0 14px; }
.bioFacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bioFacts li { font-size: 14px; color: #455555; }
.bioFacts strong { display: block; color: var(--ink); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 2px; font-weight: 700; }

/* ---------- Location single --------------------------------------------- */
.locServices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 560px) { .locServices { grid-template-columns: 1fr; } }
.locServices li {
  position: relative; padding: 15px 16px 15px 46px; border: 1px solid var(--line); border-radius: 14px;
  background: #ffffff; color: #334343; font-weight: 500; font-size: 15px;
}
.locServices li::before {
  content: ""; position: absolute; left: 16px; top: 17px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ---------- Archive intro + listings ------------------------------------ */
.archiveIntro { max-width: 62ch; }
.archiveIntro p { color: #455555; font-size: 17px; line-height: 1.65; margin: 0; }

/* Blog / post card grid */
.listGrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(18px, 2.4vw, 28px); }
@media (max-width: 900px) { .listGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .listGrid { grid-template-columns: 1fr; } }
.postCard {
  display: flex; flex-direction: column; background: #ffffff; border: 1px solid var(--line);
  border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: 0 20px 45px -32px rgba(5,29,32,.5); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.postCard:hover { transform: translateY(-4px); box-shadow: 0 34px 64px -34px rgba(5,29,32,.55); }
.postCardMedia { aspect-ratio: 16/10; background: #dcebeb center/cover no-repeat; }
.postCardBody { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.postCardTitle { font-size: 19px; letter-spacing: -.01em; color: var(--ink); font-weight: 560; line-height: 1.3; }
.postCard:hover .postCardTitle { color: #1d696d; }

/* ---------- Blog single -------------------------------------------------- */
.postFeature { border-radius: 24px; overflow: hidden; margin-bottom: clamp(26px, 3.4vw, 44px); border: 1px solid var(--line); }
.postFeature img { width: 100%; display: block; }
.postMeta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 26px; color: var(--muted); font-size: 14px; }
.postMeta .dot { width: 4px; height: 4px; border-radius: 50%; background: #b9c7c7; }
.postTags { margin-top: clamp(36px, 4vw, 56px); padding-top: 26px; border-top: 1px solid var(--line); }

/* ---------- Pagination --------------------------------------------------- */
.innerPager { margin-top: clamp(40px, 5vw, 68px); }
.innerPager .nav-links, .innerPager .page-numbers { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.innerPager .page-numbers {
  min-width: 42px; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line);
  background: #ffffff; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 560; transition: all .2s;
}
.innerPager a.page-numbers:hover { border-color: var(--green); color: #1d696d; }
.innerPager .page-numbers.current { background: var(--forest-deep); color: #ffffff; border-color: var(--forest-deep); }
.innerPager .page-numbers.dots { border: 0; background: transparent; }

/* ---------- Closing CTA band -------------------------------------------- */
.innerCta {
  background:
    radial-gradient(110% 130% at 15% 10%, #134144 0%, rgba(19,65,68,0) 55%),
    linear-gradient(150deg, #0a2e31 0%, #072629 50%, #051d20 100%);
  color: #eaf6f6; padding: clamp(52px, 6vw, 88px) 0;
}
.innerCtaInner { display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
@media (max-width: 820px) { .innerCtaInner { grid-template-columns: 1fr; } }
.innerCtaKicker {
  display: inline-flex; align-items: center; gap: 9px; color: #7dd3d5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 16px;
}
.innerCtaKicker i { width: 7px; height: 7px; border-radius: 50%; background: #7dd3d5; box-shadow: 0 0 0 4px rgba(125,211,213,.2); }
.innerCta h2 { margin: 0 0 14px; color: #f4fafa; letter-spacing: -.02em; line-height: 1.08; font-weight: 560; font-size: clamp(28px, 3.4vw, 46px); }
.innerCta p { margin: 0; color: #bbd6d7; line-height: 1.6; max-width: 52ch; font-size: 16px; }
/* Tidy, right-aligned action stack — the button and the call card share one
   width so their edges line up, and the block hugs the section's right edge
   instead of floating at the left of a wide column (that mid-band gap). */
.innerCtaActions { display: flex; flex-direction: column; gap: 16px; align-items: stretch; width: min(340px, 100%); margin-left: auto; }
.innerCtaActions .signalCta { width: 100%; min-width: 0; margin-top: 0; }
@media (max-width: 820px) { .innerCtaActions { width: 100%; margin-left: 0; } }
.innerCtaCall {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: #eaf6f6;
  padding: 14px 20px; border: 1px solid rgba(215,247,248,.18); border-radius: 14px; background: rgba(215,247,248,.05);
}
.innerCtaCall span { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: #8eb6b8; }
.innerCtaCall strong { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.innerCtaCall:hover { border-color: rgba(215,247,248,.34); }

/* ---------- Empty states (404 / no results) ----------------------------- */
.innerEmpty { text-align: center; max-width: 60ch; margin-inline: auto; }
.innerEmpty p { color: #455555; font-size: 17px; line-height: 1.65; margin: 0 0 26px; }
.innerEmptyActions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Search form -------------------------------------------------- */
.innerSearch { display: flex; gap: 10px; max-width: 520px; margin: 24px auto 0; }
.innerSearch input[type="search"] {
  flex: 1; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line); background: #ffffff;
  font-size: 16px; color: var(--ink);
}
.innerSearch input[type="search"]:focus { outline: 2px solid var(--green); outline-offset: 1px; }

/* ---------- Hero chips + actions ---------------------------------------- */
.innerHeroChips { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0 0; padding: 0; list-style: none; }
.innerHeroChips li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px;
  background: rgba(219,248,248,.09); border: 1px solid rgba(219,248,248,.2); color: #dcefef; font-size: 13.5px; font-weight: 500;
}
.innerHeroChips li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7dd3d5; box-shadow: 0 0 0 3px rgba(125,211,213,.2); }
.innerHeroActions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.innerHeroGhost {
  display: inline-flex; align-items: center; gap: 12px; padding: 11px 20px; border-radius: 14px;
  border: 1px solid rgba(219,248,248,.28); color: #eaf6f6; text-decoration: none; font-weight: 560; transition: border-color .2s, background .2s;
}
.innerHeroGhost:hover { border-color: rgba(219,248,248,.5); background: rgba(219,248,248,.06); }

/* ---------- Treatment split (sticky image + content) -------------------- */
.txSplit { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.6fr); gap: clamp(28px,4vw,64px); align-items: start; }
@media (max-width: 900px) { .txSplit { grid-template-columns: 1fr; } }
.txSplitMedia { position: sticky; top: 96px; }
@media (max-width: 900px) { .txSplitMedia { position: static; } }
.txStickyMedia {
  aspect-ratio: 3/4; border-radius: 24px; background: #dcebeb center/cover no-repeat;
  border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(5,29,32,.6);
}
.innerWrap.isTight { padding-top: 0; }

/* ---------- Treatment cards (other_links + points) ---------------------- */
.txCards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(18px,2.4vw,28px); margin-top: 16px; }
@media (max-width: 860px) { .txCards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .txCards { grid-template-columns: 1fr; } }

/* Editorial cards — echo the chapter language: one organic swept corner, a
   teal index, a small underline, dot-grid accent, target-dot bullets. */
.txCard {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(165deg, #ffffff 0%, #f6fafa 70%, #eff6f6 100%);
  border: 1px solid rgba(16,34,35,.08); border-radius: 22px 58px 22px 22px;
  padding: clamp(24px,2.6vw,34px);
  box-shadow: 0 30px 60px -42px rgba(5,29,32,.45);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.txCardWrap:nth-child(even) .txCard { border-radius: 58px 22px 22px 22px; }
.txCard:hover { transform: translateY(-4px); box-shadow: 0 42px 74px -44px rgba(5,29,32,.55); }
.txCard::before { /* faint dot-grid, tucked in the swept corner */
  content: ""; position: absolute; top: 16px; right: 18px; width: 58px; height: 44px;
  background-image: radial-gradient(rgba(73,158,161,.45) 1.3px, transparent 1.5px);
  background-size: 13px 13px; opacity: .6; pointer-events: none;
}
.txCardWrap:nth-child(even) .txCard::before { right: auto; left: 18px; }
.txCardNum {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; color: #499ea1; margin-bottom: 12px;
}
.txCardTitle { margin: 0; font-size: clamp(18px,1.9vw,21px); letter-spacing: -.014em; color: var(--ink); font-weight: 620; }
.txCardTitle::after {
  content: ""; display: block; width: 34px; height: 3px; border-radius: 3px;
  background: #499ea1; margin: 13px 0 6px;
}
.txCard .signalTextLink { align-self: flex-start; margin-top: 18px; }
.pointList.isBare { margin-top: 10px; gap: 0; }
.pointList.isBare li {
  border: 0; background: transparent; box-shadow: none; border-radius: 0;
  padding: 11px 0 11px 30px; font-size: 15px;
}
.pointList.isBare li + li { border-top: 1px solid rgba(16,34,35,.07); }
.pointList.isBare li::before {
  left: 2px; top: 16px; width: 11px; height: 11px; background-image: none;
  background-color: #499ea1; box-shadow: 0 0 0 4px rgba(73,158,161,.16);
}

/* ---------- Long content split into alternating image+text sections ------ */
/* ---------- Treatment chapters — GSAP + Lenis sticky reveal ---------------
   Clean, light editorial chapters (matches the reference): organic-cornered
   photo on one side, a big teal chapter number + heading + prose on the other,
   sides alternating. Smooth scroll (Lenis) + per-chapter entrance choreography
   and a gentle media parallax live in refsite/anim.js — CSS here is the resting
   look, fully visible with no JS / reduced motion. */
.txSnap { position: relative; background: var(--paper); }

/* Editorial opening statement built from the lead paragraph(s). */
.txOpen { background: var(--paper); padding: clamp(46px, 8vh, 96px) 0 clamp(8px, 2vh, 24px); }
.txOpenInner { max-width: 900px; }
.txOpenProse { color: #2b393a; }
.txOpenProse p:first-child {
  font-size: clamp(22px, 2.7vw, 34px); line-height: 1.34; letter-spacing: -.015em;
  color: var(--ink); font-weight: 500; margin-bottom: .8em;
}
.txOpenProse p:first-child::first-letter {
  font-size: 3.1em; line-height: .82; float: left; margin: .04em .12em 0 0;
  color: #2b7579; font-weight: 600;
}

/* Flowing chapters — long content just makes the section taller and scrolls,
   never clipped. The photo is position:sticky, so it holds in place while the
   copy scrolls past it (real "sticky scroll", per section). */
.txChapter {
  position: relative;
  padding-block: clamp(56px, 10vh, 132px);
}
/* Faint dot-grid corner accent (like the reference), opposite the photo side.
   Positioned against the contained column, not the full-width viewport. */
.txChapter::before {
  content: ""; position: absolute; z-index: 0; top: clamp(20px, 4vh, 52px);
  right: max(calc((100% - min(1376px, 100% - 64px)) / 2), 24px);
  width: 78px; height: 108px; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(73,158,161,.55) 1.4px, transparent 1.6px);
  background-size: 15px 15px;
}
.txChapter.isReverse::before { right: auto; left: max(calc((100% - min(1376px, 100% - 64px)) / 2), 24px); }

/* Contained column — the sections no longer run the full page width. */
.txChapterGrid {
  position: relative; z-index: 1;
  /* Same width formula as the header shell, so chapters align with the nav. */
  width: min(1376px, 100% - 64px); margin-inline: auto;
  display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(30px, 4vw, 84px);
  align-items: start;
}
.txChapter.isReverse .txChapterGrid { grid-template-columns: .88fr 1.12fr; }
.txChapter.isReverse .txChapterMedia { order: 2; }
.txChapter.isTextOnly .txChapterGrid { grid-template-columns: minmax(0, 760px); justify-content: center; }

/* Horizontal photo with rounded corners + one diagonal cut facing the copy.
   Shape = an SVG clip-path (rounded corners AND a clean diagonal — a polygon
   can't round). The soft shadow is a drop-shadow on the wrapper so it follows
   the clipped shape (a box-shadow would be clipped away). The wrapper is
   position:sticky so the image holds while the copy scrolls past it. */
.txChapterMedia {
  position: sticky; top: clamp(96px, 12vh, 132px); margin: 0;
  filter: drop-shadow(0 30px 48px rgba(5,29,32,.24));
}
.txChapterFrame { display: none; }
.txChapterPhoto { position: relative; display: block; clip-path: url(#txcutR); }
.txChapter.isReverse .txChapterPhoto { clip-path: url(#txcutL); }
.txChapterPhoto img { width: 100%; display: block; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 32%; }

.txChapterBody { position: relative; z-index: 1; max-width: 540px; }
/* Big visible teal chapter number (reference-style). */
.txChapterIndex {
  display: block; font-size: clamp(34px, 3.6vw, 54px); line-height: 1; font-weight: 600;
  letter-spacing: -.03em; color: #499ea1; margin: 0 0 10px;
}
.txChapterMarker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #698385;
}
.txChapterMarker i { width: 22px; height: 1px; background: currentColor; display: block; }
.txChapterTitle {
  font-size: clamp(23px, 2.4vw, 34px); line-height: 1.14; letter-spacing: -.022em;
  color: var(--ink); font-weight: 620; margin: 0 0 18px; text-wrap: balance;
}
.txChapterTitle::after {
  content: ""; display: block; width: 46px; height: 3px; border-radius: 3px;
  background: #499ea1; margin-top: 15px;
}
.txChapterProse { font-size: clamp(15px, 1.05vw, 16.5px); color: #4a5a5a; }
/* Target-style teal bullets to match the reference list. */
.txChapterProse ul { margin-top: 1.1em; }
.txChapterProse ul li { padding-left: 30px; }
.txChapterProse ul li::before {
  content: ""; position: absolute; left: 0; top: .46em; width: 12px; height: 12px; border-radius: 50%;
  background: #499ea1; box-shadow: 0 0 0 4px rgba(73,158,161,.18); border: 0;
}
.txChapterProse ul li strong { color: var(--ink); }

/* Fixed chapter progress rail. Hidden on touch/compact + no-motion. */
.txRail {
  position: fixed; z-index: 60; top: 50%; right: clamp(14px, 1.8vw, 28px); transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 15px; align-items: flex-end;
}
.txRailDot {
  position: relative; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(23,64,67,.22); transition: transform .3s cubic-bezier(.16,1,.3,1), background .3s;
}
.txRailDot:hover { background: rgba(23,64,67,.5); }
.txRailDot.isActive { background: var(--green); transform: scale(1.7); }
.txRailLabel {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%) translateX(6px);
  white-space: nowrap; font-size: 11px; letter-spacing: .02em; color: #2c393a;
  background: rgba(251,250,246,.96); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; box-shadow: 0 10px 26px -16px rgba(5,29,32,.4);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
/* Labels appear on hover only — the always-on active label overlapped photos. */
.txRailDot:hover .txRailLabel { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (max-width: 960px) {
  .txRail { display: none; }
  .txChapterGrid, .txChapter.isReverse .txChapterGrid { grid-template-columns: 1fr; gap: clamp(24px, 6vw, 40px); }
  /* Stacked: the photo must NOT stay sticky, or it holds at the top while the
     copy scrolls up over it (image + text overlap). Return it to normal flow. */
  .txChapterMedia { position: static; top: auto; }
  .txChapter.isReverse .txChapterMedia { order: 0; }
  .txChapter { min-height: 0; padding-block: clamp(44px, 10vw, 72px); }
  .txChapterPhoto img { aspect-ratio: 16 / 11; object-position: center 30%; }
}

/* ---------- Support / helpline band ------------------------------------- */
.txSupport {
  background:
    radial-gradient(100% 130% at 85% 0%, #154e52 0%, rgba(21,78,82,0) 55%),
    linear-gradient(150deg, #0a2e31 0%, #072629 55%, #051d20 100%);
  color: #eaf6f6; padding: clamp(48px,6vw,84px) 0;
}
.txSupportInner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(24px,4vw,52px); }
.txSupportCopy { max-width: 56ch; }
.txSupport h2 { margin: 0 0 12px; color: #f4fafa; letter-spacing: -.02em; line-height: 1.08; font-weight: 560; font-size: clamp(27px,3.2vw,42px); }
.txSupport p { margin: 0; color: #bbd6d7; line-height: 1.6; font-size: 16px; }
.txSupportCall {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: #eaf6f6; flex: none;
  padding: 18px 26px; border: 1px solid rgba(215,247,248,.2); border-radius: 18px; background: rgba(215,247,248,.05); transition: border-color .2s, transform .2s;
}
.txSupportCall:hover { border-color: rgba(215,247,248,.4); transform: translateY(-2px); }
.txSupportCallK { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: #8eb6b8; }
.txSupportCallV { font-size: clamp(26px,3vw,34px); font-weight: 600; letter-spacing: -.02em; }

/* ---------- Team hero (portrait + copy) --------------------------------- */
.teamHeroGrid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(28px,4vw,60px); align-items: center; }
/* Desktop: the breadcrumb lives inside the copy column; the duplicate top row
   is hidden (so the grid stays two columns). */
.teamCrumbsTop { display: none; }
@media (max-width: 860px) {
  /* Stacked: breadcrumb on top → portrait → copy, with even spacing. */
  .teamHeroGrid { grid-template-columns: 1fr; gap: 22px; }
  .teamHeroGrid .teamCrumbsTop { display: flex; order: -1; margin-bottom: 0; }
  .teamHeroGrid .teamCrumbsInline { display: none; }
}
.teamPortrait {
  aspect-ratio: 4/5; max-width: 340px; border-radius: 26px; overflow: hidden;
  background: linear-gradient(160deg,#113e41,#092a2d); border: 1px solid rgba(215,247,248,.16);
  box-shadow: 0 40px 80px -44px rgba(0,0,0,.7);
}
@media (max-width: 860px) { .teamPortrait { max-width: 260px; } }
.teamPortrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.teamHeroCreds { color: #7dd3d5; font-weight: 600; font-size: .48em; letter-spacing: 0; vertical-align: middle; }

/* ---------- Location feature bands -------------------------------------- */
.locFeature { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px,4vw,60px); align-items: center; }
.locFeature.isLeft { grid-template-columns: .9fr 1.1fr; }
.locFeature.isLeft .locFeatureCopy { order: 2; }
.locFeature.isLeft .locFeatureImg { order: 1; }
@media (max-width: 820px) { .locFeature, .locFeature.isLeft { grid-template-columns: 1fr; } .locFeature.isLeft .locFeatureCopy, .locFeature.isLeft .locFeatureImg { order: 0; } }
.locFeatureTitle { margin: 12px 0 12px; color: var(--ink); letter-spacing: -.02em; line-height: 1.12; font-weight: 560; font-size: clamp(26px,3.2vw,42px); }
.locFeatureImg { border-radius: 24px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(5,29,32,.55); }
.locFeatureImg img { width: 100%; display: block; }

.locBand {
  position: relative; overflow: hidden; border-radius: 30px; text-align: center;
  padding: clamp(40px,5vw,72px) clamp(24px,5vw,72px); color: #eaf6f6;
  background:
    radial-gradient(110% 130% at 20% 0%, #154e52 0%, rgba(21,78,82,0) 55%),
    linear-gradient(150deg, #0f3e41 0%, #0a2e31 55%, #051d20 100%);
  border: 1px solid rgba(215,247,248,.14);
}
.locBand h2 { margin: 0 0 12px; color: #f4fafa; letter-spacing: -.02em; line-height: 1.1; font-weight: 560; font-size: clamp(26px,3.2vw,42px); }
.locBandBody { max-width: 60ch; margin: 0 auto; color: #bbd6d7; line-height: 1.6; }
.locBandBody p { margin: 0 0 .8em; }

/* ---------- Sources list ------------------------------------------------ */
.sourceList { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sourceList li { border-top: 1px solid var(--line); padding-top: 10px; }
.sourceList li:first-child { border-top: 0; padding-top: 0; }
.sourceList a { color: #1d696d; font-size: 14px; word-break: break-all; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Scroll choreography ----------------------------------------- */
/* Reveal-on-scroll: JS adds .is-revealed as each block enters the viewport.
   Content is fully visible if JS/animations are off. */
.tmse-reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .72s cubic-bezier(.16,1,.3,1), transform .72s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--rvd, 0ms); will-change: opacity, transform;
}
.tmse-reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tmse-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Subtle scroll-driven parallax on the hero glow (progressive enhancement —
   only where native scroll timelines are supported; ignored elsewhere). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .innerHeroGlow {
      animation: tmseHeroGlow linear both;
      animation-timeline: scroll(root);
      animation-range: 0 70vh;
    }
  }
}
@keyframes tmseHeroGlow { to { transform: translateY(120px) scale(1.12); opacity: .35; } }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 980px) {
  .innerLayout { grid-template-columns: 1fr; }
  .innerLayout .innerAside { grid-row: auto; }
}
/* Mobile light header: no floating pill — a translucent paper bar keeps the
   dark-ink chrome readable over any content once scrolled. Selector matches
   the desktop pill rule above so it wins at this width. */
@media (max-width: 900px) {
  .adaptiveHeader.innerHeader.isScrolled {
    background: rgba(251,250,246,.92);
    -webkit-backdrop-filter: blur(18px) saturate(1.05);
    backdrop-filter: blur(18px) saturate(1.05);
    box-shadow: 0 16px 34px -26px rgba(5,29,32,.35);
  }
  .adaptiveHeader.innerHeader.isScrolled .adaptiveNavCore.adaptiveNavSplit {
    background: transparent; border: 0; box-shadow: none;
    min-height: 0; padding: 0; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (max-width: 600px) {
  .shell { width: auto !important; max-width: 100% !important; padding-inline: 20px; margin-inline: 0; }
  .innerProse { font-size: 16px; }
}


/* ===== fx.css ===== */
/* =========================================================================
   3D scroll FX — cinematic treatment experience.
   Native CSS scroll-driven animations (animation-timeline: view/scroll) give
   real, jank-free 3D depth on modern browsers (Edge/Chrome/Opera). Everything
   is progressive enhancement: gated behind @supports + prefers-reduced-motion,
   so unsupported browsers and reduced-motion users see the full content,
   perfectly legible, with no animation. Scoped to [data-fx-stage] so only the
   opted-in treatment template runs the show.
   ========================================================================= */

/* ---- Base (all browsers): structural, no motion dependency -------------- */
[data-fx="deck"] { perspective: 1500px; }
.txCardWrap { display: flex; }
.txCardWrap > .txCard { flex: 1; width: 100%; }

[data-tilt] {
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s;
  will-change: transform;
}
[data-tilt]:hover { box-shadow: 0 40px 80px -40px rgba(5,29,32,.55); }
.txMediaTilt { transform-style: preserve-3d; will-change: transform; }

/* Horizontal scroll-snap carousel (works everywhere; wheel→x via JS). */
.fxCarousel {
  display: flex; gap: clamp(16px, 2vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 4px 22px; margin: 8px -4px 0; perspective: 1600px;
  scrollbar-width: thin; scrollbar-color: rgba(16,34,35,.28) transparent; -webkit-overflow-scrolling: touch;
}
.fxCarousel::-webkit-scrollbar { height: 8px; }
.fxCarousel::-webkit-scrollbar-thumb { background: rgba(16,34,35,.22); border-radius: 20px; }
.fxCarousel::-webkit-scrollbar-track { background: transparent; }
.fxCarousel > * { scroll-snap-align: center; flex: 0 0 clamp(270px, 42vw, 380px); }
.fxCarousel.isDragging { cursor: grabbing; scroll-snap-type: none; }
.fxHint { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--muted); font-size: 12.5px; letter-spacing: .04em; }

/* ---- Native scroll-driven 3D (modern browsers only) --------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Prose + section blocks rise with a hint of 3D tilt. */
    [data-fx-stage] .txOpenProse > *,
    [data-fx-stage] .innerBlockLabel,
    [data-fx-stage] .sectionHead,
    [data-fx-stage] .txSupportCopy,
    [data-fx-stage] .txSupportCall,
    [data-fx-stage] .pfIntro > *,
    [data-fx-stage] .pfCard,
    [data-fx-stage] .asideCard,
    [data-fx-stage] .innerFaq details,
    [data-fx-stage] .locFeature,
    [data-fx-stage] .locBand,
    [data-fx-stage] .metaChips {
      animation: fxRise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }

    /* Chapter reveal is driven by GSAP + Lenis (refsite/anim.js), not native
       scroll-timeline — so the chapter rules live there, not here. */

    /* 3D card cascade — each card flips up from depth, staggered. */
    [data-fx="deck"] > * {
      animation: fxCard linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 44%;
      transform-origin: 50% 130%;
    }
    [data-fx="deck"] > *:nth-child(2) { animation-range: entry 6% cover 48%; }
    [data-fx="deck"] > *:nth-child(3) { animation-range: entry 11% cover 52%; }
    [data-fx="deck"] > *:nth-child(4) { animation-range: entry 15% cover 55%; }

    /* Carousel cards pop toward the viewer as they enter. */
    .fxCarousel > * {
      animation: fxPop linear both;
      animation-timeline: view(inline);
      animation-range: entry 0% cover 55%;
    }

    /* Hero: content lifts + fades on exit; background pushes deeper (parallax). */
    [data-fx-hero] .innerHeroInner {
      animation: fxHeroLift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 92%;
    }
    [data-fx-hero] .innerHeroBg {
      animation: fxHeroZoom linear both;
      animation-timeline: view();
      animation-range: entry 100% exit 100%;
    }
  }
}

@keyframes fxRise  { from { opacity: 0; transform: translateY(46px) rotateX(7deg); } to { opacity: 1; transform: none; } }
@keyframes fxCard  { from { opacity: 0; transform: translateY(84px) translateZ(-140px) rotateX(19deg); } to { opacity: 1; transform: none; } }
@keyframes fxPop     { from { opacity: .25; transform: translateY(40px) scale(.93) rotateY(7deg); } to { opacity: 1; transform: none; } }
@keyframes fxHeroLift{ to { transform: translateY(-42px); opacity: .32; } }
@keyframes fxHeroZoom{ from { transform: scale(1.12); } to { transform: scale(1.26) translateY(34px); } }


/* ===== about.css ===== */
/* =========================================================================
   About page (template-about.php) — art-directed editorial page on the
   reference tokens. Statement hero with floating photo collage, count-up
   stats, sticky mission split with pull-quote, scroll-progress timeline,
   values marquee, tilt principle cards, team carousel.
   All motion is progressive enhancement: gated behind @supports /
   prefers-reduced-motion; content is fully visible without JS.
   ========================================================================= */

/* ---------- Hero: statement + floating collage ---------------------------- */
.aboutHero .heroPanelInner { min-height: clamp(540px, 78vh, 760px); }
.aboutHero .heroPanelContent { max-width: none; width: 100%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 900px) { .aboutHero .heroPanelContent { grid-template-columns: 1fr; } }

.aboutHeroTitle {
  margin: 0; color: #f4fafa; font-weight: 560;
  font-size: clamp(34px, 4.6vw, 66px); line-height: 1.06; letter-spacing: -.02em;
  max-width: 16ch;
}
.aboutHeroTitle .w { display: inline-block; }
.aboutHeroSub { margin: 22px 0 0; color: #bbd6d7; max-width: 46ch; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.62; }

/* Word-by-word entrance (load animation, not scroll). */
@media (prefers-reduced-motion: no-preference) {
  .aboutHeroTitle .w { opacity: 0; transform: translateY(26px) rotate(1.5deg); animation: aboutWord .7s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: calc(.12s + var(--wi, 0) * 70ms); }
  .aboutHero .innerHeroKicker, .aboutHeroSub, .aboutHero .innerHeroActions { opacity: 0; animation: aboutFade .8s ease forwards; }
  .aboutHero .innerHeroKicker { animation-delay: .05s; }
  .aboutHeroSub { animation-delay: .55s; }
  .aboutHero .innerHeroActions { animation-delay: .7s; }
}
@keyframes aboutWord { to { opacity: 1; transform: none; } }
@keyframes aboutFade { to { opacity: 1; } }

/* Floating collage — three offset photos, slow drift, parallax on scroll. */
.aboutCollage { position: relative; aspect-ratio: 1 / 1.02; min-height: 320px; }
/* On mobile the hero stacks to one column — show the photo collage ABOVE the
   text (order:-1 pulls this grid item to the top of the stack). */
@media (max-width: 900px) { .aboutCollage { order: -1; max-width: 420px; margin: 0 auto 26px; } }
.aboutCollage figure {
  position: absolute; margin: 0; overflow: hidden; border-radius: 18px;
  border: 1px solid rgba(219,248,248,.16);
  box-shadow: 0 40px 80px -40px rgba(2,13,14,.8);
}
.aboutCollage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aboutCollage figure:nth-child(1) { width: 58%; aspect-ratio: 4 / 5; left: 0; top: 6%; z-index: 2; }
.aboutCollage figure:nth-child(2) { width: 46%; aspect-ratio: 1 / 1; right: 0; top: 0; }
.aboutCollage figure:nth-child(3) { width: 52%; aspect-ratio: 5 / 4; right: 6%; bottom: 0; z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  .aboutCollage figure { animation: aboutFloat 7s ease-in-out infinite; }
  .aboutCollage figure:nth-child(2) { animation-duration: 9s; animation-delay: 1.2s; }
  .aboutCollage figure:nth-child(3) { animation-duration: 8s; animation-delay: .6s; }
}
@keyframes aboutFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- Stats band ----------------------------------------------------- */
.aboutStats { background: var(--forest-deep); color: #eaf6f6; padding: clamp(18px, 2.6vw, 34px) 0; border-top: 1px solid rgba(219,248,248,.08); }
.aboutStatsGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 28px); }
@media (max-width: 820px) { .aboutStatsGrid { grid-template-columns: repeat(2, 1fr); } }
.aboutStat { padding: clamp(10px, 1.6vw, 18px) 0; border-left: 1px solid rgba(219,248,248,.14); padding-left: clamp(14px, 2vw, 26px); }
.aboutStat:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 820px) { .aboutStat:nth-child(3) { border-left: 0; padding-left: 0; } }
.aboutStatNum { display: block; font-size: clamp(30px, 3.4vw, 50px); font-weight: 600; letter-spacing: -.02em; color: #f4fafa; line-height: 1.05; font-variant-numeric: tabular-nums; }
.aboutStatNum sup { font-size: .5em; color: #7dd3d5; font-weight: 600; }
.aboutStatLabel { display: block; margin-top: 7px; color: #9cb7b9; font-size: 13px; line-height: 1.45; max-width: 22ch; }

/* ---------- Mission split: sticky photo + prose + pull-quote --------------- */
.aboutMission { background: var(--paper); padding: clamp(64px, 8vw, 120px) 0; }
.aboutMissionGrid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
@media (max-width: 900px) { .aboutMissionGrid { grid-template-columns: 1fr; } }
.aboutMissionMedia { position: sticky; top: 110px; }
@media (max-width: 900px) { .aboutMissionMedia { position: static; } }
.aboutMissionPhoto {
  overflow: hidden; border-radius: 24px; border: 1px solid var(--line);
  box-shadow: 0 40px 80px -48px rgba(5,29,32,.55); aspect-ratio: 4 / 5;
}
.aboutMissionPhoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aboutMissionCaption {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.aboutMissionCaption i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(73,158,161,.18); }
.aboutKicker {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #417b7d;
}
.aboutH2 { margin: 0 0 22px; color: var(--ink); font-weight: 560; letter-spacing: -.02em; line-height: 1.1; font-size: clamp(26px, 3vw, 42px); max-width: 20ch; }
.aboutPullQuote {
  margin: clamp(28px, 3.5vw, 44px) 0; padding: 6px 0 6px 26px; border-left: 3px solid var(--green);
  color: var(--ink); font-size: clamp(19px, 1.9vw, 25px); line-height: 1.45; font-weight: 540; letter-spacing: -.01em; max-width: 30ch;
}
.aboutPullQuote small { display: block; margin-top: 12px; color: var(--muted); font-size: 13.5px; font-weight: 500; letter-spacing: 0; }

/* Real page content typeset as an editorial essay so it can never fight the
   display H2 above it: the content's own FIRST heading (any level) reads as a
   magazine standfirst — a larger, lighter lede line — and every later h1/h2
   becomes a quiet numbered crosshead over a hairline (same mono-index language
   as the timeline and principle cards). Deeper headings become bold lead-ins. */
.aboutMissionCopy .innerProse { counter-reset: aboutXhead; }
.aboutMissionCopy .innerProse h1,
.aboutMissionCopy .innerProse h2 {
  counter-increment: aboutXhead;
  margin: clamp(30px, 3.5vw, 46px) 0 12px; padding-top: 20px;
  border-top: 1px solid rgba(16,34,35,.1);
  color: var(--ink); font-weight: 600; font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.3; letter-spacing: -.012em; max-width: 36ch; text-wrap: balance;
}
.aboutMissionCopy .innerProse h1::before,
.aboutMissionCopy .innerProse h2::before {
  content: counter(aboutXhead, decimal-leading-zero);
  display: block; margin-bottom: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; color: #2b7579;
}
.aboutMissionCopy .innerProse > h1:first-child,
.aboutMissionCopy .innerProse > h2:first-child,
.aboutMissionCopy .innerProse > h3:first-child {
  counter-increment: none;
  margin: 0 0 20px; padding-top: 0; border-top: 0;
  color: #3c4f4f; font-weight: 500; font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5; letter-spacing: -.008em; max-width: 46ch; text-wrap: pretty;
}
.aboutMissionCopy .innerProse > h1:first-child::before,
.aboutMissionCopy .innerProse > h2:first-child::before { content: none; }
.aboutMissionCopy .innerProse h3:not(:first-child),
.aboutMissionCopy .innerProse h4 {
  margin: 26px 0 10px; color: var(--ink); font-weight: 600; font-size: 17px; letter-spacing: -.008em;
}
.aboutMissionCopy .innerProse p { max-width: 58ch; }

/* ---------- Timeline: the science, over time ------------------------------- */
.aboutTimeline { background: var(--ivory); border-block: 1px solid rgba(16,34,35,.07); padding: clamp(64px, 8vw, 110px) 0; }
.aboutTimelineList { position: relative; margin: clamp(30px, 4vw, 48px) 0 0; padding: 0; list-style: none; max-width: 760px; }
.aboutTimelineList::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px;
  background: rgba(16,34,35,.12); border-radius: 2px;
}
/* Scroll-driven progress line on modern browsers. */
.aboutTimelineList::after {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px;
  background: var(--green); border-radius: 2px; transform-origin: top center;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .aboutTimelineList::after { animation: aboutLine linear both; animation-timeline: view(); animation-range: entry 20% exit 60%; }
  }
}
@keyframes aboutLine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.aboutTimelineList li { position: relative; padding: 0 0 clamp(30px, 4vw, 44px) 46px; }
.aboutTimelineList li:last-child { padding-bottom: 0; }
.aboutTimelineList li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ivory); border: 2px solid var(--green); box-shadow: 0 0 0 4px rgba(73,158,161,.14); z-index: 1;
}
.aboutTimelineYear {
  display: inline-block; margin-bottom: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; color: #2b7579;
}
.aboutTimelineList h3 { margin: 0 0 6px; color: var(--ink); font-size: clamp(17px, 1.5vw, 20px); font-weight: 560; letter-spacing: -.01em; }
.aboutTimelineList p { margin: 0; color: #455555; font-size: 15px; line-height: 1.65; max-width: 58ch; }

/* ---------- Values marquee -------------------------------------------------- */
.aboutMarquee { background: var(--forest-deep); overflow: hidden; padding: 18px 0; border-block: 1px solid rgba(219,248,248,.08); }
.aboutMarqueeTrack { display: flex; gap: 0; width: max-content; }
@media (prefers-reduced-motion: no-preference) { .aboutMarqueeTrack { animation: aboutMarquee 30s linear infinite; } }
@media (prefers-reduced-motion: reduce) { .aboutMarquee { display: none; } }
@keyframes aboutMarquee { to { transform: translateX(-50%); } }
.aboutMarqueeTrack span {
  display: inline-flex; align-items: center; gap: 26px; padding-right: 26px; white-space: nowrap;
  color: #cee7e8; font-size: 15px; font-weight: 540; letter-spacing: .01em;
}
.aboutMarqueeTrack span::after { content: "✦"; color: #499ea1; font-size: 11px; }

/* ---------- Principle cards (pointer tilt via refsite.js data-tilt) -------- */
.aboutPrinciples { background: var(--paper); padding: clamp(64px, 8vw, 110px) 0; }
.aboutPrinciplesGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 26px); margin-top: clamp(28px, 3.5vw, 44px); }
@media (max-width: 900px) { .aboutPrinciplesGrid { grid-template-columns: 1fr; max-width: 560px; } }
.aboutPrinciple {
  position: relative; overflow: hidden; border-radius: 22px; padding: clamp(24px, 2.6vw, 34px);
  background: #ffffff; border: 1px solid var(--line); box-shadow: 0 24px 50px -36px rgba(5,29,32,.45);
}
.aboutPrinciple::after {
  content: ""; position: absolute; right: -70px; top: -70px; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(121,211,213,.22), rgba(121,211,213,0) 68%);
}
.aboutPrincipleNum {
  display: inline-block; margin-bottom: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; color: #2b7579;
}
.aboutPrinciple h3 { margin: 0 0 10px; color: var(--ink); font-size: clamp(18px, 1.7vw, 22px); font-weight: 560; letter-spacing: -.012em; }
.aboutPrinciple p { margin: 0; color: #455555; font-size: 15px; line-height: 1.65; }

/* ---------- Timeline split: list left, sticky photo deck right ------------- */
.aboutTimelineGrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
@media (max-width: 900px) { .aboutTimelineGrid { grid-template-columns: 1fr; } }
.aboutTimelineGrid .aboutTimelineList { margin-top: clamp(20px, 2.5vw, 34px); }
.aboutTimelineList li { transition: opacity .4s; }
.aboutTimelineList li:not(.isActive) { opacity: .55; }
@media (max-width: 900px) { .aboutTimelineList li:not(.isActive) { opacity: 1; } }
.aboutTimelineList li.isActive::before { background: var(--green); }

.aboutTimelineDeck { position: sticky; top: 120px; aspect-ratio: 4 / 4.4; max-height: 74vh; }
@media (max-width: 900px) { .aboutTimelineDeck { display: none; } }
.aboutTimelineDeck figure {
  position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: 26px;
  border: 1px solid rgba(16,34,35,.1); background: var(--mint);
  box-shadow: 0 44px 88px -48px rgba(5,29,32,.55);
  transform: translateY(calc(var(--st, 0) * 14px)) rotate(calc(var(--st, 0) * 2.4deg)) scale(calc(1 - var(--st, 0) * .04));
  z-index: calc(10 - var(--st, 0));
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
}
.aboutTimelineDeck img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aboutTimelineDeck figure.isActive { z-index: 20; transform: none; }
.aboutTimelineDeck figure.isPast { z-index: 30; transform: translateY(-116%) rotate(-7deg); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .aboutTimelineDeck figure { transition: opacity .2s; transform: none; } .aboutTimelineDeck figure:not(.isActive) { opacity: 0; } }

/* ---------- Team: offset editorial grid ------------------------------------ */
.aboutTeam { background: var(--paper); padding: 0 0 clamp(64px, 8vw, 110px); }
.aboutTeamGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); margin-top: clamp(28px, 3.5vw, 44px); }
@media (max-width: 1000px) { .aboutTeamGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .aboutTeamGrid { grid-template-columns: 1fr; } }
@media (min-width: 1001px) { .aboutTeamCard:nth-child(even) { margin-top: 38px; } }
@media (min-width: 481px) and (max-width: 1000px) { .aboutTeamCard:nth-child(even) { margin-top: 28px; } }

.aboutTeamCard {
  position: relative; display: block; overflow: hidden; border-radius: 20px;
  aspect-ratio: 3 / 4.1; text-decoration: none; isolation: isolate;
  background: linear-gradient(160deg, var(--mint), #cee3e3);
  border: 1px solid rgba(16,34,35,.08);
  box-shadow: 0 26px 54px -38px rgba(5,29,32,.5);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s;
}
.aboutTeamCard:hover { transform: translateY(-6px); box-shadow: 0 40px 72px -40px rgba(5,29,32,.6); }
.aboutTeamCard:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.aboutTeamPhoto { position: absolute; inset: 0; margin: 0; }
.aboutTeamPhoto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.aboutTeamCard:hover .aboutTeamPhoto img { transform: scale(1.06); }
.aboutTeamScrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(4,21,22,.82) 0%, rgba(4,21,22,.18) 42%, rgba(4,21,22,0) 62%); }
.aboutTeamInfo { position: absolute; left: 18px; right: 52px; bottom: 16px; z-index: 2; display: flex; flex-direction: column; gap: 3px; }
.aboutTeamInfo strong { color: #f4fafa; font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.aboutTeamInfo em { color: #9ad1d2; font-style: normal; font-size: 12.5px; font-weight: 540; letter-spacing: .02em; }
.aboutTeamGo {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(251,250,246,.16); color: #f4fafa; font-size: 15px;
  backdrop-filter: blur(4px); transition: background .25s, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.aboutTeamCard:hover .aboutTeamGo { background: var(--green); transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .aboutTeamCard, .aboutTeamPhoto img, .aboutTeamGo { transition: none; }
  .aboutTeamCard:hover { transform: none; }
  .aboutTeamCard:hover .aboutTeamPhoto img { transform: none; }
}
/* Scroll entrance — staggered rise per card (modern browsers only). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .aboutTeamGrid > * { animation: aboutRise linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
    .aboutTeamGrid > *:nth-child(2) { animation-range: entry 5% cover 37%; }
    .aboutTeamGrid > *:nth-child(3) { animation-range: entry 10% cover 42%; }
    .aboutTeamGrid > *:nth-child(4) { animation-range: entry 15% cover 47%; }
  }
}

/* ---------- FAQ: dark panel, animated accordion ----------------------------- */
.aboutFaq { background: var(--paper); padding: 0 0 clamp(64px, 8vw, 110px); }
.aboutFaqPanel {
  position: relative; overflow: hidden; border-radius: clamp(22px, 2.6vw, 34px);
  padding: clamp(30px, 4vw, 64px);
  background:
    radial-gradient(110% 130% at 12% 8%, #134144 0%, rgba(19,65,68,0) 55%),
    linear-gradient(150deg, #0a2e31 0%, #072629 50%, #051d20 100%);
  box-shadow: 0 46px 100px -54px rgba(5,29,32,.6);
}
.aboutFaqGrid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 4.5vw, 80px); align-items: start; }
@media (max-width: 900px) { .aboutFaqGrid { grid-template-columns: 1fr; } }
.aboutFaqIntro { position: sticky; top: 110px; }
@media (max-width: 900px) { .aboutFaqIntro { position: static; } }
.aboutFaqKicker {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; color: #7dd3d5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.aboutFaqKicker i { width: 7px; height: 7px; border-radius: 50%; background: #7dd3d5; box-shadow: 0 0 0 4px rgba(125,211,213,.2); }
.aboutFaqIntro h2 { margin: 0 0 14px; color: #f4fafa; font-weight: 560; letter-spacing: -.02em; line-height: 1.1; font-size: clamp(26px, 3vw, 40px); max-width: 14ch; }
.aboutFaqIntro p { margin: 0 0 26px; color: #bbd6d7; line-height: 1.6; font-size: 15.5px; max-width: 38ch; }
.aboutFaqCall {
  display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none;
  padding: 14px 22px; border-radius: 16px; color: #eaf6f6;
  border: 1px solid rgba(215,247,248,.18); background: rgba(215,247,248,.05);
  transition: border-color .25s, background .25s;
}
.aboutFaqCall:hover { border-color: rgba(215,247,248,.38); background: rgba(215,247,248,.09); }
.aboutFaqCall span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em; color: #8eb6b8; }
.aboutFaqCall strong { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }

.aboutFaqItem { border-bottom: 1px solid rgba(215,247,248,.12); }
.aboutFaqItem:first-of-type { border-top: 1px solid rgba(215,247,248,.12); }
.aboutFaqItem summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 18px;
  padding: 20px 2px; color: #d9ebeb; font-size: clamp(16px, 1.35vw, 18px); font-weight: 540;
  letter-spacing: -.005em; line-height: 1.45; transition: color .25s;
}
.aboutFaqItem summary::-webkit-details-marker { display: none; }
.aboutFaqItem summary:hover, .aboutFaqItem.isOpen summary { color: #f4fafa; }
.aboutFaqItem summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.aboutFaqIdx {
  flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #4e787b; transition: color .25s;
}
.aboutFaqItem.isOpen .aboutFaqIdx { color: #7dd3d5; }
.aboutFaqQ { flex: 1; }
.aboutFaqPlus { position: relative; flex: none; align-self: center; width: 18px; height: 18px; }
.aboutFaqPlus::before, .aboutFaqPlus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 1.6px; border-radius: 2px; background: #8eb6b8;
  transform: translate(-50%, -50%);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), background .25s;
}
.aboutFaqPlus::after { transform: translate(-50%, -50%) rotate(90deg); }
.aboutFaqItem.isOpen .aboutFaqPlus::before { transform: translate(-50%, -50%) rotate(45deg); background: #7dd3d5; }
.aboutFaqItem.isOpen .aboutFaqPlus::after { transform: translate(-50%, -50%) rotate(135deg); background: #7dd3d5; }

/* Smooth open/close: grid-rows 0fr→1fr on the body wrapper (JS toggles .isOpen). */
.aboutFaqBody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .48s cubic-bezier(.22, 1, .36, 1); }
.aboutFaqItem.isOpen .aboutFaqBody { grid-template-rows: 1fr; }
.aboutFaqBodyInner { overflow: hidden; min-height: 0; }
.aboutFaqBodyInner > :first-child { margin-top: 0; }
.aboutFaqBodyInner p { margin: 0 0 1em; padding-left: 30px; max-width: 60ch; color: #a6c5c6; font-size: 15px; line-height: 1.7; }
.aboutFaqBodyInner > :last-child { margin-bottom: 22px; }
@media (max-width: 620px) { .aboutFaqBodyInner p { padding-left: 0; } }
@media (prefers-reduced-motion: reduce) { .aboutFaqBody, .aboutFaqPlus::before, .aboutFaqPlus::after { transition: none; } }

/* ---------- Scroll reveals for the new blocks (native, no-JS-safe) --------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* (timeline items excluded — their active/dim state owns opacity there) */
    .aboutStat, .aboutMissionCopy > *, .aboutPrinciple, .aboutMissionMedia {
      animation: aboutRise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%;
    }
    .aboutPrinciple:nth-child(2) { animation-range: entry 6% cover 36%; }
    .aboutPrinciple:nth-child(3) { animation-range: entry 12% cover 42%; }
  }
}
@keyframes aboutRise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }


/* ===== faq.css ===== */
/* =========================================================================
   FAQ page (template-faq.php) — superpower.com/faqs layout on the reference
   tokens: sticky left rail (big title, talk-to-us pill, vertical category
   nav with dash marker + scrollspy) beside all category sections stacked
   with hairline accordion rows and bare thin plus icons.
   Loaded only on the Faq template.
   ========================================================================= */

.faqSplitWrap {
  background: var(--paper);
  padding: calc(84px + clamp(40px, 6vw, 96px)) 0 clamp(64px, 8vw, 120px);
}
body.admin-bar .faqSplitWrap { padding-top: calc(84px + 32px + clamp(40px, 6vw, 96px)); }
@media screen and (max-width: 782px) { body.admin-bar .faqSplitWrap { padding-top: calc(84px + 46px + clamp(40px, 6vw, 96px)); } }

.faqSplit {
  display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 760px);
  gap: clamp(40px, 6vw, 110px); align-items: start; justify-content: center;
}
@media (max-width: 860px) { .faqSplit { grid-template-columns: minmax(0, 1fr); gap: 34px; } }

/* ---------- Left rail ------------------------------------------------------ */
.faqRail { position: sticky; top: 110px; }
@media (max-width: 860px) { .faqRail { position: static; } }

.faqRailTitle {
  margin: 0 0 26px; color: var(--ink); font-weight: 560;
  font-size: clamp(44px, 5vw, 64px); line-height: 1; letter-spacing: -.025em;
}
.faqRailCta {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 11px 20px 11px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #ffffff; color: var(--ink);
  font-size: 14.5px; font-weight: 540;
  transition: border-color .2s, box-shadow .2s;
}
.faqRailCta:hover { border-color: var(--green); box-shadow: 0 14px 30px -20px rgba(5,29,32,.4); }
.faqRailCta:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.faqRailCtaIcon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--mint); color: var(--pine);
}
.faqRailCtaIcon svg { width: 15px; height: 15px; }

.faqRailNav { display: flex; flex-direction: column; gap: 4px; margin-top: 38px; }
.faqRailNav a {
  position: relative; display: inline-flex; align-items: center;
  padding: 7px 0 7px 34px; text-decoration: none;
  color: #6b7a7a; font-size: 15.5px; font-weight: 500;
  transition: color .2s;
}
.faqRailNav a::before {
  content: ""; position: absolute; left: 0; top: 50%; margin-top: -1px;
  width: 20px; height: 2px; border-radius: 2px; background: var(--ink);
  opacity: 0; transform: scaleX(.4); transform-origin: left center;
  transition: opacity .25s, transform .25s;
}
.faqRailNav a:hover { color: var(--ink); }
.faqRailNav a.isActive { color: var(--ink); font-weight: 560; }
.faqRailNav a.isActive::before { opacity: 1; transform: scaleX(1); }
.faqRailNav a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .faqRailNav a::before { transition: none; } }

/* Mobile: the rail nav becomes a horizontal scrollable row. */
@media (max-width: 860px) {
  .faqRailNav { flex-direction: row; gap: 20px; margin-top: 26px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
  .faqRailNav::-webkit-scrollbar { display: none; }
  .faqRailNav a { padding: 7px 0 12px; white-space: nowrap; }
  .faqRailNav a::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 2px; margin: 0; transform: scaleX(1); }
}

/* ---------- Right column: stacked category sections ------------------------ */
.faqGroup { scroll-margin-top: 120px; }
.faqGroup + .faqGroup { margin-top: clamp(56px, 7vw, 104px); }
.faqGroupTitle {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 8px; color: var(--ink); font-weight: 560; letter-spacing: -.015em;
  font-size: clamp(22px, 2.4vw, 29px); line-height: 1.15;
}
.faqGroupTitle .count { color: #a8b5b5; font-weight: 500; font-size: .85em; }

/* Accordion rows — hairline dividers, bare thin plus. */
.faqAcc details { border-bottom: 1px solid var(--line); }
.faqAcc details:first-of-type { border-top: 1px solid var(--line); }
.faqAcc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; padding: 22px 2px;
  color: var(--ink); font-size: clamp(16px, 1.3vw, 17.5px); font-weight: 500;
  letter-spacing: -.005em; line-height: 1.45; transition: color .2s;
}
.faqAcc summary::-webkit-details-marker { display: none; }
.faqAcc summary:hover { color: #1d696d; }
.faqAcc summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.faqPlus { position: relative; flex: none; width: 18px; height: 18px; }
.faqPlus::before, .faqPlus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 1.6px; border-radius: 2px; background: #556464;
  transform: translate(-50%, -50%);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), background .2s;
}
.faqPlus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faqAcc summary:hover .faqPlus::before, .faqAcc summary:hover .faqPlus::after { background: #1d696d; }
.faqAcc details[open] .faqPlus::before { transform: translate(-50%, -50%) rotate(45deg); }
.faqAcc details[open] .faqPlus::after { transform: translate(-50%, -50%) rotate(135deg); }
@media (prefers-reduced-motion: reduce) { .faqPlus::before, .faqPlus::after { transition: none; } }
.faqAns { padding: 0 40px 24px 2px; color: #455555; font-size: 15.5px; line-height: 1.7; max-width: 64ch; }
.faqAns p { margin: 0 0 1em; }
.faqAns p:last-child { margin-bottom: 0; }


/* ===== blog.css ===== */
/* =========================================================================
   Blog listing — superpower.com/blog-inspired layout on the reference tokens.
   Light paper hero + search bar, category filter pills, "Top articles"
   featured row, minimal editorial cards (rounded media, badge, meta, title).
   Loaded only on post archive views (see inc/refsite.php).
   ========================================================================= */

/* ---------- Hero (light, on paper, under the fixed light header) --------- */
.blogHero {
  background: var(--paper);
  padding: calc(84px + clamp(36px, 5vw, 72px)) 0 clamp(28px, 3.5vw, 48px);
}
body.admin-bar .blogHero { padding-top: calc(84px + 32px + clamp(36px, 5vw, 72px)); }
@media screen and (max-width: 782px) { body.admin-bar .blogHero { padding-top: calc(84px + 46px + clamp(36px, 5vw, 72px)); } }

.blogHeroInner { max-width: 860px; }
.blogHero .innerCrumbs { margin-bottom: 26px; }
.blogHero .innerCrumbs a { color: #2b7579; }
.blogHero .innerCrumbs a:hover { color: var(--pine); }
.blogHero .innerCrumbs span[aria-hidden] { color: #9ab0b1; }
.blogHero .innerCrumbs .isCurrent { color: var(--ink); }

.blogHeroKicker {
  display: inline-block; margin-bottom: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: #417b7d;
}
.blogHeroTitle {
  margin: 0; color: var(--ink); font-weight: 560;
  font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -.02em;
  max-width: 18ch;
}
.blogHeroSub {
  margin: 18px 0 0; color: #455555; max-width: 56ch;
  font-size: clamp(15px, 1.3vw, 17.5px); line-height: 1.65;
}

/* Inline action bar — the superpower "subscribe bar" shape, wired to search. */
.blogSearch {
  display: flex; align-items: center; gap: 8px; margin-top: 30px;
  max-width: 520px; padding: 6px 6px 6px 20px;
  background: #ffffff; border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 18px 40px -28px rgba(5,29,32,.35);
  transition: border-color .2s, box-shadow .2s;
}
.blogSearch:focus-within { border-color: var(--green); box-shadow: 0 18px 40px -24px rgba(73,158,161,.45); }
.blogSearch input[type="search"] {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 0;
  font-size: 16px; color: var(--ink); font-family: inherit; /* ≥16px: no iOS focus zoom */
}
.blogSearch input[type="search"]::placeholder { color: #8f8a97; }
.blogSearch input[type="search"]:focus { outline: none; }
.blogSearch button {
  flex: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 0; border-radius: 999px; padding: 12px 22px;
  background: var(--forest-deep); color: #eaf6f6;
  font-family: inherit; font-size: 14.5px; font-weight: 560; letter-spacing: .01em;
  transition: background .2s;
}
.blogSearch button:hover { background: var(--pine); }
.blogSearch button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- Category filter pills ---------------------------------------- */
.blogFilters {
  display: flex; gap: 8px; margin-top: clamp(26px, 3.5vw, 40px);
  overflow-x: auto; padding-bottom: 6px; scrollbar-width: none;
}
.blogFilters::-webkit-scrollbar { display: none; }
.blogFilters a {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); background: #ffffff; color: #344343;
  font-size: 14px; font-weight: 540; white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}
.blogFilters a:hover { border-color: var(--green); color: var(--pine); }
.blogFilters a.isActive { background: var(--forest-deep); border-color: var(--forest-deep); color: #ffffff; }
.blogFilters a .count { color: #8f8a97; font-size: 12.5px; font-weight: 500; }
.blogFilters a.isActive .count { color: #9ad1d2; }
.blogFilters a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- Listing sections --------------------------------------------- */
.blogWrap { padding-block: clamp(20px, 3vw, 40px) clamp(56px, 7vw, 104px); background: var(--paper); }
.blogSection + .blogSection { margin-top: clamp(48px, 6vw, 84px); }
.blogSectionHead { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: clamp(22px, 3vw, 34px); }
.blogSectionHead h2 {
  margin: 0; color: var(--ink); font-weight: 560; letter-spacing: -.015em;
  font-size: clamp(23px, 2.6vw, 32px); line-height: 1.1;
}
.blogSectionKicker {
  display: block; margin-bottom: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #417b7d;
}

/* ---------- Grids --------------------------------------------------------- */
.blogFeatureGrid, .blogGrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px) clamp(18px, 2.4vw, 28px);
}
@media (max-width: 900px) { .blogFeatureGrid, .blogGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .blogFeatureGrid, .blogGrid { grid-template-columns: 1fr; } }

/* ---------- Cards — minimal editorial (no box, rounded media) ------------- */
.blogCard { display: flex; flex-direction: column; min-width: 0; }
.blogCardMedia {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 10; border-radius: 20px; margin-bottom: 16px;
  background: linear-gradient(150deg, var(--mint), #cee3e3);
  border: 1px solid rgba(16,34,35,.07);
}
.blogCardMedia img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.blogCard:hover .blogCardMedia img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) { .blogCard:hover .blogCardMedia img { transform: none; } }
.blogCardBadge {
  position: absolute; left: 12px; top: 12px; z-index: 1;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(251,250,246,.92); color: var(--pine);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 6px 18px -8px rgba(5,29,32,.4);
}
.blogCardMeta {
  display: flex; align-items: center; gap: 9px; margin-bottom: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.blogCardMeta .dot { width: 3.5px; height: 3.5px; border-radius: 50%; background: #b9c7c7; }
.blogCardTitle {
  margin: 0; font-size: 19px; font-weight: 560; line-height: 1.32; letter-spacing: -.01em;
}
.blogCardTitle a { color: var(--ink); text-decoration: none; transition: color .2s; }
.blogCardTitle a:hover { color: #1d696d; }
.blogCardTitle a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.blogCardExcerpt {
  margin: 9px 0 0; color: #566667; font-size: 14.5px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Featured ("Top articles") variant — larger media and type. */
.blogCard.isFeature .blogCardMedia { aspect-ratio: 4 / 3; border-radius: 24px; }
.blogCard.isFeature .blogCardTitle { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.25; }
.blogCard.isFeature .blogCardExcerpt { -webkit-line-clamp: 3; font-size: 15px; }

/* =========================================================================
   Single post — superpower.com-style article.
   ========================================================================= */

/* ---------- Title band: copy left, rounded feature image right ----------- */
.postHero {
  background: var(--ivory);
  border-bottom: 1px solid rgba(16,34,35,.07);
  padding: calc(84px + clamp(32px, 4.5vw, 64px)) 0 clamp(36px, 5vw, 64px);
}
body.admin-bar .postHero { padding-top: calc(84px + 32px + clamp(32px, 4.5vw, 64px)); }
@media screen and (max-width: 782px) { body.admin-bar .postHero { padding-top: calc(84px + 46px + clamp(32px, 4.5vw, 64px)); } }

.postHeroGrid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.postHeroGrid.isTextOnly { grid-template-columns: minmax(0, 860px); }
/* Stacked hero reads title → image → share/AI actions (not actions first). */
@media (max-width: 860px) {
  .postHeroGrid { grid-template-columns: 1fr; gap: 20px; }
  .postHeroCopy { display: contents; }
  .postHeroCopy .innerCrumbs { margin-bottom: 0; }
  .postHeroMedia { order: 3; }
  .postActions { order: 4; margin-top: 4px; }
}

.postHeroCopy .innerCrumbs { margin-bottom: 22px; }
.postHeroCopy .innerCrumbs a { color: #2b7579; }
.postHeroCopy .innerCrumbs a:hover { color: var(--pine); }
.postHeroCopy .innerCrumbs span[aria-hidden] { color: #9ab0b1; }
.postHeroCopy .innerCrumbs .isCurrent { color: var(--ink); }
.postHeroTitle {
  margin: 0; color: var(--ink); font-weight: 560;
  font-size: clamp(30px, 3.8vw, 52px); line-height: 1.08; letter-spacing: -.02em;
  max-width: 20ch;
}
.postHeroMedia {
  margin: 0; overflow: hidden; border-radius: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(16,34,35,.08);
  box-shadow: 0 40px 80px -48px rgba(5,29,32,.5);
}
.postHeroMedia img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

/* ---------- Share + Summarize-with-AI action rows ------------------------ */
.postActions { display: flex; flex-wrap: wrap; gap: 28px 48px; margin-top: clamp(28px, 3.5vw, 44px); }
.postActionLabel {
  display: block; margin-bottom: 11px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.postActionRow { display: flex; flex-wrap: wrap; gap: 8px; }
.shareBtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; text-decoration: none;
  border: 1px solid var(--line); background: #ffffff; color: #344343;
  font-size: 14px; font-weight: 640; font-family: inherit;
  transition: border-color .2s, color .2s, background .2s;
}
.shareBtn svg { width: 17px; height: 17px; }
/* Touch devices get full 44px tap targets. */
@media (pointer: coarse) {
  .shareBtn { width: 44px; height: 44px; }
  .aiPill { padding: 12px 18px; }
}
.shareBtn:hover { border-color: var(--green); color: var(--pine); }
.shareBtn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.shareBtn.isCopied { border-color: var(--green); background: var(--mint); color: var(--pine); }
.shareBtn.isCopied::after {
  content: "Copied"; position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  padding: 5px 10px; border-radius: 8px; background: var(--forest-deep); color: #eaf6f6;
  font-size: 11.5px; font-weight: 560; white-space: nowrap;
}
.aiPill {
  display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: #ffffff; color: #344343; text-decoration: none;
  font-size: 13.5px; font-weight: 540; transition: border-color .2s, color .2s;
}
.aiPill:hover { border-color: var(--green); color: var(--pine); }
.aiPill:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- Body: sticky byline sidebar + prose --------------------------- */
.postBody { background: var(--paper); padding-block: clamp(48px, 6vw, 96px); }
.postLayout {
  display: grid; grid-template-columns: 260px minmax(0, 720px);
  gap: clamp(36px, 5vw, 88px); justify-content: center; align-items: start;
}
@media (max-width: 860px) { .postLayout { grid-template-columns: minmax(0, 720px); } }
.postAside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 860px) {
  .postAside { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
  .postAside .postPromo { flex: 1 1 250px; }
}
.postAsideLabel {
  display: block; margin-bottom: 6px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.postByline strong { display: block; color: var(--ink); font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.postBylineMeta { display: block; margin-top: 5px; color: var(--muted); font-size: 13.5px; }
.postPromo {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none;
  padding: 20px 22px; border-radius: 18px; color: #eaf6f6;
  background:
    radial-gradient(120% 140% at 85% -20%, #1a585c 0%, rgba(26,88,92,0) 60%),
    linear-gradient(150deg, #0a2e31, #051d20);
  box-shadow: 0 26px 52px -32px rgba(5,29,32,.65);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s;
}
.postPromo:hover { transform: translateY(-3px); box-shadow: 0 34px 62px -32px rgba(5,29,32,.7); }
@media (prefers-reduced-motion: reduce) { .postPromo:hover { transform: none; } }
.postPromo strong { font-size: 15.5px; font-weight: 560; line-height: 1.35; letter-spacing: -.01em; }
.postPromo span { display: inline-flex; align-items: center; gap: 7px; color: #9ad1d2; font-size: 13.5px; font-weight: 560; }
.postPromo:hover span { color: #dbf7f8; }

/* Superpower-style oversized lede: the first paragraph opens big and dark. */
.postMain .innerProse > p:first-child {
  color: var(--ink); font-weight: 540;
  font-size: clamp(19px, 2.1vw, 27px); line-height: 1.42; letter-spacing: -.015em;
  margin-bottom: 1.4em;
}

/* ---------- Related articles slider --------------------------------------- */
.relatedWrap {
  background: var(--paper); border-top: 1px solid rgba(16,34,35,.07);
  padding-block: clamp(48px, 6vw, 88px);
}
.relatedHead {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.relatedHead h2 {
  margin: 0; color: var(--ink); font-weight: 560; letter-spacing: -.015em;
  font-size: clamp(24px, 3vw, 38px); line-height: 1.1;
}
.relatedNav { display: flex; gap: 8px; }
.relatedArrow {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: #ffffff; color: var(--ink);
  font-size: 17px; font-family: inherit;
  transition: border-color .2s, color .2s, opacity .2s;
}
.relatedArrow:hover:not(:disabled) { border-color: var(--green); color: var(--pine); }
.relatedArrow:disabled { opacity: .35; cursor: default; }
.relatedArrow:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.relatedTrack {
  display: flex; gap: clamp(18px, 2.4vw, 28px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 6px;
}
.relatedTrack::-webkit-scrollbar { display: none; }
.relatedTrack .blogCard { flex: 0 0 clamp(250px, 27vw, 340px); scroll-snap-align: start; }
@media (max-width: 620px) { .relatedTrack .blogCard { flex-basis: 82vw; } }

/* ---------- Prev / next --------------------------------------------------- */
.postNav {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(36px, 4vw, 56px); padding-top: 26px; border-top: 1px solid var(--line);
}
.postNav a { color: var(--pine); text-decoration: none; font-weight: 560; font-size: 15px; max-width: 42ch; }
.postNav a:hover { color: var(--ink); }

/* ==========================================================================
   Blog byline — sidebar row (Written by / Medically reviewed by) + the
   end-of-article author cards. The reference markup used Tailwind utilities,
   which the refsite build does not compile, so this restyles the same
   structure in the amethyst design system (avatars, labels, names, cards).
   ========================================================================== */
.blogByline { display: flex; flex-direction: column; gap: 15px; }
.blogBylinePerson { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.blogBylineAvatar {
  width: 44px; height: 44px; border-radius: 999px; object-fit: cover; flex: none;
  background: #eaf6f6; border: 1px solid var(--line);
}
.blogBylineAvatar.isInitial {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--green); font-weight: 700; font-size: 16px;
}
.blogBylineText { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.22; }
.blogBylineLabel {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.blogBylineName { font-weight: 600; font-size: 14.5px; color: var(--ink); transition: color .2s; }
.blogBylinePerson:hover .blogBylineName { color: var(--green); }

.blogAuthorCards { margin-top: clamp(40px, 6vw, 60px); display: grid; gap: 18px; }
@media (min-width: 640px) { .blogAuthorCards { grid-template-columns: 1fr 1fr; } }
.blogAuthorCard {
  display: flex; gap: 16px; padding: 22px;
  background: var(--white); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 18px 40px -30px rgba(5,29,32,.5);
}
.blogAuthorAvatar {
  width: 62px; height: 62px; border-radius: 18px; object-fit: cover; flex: none;
  background: #eaf6f6; border: 1px solid var(--line);
}
.blogAuthorAvatar.isInitial {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--green); font-weight: 700; font-size: 22px;
}
.blogAuthorInfo { min-width: 0; }
.blogAuthorLabel {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--green);
}
.blogAuthorName { margin-top: 3px; font-size: 18px; letter-spacing: -.01em; color: var(--ink); font-weight: 600; }
.blogAuthorRole { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.blogAuthorLink {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--green); text-decoration: none;
}
.blogAuthorLink:hover { color: var(--green-light); }
.blogAuthorLink svg { width: 15px; height: 15px; }


/* ===== pathfinder.css ===== */
/* =========================================================================
   Path finder — conversational three-tap lead onboarding (tmse_pathfinder()).
   Dark forest panel: intro copy left, interactive card right. Chips advance
   through three questions, then an inline callback mini-form files the lead.
   All motion is reduced-motion gated; without JS the card is simply step 1
   whose chips link to the prefilled contact page.
   ========================================================================= */
.pathFinder { padding: clamp(26px, 4vw, 60px) 0; }
.pfGrid {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 72px); align-items: center;
  border-radius: clamp(22px, 2.6vw, 34px); padding: clamp(28px, 4vw, 60px);
  background:
    radial-gradient(110% 130% at 12% 8%, #134144 0%, rgba(19,65,68,0) 55%),
    linear-gradient(150deg, #0a2e31 0%, #072629 50%, #051d20 100%);
  box-shadow: 0 46px 100px -54px rgba(5,29,32,.6);
}
@media (max-width: 900px) { .pfGrid { grid-template-columns: 1fr; } }

.pfIntro h2 {
  margin: 0 0 14px; color: #f4fafa; font-weight: 560; letter-spacing: -.02em;
  line-height: 1.08; font-size: clamp(26px, 3vw, 40px); max-width: 12ch;
}
.pfIntro p { margin: 0 0 22px; color: #bbd6d7; line-height: 1.62; font-size: 15.5px; max-width: 38ch; }
.pfPrivacy {
  display: inline-flex; align-items: center; gap: 8px; color: #7ea7a9;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.pfPrivacy i { width: 6px; height: 6px; border-radius: 50%; background: #7dd3d5; box-shadow: 0 0 0 3px rgba(125,211,213,.16); }

/* ---- The card ------------------------------------------------------------ */
.pfCard {
  position: relative; border-radius: 20px; padding: clamp(22px, 2.6vw, 34px);
  background: rgba(215,247,248,.05); border: 1px solid rgba(215,247,248,.14);
  min-height: 300px;
}
.pfHead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.pfStepLabel, .pfProgress {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.pfStepLabel { color: #7dd3d5; }
.pfProgress { color: #7ea7a9; font-variant-numeric: tabular-nums; }

.pfQ {
  margin: 0 0 18px; color: #eaf6f6; font-weight: 560; letter-spacing: -.012em;
  line-height: 1.3; font-size: clamp(19px, 1.8vw, 24px); max-width: 26ch; outline: none;
}
.pfChips { display: flex; flex-wrap: wrap; gap: 10px; }
.pfChip {
  display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 999px;
  color: #d9ebeb; font-size: 14.5px; font-weight: 520; text-decoration: none; cursor: pointer;
  font-family: inherit; letter-spacing: .005em;
  background: rgba(215,247,248,.06); border: 1px solid rgba(215,247,248,.16);
  transition: border-color .25s, background .25s, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.pfChip:hover { border-color: rgba(215,247,248,.42); background: rgba(215,247,248,.11); transform: translateY(-1px); }
.pfChip:focus-visible { outline: 2px solid #7dd3d5; outline-offset: 3px; }

/* Each new step's content slides up in a short cascade. */
.pfBody > * { animation: pfIn .45s cubic-bezier(.22, 1, .36, 1) both; }
.pfBody > *:nth-child(2) { animation-delay: .08s; }
@keyframes pfIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- Final step: empathy + pre-written note + mini form ------------------ */
.pfForm > * { animation: pfIn .45s cubic-bezier(.22, 1, .36, 1) both; }
.pfForm > *:nth-child(n+2) { animation-delay: .07s; }
.pfForm > .pfNote { animation-delay: .14s; }
.pfForm > .pfFields { animation-delay: .2s; }
.pfForm > .pfActions { animation-delay: .26s; }

.pfEmpathy {
  margin: 0 0 8px; color: #eaf6f6; font-weight: 520; letter-spacing: -.008em;
  font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; max-width: 44ch;
}
.pfWhy { margin: 0 0 18px; color: #a6c5c6; font-size: 15px; line-height: 1.65; max-width: 52ch; }
.pfNote {
  margin: 0 0 20px; padding: 13px 16px; border-left: 2px solid #7dd3d5;
  border-radius: 0 12px 12px 0; background: rgba(215,247,248,.05);
  color: #cee7e8; font-style: italic; font-size: 14.5px; line-height: 1.55;
}
.pfNote b {
  display: block; margin-bottom: 6px; font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #7ea7a9;
}

.pfFields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
@media (max-width: 620px) { .pfFields { grid-template-columns: 1fr; } }
.pfField { display: flex; flex-direction: column; gap: 6px; }
.pfField--full { grid-column: 1 / -1; }
.pfField span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #8eb6b8;
}
.pfField input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px;
  color: #f4fafa; font: inherit; font-size: 15px;
  background: rgba(4,21,22,.45); border: 1px solid rgba(215,247,248,.16);
  transition: border-color .25s, background .25s;
}
.pfField input::placeholder { color: #5c7c7e; }
.pfField input:focus { outline: none; border-color: rgba(125,211,213,.6); background: rgba(4,21,22,.65); }

.pfActions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
/* The submit is a <button>: the reference mint-capsule styles are scoped to
   a.signalCta in index.css, so the full pill is restated here (including the
   --signal-* vars its arrow medallion reads). */
.pfSubmit {
  --signal-bg: linear-gradient(145deg, #19575c 0%, #0c3a3e 52%, #052326 100%);
  --signal-ink: #dbf7f8;
  --signal-border: rgba(215,247,248,.28);
  --signal-glow: rgba(122,211,213,.28);
  cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 54px; padding: 7px 8px 7px 22px; border-radius: 15px;
  color: #052326; font-size: 13.5px; font-weight: 680; letter-spacing: -.012em; line-height: 1;
  background: linear-gradient(135deg, #bfe9e9 0%, #9ad4d4 48%, #7dc2c4 100%);
  border: 1px solid rgba(239,255,255,.62);
  box-shadow: 0 16px 36px rgba(0,29,31,.22), inset 0 1px 0 rgba(255,255,255,.42);
  transition: transform .24s cubic-bezier(.2, .8, .2, 1), box-shadow .24s;
}
.pfSubmit:hover { transform: translateY(-1px); box-shadow: 0 20px 42px rgba(0,29,31,.3), inset 0 1px 0 rgba(255,255,255,.42); }
.pfSubmit:focus-visible { outline: 2px solid #7dd3d5; outline-offset: 3px; }
.pfSubmit.is-loading { opacity: .6; pointer-events: none; }
.pfCall { display: inline-flex; flex-direction: column; gap: 1px; text-decoration: none; }
.pfCall span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #7ea7a9;
}
.pfCall strong { color: #eaf6f6; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.pfCall:hover strong { color: #ffffff; }

.pfFormNote { margin: 16px 0 0; font-size: 14px; line-height: 1.55; }
.pfFormNote.is-success { color: #9de8ea; }
.pfFormNote.is-error { color: #ffb3a1; }
.pfRestart {
  margin-top: 18px; padding: 0; background: none; border: 0; cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7ea7a9;
}
.pfRestart:hover { color: #cee7e8; }
.pfRestart:focus-visible { outline: 2px solid #7dd3d5; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .pfBody > *, .pfForm > * { animation: none; }
  .pfChip, .pfField input { transition: none; }
}