header{display:grid;grid-template-columns:1fr auto;row-gap:24px;max-width:none;padding:30px 4% 20px}
header .brand-title{grid-column:1/-1;display:flex;justify-content:center;align-items:baseline;width:100%;font-family:Arial,Helvetica,sans-serif;font-size:clamp(32px,8.1vw,160px);font-weight:900;line-height:.85;letter-spacing:-.075em;text-transform:uppercase;white-space:nowrap;padding:0 0 10px}
header .brand-title span{font:inherit;font-style:normal;letter-spacing:inherit;line-height:inherit}
header nav{justify-self:start;display:flex}
header .languages{justify-self:end}
@media(max-width:650px){header{padding:24px 6% 16px;row-gap:20px}header .brand-title{font-size:7.7vw;line-height:.95;padding-bottom:0}header nav{display:flex;gap:18px;font-size:9px}header .languages{font-size:10px}}
@media(max-width:360px){header nav{gap:10px;font-size:8px}}

header .brand-title{text-align:center;display:block}

/* Balanced discovery introduction, shared by both design directions. */
#inside .section-heading{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(40px,7vw,110px);max-width:1180px;margin:0 auto 56px}
#inside .section-heading>div{min-width:0}
#inside .section-heading .eyebrow{font-size:13px;line-height:1.4;letter-spacing:.15em;margin:0 0 22px}
#inside .section-heading h2{font-size:clamp(56px,6.1vw,88px);line-height:1.02;margin:0;letter-spacing:-.055em}
#inside .section-heading>p{align-self:center;justify-self:start;font-size:clamp(20px,1.8vw,25px);line-height:1.6;letter-spacing:-.015em;width:100%;max-width:410px;margin:0;padding-top:38px;text-align:left;text-wrap:pretty}
@media(min-width:651px) and (max-width:850px){#inside .section-heading{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:32px}#inside .section-heading h2{font-size:55px}#inside .section-heading>p{font-size:20px}}
@media(max-width:650px){#inside .section-heading{grid-template-columns:1fr;gap:26px;margin-bottom:36px}#inside .section-heading .eyebrow{font-size:12px;margin-bottom:18px}#inside .section-heading h2{font-size:clamp(44px,10.6vw,64px);line-height:1.04}#inside .section-heading>p{max-width:440px;padding-top:0;font-size:20px;line-height:1.6}}

header nav{font-size:18px;gap:36px;line-height:1.4}
header nav a{padding:8px 0}
@media(max-width:650px){header nav{font-size:14px;gap:18px;letter-spacing:0;text-transform:none}header nav a{padding:8px 0}}
@media(max-width:380px){header nav{font-size:13px;gap:12px}header{column-gap:14px}}

/* Center the complete introduction within its own section space. */
#inside{padding-top:0}
#inside .section-heading{width:100%;max-width:1080px;min-height:430px;margin:0 auto;padding:64px 0;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,90px);align-content:center;align-items:center}
#inside .section-heading>p{padding-top:0;justify-self:center;align-self:center}
@media(max-width:850px) and (min-width:651px){#inside .section-heading{min-height:370px;gap:32px}}
@media(max-width:650px){#inside .section-heading{grid-template-columns:1fr;min-height:0;padding:50px 0;gap:26px}#inside .section-heading>p{justify-self:start}}

.faq>.eyebrow{font-size:18px;line-height:1.5;letter-spacing:.12em;margin-bottom:22px}
@media(max-width:650px){.faq>.eyebrow{font-size:15px;letter-spacing:.09em}}

footer{flex-wrap:wrap;row-gap:28px}
footer .footer-instagram{width:100%;display:flex;justify-content:center;align-items:center;gap:13px;padding:24px 0 4px;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);font-size:15px;line-height:1.45}
footer .footer-instagram svg{flex:none}
footer .instagram-copy{display:flex;flex-direction:column;align-items:flex-start}
footer .instagram-handle{font-size:12px;opacity:.8}
footer .footer-instagram:hover .instagram-copy>span:first-child{text-decoration:underline;text-underline-offset:4px}
@media(max-width:650px){footer .footer-instagram{justify-content:flex-start;font-size:14px}}

.ticker{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:clamp(16px,3vw,42px);min-height:88px;padding:28px 5%;white-space:normal;text-align:center;overflow:visible}
.ticker>span{flex:0 0 auto}
.ticker .ticker-star{font-size:20px;line-height:1;letter-spacing:0}
@media(max-width:650px){.ticker{gap:14px 18px;padding:26px 6%}.ticker>span:not(.ticker-star){font-size:10px;letter-spacing:.08em}.ticker .ticker-star{font-size:16px}}

/* Match the original “Your year” display typography. */
header .brand-title{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.055em;line-height:1.04;font-size:clamp(30px,7.8vw,156px)}
@media(max-width:650px){header .brand-title{font-size:7.5vw;line-height:1.1}}

/* Green accents highlight links and interactive controls. */
:root{--interaction-accent:#507a39;--interaction-fill:#a7c88b;--interaction-on-dark:#bddba8;--footer-accent:var(--interaction-accent)}
a,button,summary{transition:color .16s ease,background-color .16s ease,border-color .16s ease}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--interaction-accent);outline-offset:5px}
main a:is(:focus-visible,:active),header a:is(:focus-visible,:active),summary:is(:focus-visible,:active),button:not(.primary):not(:disabled):is(:focus-visible,:active){color:var(--interaction-accent)}
.primary:is(:focus-visible,:active){background:var(--interaction-fill);border-color:var(--interaction-fill);color:var(--ink)}
footer .footer-instagram:is(:focus-visible,:active) .instagram-copy>span:first-child{text-decoration:underline;text-decoration-color:var(--footer-accent);text-underline-offset:5px}
footer .footer-instagram:is(:focus-visible,:active) svg{color:var(--footer-accent)}
@media(hover:hover) and (pointer:fine){
 main a:hover,header a:hover,summary:hover,button:not(.primary):not(:disabled):hover{color:var(--interaction-accent)}
 .primary:hover{background:var(--interaction-fill);border-color:var(--interaction-fill);color:var(--ink)}
 footer .footer-instagram:hover .instagram-copy>span:first-child{text-decoration:underline;text-decoration-color:var(--footer-accent);text-underline-offset:5px}
 footer .footer-instagram:hover svg{color:var(--footer-accent)}
}
@media(prefers-reduced-motion:reduce){a,button,summary{transition:none}}

footer .footer-wordmark{display:flex;flex-direction:column;align-items:center;font-family:'Playfair Display',Georgia,serif;font-size:36px;font-weight:500;letter-spacing:-.055em;line-height:1.08;text-transform:uppercase}
footer .footer-wordmark>span{font:inherit;letter-spacing:inherit;line-height:inherit;font-style:normal}
@media(max-width:650px){footer .footer-wordmark{font-size:30px}}

.experience-symbol{width:1.25em;height:1.25em;display:flex;align-items:center;justify-content:center;transform-origin:center}
.experience-grid article:nth-child(1) .experience-symbol{animation:ritual-turn 28s linear infinite}
.experience-grid article:nth-child(2) .experience-symbol{animation:reflection-float 7s ease-in-out infinite}
.experience-grid article:nth-child(3) .experience-symbol{animation:journey-drift 6s ease-in-out infinite}
.experience-grid.motion-paused .experience-symbol{animation-play-state:paused}
.motion-controls{display:flex;justify-content:flex-end;margin-top:22px}
.motion-controls button{font:inherit;font-size:11px;line-height:1.5;background:transparent;border:0;border-bottom:1px solid currentColor;padding:8px 0;color:var(--muted)}
@keyframes ritual-turn{to{transform:rotate(360deg)}}
@keyframes reflection-float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-7px) rotate(5deg)}}
@keyframes journey-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(5px,-5px)}}
@media(prefers-reduced-motion:reduce){.experience-grid article .experience-symbol{animation:none}.motion-controls{display:none}}

.suit-symbols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;max-width:900px;margin:0 auto;padding:24px 0 38px;gap:24px}
.suit-item{display:flex;flex-direction:column;align-items:center;gap:18px;margin:0;min-width:0}
.suit-icon{display:block;width:72px;height:72px;flex:none;transform-origin:center}
.suit-item figcaption{font-size:11px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase}
#inside .experience-grid{border-top:0}
.suit-pentacles{animation:ritual-turn 32s linear infinite}
.suit-swords{animation:reflection-float 8s ease-in-out infinite}
.suit-wands{animation:wand-sway 9s ease-in-out infinite}
.suit-cups{animation:cup-float 7s ease-in-out infinite}
.suit-symbols.motion-paused .suit-icon{animation-play-state:paused}
@keyframes wand-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes cup-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:650px){.suit-symbols{padding:10px 0 30px;gap:10px}.suit-icon{width:52px;height:52px}.suit-item{gap:13px}.suit-item figcaption{font-size:9px;letter-spacing:.04em}}
@media(prefers-reduced-motion:reduce){.suit-symbols .suit-icon{animation:none}}

/* Place the four suits with the three themes, without visible labels. */
.experience-grid .suit-cluster{display:flex;align-items:center;justify-content:flex-start;gap:14px;min-height:100px;margin:0 0 25px;padding:12px 0}
.experience-grid .suit-cluster .suit-icon{width:68px;height:68px}
.experience-grid.motion-paused .suit-icon{animation-play-state:paused}
@media(max-width:650px){.experience-grid .suit-cluster{min-height:80px;margin-bottom:18px;gap:16px}.experience-grid .suit-cluster .suit-icon{width:58px;height:58px}}
@media(prefers-reduced-motion:reduce){.experience-grid .suit-icon{animation:none}}

/* Center every suit group over its own text column. */
#inside .experience-grid{align-items:start;column-gap:0}
#inside .experience-grid article{padding:28px clamp(16px,2.4vw,36px) 0;text-align:center;min-width:0}
#inside .experience-grid .suit-cluster{justify-content:center;align-items:center;min-height:100px;margin:0 0 24px;padding:12px 0}
#inside .experience-grid h3{display:flex;align-items:center;justify-content:center;min-height:2.4em;margin:0 0 14px}
#inside .experience-grid article>p{max-width:310px;margin:0 auto;text-align:center}
@media(max-width:650px){#inside .experience-grid article{padding:26px 12px}#inside .experience-grid .suit-cluster{min-height:80px;margin-bottom:18px}#inside .experience-grid h3{min-height:0;margin-bottom:14px}#inside .experience-grid article>p{max-width:360px}}