.compassExplorer{width:100%;max-width:480px;margin:auto;text-align:center}
.compassHint{font-size:.8rem!important;letter-spacing:.035em;color:#e3eff8!important;margin:0 0 14px!important;max-width:none!important}
.interactiveCompass{position:relative;width:100%;aspect-ratio:1;isolation:isolate;border-radius:50%;background:radial-gradient(circle,#6891ad33,#12385577);box-shadow:0 20px 55px #071d3633}
.compassRing{position:absolute;inset:3%;border-radius:50%;background:conic-gradient(from -45deg,#f6f8fb 0deg 90deg,#efc64d 90deg 180deg,#d84e4a 180deg 270deg,#18242e 270deg 360deg);mask:radial-gradient(circle,transparent 64%,#000 64.5%);-webkit-mask:radial-gradient(circle,transparent 64%,#000 64.5%);filter:drop-shadow(0 0 8px #ffffff22);pointer-events:none}
.compassRose{position:absolute;inset:8%;width:84%;height:84%;fill:#b5d6f01c;stroke:#c4dced55;stroke-width:1.4;pointer-events:none}
.compassDirection{position:absolute;z-index:2;transform:translate(-50%,-50%);min-height:48px;min-width:70px;padding:10px 13px;border:1px solid #d3e9f04d;border-radius:14px;background:#173a54e8;color:white;font:600 clamp(.88rem,1.5vw,1.18rem)/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;cursor:pointer;box-shadow:0 5px 15px #00132644;transition:background .15s,box-shadow .15s}
.compassDirection:hover{background:#365f7a}.compassDirection[aria-pressed=true]{border:2px solid var(--direction);box-shadow:0 0 0 5px #dceafa1f,0 0 25px #cbe8fc33;background:#294e68}
.compassEast{left:79%;top:50%;--direction:#f5d165}.compassSouth{left:50%;top:79%;--direction:#ed7771}.compassWest{left:21%;top:50%;--direction:#95a3af}.compassNorth{left:50%;top:21%;--direction:#fff}.compassCenter{left:50%;top:50%;--direction:#76d597;background:#195a41;border-radius:50%;width:78px;height:78px;min-width:0;padding:8px}.compassCenter[aria-pressed=true]{background:#226c4f}
.compassDetail{margin-top:20px;min-height:214px;padding:22px 24px;background:#12334bd9;border:1px solid #c3e0f433;border-radius:22px;backdrop-filter:blur(10px)}
.compassStage{font-size:.72rem;color:#ffe19e;letter-spacing:.06em}.compassTitle{font-size:1.35rem;line-height:1.3;margin:7px 0 10px}.hero .compassDescription{font-size:.94rem;line-height:1.55;margin:0;max-width:none}.compassAppLink{display:inline-block;color:#c5e7fb;font-size:.8rem;margin-top:13px;padding:6px 0;text-underline-offset:4px}
@media(max-width:768px){.heroVisual{grid-row:auto}.compassExplorer{max-width:390px}.heroGrid{gap:36px}.compassDetail{min-height:0}.compassDirection{font-size:.92rem;min-width:62px;padding:9px}.compassCenter{min-width:0;width:64px;height:64px;font-size:.8rem}.compassHint{font-size:.78rem!important}}
@media(max-width:360px){.compassDirection{min-width:56px;font-size:.8rem;padding:8px}.compassCenter{min-width:0;width:58px;height:58px}}
@media(prefers-reduced-motion:reduce){.compassDirection{transition:none}}
/* Use the same compass artwork and hero treatment as the Adulthood reference. */
.heroGrid{grid-template-columns:1.05fr 1fr;gap:42px;align-items:start}
.hero{padding:64px 0 42px}
.heroGrid>.heroCard:not(.heroVisual){background:#0b1d26bd;border:1px solid #ffffff24;border-radius:28px;padding:36px;backdrop-filter:blur(10px);text-align:left;margin-top:20px}
.heroCard h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(2.8rem,4.4vw,4.5rem);font-weight:400;line-height:1.12;letter-spacing:-.045em;max-width:none;text-shadow:none;margin:20px 0 28px}
.heroCard h1 em{display:block;font-weight:400;color:#f3ca83;margin-top:10px}
.heroCard .eyebrow{display:block;background:none;border:0;border-radius:0;padding:0;font-size:.78rem;margin-bottom:20px;color:#efc665}
.heroCard p{color:#e1e6e3;line-height:1.7}.heroButtons{justify-content:flex-start}
.heroCard .btn{border-radius:8px}.btnPrimary{background:#ecc061;color:#12232b;box-shadow:none}.btnSecondary{background:#10232c66;border-color:#afc6cb66}
header{background:#101c23ed}.nav{min-height:68px}.brandText strong{font-size:.92rem}nav a{font-weight:400}
.compassExplorer{max-width:550px;display:flex;flex-direction:column}
.interactiveCompass{order:0;background:none;box-shadow:none;filter:drop-shadow(0 12px 20px #0005)}
.heroVisual img.compassArtwork{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;max-width:none;object-fit:contain;border:0;border-radius:0;filter:none;opacity:1;z-index:0}
.compassHint{order:1;margin:16px 0 0!important;font-size:1rem!important;color:white!important;font-weight:600;text-shadow:0 2px 6px #000}
.compassDetail{order:2;background:#0b1d26c9;margin-top:22px;min-height:0}.compassTitle{font-family:Georgia,serif;font-weight:400;font-size:1.65rem}
.compassDirection{border-radius:999px;min-width:84px;min-height:48px;padding:10px 17px;font-weight:800;font-size:clamp(.88rem,1.35vw,1.05rem);text-transform:uppercase;letter-spacing:.02em;border:2px solid #e7eeee9c}
.compassDirection[aria-pressed=true]{box-shadow:0 0 0 4px #ffffff66,0 4px 15px #0005;filter:brightness(1.08)}
.compassNorth,.compassNorth[aria-pressed=true]{left:50%;top:16%;background:#f6f7f4ed;color:#102026;border-color:#e7eeee9c}
.compassEast,.compassEast[aria-pressed=true]{left:84%;top:50%;background:#ebc82eef;color:#162024;border-color:#ffe278}
.compassSouth,.compassSouth[aria-pressed=true]{left:50%;top:84%;background:#b63334f2;color:white;border-color:#e67e75}
.compassWest,.compassWest[aria-pressed=true]{left:16%;top:50%;background:#070b0af2;color:white;border-color:#e7eeee9c}
.compassCenter,.compassCenter[aria-pressed=true]{left:50%;top:50%;background:#185c4fee;color:white;border-color:#65a994;min-width:104px;min-height:56px;width:auto;height:auto}
@media(max-width:850px){.heroGrid{grid-template-columns:1fr;gap:28px}.hero{padding:32px 0}.heroGrid>.heroCard:not(.heroVisual){margin-top:0}.compassExplorer{max-width:480px}.heroCard h1{font-size:3.5rem}.heroCard p{margin-left:0}}
@media(max-width:560px){.heroGrid>.heroCard:not(.heroVisual){padding:25px 22px}.heroCard h1{font-size:clamp(2.35rem,9vw,3rem);margin-left:0;margin-right:0}.compassExplorer{max-width:390px}.compassDirection{min-width:66px;min-height:44px;padding:8px 9px;font-size:.875rem;letter-spacing:0}.compassCenter{min-width:80px;min-height:48px}.compassNorth{top:15%}.compassSouth{top:85%}.compassHint{font-size:.85rem!important}.compassDetail{padding:20px}.heroButtons .btn{font-size:.85rem}}