/* Askwa — © 2026 Onakeio Systems Inc. · Code: Johan Cobo · Verified by: Oscar Martinez C
   askwa.ca: one page per language, no script, no third-party font or file (Content-Security-Policy in the Caddyfile). */
:root{--ink:#25302B;--terra:#BA7761;--ground:#F7F6F2;--cream:#F4F1E8;--paper:#FFFFFF;--line:#E3E0D7;--muted:#5F675F;--good:#4E7D5B;--blue:#2B7BB9}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font:16px/1.6 Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
header.top{position:absolute;top:0;left:0;right:0;z-index:3;color:var(--cream)}
header.top .wrap{display:flex;align-items:center;gap:18px;height:84px}
.lockup{display:inline-flex;flex-direction:column;align-items:center;margin:0 0 28px}
.hero-logo{display:block;height:104px;width:auto;margin:0 0 8px}
.hero-by{display:flex;align-items:center;gap:9px;margin:0;font-size:14px;letter-spacing:.02em;color:var(--cream);opacity:.85}
.hero-by img{height:30px;width:30px;display:block}
header.top nav a{text-decoration:none}
header.top nav a:hover{text-decoration:underline}
header.top nav{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:18px;font-size:14px}
header.top nav .btn{background:var(--cream);color:var(--ink)}
.lang{display:flex;border:1px solid rgba(244,241,232,.35);border-radius:8px;overflow:hidden}
.lang a,.lang span{padding:5px 11px;font-weight:600;font-size:13px;text-decoration:none;color:var(--cream);opacity:.8}
.lang span{background:var(--cream);color:var(--ink);opacity:1}
.btn{display:inline-block;white-space:nowrap;background:var(--ink);color:var(--cream);text-decoration:none;font-weight:600;font-size:14.5px;padding:10px 18px;border-radius:9px}
.btn.light{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.btn:hover{opacity:.92}
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--cream);isolation:isolate}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero .tint{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(21,29,25,.46) 0%,rgba(21,29,25,.3) 40%,rgba(21,29,25,.06) 72%,rgba(21,29,25,0) 100%),linear-gradient(180deg,rgba(21,29,25,.26) 0%,rgba(21,29,25,0) 22%,rgba(21,29,25,0) 100%)}
.hero .tint::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(244,241,232,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(244,241,232,.04) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(180deg,transparent 0,#000 25%,#000 75%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 25%,#000 75%,transparent 100%)}
.hero .wrap{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;padding-top:124px;padding-bottom:88px}
.hero .copy{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero .tags{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hero .tags li{font:600 12px/1 ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);opacity:.85;border:1px solid rgba(244,241,232,.3);border-radius:999px;padding:8px 12px;backdrop-filter:blur(6px)}
.eyebrow{font:700 12.5px/1.5 ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--terra);margin:0 0 16px;padding-left:22px;position:relative}
.eyebrow::before{content:"";position:absolute;left:0;top:9px;width:14px;height:2px;background:var(--terra)}
h1{font-size:clamp(34px,3.6vw,48px);line-height:1.08;letter-spacing:-.03em;margin:0 0 18px;font-weight:700;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero p.lead{font-size:17px;opacity:.95;margin:0 0 26px;max-width:520px;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn{background:var(--terra);color:#fff}
.hero .btn.light{background:transparent;color:var(--cream);border-color:rgba(244,241,232,.35)}
figure.shot{margin:0;background:rgba(244,241,232,.1);border:1px solid rgba(244,241,232,.25);backdrop-filter:blur(10px);border-radius:14px;padding:8px;box-shadow:0 30px 70px rgba(0,0,0,.45);transform:perspective(1400px) rotateY(-5deg);animation:rise 1.1s .15s cubic-bezier(.2,.7,.2,1) both}
.hero figure.shot figcaption{color:var(--cream);opacity:.75}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero .bg{display:none}.hero{background:var(--ink) url(/assets/hero-village.jpg) center/cover}.hero .copy,figure.shot{animation:none;transform:none}}
figure.shot img{display:block;width:100%;height:auto;border-radius:7px}
figure.shot figcaption{font-size:12px;color:var(--muted);text-align:center;padding:6px 0 2px}
section{padding:72px 0}
section.alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font-size:28px;line-height:1.25;letter-spacing:-.015em;margin:0 0 14px}
.intro{font-size:17.5px;color:var(--muted);max-width:760px;margin:0 0 36px}
.feature{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:44px;align-items:center;padding:28px 0}
.feature+.feature{border-top:1px solid var(--line)}
.feature.flip .screen{order:2}
.feature .n{font:700 13px/1 ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;color:var(--terra);letter-spacing:.1em}
.feature h3{font-size:22px;letter-spacing:-.01em;margin:10px 0 10px}
.feature p{margin:0;color:var(--muted);font-size:16px}
figure.screen{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 18px 44px rgba(37,48,43,.14)}
figure.screen img{display:block;width:100%;height:auto;border-radius:7px}
figure.screen figcaption{font-size:12.5px;color:var(--muted);text-align:center;padding:8px 0 4px}
figure.screen.small{grid-column:1/-1;max-width:760px;width:100%;margin:28px auto 0}
.facts{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.facts li{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:grid;gap:6px}
.facts b{font-size:30px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.facts span{font-size:14px;color:var(--muted)}
.diagram{display:block;width:100%;max-width:560px;height:auto;margin:26px 0 0;font-family:inherit}
ul.ticks li.icon{padding-left:38px}
ul.ticks li.icon::before{display:none}
ul.ticks li.icon svg{position:absolute;left:2px;top:3px;color:var(--terra)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
ul.ticks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
ul.ticks li{padding-left:28px;position:relative}
ul.ticks li::before{content:"";position:absolute;left:4px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--terra)}
.quote{border-left:3px solid var(--terra);padding:4px 0 4px 18px;font-size:17px;margin:0}
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px}
.faq h3{font-size:17px;margin:0 0 6px}
.faq p{margin:0;color:var(--muted);font-size:15px}
.contact{background:var(--ink);color:var(--cream);text-align:center}
.contact p{opacity:.85;max-width:620px;margin:0 auto 24px}
.contact .btn{background:var(--terra);color:#fff}
.belt{padding:40px 24px 8px;display:flex;align-items:center;justify-content:center;gap:28px}
.belt::before,.belt::after{content:"";flex:1;max-width:260px;height:1px;background:var(--line)}
.belt img{display:block;width:280px;height:71px;flex:none}
footer{padding:32px 0;font-size:13px;color:var(--muted)}
footer .row{display:flex;gap:24px;justify-content:space-between;align-items:center;flex-wrap:wrap}
footer .row.small{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;flex-wrap:nowrap}
footer .row.small span:first-child{max-width:72%}
.maker{display:flex;align-items:center;gap:12px;max-width:520px}
.maker img{height:44px;width:44px;flex:none}
footer .ccib{height:50px;width:auto}
footer .legal{margin:16px 0 0;font-size:12px;line-height:1.6;max-width:900px}footer .legal a{color:inherit}
@media (max-width:900px){footer .row.small{flex-wrap:wrap}footer .row.small span:first-child{max-width:none}.hero .wrap{padding-top:108px;padding-bottom:64px}figure.shot{transform:none}header.top .wrap{height:72px}footer .row{justify-content:center;text-align:center}.maker{flex-direction:column}.faq{grid-template-columns:minmax(0,1fr)}.hero .wrap,.two{grid-template-columns:minmax(0,1fr)}.feature,.facts{grid-template-columns:minmax(0,1fr)}.feature{gap:18px}.feature.flip .screen{order:0}h1{font-size:32px}section{padding:52px 0}header.top nav .hide{display:none}.hero-logo{height:92px}}

/* Opening: the page fades in instead of appearing at once. The video comes up from the dark ground, the header
   follows, then the logo, headline, text, buttons and tags one after the other, then the screen. Further down,
   each block rises gently as it scrolls into view (browsers that support scroll-driven animations; elsewhere the
   blocks are simply shown). Stylesheet only: no script, so the Content-Security-Policy is unchanged. */
@keyframes aw-fade{from{opacity:0}to{opacity:1}}
@keyframes aw-down{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes aw-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes aw-shot{from{opacity:0;transform:perspective(1400px) rotateY(-5deg) translateY(28px)}to{opacity:1;transform:perspective(1400px) rotateY(-5deg)}}
.hero .bg{animation:aw-fade 2s .1s ease-out both}
header.top{animation:aw-down .8s .35s cubic-bezier(.2,.7,.2,1) both}
.hero .copy{animation:none}
.hero .copy>*{animation:aw-up .9s cubic-bezier(.2,.7,.2,1) both}
.hero .copy>:nth-child(1){animation-delay:.45s}
.hero .copy>:nth-child(2){animation-delay:.6s}
.hero .copy>:nth-child(3){animation-delay:.75s}
.hero .copy>:nth-child(4){animation-delay:.9s}
.hero .copy>:nth-child(5){animation-delay:1.05s}
.hero .copy>:nth-child(6){animation-delay:1.2s}
figure.shot{animation:aw-shot 1.2s .8s cubic-bezier(.2,.7,.2,1) both}
@supports (animation-timeline:view()){
  section .wrap>h2,section .wrap>.intro,.feature,.facts li,.faq>div,.two>*,.contact .wrap>*{
    animation:aw-up linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
}
@media (prefers-reduced-motion:reduce){
  .hero .bg,header.top,.hero .copy>*,figure.shot,section .wrap>h2,section .wrap>.intro,.feature,.facts li,.faq>div,.two>*,.contact .wrap>*{animation:none!important}
}
@media (max-width:900px){figure.shot{animation-name:aw-up}}

/* Rhythm and pictures (22 October 2026): the feature screens show the part they describe, at a readable size;
   the three facts sit on a dark band over the lake photograph; the shoreline photograph beside the tribal
   councils; a faint birch-bark texture behind the Nation's data. No words changed. */
#what .wrap,#fonctions .wrap{max-width:1240px}
.feature{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:52px;padding:40px 0}
.feature.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.75fr)}
figure.screen{padding:5px;border-radius:14px}
figure.screen.small{max-width:900px;margin-top:36px}
.band-lake{position:relative;isolation:isolate;padding:150px 0 64px;color:var(--cream);background:#1d2622 url(/assets/photo-lake.webp) center 45%/cover no-repeat}
.band-lake::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,29,25,.05) 0%,rgba(21,29,25,.35) 45%,rgba(21,29,25,.82) 100%)}
.band-lake .facts{margin:0}
.band-lake .facts li{background:rgba(21,29,25,.55);border:1px solid rgba(244,241,232,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:22px 24px}
.band-lake .facts b{color:var(--cream);font-size:34px}
.band-lake .facts span{color:rgba(244,241,232,.84)}
section.birch{position:relative;isolation:isolate}
section.birch::before{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/texture-birch.webp) center/cover no-repeat;opacity:.055;mask-image:linear-gradient(90deg,#000 0,#000 30%,transparent 75%);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 30%,transparent 75%)}
figure.photo{margin:30px 0 0;border-radius:14px;overflow:hidden;box-shadow:0 18px 44px rgba(37,48,43,.16)}
figure.photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
@media (max-width:900px){.feature,.feature.flip{grid-template-columns:minmax(0,1fr);gap:20px;padding:28px 0}.band-lake{padding:110px 0 44px}.band-lake .facts{grid-template-columns:minmax(0,1fr)}figure.photo{margin-top:22px}}
@media (prefers-reduced-motion:reduce){.band-lake .facts li{animation:none!important}}

/* Second pass (22 October 2026), looks only:
   Inter hosted with the site (SIL Open Font License, assets/fonts/OFL.txt), so every computer shows the same type;
   the Askwa ornament above each section title; the hero tags on one line; the tribal councils section balanced
   with its photograph; the company section laid out evenly; the questions as rows that open (every answer stays
   in the page for search and for people without a mouse). */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format("woff2")}
body{font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-feature-settings:"cv11","ss01"}
h1,h2,h3{text-wrap:balance}
section .wrap>h2::before,section .wrap>div>h2::before,section .wrap>div:first-child>h2::before{content:"";display:block;width:58px;height:12px;margin:0 0 16px;background:url(/assets/ornament-terra.svg) left center/contain no-repeat}
.contact h2::before{margin-left:auto!important;margin-right:auto!important;background-image:url(/assets/ornament-cream.svg)!important;background-position:center!important}
.band-lake h2::before{display:none}
h2{font-size:30px}
.hero .tags{gap:6px;flex-wrap:wrap}
.hero .tags li{font-size:11.5px;letter-spacing:.06em;padding:7px 10px}
@media (min-width:1100px){.hero .tags{flex-wrap:nowrap}}
/* tribal councils: four roles as cards that share the photograph's height */
.councils .two{align-items:stretch}
.councils ul.ticks{display:grid;grid-auto-rows:1fr;gap:12px;align-content:stretch}
.councils ul.ticks li.icon{background:var(--ground);border:1px solid var(--line);border-radius:12px;padding:18px 20px 18px 58px;display:flex;align-items:center}
.councils ul.ticks li.icon svg{left:20px;top:50%;transform:translateY(-50%)}
/* the company: introduction across, the two paragraphs side by side */
#who .two,#qui .two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:8px}
#who .two>div:first-child,#qui .two>div:first-child{grid-column:1/-1;max-width:820px}
#who .two>div:last-child,#qui .two>div:last-child{grid-column:1/-1;columns:2;column-gap:48px}
#who .two>div:last-child p,#qui .two>div:last-child p{margin:0 0 14px;break-inside:avoid;color:var(--ink)}
/* questions: one column of rows that open */
.faq{display:block;max-width:880px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 4px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;font-size:17.5px}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--terra);border-bottom:2px solid var(--terra);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq summary:hover h3{color:var(--terra)}
.faq details p{margin:0;padding:0 40px 20px 4px;font-size:15.5px;max-width:760px}
.contact .btn{font-size:16px;padding:13px 26px}
@media (max-width:900px){#who .two>div:last-child,#qui .two>div:last-child{columns:1}.councils ul.ticks{grid-auto-rows:auto}h2{font-size:26px}}
#who .two>div:last-child,#qui .two>div:last-child{columns:auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start;margin-top:14px}
#who .two>div:last-child p+p,#qui .two>div:last-child p+p{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--terra);border-radius:12px;padding:20px 24px;margin:0}
section .wrap>h2::before,section .wrap>div>h2::before{width:70px;height:14px}
@media (max-width:900px){#who .two>div:last-child,#qui .two>div:last-child{grid-template-columns:minmax(0,1fr);gap:16px}}
@media (max-width:900px){.hero .tint{background:linear-gradient(180deg,rgba(21,29,25,.42) 0%,rgba(21,29,25,.5) 45%,rgba(21,29,25,.56) 100%)}.hero .eyebrow{color:#E2B7A5}}

/* The opening screen fills the window (22 October 2026, asked by Oscar Martinez C): the video covers the whole
   first screen on a computer, the headline block centred in it, as on onakeio.ca. Phones keep the natural height. */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center}
.hero>.wrap{padding-top:112px;padding-bottom:72px}
@media (max-width:900px){.hero{min-height:0;display:block}}
@media (min-width:901px) and (max-height:820px){.hero>.wrap{padding-top:96px;padding-bottom:36px}.hero-logo{height:84px}.lockup{margin-bottom:18px}.hero h1{font-size:44px}}

/* Third pass (23 October 2026): the rest of what Askwa holds, as four quiet cards under the three screens; the
   "Who sees what" section with the roles as a short list; the legal notice set smaller and lighter. */
ul.more{list-style:none;margin:44px 0 0;padding:36px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
ul.more li{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
ul.more h3{font-size:16.5px;margin:0 0 8px;letter-spacing:-.01em}
ul.more p{margin:0;font-size:14.5px;color:var(--muted)}
ul.roles{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:520px}
ul.roles li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line)}
ul.roles li:last-child{border-bottom:1px solid var(--line)}
ul.roles b{font-size:15px}
ul.roles span{font-size:15px;color:var(--muted)}
#access .note,#acces .note{margin:14px 0 0;font-size:14px;color:var(--muted)}
#access ul.ticks,#acces ul.ticks{padding-top:6px}
footer .legal{font-size:11.5px;line-height:1.65;color:var(--muted);opacity:.9;max-width:980px;margin-top:20px}
footer .legal b{font-weight:600;color:var(--ink)}
@media (max-width:900px){ul.more{grid-template-columns:minmax(0,1fr);margin-top:28px;padding-top:24px}ul.roles li{grid-template-columns:minmax(0,1fr);gap:4px}}
@media (min-width:901px) and (max-width:1100px){ul.more{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The opening screen, fourth pass (23 October 2026): one headline shared with the sign-in page; the screen in a
   window frame, larger, set a little lower than the text block (the opening screen is centred in the window,
   so a fixed overlap with the section below is not possible); one strong button and one quiet one; the
   fact row with air above it; the label without its dash. */
:root{--lift:40px}
.hero{overflow:visible}
.hero .bg,.hero .tint{border-radius:0}
.hero>.wrap{max-width:1220px;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:52px;padding-top:120px;padding-bottom:calc(72px + var(--lift))}
.hero .copy{max-width:560px}
.lockup{margin-bottom:26px}
.hero-by{font-size:12.5px;opacity:.78}.hero-by img{height:24px;width:24px}
.eyebrow{padding-left:0;margin-bottom:14px}.eyebrow::before{display:none}
h1{font-size:clamp(34px,3.5vw,50px);line-height:1.06;letter-spacing:-.03em;margin:0 0 16px;max-width:12ch}
.hero p.lead{font-size:17.5px;line-height:1.55;max-width:500px;margin-bottom:28px;opacity:.94}
.hero .actions{gap:14px}
.hero .btn{background:var(--terra);color:#fff;font-size:15.5px;font-weight:700;padding:13px 24px;border-radius:10px;box-shadow:0 10px 26px rgba(186,119,97,.38),0 1px 0 rgba(255,255,255,.18) inset}
.hero .btn:hover{opacity:1;background:#C98470}
.hero .btn.light{background:transparent;color:var(--cream);border:1px solid rgba(244,241,232,.42);box-shadow:none;font-weight:500}
.hero .btn.light:hover{background:rgba(244,241,232,.1);border-color:rgba(244,241,232,.7)}
.hero .tags{margin-top:44px;gap:8px}
.hero .tags li{font-size:11px;letter-spacing:.08em;padding:7px 11px;opacity:.72;border-color:rgba(244,241,232,.24);backdrop-filter:none}
figure.shot{position:relative;z-index:2;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;transform:translateY(var(--lift))}
figure.shot .win{border:1px solid rgba(37,48,43,.9);border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:0 48px 110px rgba(8,13,11,.6),0 16px 36px rgba(8,13,11,.4),0 0 0 1px rgba(244,241,232,.08)}
figure.shot .bar{height:28px;background:var(--ink);display:flex;align-items:center;gap:7px;padding:0 13px;border-bottom:1px solid rgba(244,241,232,.1)}
figure.shot .bar i{width:9px;height:9px;border-radius:50%;background:rgba(244,241,232,.3)}
figure.shot img{border-radius:0}
.hero figure.shot figcaption{font:500 11px/1.4 ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;opacity:.55;padding:12px 0 0}
@keyframes aw-shot{from{opacity:0;transform:translateY(calc(var(--lift) + 28px))}to{opacity:1;transform:translateY(var(--lift))}}
@media (prefers-reduced-motion:reduce){figure.shot{transform:translateY(var(--lift))}}
#what,#fonctions{padding-top:84px}
@media (min-width:901px) and (max-height:820px){.hero>.wrap{padding-top:100px;padding-bottom:calc(36px + var(--lift))}.hero h1{font-size:42px}}
@media (max-width:900px){
  :root{--lift:0px}
  .hero{min-height:0;display:block}
  .hero>.wrap{grid-template-columns:minmax(0,1fr);padding-top:104px;padding-bottom:40px;gap:36px}
  .eyebrow{font-size:11px;letter-spacing:.08em}
  .hero .copy{max-width:none}
  h1{font-size:31px;line-height:1.1;max-width:none}
  .hero p.lead{font-size:16.5px}
  .hero .tags{margin-top:30px}
  figure.shot{transform:none;animation-name:aw-up}
  figure.shot .win{border-radius:10px;box-shadow:0 24px 60px rgba(8,13,11,.5)}
  #what,#fonctions{padding-top:52px}
}
@media (max-width:420px){h1{font-size:29px}}
html[lang=fr] h1{max-width:17ch;font-size:clamp(32px,3.2vw,46px)}
@media (max-width:900px){html[lang=fr] h1{max-width:none;font-size:29px}}

/* Reviewer's pass (23 October 2026): one section link stays in the header on phones; the hero label may run to
   two lines; the quiet hero button carries the address. */
header.top nav a.keep{white-space:nowrap}
@media (max-width:900px){header.top nav{gap:12px}header.top nav{min-width:0}header.top nav a.keep{flex:0 1 auto;font-size:13px;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:34vw}header.top nav .lang,header.top nav .btn{flex:none}}
@media (max-width:420px){header.top nav{gap:9px}header.top nav a.keep{font-size:12px;max-width:42vw}header.top nav .btn{padding:8px 12px;font-size:13.5px}.lang a,.lang span{padding:5px 8px;font-size:12px}}
.eyebrow{max-width:560px}

/* Fifth pass (23 October 2026, asked by Oscar Martinez C): the cream page kept, with the look of technology added
   to it. Traces (assets/motif-lines.svg: parallel lines that run down, bend once and carry on, terracotta into
   brass) at the edge of the opening screen, of the first section and of the call; a display face (Sora, hosted
   with the site) for the titles; buttons as pills that lift under the pointer; "Sign in" beside "Request a
   demonstration"; every screen in a window frame that says where it comes from, demo.askwa.ca, nothing cropped;
   a card of the demonstration floating over the corner of the opening screen. The words did not change. */
@font-face{font-family:Sora;font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/sora-latin.woff2) format("woff2")}
h1,h2,.feature h3,.facts b,.contact h2{font-family:Sora,Inter,"Segoe UI",system-ui,sans-serif}
h1{font-weight:800;letter-spacing:-.035em}
h2{font-weight:700;letter-spacing:-.025em}
.feature h3{font-weight:700}
.motif{position:absolute;z-index:0;pointer-events:none;width:min(46vw,560px);aspect-ratio:760/1000;background:url(/assets/motif-lines.svg) center/contain no-repeat}
.hero .motif{right:-40px;top:-30px;z-index:-1;opacity:.9;width:min(58vw,780px);transform:scaleX(-1);background-image:url(/assets/motif-lines-light.svg);filter:drop-shadow(0 0 8px rgba(244,241,232,.35))}
.hero .copy,.hero figure.shot{position:relative;z-index:1}
section{position:relative;overflow:hidden}
section .wrap{position:relative;z-index:1}
.motif.soft{right:-80px;top:-120px;width:min(40vw,520px);opacity:.55;transform:scaleX(-1)}
.motif.dark{left:-120px;bottom:-200px;width:min(42vw,520px);opacity:.42;transform:rotate(180deg)}
.btn{border-radius:999px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
.btn:hover{opacity:1;transform:translateY(-2px);box-shadow:0 12px 26px rgba(37,48,43,.22)}
.btn:active{transform:translateY(0)}
header.top nav .btn:hover{background:#fff}
.hero .btn{border-radius:999px;box-shadow:0 12px 30px rgba(186,119,97,.38),0 1px 0 rgba(255,255,255,.18) inset}
.hero .btn:hover{box-shadow:0 18px 40px rgba(186,119,97,.5),0 1px 0 rgba(255,255,255,.18) inset}
.hero .btn.sec{background:transparent;color:var(--cream);border:1.5px solid rgba(232,169,143,.85);box-shadow:none;font-weight:600}
.hero .btn.sec:hover{background:rgba(186,119,97,.22);border-color:#E8A98F;box-shadow:0 12px 30px rgba(186,119,97,.28)}
.contact .btn{border-radius:999px}
.contact .btn:hover{opacity:1;background:#C98470;box-shadow:0 16px 36px rgba(0,0,0,.35)}
.win{position:relative;border-radius:16px;padding:1px;background:linear-gradient(160deg,rgba(186,119,97,.7),rgba(37,48,43,.25) 45%,rgba(224,181,92,.6));box-shadow:0 30px 70px rgba(37,48,43,.22),0 10px 24px rgba(37,48,43,.12)}
.win .in{border-radius:15px;overflow:hidden;background:#F7F6F2}
.win .bar{height:30px;background:var(--ink);display:flex;align-items:center;gap:7px;padding:0 13px;border-bottom:1px solid rgba(244,241,232,.08)}
.win .bar i{width:9px;height:9px;border-radius:50%;background:rgba(244,241,232,.28)}
.win .bar i:first-child{background:rgba(209,139,114,.95)}
.win .bar i:nth-child(2){background:rgba(224,181,92,.9)}
.win .bar i:nth-child(3){background:rgba(125,179,137,.9)}
.win .bar b{margin-left:auto;font:500 10.5px/1 ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;letter-spacing:.06em;color:rgba(244,241,232,.55)}
.win img{display:block;width:100%;height:auto;border-radius:0}
figure.shot .win{box-shadow:0 48px 110px rgba(8,13,11,.6),0 16px 36px rgba(8,13,11,.4)}
figure.shot .card{position:absolute;right:-26px;bottom:-56px;width:42%;max-width:300px;border-radius:14px;overflow:hidden;background:#fff;border:1px solid rgba(244,241,232,.35);box-shadow:0 36px 80px rgba(8,13,11,.55);animation:aw-float 7s 2.4s ease-in-out infinite}
figure.shot .card img{display:block;width:100%;height:auto}
@keyframes aw-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
figure.screen{background:none;border:0;padding:0;box-shadow:none}
figure.screen img{border-radius:0}
figure.screen figcaption{padding-top:14px}
ul.more li,.facts li,.councils ul.ticks li.icon,#who .two>div:last-child p+p,#qui .two>div:last-child p+p{border-radius:16px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
ul.more li:hover,.facts li:hover,.councils ul.ticks li.icon:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(37,48,43,.12);border-color:rgba(186,119,97,.5)}
.faq details{transition:background .2s ease}
.faq details[open]{background:rgba(186,119,97,.05)}
section .wrap>h2::before,section .wrap>div>h2::before,section .wrap>div:first-child>h2::before{width:70px;height:14px}
@media (prefers-reduced-motion:reduce){figure.shot .card{animation:none}.btn:hover{transform:none}}
@media (max-width:900px){
  .hero .motif{right:-30vw;top:-40px;width:80vw;opacity:.5}
  .motif.soft{right:-40vw;width:80vw;opacity:.4}
  .motif.dark{left:-50vw;width:90vw;opacity:.3}
  figure.shot{margin-bottom:48px}
  figure.shot .card{right:6px;bottom:-40px;width:46%;max-width:240px}
  .hero .btn,.hero .btn.sec{flex:1 1 auto;text-align:center}
}

/* Sixth pass (23 October 2026), restraint: the page must not get busier as it scrolls. The opening screen and the
   first section keep their traces; the one on the call band is kept as a faint echo on a computer and left out on
   phones. The hero's window takes the same frame as every other screen (the older ink border and white ring gave
   it a stray light strip at the bottom); the floating card drifts slower and less far; the call band rises as one
   block instead of four; cards lift less; the photograph and the floating card share the 16px radius; nothing
   decorative may push the page wider than the window. The words did not change. */
html,body{overflow-x:clip}
.motif.soft{opacity:.45;top:-140px}
.motif.dark{opacity:.2;width:min(36vw,440px);left:-140px;bottom:-220px}
figure.shot .win{border:0;border-radius:16px;background:linear-gradient(160deg,rgba(186,119,97,.7),rgba(37,48,43,.25) 45%,rgba(224,181,92,.6))}
figure.shot .card{border-radius:16px;animation-duration:11s}
@keyframes aw-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
figure.photo{border-radius:16px}
ul.more li:hover,.facts li:hover,.councils ul.ticks li.icon:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(37,48,43,.1)}
.contact .btn{font-size:15.5px;padding:13px 24px}
@supports (animation-timeline:view()){
  .contact .wrap>*{animation:none}
  .contact .wrap{animation:aw-up linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
}
@media (prefers-reduced-motion:reduce){.contact .wrap{animation:none!important}}
@media (max-width:900px){
  .hero .motif{opacity:.4}
  .motif.soft{opacity:.3}
  .motif.dark{display:none}
  figure.shot .card{width:42%;max-width:220px}
}

/* Seventh pass (23 October 2026, Oscar Martinez C's notes on the first look): the opening screen comes in as one,
   words, traces and screen together, no cascade; the traces over the video laid back and their glow dimmed (in
   the SVG files); every trace fades out before the edge of its section, so no curve is ever cut; the pattern
   comes back down the page, faintly, on alternate sides, so the scroll is not plain colour; the fact row under the
   buttons is a line of words, not a row of buttons. */
.hero .copy>*,figure.shot,header.top,.hero .motif{animation:aw-in 1.3s .25s cubic-bezier(.2,.7,.2,1) both!important}
@keyframes aw-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
figure.shot{animation-name:aw-in-shot!important}
@keyframes aw-in-shot{from{opacity:0;transform:translateY(calc(var(--lift) + 6px))}to{opacity:1;transform:translateY(var(--lift))}}
.hero .motif{animation-name:aw-in-motif!important}
@keyframes aw-in-motif{from{opacity:0}to{opacity:.38}}
.hero .motif{opacity:.38;filter:none;top:-10px;right:-70px}
@media (max-width:900px){.hero .motif{opacity:.28}@keyframes aw-in-motif{from{opacity:0}to{opacity:.28}}}
.motif{mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-composite:intersect;-webkit-mask-composite:source-in}
.motif.soft{top:-60px;right:-40px}
.motif.dark{display:block;opacity:.3;left:-60px;bottom:-120px;width:min(40vw,460px);transform:rotate(180deg)}
.motif.back{opacity:.42;width:min(42vw,520px)}
.motif.back.r{right:-40px;top:-40px;transform:scaleX(-1)}
.motif.back.l{left:-40px;bottom:-80px;transform:rotate(180deg)}
.motif.back.rb{right:-40px;bottom:-80px;transform:scaleY(-1)}
.band-lake .motif{display:none}
.hero .tags{gap:0 18px;margin-top:44px}
.hero .tags li{border:0;padding:0;background:none;backdrop-filter:none;opacity:.78;font-size:11.5px;letter-spacing:.1em;position:relative}
.hero .tags li+li{padding-left:18px}
.hero .tags li+li::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--terra);transform:rotate(45deg);opacity:.9}
@media (max-width:900px){.hero .tags{gap:6px 16px}.hero .tags li+li{padding-left:16px}.motif.back{opacity:.22;width:70vw}.motif.dark{display:none}}
@media (prefers-reduced-motion:reduce){.hero .copy>*,figure.shot,header.top,.hero .motif{animation:none!important;opacity:1}.hero .motif{opacity:.38}}
/* The entrance: the video first, from the dark ground, then everything else at once. */
.hero .bg{animation:aw-fade 1.6s 0s ease-out both}
.hero .copy>*,figure.shot,header.top,.hero .motif{animation-delay:1.05s!important;animation-duration:1.2s!important}
/* Every trace stays inside its section, so its own fade (the mask) is what ends it, never the section's edge. */
.motif.soft{top:0;right:0}
.motif.dark{left:0;bottom:0}
.motif.back.r{right:0;top:0}
.motif.back.l{left:0;bottom:0}
.motif.back.rb{right:0;bottom:0}
/* A trace never taller than its section: the box shrinks, the drawing keeps its proportions inside it, and its
   own fade ends it before any edge (the call band, where the traces were cut at the top). */
.motif{max-height:100%}
.motif.dark{height:100%;width:auto;aspect-ratio:760/1000;max-width:27vw;bottom:0;left:0}
/* The pattern only where the space is free (23 October 2026, Oscar Martinez C: lines must never cross words): the
   opening screen, the first section, the lake band (light, on the photograph), the company section, the call. */
.band-lake .motif{display:block}
.motif.lake{right:0;top:0;width:min(38vw,460px);max-height:62%;opacity:.5;transform:scaleX(-1);background-image:url(/assets/motif-lines-light.svg)}
@media (max-width:900px){.motif.lake{width:70vw;opacity:.35}}
/* The rhythm down the page (23 October 2026): the light drawing on the shoreline photograph of the councils, and a
   trace behind the asset screen of the inspectors' section (the window is opaque: the lines pass behind it and
   show beside and under it, never on words). */
figure.photo{position:relative;isolation:isolate}
figure.photo .motif{position:absolute;right:0;bottom:0;width:58%;max-height:100%;opacity:.28;transform:scaleX(-1);background-image:url(/assets/motif-lines-light.svg);z-index:1}
#engineers .motif.back.rb,#ingenieurs .motif.back.rb{opacity:.36;width:min(34vw,420px)}
#engineers figure.screen,#ingenieurs figure.screen{position:relative;z-index:1}

/* Eighth pass (23 October 2026), quality review (dimensioning, centring, type), asked by Oscar Martinez C. Checked at
   1024, 1280, 1440 and 1920 px wide and on a 390 px phone, in both languages; the fonts hosted here load (Inter for
   the text, Sora for the titles). No word changed. What moved: the trace of the first section ends above the first
   feature's title (its fading tail reached "01" and the title); the trace on the lake band stays in the sky above
   the three facts, under the band's own shade, so no line shows through the cards; the trace of the call band
   keeps clear of the centred paragraph on narrower screens; on phones, where every column is words, the traces
   that would run across them (opening screen, first section, inspectors, company, lake) are left out; the floating
   card of the opening screen no longer runs past the right edge of a 1024 px window. */
@media (min-width:901px){.motif.soft{max-height:540px}}
.motif.lake{max-height:50%;z-index:-2}
.motif.dark{max-width:min(27vw,calc(50vw - 330px))}
@media (max-width:1180px){figure.shot .card{right:0}}
@media (max-width:900px){.hero .motif,.motif.soft,.motif.back,.motif.lake{display:none}}
/* 2026-10-25: a lighter veil over the video (Oscar Martinez C: "too foggy"); the lines stay; the words keep their contrast with a soft shadow instead of a darker veil. */
.hero .eyebrow{color:#E2B7A5;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.hero h1{text-shadow:0 2px 18px rgba(0,0,0,.35)}
/* 2026-10-26: the opening screen crisper (Oscar Martinez C: "still too foggy, modern and crispy; the letters have to
   be white; keep the video as it was; the FR and EN switch stays as it was"). The same video, a little more contrast
   and colour; the words in pure white instead of cream; the grid lines over the video removed; a slightly firmer shade
   behind the words. The language switch, the buttons and the line above the headline are unchanged. */
.hero .bg{filter:contrast(1.18) saturate(1.08)}
.hero .tint{background:linear-gradient(100deg,rgba(21,29,25,.62) 0%,rgba(21,29,25,.55) 34%,rgba(21,29,25,.14) 50%,rgba(21,29,25,0) 64%,rgba(21,29,25,0) 100%),linear-gradient(180deg,rgba(21,29,25,.22) 0%,rgba(21,29,25,0) 22%,rgba(21,29,25,0) 100%)}
.hero .tint::after{display:none}
@media (max-width:900px){.hero .tint{background:linear-gradient(180deg,rgba(21,29,25,.5) 0%,rgba(21,29,25,.56) 45%,rgba(21,29,25,.62) 100%)}}
.hero h1,.hero p.lead,.hero .hero-by,.hero .tags li{color:#fff}
header.top nav>a:not(.btn){color:#fff}
.hero-logo{filter:brightness(0) invert(1)}
.hero h1{text-shadow:0 1px 2px rgba(0,0,0,.2)}
.hero p.lead{opacity:1;text-shadow:0 1px 2px rgba(0,0,0,.3),0 0 14px rgba(13,19,16,.32)}
.hero .hero-by{opacity:1}
.hero .tags li{border-color:rgba(255,255,255,.4);opacity:.92}

/* Who Askwa is for (Oscar Martinez C, 27 October 2026): two of the quiet cards side by side, stacked on a phone;
   set on the ground colour so they stand out from the white section. */
#for ul.more,#pour-qui ul.more{grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;border-top:0;gap:22px}
#for ul.more li,#pour-qui ul.more li{background:var(--ground);border-left:4px solid var(--terra);padding:24px 26px}
#for ul.more h3,#pour-qui ul.more h3{font-size:18px;margin-bottom:10px}
#for ul.more p,#pour-qui ul.more p{font-size:15.5px;color:var(--ink)}
@media (max-width:900px){#for ul.more,#pour-qui ul.more{grid-template-columns:minmax(0,1fr);gap:14px}}

/* The hero's traces are drawn inline (since 27 October 2026), still: no light runs along them on the home page
   (Oscar Martinez C, 28 October 2026, 00:40). They come in from the top edge, so the quarter they lost on 28 October
   (00:17) was cut from their foot, behind the screenshot. They keep their .38. */
svg.motif.lines{background:none}
.hero svg.motif.lines{animation-name:ml-in!important}
.hero svg.motif .ml-base{opacity:.38}
@keyframes ml-in{from{opacity:0}to{opacity:1}}

/* The opening video, lighter (Oscar Martinez C, 29 October 2026, 06:36), kept as crisp as on 26 October; the shade
   stays behind the words only (their contrast measured, WCAG 2.1 AA), the rest of the video lighter than before. */
.hero .bg{filter:contrast(1.18) saturate(1.08) brightness(1.12)}
/* "by Onakeio Systems", 100% Indigenous-owned, with the CCIB mark on a light ground, the ground it is drawn for
   (Oscar Martinez C, 29 October 2026, 06:35). */
.hero-by{flex-wrap:wrap;justify-content:center}
.hero-by .pill{display:inline-flex;align-items:center;background:var(--cream);border-radius:7px;padding:4px 7px;margin-left:4px}
.hero-by .pill img{height:25px;width:auto}
/* Three dim circles of light moving on the opening screen's 72px grid (.hero .tint::after, not drawn since 26 October),
   each on its own route, with
   periods of prime seconds so that the three rarely meet the same way twice; no script, no new grid (Oscar Martinez C,
   29 October 2026, 06:22 and 06:29). Each circle's box is the whole screen, so a translate in % is a share of the
   screen, rounded down to a grid line; the circle is drawn at the box's top left corner. */
.hero .lights{display:none}
@supports (translate:round(down,10%,72px) 0){
.hero .lights{display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero .lights i{position:absolute;inset:0;animation-timing-function:linear;animation-iteration-count:infinite}
.hero .lights i::after{content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#FFF1E6;box-shadow:0 0 6px 3px rgba(186,119,97,.5),0 0 16px 6px rgba(186,119,97,.16)}
@keyframes aw-walk-a{
  0%{translate:round(down,14%,72px) round(down,30%,72px)}
  16%{translate:round(down,46%,72px) round(down,30%,72px)}
  30%{translate:round(down,46%,72px) round(down,66%,72px)}
  46%{translate:round(down,78%,72px) round(down,66%,72px)}
  62%{translate:round(down,78%,72px) round(down,38%,72px)}
  80%{translate:round(down,28%,72px) round(down,38%,72px)}
  90%{translate:round(down,14%,72px) round(down,38%,72px)}
  100%{translate:round(down,14%,72px) round(down,30%,72px)}}
@keyframes aw-walk-b{
  0%{translate:round(down,90%,72px) round(down,34%,72px)}
  20%{translate:round(down,60%,72px) round(down,34%,72px)}
  38%{translate:round(down,60%,72px) round(down,58%,72px)}
  56%{translate:round(down,22%,72px) round(down,58%,72px)}
  74%{translate:round(down,22%,72px) round(down,70%,72px)}
  88%{translate:round(down,90%,72px) round(down,70%,72px)}
  100%{translate:round(down,90%,72px) round(down,34%,72px)}}
@keyframes aw-walk-c{
  0%{translate:round(down,36%,72px) round(down,70%,72px)}
  22%{translate:round(down,36%,72px) round(down,42%,72px)}
  42%{translate:round(down,84%,72px) round(down,42%,72px)}
  62%{translate:round(down,84%,72px) round(down,62%,72px)}
  82%{translate:round(down,8%,72px) round(down,62%,72px)}
  91%{translate:round(down,8%,72px) round(down,70%,72px)}
  100%{translate:round(down,36%,72px) round(down,70%,72px)}}
@keyframes aw-glint{0%,40%,70%,100%{opacity:.08}55%{opacity:.5}}
.hero .lights .l1{animation-name:aw-walk-a,aw-glint;animation-duration:61s,13s;animation-delay:-7s,-2s}
.hero .lights .l2{animation-name:aw-walk-b,aw-glint;animation-duration:53s,17s;animation-delay:-31s,-9s}
.hero .lights .l3{animation-name:aw-walk-c,aw-glint;animation-duration:47s,19s;animation-delay:-19s,-14s}
}
/* The pause (WCAG 2.1, 2.2.2): a real checkbox, its label the visible control, one name whatever its state (a screen
   reader says "checked"; the eye sees the label filled); it stops the circles and the floating card and puts the still
   picture in place of the video. Without a script the choice lasts for the visit only. */
.still-box{position:absolute;opacity:0;width:1px;height:1px;right:28px;top:100px;margin:0}
.still-label{position:absolute;right:24px;top:94px;z-index:2;font:500 12.5px/1 Inter,"Segoe UI",system-ui,sans-serif;color:var(--cream);background:rgba(37,48,43,.72);border:1px solid rgba(244,241,232,.3);border-radius:999px;padding:8px 13px;cursor:pointer}
.still-box:focus-visible+.still-label{outline:2px solid var(--cream);outline-offset:2px;box-shadow:0 0 0 5px rgba(21,29,25,.85)}
.still-box:checked+.still-label{background:#8E4F3B;border-color:#8E4F3B;color:#fff}  /* the terra, darker: 6.3 to 1 for its white text */
.hero:has(.still-box:checked) .lights i,.hero:has(.still-box:checked) figure.shot .card{animation-play-state:paused}
.hero:has(.still-box:checked) .bg{display:none}
.hero:has(.still-box:checked){background:var(--ink) url(/assets/hero-village.jpg) center/cover}
@media (prefers-reduced-motion:reduce){.hero .lights,.still-box,.still-label{display:none}}
/* On a wide screen the lockup sits on the text's own left edge, now that the line under the logo is long. */
@media (min-width:901px){.lockup{align-items:flex-start}.hero-by{justify-content:flex-start}}
@media (max-width:900px){.still-label{top:78px;right:16px}.still-box{top:82px;right:20px}}
/* A soft shade behind the words only, so the paragraph reads on the bright lake while the rest of the video stays
   light (WCAG 2.1 AA, measured on the video's brightest frames; 29 October 2026). */
.hero .copy{position:relative;z-index:0}
.hero .copy::before{content:"";position:absolute;inset:-150px -170px -90px -200px;z-index:-1;pointer-events:none;background:radial-gradient(farthest-side,rgba(21,29,25,.68) 46%,rgba(21,29,25,.5) 64%,rgba(21,29,25,.24) 82%,rgba(21,29,25,.08) 93%,rgba(21,29,25,0))}
@media (max-width:900px){.hero .copy::before{inset:-50px -24px -20px;background:radial-gradient(farthest-side,rgba(21,29,25,.62) 64%,rgba(21,29,25,.36) 84%,rgba(21,29,25,0))}}
.hero .eyebrow{color:#F6E3DA}
@media (max-width:900px){.hero .eyebrow{display:inline-block;background:rgba(21,29,25,.62);padding:5px 9px;border-radius:6px}}