/* CKH Virtual Assistant — site.css. Her house face (Montserrat) and her two colours, sampled from her own graphics:
   lavender #EADDF7, aubergine #51435D, white. Colour gate: research/swatches.py. */

/* Montserrat, self-hosted (her request, 11 Nov 2026): google/fonts variable TTFs subset by research/build_fonts.py; OFL in fonts/ */
@font-face{font-family:'Montserrat';src:url(fonts/montserrat.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url(fonts/montserrat-italic.woff2) format('woff2');font-weight:300 400;font-style:italic;font-display:swap}

/* ---------- tokens: lavender is the primary ground (THE DAY-TO-DAY), aubergine the alternate (ENJOY YOUR FREE TIME) ---------- */
:root{
  --f:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bg:#EADDF7;--bg2:#F4EDFB;--text:#43374E;--disp:#51435D;--mute:#5F5070;--line:rgba(81,67,93,.2);
  --cta:#51435D;--cta-t:#FFFFFF;
  --c1:#51435D;--c1-t:#F4EEFB;--c1-m:#D6C8E6;--c1-line:rgba(255,255,255,.24);
  --c2:#FFFFFF;--c2-t:#43374E;--c2-m:#5F5070;--c2-line:rgba(81,67,93,.18);--c2-in:#F4EDFB;
  --rim:#FFFFFF;--disc:#51435D;
  --fin:#3B3045;--fin-t:#F4EEFB;--fin-m:#D6C8E6;
  --wash:rgba(255,255,255,.6);--wash-blend:screen;
  --ease:cubic-bezier(.6,0,.2,1);--pop:cubic-bezier(.3,1.5,.5,1);
  --r:28px;
}
:root[data-theme="aub"]{
  --bg:#51435D;--bg2:#5C4D69;--text:#F4EEFB;--disp:#FFFFFF;--mute:#D6C8E6;--line:rgba(255,255,255,.2);
  --cta:#EADDF7;--cta-t:#51435D;
  --c1:#EADDF7;--c1-t:#43374E;--c1-m:#5F5070;--c1-line:rgba(81,67,93,.2);
  --c2:#5C4D69;--c2-t:#FFFFFF;--c2-m:#D6C8E6;--c2-line:rgba(255,255,255,.2);--c2-in:#51435D;
  --wash:rgba(234,221,247,.16);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--t);font:400 1.0625rem/1.65 var(--f);overflow-x:clip;
  --t:var(--text);--m:var(--mute);--d:var(--disp);--ln:var(--line);--cb:var(--bg);
  transition:background-color .45s var(--ease),color .45s var(--ease)}
img,svg:not(#cur svg){max-width:100%}
#cur svg{max-width:none}
img{display:block;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--t);outline-offset:3px;border-radius:6px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--cta);color:var(--cta-t);padding:12px 18px;border-radius:99px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.wrap{width:min(1240px,100% - 2*clamp(18px,4vw,48px));margin-inline:auto}
.hs{width:.9em;height:.9em;vertical-align:-.08em;display:inline-block;color:inherit}

/* ---------- the seal (her logo, redrawn from its measured geometry) ---------- */
.s-rim{fill:var(--rim)}
.s-disc{fill:var(--disc)}
.s-ring{fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-dasharray:var(--dash,0 1);transition:stroke-dasharray .8s var(--ease)}
.s-ring-s{stroke-width:8}
.s-ckh{font-family:var(--f);font-weight:700;font-size:62.2px;fill:#fff}
.s-ckh-s{font-size:52px}
.s-va{font-family:var(--f);font-weight:600;font-size:11.65px;fill:#fff}

/* ---------- type ---------- */
.kick{font:500 .78rem/1.4 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--m);display:flex;align-items:center;gap:.7em;max-width:none}
.kick>span{min-width:0}
.spk-i{width:1.25em;height:1.25em;flex:none;color:var(--d)}
h1,h2{color:var(--d);text-wrap:balance;letter-spacing:-.018em}
h2{font:300 clamp(2rem,4.6vw,3.7rem)/1.06 var(--f);margin:.35em 0 .45em}
h2 b{font-weight:800}
h3{font:700 clamp(1.2rem,1.8vw,1.45rem)/1.25 var(--f);color:var(--d);text-wrap:balance}
/* Montserrat 400 measures ≈2.02 characters per em (research/fonts, fontTools): 30em ≈ 60 characters */
p{max-width:30em}
.intro{font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:30em;color:var(--t)}
.tlink{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;overflow-wrap:anywhere;
  padding:.85em 0;margin:-.85em 0;transition:text-underline-offset .25s}
.hero-in>*,.me>*,.send>*{min-width:0}
.tlink:hover{text-underline-offset:.45em}

/* ---------- buttons: her own pill (help-1 "How can I help?") ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 1.6em;border-radius:99px;border:0;
  background:var(--cta);color:var(--cta-t);font:700 1rem/1 var(--f);letter-spacing:.01em;text-decoration:none;cursor:pointer;
  transition:transform .3s var(--pop),box-shadow .3s;box-shadow:0 0 0 0 transparent}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(59,48,69,.55)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-s{min-height:44px;padding:0 1.15em;font-size:.88rem}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:34px}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--bg);background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background-color .45s var(--ease)}
.top-in{display:flex;align-items:center;gap:clamp(10px,2.4vw,30px);min-height:72px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--d);min-height:44px}
.brand-seal{width:44px;height:44px;flex:none;transition:transform .5s var(--pop)}
.brand:hover .brand-seal{transform:rotate(-8deg) scale(1.04)}
.brand-w{font:500 .78rem/1 var(--f);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.brand-w b{font-weight:800;letter-spacing:.06em;font-size:1.1em}
.nav{display:flex;gap:clamp(14px,2vw,30px);margin-left:auto}
.nav a{font:500 .9rem/1 var(--f);text-decoration:none;padding:1.15em 0;background:linear-gradient(currentColor,currentColor) 0 78%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.nav a:hover{background-size:100% 1px}
.tog{display:inline-flex;align-items:center;gap:.6em;min-height:44px;padding:0 .2em;background:none;border:0;cursor:pointer;
  font:600 .7rem/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--t);white-space:nowrap}
.nav+.tog{margin-left:0}
.tog-box{width:24px;height:24px;flex:none;border:1.6px solid currentColor;border-radius:50%;display:grid;place-items:center;
  transition:background-color .3s var(--ease),transform .4s var(--pop)}
.tog-box svg{width:14px;height:14px;color:var(--bg);opacity:0;transform:scale(.3);transition:opacity .25s,transform .45s var(--pop)}
.tog:hover .tog-box{transform:scale(1.1)}
.tog[aria-checked="true"] .tog-box{background:currentColor}
.tog[aria-checked="true"] .tog-box svg{opacity:1;transform:none}
.nav a[aria-current="page"]{background-size:100% 1px}
.menu-b{display:none;align-items:center;gap:.6em;min-height:44px;min-width:44px;padding:0 .3em;background:none;border:0;cursor:pointer;color:var(--t);
  font:600 .7rem/1 var(--f);letter-spacing:.16em;text-transform:uppercase}
.menu-i{display:inline-flex;align-items:center;gap:4px;width:24px;justify-content:center}
.menu-i i{width:5px;height:5px;border-radius:3px;background:currentColor;transition:width .35s var(--ease),margin .35s var(--ease)}
.menu-b[aria-expanded="true"] .menu-i i{width:8px;margin:0 -2px}
@media (min-width:1180px) and (max-width:1359px){.top .brand-w{display:none}}
@media (max-width:1179px){
  .nav{display:none;position:fixed;left:0;right:0;top:72px;z-index:39;flex-direction:column;gap:0;margin:0;
    padding:6px clamp(18px,4vw,48px) 22px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 26px 40px -30px rgba(40,30,50,.55);
    max-height:calc(100vh - 72px);overflow:auto}
  .nav.open{display:flex;animation:menuIn .3s var(--ease)}
  .nav a{font:500 1.2rem/1.2 var(--f);padding:16px 0;border-bottom:1px solid var(--line);background-position:0 72%}
  .nav a:last-child{border-bottom:0}
  .menu-b{display:inline-flex;margin-left:auto}
  .nav+.menu-b+.tog{margin-left:0}
}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:819px){.top .brand-w{display:none}}
@media (max-width:519px){.top .btn-s{display:none}}
@media (max-width:519px){.menu-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:359px){.top .tog-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,8vh,110px) 0 clamp(70px,11vh,140px)}
.hero-in{display:grid;gap:clamp(36px,5vw,72px);align-items:center}
@media (min-width:900px){.hero-in{grid-template-columns:1.3fr .7fr}}
h1{font:300 clamp(2.05rem,9.6vw,4.4rem)/1 var(--f);margin:.45em 0 .5em}
@media (min-width:900px){h1{font-size:clamp(3rem,5.25vw,5.1rem)}}
h1 .h-l{display:block;font-weight:300}
h1 .h-b{display:block;font-weight:800}
.strap{font:500 .82rem/1.6 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--m);max-width:none}
.strap i{font-style:normal;padding:0 .35em}
.lede{font-size:clamp(1.08rem,1.5vw,1.22rem);margin-top:1.2em}
.hero-seal{position:relative;justify-self:center;width:min(78vw,460px);--dash:0 1}
.seal-xl{display:block;width:100%;height:auto;overflow:visible}
.hero-seal:hover{--dash:1 0}
.spk{position:absolute;color:var(--d);pointer-events:none}
.spk-a{width:16%;height:16%;left:-4%;top:-2%;animation:twinkle 6s ease-in-out 3.2s infinite}
@keyframes twinkle{0%,86%,100%{transform:none;opacity:1}92%{transform:scale(.6) rotate(45deg);opacity:.5}}
@media (max-width:899px){.hero-seal{width:min(64vw,340px)}}

/* ---------- bands: her carousel's two slide types ---------- */
.band{padding:clamp(76px,11vw,150px) 0;position:relative}
#help{padding-top:clamp(44px,6vw,84px)}
.inv,.c1{background:var(--c1);--t:var(--c1-t);--m:var(--c1-m);--d:var(--c1-t);--ln:var(--c1-line);--cb:var(--c1);color:var(--t)}
.c2{background:var(--c2);--t:var(--c2-t);--m:var(--c2-m);--d:var(--c2-t);--ln:var(--c2-line);--cb:var(--c2);color:var(--t)}
.inv{transition:background-color .45s var(--ease),color .45s var(--ease)}

/* ---------- the to-do list (fluency format): round box, her task, a note ---------- */
.tb{width:26px;height:26px;flex:none;border:1.6px solid currentColor;border-radius:50%;display:grid;place-items:center;
  transition:background-color .25s var(--ease),transform .35s var(--pop)}
.tb svg{width:15px;height:15px;color:var(--cb);opacity:0;transform:scale(.3);transition:opacity .2s,transform .4s var(--pop)}
.tb-s{width:18px;height:18px;display:inline-grid;vertical-align:-.25em;margin-right:.35em}
.todo-xl{display:grid;gap:clamp(26px,3.4vw,44px) clamp(30px,5vw,80px);margin:clamp(40px,6vw,72px) 0}
@media (min-width:900px){.todo-xl{grid-template-columns:1fr 1fr}}
.todo-xl li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.todo-xl .tb{width:32px;height:32px;margin-top:.2em}
.todo-xl b{display:block;font:600 clamp(1.25rem,2.2vw,1.65rem)/1.25 var(--f);color:var(--d);text-wrap:balance}
.todo-xl li>div>span{display:block;color:var(--m);margin-top:.45em;max-width:28em}
.familiar{display:grid;gap:14px;padding-top:clamp(30px,4vw,48px);border-top:1px solid var(--ln)}
@media (min-width:900px){.familiar{grid-template-columns:.8fr 1.2fr;align-items:baseline}}
.familiar .big{font:800 clamp(1.8rem,3.4vw,2.6rem)/1.1 var(--f);color:var(--d)}

/* ---------- How can I help? + Hand it over ---------- */
.sec-head{margin-bottom:clamp(36px,5vw,64px)}
.hint{margin-top:1.2em;color:var(--m);font-weight:500;display:flex;align-items:center;gap:.6em}
.hint .tb-s{margin:0}
.hand{display:grid;gap:28px;align-items:start}
@media (min-width:1040px){.hand{grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,3vw,48px)}}
.svcs{display:grid;gap:22px;min-width:0}
.svc{border-radius:var(--r);padding:clamp(26px,4vw,52px);display:grid;gap:18px 44px;align-content:start;min-width:0}
@media (min-width:1180px){.svc{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.svc>.tasks{grid-column:2;grid-row:1/span 3}.svc-q{grid-template-columns:1fr}}
.svc-p{color:var(--m);font-size:.98rem;max-width:30em}
.start{font:600 .72rem/1.3 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--m)}
.tasks{display:grid;gap:2px;align-content:start}
.task{position:relative;display:flex;align-items:center;gap:14px;min-height:48px;cursor:pointer;font-weight:500;line-height:1.3;padding:4px 0}
.task input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.task:hover .tb{transform:scale(1.1)}
.task input:focus-visible~.tb{outline:2px solid currentColor;outline-offset:3px}
.task input:checked~.tb{background:currentColor}
.task input:checked~.tb svg{opacity:1;transform:none}
.task .tt{transition:opacity .3s}
.task input:checked~.tt{opacity:.62;text-decoration:line-through;text-decoration-thickness:1px}

.hers{position:relative;min-width:0}
@media (min-width:1040px){.hers{position:sticky;top:96px}}
.hers-in{border-radius:var(--r);padding:30px 28px 30px;background:var(--c2);color:var(--c2-t);--t:var(--c2-t);--m:var(--c2-m);--d:var(--c2-t);--cb:var(--c2);
  box-shadow:0 24px 60px -36px rgba(59,48,69,.55);display:grid;gap:10px;justify-items:start;transition:background-color .45s var(--ease)}
.hers-seal{width:64px;height:64px;margin-bottom:6px;--dash:0 1}
.hers.has .hers-seal{--dash:1 0}
.hers-sub{color:var(--m);font-weight:500;margin-top:-4px}
.hers-list{display:grid;gap:8px;width:100%;margin:8px 0 2px;max-height:min(40vh,320px);overflow:auto}
.hers-list li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;font-weight:500;font-size:.95rem;line-height:1.35}
.hers-list li::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;transform:translateY(-.1em)}
.hers-list li.just{animation:land .5s var(--pop)}
@keyframes land{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.hers-n{color:var(--m);font-size:.92rem}
.hers .btn{margin-top:10px;width:100%}
.flydot{position:fixed;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--d);z-index:150;pointer-events:none}

/* ---------- the form ---------- */
.send{margin-top:clamp(56px,8vw,110px);display:grid;gap:clamp(24px,4vw,56px);align-items:start}
@media (min-width:1040px){.send{grid-template-columns:.8fr 1.2fr}}
.send-head h2{margin-top:0}
.form{background:var(--c2);color:var(--c2-t);--t:var(--c2-t);--m:var(--c2-m);--ln:var(--c2-line);border-radius:var(--r);padding:clamp(24px,4vw,46px);
  display:grid;gap:20px;transition:background-color .45s var(--ease)}
@media (min-width:700px){.form{grid-template-columns:1fr 1fr}.fld-w{grid-column:1/-1}}
.fld{display:grid;gap:8px;min-width:0;border:0;margin:0;padding:0}
.fld>span,.fld legend{font:600 .82rem/1.3 var(--f);letter-spacing:.06em;color:var(--m);padding:0}
.fld input,.fld textarea{width:100%;min-height:52px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--ln);background:var(--c2-in);color:var(--t);
  font:500 1rem/1.5 var(--f);resize:vertical;transition:border-color .2s}
.fld input:focus,.fld textarea:focus{outline:none;border-color:currentColor}
.fld textarea[readonly]{border-style:dashed}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pills legend{width:100%;margin-bottom:8px}
.pill{position:relative;min-height:46px;min-width:48px;display:inline-flex}
.pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pill span{display:inline-flex;align-items:center;padding:0 1.1em;border-radius:99px;border:1.5px solid var(--ln);font-weight:600;font-size:.92rem;transition:background-color .2s,color .2s}
.pill input:checked+span{background:var(--t);color:var(--c2);border-color:var(--t)}
.pill input:focus-visible+span{outline:2px solid var(--t);outline-offset:3px}
.send-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.reassure{color:var(--m);font-size:.92rem}
.hp{position:absolute;left:-9999px}

/* ---------- about ---------- */
.me{display:grid;gap:clamp(32px,5vw,64px);align-items:start}
/* the photo starts level with "About me…" and runs beside the heading and paragraphs (her note: centred with the text) */
@media (min-width:900px){.me{grid-template-columns:minmax(0,320px) minmax(0,1fr);max-width:1100px;margin-inline:auto}.me-ph{margin-top:.4rem}}
.me-ph{max-width:320px;position:relative}
.me-ph img{width:100%;border-radius:var(--r)}
.me-ph figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:90px 16px clamp(18px,3vw,26px);text-align:center;
  font:800 clamp(2.1rem,4vw,2.9rem)/1 var(--f);letter-spacing:-.01em;color:#fff;border-radius:0 0 var(--r) var(--r);
  background:linear-gradient(to top,rgba(32,22,38,.62),rgba(32,22,38,0));text-shadow:0 1px 14px rgba(32,22,38,.35)}
.me-h{font:800 clamp(2.4rem,5.6vw,4.4rem)/1 var(--f);margin:0 0 .18em}
.me-sub{font:300 clamp(1.3rem,2.3vw,1.8rem)/1.2 var(--f);color:var(--d);margin-bottom:1.1em;max-width:none}
.me-sub b{font-weight:800}
.me-copy>p{margin-bottom:1em}
.facts{display:flex;flex-wrap:wrap;gap:20px clamp(28px,4vw,56px);margin:30px 0 28px;padding:24px 0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.facts li{display:grid;gap:4px}
.facts li>b{font:800 clamp(2rem,3.6vw,2.8rem)/1 var(--f);color:var(--d)}
.facts li>span{font-size:.85rem;color:var(--m);max-width:13em;line-height:1.35}
.new{font-size:.98rem;color:var(--m)}
.new b{color:var(--t);display:block;font-size:1.08rem;margin-bottom:.3em}

/* ---------- recommendations ---------- */
.kick-l{font-size:clamp(.86rem,1.1vw,.98rem);font-weight:600}
.recs{display:grid;gap:clamp(28px,4vw,48px) clamp(24px,4vw,56px);margin:clamp(36px,5vw,60px) 0 30px}
@media (min-width:900px){.recs{grid-template-columns:1fr 1fr}}
.rec{border-top:1px solid var(--ln);padding-top:26px;display:grid;gap:18px;align-content:start}
.rec blockquote p{font:300 clamp(1.3rem,2.2vw,1.75rem)/1.4 var(--f);color:var(--d);max-width:24em;text-wrap:pretty}
.rec figcaption{display:grid;gap:3px}
.rec figcaption span{color:var(--m);font-size:.9rem;max-width:30em}

/* ---------- finale: theme-ignoring deep aubergine lining (her seal, ✦ and ♡, tone on tone) ---------- */
.finale{position:relative;background-color:var(--fin);color:var(--fin-t);--t:var(--fin-t);--m:var(--fin-m);--d:#FFFFFF;--cta:#EADDF7;--cta-t:#51435D;--cb:var(--fin);
  --rim:#FFFFFF;--disc:#51435D;padding:clamp(48px,6vw,84px) 0 clamp(90px,13vw,170px);text-align:center;overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.055'%3E%3Ccircle cx='60' cy='60' r='9.5' stroke-width='1.2' stroke-linecap='round' stroke-dasharray='0 2.6'/%3E%3Cpath d='M180 186c-4.2-3.1-6.9-5.8-6.9-8.8 0-2.2 1.6-3.8 3.6-3.8 1.4 0 2.6.8 3.3 2.1.7-1.3 1.9-2.1 3.3-2.1 2 0 3.6 1.6 3.6 3.8 0 3-2.7 5.7-6.9 8.8Z' stroke-width='1.2'/%3E%3C/g%3E%3Cpath fill='%23fff' fill-opacity='.055' d='M180 50c.4 4 2 5.6 6 6-4 .4-5.6 2-6 6-.4-4-2-5.6-6-6 4-.4 5.6-2 6-6ZM60 172c.3 2.6 1.4 3.7 4 4-2.6.3-3.7 1.4-4 4-.3-2.6-1.4-3.7-4-4 2.6-.3 3.7-1.4 4-4Z'/%3E%3C/svg%3E")}
.fin-in{display:grid;justify-items:center;gap:20px}
.fin-seal{width:min(56vw,250px);margin-bottom:10px}
.fin-seal svg{display:block;width:100%;height:auto;overflow:visible}
.finale h2{font:800 clamp(2.6rem,8vw,6.2rem)/1 var(--f);color:#fff;margin:0}
.finale h2 .hs{width:.7em;height:.7em;vertical-align:.02em;margin-left:.08em}
.fin-p{margin-inline:auto;font-size:clamp(1.05rem,1.4vw,1.2rem)}
.cta-c{justify-content:center;margin-top:16px}
.fin-mail{font-size:.95rem;color:var(--m)}
.last{margin-top:clamp(40px,6vw,70px);display:grid;gap:12px;justify-items:center}
.last p{font:300 italic clamp(1.3rem,2.6vw,2rem)/1.35 var(--f);max-width:22em;text-wrap:balance}
.last footer{font:500 .78rem/1 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--m)}
.fin-seal.go .ld-disc{transform-origin:100px 100px;transform-box:view-box;animation:discIn .6s var(--pop) both}
.fin-seal.go .ldd{transform-box:fill-box;transform-origin:center;fill:#fff;animation:ddPop .32s var(--pop) calc(var(--t) - .6s) both}
.fin-seal.go .ld-ckh{animation:ckhIn .45s ease 1.3s both}
.fin-seal.go .ld-va{animation:ckhIn .45s ease 1.42s both}

/* ---------- thanks, 404, privacy ---------- */
.page{padding-top:clamp(48px,8vw,100px)}
.thx{display:grid;justify-items:start;gap:4px}
.thx-seal{width:clamp(110px,16vw,170px);height:auto;margin-bottom:18px;--dash:1 0}
.thx-card{border-radius:var(--r);padding:clamp(22px,3vw,34px);margin-top:26px;width:min(100%,560px);display:grid;gap:10px}
.thx-h{font:700 1.1rem/1.3 var(--f);margin:0}
.thx-sign{font-style:italic;font-weight:300;font-size:1.15rem;color:var(--d)}
.doc h2{font:700 clamp(1.2rem,1.8vw,1.45rem)/1.3 var(--f);margin:2em 0 .5em}
.doc p{margin-bottom:1em}

/* ---------- Privacy & Legal: expandable sections (native <details>, no script needed) ---------- */
.acc{margin-top:clamp(32px,5vw,56px);border-top:1px solid var(--ln)}
.acc details{border-bottom:1px solid var(--ln)}
.acc summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px clamp(14px,2.4vw,26px);align-items:center;
  padding:clamp(20px,2.6vw,28px) 0;cursor:pointer;min-height:44px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::marker{content:''}
.acc summary:focus-visible{outline:2px solid var(--t);outline-offset:4px;border-radius:10px}
.acc-n{font:300 clamp(1.3rem,2.4vw,1.9rem)/1 var(--f);color:var(--m);font-variant-numeric:tabular-nums}
.acc-t{display:grid;gap:5px;font:700 clamp(1.2rem,2.2vw,1.65rem)/1.2 var(--f);color:var(--d)}
.acc-t small{font:500 .95rem/1.35 var(--f);color:var(--m)}
.acc-i{width:30px;height:30px;flex:none;border-radius:50%;border:2px dotted currentColor;position:relative;transition:transform .4s var(--ease),border-color .3s}
.acc-i::before,.acc-i::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:currentColor;border-radius:1px}
.acc-i::after{transform:rotate(90deg);transition:transform .35s var(--ease)}
.acc details[open] .acc-i{border-style:solid;transform:rotate(180deg)}
.acc details[open] .acc-i::after{transform:rotate(0)}
.acc summary:hover .acc-i{transform:scale(1.08)}
.acc details[open] summary:hover .acc-i{transform:rotate(180deg) scale(1.08)}
.acc-b{padding:0 0 clamp(28px,4vw,40px) clamp(0px,calc(2.4vw + 1.6rem),3.6rem)}
.acc details[open] .acc-b{animation:fadeUp .4s var(--ease)}
.acc-b p,.acc-b li{max-width:30em}
.acc-b p{margin-bottom:.9em}
.acc-b h3{font:700 1.1rem/1.3 var(--f);margin:1.5em 0 .5em}
.acc-b ul{list-style:none;margin:0 0 1em;display:grid;gap:6px}
.acc-b ul li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline}
.acc-b ul li::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;transform:translateY(-.1em)}
.acc-b .note{font-style:italic;color:var(--m)}
.acc-go,.bd .tlink{display:inline-flex;align-items:center;gap:.35em;min-height:44px;padding:0;margin:0}
.acc-go{margin:.2em 0 .6em}
.tog{min-width:44px;justify-content:center}
.bd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;margin:0 0 1em;max-width:36em}
.bd dt{font-weight:600}
.bd dd{margin:0;overflow-wrap:anywhere}
.legal-end{margin-top:clamp(28px,4vw,40px);color:var(--m);font-style:italic}
@media (max-width:599px){.acc-b{padding-left:0}}

/* ---------- the full Privacy Notice ---------- */
.notice h2{font:700 clamp(1.25rem,2vw,1.55rem)/1.3 var(--f);margin:2.2em 0 .6em;color:var(--d)}
.notice h3{font:700 1.05rem/1.3 var(--f);margin:1.4em 0 .5em}
.notice p,.notice li{max-width:30em}
.notice ul{list-style:none;margin:0 0 1.1em;display:grid;gap:8px}
.notice ul li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline}
.notice ul li::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;transform:translateY(-.1em)}
.notice address{font-style:normal;margin:0 0 1em;line-height:1.6}
.notice .ret{width:100%;max-width:44em;border-collapse:collapse;margin:0 0 1.4em;font-size:.95rem}
.notice .ret th,.notice .ret td{text-align:left;vertical-align:top;padding:12px 14px;border:1px solid var(--ln)}
.notice .ret th{font-weight:700;background:var(--c2);color:var(--c2-t)}
.notice .back{margin-top:2.4em}

/* ---------- footer ---------- */
.foot{padding:56px 0 calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--ln)}
.foot-in{display:grid;gap:18px 40px;align-items:center}
@media (min-width:900px){.foot-in{grid-template-columns:auto 1fr auto}.legal{grid-column:1/-1}}
.foot-line{font-weight:300;font-style:italic;font-size:1.1rem;color:var(--d)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-links a{display:inline-block;padding:12px 0;font-weight:500;font-size:.92rem;text-underline-offset:.3em;overflow-wrap:anywhere}
.legal{font-size:.8rem;color:var(--m);max-width:none}

/* ---------- mobile bar: one CTA, hidden at the hero, the list, the form and the finale ---------- */
.bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:45;display:none;align-items:center;justify-content:center;
  min-height:54px;border-radius:99px;background:var(--cta);color:var(--cta-t);font:700 1rem/1 var(--f);text-decoration:none;
  transform:translateY(160%);transition:transform .4s var(--ease);box-shadow:0 14px 30px -14px rgba(30,22,38,.6)}
.bar.on{transform:none}
@media (max-width:760px){.bar{display:flex}}

/* ---------- loader: the little tasks add up, then each takes its place in the seal ---------- */
#ld{display:none}
html.show-loader #ld{display:flex;position:fixed;inset:0;z-index:100;background:var(--bg);align-items:center;justify-content:center;overflow:hidden;
  animation:ldOut .55s ease 2.5s forwards;--S:min(62vmin,340px);--lw:var(--disp)}
:root[data-theme="aub"] #ld{--lw:#F4EEFB}
@keyframes ldOut{to{opacity:0;visibility:hidden}}
.ld-stage{position:relative;width:var(--S);height:var(--S)}
.ld-seal{display:block;width:100%;height:100%;overflow:visible}
#ld .ld-disc{transform-origin:100px 100px;transform-box:view-box;animation:discIn .5s var(--pop) .5s both}
@keyframes discIn{from{transform:scale(0)}to{transform:scale(1)}}
#ld .ldd{transform-box:fill-box;transform-origin:center;fill:#fff;animation:ddPop .32s var(--pop) var(--t) both}
@keyframes ddPop{from{transform:scale(0)}to{transform:scale(1)}}
#ld .ld-ckh{animation:ckhIn .4s ease 1.86s both}
#ld .ld-va{animation:ckhIn .4s ease 1.98s both}
@keyframes ckhIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tw{position:absolute;left:50%;top:50%;z-index:2;white-space:nowrap;font:400 clamp(11px,.98vw,14px)/1.25 var(--f);letter-spacing:.02em;color:var(--lw);
  --x0:calc(var(--ax) * (50vw - 7.5rem));--y0:calc(var(--ay) * (50vh - 3.5rem));
  opacity:0;transform:translate(-50%,-50%) translate(var(--x0),var(--y0));animation:twGo 1.2s var(--d) both}
@keyframes twGo{
  0%{opacity:0;transform:translate(-50%,-50%) translate(var(--x0),var(--y0)) scale(.92)}
  14%{opacity:1;transform:translate(-50%,-50%) translate(var(--x0),var(--y0)) scale(1)}
  48%{opacity:1;color:var(--lw);transform:translate(-50%,-50%) translate(var(--x0),var(--y0)) scale(1);animation-timing-function:cubic-bezier(.65,0,.25,1)}
  86%{color:#fff}
  94%{opacity:1}
  100%{opacity:0;color:#fff;transform:translate(-50%,-50%) translate(calc(var(--fx) * var(--S)),calc(var(--fy) * var(--S))) scale(.04)}}
@media (max-aspect-ratio:1/1){
  html.show-loader #ld{--S:min(58vmin,300px)}
  .tw{white-space:normal;width:max-content;max-width:9.5rem;text-align:center;
    --x0:calc(var(--bx) * (50vw - 5.5rem));--y0:calc(var(--by) * (50vh - 4.5rem))}
}
@media (max-width:699px){.tw-x{display:none}}
.ld-cap{position:absolute;left:0;right:0;bottom:max(6vh,28px);height:1.5em;max-width:none;font:500 .74rem/1.5 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);text-align:center}
.ld-cap span{position:absolute;inset:0;padding:0 16px;opacity:0;animation:cap .55s ease both}
.ld-cap span:nth-child(1){animation-delay:.05s}
.ld-cap span:nth-child(2){animation-delay:.6s}
.ld-cap span:nth-child(3){animation-delay:1.15s}
.ld-cap span:nth-child(4){animation:fadeUp .35s ease 1.8s forwards;color:var(--text)}
@keyframes cap{0%{opacity:0}20%,80%{opacity:1}100%{opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- reveals (hidden only while site.js is alive: rvh pre-paint failsafe, item 141) ---------- */
html.rvh [data-rev],html.reveal [data-rev]:not(.in){opacity:0;transform:translateY(18px)}
html.rvh [data-rev="r"],html.reveal [data-rev="r"]:not(.in){transform:translateX(24px)}
html.rvh [data-rev="l"],html.reveal [data-rev="l"]:not(.in){transform:translateX(-24px)}
[data-rev]{transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}

/* ---------- cursor: her seal; the ring of dots closes into one ring over anything pressable ---------- */
#cur{position:fixed;left:0;top:0;z-index:200;pointer-events:none;display:none}
html.js-cursor #cur{display:block}
html.js-cursor,html.js-cursor *{cursor:none!important}
#cur .dot{position:fixed;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:#fff;mix-blend-mode:difference}
#cur .mk{position:fixed;left:0;top:0;width:28px;height:28px;margin:10px 0 0 10px;transition:width .3s var(--pop),height .3s var(--pop)}
#cur svg.cseal{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 2px 6px rgba(40,30,50,.28))}
#cur .c-rim{fill:#fff}
#cur .c-disc{fill:#51435D}
#cur .c-ring{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-dasharray:0 1;transition:stroke-dasharray .35s var(--ease)}
#cur .c-ckh{font-family:var(--f);font-weight:700;font-size:52px;fill:#fff}
#cur.hot .mk{width:40px;height:40px}
#cur.hot .c-ring{stroke-dasharray:1 0}
.wash{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,var(--wash),transparent 64%);mix-blend-mode:var(--wash-blend);opacity:0;transition:opacity .5s}
html.js-cursor .wash{opacity:1}
main,.foot{position:relative;z-index:2}

/* ---------- theme swap: a short token transition ---------- */
html.swap *,html.swap *::before{transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),fill .45s var(--ease)!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important}
  html.rvh [data-rev],html.reveal [data-rev]:not(.in){opacity:1;transform:none}
  .wash{display:none}
}