/* ============================================================
   LASC — brand tokens (Approved Edition, August 2026)
   Navy #042054 · Red #B61222 · Heritage Gold #C39F57 · White
   Navy carries identity. Cream carries anything a parent reads.
   ============================================================ */
:root{
  --poppy-tile:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgODAwIiByb2xlPSJpbWciIGFyaWEtbGFiZWxsZWRieT0idGl0bGUgZGVzYyI+IDx0aXRsZSBpZD0idGl0bGUiPkxBU0MgcG9wcHkgZGlhbW9uZCBwYXR0ZXJuIC0gQ29uY2VwdCBCPC90aXRsZT4gPGRlc2MgaWQ9ImRlc2MiPlNlYW1sZXNzIG5hdnkgcGF0dGVybiB3aXRoIGFuIExBU0MgcmVkIGRpYW1vbmQgbGF0dGljZSwgYWx0ZXJuYXRpbmcgYmx1ZSBDYWxpZm9ybmlhIHBvcHBpZXMgYW5kIHJlZCBkaWFtb25kIG5vZGVzLjwvZGVzYz4gPGRlZnM+IDxzeW1ib2wgaWQ9InBvcHB5IiB2aWV3Qm94PSI3NTAgMjEwIDU1MSAzNzQiPiA8ZyBmaWxsPSJjdXJyZW50Q29sb3IiPiA8cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Ik0gOTg0LjQ0OSA1MjguMDQ5IEMgOTg0LjQ0OSA1MjguMDQ5IDk3MC4wMjIgMzg4LjA1MSA4ODEuNTk5IDM4MC4wMzUgQyA4ODEuNTk5IDM4MC4wMzUgOTAwLjg4OCAzOTMuMzE3IDkwOS42MTYgNDE3LjY3NCBDIDkwOS42MTYgNDE3LjY3NCA4NzAuMjM0IDM0OC4wMzggNzc2LjgzNSAzOTUuODQgQyA3NzYuODM1IDM5NS44NCA4MzcuMTU1IDM4NS40MjIgODU4LjUxNiA0MzYuNTIyIEMgODc3LjM0NSA0ODEuNTY0IDg5Ni45NTYgNTE0LjIzOCA5NTcuNjUyIDUyNC45MzUgQyA5MjAuMTggNDk1LjM2MyA5MTMuODA1IDQ2OC4zNTUgOTEzLjgwNSA0NjguMzU1IEMgOTQ3LjczMiA1MTYuMTA0IDk4NC40NDkgNTI4LjA0OSA5ODQuNDQ5IDUyOC4wNDkiIGZpbGwtcnVsZT0ibm9uemVybyIvPiA8cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Ik0gMTA3NS4wOTYgMzM3LjQ2NCBDIDEwNzUuMDk2IDMzNy40NjQgMTA1OS43NzcgMzA2LjgzNCAxMDM3LjU0OCAzMTEuOTE0IEMgMTAzNy41NDggMzExLjkxNCAxMDM4LjYyMyAyNzYuODE1IDEwMDAgMjM3LjcxNSBDIDk2MS4zNzggMjc2LjgxNSA5NjIuNDUyIDMxMS45MTQgOTYyLjQ1MiAzMTEuOTE0IEMgOTQwLjIyMyAzMDYuODM0IDkyNC45MDQgMzM3LjQ2NCA5MjQuOTA0IDMzNy40NjQgQyA5ODYuNDc2IDM5NS4yNjYgMTAwMCA1MjAuOTIxIDEwMDAgNTIwLjkyMSBDIDEwMDAgNTIwLjkyMSAxMDEzLjUyNSAzOTUuMjY2IDEwNzUuMDk2IDMzNy40NjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPiA8cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Ik0gMTA5MC4zODQgNDE3LjY3NCBDIDEwOTkuMTEyIDM5My4zMTcgMTExOC40MDEgMzgwLjAzNSAxMTE4LjQwMSAzODAuMDM1IEMgMTAyOS45NzggMzg4LjA1MSAxMDE1LjU1MSA1MjguMDQ5IDEwMTUuNTUxIDUyOC4wNDkgQyAxMDE1LjU1MSA1MjguMDQ5IDEwNTIuMjY4IDUxNi4xMDQgMTA4Ni4xOTUgNDY4LjM1NSBDIDEwODYuMTk1IDQ2OC4zNTUgMTA3OS44MiA0OTUuMzYzIDEwNDIuMzQ4IDUyNC45MzYgQyAxMTAzLjA0NCA1MTQuMjM4IDExMjIuNjU1IDQ4MS41NjQgMTE0MS40ODQgNDM2LjUyMiBDIDExNjIuODQ1IDM4NS40MjMgMTIyMy4xNjUgMzk1Ljg0MSAxMjIzLjE2NSAzOTUuODQxIEMgMTEyOS43NjcgMzQ4LjAzOCAxMDkwLjM4NCA0MTcuNjc0IDEwOTAuMzg0IDQxNy42NzQiIGZpbGwtcnVsZT0ibm9uemVybyIvPiA8cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Ik0gMTAwMCA1NTYuMjQ3IEMgOTMzLjgyMSA0OTkuMDY0IDg2Ny44MyA1NjQuNjE2IDg2Ny44MyA1NjQuNjE2IEMgOTM0LjkwOSA1MjcuNDQ1IDk4Ny40OTggNTczLjc2MyAxMDAwIDU4Ni44NTQgQyAxMDEyLjUwMSA1NzMuNzYzIDEwNjUuMDkxIDUyNy40NDUgMTEzMi4xNyA1NjQuNjE2IEMgMTEzMi4xNyA1NjQuNjE2IDEwNjYuMTc5IDQ5OS4wNjQgMTAwMCA1NTYuMjQ3IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4gPC9nPiA8L3N5bWJvbD4gPGZpbHRlciBpZD0ibW90aWZTaGFkb3ciIHg9Ii00MCUiIHk9Ii00MCUiIHdpZHRoPSIxODAlIiBoZWlnaHQ9IjE4MCUiPiA8ZmVEcm9wU2hhZG93IGR4PSI0IiBkeT0iNiIgc3RkRGV2aWF0aW9uPSI3IiBmbG9vZC1jb2xvcj0iIzAwMTYzNyIgZmxvb2Qtb3BhY2l0eT0iLjY1Ii8+IDwvZmlsdGVyPiA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVGYWRlIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMCI+IDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI0I2MTIyMiIgc3RvcC1vcGFjaXR5PSIwIi8+IDxzdG9wIG9mZnNldD0iLjIzIiBzdG9wLWNvbG9yPSIjQjYxMjIyIiBzdG9wLW9wYWNpdHk9Ii42MiIvPiA8c3RvcCBvZmZzZXQ9Ii43NyIgc3RvcC1jb2xvcj0iI0I2MTIyMiIgc3RvcC1vcGFjaXR5PSIuNjIiLz4gPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjQjYxMjIyIiBzdG9wLW9wYWNpdHk9IjAiLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjgwMCIgZmlsbD0iIzA0MjA1NCIvPiA8ZyBmaWxsPSJ1cmwoI2xpbmVGYWRlKSI+IDxwYXRoIGQ9Ik0gMjYuODcwIDI2Ljg3MCBMIDU5LjA5NiA2MS45MjQgTCAxMzguMDc2IDE0MC45MDQgTCAxNzMuMTMwIDE3My4xMzAgTCAxNDAuOTA0IDEzOC4wNzYgTCA2MS45MjQgNTkuMDk2IFoiLz4gPHBhdGggZD0iTSAzNzMuMTMwIDI2Ljg3MCBMIDMzOC4wNzYgNTkuMDk2IEwgMjU5LjA5NiAxMzguMDc2IEwgMjI2Ljg3MCAxNzMuMTMwIEwgMjYxLjkyNCAxNDAuOTA0IEwgMzQwLjkwNCA2MS45MjQgWiIvPiA8cGF0aCBkPSJNIDQyNi44NzAgMjYuODcwIEwgNDU5LjA5NiA2MS45MjQgTCA1MzguMDc2IDE0MC45MDQgTCA1NzMuMTMwIDE3My4xMzAgTCA1NDAuOTA0IDEzOC4wNzYgTCA0NjEuOTI0IDU5LjA5NiBaIi8+IDxwYXRoIGQ9Ik0gNzczLjEzMCAyNi44NzAgTCA3MzguMDc2IDU5LjA5NiBMIDY1OS4wOTYgMTM4LjA3NiBMIDYyNi44NzAgMTczLjEzMCBMIDY2MS45MjQgMTQwLjkwNCBMIDc0MC45MDQgNjEuOTI0IFoiLz4gPHBhdGggZD0iTSAxNzMuMTMwIDIyNi44NzAgTCAxMzguMDc2IDI1OS4wOTYgTCA1OS4wOTYgMzM4LjA3NiBMIDI2Ljg3MCAzNzMuMTMwIEwgNjEuOTI0IDM0MC45MDQgTCAxNDAuOTA0IDI2MS45MjQgWiIvPiA8cGF0aCBkPSJNIDIyNi44NzAgMjI2Ljg3MCBMIDI1OS4wOTYgMjYxLjkyNCBMIDMzOC4wNzYgMzQwLjkwNCBMIDM3My4xMzAgMzczLjEzMCBMIDM0MC45MDQgMzM4LjA3NiBMIDI2MS45MjQgMjU5LjA5NiBaIi8+IDxwYXRoIGQ9Ik0gNTczLjEzMCAyMjYuODcwIEwgNTM4LjA3NiAyNTkuMDk2IEwgNDU5LjA5NiAzMzguMDc2IEwgNDI2Ljg3MCAzNzMuMTMwIEwgNDYxLjkyNCAzNDAuOTA0IEwgNTQwLjkwNCAyNjEuOTI0IFoiLz4gPHBhdGggZD0iTSA2MjYuODcwIDIyNi44NzAgTCA2NTkuMDk2IDI2MS45MjQgTCA3MzguMDc2IDM0MC45MDQgTCA3NzMuMTMwIDM3My4xMzAgTCA3NDAuOTA0IDMzOC4wNzYgTCA2NjEuOTI0IDI1OS4wOTYgWiIvPiA8cGF0aCBkPSJNIDI2Ljg3MCA0MjYuODcwIEwgNTkuMDk2IDQ2MS45MjQgTCAxMzguMDc2IDU0MC45MDQgTCAxNzMuMTMwIDU3My4xMzAgTCAxNDAuOTA0IDUzOC4wNzYgTCA2MS45MjQgNDU5LjA5NiBaIi8+IDxwYXRoIGQ9Ik0gMzczLjEzMCA0MjYuODcwIEwgMzM4LjA3NiA0NTkuMDk2IEwgMjU5LjA5NiA1MzguMDc2IEwgMjI2Ljg3MCA1NzMuMTMwIEwgMjYxLjkyNCA1NDAuOTA0IEwgMzQwLjkwNCA0NjEuOTI0IFoiLz4gPHBhdGggZD0iTSA0MjYuODcwIDQyNi44NzAgTCA0NTkuMDk2IDQ2MS45MjQgTCA1MzguMDc2IDU0MC45MDQgTCA1NzMuMTMwIDU3My4xMzAgTCA1NDAuOTA0IDUzOC4wNzYgTCA0NjEuOTI0IDQ1OS4wOTYgWiIvPiA8cGF0aCBkPSJNIDc3My4xMzAgNDI2Ljg3MCBMIDczOC4wNzYgNDU5LjA5NiBMIDY1OS4wOTYgNTM4LjA3NiBMIDYyNi44NzAgNTczLjEzMCBMIDY2MS45MjQgNTQwLjkwNCBMIDc0MC45MDQgNDYxLjkyNCBaIi8+IDxwYXRoIGQ9Ik0gMTczLjEzMCA2MjYuODcwIEwgMTM4LjA3NiA2NTkuMDk2IEwgNTkuMDk2IDczOC4wNzYgTCAyNi44NzAgNzczLjEzMCBMIDYxLjkyNCA3NDAuOTA0IEwgMTQwLjkwNCA2NjEuOTI0IFoiLz4gPHBhdGggZD0iTSAyMjYuODcwIDYyNi44NzAgTCAyNTkuMDk2IDY2MS45MjQgTCAzMzguMDc2IDc0MC45MDQgTCAzNzMuMTMwIDc3My4xMzAgTCAzNDAuOTA0IDczOC4wNzYgTCAyNjEuOTI0IDY1OS4wOTYgWiIvPiA8cGF0aCBkPSJNIDU3My4xMzAgNjI2Ljg3MCBMIDUzOC4wNzYgNjU5LjA5NiBMIDQ1OS4wOTYgNzM4LjA3NiBMIDQyNi44NzAgNzczLjEzMCBMIDQ2MS45MjQgNzQwLjkwNCBMIDU0MC45MDQgNjYxLjkyNCBaIi8+IDxwYXRoIGQ9Ik0gNjI2Ljg3MCA2MjYuODcwIEwgNjU5LjA5NiA2NjEuOTI0IEwgNzM4LjA3NiA3NDAuOTA0IEwgNzczLjEzMCA3NzMuMTMwIEwgNzQwLjkwNCA3MzguMDc2IEwgNjYxLjkyNCA2NTkuMDk2IFoiLz4gPC9nPiA8ZyBmaWxsPSIjQjYxMjIyIj4gPHBhdGggZD0iTSAwIC0xMyBMIDEzIDAgTCAwIDEzIEwgLTEzIDAgWiIvPiA8cGF0aCBkPSJNIDQwMCAtMTMgTCA0MTMgMCBMIDQwMCAxMyBMIDM4NyAwIFoiLz4gPHBhdGggZD0iTSA4MDAgLTEzIEwgODEzIDAgTCA4MDAgMTMgTCA3ODcgMCBaIi8+IDxwYXRoIGQ9Ik0gMjAwIDE4NyBMIDIxMyAyMDAgTCAyMDAgMjEzIEwgMTg3IDIwMCBaIi8+IDxwYXRoIGQ9Ik0gNjAwIDE4NyBMIDYxMyAyMDAgTCA2MDAgMjEzIEwgNTg3IDIwMCBaIi8+IDxwYXRoIGQ9Ik0gMCAzODcgTCAxMyA0MDAgTCAwIDQxMyBMIC0xMyA0MDAgWiIvPiA8cGF0aCBkPSJNIDQwMCAzODcgTCA0MTMgNDAwIEwgNDAwIDQxMyBMIDM4NyA0MDAgWiIvPiA8cGF0aCBkPSJNIDgwMCAzODcgTCA4MTMgNDAwIEwgODAwIDQxMyBMIDc4NyA0MDAgWiIvPiA8cGF0aCBkPSJNIDIwMCA1ODcgTCAyMTMgNjAwIEwgMjAwIDYxMyBMIDE4NyA2MDAgWiIvPiA8cGF0aCBkPSJNIDYwMCA1ODcgTCA2MTMgNjAwIEwgNjAwIDYxMyBMIDU4NyA2MDAgWiIvPiA8cGF0aCBkPSJNIDAgNzg3IEwgMTMgODAwIEwgMCA4MTMgTCAtMTMgODAwIFoiLz4gPHBhdGggZD0iTSA0MDAgNzg3IEwgNDEzIDgwMCBMIDQwMCA4MTMgTCAzODcgODAwIFoiLz4gPHBhdGggZD0iTSA4MDAgNzg3IEwgODEzIDgwMCBMIDgwMCA4MTMgTCA3ODcgODAwIFoiLz4gPC9nPiA8ZyBmaWx0ZXI9InVybCgjbW90aWZTaGFkb3cpIj4gPHVzZSBocmVmPSIjcG9wcHkiIHg9IjExMi41MDAiIHk9Ii01OS4zOTIiIHdpZHRoPSIxNzUiIGhlaWdodD0iMTE4Ljc4NCIgY29sb3I9IiM1RDg2QkMiIG9wYWNpdHk9IjAuOTUiLz4gPHVzZSBocmVmPSIjcG9wcHkiIHg9IjU0Ny41MDAiIHk9Ii0zNS42MzUiIHdpZHRoPSIxMDUiIGhlaWdodD0iNzEuMjcwIiBjb2xvcj0iIzQ3NzJBNSIgb3BhY2l0eT0iMC43OCIvPiA8dXNlIGhyZWY9IiNwb3BweSIgeD0iLTUyLjUwMCIgeT0iMTY0LjM2NSIgd2lkdGg9IjEwNSIgaGVpZ2h0PSI3MS4yNzAiIGNvbG9yPSIjNDc3MkE1IiBvcGFjaXR5PSIwLjc4Ii8+IDx1c2UgaHJlZj0iI3BvcHB5IiB4PSIzMTIuNTAwIiB5PSIxNDAuNjA4IiB3aWR0aD0iMTc1IiBoZWlnaHQ9IjExOC43ODQiIGNvbG9yPSIjNUQ4NkJDIiBvcGFjaXR5PSIwLjk1Ii8+IDx1c2UgaHJlZj0iI3BvcHB5IiB4PSIxNDcuNTAwIiB5PSIzNjQuMzY1IiB3aWR0aD0iMTA1IiBoZWlnaHQ9IjcxLjI3MCIgY29sb3I9IiM0NzcyQTUiIG9wYWNpdHk9IjAuNzgiLz4gPHVzZSBocmVmPSIjcG9wcHkiIHg9IjUxMi41MDAiIHk9IjM0MC42MDgiIHdpZHRoPSIxNzUiIGhlaWdodD0iMTE4Ljc4NCIgY29sb3I9IiM1RDg2QkMiIG9wYWNpdHk9IjAuOTUiLz4gPHVzZSBocmVmPSIjcG9wcHkiIHg9Ii04Ny41MDAiIHk9IjU0MC42MDgiIHdpZHRoPSIxNzUiIGhlaWdodD0iMTE4Ljc4NCIgY29sb3I9IiM1RDg2QkMiIG9wYWNpdHk9IjAuOTUiLz4gPHVzZSBocmVmPSIjcG9wcHkiIHg9IjM0Ny41MDAiIHk9IjU2NC4zNjUiIHdpZHRoPSIxMDUiIGhlaWdodD0iNzEuMjcwIiBjb2xvcj0iIzQ3NzJBNSIgb3BhY2l0eT0iMC43OCIvPiA8L2c+IDx1c2UgaHJlZj0iI3BvcHB5IiB4PSIxMTIuNTAwIiB5PSI3NDAuNjA4IiB3aWR0aD0iMTc1IiBoZWlnaHQ9IjExOC43ODQiIGNvbG9yPSIjNUQ4NkJDIiBvcGFjaXR5PSIwLjk1Ii8+PHVzZSBocmVmPSIjcG9wcHkiIHg9IjU0Ny41MDAiIHk9Ijc2NC4zNjUiIHdpZHRoPSIxMDUiIGhlaWdodD0iNzEuMjciIGNvbG9yPSIjNDc3MkE1IiBvcGFjaXR5PSIwLjc4Ii8+PHVzZSBocmVmPSIjcG9wcHkiIHg9Ijc0Ny41MDAiIHk9IjE2NC4zNjUiIHdpZHRoPSIxMDUiIGhlaWdodD0iNzEuMjciIGNvbG9yPSIjNDc3MkE1IiBvcGFjaXR5PSIwLjc4Ii8+PHVzZSBocmVmPSIjcG9wcHkiIHg9IjcxMi41MDAiIHk9IjU0MC42MDgiIHdpZHRoPSIxNzUiIGhlaWdodD0iMTE4Ljc4NCIgY29sb3I9IiM1RDg2QkMiIG9wYWNpdHk9IjAuOTUiLz48L3N2Zz4=');
  --statement-photo:url('huddle-duotone.jpg');
  --navy:#042054; --navy-deep:#03163a; --red:#b61222; --gold:#c39f57;
  --cream:#f7f3ea; --cream-hi:#fdfbf6; --paper:#ffffff;
  --ink:#12203c; --ink-2:#57607a; --line:#e2dac9; --line-soft:#ece5d7;

  --surface:var(--cream); --surface-2:var(--paper); --surface-3:var(--cream-hi);
  --band:var(--navy); --band-ink:#f2ecdf; --band-ink-2:#b3bed6; --band-line:rgba(195,159,87,.32);

  --shadow:0 1px 2px rgba(4,32,84,.06), 0 8px 24px -12px rgba(4,32,84,.18);
  --focus:#d3182b; --wrap:1160px; --gut:20px; --r:3px;
  --display:"Barlow Condensed","Oswald","Arial Narrow",system-ui,sans-serif;
  --body:"Source Sans 3","Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --r:3px;
  /* Single committed theme. The approved system is navy structure on cream
     reading fields; a dark mode that recolours cream to navy deletes half the
     palette and is not what wearelasc.com will ship. Forced light so the page
     looks the same for every viewer. */
  color-scheme:light only;
}

*{box-sizing:border-box}
body{margin:0; background:var(--surface); color:var(--ink); font-family:var(--body);
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
@media(min-width:820px){:root{--gut:32px}}

h1,h2,h3,.dsp{font-family:var(--display); font-weight:700; letter-spacing:-.012em; text-wrap:balance; margin:0}
h1{font-size:clamp(3rem,8.4vw,6.4rem); line-height:.9}
h2{font-size:clamp(2.2rem,4.9vw,3.7rem); line-height:.98}
h3{font-family:var(--body); font-weight:700; font-size:1.08rem; line-height:1.3; letter-spacing:0}
p{margin:0}
.lede{font-size:clamp(1.1rem,1.7vw,1.3rem); line-height:1.58; color:var(--ink-2); max-width:58ch}
.eyebrow{font-size:.71rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red); display:flex; align-items:center; gap:14px; margin:0 0 16px}
.eyebrow::before{content:""; height:2px; width:26px; background:var(--gold); flex:0 0 auto}
.eyebrow::after{content:""; height:1px; flex:1; max-width:140px; background:var(--gold); opacity:.55;
  transform-origin:left; animation:drawRule .9s .15s cubic-bezier(.2,.8,.2,1) both}
/* Brand gold at label size on navy is only 6.3:1 and reads faint on many screens.
   A lighter tint of the same hue keeps the brand relationship at 8.6:1. */
.eyebrow.on-band{color:#d9bd82}
@keyframes drawRule{from{transform:scaleX(.08)}to{transform:scaleX(1)}}
@keyframes rise{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

section{padding-block:clamp(64px,9vw,132px)}
.band{background:var(--band); color:var(--band-ink); position:relative; isolation:isolate}
.band .lede,.band .muted{color:var(--band-ink-2)}
.band::before{content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(104deg, var(--band) 0 30%, rgba(4,32,84,.86) 56%, rgba(4,32,84,.62) 100%), var(--poppy-tile);
  background-size:cover, 430px 430px; background-position:center, center}
.band.flat::before{display:none}
.muted{color:var(--ink-2)}
.small{font-size:.93rem; line-height:1.55}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- chrome ---------- */
.anno{background:var(--red); color:#fff; font-size:.8rem}
.anno .wrap{display:flex; gap:8px 18px; align-items:center; justify-content:center; flex-wrap:wrap; padding-block:9px; text-align:center}
.anno b{font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.74rem}
.anno a{color:#fff; text-underline-offset:3px; font-weight:600}
.utility{background:var(--navy-deep); color:#aebbd6; font-size:.76rem; border-bottom:1px solid rgba(195,159,87,.22)}
.utility .wrap{display:flex; gap:6px 20px; align-items:center; justify-content:flex-end; flex-wrap:wrap; padding-block:8px}
.utility a{color:#aebbd6; text-decoration:none; font-weight:600; letter-spacing:.06em}
.utility a:hover{color:#fff}
.langtog{display:inline-flex; border:1px solid rgba(195,159,87,.5); border-radius:100px; overflow:hidden}
.langtog button{background:none; border:0; color:#aebbd6; font:inherit; font-weight:700; letter-spacing:.1em;
  padding:3px 11px; cursor:pointer; font-size:.7rem}
.langtog button[aria-pressed="true"]{background:var(--gold); color:#12203c}

.masthead{background:var(--navy); color:#f2ecdf; position:sticky; top:0; z-index:60; border-bottom:1px solid rgba(195,159,87,.3)}
.masthead .wrap{display:flex; align-items:center; gap:16px; min-height:78px}
.brand{display:flex; align-items:center; color:#f2ecdf; text-decoration:none; flex:0 0 auto}
.brand svg{width:190px; height:auto; display:block}
@media(max-width:400px){.brand svg{width:150px}}
nav.main{margin-left:auto; display:none; gap:2px; align-items:center}
@media(min-width:1060px){nav.main{display:flex}}
nav.main a{text-decoration:none; font-size:.78rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:#dfe5f1; padding:10px 12px; border-radius:2px; position:relative}
nav.main a:hover{color:#fff; background:rgba(255,255,255,.07)}
nav.main a[aria-current="page"]{color:#fff}
nav.main a::after{content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px; background:var(--red);
  transform:scaleX(0); transform-origin:left; transition:transform .25s cubic-bezier(.2,.8,.2,1)}
nav.main a:hover::after,nav.main a[aria-current="page"]::after{transform:scaleX(1)}
.hdr-actions{margin-left:auto; display:flex; align-items:center; gap:10px}
@media(min-width:1060px){.hdr-actions{margin-left:12px}}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--body);
  font-weight:700; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; padding:12px 20px;
  border-radius:var(--r); border:1.5px solid transparent; cursor:pointer; text-decoration:none;
  position:relative; overflow:hidden; isolation:isolate;
  transition:background .15s ease, color .15s ease, border-color .15s ease}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; background:currentColor; opacity:0;
  transform:translateY(101%); transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.btn-red{background:var(--red); color:#fff; border-color:var(--red)}
.btn-red:hover{background:#9c0f1d; border-color:#9c0f1d}
.btn-ghost{background:transparent; color:currentColor; border-color:currentColor}
.btn-ghost:hover::before{opacity:.14; transform:translateY(0)}
.btn-outline{background:transparent; color:var(--red); border-color:var(--red)}
.btn-outline:hover{background:var(--red); color:#fff}
.btn-sm{padding:9px 15px; font-size:.74rem}
.burger{display:inline-flex; flex-direction:column; gap:4px; background:none; border:1.5px solid rgba(242,236,223,.45);
  border-radius:2px; padding:10px 11px; cursor:pointer}
@media(min-width:1060px){.burger{display:none}}
.burger i{display:block; width:18px; height:2px; background:#f2ecdf}
.drawer{display:none; background:var(--navy-deep); border-bottom:1px solid rgba(195,159,87,.3)}
.drawer.open{display:block}
.drawer .wrap{display:flex; flex-direction:column; padding-block:10px 18px}
.drawer a{color:#e8ecf6; text-decoration:none; padding:13px 2px; border-bottom:1px solid rgba(255,255,255,.08);
  font-weight:700; letter-spacing:.09em; text-transform:uppercase; font-size:.84rem}
.drawer a:last-child{border-bottom:0}

/* ---------- hero with photography ---------- */
.hero{padding-block:0; overflow:hidden}
.hero-inner{display:grid; grid-template-columns:1fr; align-items:center; position:relative; z-index:2}
@media(min-width:1000px){.hero-inner{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}
.hero-copy{padding:clamp(56px,8vw,112px) var(--gut) clamp(48px,6vw,96px)}
@media(min-width:1000px){.hero-copy{padding-left:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))); padding-right:clamp(24px,3vw,48px)}}
/* Hero headline sets its own leading: the global h1 value (.9) is tighter than the
   font’s ascender-to-descender height, so "place"/"athlete" descenders crowded the
   cap-height of the line below. .98 clears them without loosening the block. */
.hero h1{color:#fff; max-width:13ch; font-size:clamp(2.8rem,6.8vw,5rem); line-height:.98}
/* Spanish runs ~20% longer per line ("Encuentra el lugar" vs "Find the place"),
   so it needs its own ceiling to keep each phrase on one line. */
:root[lang="es"] .hero h1{font-size:clamp(2.05rem,5.4vw,3.9rem); max-width:15ch}
.hero h1 .ln{display:block; animation:riseLn .8s cubic-bezier(.16,.9,.24,1) both}
@keyframes riseLn{from{transform:translateY(16px)}to{transform:none}}
.hero h1 .ln:nth-child(1){animation-delay:.05s}
.hero h1 .ln:nth-child(2){animation-delay:.14s}
.hero h1 .ln:nth-child(3){animation-delay:.23s}
.hero h1 em{font-style:normal; color:var(--gold)}
.hero .lede{margin-top:26px; font-size:clamp(1.1rem,1.7vw,1.3rem); color:#d7dfef; max-width:48ch;
  animation:rise .85s .34s cubic-bezier(.16,.9,.24,1) both}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; animation:rise .85s .44s cubic-bezier(.16,.9,.24,1) both}
.hero-photo{margin:0; position:relative; align-self:stretch; min-height:clamp(260px,46vw,620px); animation:fadeIn 1.2s .1s both}
.hero-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; display:block}
.hero-photo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--navy) 0%, rgba(4,32,84,.62) 26%, rgba(4,32,84,.06) 66%),
             linear-gradient(0deg, rgba(4,32,84,.62), rgba(4,32,84,0) 48%)}
@media(max-width:999px){
  .hero-photo::after{background:linear-gradient(0deg, var(--navy) 0%, rgba(4,32,84,.5) 34%, rgba(4,32,84,0) 78%)}
  .hero-photo{min-height:300px}
}
.poppy-stage{position:absolute; z-index:1; left:-8%; bottom:-30%; width:min(58vw,620px); aspect-ratio:498/401;
  opacity:.22; pointer-events:none; animation:fadeIn 1.6s .2s both}
.poppy-stage svg{width:100%; height:100%; display:block}
@media(max-width:999px){.poppy-stage{left:-24%; bottom:auto; top:2%; width:96vw; opacity:.15}}

/* stat strip — red for key numbers, per the brand guide */
.statstrip{padding-block:0; background:var(--surface-3); border-bottom:1px solid var(--line)}
.statstrip .wrap{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.statstrip .wrap{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{padding:clamp(26px,3.6vw,42px) clamp(16px,2.4vw,30px); border-right:1px solid var(--line); display:grid; gap:2px; align-content:start}
.stat:nth-child(2n){border-right:0}
@media(min-width:900px){.stat:nth-child(2n){border-right:1px solid var(--line)} .stat:last-child{border-right:0}}
.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
@media(min-width:900px){.stat:nth-child(-n+2){border-bottom:0}}
.stat .num{font-family:var(--display); font-weight:700; font-size:clamp(2.2rem,6.4vw,4.9rem); line-height:.88;
  color:var(--red); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.stat .lbl{font-size:.7rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase; color:var(--ink); margin-top:12px}
.stat .sub{font-size:.88rem; line-height:1.45; color:var(--ink-2); max-width:28ch}

/* statement band over photography */
.statement{text-align:center; background:var(--navy)}
.statement::before{background:
  linear-gradient(0deg, rgba(4,32,84,.93), rgba(4,32,84,.86)),
  var(--statement-photo); background-size:cover,cover; background-position:center,center 38%}
.statement .eyebrow{justify-content:center}
.statement .eyebrow::after{display:none}
.statement .eyebrow::before{width:56px}
.statement blockquote{margin:24px auto 0; max-width:19ch; font-family:var(--display); font-weight:700;
  font-size:clamp(2.3rem,6.6vw,5rem); line-height:.95; letter-spacing:-.015em; color:#fff; text-wrap:balance}
.statement .attrib{margin-top:28px; font-size:.74rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase; color:var(--gold)}

/* photo slots — what still needs shooting */
.slot{position:relative; border:1.5px dashed var(--gold); background:
  repeating-linear-gradient(135deg, rgba(195,159,87,.07) 0 10px, transparent 10px 20px), var(--surface-3);
  display:flex; flex-direction:column; justify-content:flex-end; gap:5px; padding:16px; min-height:150px}
.band .slot{background:repeating-linear-gradient(135deg, rgba(195,159,87,.1) 0 10px, transparent 10px 20px), rgba(255,255,255,.04)}
.slot .ratio{position:absolute; top:12px; right:14px; font-size:.66rem; font-weight:700; letter-spacing:.12em;
  color:var(--gold); font-variant-numeric:tabular-nums}
.slot .n{font-family:var(--display); font-size:1.6rem; font-weight:700; color:var(--gold); line-height:1; opacity:.7}
.slot h3{font-size:.98rem}
.slot p{font-size:.85rem; line-height:1.45; color:var(--ink-2)}
.band .slot p{color:var(--band-ink-2)}
.slot.has{border-style:solid; border-color:var(--gold); padding:0; overflow:hidden}
.slot.has img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/9}
.slot.has .done{position:absolute; left:0; bottom:0; right:0; background:rgba(4,32,84,.86); color:#f2ecdf;
  padding:10px 14px; font-size:.78rem; font-weight:600}
.slot.done-tag::before{content:"✓ have"; position:absolute; top:12px; left:14px; z-index:2; background:var(--gold);
  color:#12203c; font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px}

/* ---------- shared blocks ---------- */
.head2{display:grid; gap:18px; margin-bottom:38px}
@media(min-width:900px){.head2{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:end; gap:44px}}
.grid{display:grid; gap:16px}
.g2{grid-template-columns:1fr} .g3{grid-template-columns:1fr} .g4{grid-template-columns:1fr}
@media(min-width:640px){.g2,.g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}}

.card{background:var(--surface-2); border:1px solid var(--line); padding:22px 20px; display:flex; flex-direction:column; gap:10px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease}
.card:hover{transform:translateY(-3px); border-color:var(--gold)}
.band .card{background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.14); color:var(--band-ink)}
.card .tag{font-size:.67rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--red)}
.band .card .tag{color:var(--gold)}
.card p{font-size:.95rem; line-height:1.55; color:var(--ink-2)}
.band .card p{color:var(--band-ink-2)}
.card ul{margin:0; padding-left:0; list-style:none; display:grid; gap:6px; font-size:.9rem; color:var(--ink-2)}
.band .card ul{color:var(--band-ink-2)}
.card ul li{padding-left:15px; position:relative}
.card ul li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:1px; background:var(--gold)}
.card ol{margin:0; padding-left:20px; display:grid; gap:7px}
.card ol li{padding-left:2px}
.link{font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--red);
  text-decoration:none; border-bottom:1.5px solid currentColor; padding-bottom:2px}
.band .link{color:var(--gold)}
.link:hover{opacity:.75}

/* ---------- finders ---------- */
.finder{background:var(--surface-2); border:1px solid var(--line); box-shadow:var(--shadow)}
.finder-controls{display:grid; gap:14px; padding:20px; border-bottom:1px solid var(--line)}
@media(min-width:760px){.finder-controls{grid-template-columns:repeat(3,1fr) auto; align-items:end; padding:22px 24px}}
.field{display:grid; gap:6px; min-width:0}
.field label{font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.field select{font-family:var(--body); font-size:.98rem; font-weight:600; color:var(--ink);
  background:var(--surface-3); border:1.5px solid var(--line); border-radius:var(--r); padding:11px 12px; width:100%; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:36px}
.finder-out{padding:20px}
@media(min-width:760px){.finder-out{padding:24px}}
.count{font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-bottom:14px}
.reset{background:none;border:0;color:var(--red);font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;padding:0 0 2px;border-bottom:1.5px solid currentColor;justify-self:start;margin-bottom:11px}
.result{display:grid; gap:12px; border-left:3px solid var(--red); background:var(--surface-3); padding:16px 18px;
  transition:border-left-width .2s ease}
.result:hover{border-left-width:7px}
.result + .result{margin-top:12px}
.result .rhead{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:baseline; justify-content:space-between}
.result h3{font-size:1.15rem}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line);
  padding:4px 9px; border-radius:100px; color:var(--ink-2); white-space:nowrap}
.chip.lvl{border-color:var(--gold); color:#7d6427}
.band .chip{border-color:rgba(255,255,255,.22); color:var(--band-ink-2)}
.band .chip.lvl{color:var(--gold)}
.empty{padding:26px 18px; text-align:center; border:1px dashed var(--line); color:var(--ink-2); font-size:.95rem}

/* ---------- free Friday clinic ----------
   Deliberately not a sixth rung on the pathway ladder: the clinic is a free
   door into the club, not a step on the competitive ladder, and the ladder's
   staircase layout is hard-wired to five children. */
/* No poppy wash here. The tile is drawn in navy for use on navy bands; over cream
   it composites to a flat grey-blue field that deletes the cream and drops body
   text to roughly 2:1. Cream carries what a parent reads — the red rule and the
   white fact card give this band its separation instead. */
.clinic{background:var(--surface-3); border-block:1px solid var(--line); position:relative}
.clinic::after{content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--red)}
.clinic-inner{display:grid; gap:28px; grid-template-columns:1fr; align-items:center}
@media(min-width:900px){.clinic-inner{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr); gap:46px}}
.clinic h2{font-size:clamp(1.85rem,3.6vw,2.65rem); max-width:19ch; margin:0 0 14px}
.clinic .lede{max-width:58ch; margin-bottom:22px}
.clinic-facts{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--surface-2);
  border:1px solid var(--line); box-shadow:var(--shadow)}
@media(min-width:900px){.clinic-facts{grid-template-columns:1fr}}
.clinic-facts li{padding:13px 17px; display:flex; flex-direction:column; gap:2px;
  border-bottom:1px solid var(--line-soft); min-width:0}
.clinic-facts li:last-child{border-bottom:0}
@media(max-width:899px){
  .clinic-facts li:nth-child(odd){border-right:1px solid var(--line-soft)}
  /* odd item count: the last cell spans the row rather than leaving a gap */
  .clinic-facts li:last-child:nth-child(odd){grid-column:1/-1; border-right:0}
}
.clinic-facts .k{font-size:.67rem; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ink-2)}
.clinic-facts .v{font-family:var(--display); font-size:1.14rem; font-weight:700;
  color:var(--navy); line-height:1.16; overflow-wrap:anywhere}
.clinic-facts li.is-free .v{color:var(--red)}

/* ---------- pathway ladder ---------- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--band-line); margin-bottom:26px; flex-wrap:wrap}
.tab{background:none; border:0; border-bottom:3px solid transparent; cursor:pointer; font:inherit; font-size:.8rem;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--band-ink-2); padding:11px 14px; margin-bottom:-1px}
.tab[aria-selected="true"]{color:#fff; border-bottom-color:var(--red)}
.ladder{display:grid; gap:10px; grid-template-columns:1fr; align-items:stretch}
@media(min-width:700px){.ladder{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){
  .ladder{grid-template-columns:repeat(5,1fr); padding-top:76px}
  .rung{min-height:266px}
  .rung:nth-child(1){transform:translateY(76px)} .rung:nth-child(2){transform:translateY(57px)}
  .rung:nth-child(3){transform:translateY(38px)} .rung:nth-child(4){transform:translateY(19px)}
  .rung:nth-child(5){transform:translateY(0)}
}
.rung{position:relative; padding:22px 20px 20px; background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.15); border-top:3px solid var(--gold);
  display:flex; flex-direction:column; gap:9px; animation:rise .6s cubic-bezier(.16,.9,.24,1) both}
.rung:nth-child(1){animation-delay:.02s} .rung:nth-child(2){animation-delay:.09s}
.rung:nth-child(3){animation-delay:.16s} .rung:nth-child(4){animation-delay:.23s}
.rung:nth-child(5){animation-delay:.3s; border-top-color:var(--red); background:rgba(182,18,34,.14)}
.rung .idx{font-family:var(--display); font-weight:700; font-size:2.9rem; line-height:.8; color:var(--gold);
  opacity:.42; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.rung:nth-child(5) .idx{color:var(--red); opacity:.85}
.rung .step{font-size:.66rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--gold)}
.rung:nth-child(5) .step{color:#ff8d99}
.rung h3{color:#fff; font-family:var(--display); font-size:1.42rem; font-weight:700; line-height:1.04}
.rung p{font-size:.89rem; line-height:1.5; color:var(--band-ink-2)}
.rung .yrs{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; font-weight:700;
  border-top:1px solid rgba(255,255,255,.16); padding-top:9px; margin-top:auto}

/* ---------- principles / steps ---------- */
.principles{display:grid; grid-template-columns:1fr; border-top:2px solid var(--gold)}
@media(min-width:560px){.principles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.principles{grid-template-columns:repeat(5,1fr)}}
.principle{padding:22px 18px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); transition:background .25s ease}
.principle:last-child{border-right:0}
.principle:hover{background:var(--surface-3)}
.principle .n{font-family:var(--display); font-size:2.4rem; font-weight:700; color:var(--red); line-height:1; opacity:.85}
.principle h3{margin:8px 0 6px; letter-spacing:.1em; text-transform:uppercase; font-size:.82rem}
.principle p{font-size:.92rem; color:var(--ink-2); line-height:1.5}
.steps{counter-reset:s; display:grid; grid-template-columns:1fr; border-top:1px solid var(--line)}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.step-i{counter-increment:s; padding:26px 22px 26px 0; border-bottom:1px solid var(--line); display:grid; gap:8px; align-content:start}
@media(min-width:860px){.step-i{border-bottom:0; border-right:1px solid var(--line); padding:26px}
  .step-i:first-child{padding-left:0} .step-i:last-child{border-right:0; padding-right:0}}
.step-i::before{content:counter(s,decimal-leading-zero); font-family:var(--display); font-size:2.1rem; font-weight:700; color:var(--gold)}
.steps.four{grid-template-columns:1fr}
@media(min-width:860px){.steps.four{grid-template-columns:repeat(4,1fr)}}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); background:var(--surface-2)}
table{border-collapse:collapse; width:100%; min-width:620px; font-size:.93rem}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line-soft)}
th{background:var(--navy); color:#fff; font-size:.73rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; position:sticky; top:0; border-bottom:0}
tbody tr:nth-child(even){background:var(--surface-3)}
tbody tr{transition:box-shadow .15s ease}
tbody tr:hover{box-shadow:inset 4px 0 0 var(--red)}
td.yr{font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink)}
/* Table data is read at a field on a phone — keep it at full strength.
   Unfielded rows are signalled by a tint and their own wording, never by opacity. */
td{color:var(--ink)}
td.dob{color:var(--ink); font-weight:600}
#e-body td, #m-body td{font-weight:600}
/* `.band .muted` (0,2,0) paints light-on-navy and was beating `table td .muted` (0,1,2),
   so muted cells inside a band’s table rendered light text on a cream table body.
   These selectors outrank it; tables carry their own light background inside bands. */
.band table td .muted, .band table td.muted,
table td .muted, table td.muted{color:#333d57; font-weight:500}
tbody tr.dim{background:rgba(195,159,87,.10)}
tbody tr.dim td{opacity:1}
.premark{display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--red); color:var(--red); background:rgba(182,18,34,.08); padding:1px 6px; border-radius:2px;
  vertical-align:middle; margin-left:6px; white-space:nowrap}
.bymark{display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--gold); color:#7d6427; background:rgba(195,159,87,.12); padding:1px 6px; border-radius:2px;
  vertical-align:middle; margin-left:6px; white-space:nowrap}
td .pg{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--red)}

/* ---------- misc ---------- */
/* ---- legal documents -------------------------------------------------
   Long-form statutory prose, which nothing else on this site is. Narrow
   measure, quiet headings, and the published all-caps blocks kept in caps
   but set smaller and looser so a wall of capitals is still readable. */
.legal{max-width:74ch; color:var(--ink); font-size:1rem; line-height:1.72}
.legal h2{font-size:clamp(1.15rem,2vw,1.42rem); line-height:1.25; margin:44px 0 14px;
  padding-top:18px; border-top:1px solid var(--line); text-transform:none; scroll-margin-top:96px}
.legal h2:first-child{margin-top:0; padding-top:0; border-top:0}
.legal h3{font-size:1.02rem; line-height:1.35; margin:28px 0 8px; color:var(--navy)}
.legal p{margin:0 0 15px}
.legal ul,.legal ol{margin:0 0 18px; padding-left:24px; display:grid; gap:9px}
.legal li{line-height:1.65}
.legal ul.topics{list-style:none; padding-left:0; gap:4px; font-size:.86rem;
  letter-spacing:.04em; color:var(--ink-2)}
.legal address{font-style:normal; margin:0 0 16px; line-height:1.6}
/* No uppercase here. This block carries the effective date and notice version,
   which are facts a reader may quote back to the club — they print as published. */
.legal p.docmeta{font-size:.9rem; color:var(--ink); font-weight:700; line-height:1.5;
  border-left:3px solid var(--gold); padding:4px 0 4px 14px; margin-bottom:22px}
/* The cookie inventory. A six-column table would need 900px and scroll sideways
   on every phone, so each cookie is its own labelled block instead — same data,
   no sideways scroll, and the cookie name stays scannable. */
.legal .cookies{display:grid; gap:12px; margin:0 0 22px}
.legal dl.cookie{margin:0; border:1px solid var(--line); background:var(--surface-2);
  padding:14px 16px; display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:.9rem}
.legal dl.cookie dt{font-weight:700; color:var(--navy); font-size:.72rem; letter-spacing:.09em;
  text-transform:uppercase; padding-top:3px}
.legal dl.cookie dd{margin:0; color:var(--ink); min-width:0; overflow-wrap:anywhere}
.legal dl.cookie code{font-size:.92em; background:var(--surface-3); padding:1px 6px;
  border:1px solid var(--line-soft); font-weight:600}
@media(max-width:560px){
  .legal dl.cookie{grid-template-columns:1fr; gap:2px}
  .legal dl.cookie dt{padding-top:9px}
}
.legal ul.linklist{display:flex; flex-wrap:wrap; gap:6px 18px; padding-left:0; list-style:none;
  margin:0 0 18px}
.legal .capsrun{letter-spacing:.015em}
.legal p.caps{font-size:.9rem; line-height:1.68; letter-spacing:.012em; color:var(--ink-2)}
.legal p.credit{margin-top:40px; padding-top:18px; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--ink-2)}
.legal a{color:var(--red); font-weight:600; word-break:break-word}
/* The Termly policy leads each section with an "In Short" plain-language line.
   It is the part most readers will actually read, so it is set apart rather
   than left to look like another paragraph. */
.legal p.inshort{background:var(--surface-3); border-left:3px solid var(--navy);
  padding:12px 16px; margin:0 0 16px; font-size:.95rem; color:var(--ink)}
.legal .tablewrap{margin:0 0 20px}
.legal table.cats{min-width:560px; font-size:.88rem}
.legal table.cats td:first-child{font-weight:600; width:26%}
.legal table.cats td.yn{text-align:center; font-weight:700; letter-spacing:.06em; width:92px}
.legal table.cats td.yn.yes{color:var(--navy)}
.legal table.cats td.yn.no{color:var(--ink-2)}
.legaltoc{display:flex; flex-wrap:wrap; gap:7px 9px; margin:0 0 36px; max-width:74ch}
.legaltoc a{font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--navy); text-decoration:none; border:1px solid var(--line);
  background:var(--surface-2); padding:7px 11px}
.legaltoc a:hover{background:var(--navy); color:#fff; border-color:var(--navy)}
.legalmore{margin-top:52px; padding-top:26px; border-top:2px solid var(--navy); max-width:74ch}
.legalmore-btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.note{border-left:3px solid var(--gold); background:var(--surface-3); padding:15px 18px; font-size:.9rem; line-height:1.55; color:var(--ink-2)}
.band .note{background:rgba(195,159,87,.1); color:var(--band-ink-2)}
.note b{color:var(--ink); font-weight:700}
.band .note b{color:#fff}
.callout{border:1px solid var(--line); background:var(--surface-2); padding:26px 24px}
/* A callout inside a navy band paints its own light surface, so it has to reset the
   inherited band ink. `.band .muted` (0,2,0) also outranks `.muted`, which left the SCV
   paragraph light blue-grey on white. Both are forced back to the reading colours. */
.band .callout{color:var(--ink)}
.band .callout .muted,.band .callout .small{color:var(--ink-2)}
.band .callout h3{color:var(--ink)}
.q{display:grid; gap:6px; padding:16px 0; border-bottom:1px solid var(--line-soft)}
.q:last-child{border-bottom:0}
.q dt{font-weight:700; font-size:.98rem}
.q dd{margin:0; font-size:.95rem; color:var(--ink-2); line-height:1.55}
details.prog{border:1px solid var(--line); background:var(--surface-2); margin-bottom:12px}
details.prog > summary{cursor:pointer; list-style:none; padding:18px 20px; display:flex; gap:14px; align-items:center; flex-wrap:wrap}
details.prog > summary::-webkit-details-marker{display:none}
details.prog > summary::after{content:"+"; margin-left:auto; font-family:var(--display); font-size:1.6rem; color:var(--red); line-height:1}
details.prog[open] > summary::after{content:"–"}
details.prog[open] > summary{border-bottom:1px solid var(--line)}
details.prog .body{padding:20px; display:grid; gap:18px}
@media(min-width:860px){details.prog .body{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px 34px}}
.spec{display:grid}
.spec .row{display:grid; grid-template-columns:132px 1fr; gap:14px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:.92rem}
.spec .row:last-child{border-bottom:0}
.spec dt{font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); padding-top:3px}
.spec dd{margin:0}
.tbc{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8a6d1f;
  background:rgba(195,159,87,.18); padding:2px 7px; border-radius:2px; white-space:nowrap}
.pagehead{padding-block:clamp(48px,6.5vw,92px)}
/* Page headlines set their own leading. The global h1 value (.9) is tighter than this
   font’s ascender-to-descender height, so a descender on one line meets an apostrophe or
   cap on the next — "young" over "someone’s" on the safety page touched exactly. */
.pagehead h1{color:#fff; font-size:clamp(2.4rem,6vw,4.4rem); line-height:.98}
.giving{display:grid; gap:0; grid-template-columns:1fr; border-top:2px solid var(--gold)}
@media(min-width:800px){.giving{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.giving{grid-template-columns:repeat(4,1fr)}}
/* The proof row carries five figures, not four. Five across at the widest width;
   at the two-column width an odd last tile spans the row instead of sitting alone. */
@media(min-width:1100px){#proofSlots{grid-template-columns:repeat(5,1fr)}}
@media(min-width:800px) and (max-width:1099px){
  #proofSlots .give:last-child:nth-child(odd){grid-column:1/-1; border-right:0}
}
.give{padding:24px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; gap:8px; align-content:start}
.give:last-child{border-right:0}
.give .n{font-family:var(--display); font-size:2.2rem; font-weight:700; color:var(--red); line-height:1}

footer.site{background:var(--navy-deep); color:#cfd8ea; padding-block:56px 30px; border-top:3px solid var(--red)}
footer.site .cols{display:grid; gap:30px; grid-template-columns:1fr}
@media(min-width:700px){footer.site .cols{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){footer.site .cols{grid-template-columns:1.4fr 1fr 1fr 1fr}}
footer.site h4{font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin:0 0 12px; font-weight:700}
footer.site ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.92rem}
footer.site a{color:#cfd8ea; text-decoration:none}
footer.site a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
footer.site .base a{color:#cfd8ea; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(207,216,234,.4)}
footer.site .base a:hover{color:#fff; text-decoration-color:#fff}
footer.site .base{margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.13);
  display:flex; flex-wrap:wrap; gap:10px 22px; font-size:.82rem; color:#95a3c0}
footer.site .brandmark svg{width:230px; height:auto; color:#f2ecdf}

.actionbar{position:fixed; left:0; right:0; bottom:0; z-index:70; display:flex; gap:8px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background:var(--navy); border-top:1px solid rgba(195,159,87,.35)}
.actionbar .btn{flex:1; padding:13px 8px; font-size:.75rem}
@media(min-width:1060px){.actionbar{display:none}}
@media(max-width:1059px){body{padding-bottom:74px}}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; z-index:200; background:#fff; color:var(--navy); padding:10px 14px; font-weight:700}
[hidden]{display:none!important}
.page{display:none}
.page.active{display:block}
#esNote{display:none}
:root[lang="es"] #esNote{display:block}

/* ---- page shell ----
   The prototype was served inside the Artifact host, which supplied the doctype,
   charset, viewport and these safe-area insets around the page. A standalone page
   has to carry them itself; layout.html has the first three, these are the last. */
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}