/* Fonts are self-hosted (SIL Open Font License) so no third party sees visitors. */
@font-face{font-family:"Big Shoulders Display";font-weight:700 900;font-display:swap;src:url(fonts/big-shoulders-display.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:400 700;font-display:swap;src:url(fonts/hanken-grotesk.woff2) format("woff2")}
@font-face{font-family:"Yellowtail";font-weight:400;font-display:swap;src:url(fonts/yellowtail.woff2) format("woff2")}
/* Concept: a shop window ("vitrine"). Bright sign-yellow, black lettering, a blue hanging OUVERT sign and cursor logo, a printed price board. Matches the Facebook Page brand (brand/src/themes.js, "jaune"). */
:root{
  --bg:#ffcf3f; --panel:#fff1bf; --line:rgba(22,24,29,.28); --text:#16181d; --muted:#4f400f;
  --gold:#1f3fbf; --gold-hi:#1f3fbf; --cream:#fff8e3; --on-cream:#16181d; --brick:#1f3fbf;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --script:"Yellowtail","Brush Script MT",cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6}
.en{display:none} html.lang-en .fr{display:none} html.lang-en .en{display:inline}
html.lang-en div.en{display:block}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.gild{color:var(--gold)}
h1 .gild,.logo .gild{color:var(--text)}
.decal .gild{color:#ffcf3f}

/* top */
nav{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-block:18px;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text)}
.logo svg{width:30px;height:auto;flex:none}
.logo b{font-family:var(--display);font-weight:900;font-size:1.9rem;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.logo i{font-family:var(--script);font-style:normal;font-size:1.5rem;color:var(--gold)}
.navr{display:flex;gap:18px;align-items:center}
.navr a{color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem}
.lang{font:700 .8rem var(--body);background:transparent;color:var(--gold);border:1.5px solid var(--gold);border-radius:6px;padding:5px 11px;cursor:pointer}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding-block:56px 72px}
.hero > *{min-width:0}
.kicker{font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
h1{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(2.9rem,7.4vw,5.6rem);line-height:.9;letter-spacing:.005em;margin:0 0 22px;text-wrap:balance}
h1 .s{display:block;font-family:var(--script);text-transform:none;font-weight:400;font-size:.62em;line-height:1.1;color:var(--text);margin-top:.12em}
.lede{font-size:1.15rem;color:var(--muted);max-width:48ch;margin:0 0 30px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;text-decoration:none;font-weight:700;padding:15px 24px;border-radius:6px;font-size:1rem}
.btn.gold{background:var(--gold);color:#fff;box-shadow:0 10px 22px -12px rgba(22,24,29,.6)}
.btn.line{border:1.5px solid var(--gold);color:var(--gold)}
.btn:hover{filter:brightness(1.06)}
.from{margin-top:18px;color:var(--muted);font-size:.95rem}
.from b{color:var(--text)}

/* the window */
.window{position:relative;justify-self:center;width:100%;max-width:560px}
.frame{border:14px solid #16181d;outline:1.5px solid #ffcf3f;outline-offset:-8px;border-radius:4px;box-shadow:0 30px 60px -30px rgba(22,24,29,.6);position:relative;overflow:hidden;background:#16181d}
.frame img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;max-width:100%}
.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.08) 100%);pointer-events:none}
.decal{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(1.3rem,3.6vw,2.1rem);letter-spacing:.08em;text-shadow:0 2px 10px rgba(0,0,0,.55);line-height:1}
.decal small{display:block;font-family:var(--script);text-transform:none;letter-spacing:0;font-size:.7em;font-weight:400;color:#fff7e3;margin-bottom:2px}
.sign{position:absolute;top:-6px;right:26px;width:132px;text-align:center;transform-origin:50% 0;animation:sway 5s ease-in-out infinite}
.sign .str{height:34px;margin:0 auto;width:70px;border-left:2px solid #16181d;border-right:2px solid #16181d;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.sign .plate{background:var(--brick);color:#fff;border:3px solid #fff;border-radius:8px;padding:8px 6px 7px;box-shadow:0 8px 18px -8px rgba(0,0,0,.7)}
.sign .plate b{display:block;font-family:var(--display);font-weight:900;font-size:1.6rem;letter-spacing:.1em;line-height:1}
.sign .plate small{display:block;font-weight:700;font-size:.72rem;letter-spacing:.06em}
@keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}

/* photo strip */
.strip{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:10px;padding-bottom:12px}
.strip figure{margin:0;position:relative;overflow:hidden;border-radius:4px;min-width:0}
.strip img{display:block;width:100%;height:240px;object-fit:cover;max-width:100%}
.strip figcaption{position:absolute;left:10px;bottom:10px;background:rgba(22,24,29,.85);color:#fff8e3;font-size:.78rem;font-weight:600;padding:4px 9px;border-radius:4px}
.towns{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-size:1rem;text-align:center;padding-block:10px 0}
.towns span{color:var(--gold)}

section{padding-block:76px}
h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(2.2rem,5.4vw,3.6rem);line-height:.92;margin:0 0 14px;letter-spacing:.01em;text-wrap:balance}
.sub{color:var(--muted);max-width:58ch;margin:0 0 36px}

/* facts */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.fact{min-width:0;border-left:2px solid var(--gold);padding-left:18px}
.fact b{display:block;font-family:var(--display);font-weight:900;font-size:4rem;line-height:.9;font-variant-numeric:tabular-nums}
.fact p{margin:10px 0 6px}
.fact small{color:var(--muted);font-size:.78rem}

/* what you get: phone + callouts */
.get{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.get > *{min-width:0}
.phone{width:270px;max-width:100%;aspect-ratio:9/18.6;border-radius:38px;background:#16181d;padding:10px;margin:0 auto;box-shadow:0 30px 60px -28px rgba(22,24,29,.6),0 0 0 1.5px #16181d;position:relative}
.phone::after{content:"";position:absolute;top:18px;left:50%;width:66px;height:7px;margin-left:-33px;border-radius:9px;background:#000}
.scr{height:100%;border-radius:29px;overflow:hidden;background:#fbf3f1;color:#2f3b2a;display:flex;flex-direction:column;font-family:system-ui,sans-serif}
.scr .hd{background:#e9d3d0;padding:36px 14px 14px}
.scr .hd small{font-size:8px;font-weight:700;letter-spacing:.14em;color:#7a3e4f}
.scr .hd b{display:block;font-family:Georgia,serif;font-size:25px;line-height:1;margin:5px 0 6px;color:#3a2a30}
.scr .hd span{font-size:9.5px;color:#5a4a50}
.scr .bt{margin:12px 14px 0;background:#4c6b3c;color:#fff;border-radius:999px;text-align:center;font-size:10px;font-weight:700;padding:9px}
.scr .today{margin:10px 14px 0;font-size:9.5px;background:#fff;border:1px solid #ecdcd9;border-radius:8px;padding:7px 9px;display:flex;justify-content:space-between}
.scr .today b{color:#4c6b3c}
.scr .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:12px 14px 0}
.scr .gal i{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f7c6cf 0 22%,#e48aa0 23% 46%,#c45a78 47% 62%,#7e9e6c 63%)}
.scr .gal i:nth-child(2n){background:radial-gradient(circle at 40% 40%,#fff1b8 0 20%,#f6cf5d 21% 50%,#e3a83a 51% 62%,#6f8f5e 63%)}
.scr .gal i:nth-child(3n){background:radial-gradient(circle at 40% 40%,#efe7ff 0 22%,#b9a6e8 23% 50%,#7f69c4 51% 62%,#6f8f5e 63%)}
.scr .help{margin:10px 14px 0;align-self:flex-end;background:#f6cf5d;border-radius:999px;font-size:8.5px;font-weight:700;padding:5px 9px}
.scr .bar{margin-top:auto;background:#3a2a30;color:#fff;font-size:9px;display:flex;justify-content:space-between;align-items:center;padding:10px 12px}
.scr .bar b{background:#4c6b3c;border-radius:6px;padding:5px 9px}
.note{display:block;text-align:center;color:var(--muted);font-size:.8rem;margin-top:14px}
.list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:18px}
.list li{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start}
.list .k{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;font-family:var(--display);font-weight:900;color:var(--gold);font-size:1.1rem}
.list b{display:block;font-size:1.08rem}
.list span{color:var(--muted)}

/* price board */
.board{background:var(--cream);color:var(--on-cream);border-radius:6px;padding:40px clamp(18px,4vw,48px);box-shadow:0 30px 60px -30px rgba(22,24,29,.5);position:relative}
.board::before{content:"";position:absolute;inset:10px;border:1.5px solid rgba(22,24,29,.35);border-radius:3px;pointer-events:none}
.board h2{color:var(--on-cream);text-align:center}
.board .sub{color:#5c4a12;text-align:center;margin-inline:auto}
.item{padding-block:18px;border-top:1.5px dashed rgba(22,24,29,.3)}
.item:first-of-type{border-top:0}
.row{display:flex;align-items:baseline;gap:10px}
.row h3{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:1.7rem;letter-spacing:.02em;line-height:1}
.row .dots{flex:1;border-bottom:2.5px dotted rgba(22,24,29,.45);transform:translateY(-6px);min-width:20px}
.row .p{font-family:var(--display);font-weight:900;font-size:2.2rem;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.row .p small{font-family:var(--body);font-size:.95rem;font-weight:600}
.item p{margin:6px 0 0;color:#5c4a12;max-width:70ch}
.badge{display:inline-block;background:var(--brick);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:4px;vertical-align:middle;margin-left:8px;font-family:var(--body)}
.extras{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:center;margin-top:20px;font-size:.92rem;color:#5c4a12}
.extras b{color:var(--on-cream)}

/* steps */
.route{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:0;padding:0;list-style:none;position:relative}
.route::before{content:"";position:absolute;top:19px;left:20px;right:20px;border-top:2px dashed var(--line)}
.route li{position:relative;min-width:0}
.route .k{width:40px;height:40px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:1.2rem;margin-bottom:14px;position:relative}
.route b{display:block;font-size:1.05rem;margin-bottom:4px}
.route span{color:var(--muted)}
.split{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.split div{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:18px 20px;min-width:0}
.split h4{margin:0 0 6px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.2rem;letter-spacing:.04em;color:var(--gold)}
.split ul{margin:0;padding-left:18px;color:var(--muted)}

/* trade styles */
.trades{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tr{border-radius:6px;overflow:hidden;min-width:0;border:1px solid var(--line)}
.tr .top{min-height:150px;padding:18px 14px;position:relative}
.tr .top small{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.tr .top b{display:block;margin-top:6px;font-size:1.35rem;line-height:1.05}
.tr p{margin:0;padding:12px 14px;background:var(--panel);color:var(--muted);font-size:.88rem}
.t-fl .top{background:#f5e3e0;color:#3a2a30}.t-fl small{color:#7a3e4f}.t-fl b{font-family:Georgia,serif}
.t-fl .top::after{content:"";position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f7c6cf 0 22%,#e48aa0 23% 46%,#c45a78 47% 62%,#7e9e6c 63%)}
.t-ca .top{background:#2b1d16;color:#f1e3cf;background-image:radial-gradient(circle at 85% 80%,#4a3226 0 18%,transparent 19%)}.t-ca small{color:#d9a066}.t-ca b{font-family:Georgia,serif;font-style:italic}
.t-ga .top{background:#f4c430;color:#141414;background-image:repeating-linear-gradient(-45deg,#141414 0 12px,transparent 12px 24px);background-size:100% 16px;background-repeat:no-repeat;background-position:bottom}.t-ga small{color:#141414}.t-ga b{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:1.7rem}
.t-ba .top{background:#f7f5f2;color:#1c2b4a;background-image:repeating-linear-gradient(115deg,#c8312e 0 10px,#f7f5f2 10px 20px,#1c2b4a 20px 30px,#f7f5f2 30px 40px);background-size:16px 100%;background-repeat:no-repeat;background-position:right}.t-ba small{color:#c8312e}.t-ba b{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:1.7rem}
.fict{color:var(--muted);font-size:.82rem;margin-top:12px}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 36px}
.why div{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px 18px;min-width:0}
.why b{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:1.25rem;letter-spacing:.03em;color:var(--gold);line-height:1.05;margin-bottom:6px}
.why span{color:var(--muted);font-size:.95rem}
.why small{display:block;margin-top:8px;font-size:.75rem;color:var(--muted);opacity:.85}
.trades{grid-template-columns:repeat(3,1fr)}
.tr{display:flex;flex-direction:column;background:var(--panel)}
.tr .top{min-height:120px}
.info{padding:14px 16px 18px;display:flex;flex-direction:column;gap:2px}
.info .lbl{margin:10px 0 0;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.info .lbl:first-child{margin-top:0}
.info p{margin:0;color:var(--text);font-size:.93rem;padding:0;background:none}
.info .quote{font-style:italic;color:var(--text)}
.info .wy{color:var(--muted)}
.t-sa .top{background:linear-gradient(160deg,#fbf4ef,#f1e1e6);color:#3b1830}.t-sa small{color:#8a3a63}.t-sa b{font-family:Didot,"Bodoni 72",Georgia,serif;font-style:italic;font-size:1.5rem}
.t-sa .top::after{content:"";position:absolute;right:14px;bottom:14px;width:36px;height:36px;border-radius:50%;background:#5b2347;box-shadow:-14px 0 0 -4px #c98aa6,-26px 0 0 -8px #e8c3d2}
.t-at .top{background:#efe3cf;color:#2a2017;outline:2px dashed #7b4a26;outline-offset:-9px}.t-at small{color:#7b4a26}.t-at b{font-family:Georgia,serif;text-transform:uppercase;letter-spacing:.06em;font-size:1.1rem}

/* faq */
.faq{max-width:800px}
details{border-bottom:1px solid var(--line);padding-block:17px}
summary{font-weight:700;cursor:pointer;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-family:var(--display);font-weight:900;font-size:1.6rem;line-height:.8}
details[open] summary::after{content:"–"}
details p{color:var(--muted);margin:10px 0 0;max-width:66ch}

/* contact */
.contact{text-align:center;background:var(--cream);color:var(--on-cream);border-radius:6px;padding:48px clamp(18px,4vw,48px) 40px;position:relative;box-shadow:0 30px 60px -30px rgba(22,24,29,.5)}
.contact::before{content:"";position:absolute;inset:10px;border:1.5px solid rgba(22,24,29,.35);border-radius:3px;pointer-events:none}
.contact .big{font-family:var(--script);font-size:clamp(2.6rem,8vw,4.4rem);line-height:1;margin:0}
.contact h2{margin-top:6px}
.contact p{color:var(--muted);max-width:48ch;margin:0 auto 28px}
.contact .cta{justify-content:center}
.contact .cta .btn{min-width:150px;text-align:center}
.contact .direct{margin:22px auto 0;font-size:.98rem;color:var(--muted)}
.contact .direct b{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:.05em;color:var(--text)}
.contact .direct a{color:inherit}
.credits{flex-basis:100%;font-size:.75rem}
.credits a{color:inherit}
footer{padding-block:40px 90px;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line);margin-top:70px}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
.fgrid > div{min-width:0}
.fgrid h4{margin:0 0 10px;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:1rem;color:var(--text)}
.fgrid ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.fgrid a{color:var(--text);text-decoration:none}
.fgrid a:hover{text-decoration:underline}
.fbrand b{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:1.3rem;color:var(--text)}
.fbrand p{margin:6px 0 0}
.fbottom{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;margin-top:30px;padding-top:16px;border-top:1px solid var(--line);font-size:.82rem}
.credits{margin:12px 0 0}
@media (max-width:800px){.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}}

a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
@media (max-width:900px){
  .why{grid-template-columns:1fr}
  .hero,.get{grid-template-columns:1fr;gap:40px}
  .facts,.trades{grid-template-columns:1fr 1fr}
  .route{grid-template-columns:1fr 1fr}
  .route::before{display:none}
  .strip{grid-template-columns:1fr 1fr}
  .strip figure:last-child{display:none}
}
@media (max-width:560px){
  nav{flex-wrap:wrap;row-gap:10px}
  .navr{width:100%;gap:16px;flex-wrap:wrap}
  .navr .lang{margin-left:auto}
  .facts,.trades,.route,.split{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .strip figure:nth-child(2){display:none}
  .strip img{height:200px}
  .row{flex-wrap:wrap}
  .row .dots{display:none}
  .row .p{width:100%}
  .sign{width:104px;right:14px}
  .sign .plate b{font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){.sign{animation:none}html{scroll-behavior:auto}}

/* nav: current page */
.navr a[aria-current="page"]{color:var(--gold);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}


/* inner pages */
.page{max-width:760px;padding-block:48px 10px}
.page .kicker{margin-bottom:10px}
.page h1{font-size:clamp(2.6rem,6.4vw,4.2rem)}
.page h2{font-size:clamp(1.7rem,4vw,2.3rem);margin-top:44px}
.page h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.3rem;letter-spacing:.03em;margin:28px 0 6px}
.page p,.page li{max-width:66ch}
.page ul,.page ol{padding-left:22px}
.page li{margin-bottom:6px}
.page a{color:var(--gold);font-weight:600}
.page .upd{color:var(--muted);font-size:.9rem}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px 20px;margin:22px 0 0}
.toc b{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em}
.toc ol{margin:6px 0 0}
.note-box{background:var(--cream);border-left:4px solid var(--gold);border-radius:4px;padding:14px 18px;margin:20px 0}
.note-box p{margin:0}
.paytable{width:100%;border-collapse:collapse;margin:14px 0 6px;font-variant-numeric:tabular-nums;background:var(--cream);border-radius:6px;overflow:hidden}
.paytable th,.paytable td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.paytable th{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:1rem}
.paytable td.n{text-align:right;white-space:nowrap;font-weight:700}
.paytable tr:last-child td{border-bottom:0}
.tablewrap{overflow-x:auto}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.cards > div{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:18px 20px;min-width:0}
.cards h3{margin-top:0}
.cards p{margin:6px 0 0}
.chan{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.chan a{display:block;background:var(--cream);border:1.5px solid var(--text);border-radius:8px;padding:14px 16px;text-decoration:none;color:var(--text);min-width:0}
.chan a b{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.25rem;letter-spacing:.03em}
.chan a span{color:var(--muted);font-size:.92rem;overflow-wrap:anywhere}
@media (max-width:700px){.cards,.chan{grid-template-columns:1fr}}

/* help button kit (same pattern as client sites) */
.help-btn{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:6;background:var(--gold);color:#fff;border:2px solid var(--text);border-radius:999px;padding:10px 16px;font:700 .95rem var(--body);box-shadow:3px 3px 0 var(--text);cursor:pointer}
#help{position:fixed;right:14px;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:7;width:min(320px,calc(100vw - 28px));background:var(--cream);color:var(--text);border:2px solid var(--text);border-radius:14px;box-shadow:5px 5px 0 var(--text);padding:16px}
#help h3{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:1.5rem;margin:0 0 4px}
#help p{margin:0 0 10px;color:var(--muted);font-size:.92rem}
#help a{display:flex;justify-content:space-between;align-items:center;gap:8px;text-decoration:none;color:var(--text);font-weight:700;padding:10px 12px;border:1.5px solid var(--text);border-radius:10px;margin-top:8px;background:#fff}
#help a small{font-weight:400;color:var(--muted)}
#help .x{position:absolute;top:6px;right:10px;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--text)}
.boardlinks{text-align:center;margin:14px 0 0;font-size:.92rem}
.boardlinks a{color:var(--gold);font-weight:700}
.faq a{color:var(--gold);font-weight:600}
.total{text-align:center;margin:16px auto 0;max-width:62ch;font-size:.95rem;background:#fff;border:1.5px dashed rgba(22,24,29,.35);border-radius:6px;padding:10px 14px}
.help-btn{transition:opacity .2s}
.help-btn.away{opacity:0;pointer-events:none}
@media (max-width:560px){
  nav{position:relative}
  .navr .lang{position:absolute;top:16px;right:0;margin:0}
  .navr{gap:14px;font-size:.92rem}
  .hero{padding-block:22px 48px;gap:26px}
  .hero .window{order:-1}
}
.contact .big{color:var(--gold)}
@media (max-width:560px){
  .contact .cta{flex-direction:column;align-items:stretch;max-width:280px;margin:0 auto}
  .contact .direct b{display:block}
  .contact .direct .dot{display:none}
}