/* The scroll pages' shared parts (the front door and the consultations page): her colours, Forum and Onest served
   from this site, the header, buttons, the gold footer and the where-you-are guide. Each page adds its own scenes
   (front.css, consult.css). Motion lives under .motion only: without the script, or with "reduce motion" on,
   every scene shows its finished state. */
@font-face { font-family: "Forum"; font-weight: 400; font-display: swap; src: url("fonts/forum-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Forum"; font-weight: 400; font-display: swap; src: url("fonts/forum-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Forum"; font-weight: 400; font-display: swap; src: url("fonts/forum-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-weight: 300; font-display: swap; src: url("fonts/onest-cyrillic-300-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 300; font-display: swap; src: url("fonts/onest-latin-300-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 300; font-display: swap; src: url("fonts/onest-latin-ext-300-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-weight: 400; font-display: swap; src: url("fonts/onest-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 400; font-display: swap; src: url("fonts/onest-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 400; font-display: swap; src: url("fonts/onest-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-weight: 500; font-display: swap; src: url("fonts/onest-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 500; font-display: swap; src: url("fonts/onest-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 500; font-display: swap; src: url("fonts/onest-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-weight: 600; font-display: swap; src: url("fonts/onest-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 600; font-display: swap; src: url("fonts/onest-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 600; font-display: swap; src: url("fonts/onest-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root{
  --olive:#344128; --olive-d:#2a3520; --sage:#c6ceb8; --cream:#f3eee3; --beige:#d7c6ae; --gold:#bea369; --brown:#5c3c20;
  --display:"Forum",Georgia,serif;
  --text:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hdr:68px; --pad:clamp(20px,6vw,96px);
}
*{box-sizing:border-box}
html{background:var(--cream)}
body{margin:0;background:var(--cream);color:var(--olive);font:300 17px/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure,blockquote,ul,ol{margin:0}
h1,h2,h3{font-weight:400}
strong,b{font-weight:500}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nowrap{white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--cream);color:var(--olive);padding:10px 16px;border-radius:99px}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--brown);outline-offset:3px}
[data-tone=dark] :focus-visible{outline-color:var(--gold)}
.wrap{max-width:1320px;margin:0 auto;padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.label{font:500 12px/1.4 var(--text);letter-spacing:.16em;text-transform:uppercase;display:flex;gap:12px;align-items:center;margin-bottom:22px}
.label .no{display:inline-grid;place-items:center;flex:none;min-width:30px;height:22px;padding:0 6px;border:1px solid currentColor;border-radius:99px;letter-spacing:.06em;font-variant-numeric:tabular-nums}

/* buttons and links */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px;border-radius:99px;font:500 15px var(--text);text-decoration:none;border:1px solid currentColor;transition:background .3s,color .3s,border-color .3s;white-space:nowrap}
.btn .go{display:inline-block;transition:transform .3s}
.btn:hover .go{transform:translate(2px,-2px)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--olive-d)}
.btn.gold:hover{background:var(--cream);border-color:var(--cream)}
.btn.olive{background:var(--olive);border-color:var(--olive);color:var(--cream)}
.btn.olive:hover{background:var(--brown);border-color:var(--brown)}
.big-btn{min-height:58px;padding:0 30px;font-size:17px}
.textlink{font-weight:500;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1.5px;text-underline-offset:6px}
.actions{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center}

/* the site's header: its colour follows what is under it, and it steps aside while reading down */
.top{position:fixed;top:0;left:0;right:0;z-index:40;padding-top:env(safe-area-inset-top,0px);color:var(--cream);transition:color .4s,transform .4s}
.top::before{content:"";position:absolute;inset:0 0 -26px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(36,44,27,.6),rgba(36,44,27,0))}
.top[data-tone=light],.top[data-tone=gold]{color:var(--olive)}
.top[data-tone=light]::before{background:linear-gradient(180deg,rgba(243,238,227,.92),rgba(243,238,227,0))}
.top[data-tone=gold]::before{background:linear-gradient(180deg,rgba(190,163,105,.92),rgba(190,163,105,0))}
.top.away{transform:translateY(-110%)}
.no-js .top{position:absolute} /* without the script its colour can't follow the page: it stays over the film */
.top .wrap{max-width:none;height:var(--hdr);display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none}
.logo-mark,.brand-mark{display:inline-block;flex:none;aspect-ratio:1;background:currentColor;-webkit-mask:url("img/mark.png") center/contain no-repeat;mask:url("img/mark.png") center/contain no-repeat}
.logo-mark{width:30px}
.logo-word{font:400 21px/1 var(--display);letter-spacing:.04em}
.nav{display:flex;gap:22px;margin-left:auto;font-size:14px}
.nav a,.signin{text-decoration:none;opacity:.85;transition:opacity .2s}
.nav a:hover,.signin:hover{opacity:1}
.signin{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px}
.signin .icon{width:20px;height:20px}
.lang{display:flex;gap:2px;font-size:13px}
.lang a,.lang span{padding:3px 9px;border-radius:99px;border:1px solid transparent;text-decoration:none}
.lang span{border-color:currentColor}
.top .btn{min-height:38px;padding:0 16px;font-size:13.5px}

.scene{position:relative}
.stage{position:relative;overflow:hidden}

/* word fill */
.motion .fill .w,.motion .fill-view .w{opacity:calc(.16 + .84 * var(--on,0));transition:opacity .35s}

/* ============ footer: the site's footer in her gold, her mark before the name ============ */
.foot{background:var(--gold);color:#3e2615;padding:70px 0 calc(28px + env(safe-area-inset-bottom,0px));overflow:hidden}
.ftop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px 40px;align-items:end;padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid rgba(62,38,21,.25)}
.ftop .tagline{font:400 clamp(26px,2.6vw,38px)/1.15 var(--display);letter-spacing:0;text-transform:none;color:var(--olive-d);max-width:20ch;margin:0}
.ftop p{font-size:16px;max-width:52ch}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
.fcols h3{font:500 12px var(--text);letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
.fcols a{display:block;text-decoration:none;margin-bottom:8px;font-size:17px;overflow-wrap:anywhere}
.fcols a:hover{text-decoration:underline}
.fcols ul{list-style:none;padding:0}
.fcols a.soc{display:flex;align-items:center;gap:10px;min-height:44px;margin:6px 0 0}
.fcols a.soc:hover{text-decoration:none}
.soc .ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid currentColor;border-radius:50%;transition:background .2s,color .2s}
.soc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.soc svg .dot{fill:currentColor;stroke:none}
.soc:hover .ic,.soc:focus-visible .ic{background:var(--olive);color:var(--gold)}
.bigname{font:400 10.6vw/.8 var(--display);letter-spacing:.005em;white-space:nowrap;text-align:center;color:var(--olive);margin:70px 0 26px;overflow:hidden}
.bigname span{display:flex;align-items:center;justify-content:center;gap:.16em}
.bigname .brand-mark{width:.8em;color:var(--olive)}
.motion .bigname span{transform:translate3d(0,calc((1 - var(--v,1)) * 60%),0)}
.fine{font-size:13px;line-height:1.6}

/* the guide: where you are and what comes next (hidden without the script) */
.guide{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:39;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 18px 0 8px;border-radius:99px;background:rgba(243,238,227,.94);color:var(--olive);text-decoration:none;font:400 13px var(--text);box-shadow:0 8px 30px rgba(20,26,14,.22);backdrop-filter:blur(8px);transition:opacity .4s,transform .4s}
.guide[hidden]{display:flex;opacity:0;visibility:hidden;transform:translateY(20px);pointer-events:none;transition:opacity .4s,transform .4s,visibility 0s .4s}
.no-js .guide,.static .guide{display:none}
.g-no{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--olive);color:var(--cream);font:500 12px var(--text);font-variant-numeric:tabular-nums}
.g-now{font-weight:500}
.g-next{opacity:.8}
.g-next b{font-weight:500}

@media (max-width:959px){
  .nav{display:none}
  .signin{margin-left:auto}
}
@media (max-width:900px){
  :root{--hdr:60px}
  .top .wrap{gap:12px}
  .logo-word{font-size:18px}
  .logo-mark{width:26px}
  .ftop{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr 1fr}
  .guide{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));justify-content:flex-start}
  .g-next{margin-left:auto}
}
@media (max-width:600px){
  .fcols>div:nth-child(n+3){grid-column:1/-1}
}
@media (max-width:520px){
  .top .wrap{gap:10px}
  .signin span{display:none}
  .signin{padding:0 6px}
}
@media (max-width:440px){
  .logo-word{display:none}
}
@media (max-width:420px){
  .top .btn{padding:0 12px}
  .lang a,.lang span{padding:3px 7px}
}