/* okaigo.ca landing page. Brand colours come from site.css variables; the breakout mark is the one bold element. */
.landing{--gutter:max(clamp(1rem,5vw,3rem),calc((100% - 1100px)/2));--navy:#0e3359;--deep:#0a2444;--copper:#e3a470;--rust:#a4552f;--cream:#fffaf4;background:var(--cream)}
.landing .masthead{padding-inline:var(--gutter)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.landing h1,.landing h2,.landing h3{font-family:Outfit,var(--sans);letter-spacing:-.02em;color:var(--navy)}
.button{display:inline-block;padding:.85rem 1.4rem;border-radius:999px;font-weight:700;text-decoration:none;line-height:1.3}
.button:focus-visible{outline:3px solid var(--copper);outline-offset:4px}
.button--primary{background:var(--copper);color:var(--deep)}.button--primary:hover{background:#efbd92;color:var(--deep)}
.button--quiet{color:var(--cream);box-shadow:inset 0 0 0 2px #fffaf466}.button--quiet:hover{color:#fff;box-shadow:inset 0 0 0 2px var(--cream)}
.button--dark{background:var(--deep);color:var(--cream)}.button--dark:hover{background:var(--navy);color:#fff}

/* Splash: the headline is the brand's question; the mark breaks out of the top edge. */
.splash{position:relative;overflow:hidden;background:var(--deep);color:var(--cream);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end;gap:2rem;padding:clamp(4rem,9vw,8rem) var(--gutter) clamp(3.5rem,7vw,6rem)}
.splash h1{color:var(--cream);font-weight:800;font-size:clamp(3.2rem,9.5vw,8.4rem);line-height:.92;letter-spacing:-.045em;margin:0 0 2rem}
.splash-lead{font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.55;max-width:34ch;color:#e9e1d6;margin:0 0 2.4rem}
.splash-actions{display:flex;flex-wrap:wrap;gap:14px;margin:0}
.hero-mark{width:100%;max-width:500px;justify-self:end;align-self:start;margin-top:calc(-1 * clamp(4rem,9vw,8rem) - 28px);margin-right:-4%;overflow:visible}
.hero-ring{stroke:var(--copper)}.hero-arrow{stroke:var(--cream)}
@media(prefers-reduced-motion:no-preference){
 .hero-mark.is-ready .hero-arrow{stroke-dasharray:1;stroke-dashoffset:1;animation:breakout .9s .25s cubic-bezier(.2,.7,.2,1) forwards}
 @keyframes breakout{to{stroke-dashoffset:0}}
}

/* Route: lessons are a real sequence, so the numbers carry meaning. */
.route{padding:clamp(3.5rem,7vw,6rem) var(--gutter)}
.route-intro{max-width:640px;margin-bottom:2.5rem}.route-intro h2{font-size:clamp(2rem,4vw,3rem);margin:0 0 1rem}.route-intro p{color:var(--muted);font-size:1.1rem}
.route-list{list-style:none;margin:0;padding:0;position:relative}
.route-list::before{content:"";position:absolute;left:31px;top:20px;bottom:20px;width:3px;background:linear-gradient(var(--copper),var(--rust))}
.route-list li{display:grid;grid-template-columns:66px minmax(0,1fr);gap:1.4rem;margin:0 0 2.2rem;position:relative}
.route-number{width:66px;height:66px;border-radius:50%;background:var(--navy);color:var(--cream);display:grid;place-items:center;font:800 1.6rem/1 Outfit,var(--sans);box-shadow:0 0 0 6px var(--cream)}
.route-list h3{font-size:clamp(1.3rem,2.4vw,1.75rem);margin:.55rem 0 .4rem;line-height:1.2}.route-list h3 a{color:var(--navy);text-decoration-thickness:2px;text-decoration-color:var(--copper)}
.route-list h3 a:hover{color:var(--rust)}.route-list p{margin:0;color:var(--ink);max-width:60ch}
.route-next{margin:1rem 0 0 calc(66px + 1.4rem);padding-top:1.6rem;border-top:1px solid var(--line)}
.route-next h3{font-size:1.1rem;margin:0 0 .8rem;color:var(--muted)}
.route-next ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.4rem 1.6rem;color:var(--muted)}
.route-next li{margin:0}.route-next span{display:inline-block;min-width:1.6em;font-weight:700;color:var(--rust)}

/* Loop */
.loop{background:#f4eee7;padding:clamp(3.5rem,7vw,6rem) var(--gutter)}
.loop h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:2.2rem}
.loop-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.loop-steps li{margin:0;border-top:3px solid var(--navy);padding-top:1.1rem}
.loop-steps h3{font-size:1.5rem;margin:0 0 .5rem}.loop-steps p{margin:0;font-size:1rem}
.loop-note{margin:2.4rem 0 0;max-width:62ch;color:var(--muted)}

/* Newsletter band */
.newsletter-band{background:var(--copper);display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;padding:clamp(2.5rem,5vw,4rem) var(--gutter)}
.newsletter-band h2{color:var(--deep);font-size:clamp(1.8rem,3vw,2.4rem);margin:0 0 .6rem}.newsletter-band p{margin:0;max-width:52ch;color:var(--deep)}

.about{padding:clamp(3rem,6vw,5rem) var(--gutter)}
.about h2{font-size:clamp(1.8rem,3vw,2.4rem)}.about p{max-width:62ch}
.landing .footer{padding-inline:var(--gutter)}

@media(max-width:860px){
 .splash{grid-template-columns:1fr;padding-top:5.5rem}
 .hero-mark{position:absolute;top:-34px;right:-40px;width:230px;margin:0;opacity:.9}
 .splash-copy{position:relative}
 .loop-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
 .hero-mark{width:170px;top:-26px;right:-34px}
 .route-list::before{left:23px}.route-list li{grid-template-columns:50px minmax(0,1fr);gap:1rem}
 .route-number{width:50px;height:50px;font-size:1.25rem}.route-next{margin-left:0}
 .loop-steps{grid-template-columns:1fr}
}
.landing main{border-left:0}