:root{
  /* the motion curve and radius live on the root, not only inside the
     portal: a var() that resolves to nothing silently turns the whole
     declaration off, which is why the public pages never moved */
  --t:cubic-bezier(.22,.9,.3,1);
  --r:20px;
  --navy:#233d4d;
  --navy-deep:#182b38;
  --gold:#b3915f;
  --gold-light:#cfb388;
  --ivory:#f7f4ee;
  --white:#ffffff;
  --grey:#6b7a85;
  --line:rgba(35,61,77,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Caviar Dreams','Jost',sans-serif;color:var(--navy);background:var(--white);line-height:1.65;font-weight:300;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.15}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
::selection{background:var(--gold);color:#fff}
.eyebrow{font-family:'Caviar Dreams','Jost',sans-serif;font-size:.7rem;letter-spacing:.38em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:20px;display:flex;align-items:center;gap:16px}
.eyebrow::before{content:'';display:inline-block;width:44px;height:1px;background:var(--gold);flex:none}
.hero .eyebrow,.cta-strip .eyebrow,.center .eyebrow{justify-content:center}
.hero .eyebrow::after,.cta-strip .eyebrow::after,.center .eyebrow::after{content:'';display:inline-block;width:44px;height:1px;background:var(--gold-light);flex:none}
.hero .eyebrow::before,.cta-strip .eyebrow::before{background:var(--gold-light)}
.section{padding:120px 0}
.section.tight{padding:70px 0}
.section-head{max-width:720px;margin-bottom:60px}
.section-head h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:16px}
.section-head p.lead{font-size:1.1rem;color:var(--grey)}
.h2-nowrap{white-space:nowrap;font-size:clamp(1.7rem,3.4vw,2.9rem) !important}
@media(max-width:820px){.h2-nowrap{white-space:normal}}
.center{text-align:center}
.center.section-head{margin-left:auto;margin-right:auto}
.btn{display:inline-block;font-family:'Caviar Dreams','Jost',sans-serif;font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;padding:18px 46px;border:1px solid var(--gold);color:var(--gold);transition:all .35s ease;background:transparent;cursor:pointer}
.btn:hover{background:var(--gold);color:var(--white)}
.btn-disabled{opacity:.5;cursor:default;pointer-events:none}
.btn.solid{background:var(--gold);color:var(--white)}
.btn.solid:hover{background:var(--gold-light);border-color:var(--gold-light)}
.btn.light{border-color:rgba(255,255,255,.7);color:#fff}
.btn.light:hover{background:#fff;color:var(--navy)}

/* INTRO SPLASH */
.intro{position:fixed;inset:0;background:var(--navy-deep);z-index:300;display:flex;align-items:center;justify-content:center;transition:opacity 1.1s ease,visibility 1.1s}
.intro img{height:34px;opacity:0;animation:introLogo 2.2s ease forwards}
@keyframes introLogo{0%{opacity:0;transform:scale(.96);filter:blur(4px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:scale(1)}}
.intro.done{opacity:0;visibility:hidden}
@media (prefers-reduced-motion: reduce){.intro{display:none}}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:22px 0;transition:all .4s ease}
nav.scrolled{background:rgba(24,43,56,.96);backdrop-filter:blur(12px);padding:14px 0;box-shadow:0 6px 30px rgba(0,0,0,.18)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;max-width:1360px;gap:30px}
nav .logo img{height:22px}
nav > .wrap > ul{display:flex;gap:24px;list-style:none;align-items:center}
nav ul a{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85);font-weight:400;transition:color .3s;white-space:nowrap}
nav ul a:hover,nav ul a.active{color:var(--gold-light)}
nav ul a.nav-cta{border:1px solid rgba(255,255,255,.5);padding:9px 20px}
nav ul a.nav-cta:hover{border-color:var(--gold-light)}
/* dropdown */
nav li{position:relative;list-style:none}
.has-drop > a::after{content:'▾';margin-left:7px;font-size:.6rem;opacity:.7}
.drop{position:absolute;top:calc(100% + 14px);left:-18px;background:var(--navy-deep);min-width:250px;padding:10px 0;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s ease;box-shadow:0 20px 50px rgba(0,0,0,.3);border-top:2px solid var(--gold)}
.drop::before{content:'';position:absolute;top:-16px;left:0;right:0;height:16px}
.has-drop:hover .drop,.has-drop.open .drop{opacity:1;visibility:visible;transform:none}
.drop li{margin:0}
.drop a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 22px;font-size:.72rem}
.drop a span.ext{color:var(--gold-light);font-size:.75rem}
.drop a:hover{background:rgba(255,255,255,.05)}
.drop .drop-note{padding:10px 22px 6px;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:6px;padding:6px;z-index:110}
.burger span{display:block;width:26px;height:1.6px;background:#fff;transition:all .3s}
@media(max-width:1180px){
  /* the closed menu sits off to the right; clip it so the page cannot be dragged sideways.
     clip, not hidden, so position:sticky keeps working. */
  html{overflow-x:clip}
  body{overflow-x:clip}
  .burger{display:flex}
  .burger.open span:nth-child(1){transform:translateY(7.6px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7.6px) rotate(-45deg)}
  /* backdrop-filter maakt van de nav een containing block voor fixed children op iOS: uitschakelen op mobiel */
  nav.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(24,43,56,.98)}
  nav > .wrap > ul{position:fixed;top:0;left:0;right:0;bottom:0;height:100dvh;background:var(--navy-deep);flex-direction:column;justify-content:flex-start;gap:22px;transform:translateX(100%);transition:transform .4s ease;overflow-y:auto;padding:90px 0 50px;-webkit-overflow-scrolling:touch}
  nav > .wrap > ul.open{transform:translateX(0)}
  nav ul a{font-size:.9rem}
  .has-drop > a{color:var(--gold-light);pointer-events:none}
  .has-drop > a::after{content:''}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-top:none;background:transparent;padding:6px 0 0;min-width:0;display:block}
  .drop a{justify-content:center;padding:9px;font-size:.82rem;color:rgba(255,255,255,.65)}
  .drop .drop-note{text-align:center}
  .has-drop{text-align:center}
}

/* JETFLY QUOTE WIDGET */
.quote-widget{background:var(--navy);padding:48px 46px;display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:36px;align-items:end;color:#fff}
.quote-widget label{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-light);display:block;margin-bottom:12px;font-weight:500}
.quote-widget select{width:100%;background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;padding:15px 16px;font-family:'Caviar Dreams','Jost',sans-serif;font-size:.95rem;font-weight:300;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23cfb388'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.quote-widget select:focus{border-color:var(--gold-light)}
.quote-widget select option{color:var(--navy)}
.qprice{text-align:right}
.qprice .k{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:500}
.qprice .amount{font-family:'Cormorant Garamond',serif;font-size:2.9rem;color:var(--gold-light);line-height:1.15;transition:opacity .3s}
.qprice .pax{font-size:.8rem;color:rgba(255,255,255,.6)}
@media(max-width:860px){.quote-widget{grid-template-columns:1fr;gap:26px;padding:36px 28px}.qprice{text-align:left}}

/* PAGE HERO (subpages) — slow Ken Burns */
.page-hero{position:relative;min-height:64vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.page-hero .kb{position:absolute;inset:0;background-size:cover;background-position:center;animation:kbSlow 22s ease-in-out infinite alternate;will-change:transform}
@keyframes kbSlow{from{transform:scale(1)}to{transform:scale(1.1)}}
.page-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,43,56,.5) 0%,rgba(24,43,56,.25) 40%,rgba(24,43,56,.78) 100%)}
.page-hero .wrap{position:relative;z-index:2;padding-top:160px;padding-bottom:70px}
.page-hero .eyebrow{color:var(--gold-light)}
.page-hero h1{font-size:clamp(2.4rem,5vw,3.8rem);max-width:800px}
.page-hero p.sub{margin-top:16px;font-size:1.1rem;color:rgba(255,255,255,.85);max-width:620px}

/* HOME HERO — slideshow with Ken Burns */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden}
.hero-slides{position:absolute;inset:0}
.hero-slides .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 2s ease;transform:scale(1.06)}
.hero-slides .slide.active{opacity:1;animation:kbZoom 9s ease-out forwards}
@keyframes kbZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero-dots{position:absolute;bottom:40px;right:50px;z-index:3;display:flex;gap:10px}
.hero-dots button{width:36px;height:2px;background:rgba(255,255,255,.35);border:none;cursor:pointer;padding:0;transition:background .3s}
.hero-dots button.on{background:var(--gold-light)}
@media(max-width:700px){.hero-dots{right:50%;transform:translateX(50%);bottom:86px}}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,43,56,.55) 0%,rgba(24,43,56,.30) 45%,rgba(24,43,56,.72) 100%)}
.hero-inner{position:relative;z-index:2;padding:120px 24px 90px;max-width:900px}
.hero .eyebrow{color:var(--gold-light)}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);margin-bottom:22px;font-weight:500}
.hero h1 em{font-style:italic}
.hero p.sub{font-size:clamp(1rem,1.6vw,1.25rem);color:rgba(255,255,255,.88);max-width:640px;margin:0 auto 42px;font-weight:300;letter-spacing:.02em}
.hero .cta-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.scroll-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.7);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase}
.scroll-hint::after{content:'';display:block;width:1px;height:44px;background:linear-gradient(to bottom,rgba(255,255,255,.7),transparent);margin:10px auto 0;animation:drop 2s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* SPLIT / ABOUT */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
.split h2{font-size:clamp(2rem,3.6vw,2.9rem);margin-bottom:26px}
.split p{margin-bottom:18px;color:#44555f}
.statement{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-style:italic;color:var(--navy);border-left:2px solid var(--gold);padding-left:26px;margin:30px 0 0}
.split-img{position:relative;overflow:hidden}
.split-img img{width:100%;height:540px;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.split-img:hover img{transform:scale(1.06)}
.split-img.framed::after{content:'';position:absolute;top:26px;left:26px;right:-26px;bottom:-26px;border:1px solid var(--gold);z-index:-1}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:56px}.split-img img{height:400px}.split-img.framed::after{right:-14px;bottom:-14px;top:14px;left:14px}}

/* STATS */
.stats{background:var(--ivory);padding:70px 0}
.stats .row{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.stat .num{font-family:'Cormorant Garamond',serif;font-size:3rem;color:var(--navy);line-height:1}
.stat .num span{color:var(--gold)}
.stat .lbl{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);margin-top:10px}
@media(max-width:800px){.stats .row{grid-template-columns:repeat(2,1fr);gap:40px 20px}}

/* BRAND CARDS */
.dark-section{background:var(--navy-deep);color:#fff}
.dark-section .eyebrow{color:var(--gold-light)}
.dark-section .section-head p.lead{color:rgba(255,255,255,.65)}
.brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.brand-card{position:relative;height:560px;overflow:hidden;display:flex;align-items:flex-end;color:#fff}
.brand-card::before{content:'';position:absolute;inset:16px;border:1px solid rgba(255,255,255,.35);z-index:3;opacity:0;transition:opacity .5s ease;pointer-events:none}
.brand-card:hover::before{opacity:1}
.brand-card .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s ease}
.brand-card:hover .bg{transform:scale(1.06)}
.brand-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,43,56,.05) 30%,rgba(24,43,56,.88) 100%)}
.brand-card .inner{position:relative;z-index:2;padding:38px 34px;width:100%}
.brand-card .tag{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light);margin-bottom:10px}
.brand-card h3{font-size:2rem;margin-bottom:10px}
.brand-card p{font-size:.94rem;color:rgba(255,255,255,.82);margin-bottom:20px;font-weight:300}
.brand-card .visit{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:#fff;border-bottom:1px solid var(--gold);padding-bottom:6px;transition:color .3s}
.brand-card:hover .visit{color:var(--gold-light)}
.note-line{margin-top:34px;text-align:center;font-size:.85rem;color:rgba(255,255,255,.55);letter-spacing:.06em}
@media(max-width:900px){.brand-grid{grid-template-columns:1fr}.brand-card{height:400px}}

/* CARD GRID (ecosystem etc.) */
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.eco-card{background:var(--white);border:1px solid var(--line);box-shadow:0 4px 24px rgba(24,43,56,.05);transition:box-shadow .4s ease,transform .4s ease;color:var(--navy)}
.eco-card:hover{box-shadow:0 28px 70px rgba(24,43,56,.15);transform:translateY(-5px)}
.eco-card .ph{height:230px;overflow:hidden}
.eco-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.eco-card:hover .ph img{transform:scale(1.07)}
.eco-card .body{padding:28px 26px 32px}
.eco-card h3{font-size:1.45rem;margin-bottom:10px}
.eco-card p{font-size:.92rem;color:var(--grey)}
.eco-card .more{display:inline-block;margin-top:16px;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:500}
@media(max-width:900px){.eco-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.eco-grid{grid-template-columns:1fr}}

/* ORG */
.org-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.org-card{background:var(--white);padding:34px 30px;border-top:2px solid var(--gold);transition:transform .35s ease,box-shadow .35s ease}
.org-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(24,43,56,.10)}
.org-card .loc{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;font-weight:500}
.org-card h3{font-size:1.5rem;margin-bottom:10px}
.org-card p{font-size:.9rem;color:var(--grey)}
.org-card .weblink{display:inline-block;margin-top:14px;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:3px}
.org-hold{max-width:640px;margin:0 auto 44px;background:var(--navy);color:#fff;text-align:center;padding:38px 30px}
.org-hold .loc{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light);margin-bottom:10px}
.org-hold h3{font-size:1.7rem;margin-bottom:8px}
.org-hold p{font-size:.9rem;color:rgba(255,255,255,.72)}
.org-connector{width:1px;height:44px;background:var(--gold);margin:0 auto 44px}
@media(max-width:900px){.org-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.org-grid{grid-template-columns:1fr}}

/* IMAGE OVERLAY SECTION */
.overlay-section{position:relative;color:#fff;background-size:cover;background-position:center}
.overlay-section::before{content:'';position:absolute;inset:0;background:rgba(24,43,56,.87)}
.overlay-section > .wrap{position:relative;z-index:2}
.overlay-section .eyebrow{color:var(--gold-light)}
.overlay-section h2{font-size:clamp(2rem,3.6vw,2.9rem);margin-bottom:14px}
.overlay-section p.lead{color:rgba(255,255,255,.75);max-width:680px;margin-bottom:60px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:56px}
.step{border:1px solid rgba(255,255,255,.22);padding:36px 30px;backdrop-filter:blur(3px)}
.step .n{font-family:'Cormorant Garamond',serif;font-size:2.4rem;color:var(--gold-light);line-height:1;margin-bottom:14px}
.step h3{font-size:1.3rem;margin-bottom:10px}
.step p{font-size:.9rem;color:rgba(255,255,255,.75)}
.step .dur{display:inline-block;margin-top:14px;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-light)}
.fine{font-size:.78rem;color:rgba(255,255,255,.5);max-width:760px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

/* FEATURE LIST */
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.feat{background:var(--white);border:1px solid var(--line);padding:30px 28px}
.feat h3{font-size:1.25rem;margin-bottom:8px}
.feat p{font-size:.9rem;color:var(--grey)}
.feat .k{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:10px}
.ivory .feat{background:var(--white)}
@media(max-width:700px){.feat-grid{grid-template-columns:1fr}}
.check-list{list-style:none;margin-top:10px}
.check-list li{padding:11px 0;border-bottom:1px solid var(--line);font-size:.96rem;color:#44555f}
.dark-section .check-list li{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.12)}

/* MARQUEE */
.marquee{overflow:hidden;background:var(--navy-deep);padding:30px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.marquee-track{display:flex;gap:64px;width:max-content;animation:marq 46s linear infinite}
.marquee-track span{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-style:italic;color:rgba(255,255,255,.78);white-space:nowrap}
.marquee-track .sep{color:var(--gold);font-style:normal;font-size:.85rem;display:flex;align-items:center}
@keyframes marq{to{transform:translateX(-50%)}}

/* DEST BANDS — parallax inner layer */
.dest-band{display:grid;grid-template-columns:1fr 1fr;min-height:460px}
.dest-band .ph{background-size:cover;background-position:center;min-height:320px;position:relative;overflow:hidden}
.dest-band .ph .phi{position:absolute;inset:-90px 0;background-size:cover;background-position:center;will-change:transform}
.dest-band .txt{background:var(--ivory);display:flex;flex-direction:column;justify-content:center;padding:64px}
.dest-band .txt h3{font-size:2rem;margin-bottom:14px}
.dest-band .txt p{color:#44555f;font-size:.97rem;margin-bottom:12px}
.dest-band .txt .season{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-top:14px;font-weight:500}
.dest-band.flip .ph{order:2}
@media(max-width:860px){.dest-band{grid-template-columns:1fr}.dest-band.flip .ph{order:0}.dest-band .txt{padding:44px 30px}}

/* TIMELINE */
.timeline{display:grid;grid-template-columns:repeat(5,1fr);position:relative;margin-top:70px}
.timeline::before{content:'';position:absolute;top:8px;left:6%;right:6%;height:1px;background:rgba(255,255,255,.25)}
.mile{text-align:center;position:relative;padding:0 10px}
.mile .dot{width:17px;height:17px;border-radius:50%;background:var(--navy-deep);border:1.6px solid var(--gold-light);margin:0 auto 22px;position:relative;z-index:2}
.mile .dot::before{content:'';position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(207,179,136,.55);animation:pulse 2.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.6);opacity:0}}
.mile .yr{font-size:.72rem;letter-spacing:.26em;color:var(--gold-light);margin-bottom:8px}
.mile .num{font-family:'Cormorant Garamond',serif;font-size:2.6rem;line-height:1}
.mile .lbl{font-size:.78rem;color:rgba(255,255,255,.65);margin-top:6px}
.target{margin-top:64px;text-align:center;font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-style:italic;color:var(--gold-light)}
@media(max-width:800px){.timeline{grid-template-columns:1fr;gap:34px}.timeline::before{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto}}

/* EVENTS */
.ivory{background:var(--ivory)}
.ev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ev{background:var(--white);padding:34px 28px;border-bottom:2px solid var(--gold);transition:transform .35s ease, box-shadow .35s ease}
.ev:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(24,43,56,.10)}
.ev .date{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:14px}
.ev h3{font-size:1.35rem;margin-bottom:8px}
.ev p{font-size:.88rem;color:var(--grey)}
@media(max-width:960px){.ev-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ev-grid{grid-template-columns:1fr}}

/* CTA STRIP */
.cta-strip{position:relative;color:#fff;background-size:cover;background-position:center;padding:140px 0;text-align:center}
@media(min-width:1000px){.cta-strip{background-attachment:fixed}}
.cta-strip::before{content:'';position:absolute;inset:0;background:rgba(24,43,56,.68)}
.cta-strip .wrap{position:relative;z-index:2;max-width:820px}
.cta-strip h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:18px}
.cta-strip p{color:rgba(255,255,255,.85);font-size:1.05rem;margin-bottom:38px}
.cta-strip .eyebrow{color:var(--gold-light)}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.contact-grid h2{font-size:clamp(2rem,3.6vw,2.9rem);margin-bottom:20px}
.contact-grid p{color:#44555f;margin-bottom:26px}
.line{display:flex;flex-direction:column;gap:6px;margin-bottom:26px}
.line .k{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:500}
.line .v{font-family:'Cormorant Garamond',serif;font-size:1.5rem}
.line .v a:hover{color:var(--gold)}
.contact-img img{width:100%;height:520px;object-fit:cover}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:50px}.contact-img img{height:380px}}

/* PRICE CARD */
.price-card{background:var(--navy);color:#fff;padding:44px 40px;max-width:420px}
.price-card .k{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-light);margin-bottom:10px}
.price-card .amount{font-family:'Cormorant Garamond',serif;font-size:2.6rem;line-height:1.1}
.price-card .per{font-size:.85rem;color:rgba(255,255,255,.65);margin-bottom:18px}
.price-card ul{list-style:none;margin-top:16px}
.price-card ul li{padding:8px 0;font-size:.92rem;color:rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.1)}

/* FOOTER */
footer{background:var(--navy-deep);color:rgba(255,255,255,.65);padding:74px 0 36px;border-top:1px solid var(--gold)}
footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}
footer .top img{height:24px;margin-bottom:20px}
footer .top p{font-size:.88rem;max-width:300px}
footer h4{font-family:'Caviar Dreams','Jost',sans-serif;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-light);margin-bottom:18px;font-weight:500}
footer ul{list-style:none}
footer ul li{margin-bottom:10px}
footer ul a{font-size:.9rem;transition:color .3s}
footer ul a:hover{color:#fff}
footer .bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:30px;font-size:.78rem;color:rgba(255,255,255,.4)}
@media(max-width:860px){footer .top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer .top{grid-template-columns:1fr}}

/* SHOWCASE — interactive What We Do */
.showcase{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:stretch}
.show-list{display:flex;flex-direction:column;justify-content:center}
.show-item{padding:24px 0;border-bottom:1px solid var(--line);cursor:pointer}
.show-item .row{display:flex;align-items:baseline;gap:20px}
.show-item .n{font-size:.7rem;letter-spacing:.24em;color:var(--gold);font-weight:500;transition:color .3s}
.show-item h3{font-size:clamp(1.4rem,2.2vw,1.9rem);color:rgba(35,61,77,.45);transition:color .4s}
.show-item.active h3,.show-item:hover h3{color:var(--navy)}
.show-item .body{max-height:0;overflow:hidden;opacity:0;transition:max-height .6s ease,opacity .6s ease}
.show-item.active .body{max-height:160px;opacity:1}
.show-item .body p{margin:10px 0 6px;color:var(--grey);font-size:.95rem;max-width:480px}
.show-item .body .more{display:inline-block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:500;border-bottom:1px solid var(--gold);padding-bottom:3px}
.show-media{position:relative;min-height:560px;overflow:hidden}
.show-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .9s ease}
.show-img.active{opacity:1;animation:imgBreathe 14s ease-in-out infinite alternate}
@media(max-width:900px){.showcase{grid-template-columns:1fr;gap:40px}.show-media{min-height:340px;order:-1}}

/* Continuous photo motion */
@keyframes imgBreathe{from{transform:scale(1)}to{transform:scale(1.09)}}
.eco-card .ph img{animation:imgBreathe 16s ease-in-out infinite alternate}
.split-img img{animation:imgBreathe 18s ease-in-out infinite alternate}
.brand-card .bg{animation:imgBreathe 17s ease-in-out infinite alternate}
.contact-img img{animation:imgBreathe 18s ease-in-out infinite alternate}

/* DESTINATION PANELS — immersive full-bleed */
.dest-panel{position:relative;min-height:70vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.dest-panel .phi{position:absolute;inset:-90px 0;background-size:cover;background-position:center;will-change:transform}
.dest-panel::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,43,56,.12) 30%,rgba(24,43,56,.78) 100%)}
.dest-content{position:relative;z-index:2;width:100%;padding:74px 0}
.dest-content .season{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-light);margin-bottom:12px;font-weight:500}
.dest-content h3{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-bottom:12px}
.dest-content p{max-width:600px;color:rgba(255,255,255,.86)}

/* ECOSYSTEM EDITORIAL LIST */
.eco-rows{border-top:1px solid rgba(255,255,255,.14)}
.eco-row{display:grid;grid-template-columns:1.1fr 1.4fr auto;gap:44px;align-items:baseline;padding:32px 0;border-bottom:1px solid rgba(255,255,255,.14);transition:padding .35s ease}
.eco-row:hover{padding-left:10px}
.eco-row .t{display:flex;align-items:baseline;gap:20px}
.eco-row .t .n{font-size:.68rem;letter-spacing:.24em;color:var(--gold-light);font-weight:500}
.eco-row h3{font-size:clamp(1.4rem,2.2vw,1.8rem);color:#fff;transition:color .35s ease}
.eco-row:hover h3{color:var(--gold-light)}
.eco-row p{font-size:.92rem;color:rgba(255,255,255,.65);margin:0}
.eco-row .st{display:flex;align-items:center;gap:9px;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:500;white-space:nowrap}
.eco-row .st i{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.eco-row .st.now i{background:#7fd6a8;box-shadow:0 0 8px rgba(127,214,168,.8)}
.eco-row .st.soon i{background:var(--gold-light);box-shadow:0 0 8px rgba(207,179,136,.8)}
@media(max-width:860px){.eco-row{grid-template-columns:1fr;gap:10px;padding:26px 0}.eco-row:hover{padding-left:0}}

/* ECOSYSTEM MOSAIC */
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:255px;gap:18px}
.mo{position:relative;overflow:hidden;display:flex;align-items:flex-end;color:#fff}
.mo .bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:imgBreathe 18s ease-in-out infinite alternate}
.mo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,43,56,.03) 35%,rgba(24,43,56,.86) 100%)}
.mo .txt{position:relative;z-index:2;padding:26px;width:100%}
.mo .st{display:flex;align-items:center;gap:9px;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;margin-bottom:8px;color:rgba(255,255,255,.75);font-weight:500}
.mo .st i{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.mo .st.now i{background:#7fd6a8;box-shadow:0 0 8px rgba(127,214,168,.8)}
.mo .st.soon i{background:var(--gold-light);box-shadow:0 0 8px rgba(207,179,136,.8)}
.mo h3{font-size:1.65rem}
.mo p{font-size:.88rem;color:rgba(255,255,255,.85);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .5s ease,margin .5s ease}
.mo:hover p{max-height:110px;opacity:1;margin-top:8px}
.mo.tall{grid-row:span 2}
.mo.wide{grid-column:span 3;grid-auto-rows:auto}
@media(max-width:900px){.mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:230px}.mo.wide{grid-column:span 2}}
@media(max-width:600px){.mosaic{grid-template-columns:1fr}.mo.tall{grid-row:span 1}.mo.wide{grid-column:span 1}.mo p{max-height:110px;opacity:1;margin-top:8px}}

/* STATUS BADGES */
.badge{display:inline-block;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;padding:5px 13px;border:1px solid;margin-bottom:14px}
.badge.now{color:#2e7d5b;border-color:rgba(46,125,91,.4);background:rgba(46,125,91,.07)}
.badge.soon{color:var(--gold);border-color:rgba(179,145,95,.5);background:rgba(179,145,95,.08)}
.dark-section .badge.now{color:#7fc9a6;border-color:rgba(127,201,166,.4);background:rgba(127,201,166,.08)}
.dark-section .badge.soon{color:var(--gold-light);border-color:rgba(207,179,136,.45);background:rgba(207,179,136,.08)}
.brand-card .badge{position:absolute;top:22px;right:22px;z-index:3;margin:0;backdrop-filter:blur(6px);background:rgba(24,43,56,.72)}
.brand-card .badge.now{color:#a9e3c6;border-color:rgba(169,227,198,.55)}
.brand-card .badge.soon{color:var(--gold-light);border-color:rgba(207,179,136,.65)}

/* 4-column brand grid */
.brand-grid.four{grid-template-columns:repeat(4,1fr)}
.brand-grid.four .brand-card{height:470px}
.brand-grid.four .brand-card h3{font-size:1.55rem}
.brand-grid.four .brand-card .inner{padding:30px 26px}
@media(max-width:1080px){.brand-grid.four{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.brand-grid.four{grid-template-columns:1fr}}

/* PRICE TABLE */
.table-scroll{overflow-x:auto;margin-bottom:26px}
.price-table{width:100%;border-collapse:collapse;min-width:720px}
.price-table th{font-family:'Caviar Dreams','Jost',sans-serif;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:500;text-align:left;padding:12px 16px;border-bottom:1px solid var(--gold);white-space:nowrap}
.price-table th.num,.price-table td.num{text-align:right}
.price-table td{padding:17px 16px;border-bottom:1px solid var(--line);font-size:.95rem;color:#44555f;white-space:nowrap}
.price-table td:first-child{font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:var(--navy)}
.price-table tbody tr{transition:background .3s}
.price-table tbody tr:hover{background:var(--ivory)}

/* FORMS */
.nl-form{display:flex;gap:10px;margin-top:16px;max-width:340px}
.nl-form input{flex:1;min-width:0;background:transparent;border:1px solid rgba(255,255,255,.3);padding:12px 14px;color:#fff;font-family:'Caviar Dreams','Jost',sans-serif;font-size:.85rem;font-weight:300}
.nl-form input::placeholder{color:rgba(255,255,255,.4)}
.nl-form button{font-family:'Caviar Dreams','Jost',sans-serif;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;background:var(--gold);border:1px solid var(--gold);color:#fff;padding:12px 18px;cursor:pointer;transition:background .3s}
.nl-form button:hover{background:var(--gold-light)}
.form-grid{display:grid;gap:16px;max-width:560px}
.form-grid label{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:500}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid var(--line);padding:15px 17px;font-family:'Caviar Dreams','Jost',sans-serif;font-size:.95rem;font-weight:300;color:var(--navy);background:#fff;outline:none;transition:border-color .3s}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--gold)}
.form-grid textarea{min-height:130px;resize:vertical}

/* OWNER AREA */
.owner-box{max-width:460px;margin:0 auto;background:#fff;border-top:2px solid var(--gold);box-shadow:0 30px 80px rgba(24,43,56,.12);padding:48px 44px}
.owner-box h3{font-size:1.7rem;margin-bottom:6px}
.owner-box .sub{font-size:.9rem;color:var(--grey);margin-bottom:26px}
.owner-box input{width:100%;border:1px solid var(--line);padding:15px 17px;font-family:'Caviar Dreams','Jost',sans-serif;font-size:.95rem;font-weight:300;margin-bottom:14px;outline:none}
.owner-box input:focus{border-color:var(--gold)}
.owner-box .note{font-size:.8rem;color:var(--grey);margin-top:18px;line-height:1.6}

/* Reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1)}
.reveal.visible{opacity:1;transform:none}

/* Nav underline animation */
nav > .wrap > ul > li > a:not(.nav-cta){position:relative;padding-bottom:6px}
nav > .wrap > ul > li > a:not(.nav-cta)::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold-light);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
nav > .wrap > ul > li > a:not(.nav-cta):hover::before,nav > .wrap > ul > li > a.active:not(.nav-cta)::before{transform:scaleX(1)}

@media (prefers-reduced-motion: reduce){
  .hero-slides .slide,.page-hero .kb,.marquee-track,.mile .dot::before,.eco-card .ph img,.split-img img,.brand-card .bg,.show-img,.contact-img img{animation:none !important}
  .reveal{transition:none;opacity:1;transform:none}
}

/* UPCOMING EVENTS POPUP */
.evpop{position:fixed;right:26px;bottom:26px;z-index:250;background:var(--navy-deep);color:#fff;width:350px;max-width:calc(100vw - 40px);box-shadow:0 30px 80px rgba(0,0,0,.4);border-top:2px solid var(--gold);transform:translateY(34px);opacity:0;visibility:hidden;transition:all .7s cubic-bezier(.22,.61,.36,1)}
.evpop.show{transform:none;opacity:1;visibility:visible}
.evpop .hd{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 12px}
.evpop .hd .t{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light);font-weight:500}
.evpop .close{background:none;border:none;color:rgba(255,255,255,.55);font-size:.95rem;cursor:pointer;padding:4px 6px;transition:color .3s}
.evpop .close:hover{color:#fff}
.evpop a.item{display:block;padding:13px 24px;border-top:1px solid rgba(255,255,255,.08);transition:background .3s}
.evpop a.item:hover{background:rgba(255,255,255,.06)}
.evpop .d{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-light);font-weight:500}
.evpop h5{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:500;color:#fff;margin-top:2px;line-height:1.25}
.evpop .all{display:block;text-align:center;padding:15px;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-light);border-top:1px solid rgba(255,255,255,.14);transition:background .3s}
.evpop .all:hover{background:rgba(255,255,255,.06)}
@media(max-width:600px){.evpop{right:12px;bottom:12px;left:12px;width:auto}}

/* CAPTAIN LEAD FORM */
.lead-form{max-width:640px}
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.fgrid2{grid-template-columns:1fr}}
.lead-form label{display:block}

/* ---------- refined form controls ---------- */
.form-grid input:not([type=checkbox]):not([type=radio]),.form-grid textarea{border-radius:0;-webkit-appearance:none;appearance:none}
.form-grid select{-webkit-appearance:none;appearance:none;border-radius:0;cursor:pointer;padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23b3915f'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center}
.form-grid input::placeholder,.form-grid textarea::placeholder{color:#a9b3ba;font-weight:300}

/* ---------- elegant form card ---------- */
.form-card{background:#fff;border:1px solid var(--line);padding:54px 56px;max-width:820px;position:relative;
  box-shadow:0 30px 70px -46px rgba(35,61,77,.5)}
.form-card:before{content:'';position:absolute;top:-1px;left:-1px;width:84px;height:2px;background:var(--gold)}
.form-card .form-grid{max-width:none;gap:22px}
.form-card .fgrid2{gap:24px}
.form-card .card-note{font-size:.78rem;color:var(--grey);font-weight:300;line-height:1.7;margin:0 0 30px}
@media(max-width:680px){.form-card{padding:36px 24px}}

.form-grid label.consent{display:flex;gap:13px;align-items:flex-start;
  border-top:1px solid var(--line);padding-top:24px;margin-top:8px}
.form-grid label.consent span{text-transform:none;letter-spacing:0;font-size:.82rem;
  color:var(--grey);font-weight:300;line-height:1.65}
.form-grid label.consent input[type=checkbox]{-webkit-appearance:none;appearance:none;
  width:17px;height:17px;flex:0 0 17px;margin:2px 0 0;padding:0;border:1px solid #c9c2b4;
  background:#fff;border-radius:0;cursor:pointer;position:relative;transition:background .2s,border-color .2s}
.form-grid label.consent input[type=checkbox]:hover{border-color:var(--gold)}
.form-grid label.consent input[type=checkbox]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.form-grid label.consent input[type=checkbox]:checked{background:var(--gold);border-color:var(--gold)}
.form-grid label.consent input[type=checkbox]:checked::after{content:'';position:absolute;
  left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 1.7px 1.7px 0;transform:rotate(45deg)}

/* ---------- document download row ---------- */
.doc-row{display:flex;align-items:center;gap:20px;border:1px solid rgba(255,255,255,.22);padding:22px 26px;
  max-width:560px;transition:border-color .35s,background .35s;text-decoration:none}
.doc-row:hover{border-color:var(--gold);background:rgba(179,145,95,.07)}
.doc-row .doc-ico{width:34px;height:44px;flex:0 0 34px;border:1px solid var(--gold);position:relative}
.doc-row .doc-ico:after{content:'PDF';position:absolute;left:0;right:0;bottom:6px;text-align:center;
  font-size:.5rem;letter-spacing:.14em;color:var(--gold)}
.doc-row .doc-txt strong{display:block;color:#fff;font-weight:400;font-size:.96rem;letter-spacing:.02em}
.doc-row .doc-txt span{display:block;color:rgba(255,255,255,.55);font-size:.78rem;font-weight:300;margin-top:4px}


/* ======================= /start — customer journey ======================= */
body.journey{background:var(--white)}
body.journey .evpop{display:none !important}
body.journey.branch nav#nav{background:rgba(24,43,56,.96);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);box-shadow:0 6px 30px rgba(0,0,0,.18)}
.jsec{display:none}
.jsec.on{display:block}
.jentry.on{display:flex}

/* --- entry --- */
.jentry{min-height:100svh;align-items:center;padding:104px 0 40px;
  background:var(--navy-deep);position:relative;overflow:hidden}
.jentry:before{content:'';position:absolute;inset:0;background:url('hero.jpg') center/cover no-repeat;
  opacity:.16;animation:kbSlow 26s ease-in-out infinite alternate}
.jentry .wrap{position:relative;z-index:2;width:100%}
.jentry .welcome{color:var(--gold-light);font-size:.95rem;font-weight:300;margin-bottom:14px}
.jentry h1{color:#fff;font-size:clamp(2.1rem,6.4vw,3.6rem);margin-bottom:34px;max-width:15ch}
.jpick{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px}
.jcard{display:block;width:100%;text-align:left;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.22);
  padding:26px 24px;transition:background .35s,border-color .35s,transform .35s}
.jcard:hover,.jcard:focus-visible{background:rgba(179,145,95,.18);border-color:var(--gold);transform:translateY(-3px);outline:none}
.jcard .k{display:block;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-light);margin-bottom:12px}
.jcard .t{display:block;font-family:'Cormorant Garamond',serif;font-size:1.72rem;color:#fff;line-height:1.1;margin-bottom:8px}
.jcard .d{display:block;font-size:.86rem;color:rgba(255,255,255,.62);font-weight:300;line-height:1.55}
.jcard .go{display:inline-block;margin-top:16px;color:var(--gold-light);font-size:.68rem;
  letter-spacing:.22em;text-transform:uppercase}
.jentry .foot{margin-top:34px;font-size:.78rem;color:rgba(255,255,255,.42);font-weight:300}

/* --- branch header --- */
.jback{background:none;border:none;font-family:inherit;color:var(--gold);cursor:pointer;padding:0;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px}
.jback:before{content:'';width:22px;height:1px;background:var(--gold);transition:width .3s}
.jback:hover:before{width:34px}
.jhead{padding:128px 0 0}
.jhead h1{font-size:clamp(2rem,5.2vw,3.2rem);margin:18px 0 14px}
.jhead p.lead{font-size:1.06rem;color:var(--grey);max-width:640px}

/* --- stats --- */
.jstats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin:44px 0 0}
.jstats > div{background:#fff;padding:26px 24px}
.jstats .v{font-family:'Cormorant Garamond',serif;font-size:1.9rem;color:var(--navy);line-height:1.05;margin-bottom:8px}
.jstats .l{font-size:.8rem;color:var(--grey);font-weight:300;line-height:1.5}

/* --- concept cards --- */
.jcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.jcards article{border-top:2px solid var(--gold);padding-top:22px}
.jcards h3{font-size:1.3rem;margin-bottom:10px}
.jcards p{font-size:.9rem;color:var(--grey);font-weight:300}

/* --- simulator --- */
.sim{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.simfield{margin-bottom:26px}
.simfield > label{display:block;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px}
.simopts{display:flex;flex-wrap:wrap;gap:8px}
.simopt{font-family:inherit;font-size:.84rem;font-weight:300;cursor:pointer;background:#fff;
  border:1px solid var(--line);color:var(--navy);padding:12px 18px;transition:all .28s;line-height:1.3}
.simopt:hover{border-color:var(--gold)}
.simopt.on{background:var(--navy);border-color:var(--navy);color:#fff}
.simopt small{display:block;font-size:.68rem;opacity:.6;margin-top:3px}
.simopt.wide{flex:1 1 100%;text-align:left}
.simres{background:var(--ivory);border:1px solid var(--line);padding:34px 32px;position:relative}
.simres:before{content:'';position:absolute;top:-1px;left:-1px;width:76px;height:2px;background:var(--gold)}
.simres .rname{font-family:'Cormorant Garamond',serif;font-size:1.7rem;margin-bottom:4px}
.simres .rbase{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-bottom:26px}
.simgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:26px}
.simgrid > div{background:#fff;padding:17px 18px}
.simgrid .k{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.simgrid .v{font-family:'Cormorant Garamond',serif;font-size:1.42rem;color:var(--navy);line-height:1.05}
.simgrid .s{font-size:.72rem;color:var(--grey);font-weight:300;margin-top:5px;line-height:1.4}
.bars .row{margin-bottom:14px}
.bars .cap{display:flex;justify-content:space-between;font-size:.76rem;color:var(--grey);margin-bottom:6px}
.bars .cap b{color:var(--navy);font-weight:400}
.bars .track{height:9px;background:rgba(35,61,77,.09)}
.bars .fill{height:100%;background:var(--navy);width:0;transition:width .6s cubic-bezier(.22,.61,.36,1)}
.bars .fill.gold{background:var(--gold)}
.adv{font-family:'Cormorant Garamond',serif;font-size:2.1rem;color:var(--gold);margin-top:18px;line-height:1}
.adv span{font-family:'Caviar Dreams','Jost',sans-serif;font-size:.8rem;color:var(--grey);
  display:block;margin-top:6px;letter-spacing:.02em}
.disclaimer{font-size:.74rem;line-height:1.65;color:var(--grey);font-weight:300;
  border-left:1px solid var(--gold);padding-left:16px;margin-top:26px}

/* --- FAQ --- */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;width:100%;
  background:none;border:none;text-align:left;font-family:inherit;cursor:pointer;padding:22px 2px;
  color:var(--navy);transition:color .3s}
.faq-q span:first-child{font-family:'Cormorant Garamond',serif;font-size:1.22rem;line-height:1.3}
.faq-q:hover{color:var(--gold)}
.faq-ico{position:relative;width:16px;height:16px;flex:0 0 16px;margin-top:6px}
.faq-ico:before,.faq-ico:after{content:'';position:absolute;background:var(--gold);transition:transform .35s}
.faq-ico:before{left:0;right:0;top:7.5px;height:1px}
.faq-ico:after{top:0;bottom:0;left:7.5px;width:1px}
.faq-item.open .faq-ico:after{transform:scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.22,.61,.36,1)}
.faq-a p{font-size:.92rem;color:var(--grey);font-weight:300;padding:0 40px 24px 2px}

/* --- journey forms --- */
.jform{max-width:720px}
.jform .form-grid{max-width:none}
.jdone{display:none;border:1px solid var(--gold);background:var(--ivory);padding:34px 32px;max-width:720px}
.jdone.on{display:block}
.jdone h3{font-size:1.5rem;color:var(--navy);margin-bottom:10px}
.jdone p{color:var(--grey);font-size:.94rem;font-weight:300}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- lists --- */
.jlist{list-style:none;max-width:660px}
.jlist li{position:relative;padding:0 0 15px 26px;color:var(--grey);font-weight:300;font-size:.94rem}
.jlist li:before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;
  border:1px solid var(--gold);transform:rotate(45deg)}
.jlist li strong{color:var(--navy);font-weight:400}
.jnote{border-left:1px solid var(--gold);padding-left:18px;font-size:.88rem;color:var(--grey);
  font-weight:300;max-width:640px}

/* --- dealer models --- */
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.model{border:1px solid var(--line);padding:28px 26px;transition:border-color .35s,transform .35s}
.model:hover{border-color:var(--gold);transform:translateY(-3px)}
.model .n{font-family:'Cormorant Garamond',serif;font-size:1.6rem;color:var(--gold);margin-bottom:10px}
.model h3{font-size:1.24rem;margin-bottom:10px}
.model p{font-size:.88rem;color:var(--grey);font-weight:300}
.model .lvl{margin-top:16px;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

@media(max-width:900px){
  .jpick,.jcards,.jstats,.models,.sim{grid-template-columns:1fr}
  .sim{gap:32px}
  .jentry{padding:92px 0 32px;min-height:100svh}
  .jentry h1{font-size:clamp(1.85rem,7.4vw,2.5rem);margin-bottom:22px}
  .jcard{padding:18px 18px}
  .jcard .t{font-size:1.4rem;margin-bottom:4px}
  .jcard .d{font-size:.8rem}
  .jcard .go{margin-top:10px}
  .jentry .foot{margin-top:22px}
  .jhead{padding:104px 0 0}
  .simres{padding:26px 20px}
  .faq-q span:first-child{font-size:1.08rem}
  .faq-a p{padding-right:12px}
}
@media(max-width:400px){
  .jcard{padding:15px 16px}
  .jcard .t{font-size:1.28rem}
  .jcard .d{display:none}
  .jcard .k{margin-bottom:7px}
}

/* ---------- /start : registratie-gate ---------- */
.gate{padding:120px 0 100px}
.gate .form-card{max-width:660px}
.gate-lead{font-size:1.02rem;color:var(--grey);max-width:600px;margin-bottom:38px}
.gate-perks{list-style:none;margin:0 0 34px}
.gate-perks li{position:relative;padding:0 0 10px 24px;font-size:.9rem;color:var(--grey);font-weight:300}
.gate-perks li:before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;
  border:1px solid var(--gold);transform:rotate(45deg)}
.signin{margin-top:26px;max-width:660px}
.signin-toggle{background:none;border:none;font-family:inherit;color:var(--gold);cursor:pointer;padding:0;
  font-size:.76rem;letter-spacing:.06em}
.signin-toggle:hover{text-decoration:underline}
.signin-box{display:none;margin-top:18px;border:1px solid var(--line);padding:24px 26px;background:var(--ivory)}
.signin-box.on{display:block}
.signin-row{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end}
.signin-row label{display:block;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px}
.signin-row input{width:100%;border:1px solid var(--line);padding:13px 15px;background:#fff;
  font-family:inherit;font-size:.92rem;font-weight:300;color:var(--navy);outline:none;border-radius:0;
  -webkit-appearance:none;appearance:none}
.signin-row input:focus{border-color:var(--gold)}
.signin-row button{white-space:nowrap;padding:14px 26px}
.signin-err{display:none;color:#b04a3a;font-size:.82rem;margin-top:12px}
.signin-err.on{display:block}

/* welkomstpaneel met code */
.codebox{display:none;border:1px solid var(--gold);background:var(--ivory);padding:36px 34px;max-width:660px;
  position:relative}
.codebox.on{display:block}
.codebox:before{content:'';position:absolute;top:-1px;left:-1px;width:80px;height:2px;background:var(--gold)}
.codebox h3{font-size:1.6rem;margin-bottom:10px}
.codebox p{color:var(--grey);font-size:.94rem;font-weight:300;margin-bottom:22px}
.code{font-family:'Cormorant Garamond',serif;font-size:2.1rem;color:var(--gold);letter-spacing:.06em;
  border:1px dashed var(--gold);padding:16px 22px;display:inline-block;margin-bottom:22px;
  -webkit-user-select:all;user-select:all}

/* balk boven ontgrendelde inhoud */
.lockbar{background:var(--ivory);border-bottom:1px solid var(--line);padding:16px 0}
.jsec.no-gate .lockbar{padding-top:112px}
@media(max-width:900px){.jsec.no-gate .lockbar{padding-top:96px}}
.lockbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.lockbar span{font-size:.8rem;color:var(--grey);font-weight:300}
.lockbar b{color:var(--navy);font-weight:400}
.lockbar button{background:none;border:none;font-family:inherit;color:var(--gold);cursor:pointer;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;padding:0}
.lockbar button:hover{text-decoration:underline}

.locked{display:none}
.locked.on{display:block}

/* simulatie-mail */
.simsend{margin-top:28px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.simsend .ok{display:none;color:#2e7d5b;font-size:.85rem}
.simsend .ok.on{display:inline}

@media(max-width:900px){
  .gate{padding:104px 0 80px}
  .signin-row{grid-template-columns:1fr}
  .signin-row button{width:100%}
  .code{font-size:1.6rem;padding:13px 18px}
  .codebox{padding:26px 22px}
}
.revoked{display:none;border-left:2px solid #b04a3a;background:rgba(176,74,58,.06);
  padding:16px 20px;margin-bottom:28px;max-width:600px;font-size:.9rem;color:#8e3b2d;font-weight:300}
.revoked.on{display:block}
.revoked a{color:#8e3b2d;text-decoration:underline}

/* ---------- Insights ---------- */
.papers{display:grid;gap:2px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.paper{display:grid;grid-template-columns:340px 1fr;gap:0;background:#fff;align-items:stretch}
.paper-img{overflow:hidden}
.paper-img img{width:100%;height:100%;min-height:250px;object-fit:cover;display:block;
  transition:transform 1.3s cubic-bezier(.22,.61,.36,1)}
.paper:hover .paper-img img{transform:scale(1.05)}
.paper-txt{padding:38px 40px}
.paper-meta{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.paper-txt h3{font-size:1.85rem;line-height:1.12;margin-bottom:8px}
.paper-sub{font-size:1rem;color:var(--navy);font-weight:300;margin-bottom:16px}
.paper-teaser{font-size:.92rem;color:var(--grey);font-weight:300;margin-bottom:22px;max-width:62ch}
.paper-link{display:inline-flex;align-items:center;gap:12px;font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);cursor:pointer}
.paper-link:after{content:'';width:26px;height:1px;background:var(--gold);transition:width .35s}
.paper-link:hover:after{width:42px}
.paper-link .l-open{display:none}
body.papers-open .paper-link .l-locked{display:none}
body.papers-open .paper-link .l-open{display:inline}
.unlocked-note{display:none}
.unlocked-note.on{display:block;margin-top:10px}
.unlocked-note .lockbar{background:transparent;border-bottom:none;padding:18px 0 0}
@media(max-width:900px){
  .paper{grid-template-columns:1fr}
  .paper-img img{min-height:190px;height:190px}
  .paper-txt{padding:26px 22px}
  .paper-txt h3{font-size:1.5rem}
}

/* ======================= Owner platform ======================= */
.op-bar{background:var(--navy-deep);padding:96px 0 0}
.op-bar .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding-bottom:0}
.op-who .k{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-light);margin-bottom:8px}
.op-who h1{color:#fff;font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.1}
.op-who p{color:rgba(255,255,255,.6);font-size:.86rem;font-weight:300;margin-top:6px}
.op-out{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;font-family:inherit;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;padding:12px 22px;cursor:pointer;
  transition:all .3s;margin-bottom:6px}
.op-out:hover{background:#fff;color:var(--navy)}
.op-tabs{display:flex;gap:2px;margin-top:30px;overflow-x:auto;scrollbar-width:none}
.op-tabs::-webkit-scrollbar{display:none}
.op-tab{background:none;border:none;border-bottom:2px solid transparent;color:rgba(255,255,255,.55);
  font-family:inherit;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;padding:16px 22px;
  cursor:pointer;white-space:nowrap;transition:color .3s,border-color .3s}
.op-tab:hover{color:#fff}
.op-tab.on{color:#fff;border-bottom-color:var(--gold)}

.demo-note{background:rgba(179,145,95,.12);border-bottom:1px solid var(--line);padding:12px 0;
  font-size:.78rem;color:var(--navy);font-weight:300}
.demo-note b{font-weight:400}

.op-panel{display:none;padding:64px 0 100px}
.op-panel.on{display:block}

.op-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:52px}
.op-cards > div{background:#fff;padding:24px 22px}
.op-cards .k{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.op-cards .v{font-family:'Cormorant Garamond',serif;font-size:1.85rem;color:var(--navy);line-height:1}
.op-cards .s{font-size:.75rem;color:var(--grey);font-weight:300;margin-top:6px}

.op-split{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
.op-box{border:1px solid var(--line);padding:28px 26px}
.op-box h3{font-size:1.3rem;margin-bottom:16px}
.op-yacht img{width:100%;height:220px;object-fit:cover;display:block;margin-bottom:20px}

/* seizoenskalender */
.season{margin-bottom:34px}
.season h4{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--navy);margin-bottom:4px}
.season .sub{font-size:.76rem;color:var(--grey);font-weight:300;margin-bottom:16px}
.weeks{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.wk{display:block;width:100%;border:1px solid var(--line);padding:11px 12px;text-align:left;font-family:inherit;background:#fff;
  cursor:default;transition:all .25s}
.wk .n{display:block;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.wk .d{display:block;font-size:.82rem;color:var(--navy);margin-top:4px}
.wk .st{display:block;font-size:.62rem;margin-top:7px;letter-spacing:.06em}
.wk.free{cursor:pointer}
.wk.free:hover{border-color:var(--gold);background:rgba(179,145,95,.06)}
.wk.free .st{color:var(--gold)}
.wk.mine{background:var(--navy);border-color:var(--navy)}
.wk.mine .n{color:rgba(255,255,255,.55)}
.wk.mine .d{color:#fff}
.wk.mine .st{color:var(--gold-light)}
.wk.other{background:var(--ivory);opacity:.72}
.wk.other .st{color:var(--grey)}
.wk.charter{background:repeating-linear-gradient(135deg,#fff,#fff 6px,var(--ivory) 6px,var(--ivory) 12px)}
.wk.charter .st{color:var(--grey)}
.wk.req{border-color:var(--gold);background:rgba(179,145,95,.1)}
.wk.req .st{color:var(--gold)}
.legend{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:22px;font-size:.75rem;color:var(--grey);font-weight:300}
.legend i{display:inline-block;width:13px;height:13px;margin-right:7px;vertical-align:-2px;border:1px solid var(--line)}
.legend i.mine{background:var(--navy);border-color:var(--navy)}
.legend i.other{background:var(--ivory)}
.legend i.charter{background:repeating-linear-gradient(135deg,#fff,#fff 4px,var(--ivory) 4px,var(--ivory) 8px)}

/* credits */
.ledger{width:100%;border-collapse:collapse}
.ledger th{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  text-align:left;padding:0 14px 12px 0;border-bottom:1px solid var(--gold)}
.ledger td{padding:15px 14px 15px 0;border-bottom:1px solid var(--line);font-size:.9rem;font-weight:300;color:var(--navy)}
.ledger td.num{text-align:right;font-variant-numeric:tabular-nums}
.ledger td.pos{color:#2e7d5b}
.balance{font-family:'Cormorant Garamond',serif;font-size:2.6rem;color:var(--navy);line-height:1}

/* reporting */
.rep-bar{margin-bottom:16px}
.rep-bar .cap{display:flex;justify-content:space-between;font-size:.8rem;color:var(--grey);margin-bottom:6px}
.rep-bar .cap b{color:var(--navy);font-weight:400}
.rep-bar .track{height:10px;background:rgba(35,61,77,.08)}
.rep-bar .fill{height:100%;background:var(--navy)}
.rep-bar .fill.gold{background:var(--gold)}
.rep-bar .fill.grey{background:#b9c3c9}

@media(max-width:1000px){
  .op-cards{grid-template-columns:1fr 1fr}
  .op-split{grid-template-columns:1fr;gap:28px}
}
@media(max-width:560px){
  .op-bar{padding-top:86px}
  .op-tab{padding:14px 15px;font-size:.6rem}
  .weeks{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .op-panel{padding:40px 0 70px}
  .balance{font-size:2.1rem}
}

/* ===================== Shared Ownership Programme (app) ===================== */
body.bridge{background:#0b141b;color:#e9eef1}
body.bridge nav#nav,body.bridge footer,body.bridge .intro,body.bridge .evpop,
body.tools nav#nav,body.tools footer,body.tools .intro,body.tools .evpop{display:none !important}
body.tools{background:#fff}
body.tools .section{padding-top:70px}

:root{
  --app-bg:#0b141b; --app-2:#101c25; --app-3:#16242f;
  --hair:rgba(255,255,255,.09); --hair2:rgba(255,255,255,.15);
  --txt:#e9eef1; --dim:#8fa2ae;
}

/* ---------- sign in ---------- */
.br-auth{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:40px 22px;
  position:relative;overflow:hidden;background:var(--app-bg)}
.br-auth:before{content:'';position:absolute;inset:0;background:url('deck.jpg') center/cover no-repeat;
  opacity:.28;animation:kbSlow 34s ease-in-out infinite alternate}
.br-auth:after{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 0%,rgba(11,20,27,.35),rgba(11,20,27,.94) 62%,#0b141b 100%)}
.br-card{position:relative;z-index:2;width:100%;max-width:470px;
  background:rgba(18,30,39,.72);backdrop-filter:blur(26px) saturate(140%);
  -webkit-backdrop-filter:blur(26px) saturate(140%);
  border:1px solid var(--hair2);border-radius:3px;padding:46px 42px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75)}
.br-card .logo{width:124px;margin-bottom:32px;opacity:.95}
.br-card h1{color:#fff;font-size:2rem;line-height:1.1;margin-bottom:10px;letter-spacing:-.01em}
.br-card p.sub{color:var(--dim);font-size:.92rem;font-weight:300;line-height:1.6;margin-bottom:30px}
.br-card label{display:block;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:8px;margin-top:2px}
.br-card input,.br-card select{width:100%;background:rgba(255,255,255,.045);border:1px solid var(--hair);
  color:#fff;padding:15px 16px;font-family:inherit;font-size:.96rem;font-weight:300;outline:none;
  border-radius:2px;-webkit-appearance:none;appearance:none;margin-bottom:18px;
  transition:border-color .3s,background .3s}
.br-card input:focus{border-color:var(--gold);background:rgba(255,255,255,.07)}
.br-card input::placeholder{color:rgba(255,255,255,.3)}
.br-btn{width:100%;background:var(--gold);border:none;color:#0b141b;font-family:inherit;font-size:.68rem;
  letter-spacing:.26em;text-transform:uppercase;font-weight:500;padding:18px;cursor:pointer;border-radius:2px;
  transition:transform .25s,box-shadow .25s,background .25s}
.br-btn:hover{background:var(--gold-light);transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(179,145,95,.9)}
.br-msg{margin-top:16px;font-size:.86rem;font-weight:300;line-height:1.6}
.br-msg.err{color:#f0a08e}
.br-roles{display:grid;gap:9px;margin-bottom:26px}
.br-role{position:relative;text-align:left;background:rgba(255,255,255,.035);border:1px solid var(--hair);
  padding:15px 17px;cursor:pointer;font-family:inherit;border-radius:2px;
  transition:border-color .3s,background .3s,transform .3s}
.br-role:hover{border-color:var(--hair2);transform:translateX(3px)}
.br-role.on{border-color:var(--gold);background:rgba(179,145,95,.13)}
.br-role.on:after{content:'';position:absolute;right:16px;top:50%;width:7px;height:7px;
  margin-top:-3px;background:var(--gold);transform:rotate(45deg)}
.br-role b{display:block;color:#fff;font-family:'Cormorant Garamond',serif;font-size:1.24rem;font-weight:500}
.br-role span{display:block;color:var(--dim);font-size:.79rem;font-weight:300;margin-top:2px}
.br-foot{position:relative;z-index:2;color:rgba(255,255,255,.3);font-size:.74rem;text-align:center;margin-top:24px}
.br-foot a{color:rgba(255,255,255,.5);text-decoration:underline}

/* ---------- app frame ---------- */
.br-shell{min-height:100svh;display:grid;grid-template-columns:252px minmax(0,1fr);
  grid-template-rows:auto auto 1fr;background:var(--app-bg)}
.br-nav{grid-column:1;grid-row:1/4;background:var(--app-2);border-right:1px solid var(--hair);
  position:sticky;top:0;height:100svh}
.br-nav .in{display:flex;flex-direction:column;gap:2px;padding:26px 16px;min-width:0}
.br-nav button{position:relative;background:none;border:none;color:var(--dim);font-family:inherit;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;text-align:left;
  padding:15px 16px;cursor:pointer;border-radius:2px;transition:color .3s,background .3s}
.br-nav button:hover{color:#fff;background:rgba(255,255,255,.04)}
.br-nav button.on{color:#fff;background:rgba(179,145,95,.14)}
.br-nav button.on:before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:2px;background:var(--gold)}

.br-top{grid-column:2;grid-row:1;background:var(--app-bg);border-bottom:1px solid var(--hair);
  position:sticky;top:0;z-index:60}
.br-top .in{max-width:1180px;margin:0 auto;padding:0 34px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;height:78px}
.br-top .brand{display:flex;align-items:center;gap:15px}
.br-top .brand img{width:112px}
.br-top .brand span{color:var(--dim);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  border-left:1px solid var(--hair2);padding-left:15px}
.br-user{display:flex;align-items:center;gap:16px}
.br-user .who{color:var(--dim);font-size:.8rem;font-weight:300}
.br-user button{background:none;border:1px solid var(--hair2);color:var(--txt);font-family:inherit;
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:10px 18px;
  border-radius:2px;transition:all .3s}
.br-user button:hover{border-color:var(--gold);color:var(--gold)}

.br-demo{grid-column:2;grid-row:2;background:rgba(179,145,95,.1);border-bottom:1px solid var(--hair);
  padding:13px 0;font-size:.76rem;color:var(--gold-light);font-weight:300}
.br-demo b{color:#fff;font-weight:400}
.br-body{grid-column:2;grid-row:3;background:var(--app-bg)}
.br-wrap{max-width:1180px;margin:0 auto;padding:0 34px}
.br-view{display:none;padding:58px 0 100px;animation:brIn .5s cubic-bezier(.22,.61,.36,1)}
.br-view.on{display:block}
@keyframes brIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

body.bridge h1,body.bridge h2,body.bridge h3{color:#fff}
body.bridge .eyebrow{color:var(--gold-light)}
body.bridge .eyebrow::before{background:var(--gold)}
body.bridge .section-head p.lead,body.bridge p{color:var(--dim)}

/* ---------- home ---------- */
.br-hello{display:grid;grid-template-columns:1.45fr 1fr;gap:44px;align-items:start;margin-bottom:56px}
.br-hello h1{font-size:clamp(2.1rem,4.4vw,3.2rem);margin-bottom:14px;letter-spacing:-.015em}
.br-hello p.l{font-size:1.04rem;color:var(--dim);font-weight:300;max-width:56ch;line-height:1.75}
.br-next{background:var(--app-2);border:1px solid var(--hair);border-radius:3px;padding:28px 26px}
.br-next .k{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.br-step{display:flex;gap:15px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--hair)}
.br-step:last-child{border-bottom:none}
.br-step .num{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:1.05rem;line-height:1.3;flex:0 0 auto}
.br-step .txt{font-size:.9rem;color:var(--txt);font-weight:300}
.br-step.done .num{color:var(--dim)}
.br-step.done .txt{color:var(--dim);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)}

.br-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.br-tile{position:relative;overflow:hidden;background:var(--app-2);border:1px solid var(--hair);
  border-radius:3px;padding:30px 28px;cursor:pointer;text-align:left;font-family:inherit;
  transition:border-color .4s,transform .4s,background .4s}
.br-tile:before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .45s;
  background:radial-gradient(90% 120% at 0% 0%,rgba(179,145,95,.18),transparent 60%)}
.br-tile:hover{border-color:var(--gold);transform:translateY(-4px)}
.br-tile:hover:before{opacity:1}
.br-tile > *{position:relative}
.br-tile .k{display:block;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.br-tile h3{font-size:1.4rem;margin-bottom:9px}
.br-tile p{font-size:.87rem;color:var(--dim);font-weight:300;line-height:1.65}

/* programme cards on dark */
body.bridge .jcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
body.bridge .jcards article{background:var(--app-2);border:1px solid var(--hair);border-top:2px solid var(--gold);
  border-radius:3px;padding:28px 26px}
body.bridge .jcards h3{font-size:1.28rem;margin-bottom:10px}
body.bridge .jcards p{font-size:.89rem;color:var(--dim);font-weight:300;line-height:1.7}

/* simulator on dark */
body.bridge .simopt{background:rgba(255,255,255,.035);border:1px solid var(--hair);color:var(--txt);border-radius:2px}
body.bridge .simopt:hover{border-color:var(--hair2)}
body.bridge .simopt.on{background:var(--gold);border-color:var(--gold);color:#0b141b}
body.bridge .simopt small{opacity:.7}
body.bridge .simfield > label{color:var(--gold-light)}
body.bridge .simres{background:var(--app-2);border:1px solid var(--hair);border-radius:3px}
body.bridge .simres:before{background:var(--gold)}
body.bridge .simres .rname{color:#fff}
body.bridge .simres .rbase{color:var(--dim)}
body.bridge .simgrid{background:var(--hair);border-color:var(--hair)}
body.bridge .simgrid > div{background:var(--app-3)}
body.bridge .simgrid .v{color:#fff}
body.bridge .simgrid .s{color:var(--dim)}
body.bridge .bars .cap{color:var(--dim)}
body.bridge .bars .cap b{color:#fff}
body.bridge .bars .track{background:rgba(255,255,255,.08)}
body.bridge .bars .fill{background:rgba(255,255,255,.34)}
body.bridge .bars .fill.gold{background:var(--gold)}
body.bridge .adv{color:var(--gold)}
body.bridge .adv span{color:var(--dim)}
body.bridge .disclaimer{color:var(--dim);border-left-color:var(--gold)}
body.bridge .btn{border-color:var(--gold);color:var(--gold);border-radius:2px}
body.bridge .btn:hover{background:var(--gold);color:#0b141b}
body.bridge .btn.solid{background:var(--gold);color:#0b141b}
body.bridge .btn.solid:hover{background:var(--gold-light)}
body.bridge .form-card{background:var(--app-2);border:1px solid var(--hair);border-radius:3px;
  box-shadow:none}
body.bridge .form-grid label{color:var(--gold-light)}
body.bridge .form-grid input,body.bridge .form-grid select,body.bridge .form-grid textarea{
  background-color:rgba(255,255,255,.045);border-color:var(--hair);color:#fff;border-radius:2px}
body.bridge .form-grid input:focus,body.bridge .form-grid textarea:focus,
body.bridge .form-grid select:focus{border-color:var(--gold)}
body.bridge .form-grid input::placeholder,body.bridge .form-grid textarea::placeholder{color:rgba(255,255,255,.28)}
body.bridge .form-grid select option{background:#16242f;color:#fff}
body.bridge .form-grid label.consent span{color:var(--dim)}
body.bridge .form-grid label.consent{border-top-color:var(--hair)}
body.bridge .price-table th{color:var(--gold);border-bottom-color:var(--gold)}
body.bridge .price-table td{color:var(--txt);border-bottom-color:var(--hair)}
body.bridge .jlist li{color:var(--dim)}
body.bridge .jlist li strong{color:#fff}
body.bridge .jnote{color:var(--dim);border-left-color:var(--gold)}

/* ---------- chat ---------- */
.chat{background:var(--app-2);border:1px solid var(--hair);border-radius:4px;
  display:flex;flex-direction:column;height:min(66vh,620px);max-width:860px;overflow:hidden}
.chat-head{display:flex;align-items:center;gap:13px;padding:18px 22px;border-bottom:1px solid var(--hair);
  background:rgba(255,255,255,.02)}
.chat-head .av{width:36px;height:36px;flex:0 0 36px;border:1px solid var(--gold);display:grid;
  place-items:center;color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:1rem;border-radius:50%}
.chat-head .nm{color:#fff;font-size:.95rem}
.chat-head .st{color:var(--dim);font-size:.75rem;font-weight:300;display:flex;align-items:center;gap:7px}
.chat-head .dot{width:6px;height:6px;border-radius:50%;background:#4ec98a;box-shadow:0 0 0 0 rgba(78,201,138,.6);
  animation:pulseDot 2.4s infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(78,201,138,.5)}70%{box-shadow:0 0 0 7px rgba(78,201,138,0)}100%{box-shadow:0 0 0 0 rgba(78,201,138,0)}}
.chat-log{flex:1;overflow-y:auto;padding:26px 22px;display:flex;flex-direction:column;gap:16px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.chat-log::-webkit-scrollbar{width:6px}
.chat-log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.bub{max-width:74%;padding:15px 19px;font-size:.94rem;font-weight:300;line-height:1.65;
  border-radius:14px;animation:bubIn .34s cubic-bezier(.22,.61,.36,1);position:relative}
@keyframes bubIn{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:none}}
.bub.bot{background:var(--app-3);color:var(--txt);align-self:flex-start;border-bottom-left-radius:4px}
.bub.me{background:linear-gradient(135deg,var(--gold),#a07f4f);color:#0b141b;align-self:flex-end;
  border-bottom-right-radius:4px}
.bub .more{display:block;margin-top:11px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);opacity:.9}
.bub.me .more{color:rgba(11,20,27,.7)}
.typing{align-self:flex-start;display:flex;gap:5px;padding:16px 19px;background:var(--app-3);border-radius:14px;
  border-bottom-left-radius:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--dim);animation:tp 1.3s infinite}
.typing i:nth-child(2){animation-delay:.16s}
.typing i:nth-child(3){animation-delay:.32s}
@keyframes tp{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 22px 16px}
.chip{background:rgba(255,255,255,.04);border:1px solid var(--hair);padding:10px 16px;font-family:inherit;
  font-size:.81rem;font-weight:300;color:var(--txt);cursor:pointer;border-radius:20px;
  transition:all .28s;text-align:left}
.chip:hover{border-color:var(--gold);color:var(--gold);background:rgba(179,145,95,.1);transform:translateY(-1px)}
.chat-in{display:flex;gap:10px;border-top:1px solid var(--hair);padding:16px 18px;
  background:rgba(255,255,255,.02);align-items:center}
.chat-in input{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--hair);border-radius:24px;
  padding:14px 20px;font-family:inherit;font-size:.94rem;font-weight:300;color:#fff;outline:none;
  transition:border-color .3s}
.chat-in input:focus{border-color:var(--gold)}
.chat-in input::placeholder{color:rgba(255,255,255,.3)}
.chat-in button{width:46px;height:46px;flex:0 0 46px;border:none;border-radius:50%;background:var(--gold);
  color:#0b141b;cursor:pointer;display:grid;place-items:center;transition:transform .25s,background .25s;
  font-size:1.05rem;line-height:1}
.chat-in button:hover{background:var(--gold-light);transform:scale(1.06)}

/* documents on dark */
body.bridge a.br-tile{display:block;text-decoration:none}

@media(max-width:1000px){
  .br-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 1fr}
  .br-nav{grid-column:1;grid-row:2;position:sticky;top:66px;height:auto;border-right:none;
    border-bottom:1px solid var(--hair)}
  .br-nav .in{flex-direction:row;padding:0 14px;overflow-x:auto;scrollbar-width:none;gap:0}
  .br-nav .in::-webkit-scrollbar{display:none}
  .br-nav button{padding:16px 15px;white-space:nowrap;border-radius:0}
  .br-nav button.on{background:none}
  .br-nav button.on:before{left:12px;right:12px;top:auto;bottom:0;width:auto;height:2px}
  .br-top{grid-column:1;grid-row:1}
  .br-top .in{height:66px;padding:0 20px}
  .br-top .brand span,.br-user .who{display:none}
  .br-demo{grid-column:1;grid-row:3}
  .br-body{grid-column:1;grid-row:4}
  .br-wrap{padding:0 20px}
  .br-hello,.br-tiles,body.bridge .jcards{grid-template-columns:1fr}
  .br-view{padding:40px 0 80px}
  .chat{height:min(72vh,600px)}
  .bub{max-width:86%}
  .br-card{padding:34px 26px}
}

/* ---------- programme view: editorial rows ---------- */
.pr-hero{position:relative;overflow:hidden;border:1px solid var(--hair);border-radius:3px;
  margin-bottom:60px;min-height:300px;display:flex;align-items:flex-end}
.pr-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:kbSlow 30s ease-in-out infinite alternate}
.pr-hero:after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,20,27,.25) 0%,rgba(11,20,27,.82) 62%,rgba(11,20,27,.97) 100%)}
.pr-hero .in{position:relative;z-index:2;padding:44px 42px}
.pr-hero h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:12px;letter-spacing:-.015em}
.pr-hero p{font-size:1.02rem;color:var(--dim);font-weight:300;max-width:60ch;line-height:1.75}

.pr-rows{border-top:1px solid var(--hair)}
.pr-row{display:grid;grid-template-columns:92px 1fr;gap:32px;align-items:baseline;
  padding:34px 6px;border-bottom:1px solid var(--hair);
  transition:padding-left .45s cubic-bezier(.22,.61,.36,1),background .45s}
.pr-row:hover{padding-left:20px;background:rgba(179,145,95,.05)}
.pr-row .n{font-family:'Cormorant Garamond',serif;font-size:2.5rem;line-height:1;color:var(--gold);
  opacity:.55;transition:opacity .4s}
.pr-row:hover .n{opacity:1}
.pr-row h3{font-size:1.6rem;margin-bottom:10px;transition:color .35s}
.pr-row:hover h3{color:var(--gold-light)}
.pr-row p{font-size:.96rem;color:var(--dim);font-weight:300;line-height:1.8;max-width:74ch}

.pr-split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;margin-top:72px}
.pr-split .img{overflow:hidden;border:1px solid var(--hair);border-radius:3px;position:relative}
.pr-split .img img{width:100%;height:340px;object-fit:cover;display:block;
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
.pr-split .img:hover img{transform:scale(1.05)}
.pr-split .k{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.pr-split h3{font-size:1.9rem;margin-bottom:22px}
.pr-list{list-style:none}
.pr-list li{position:relative;padding:0 0 15px 28px;font-size:.95rem;color:var(--dim);font-weight:300;line-height:1.7}
.pr-list li:before{content:'';position:absolute;left:0;top:10px;width:7px;height:7px;
  border:1px solid var(--gold);transform:rotate(45deg)}
.pr-list li strong{color:#fff;font-weight:400}

@media(max-width:900px){
  .pr-hero{min-height:230px}
  .pr-hero .in{padding:28px 22px}
  .pr-row{grid-template-columns:1fr;gap:8px;padding:26px 4px}
  .pr-row .n{font-size:1.9rem}
  .pr-row h3{font-size:1.35rem}
  .pr-split{grid-template-columns:1fr;gap:28px;margin-top:48px}
  .pr-split .img img{height:220px}
}

/* ---------- light panes inside the dark app ---------- */
/* lichte panelen zijn er bewust uit: het programma blijft donker */

/* ---------- document library ---------- */
.dl-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:34px}
.dl-tab{background:rgba(255,255,255,.04);border:1px solid var(--hair);color:var(--txt);font-family:inherit;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;padding:11px 20px;cursor:pointer;
  border-radius:20px;transition:all .28s}
.dl-tab:hover{border-color:var(--gold);color:var(--gold)}
.dl-tab.on{background:var(--gold);border-color:var(--gold);color:#0b141b}
.dl-search{flex:1;min-width:200px;max-width:320px;border:1px solid var(--hair);background:rgba(255,255,255,.05);
  padding:12px 18px;font-family:inherit;font-size:.9rem;font-weight:300;color:#fff;
  outline:none;border-radius:20px;-webkit-appearance:none}
.dl-search:focus{border-color:var(--gold)}

.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.dl-list{border-top:1px solid var(--hair)}
.dl-item{display:grid;grid-template-columns:44px 1fr auto;gap:18px;align-items:center;width:100%;
  background:none;border:none;border-bottom:1px solid var(--hair);text-align:left;font-family:inherit;
  padding:20px 8px;cursor:pointer;transition:background .3s,padding-left .35s}
.dl-item:hover{background:rgba(179,145,95,.09);padding-left:16px}
.dl-item.on{background:rgba(179,145,95,.16);box-shadow:inset 3px 0 0 var(--gold)}
.dl-ico{width:32px;height:40px;border:1px solid var(--gold);position:relative;justify-self:center}
.dl-ico:after{content:attr(data-ext);position:absolute;left:0;right:0;bottom:5px;text-align:center;
  font-size:.46rem;letter-spacing:.12em;color:var(--gold)}
.dl-item .t{display:block;font-family:'Cormorant Garamond',serif;font-size:1.28rem;color:#fff;line-height:1.25}
.dl-item .d{display:block;font-size:.82rem;color:var(--dim);font-weight:300;margin-top:5px;line-height:1.6}
.dl-item .m{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.dl-empty{padding:40px 8px;color:var(--dim);font-weight:300}

.dl-view{position:sticky;top:100px;border:1px solid var(--line);background:#fff;border-radius:3px;overflow:hidden}
.dl-view .hd{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dl-view .hd .t{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--navy)}
.dl-view .hd a{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.dl-view .hd a:hover{text-decoration:underline}
.dl-view iframe{width:100%;height:560px;border:none;display:block;background:var(--ivory)}
.dl-view .ph{height:560px;display:grid;place-items:center;color:var(--grey);font-weight:300;
  text-align:center;padding:30px;background:var(--ivory)}

@media(max-width:1000px){
  .dl-grid{grid-template-columns:1fr}
  .dl-view{position:static}
  .dl-view iframe,.dl-view .ph{height:420px}
  .dl-item{grid-template-columns:36px 1fr;gap:14px}
  .dl-item .m{grid-column:2;margin-top:6px}
}

/* ---------- reader: documents inside the portal ---------- */
.dl-read{border:1px solid var(--hair);background:var(--app-2);border-radius:3px;overflow:hidden;
  position:sticky;top:100px;max-height:calc(100svh - 140px);display:flex;flex-direction:column}
.dl-read .hd{padding:20px 26px;border-bottom:1px solid var(--hair);background:rgba(255,255,255,.03)}
.dl-read .hd .k{font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.dl-read .hd .t{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:#fff;line-height:1.2}
.dl-read .bd{overflow-y:auto;padding:30px 30px 40px;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent}
.dl-read .bd::-webkit-scrollbar{width:6px}
.dl-read .bd::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.dl-read .ph{padding:70px 30px;text-align:center;color:var(--dim);font-weight:300}

.rd-lead{font-size:1.02rem;color:#fff;font-weight:300;line-height:1.75;margin-bottom:26px;
  padding-bottom:22px;border-bottom:1px solid var(--hair)}
.dl-read .bd h3{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:#fff;
  margin:30px 0 12px;display:flex;align-items:baseline;gap:12px}
.dl-read .bd h3:first-child{margin-top:0}
.rd-num{font-size:.9rem;color:var(--gold);flex:0 0 auto}
.dl-read .bd p{font-size:.93rem;color:var(--dim);font-weight:300;line-height:1.85;margin-bottom:13px}
.rd-list{list-style:none;margin:6px 0 18px}
.rd-list li{position:relative;padding:0 0 11px 24px;font-size:.92rem;color:var(--dim);font-weight:300;line-height:1.7}
.rd-list li:before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;
  border:1px solid var(--gold);transform:rotate(45deg)}
.rd-abc{list-style:none;margin:6px 0 16px}
.rd-abc li{position:relative;padding:0 0 11px 34px;font-size:.92rem;color:var(--dim);font-weight:300;line-height:1.7}
.rd-abc li span{position:absolute;left:0;color:var(--gold);font-weight:400}
.rd-note{font-size:.8rem !important;color:var(--dim) !important;font-style:italic;
  border-left:1px solid var(--gold);padding-left:16px;margin-top:26px !important}
.rd-tablewrap{overflow-x:auto;margin:6px 0 20px}
.rd-table{width:100%;border-collapse:collapse;min-width:520px}
.rd-table th{font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  text-align:left;padding:0 12px 10px 0;border-bottom:1px solid var(--gold);white-space:nowrap}
.rd-table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--hair);font-size:.88rem;
  color:var(--txt);font-weight:300}
.rd-table .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

@media(max-width:1000px){
  .dl-read{position:static;max-height:none}
  .dl-read .bd{max-height:520px;padding:22px 20px 30px}
}

/* ---------- modern forms inside the app ---------- */
body.bridge .form-card{padding:38px 36px;border-radius:4px}
body.bridge .form-grid{gap:26px}
body.bridge .form-grid label{font-size:.58rem;letter-spacing:.2em;margin-bottom:10px;display:block}
body.bridge .form-grid input,body.bridge .form-grid select,body.bridge .form-grid textarea{
  border-radius:10px;padding:15px 18px;background-color:rgba(255,255,255,.055);
  border:1px solid var(--hair);transition:border-color .3s,background-color .3s,box-shadow .3s}
body.bridge .form-grid input:focus,body.bridge .form-grid textarea:focus,
body.bridge .form-grid select:focus{border-color:var(--gold);background-color:rgba(255,255,255,.085);
  box-shadow:0 0 0 3px rgba(179,145,95,.14)}
body.bridge .form-grid select{padding-right:48px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23cfb388'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 20px center}
body.bridge .form-grid label.consent input[type=checkbox]{border-radius:4px;border-color:var(--hair2);
  background:rgba(255,255,255,.06)}
body.bridge .form-grid label.consent input[type=checkbox]:checked{background:var(--gold);border-color:var(--gold)}
body.bridge .form-grid button[type=submit],body.bridge .btn.solid{border-radius:24px;padding:16px 34px}
body.bridge .btn{border-radius:24px}

/* ---------- FAQ: browse + chat ---------- */
.faq-split{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start}
.faq-browse{border:1px solid var(--hair);background:var(--app-2);border-radius:4px;overflow:hidden;
  position:sticky;top:100px;max-height:calc(100svh - 140px);display:flex;flex-direction:column}
.faq-browse .hd{padding:18px 22px;border-bottom:1px solid var(--hair);background:rgba(255,255,255,.03)}
.faq-browse .hd .t{font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:#fff}
.faq-browse .hd .s{font-size:.76rem;color:var(--dim);font-weight:300;margin-top:3px}
.faq-browse .bd{overflow-y:auto;padding:8px 0 14px;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent}
.faq-browse .bd::-webkit-scrollbar{width:6px}
.faq-browse .bd::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.fq-sec{padding:16px 22px 4px;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.fq-q{width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--hair);
  color:var(--txt);font-family:inherit;font-size:.9rem;font-weight:300;line-height:1.5;
  padding:13px 22px;cursor:pointer;transition:background .25s,padding-left .3s}
.fq-q:hover{background:rgba(179,145,95,.08);padding-left:28px;color:#fff}
.faq-search{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--hair);border-radius:20px;
  padding:12px 18px;font-family:inherit;font-size:.9rem;font-weight:300;color:#fff;outline:none;
  -webkit-appearance:none;margin-top:12px}
.faq-search:focus{border-color:var(--gold)}
@media(max-width:1000px){
  .faq-split{grid-template-columns:1fr;gap:26px}
  .faq-browse{position:static;max-height:none}
  .faq-browse .bd{max-height:360px}
}

/* ---------- commission block ---------- */
.cm{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:3px;margin-bottom:34px}
.cm > div{background:var(--app-2);padding:24px 24px}
.cm .k{font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.cm .v{font-family:'Cormorant Garamond',serif;font-size:2.1rem;color:var(--gold);line-height:1;margin-bottom:8px}
.cm p{font-size:.86rem;color:var(--dim);font-weight:300;line-height:1.65;margin:0}
.cm-note{font-size:.82rem;color:var(--dim);font-weight:300;border-left:1px solid var(--gold);
  padding-left:16px;margin-bottom:34px;max-width:70ch}
@media(max-width:700px){.cm{grid-template-columns:1fr}}

/* ---------- digital signing ---------- */
.sign{border:1px solid var(--gold);background:rgba(179,145,95,.08);border-radius:4px;
  padding:26px 26px;margin-top:30px}
.sign h4{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:#fff;margin-bottom:8px}
.sign p{font-size:.88rem;color:var(--dim);font-weight:300;margin-bottom:18px}
.sign label{display:block;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px}
.sign input[type=text]{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--hair);
  border-radius:10px;padding:15px 18px;font-family:'Cormorant Garamond',serif;font-size:1.4rem;
  color:#fff;outline:none;margin-bottom:16px;-webkit-appearance:none}
.sign input[type=text]:focus{border-color:var(--gold)}
.sign .agree{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px}
.sign .agree input{width:17px;height:17px;flex:0 0 17px;margin-top:3px;accent-color:#b3915f}
.sign .agree span{font-size:.86rem;color:var(--dim);font-weight:300;line-height:1.6}
.signed{display:none;border:1px solid #4ec98a;background:rgba(78,201,138,.08);border-radius:4px;
  padding:24px 26px;margin-top:30px}
.signed.on{display:block}
.signed h4{font-family:'Cormorant Garamond',serif;font-size:1.25rem;color:#fff;margin-bottom:8px}
.signed p{font-size:.87rem;color:var(--dim);font-weight:300;margin:0}
.signed .nm{font-family:'Cormorant Garamond',serif;font-size:1.8rem;color:#8fd0ae;margin:12px 0 6px}

/* nieuw-bericht stip in de navigatie */
.br-nav button.has-new:after{content:'';position:absolute;right:14px;top:50%;margin-top:-3px;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(179,145,95,.6);animation:pulseDot 2.2s infinite}
@media(max-width:1000px){.br-nav button.has-new:after{right:6px;top:12px;margin-top:0}}

/* ======================= Admin workspace ======================= */
body.admin{background:var(--app-bg);color:var(--txt)}
body.admin nav#nav,body.admin footer,body.admin .intro,body.admin .evpop{display:none !important}

.ad-auth{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:40px 22px;
  background:var(--app-bg);position:relative;overflow:hidden}
.ad-auth:before{content:'';position:absolute;inset:0;background:url('aerial.jpg') center/cover no-repeat;opacity:.2}
.ad-auth:after{content:'';position:absolute;inset:0;
  background:radial-gradient(110% 90% at 50% 0%,rgba(11,20,27,.4),rgba(11,20,27,.96) 65%)}

/* stat cards */
.ad-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:44px}
.ad-stat{background:var(--app-2);border:1px solid var(--hair);border-radius:4px;padding:24px 24px;
  position:relative;overflow:hidden;transition:border-color .35s,transform .35s;cursor:pointer}
.ad-stat:hover{border-color:var(--gold);transform:translateY(-3px)}
.ad-stat .k{font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.ad-stat .v{font-family:'Cormorant Garamond',serif;font-size:2.6rem;color:#fff;line-height:1}
.ad-stat .s{font-size:.78rem;color:var(--dim);font-weight:300;margin-top:7px}

/* suggestions */
.ad-sug{border:1px solid var(--gold);background:rgba(179,145,95,.07);border-radius:4px;
  padding:28px 30px;margin-bottom:44px}
.ad-sug h3{font-size:1.5rem;margin-bottom:6px;color:#fff}
.ad-sug > p{font-size:.88rem;color:var(--dim);font-weight:300;margin-bottom:20px}
.sug{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
  border-top:1px solid var(--hair);padding:18px 0}
.sug:first-of-type{border-top:none;padding-top:0}
.sug .who{font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:#fff;line-height:1.2}
.sug .why{font-size:.87rem;color:var(--dim);font-weight:300;margin-top:6px;max-width:64ch;line-height:1.65}
.sug .act{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}
.score{display:inline-block;font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:var(--gold);
  border:1px solid var(--gold);border-radius:20px;padding:1px 14px;margin-left:12px;vertical-align:middle}

/* activity feed */
.ad-feed{border-top:1px solid var(--hair)}
.ad-ev{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:16px 4px;
  border-bottom:1px solid var(--hair);font-size:.9rem;color:var(--dim);font-weight:300}
.ad-ev time{font-size:.76rem;color:var(--gold);white-space:nowrap}
.ad-ev b{color:#fff;font-weight:400}

/* people */
.ad-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.ad-bar select,.ad-bar input{background:rgba(255,255,255,.05);border:1px solid var(--hair);color:#fff;
  padding:12px 18px;font-family:inherit;font-size:.9rem;font-weight:300;outline:none;border-radius:20px;
  -webkit-appearance:none;appearance:none}
.ad-bar select{padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23cfb388'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center}
.ad-bar select option{background:#16242f}
.ad-bar input{flex:1;min-width:200px;max-width:300px}
.ad-bar button{background:none;border:1px solid var(--hair);color:var(--txt);font-family:inherit;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;padding:12px 22px;cursor:pointer;
  border-radius:20px;transition:all .3s}
.ad-bar button:hover{border-color:var(--gold);color:var(--gold)}

.ad-grid{display:grid;grid-template-columns:350px 1fr;gap:2px;background:var(--hair);
  border:1px solid var(--hair);border-radius:4px;overflow:hidden;min-height:520px}
.ad-list{background:var(--app-2);max-height:74vh;overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent}
.ad-list::-webkit-scrollbar{width:6px}
.ad-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.ad-item{width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--hair);
  padding:18px 22px;cursor:pointer;font-family:inherit;transition:background .25s,padding-left .3s}
.ad-item:hover{background:rgba(179,145,95,.08);padding-left:28px}
.ad-item.on{background:rgba(179,145,95,.14);box-shadow:inset 3px 0 0 var(--gold)}
.ad-item .nm{display:block;font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:#fff}
.ad-item .mt{display:block;font-size:.74rem;color:var(--dim);font-weight:300;margin-top:3px}
.ad-item .tag{display:inline-block;font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold);border-radius:12px;padding:2px 10px;margin-top:9px}
.ad-item .tag.ok{color:#8fd0ae;border-color:#8fd0ae}
.ad-detail{background:var(--app-2);padding:30px 32px;max-height:74vh;overflow-y:auto}
.ad-empty{padding:70px 32px;color:var(--dim);font-weight:300;text-align:center}
.ad-detail h3{font-size:1.7rem;color:#fff;margin-bottom:4px}
.ad-detail .sub{font-size:.82rem;color:var(--dim);font-weight:300;margin-bottom:22px}
.ad-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:3px;margin-bottom:22px}
.ad-facts > div{background:var(--app-3);padding:14px 17px}
.ad-facts .k{font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.ad-facts .v{font-size:.9rem;color:var(--txt);font-weight:300;word-break:break-word}
.ad-facts input{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--hair);border-radius:8px;
  padding:9px 12px;font-family:inherit;font-size:.88rem;color:#fff;outline:none;-webkit-appearance:none}
.ad-facts input:focus{border-color:var(--gold)}
.ad-thread{border:1px solid var(--hair);border-radius:4px;background:var(--app-bg);max-height:330px;
  overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.ad-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;align-items:center}
.ad-actions select{background:rgba(255,255,255,.05);border:1px solid var(--hair);color:#fff;
  padding:12px 18px;border-radius:20px;font-family:inherit;font-size:.88rem;outline:none;-webkit-appearance:none}
.ad-actions select option{background:#16242f}
.ad-danger{background:none;border:1px solid rgba(224,120,100,.5);color:#e0785f;font-family:inherit;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;padding:12px 22px;cursor:pointer;
  border-radius:20px;transition:all .3s}
.ad-danger:hover{background:rgba(224,120,100,.14);border-color:#e0785f}
.ad-ok{display:none;color:#8fd0ae;font-size:.85rem;margin-top:12px}
.ad-ok.on{display:block}

.ad-table{width:100%;border-collapse:collapse}
.ad-table th{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  text-align:left;padding:0 14px 12px 0;border-bottom:1px solid var(--gold);white-space:nowrap}
.ad-table td{padding:15px 14px 15px 0;border-bottom:1px solid var(--hair);font-size:.9rem;
  color:var(--txt);font-weight:300}
.ad-table a{color:var(--gold)}

@media(max-width:1400px){.ad-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1100px){.ad-stats{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
  .ad-grid{grid-template-columns:1fr}
  .ad-list{max-height:320px}
  .ad-detail{max-height:none;padding:22px 20px}
  .ad-facts{grid-template-columns:1fr}
  .ad-ev{grid-template-columns:1fr;gap:4px}
}

/* ============ collaboration models (dealer) ============ */
.mdl{margin:0 0 60px}
.mdl-head{max-width:760px;margin-bottom:30px}
.mdl-head .k{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.mdl-head h3{font-family:'Cormorant Garamond',serif;font-size:2rem;color:#fff;font-weight:300;margin:0 0 12px}
.mdl-head p{font-size:.92rem;color:var(--dim);font-weight:300;line-height:1.75;margin:0}
.mdl-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mdl-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;
  text-align:left;background:var(--app-2);border:1px solid var(--hair);border-radius:4px;
  padding:26px 24px 22px;font-family:inherit;cursor:pointer;transition:.3s;overflow:hidden}
.mdl-card:before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .35s}
.mdl-card:hover{background:var(--app-3);border-color:rgba(179,145,95,.4);transform:translateY(-2px)}
.mdl-card .n{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.mdl-card .t{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:#fff;line-height:1.15;margin-bottom:8px}
.mdl-card .s{font-size:.84rem;color:var(--dim);font-weight:300;margin-bottom:16px}
.mdl-card .tag{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);
  border:1px solid rgba(179,145,95,.4);border-radius:20px;padding:6px 13px;margin-bottom:18px}
.mdl-card .go{margin-top:auto;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.42);transition:.3s}
.mdl-card .go:after{content:' \2192';transition:.3s;display:inline-block}
.mdl-card:hover .go{color:var(--gold)}
.mdl-card:hover .go:after{transform:translateX(4px)}
.mdl-card.on{background:var(--app-3);border-color:rgba(179,145,95,.55)}
.mdl-card.on:before{transform:scaleY(1)}
.mdl-card.on .go{color:var(--gold)}
.mdl-detail{margin-top:14px}
.mdl-in{border:1px solid rgba(179,145,95,.28);border-radius:4px;background:
  linear-gradient(180deg,rgba(179,145,95,.07),rgba(179,145,95,0) 220px),var(--app-2);
  padding:34px 34px 30px;animation:mdlin .4s ease both}
@keyframes mdlin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mdl-in .hd{display:flex;align-items:flex-start;gap:22px;padding-bottom:26px;border-bottom:1px solid var(--hair)}
.mdl-in .hd .n{font-family:'Cormorant Garamond',serif;font-size:2.6rem;color:rgba(179,145,95,.55);line-height:1}
.mdl-in .hd h3{font-family:'Cormorant Garamond',serif;font-size:1.8rem;color:#fff;font-weight:300;margin:0 0 8px}
.mdl-in .hd p{font-size:.95rem;color:var(--dim);font-weight:300;line-height:1.7;margin:0}
.mdl-in .hd .tag{margin-left:auto;flex:0 0 auto;white-space:nowrap;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-light);border:1px solid rgba(179,145,95,.4);border-radius:20px;padding:8px 15px}
.mdl-in .cols{display:grid;grid-template-columns:1fr 1fr;gap:38px;padding:28px 0}
.mdl-in .k{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.mdl-in ul{list-style:none;margin:0;padding:0}
.mdl-in ul li{position:relative;padding-left:20px;font-size:.9rem;color:rgba(255,255,255,.76);
  font-weight:300;line-height:1.7;margin-bottom:11px}
.mdl-in ul li:before{content:'';position:absolute;left:0;top:11px;width:7px;height:1px;background:var(--gold)}
.mdl-in .foot{display:grid;grid-template-columns:1fr 1fr;gap:38px;padding-top:26px;border-top:1px solid var(--hair)}
.mdl-in .foot p{font-size:.9rem;color:var(--dim);font-weight:300;line-height:1.7;margin:0}
@media(max-width:900px){
  .mdl-pick{grid-template-columns:1fr}
  .mdl-card .go{margin-top:0}
  .mdl-in{padding:24px 20px}
  .mdl-in .hd{flex-wrap:wrap;gap:14px}
  .mdl-in .hd .tag{margin-left:0}
  .mdl-in .cols,.mdl-in .foot{grid-template-columns:1fr;gap:24px}
}

/* three commission cards */
.cm.three{grid-template-columns:repeat(3,1fr)}
.cm.three .v{font-size:1.4rem;line-height:1.2;color:#fff}
@media(max-width:900px){.cm.three{grid-template-columns:1fr}}

/* models block inside a document */
.rd-models{border:1px solid rgba(179,145,95,.3);border-radius:4px;padding:24px 26px;margin:22px 0 30px;
  background:rgba(179,145,95,.05)}
.rd-models .k{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.rd-model{display:flex;gap:18px;padding:14px 0;border-top:1px solid var(--hair)}
.rd-model:first-of-type{border-top:none;padding-top:0}
.rd-model .l{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--gold);line-height:1;flex:0 0 26px}
.rd-model b{display:block;color:#fff;font-weight:400;margin-bottom:5px}
.rd-model p{margin:0}

/* FAQ full width */
.faq-browse.wide{max-height:none;position:static}
.faq-browse.wide .bd{max-height:min(62vh,640px)}
.fq-hint{margin-top:20px;font-size:.82rem;color:var(--dim);font-weight:300;
  border-left:1px solid var(--gold);padding-left:16px}

/* ============ assistant widget ============ */
.wg{position:fixed;right:26px;bottom:26px;z-index:120;display:flex;flex-direction:column;
  align-items:flex-end;gap:14px;pointer-events:none}
.wg-btn,.wg.open .wg-panel{pointer-events:auto}
.wg-btn{position:relative;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(140deg,var(--gold-light),var(--gold));
  box-shadow:0 12px 34px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08) inset;
  display:grid;place-items:center;transition:transform .3s,box-shadow .3s;order:2}
.wg-btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 18px 44px rgba(0,0,0,.55)}
.wg-btn svg{position:absolute;width:25px;height:25px;fill:none;stroke:#152029;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:.3s}
.wg-btn .i-x{opacity:0;transform:rotate(-90deg) scale(.7)}
.wg.open .wg-btn .i-chat{opacity:0;transform:rotate(90deg) scale(.7)}
.wg.open .wg-btn .i-x{opacity:1;transform:none}
.wg-ping{position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;
  background:#4ec98a;border:2px solid #101c25;opacity:0;transform:scale(.4);transition:.3s}
.wg-ping.on{opacity:1;transform:none;animation:wgp 2s infinite}
@keyframes wgp{0%{box-shadow:0 0 0 0 rgba(78,201,138,.55)}70%{box-shadow:0 0 0 9px rgba(78,201,138,0)}100%{box-shadow:0 0 0 0 rgba(78,201,138,0)}}
.wg-panel{order:1;width:min(392px,calc(100vw - 40px));height:min(600px,calc(100vh - 140px));
  background:var(--app-2);border:1px solid var(--hair);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transform-origin:bottom right;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  opacity:0;transform:translateY(14px) scale(.96);pointer-events:none;transition:.32s cubic-bezier(.2,.8,.3,1)}
.wg.open .wg-panel{opacity:1;transform:none;pointer-events:auto}
.wg-head{display:flex;align-items:center;gap:13px;padding:16px 18px;border-bottom:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(179,145,95,.14),rgba(179,145,95,0))}
.wg-head .av{width:36px;height:36px;flex:0 0 36px;border-radius:50%;
  background:linear-gradient(140deg,var(--gold-light),var(--gold));display:grid;place-items:center;
  font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:#152029}
.wg-head .who{display:flex;flex-direction:column;min-width:0}
.wg-head .nm{color:#fff;font-size:.95rem}
.wg-head .st{color:var(--dim);font-size:.74rem;font-weight:300;display:flex;align-items:center;gap:7px}
.wg-head .dot{width:6px;height:6px;border-radius:50%;background:#4ec98a;flex:0 0 6px}
.wg-x{margin-left:auto;background:none;border:none;color:var(--dim);font-size:1.5rem;line-height:1;
  cursor:pointer;padding:2px 4px;transition:.25s}
.wg-x:hover{color:#fff}
.wg-panel .chat-log{padding:22px 18px}
.wg-panel .chips{padding:0 18px 14px}
.wg-panel .chip{font-size:.76rem;padding:8px 13px}
.wg-panel .chat-in{padding:14px 16px}
.wg-panel .bub{max-width:88%}
@media(max-width:720px){
  .wg{right:16px;bottom:16px;left:16px;align-items:flex-end}
  .wg-panel{width:100%;height:min(560px,calc(100vh - 120px))}
  .wg-btn{width:54px;height:54px}
}
@media print{.wg{display:none !important}}

/* ============ referral attribution ============ */
.br-card .opt{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.34);
  margin-left:8px}
.au-hint{font-size:.76rem;color:rgba(255,255,255,.42);font-weight:300;line-height:1.6;margin:8px 0 0}
.au-ref-card{display:flex;align-items:center;gap:12px;border:1px solid rgba(179,145,95,.4);
  border-radius:4px;background:rgba(179,145,95,.08);padding:14px 16px;margin:6px 0 4px}
.au-ref-card .k{font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.au-ref-card .v{color:#fff;font-size:.95rem}
.au-ref-card button{margin-left:auto;background:none;border:none;color:rgba(255,255,255,.4);
  font-family:inherit;font-size:.74rem;cursor:pointer;text-decoration:underline;padding:0}
.au-ref-card button:hover{color:var(--gold)}

/* admin: referral */
.ad-item .via{display:block;font-size:.72rem;color:var(--gold);font-weight:300;margin-top:4px}
.ad-facts .wide{grid-column:1/-1}
.ad-facts .k em{font-style:normal;color:rgba(255,255,255,.34);text-transform:none;letter-spacing:0;
  font-size:.68rem;margin-left:5px}
.ad-link{border:1px solid var(--hair);border-radius:4px;background:var(--app-2);
  padding:24px 26px;margin:0 0 46px}
.ad-link h3{font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:#fff;font-weight:300;margin:0 0 8px}
.ad-link p{font-size:.88rem;color:var(--dim);font-weight:300;line-height:1.7;margin:0 0 16px;max-width:640px}
.ad-link .ln{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ad-link code{flex:1;min-width:240px;background:rgba(255,255,255,.05);border:1px solid var(--hair);
  border-radius:4px;padding:12px 15px;font-size:.82rem;color:var(--gold-light);overflow-x:auto;white-space:nowrap}

/* the links and QR panel */
.ln-head{margin-bottom:22px}
.ln-body{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:34px;align-items:start}
.ln-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.ln-tab{background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:22px;
  padding:9px 15px;font-family:inherit;font-size:.78rem;color:var(--dim);cursor:pointer;transition:.25s}
.ln-tab:hover{color:#fff;border-color:rgba(179,145,95,.45)}
.ln-tab.on{background:rgba(179,145,95,.14);border-color:var(--gold);color:var(--gold-light)}
.ln-sub{font-size:.85rem;color:var(--dim);font-weight:300;line-height:1.65;margin:0 0 14px}
.ln-note{font-size:.78rem;color:rgba(255,255,255,.35);font-weight:300;line-height:1.6;margin:14px 0 0}
.ln-qr{text-align:center}
.ln-qr img{width:100%;max-width:180px;border-radius:4px;background:#fff;padding:8px;display:block;
  margin:0 auto 14px}
.ln-dl{display:flex;flex-direction:column;align-items:center;gap:9px}
.ln-dl .btn{font-size:.68rem;padding:10px 18px}
.ln-svg{font-size:.72rem;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.ln-svg:hover{color:var(--gold)}
.ln-tiny{font-size:.7rem;color:rgba(255,255,255,.3);font-weight:300;margin:12px 0 0;line-height:1.5}
.ln-none{font-size:.82rem;color:var(--dim);font-weight:300}
@media(max-width:820px){
  .ln-body{grid-template-columns:1fr;gap:26px}
  .ln-qr{text-align:left}
  .ln-qr img{margin-left:0}
  .ln-dl{align-items:flex-start}
}
@media(max-width:620px){
  .ad-link{padding:20px 18px}
  .ad-link .ln{flex-direction:column;align-items:stretch}
  .ad-link code{min-width:0;max-width:100%;white-space:normal;word-break:break-all;
    font-size:.76rem;line-height:1.5}
  .ln-tab{font-size:.72rem;padding:8px 12px}
}
.ad-own{border:1px solid rgba(179,145,95,.3);border-radius:4px;background:rgba(179,145,95,.05);
  padding:26px 28px;margin:0 0 34px}
.ad-own h3{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:#fff;font-weight:300;margin:0 0 8px}
.ad-own p{font-size:.88rem;color:var(--dim);font-weight:300;line-height:1.7;margin:0 0 20px;max-width:680px}
.ad-own .row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.ad-own .row .wide{grid-column:span 2}
.ad-own label{display:block;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px}
.ad-own input,.ad-own select{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--hair);
  border-radius:4px;padding:12px 14px;font-family:inherit;font-size:.9rem;color:#fff;outline:none}
.ad-own input:focus,.ad-own select:focus{border-color:var(--gold)}
.ad-own select{-webkit-appearance:none;appearance:none;background-color:rgba(255,255,255,.05);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b3915f' fill='none' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:10px 6px;padding-right:36px}
.ad-table tr.own td{background:rgba(179,145,95,.07)}
@media(max-width:800px){.ad-own .row{grid-template-columns:1fr}.ad-own .row .wide{grid-column:auto}}

/* ============ the team ============ */
.team-section{overflow:hidden}
.team{display:grid;grid-template-columns:repeat(6,1fr);gap:26px}
.tm{margin:0}
.tm-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:rgba(255,255,255,.05)}
.tm-img:after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,43,56,0) 45%,rgba(24,43,56,.55) 100%);
  opacity:0;transition:opacity .5s}
.tm-img img{width:100%;height:100%;object-fit:cover;object-position:center 22%;
  filter:grayscale(100%) contrast(1.02);transition:transform .8s cubic-bezier(.2,.8,.3,1),filter .6s}
.tm:hover .tm-img img{transform:scale(1.06);filter:grayscale(0) contrast(1)}
.tm:hover .tm-img:after{opacity:1}
.tm figcaption{padding:18px 2px 0}
.tm h3{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:300;color:#fff;
  line-height:1.1;margin:0 0 7px}
.tm h3 span{display:block;font-size:1.05rem;color:rgba(255,255,255,.62)}
.tm p{font-size:.62rem;letter-spacing:.19em;text-transform:uppercase;color:var(--gold);
  font-weight:400;line-height:1.5;margin:0}
.team-note{text-align:center;margin:52px 0 0;font-size:.8rem;font-weight:300;
  color:rgba(255,255,255,.42)}
@media(max-width:1150px){.team{grid-template-columns:repeat(3,1fr);gap:24px}}
@media(max-width:640px){
  .team{grid-template-columns:repeat(2,1fr);gap:18px}
  .tm h3{font-size:1.2rem}
  .tm h3 span{font-size:.92rem}
  .tm p{font-size:.58rem;letter-spacing:.16em}
}

/* ============ who did what ============ */
.ad-touch{display:flex;align-items:center;gap:11px;border:1px solid rgba(179,145,95,.34);
  border-radius:4px;background:rgba(179,145,95,.08);padding:11px 14px;margin:0 0 22px;
  font-size:.84rem;color:rgba(255,255,255,.8);font-weight:300}
.ad-touch.mine{border-color:var(--hair);background:rgba(255,255,255,.04);color:var(--dim)}
.ad-touch .av{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--gold-light),var(--gold));color:#152029;
  font-family:'Cormorant Garamond',serif;font-size:.95rem}
.ad-touch.mine .av{background:rgba(255,255,255,.12);color:rgba(255,255,255,.7)}
.ad-touch b{font-weight:400;color:var(--gold);margin-left:8px;font-size:.76rem}
.ad-touch.mine b{color:rgba(255,255,255,.4)}
.ad-item .hand{display:block;font-size:.68rem;color:rgba(255,255,255,.42);font-weight:300;margin-top:4px}
.ad-ev.team{background:rgba(179,145,95,.05)}
.ad-ev.team .tm-who{color:var(--gold)}
.ad-ev.team .tm-who.me{color:rgba(255,255,255,.72)}
.ad-ev.team i{font-style:normal;color:rgba(255,255,255,.45)}

/* ============ dealer levels ============ */
.tiers{margin-bottom:70px}
.tr-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tr{border:1px solid var(--hair);border-radius:4px;background:var(--app-2);padding:30px 30px 26px;
  display:flex;flex-direction:column}
.tr.hi{border-color:rgba(179,145,95,.5);
  background:linear-gradient(180deg,rgba(179,145,95,.09),rgba(179,145,95,0) 260px),var(--app-2)}
.tr-hd{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:16px;
  border-bottom:1px solid var(--hair);margin-bottom:18px}
.tr-hd .n{font-family:'Cormorant Garamond',serif;font-size:2rem;color:#fff;line-height:1}
.tr.hi .tr-hd .n{color:var(--gold-light)}
.tr-hd .s{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.tr-lead{font-size:.95rem;color:rgba(255,255,255,.78);font-weight:300;line-height:1.7;margin:0 0 24px}
.tr .k{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.tr ul{list-style:none;margin:0 0 24px;padding:0}
.tr ul li{position:relative;padding-left:20px;font-size:.89rem;color:rgba(255,255,255,.74);
  font-weight:300;line-height:1.7;margin-bottom:10px}
.tr ul li:before{content:'';position:absolute;left:0;top:11px;width:7px;height:1px;background:var(--gold)}
.tr ul.give li:before{background:rgba(255,255,255,.3)}
.tr ul.give li{color:var(--dim)}
.tr-best{margin:auto 0 0;padding-top:18px;border-top:1px solid var(--hair);font-size:.87rem;
  color:var(--dim);font-weight:300;line-height:1.7}
.tr-best b{display:block;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px;font-weight:400}
@media(max-width:900px){.tr-grid{grid-template-columns:1fr}.tr{padding:24px 22px}}
.tm p .sub{display:block;letter-spacing:.12em;color:rgba(255,255,255,.4);margin-top:5px;
  font-size:.92em;text-transform:none}
.bub .from{display:block;margin-top:8px;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);opacity:.85}
.au-ref-card .w{font-size:.7rem;color:rgba(255,255,255,.38);font-weight:300}

/* ============ agreement tab & lead gate ============ */
.ag-state{margin-bottom:24px}
.ag-done,.ag-todo{display:flex;align-items:flex-start;gap:15px;border-radius:4px;padding:18px 22px}
.ag-done{border:1px solid rgba(78,201,138,.45);background:rgba(78,201,138,.08)}
.ag-todo{border:1px solid rgba(179,145,95,.45);background:rgba(179,145,95,.08)}
.ag-done .ic,.ag-todo .ic{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;
  place-items:center;font-size:.9rem;color:#0d1a13;background:#4ec98a}
.ag-todo .ic{background:var(--gold);color:#152029;font-family:'Cormorant Garamond',serif;font-size:1.1rem}
.ag-done b,.ag-todo b{display:block;color:#fff;font-weight:400;font-size:.98rem;margin-bottom:4px}
.ag-done span:not(.ic),.ag-todo span:not(.ic){display:block;font-size:.88rem;color:var(--dim);
  font-weight:300;line-height:1.65}
.ag-read{border:1px solid var(--hair);border-radius:4px;background:var(--app-2);overflow:hidden}
.ag-read .bd{padding:38px 42px;max-height:min(70vh,760px);overflow-y:auto;scrollbar-width:thin}
.ag-read .bd::-webkit-scrollbar{width:7px}
.ag-read .bd::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:4px}
@media(max-width:700px){.ag-read .bd{padding:24px 20px;max-height:none}}

.gate{display:flex;align-items:flex-start;gap:22px;border:1px solid rgba(179,145,95,.4);
  border-radius:4px;padding:34px 36px;max-width:760px;
  background:linear-gradient(180deg,rgba(179,145,95,.1),rgba(179,145,95,0) 200px),var(--app-2)}
.gate .lock{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(179,145,95,.5)}
.gate .lock svg{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.gate .k{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.gate h3{font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:#fff;font-weight:300;margin:0 0 12px}
.gate p{font-size:.94rem;color:var(--dim);font-weight:300;line-height:1.75;margin:0 0 24px}
.gate p b{color:rgba(255,255,255,.85);font-weight:400}
@media(max-width:640px){.gate{padding:26px 22px;gap:16px}.gate .lock{width:38px;height:38px;flex:0 0 38px}}

#br-nav button.tab-locked:after{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.28);margin-left:8px;vertical-align:middle}
#br-nav button.todo:after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--gold);margin-left:8px;vertical-align:middle;animation:wgp 2.4s infinite}
.ad-item .unsigned{display:inline-block;margin-top:8px;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);border:1px solid rgba(179,145,95,.4);
  border-radius:20px;padding:4px 10px}

/* ============ access code & sign in ============ */
.au-switch{margin:20px 0 0;text-align:center;font-size:.84rem;color:rgba(255,255,255,.45);font-weight:300}
.au-switch button{background:none;border:none;color:var(--gold);font-family:inherit;font-size:.84rem;
  cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.au-switch button:hover{color:var(--gold-light)}
.au-intro{font-size:.85rem;color:var(--dim);font-weight:300;line-height:1.65;margin:0 0 22px}
.au-intro a{color:var(--gold)}
.br-code{margin-top:22px;padding-top:20px;border-top:1px solid var(--hair)}
.br-code .k{display:block;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px}
.br-code b{display:block;font-family:'Courier New',monospace;font-size:1.05rem;letter-spacing:.14em;
  color:#fff;font-weight:400;margin-bottom:8px}
.br-code .s{display:block;font-size:.74rem;color:rgba(255,255,255,.42);font-weight:300;line-height:1.6}
.br-code.fresh{border-color:rgba(179,145,95,.5);background:rgba(179,145,95,.08);
  border-radius:4px;padding:18px;margin-top:20px;animation:codepop 2.4s ease both}
@keyframes codepop{0%{box-shadow:0 0 0 0 rgba(179,145,95,.5)}60%{box-shadow:0 0 0 14px rgba(179,145,95,0)}
  100%{box-shadow:0 0 0 0 rgba(179,145,95,0)}}
.ad-facts input[readonly]{color:var(--gold-light);letter-spacing:.1em;
  font-family:'Courier New',monospace;cursor:text}

/* ============ sign-in link ============ */
.au-mail{text-align:center;padding:12px 0 4px}
.au-mail .ic{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(179,145,95,.45);background:rgba(179,145,95,.09);margin-bottom:20px}
.au-mail .ic svg{width:26px;height:26px;fill:none;stroke:var(--gold);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.au-mail .sp{display:inline-block;width:34px;height:34px;border-radius:50%;margin-bottom:20px;
  border:2px solid rgba(179,145,95,.25);border-top-color:var(--gold);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.au-mail h3{font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:#fff;font-weight:300;margin:0 0 12px}
.au-mail p{font-size:.92rem;color:var(--dim);font-weight:300;line-height:1.7;margin:0 0 14px}
.au-mail p b{color:#fff;font-weight:400}
.au-mail p.small{font-size:.8rem;color:rgba(255,255,255,.4);margin-bottom:22px}
.au-mail a{color:var(--gold)}
.au-mail .btn{font-size:.72rem}
.br-card input[readonly]{opacity:.72;cursor:default}

/* two commission scales */
.cm-wrap{margin-bottom:22px}
.cm-block{margin-bottom:26px}
.cm-block .hd{margin-bottom:12px}
.cm-block .hd .s{display:block;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:7px}
.cm-block .hd h4{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:#fff;
  font-weight:300;margin:0}
.ad-sent{margin:12px 0 0;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:#4ec98a;opacity:0;transition:opacity .3s}
.ad-sent.on{opacity:1}
.ad-sent.bad{color:#e0a3a3;text-transform:none;letter-spacing:0;font-size:.84rem}
.ad-ok.bad{color:#e0a3a3}

/* ============ the content library ============ */
.sg-strip{margin-bottom:22px}
.sg-row{display:flex;align-items:center;gap:15px;border:1px solid rgba(179,145,95,.4);
  border-radius:4px;background:rgba(179,145,95,.07);padding:16px 20px}
.sg-row.ok{border-color:rgba(78,201,138,.4);background:rgba(78,201,138,.07)}
.sg-row .ic{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold);color:#152029;font-family:'Cormorant Garamond',serif;font-size:1.05rem}
.sg-row.ok .ic{background:#4ec98a;color:#0d1a13;font-size:.85rem}
.sg-row b{display:block;color:#fff;font-weight:400;font-size:.95rem;margin-bottom:3px}
.sg-row span:not(.ic){display:block;font-size:.85rem;color:var(--dim);font-weight:300;line-height:1.6}
.sg-row .btn{margin-left:auto;flex:0 0 auto;font-size:.68rem;white-space:nowrap}
.dl-get{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.dl-get .btn{font-size:.66rem;padding:9px 16px}
.dl-get .s{font-size:.72rem;color:rgba(255,255,255,.35);font-weight:300}
.dl-item .m .pdf{font-style:normal;font-size:.55rem;letter-spacing:.14em;color:var(--gold);
  border:1px solid rgba(179,145,95,.45);border-radius:3px;padding:2px 5px;margin-right:6px}
.dl-soon{display:flex;align-items:center;gap:16px;padding:18px 22px;border-top:1px solid var(--hair);
  opacity:.55}
.dl-soon .t{display:block;color:#fff;font-size:.95rem;margin-bottom:4px}
.dl-soon .d{display:block;font-size:.8rem;color:var(--dim);font-weight:300;line-height:1.55}
.dl-soon .m{margin-left:auto;flex:0 0 auto;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap}
.rd-lead + .faq-q,.faq-q{margin-top:18px !important}
@media(max-width:700px){
  .sg-row{flex-wrap:wrap}
  .sg-row .btn{margin-left:0}
  .dl-soon{flex-wrap:wrap}
  .dl-soon .m{margin-left:0}
}

/* ============ contact: whatsapp first ============ */
.wa{display:grid;grid-template-columns:1fr 132px;gap:26px;align-items:center;
  border:1px solid var(--line);border-radius:4px;background:#fff;padding:26px 28px;margin:34px 0 0}
.wa-txt h3{font-family:'Cormorant Garamond',serif;font-size:1.6rem;color:var(--navy);
  font-weight:300;margin:0 0 8px}
.wa-txt p{font-size:.92rem;color:var(--grey);font-weight:300;line-height:1.7;margin:0 0 18px}
.wa-btn{display:inline-flex;align-items:center;gap:10px}
.wa-btn svg{width:16px;height:16px;fill:currentColor;flex:0 0 16px}
.wa-note{font-size:.78rem !important;color:#8d99a1 !important;margin:14px 0 0 !important}
.wa-qr img{width:100%;display:block;border:1px solid var(--line);border-radius:4px}
.form-grid select.preset{border-color:var(--gold);color:var(--navy)}
@media(max-width:760px){
  .wa{grid-template-columns:1fr;padding:22px 20px}
  .wa-qr{max-width:150px}
  .wa-note{display:none}
}

/* ============ privacy consent ============ */
.consent-box{margin:6px 0 4px}
.consent-box .consent{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;cursor:pointer}
.consent-box .consent span{font-size:.82rem;line-height:1.6;color:var(--grey);font-weight:300}
.consent-box .consent a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.consent-box.dark .consent span{color:rgba(255,255,255,.55)}
.consent-box.dark .consent a{color:var(--gold-light)}
.consent-note{font-size:.8rem;color:var(--grey);font-weight:300;line-height:1.6;margin:4px 0 0}
.consent-note a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.nl-note{font-size:.72rem;color:rgba(255,255,255,.4);font-weight:300;line-height:1.55;margin:10px 0 0}
.nl-note a{color:var(--gold-light);text-decoration:underline;text-underline-offset:2px}

/* ============ privacy policy page ============ */
.pv-wrap{max-width:820px}
.pv-lead{font-size:1.05rem;line-height:1.85;color:var(--navy);font-weight:300;
  padding-bottom:34px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.pv-sec{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:34px 0;
  border-bottom:1px solid var(--line)}
.pv-n{font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:var(--gold);line-height:1}
.pv-b h2{font-family:'Cormorant Garamond',serif;font-size:1.55rem;color:var(--navy);
  font-weight:300;margin:0 0 14px}
.pv-b p{font-size:.95rem;line-height:1.85;color:var(--grey);font-weight:300;margin:0 0 12px}
.pv-b a{color:var(--gold)}
.pv-list{margin:14px 0 0}
.pv-list dt{font-size:.9rem;color:var(--navy);font-weight:400;margin-top:14px}
.pv-list dd{margin:4px 0 0;font-size:.92rem;line-height:1.75;color:var(--grey);font-weight:300}
.pv-date{margin-top:34px;font-size:.8rem;color:#8d99a1;font-weight:300}
@media(max-width:640px){
  .pv-sec{grid-template-columns:1fr;gap:8px;padding:26px 0}
  .pv-n{font-size:1.2rem}
}

/* ============ public taste of the simulation ============ */
.psim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0;
  border:1px solid var(--line);background:#fff;max-width:1000px;margin:0 auto}
.psim-pick{padding:38px 38px 34px;border-right:1px solid var(--line)}
.psim-field{margin-bottom:28px}
.psim-field label{display:block;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}
.psim-opts{display:flex;flex-wrap:wrap;gap:8px}
.psim-opt{background:none;border:1px solid var(--line);padding:11px 16px;font-family:inherit;
  font-size:.84rem;color:var(--grey);cursor:pointer;transition:.25s}
.psim-opt:hover{border-color:var(--gold);color:var(--navy)}
.psim-opt.on{background:var(--navy);border-color:var(--navy);color:#fff}
.psim-note{font-size:.8rem;color:#8d99a1;font-weight:300;margin:0;padding-top:20px;
  border-top:1px solid var(--line)}
.psim-res{padding:38px 38px 30px;background:#fbfaf7}
.psim-name{font-family:'Cormorant Garamond',serif;font-size:1.9rem;color:var(--navy);
  font-weight:300;margin-bottom:24px}
.psim-open{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding-bottom:28px;
  border-bottom:1px solid var(--line)}
.psim-open .k{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin-bottom:9px}
.psim-open .v{font-family:'Cormorant Garamond',serif;font-size:2.1rem;color:var(--navy);
  line-height:1;margin-bottom:7px}
.psim-open .s{font-size:.78rem;color:#8d99a1;font-weight:300;line-height:1.5}
.psim-locked{position:relative;margin-top:26px;min-height:220px}
.psim-blur{filter:blur(5px);opacity:.4;pointer-events:none;user-select:none}
.psim-blur .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:.88rem;color:var(--grey)}
.psim-blur .row b{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--navy);font-weight:400}
.psim-blur .row.big b{font-size:1.9rem;color:var(--gold)}
.psim-gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:10px 16px;
  background:linear-gradient(180deg,rgba(251,250,247,.55),rgba(251,250,247,.94) 42%)}
.psim-gate .lock{width:40px;height:40px;border-radius:50%;border:1px solid var(--gold);
  display:grid;place-items:center;margin-bottom:14px;background:#fff}
.psim-gate .lock svg{width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.psim-gate p{font-size:.9rem;color:var(--grey);font-weight:300;line-height:1.7;margin:0 0 20px;
  max-width:380px}
.psim-tiny{display:block;margin-top:14px;font-size:.75rem;color:#98a3ab;font-weight:300}
.psim-disc{font-size:.72rem;color:#a3adb4;font-weight:300;line-height:1.6;margin:26px 0 0}
@media(max-width:860px){
  .psim{grid-template-columns:1fr}
  .psim-pick{border-right:none;border-bottom:1px solid var(--line);padding:28px 22px 24px}
  .psim-res{padding:28px 22px 24px}
  .psim-open{grid-template-columns:1fr;gap:20px}
  .psim-open .v{font-size:1.8rem}
}

/* ============ the three questions ============ */
.pf{margin-top:34px;border:1px solid rgba(179,145,95,.35);border-radius:4px;
  background:linear-gradient(180deg,rgba(179,145,95,.08),rgba(179,145,95,0) 220px),var(--app-2);
  padding:32px 34px 28px}
.pf-head{max-width:640px;margin-bottom:26px}
.pf-head .k{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:11px}
.pf-head h3{font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:#fff;font-weight:300;margin:0 0 12px}
.pf-head p{font-size:.92rem;color:var(--dim);font-weight:300;line-height:1.75;margin:0}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pf-q.wide{grid-column:1/-1}
.pf-q label{display:block;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px}
.pf-q select{width:100%;background-color:rgba(255,255,255,.05);border:1px solid var(--hair);
  border-radius:4px;padding:13px 15px;font-family:inherit;font-size:.92rem;color:#fff;outline:none;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b3915f' fill='none' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:10px 6px;padding-right:38px}
.pf-q select:focus{border-color:var(--gold)}
.pf-hint{display:block;margin-top:8px;font-size:.74rem;color:rgba(255,255,255,.32);font-weight:300}
.pf-checks{display:flex;flex-wrap:wrap;gap:9px}
.pf-check{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--hair);
  border-radius:22px;padding:9px 15px;cursor:pointer;transition:.25s}
.pf-check:hover{border-color:rgba(179,145,95,.5)}
.pf-check span{font-size:.84rem;color:var(--dim);font-weight:300}
.pf-check input:checked ~ span{color:#fff}
.pf-check:has(input:checked){border-color:var(--gold);background:rgba(179,145,95,.12)}
.pf-act{display:flex;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
.pf-skip{background:none;border:none;color:rgba(255,255,255,.38);font-family:inherit;
  font-size:.82rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.pf-skip:hover{color:var(--dim)}
.pf-ok{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#4ec98a;
  opacity:0;transition:opacity .3s}
.pf-ok.on{opacity:1}
.pf-done{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pf-done .k{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.pf-done p{font-size:.95rem;color:var(--dim);font-weight:300;margin:0}
.pf-done p b{color:#fff;font-weight:400}
.pf-done .btn{margin-left:auto;flex:0 0 auto;font-size:.68rem}
@media(max-width:760px){
  .pf{padding:24px 20px}
  .pf-grid{grid-template-columns:1fr}
  .pf-done .btn{margin-left:0}
}
.ad-facts .plans p{margin:0;font-size:.92rem;color:var(--dim);font-weight:300;line-height:1.6}
.ad-facts .plans p b{color:#fff;font-weight:400}
.ad-facts .plans{padding:16px 18px}
/* the region pills: the pill itself shows the state, so hide the native box */
.pf-check input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.pf-check span{text-transform:none !important;letter-spacing:0 !important;
  font-family:'Caviar Dreams','Jost',sans-serif}
.pf-check{position:relative;padding-left:34px}
.pf-check:before{content:'';position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;border:1px solid var(--hair);border-radius:2px;transition:.2s}
.pf-check:has(input:checked):before{background:var(--gold);border-color:var(--gold)}
.pf-check:has(input:checked):after{content:'';position:absolute;left:18px;top:calc(50% - 4px);
  width:4px;height:7px;border:solid #152029;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
/* changing somebody's programme */
.ad-facts .role-pick{padding:16px 18px}
.ad-facts .role-pick select{width:100%;background-color:rgba(255,255,255,.05);
  border:1px solid var(--hair);border-radius:4px;padding:11px 14px;font-family:inherit;
  font-size:.92rem;color:#fff;outline:none;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b3915f' fill='none' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:10px 6px;padding-right:36px}
.ad-facts .role-pick select:focus{border-color:var(--gold)}
.role-warn{display:none;margin:12px 0 0;font-size:.82rem;line-height:1.6;color:var(--gold-light);
  border-left:1px solid var(--gold);padding-left:14px}
.role-warn.on{display:block}
.role-warn b{color:#fff;font-weight:400}
.br-moved{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:200;
  max-width:min(520px,calc(100vw - 40px));background:var(--app-3);border:1px solid var(--gold);
  border-radius:4px;padding:18px 22px;font-size:.9rem;color:var(--dim);font-weight:300;
  line-height:1.65;box-shadow:0 20px 50px rgba(0,0,0,.5);animation:mvin .4s ease both}
.br-moved b{display:block;color:#fff;font-weight:400;margin-bottom:5px}
@keyframes mvin{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translateX(-50%)}}

/* ============ what we ask of each profile ============ */
.au-req{margin:0 0 22px}
.au-req-btn{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;
  padding:0;font-family:inherit;cursor:pointer;text-align:left}
.au-req-btn .i{width:19px;height:19px;flex:0 0 19px;border-radius:50%;border:1px solid var(--gold);
  color:var(--gold);font-size:.68rem;display:grid;place-items:center;font-style:italic}
.au-req-btn .t{font-size:.8rem;color:var(--gold);letter-spacing:.06em}
.au-req-btn .c{margin-left:auto;color:rgba(255,255,255,.3);font-size:.7rem;transition:transform .25s}
.au-req.on .au-req-btn .c{transform:rotate(180deg)}
.au-req-body{display:none;margin-top:12px;padding:14px 16px;border-left:1px solid rgba(179,145,95,.5);
  background:rgba(179,145,95,.06)}
.au-req.on .au-req-body{display:block}
.au-req-body p{margin:0;font-size:.84rem;line-height:1.7;color:rgba(255,255,255,.62);font-weight:300}
.au-req-body b{color:#fff;font-weight:400}

/* ============ qualification, in the admin ============ */
.qual{border:1px solid var(--hair);border-radius:4px;background:rgba(255,255,255,.03);
  padding:20px 22px;margin-bottom:22px}
.qual.ok{border-color:rgba(78,201,138,.45);background:rgba(78,201,138,.06)}
.qual.no{border-color:rgba(224,163,163,.45);background:rgba(224,163,163,.06)}
.qual.checking{border-color:rgba(179,145,95,.45);background:rgba(179,145,95,.07)}
.qual-top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.qual-top .k{font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.qual-top .tag{margin-left:auto;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:20px;padding:5px 12px;color:var(--dim)}
.qual.ok .tag{border-color:#4ec98a;color:#4ec98a}
.qual.no .tag{border-color:#e0a3a3;color:#e0a3a3}
.qual.checking .tag{border-color:var(--gold);color:var(--gold-light)}
.qual-need{font-size:.86rem;color:var(--dim);font-weight:300;line-height:1.65;margin:0 0 10px}
.qual-gave{font-size:.86rem;color:rgba(255,255,255,.78);font-weight:300;margin:0 0 16px}
.qual-gave.dim{color:rgba(255,255,255,.35)}
.qual-gave a{color:var(--gold)}
.qual-act{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.qual-act select{background-color:rgba(255,255,255,.05);border:1px solid var(--hair);border-radius:4px;
  padding:10px 34px 10px 13px;font-family:inherit;font-size:.86rem;color:#fff;outline:none;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b3915f' fill='none' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:10px 6px}
.qual-act .btn{font-size:.68rem}
.ad-item .unsigned.q{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.5);margin-right:6px}

/* the two consent lines inside the dark sign-in card */
.br-card .consent-box{margin:20px 0 22px}
.br-card .consent-box .consent{display:grid;grid-template-columns:18px 1fr;gap:12px;
  align-items:start;margin-bottom:14px;cursor:pointer}
.br-card .consent-box .consent input[type=checkbox]{
  width:18px;height:18px;margin:1px 0 0;padding:0;flex:none;
  -webkit-appearance:none;appearance:none;background:rgba(255,255,255,.05);
  border:1px solid var(--hair);border-radius:3px;cursor:pointer;position:relative;transition:.2s}
.br-card .consent-box .consent input[type=checkbox]:checked{background:var(--gold);border-color:var(--gold)}
.br-card .consent-box .consent input[type=checkbox]:checked:after{content:'';position:absolute;
  left:5px;top:1px;width:5px;height:10px;border:solid #152029;border-width:0 2px 2px 0;
  transform:rotate(45deg)}
.br-card .consent-box .consent span{display:block;font-size:.78rem;line-height:1.65;
  letter-spacing:0;text-transform:none;color:rgba(255,255,255,.5);font-weight:300;margin:0}
.br-card .consent-box .consent a{color:var(--gold-light)}

/* ============ what you declare, above your signature ============ */
.declare{border:1px solid rgba(179,145,95,.35);border-radius:4px;background:rgba(179,145,95,.06);
  padding:26px 28px;margin:34px 0 0}
.declare .k{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  margin-bottom:11px}
.declare > p{font-size:.9rem;color:var(--dim);font-weight:300;line-height:1.7;margin:0 0 20px;
  max-width:620px}
.dc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dc label{display:block;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px}
.dc input,.dc select{width:100%;background-color:rgba(255,255,255,.05);border:1px solid var(--hair);
  border-radius:4px;padding:12px 14px;font-family:inherit;font-size:.92rem;color:#fff;outline:none}
.dc input:focus,.dc select:focus{border-color:var(--gold)}
.dc select{-webkit-appearance:none;appearance:none;padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b3915f' fill='none' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:10px 6px}
.dc-note{margin:18px 0 0;font-size:.8rem;color:rgba(255,255,255,.42);font-weight:300;line-height:1.6}
@media(max-width:700px){.declare{padding:20px 18px}.dc-grid{grid-template-columns:1fr}}

/* ============ moved programme, and what is still missing ============ */
.need{margin-top:34px;border:1px solid var(--gold);border-radius:4px;
  background:linear-gradient(180deg,rgba(179,145,95,.13),rgba(179,145,95,0) 240px),var(--app-2);
  padding:32px 34px 28px}
.need-head{max-width:680px;margin-bottom:24px}
.need-head .k{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  margin-bottom:11px}
.need-head h3{font-family:'Cormorant Garamond',serif;font-size:1.8rem;color:#fff;font-weight:300;
  margin:0 0 12px}
.need-head p{font-size:.93rem;color:var(--dim);font-weight:300;line-height:1.75;margin:0}
.nd-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.nd label{display:block;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px}
.nd input,.nd select{width:100%;background-color:rgba(255,255,255,.05);border:1px solid var(--hair);
  border-radius:4px;padding:13px 15px;font-family:inherit;font-size:.92rem;color:#fff;outline:none}
.nd input:focus,.nd select:focus{border-color:var(--gold)}
.nd input.bad{border-color:#e0a3a3}
.nd select{-webkit-appearance:none;appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b3915f' fill='none' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:10px 6px}
.nd-hint{display:block;margin-top:8px;font-size:.74rem;color:rgba(255,255,255,.32);font-weight:300}
.nd-act{display:flex;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
.nd-act .btn{font-size:.7rem}
.nd-skip{background:none;border:none;color:rgba(255,255,255,.38);font-family:inherit;
  font-size:.82rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.nd-skip:hover{color:var(--dim)}
@media(max-width:760px){.need{padding:24px 20px}.nd-grid{grid-template-columns:1fr}}

/* ---------- password dots ----------
   Caviar Dreams is a Nymphont face, and in it the bullet character is a small
   ornament rather than a dot. A filled password field therefore turned into a
   row of little logos. Anything masked gets a plain face instead. */
input[type="password"]{
  font-family:'Jost',Verdana,Arial,sans-serif;
  letter-spacing:.16em;
}

/* ---------- signing in on a wide screen ----------
   On a phone the tall single column is exactly right. On a laptop it meant
   scrolling down a narrow strip with empty screen either side. From 820px the
   three choices sit next to each other and the first two fields share a line,
   which takes roughly a third off the height of the form. */
@media (min-width:820px){
  .br-card{max-width:620px;padding:44px 40px}
  .br-roles{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
  .br-role{padding:16px 15px 18px;display:flex;flex-direction:column;justify-content:flex-start}
  .br-role:hover{transform:translateY(-2px)}
  .br-role b{font-size:1.1rem;line-height:1.2}
  .br-role span{font-size:.74rem;line-height:1.45;margin-top:5px}
  .br-role.on:after{right:12px;top:14px;margin-top:0}
  .au-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;align-items:start}
  .au-pair > div{min-width:0}
}

/* ================= sign in, split screen =================
   The photograph carries the promise, the form stays out of its way. Colours
   and type are the ones used everywhere else on the site: navy, gold, Cormorant
   for the heading and Caviar Dreams for the rest. */
.br-auth{padding:0;align-items:stretch}
.br-auth:after{display:none}
.br-split{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;
  width:100%;min-height:100svh}

.br-visual{position:relative;background:url('hero.jpg') center/cover no-repeat;
  background-image:url('../assets/hero.jpg')}
.br-visual:after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,20,27,.28) 0%,rgba(11,20,27,.62) 55%,rgba(11,20,27,.86) 100%)}
.br-quote{position:absolute;left:clamp(28px,4vw,58px);bottom:clamp(30px,5vh,58px);
  z-index:2;max-width:400px}
.br-quote p{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;
  font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.28;color:#fff;margin:0}
.br-quote span{display:block;margin-top:16px;font-size:.62rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-light);opacity:.85}

.br-panel{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(34px,4vw,60px) clamp(24px,4vw,62px);background:var(--app-bg)}
.br-auth .br-card{max-width:440px;width:100%;margin:0;background:none;border:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;box-shadow:none}
.br-auth .br-foot{max-width:440px;width:100%;text-align:left;margin-top:30px}

/* the two ways in, side by side instead of a link hidden at the bottom */
.au-tabs{display:flex;gap:4px;background:rgba(255,255,255,.05);border:1px solid var(--hair);
  border-radius:3px;padding:4px;margin:22px 0 20px}
.au-tab{flex:1;font-family:inherit;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  padding:11px 8px;border:0;border-radius:2px;background:transparent;color:rgba(255,255,255,.5);
  cursor:pointer;transition:background .25s,color .25s}
.au-tab:hover{color:rgba(255,255,255,.8)}
.au-tab[aria-selected="true"]{background:var(--gold);color:#12160f;font-weight:500}

.au-peek{margin-top:12px;font-size:.78rem;color:rgba(255,255,255,.42);line-height:1.6}
.au-peek a{color:var(--gold-light);border-bottom:1px solid rgba(207,179,136,.35);
  text-decoration:none}

@media (max-width:900px){
  .br-split{grid-template-columns:1fr;min-height:0}
  .br-visual{min-height:34vh}
  .br-quote{bottom:26px;max-width:none;right:26px}
  .br-quote p{font-size:1.3rem}
  .br-panel{padding:32px 22px 44px}
  .br-auth .br-card,.br-auth .br-foot{max-width:none}
  .au-tabs{margin:18px 0}
}

/* the photograph stays put while the form scrolls, so the line at the bottom
   of it is always in view instead of somewhere far below the fold */
@media (min-width:901px){
  .br-visual{position:sticky;top:0;height:100svh;align-self:start}
  .br-panel{min-height:100svh}
  /* three choices in a 440px column: a little smaller, a little tighter */
  .br-panel .br-role{padding:14px 13px 16px}
  .br-panel .br-role b{font-size:.98rem;line-height:1.25}
  .br-panel .br-role span{font-size:.7rem;line-height:1.4;margin-top:4px}
  .br-panel .br-roles{gap:9px}
}
/* room for the little gold marker so it never lands on top of the words */
@media (min-width:901px){ .br-panel .br-role{padding-right:26px} }

/* ============ sign in, the modern face ============
   Xanne found Cormorant too ornate here, so on this one screen the type is
   Inter Tight: a plain, current sans. The colours stay Morii: navy behind,
   gold for whatever you are meant to press. Only the line on the photograph
   keeps a serif, because that is a sentence and not an instruction. */
.br-panel,
.br-panel input,
.br-panel select,
.br-panel button,
.br-panel textarea{font-family:'Inter Tight','Jost',system-ui,sans-serif}

.br-auth .br-card h1{font-family:'Inter Tight','Jost',system-ui,sans-serif;
  font-size:clamp(1.65rem,2.4vw,2.05rem);font-weight:500;letter-spacing:-.025em;
  line-height:1.12;margin-bottom:0}
.br-auth .br-card p.sub{font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.5);
  margin-bottom:26px}
.br-quote p{font-family:'Instrument Serif','Cormorant Garamond',serif;font-style:italic}

/* the two ways in: a soft segmented control instead of a bar of capitals */
.au-tabs{gap:3px;background:rgba(255,255,255,.055);border:0;border-radius:11px;
  padding:4px;margin:20px 0 18px}
.au-tab{font-size:.82rem;letter-spacing:0;text-transform:none;font-weight:400;
  padding:10px 8px;border-radius:8px}
.au-tab[aria-selected="true"]{background:var(--gold);color:#141a10;font-weight:500}

/* who you are: one row, not three cards */
.au-iam{font-size:.8rem;color:rgba(255,255,255,.45);margin:0 0 9px}
.br-panel .br-roles{display:flex;gap:3px;background:rgba(255,255,255,.055);
  border-radius:11px;padding:4px;margin-bottom:24px}
.br-panel .br-role{flex:1;text-align:center;background:transparent;border:0;border-radius:8px;
  padding:10px 6px;transition:background .2s,color .2s}
.br-panel .br-role:hover{transform:none;background:rgba(255,255,255,.05)}
.br-panel .br-role span{display:none}
.br-panel .br-role b{font-family:'Inter Tight','Jost',system-ui,sans-serif;font-size:.82rem;
  font-weight:400;color:rgba(255,255,255,.55);letter-spacing:0;line-height:1.3}
.br-panel .br-role.on{background:var(--gold);border:0}
.br-panel .br-role.on b{color:#141a10;font-weight:500}
.br-panel .br-role.on:after{display:none}

/* fields and buttons: rounded, quiet, generous */
.br-panel label{font-size:.78rem;letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.45);margin-bottom:7px;font-weight:400}
.br-panel input,.br-panel select,.br-panel textarea{border-radius:10px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);
  padding:13px 15px;font-size:.95rem}
.br-panel input:focus,.br-panel select:focus{border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.07)}
.br-panel .br-btn{border-radius:10px;font-size:.95rem;font-weight:500;letter-spacing:0;
  text-transform:none;padding:15px;background:var(--gold);color:#141a10;border:0;width:100%}
.br-panel .br-btn:hover{background:var(--gold-light);color:#141a10}
.br-panel .au-switch,.br-panel .au-peek,.br-panel .au-intro,.br-panel .br-foot{
  font-size:.84rem;letter-spacing:0;text-transform:none}
.br-panel .au-switch button{font-family:inherit;font-size:.84rem;letter-spacing:0;
  text-transform:none;color:var(--gold-light)}
.br-panel .au-req-btn .t{letter-spacing:0;text-transform:none;font-size:.84rem}
/* keep the three on one line each, so the row stays an even height */
.br-panel .br-role b{white-space:nowrap;font-size:.78rem}
@media (max-width:520px){ .br-panel .br-role b{white-space:normal;font-size:.74rem} }

/* ============ the signed-in side, in the plain face ============
   Cormorant stays on the public website, where it does its work. Behind the
   sign-in people are working rather than being courted, so everything there is
   Inter Tight. Two exceptions, on purpose: the sentence over the photograph,
   and the large figures, which read better with a little character. */
body.bridge,
body.bridge h1, body.bridge h2, body.bridge h3, body.bridge h4,
body.bridge .br-role b, body.bridge .br-step .num,
body.bridge .dl-item .t, body.bridge .dl-view .hd .t,
body.bridge .dl-read .hd .t, body.bridge .dl-read .bd h3,
body.bridge .ad-item .nm, body.bridge .mdl-head h3, body.bridge .mdl-card .t,
body.bridge .mdl-in .hd h3, body.bridge .ad-link h3, body.bridge .ad-own h3,
body.bridge .cm-block .hd h4, body.bridge .pf-head h3, body.bridge .need-head h3,
body.bridge .qual-top .k, body.bridge input, body.bridge select,
body.bridge textarea, body.bridge button{
  font-family:'Inter Tight','Jost',system-ui,sans-serif}

body.bridge h1, body.bridge h2, body.bridge h3, body.bridge h4{
  font-weight:500;letter-spacing:-.018em}

/* the numbers keep their old face: a big figure wants a little character */
body.bridge .cm .v, body.bridge .ad-stat .v, body.bridge .mdl-in .hd .n,
body.bridge .br-quote p{
  font-family:'Instrument Serif','Cormorant Garamond',serif}

/* ============ choosing, then filling in ============
   The row of little tabs was cramped and the form ran off the bottom of the
   screen. So the choice gets a screen of its own, with room to breathe, and
   the questions appear only once we know which ones apply to you. */
.br-panel .br-roles{display:grid;grid-template-columns:1fr;gap:10px;background:none;
  padding:0;border-radius:0;margin-bottom:22px}
.br-panel .br-role{flex:none;text-align:left;display:block;padding:16px 18px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);border-radius:12px}
.br-panel .br-role:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.24);
  transform:none}
.br-panel .br-role b{display:block;white-space:normal;font-size:1rem;font-weight:500;
  color:#fff;letter-spacing:0;line-height:1.3}
.br-panel .br-role span{display:block;font-size:.82rem;color:rgba(255,255,255,.45);
  margin-top:3px;line-height:1.45}
.br-panel .br-role.on{background:rgba(179,145,95,.14);border-color:var(--gold)}
.br-panel .br-role.on b{color:#fff}
.br-panel .br-role.on:after{display:none}
.au-iam{font-size:.92rem;color:rgba(255,255,255,.55);margin:0 0 12px}

.au-back{font-family:'Inter Tight','Jost',system-ui,sans-serif;font-size:.84rem;
  background:none;border:0;color:rgba(255,255,255,.5);cursor:pointer;padding:0;margin-bottom:14px;
  transition:color .2s}
.au-back:hover{color:var(--gold-light)}
.au-chosen{display:inline-block;font-size:.74rem;letter-spacing:.06em;color:var(--gold-light);
  background:rgba(179,145,95,.14);border:1px solid rgba(179,145,95,.4);border-radius:999px;
  padding:5px 13px;margin:0 0 20px}

/* ---------- the way back in, on every page ----------
   Somebody who already has an account should not have to remember which menu
   the program lives under. */
.nav-signin{color:var(--gold-light) !important;letter-spacing:.2em}
.nav-signin:before,.nav-signin:after{display:none !important}
.nav-signin:hover{color:var(--gold) !important}

/* ---------- the program, said plainly on the home page ---------- */
.portal-band{background:var(--navy);color:#fff}
.portal-band .eyebrow{color:var(--gold-light)}
.portal-band h2{color:#fff}
.portal-band .lead{color:rgba(255,255,255,.66);max-width:32em}
.pb-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
.pb-do{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.portal-band .btn{border-color:var(--gold-light);color:var(--gold-light)}
.portal-band .btn:hover{background:var(--gold-light);color:var(--navy)}
.portal-band .btn.solid{background:var(--gold);border-color:var(--gold);color:#141a10}
.portal-band .btn.solid:hover{background:var(--gold-light);color:#141a10}
.pb-peek{margin-top:18px;font-size:.86rem;color:rgba(255,255,255,.45)}
.pb-peek a{color:var(--gold-light)}
.pb-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.pb-list li{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.pb-list b{display:block;font-size:1.02rem;font-weight:500;color:#fff;margin-bottom:5px}
.pb-list span{display:block;font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.5)}
@media (max-width:860px){ .pb-grid{grid-template-columns:1fr} }
/* the line over the photograph was breaking in two on a wide screen */
@media (min-width:1000px){
  .cta-strip h2{white-space:nowrap;font-size:clamp(2rem,3.6vw,3.1rem)}
}

/* ---------- the way back in, on every page ----------
   Somebody who already has an account should not have to remember which menu
   the program lives under. */
.nav-signin{color:var(--gold-light) !important;letter-spacing:.2em}
.nav-signin:before,.nav-signin:after{display:none !important}
.nav-signin:hover{color:var(--gold) !important}

/* ---------- the program, said plainly on the home page ---------- */
.portal-band{background:var(--navy);color:#fff}
.portal-band .eyebrow{color:var(--gold-light)}
.portal-band h2{color:#fff}
.portal-band .lead{color:rgba(255,255,255,.66);max-width:32em}
.pb-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
.pb-do{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.portal-band .btn{border-color:var(--gold-light);color:var(--gold-light)}
.portal-band .btn:hover{background:var(--gold-light);color:var(--navy)}
.portal-band .btn.solid{background:var(--gold);border-color:var(--gold);color:#141a10}
.portal-band .btn.solid:hover{background:var(--gold-light);color:#141a10}
.pb-peek{margin-top:18px;font-size:.86rem;color:rgba(255,255,255,.45)}
.pb-peek a{color:var(--gold-light)}
.pb-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.pb-list li{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.pb-list b{display:block;font-size:1.02rem;font-weight:500;color:#fff;margin-bottom:5px}
.pb-list span{display:block;font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.5)}
@media (max-width:860px){ .pb-grid{grid-template-columns:1fr} }
/* the line over the photograph was breaking in two on a wide screen */
@media (min-width:1000px){
  .cta-strip h2{white-space:nowrap;font-size:clamp(2rem,3.6vw,3.1rem)}
}

/* ---------- filling in, on one screen ----------
   The second step should not run off the bottom either. Tighter spacing, the
   help texts a shade smaller, and the two consent lines closer together. */
@media (min-width:901px){
  .br-panel{padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(24px,3vw,40px)}
  .br-auth .br-card h1{font-size:clamp(1.5rem,2vw,1.8rem)}
  .br-auth .br-card p.sub{margin-bottom:18px;font-size:.88rem}
  .au-tabs{margin:16px 0 14px}
  .br-panel input,.br-panel select{padding:11px 14px;font-size:.92rem;margin-bottom:12px}
  .br-panel label{margin-bottom:5px;font-size:.74rem}
  .au-hint{font-size:.74rem;line-height:1.45;margin:-6px 0 12px}
  .br-panel .consent-box{margin:12px 0 14px}
  .br-panel .consent-box .consent{margin-bottom:8px}
  .br-panel .consent-box .consent span{font-size:.78rem;line-height:1.45}
  .br-panel .br-btn{padding:13px;font-size:.92rem}
  .au-chosen{margin-bottom:14px}
  .au-back{margin-bottom:10px}
  .br-auth .br-foot{margin-top:16px;font-size:.78rem}
  .au-req{margin-bottom:14px}
}
/* the mark and the title need air between them at every height */
.br-auth .br-card .logo{margin-bottom:22px}

/* ---------- signing in: room to breathe ----------
   Fitting everything on one screen turned the form into a stack of lines with
   no air. Space wins: the panel scrolls if it has to, but nothing is squeezed. */
@media (min-width:901px){
  .br-panel{padding:clamp(34px,4vw,58px) clamp(30px,4vw,62px)}
  .br-auth .br-card .logo{margin-bottom:26px}
  .br-auth .br-card h1{font-size:clamp(1.7rem,2.3vw,2.05rem);margin-bottom:0}
  .au-tabs{margin:22px 0 18px;padding:5px}
  .au-tab{padding:12px 10px;font-size:.84rem}
  .br-auth .br-card p.sub{margin-bottom:30px;font-size:.92rem;line-height:1.65}
  .au-iam{margin-bottom:14px}
  .br-panel .br-roles{gap:12px;margin-bottom:28px}
  .br-panel .br-role{padding:18px 20px}
  .br-panel label{margin-bottom:9px;font-size:.8rem}
  .br-panel input,.br-panel select{padding:14px 16px;margin-bottom:18px;font-size:.95rem}
  .au-pair{gap:0 22px}
  .au-hint{margin:-10px 0 18px;font-size:.79rem;line-height:1.55}
  .br-panel .consent-box{margin:6px 0 20px}
  .br-panel .consent-box .consent{margin-bottom:14px}
  .br-panel .consent-box .consent span{font-size:.82rem;line-height:1.6}
  .br-panel .br-btn{padding:17px;font-size:.98rem}
  .br-panel .au-switch{margin-top:20px}
  .au-back{margin-bottom:14px}
  .au-chosen{margin-bottom:24px;padding:6px 14px}
  .br-auth .br-foot{margin-top:20px}
  .au-req{margin-bottom:22px}
}

/* A password field carries extra letter-spacing so the dots read as dots. The
   placeholder is ordinary words, and the spacing pushed it past the edge. */
.br-panel input[type=password]::placeholder{letter-spacing:normal;font-family:inherit}

/* The signing-in card used to show a code in a typewriter face. It shows an
   email address now, which reads better in the ordinary face. */
.br-code.mail b{font-family:inherit;font-size:.92rem;letter-spacing:.01em;
  word-break:break-all;text-transform:none}
.br-code .s button{font:inherit;font-size:.74rem;color:var(--gold-light);background:none;
  border:0;padding:0;margin-left:2px;cursor:pointer;border-bottom:1px solid rgba(207,179,136,.4)}
.br-code .s button:hover{color:#fff;border-bottom-color:#fff}

/* The role picker is now the tallest of the three screens. On a shorter
   laptop it gives back a little padding rather than a scrollbar. Only the
   picker: the two form screens have room to spare. */
@media (min-width:901px) and (max-height:895px){
  #au-step1 .br-panel .br-role,
  .br-panel #au-pick .br-role{padding:14px 20px}
  .br-panel #au-pick .br-roles{gap:9px;margin-bottom:22px}
  .br-panel #au-pick .au-iam{margin-bottom:11px}
  .br-panel #au-pick .au-req{margin-bottom:16px}
}


/* ====================================================================
   THE 2026 LOOK -- glass on a lit background
   --------------------------------------------------------------------
   Everything below rewrites how the portal and the admin feel without
   touching a single line of their markup. Three ideas:

     1  the page is lit, not flat. A navy pool top left, a gold one top
        right, a soft one at the foot. A grain over the top so a large
        screen does not band.
     2  panels are made of glass. They let the light through, they lift
        when you point at them, and a hairline of light runs along their
        top edge the way it does on real glass.
     3  nothing snaps. Everything moves on the same curve, in the same
        third of a second, so the whole thing feels like one object.

   The old flat panels used two variables. Making those two translucent
   turns every panel in the portal to glass at once -- the tiles, the
   chat, the tables, the admin -- rather than me listing forty classes
   and forgetting five.
   ==================================================================== */

body.bridge, body.tools.bridge{
  --app-2:rgba(255,255,255,.055);
  --app-3:rgba(255,255,255,.085);
  --hair:rgba(255,255,255,.12);
  --hair2:rgba(255,255,255,.2);
  --r:20px;                 /* one radius for the whole application */
  --t:cubic-bezier(.22,.9,.3,1);
}

/* ---------- the lit page ---------- */
.br-shell{position:relative;background:#070f15;overflow-x:clip}
.br-shell:before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 62% at 2% -10%,rgba(46,81,102,1),transparent 62%),
    radial-gradient(42% 44% at 99% -4%,rgba(179,145,95,.42),transparent 62%),
    radial-gradient(70% 44% at 78% 46%,rgba(35,61,77,.55),transparent 66%),
    radial-gradient(90% 46% at 34% 114%,rgba(35,61,77,.75),transparent 68%)}
.br-shell:after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.035'/></svg>")}
.br-shell > *{position:relative;z-index:1}

/* ---------- the frame ---------- */
.br-nav{background:linear-gradient(to right,rgba(4,10,14,.55),rgba(4,10,14,.16));
  border-right:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px)}
.br-nav button{border-radius:12px;letter-spacing:.13em;font-size:.71rem;
  transition:color .3s var(--t),background .3s var(--t),padding-left .3s var(--t)}
.br-nav button:hover{background:rgba(255,255,255,.06);padding-left:20px}
.br-nav button.on{background:rgba(255,255,255,.09)}
.br-nav button.on:before{border-radius:0 2px 2px 0}
.br-top{background:rgba(6,13,18,.55);backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08)}
.br-user button{border-radius:999px;padding:10px 20px;
  transition:border-color .3s var(--t),color .3s var(--t),background .3s var(--t)}
.br-user button:hover{background:rgba(179,145,95,.14)}
.br-demo{background:rgba(179,145,95,.12);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.br-body{background:none}

/* ---------- glass ----------
   One rule for every panel in the portal. The hairline along the top is
   what makes a flat rectangle read as a pane of glass rather than a
   grey box: real glass catches light on its edge. */
.br-next,.br-tile,.chat,.dl-read,.faq-browse,.ad-stat,.ad-list,.ad-detail,
.mdl-card,.tr,.ag-read,.pf,.need,.cm > div,.ad-facts > div,.simres,
body.bridge .jcards article,body.bridge .form-card,.br-code,.lib-card{
  position:relative;border-radius:var(--r);
  background:var(--app-2);border:1px solid var(--hair);
  backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);
  box-shadow:0 22px 60px -34px rgba(0,0,0,.9);
  transition:transform .34s var(--t),background .34s var(--t),
             border-color .34s var(--t),box-shadow .34s var(--t)}
.br-next:before,.br-tile:before,.mdl-card:before,.ad-stat:before,.tr:before,
.lib-card:before{content:'';position:absolute;inset:0 0 auto 0;height:1px;pointer-events:none;
  z-index:3;opacity:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)}

/* things you can click lift; things you only read do not */
.br-tile:hover,.mdl-card:hover,.lib-card:hover,.ad-list li:hover{
  transform:translateY(-5px);background:rgba(255,255,255,.095);
  border-color:rgba(207,179,136,.45);box-shadow:0 30px 70px -34px rgba(0,0,0,.95)}
.br-tile:hover:before{opacity:1}

/* ---------- everything rounder ---------- */
body.bridge input,body.bridge select,body.bridge textarea{border-radius:14px}
body.bridge .br-btn,body.bridge .btn{border-radius:999px}
body.bridge .simopt,body.bridge .chip{border-radius:999px}
.ad-list li,.ad-row,.sig-row{border-radius:14px}

/* ---------- one curve for everything ---------- */
body.bridge button,body.bridge a,body.bridge input,body.bridge select{
  transition-timing-function:cubic-bezier(.22,.9,.3,1)}
.br-view{animation:brIn .5s cubic-bezier(.22,.9,.3,1)}
@keyframes brIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Content that slides in as it comes into view.
   Note the guard: the hiding only applies once the script has said it is
   ready to bring things back. Without that guard, any failure in the page
   leaves the content hidden for good -- which is exactly what happened the
   first time, and is not a trade worth making for an animation. */
body.bridge.rise-on .rise{opacity:0;transform:translateY(18px);
  transition:opacity .55s var(--t),transform .55s var(--t)}
body.bridge.rise-on .rise.in{opacity:1;transform:none}

/* ---------- where glass would cost too much ----------
   An older laptop or a phone can stutter on a page full of blur. The
   browser tells us whether it can do it; where it cannot, the panels
   become a solid tint that looks near enough and runs at full speed. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .br-next,.br-tile,.chat,.dl-read,.faq-browse,.ad-stat,.ad-list,.ad-detail,
  .mdl-card,.tr,.ag-read,.pf,.need,.cm > div,.ad-facts > div,.simres,
  body.bridge .jcards article,body.bridge .form-card,.br-code,.lib-card,
  .br-nav,.br-top,.br-demo{
    background:#0f1a22;backdrop-filter:none;-webkit-backdrop-filter:none}
  .br-shell:before{opacity:.55}
}
@media (prefers-reduced-motion:reduce){
  body.bridge *,body.bridge *:before,body.bridge *:after{
    animation-duration:.01ms !important;transition-duration:.01ms !important}
  body.bridge .rise{opacity:1;transform:none}
}

/* ---------- the bento on the home screen ----------
   Four columns. The photograph takes two by two, so it reads as the
   subject of the page; the figure and the progress sit beside it; the
   three doors run along the foot. On a narrow screen it folds to two
   columns and then to one, in that order, without anything reflowing
   into a shape nobody designed. */
.bn-h1{font-size:clamp(2rem,3.6vw,2.95rem);font-weight:300;letter-spacing:-.03em;
  line-height:1.04;margin-bottom:0}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:26px}
.bn{position:relative;border-radius:var(--r);overflow:hidden;padding:24px;
  background:var(--app-2);border:1px solid var(--hair);
  backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);
  box-shadow:0 22px 60px -34px rgba(0,0,0,.9);
  transition:transform .34s var(--t),background .34s var(--t),
             border-color .34s var(--t),box-shadow .34s var(--t)}
.bn:before{content:'';position:absolute;inset:0 0 auto 0;height:1px;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)}

/* the photograph. No glass over it: blur on a photograph only muddies it */
.bn-hero{grid-column:span 2;grid-row:span 2;padding:0;margin:0;
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;min-height:330px}
.bn-hero:before{display:none}
.bn-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--t)}
.bn-hero:hover img{transform:scale(1.045)}
.bn-hero figcaption{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:28px;
  background:linear-gradient(to top,rgba(5,11,15,.9) 10%,rgba(5,11,15,.12) 62%,transparent)}
.bn-hero h2{font-family:'Instrument Serif',serif;font-size:1.75rem;font-style:italic;
  font-weight:400;line-height:1.16;margin-bottom:8px;color:#fff}
.bn-hero p{font-size:.85rem;color:rgba(255,255,255,.68);line-height:1.6;max-width:44ch;
  font-weight:300}

/* the one figure */
.bn .k{display:block;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:12px}
.bn-fig .v{display:block;font-size:2.9rem;font-weight:200;line-height:1;
  color:var(--gold-light);letter-spacing:-.035em}
.bn-fig .s{display:block;font-size:.79rem;color:rgba(255,255,255,.52);line-height:1.55;
  margin-top:11px;font-weight:300}

/* where you are, as a living list */
.br-next .k,.bn .k{color:rgba(255,255,255,.45)}
.bn .br-step{border-bottom:none;padding:7px 0;gap:12px;align-items:center}
.bn .br-step .num{width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  display:grid;place-items:center;font-family:'Inter Tight',system-ui,sans-serif;font-size:.62rem;
  color:rgba(255,255,255,.5);flex:none;transition:.3s var(--t)}
.bn .br-step.done .num{background:var(--gold);border-color:var(--gold);color:#0b141b}
.bn .br-step.now .num{border-color:var(--gold);color:var(--gold);
  box-shadow:0 0 0 4px rgba(179,145,95,.16)}
.bn .br-step .txt{font-size:.87rem;font-weight:300}

/* the three doors. The first one fills the half beside the photograph so
   the grid has no hole in it; the rest run along the foot. */
.bn-slot{display:contents}
.bn-act.lead{grid-column:span 2}
.bn-acts{grid-column:1/-1;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px}
.bn-act{text-align:left;font-family:inherit;color:inherit;cursor:pointer;
  display:flex;flex-direction:column;min-height:150px;padding:24px}
.bn-act .t{display:block;font-size:1.06rem;font-weight:300;letter-spacing:-.01em;color:#fff;
  margin-bottom:7px}
.bn-act .p{display:block;font-size:.79rem;color:rgba(255,255,255,.5);line-height:1.55;
  font-weight:300}
.bn-act .arw{align-self:flex-end;margin-top:auto;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(255,255,255,.24);display:grid;place-items:center;font-size:.8rem;
  transition:.3s var(--t)}
.bn-act:hover{transform:translateY(-5px);background:rgba(255,255,255,.095);
  border-color:rgba(207,179,136,.45);box-shadow:0 30px 70px -34px rgba(0,0,0,.95)}
.bn-act:hover .arw{background:var(--gold);border-color:var(--gold);color:#0b141b;
  transform:translateX(3px)}
.bn .k i.live{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);
  margin-right:8px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(179,145,95,.55);animation:bnRing 2.6s infinite}
@keyframes bnRing{0%{box-shadow:0 0 0 0 rgba(179,145,95,.5)}
                  70%{box-shadow:0 0 0 8px rgba(179,145,95,0)}
                  100%{box-shadow:0 0 0 0 rgba(179,145,95,0)}}

/* three photographs, as a way in rather than decoration */
.bn-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:15px}
.bn-ph{position:relative;border-radius:var(--r);overflow:hidden;height:210px;margin:0;padding:0;
  border:1px solid rgba(255,255,255,.1);background:none;font-family:inherit;cursor:pointer;
  display:block;width:100%;text-align:left;
  transition:transform .34s var(--t),border-color .34s var(--t),box-shadow .34s var(--t)}
.bn-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--t)}
.bn-ph:hover{transform:translateY(-5px);border-color:rgba(207,179,136,.45);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95)}
.bn-ph:hover img{transform:scale(1.06)}
.bn-ph .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px;
  display:flex;flex-direction:column;gap:5px}
.bn-ph .cap b{font-size:1rem;font-weight:400;color:#fff;line-height:1.3;
  text-shadow:0 1px 12px rgba(0,0,0,.55)}
.bn-ph .cap .s{font-size:.79rem;font-weight:300;color:rgba(255,255,255,.68);line-height:1.5;
  text-shadow:0 1px 10px rgba(0,0,0,.5)}
.bn-ph .cap .go{margin-top:6px;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-light);display:flex;align-items:center;gap:7px}
.bn-ph .cap .go i{font-style:normal;font-size:.85rem;letter-spacing:0;
  transition:transform .3s var(--t)}
.bn-ph:hover .cap .go i{transform:translateX(4px)}
.bn-ph:after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,11,15,.94) 0%,rgba(5,11,15,.72) 40%,
             rgba(5,11,15,.2) 72%,transparent)}

.bn-sign{margin-top:15px;padding:24px 26px}
.bn-sign.br-code{border-top:1px solid var(--hair)}

@media (max-width:1080px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bn-hero{grid-column:span 2;grid-row:span 1;min-height:260px}
  .bn-acts{grid-template-columns:1fr}
  .bn-strip{grid-template-columns:1fr}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr}
  .bn-hero{grid-column:span 1}
  .bn-acts{grid-column:span 1}
}

/* ---------- the FAQ, searched rather than scrolled ---------- */
.fq-find{position:relative;margin:26px 0 0}
.fq-find input{width:100%;background:var(--app-2);border:1px solid var(--hair);
  border-radius:18px;padding:19px 54px 19px 56px;color:#fff;font-family:inherit;
  font-size:1.02rem;font-weight:300;outline:none;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  transition:border-color .3s var(--t),background .3s var(--t),box-shadow .3s var(--t)}
.fq-find input::placeholder{color:rgba(255,255,255,.3)}
.fq-find input:focus{border-color:rgba(207,179,136,.6);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 4px rgba(179,145,95,.1)}
.fq-find input::-webkit-search-cancel-button{display:none}
.fq-find .ic{position:absolute;left:22px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:rgba(255,255,255,.4);pointer-events:none;
  transition:color .3s var(--t)}
.fq-find:has(input:focus) .ic{color:var(--gold-light)}
.fq-find #fq-clear{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.09);
  border:0;color:rgba(255,255,255,.6);font-size:1.05rem;line-height:1;cursor:pointer;
  display:none;transition:.25s var(--t)}
.fq-find #fq-clear:hover{background:rgba(255,255,255,.18);color:#fff}

.fq-chips{display:flex;gap:8px;margin:16px 0 6px;overflow-x:auto;padding-bottom:6px;
  scrollbar-width:none}
.fq-chips::-webkit-scrollbar{display:none}
.fq-chip{flex:none;font-family:inherit;font-size:.78rem;padding:9px 17px;border-radius:999px;
  background:var(--app-2);border:1px solid var(--hair);color:rgba(255,255,255,.62);
  cursor:pointer;white-space:nowrap;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:.26s var(--t)}
.fq-chip:hover{color:#fff;border-color:rgba(255,255,255,.36)}
.fq-chip.on{background:var(--gold);border-color:var(--gold);color:#0b141b;font-weight:500}

.fq-count{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.32);margin:14px 0 12px}
.fq-list{display:grid;gap:9px}
.fq-item{border-radius:18px;overflow:hidden;background:var(--app-2);
  border:1px solid var(--hair);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  transition:border-color .3s var(--t),background .3s var(--t)}
.fq-item:hover{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.075)}
.fq-item.open{border-color:rgba(207,179,136,.4);background:rgba(255,255,255,.08)}
.fq-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  text-align:left;background:none;border:0;color:#fff;font-family:inherit;font-size:.97rem;
  font-weight:300;padding:18px 24px;cursor:pointer}
.fq-head .pm{flex:none;color:var(--gold);font-size:1.2rem;line-height:1;
  transition:transform .32s var(--t)}
.fq-item.open .fq-head .pm{transform:rotate(45deg)}
.fq-ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--t)}
.fq-item.open .fq-ans{grid-template-rows:1fr}
.fq-ans .in{overflow:hidden}
.fq-ans p{padding:0 24px 4px;font-size:.89rem;line-height:1.78;
  color:rgba(255,255,255,.62);font-weight:300;max-width:78ch}
.fq-more{display:flex;align-items:center;gap:16px;padding:14px 24px 18px;flex-wrap:wrap}
.fq-more .sec{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(179,145,95,.35);border-radius:999px;padding:5px 12px}
.fq-chat{background:none;border:0;color:rgba(255,255,255,.5);font-family:inherit;
  font-size:.8rem;cursor:pointer;padding:0;transition:.26s var(--t)}
.fq-chat:hover{color:var(--gold-light)}

.fq-none{text-align:center;padding:54px 24px;border-radius:var(--r);
  background:var(--app-2);border:1px dashed var(--hair)}
.fq-none b{display:block;color:#fff;font-size:1.05rem;font-weight:400;margin-bottom:8px}
.fq-none p{max-width:44ch;margin:0 auto 20px;font-size:.87rem;line-height:1.7;font-weight:300}

/* ---------- the library, as a shelf ---------- */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px;
  margin-top:18px}
.lib-card{display:flex;flex-direction:column;text-align:left;font-family:inherit;color:inherit;
  cursor:pointer;padding:0;overflow:hidden;border-radius:var(--r)}
.lib-card .cv{position:relative;display:block;height:146px;overflow:hidden;flex:none;
  background:rgba(255,255,255,.04)}
.lib-card .cv img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--t)}
.lib-card:hover .cv img{transform:scale(1.07)}
.lib-card .cv:after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,11,15,.9),rgba(5,11,15,.05) 62%)}
.lib-card .cat{position:absolute;left:16px;bottom:14px;z-index:2;font-size:.56rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);
  background:rgba(5,11,15,.6);border:1px solid rgba(207,179,136,.32);border-radius:999px;
  padding:5px 12px;backdrop-filter:blur(10px)}
.lib-card .bd{display:flex;flex-direction:column;flex:1;padding:20px 22px 20px;gap:7px}
.lib-card .t{display:block;font-size:1.02rem;font-weight:400;color:#fff;line-height:1.32;
  letter-spacing:-.01em}
.lib-card .d{display:block;font-size:.81rem;color:rgba(255,255,255,.5);line-height:1.6;
  font-weight:300}
.lib-card .m{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.lib-card .m .pdf{font-style:normal;font-size:.56rem;letter-spacing:.16em;color:var(--gold);
  border:1px solid rgba(179,145,95,.4);border-radius:4px;padding:3px 7px}
.lib-card .m .go{margin-left:auto;font-size:.95rem;letter-spacing:0;color:rgba(255,255,255,.4);
  transition:.3s var(--t)}
.lib-card:hover .m .go{color:var(--gold);transform:translateX(4px)}
.lib-card.soon{cursor:default;opacity:.62}
.lib-card.soon .cv{height:88px;background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px)}
.lib-card.soon:hover{transform:none;border-color:var(--hair);background:var(--app-2)}

.dl-back{background:none;border:0;color:rgba(255,255,255,.55);font-family:inherit;
  font-size:.84rem;cursor:pointer;padding:0;margin-bottom:18px;transition:.26s var(--t)}
.dl-back:hover{color:var(--gold-light);transform:translateX(-3px)}
#dl-room .dl-read{max-height:none}
#dl-room .dl-read .bd{max-height:none;overflow:visible;padding:30px 38px 44px}
#dl-room .dl-read .hd{padding:26px 38px}
@media (max-width:760px){
  #dl-room .dl-read .bd{padding:22px 22px 34px}
  #dl-room .dl-read .hd{padding:20px 22px}
}

/* ---------- the admin, in the same material ----------
   The admin was built as a grid of hairlines: a list and a panel welded
   together by a one-pixel seam. That reads as a database. Splitting them
   into two panes of glass with a gap between them reads as a workspace,
   and it is the same change everything else in the portal has had. */
.ad-auth:before{opacity:.26;animation:kbSlow 34s ease-in-out infinite alternate}
.ad-stats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:15px;margin-bottom:38px}
.ad-stat{padding:24px;text-align:left;cursor:pointer}
.ad-stat .k{color:rgba(255,255,255,.45);letter-spacing:.2em;font-size:.58rem}
.ad-stat .v{font-family:'Inter Tight',system-ui,sans-serif;font-weight:200;font-size:2.6rem;
  letter-spacing:-.035em;color:var(--gold-light)}
.ad-stat .s{font-size:.78rem;color:rgba(255,255,255,.5);margin-top:9px;line-height:1.5}

.ad-sug{border-radius:var(--r);border:1px solid rgba(207,179,136,.4);
  background:rgba(179,145,95,.1);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}

.ad-bar{gap:10px;margin-bottom:22px}
.ad-bar select,.ad-bar input{background:var(--app-2);border:1px solid var(--hair);border-radius:14px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:border-color .3s var(--t),background .3s var(--t)}
.ad-bar select:focus,.ad-bar input:focus{border-color:rgba(207,179,136,.6);
  background:rgba(255,255,255,.1);outline:none}
.ad-bar button{border-radius:999px;padding:10px 18px;background:var(--app-2);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:.26s var(--t)}
.ad-bar button:hover{background:rgba(179,145,95,.16);border-color:rgba(207,179,136,.5)}

/* two panes with air between them, not a welded table */
.ad-grid{grid-template-columns:340px 1fr;gap:15px;background:none;border:0}
.ad-list,.ad-detail{border-radius:var(--r);max-height:76vh}
.ad-list{padding:8px}
.ad-item{border-bottom:0;border-radius:14px;padding:15px 18px;margin-bottom:2px;
  transition:background .26s var(--t),padding-left .26s var(--t),box-shadow .26s var(--t)}
.ad-item:hover{background:rgba(255,255,255,.08);padding-left:22px}
.ad-item.on{background:rgba(179,145,95,.18);box-shadow:inset 3px 0 0 var(--gold)}
.ad-item .nm{font-family:'Inter Tight',system-ui,sans-serif;font-size:1rem;font-weight:400}
.ad-detail{padding:30px 34px}
.ad-facts{gap:12px;background:none;border-radius:0}
.ad-facts > div{border-radius:14px;padding:15px 18px;border:1px solid var(--hair)}

.ad-feed{border-top:0}
.ad-ev{border-radius:14px;padding:14px 18px;margin-bottom:6px;border-bottom:0;
  background:var(--app-2);border:1px solid transparent;transition:.26s var(--t)}
.ad-ev:hover{border-color:var(--hair);background:rgba(255,255,255,.075)}

.ad-link{border-radius:var(--r)}
.ad-danger{border-radius:999px}
.ad-actions button,.ad-actions .btn{border-radius:999px}

@media (max-width:1000px){
  .ad-grid{grid-template-columns:1fr}
  .ad-list{max-height:44vh}
}

/* the commission cards as separate panes rather than one split box */
.cm{gap:15px;background:none;border:0;border-radius:0}
.cm > div{border-radius:var(--r);padding:24px 26px}
.cm .v{font-family:'Inter Tight',system-ui,sans-serif;font-weight:200;font-size:2.5rem;
  letter-spacing:-.035em;color:var(--gold-light);margin-bottom:10px}
.cm.three .v{font-size:1.35rem;font-weight:300;letter-spacing:-.01em;color:#fff}
.cm-note{border-left:0;padding:20px 24px;border-radius:var(--r);
  background:var(--app-2);border:1px solid var(--hair);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);line-height:1.75}
.cm-block .hd{margin-bottom:14px}

/* ---------- on a phone ----------
   The wide tile that fills the gap beside the photograph has no gap to
   fill once the grid is a single column, and left as it was it forced a
   phantom second column. */
@media (max-width:640px){
  .bn-act.lead{grid-column:span 1}
  .bn-acts{grid-column:span 1;grid-template-columns:1fr}
  .bn-hero{min-height:230px}
  .bn-hero h2{font-size:1.4rem}
  .bn,.bn-act{padding:20px}
  .bn-fig .v{font-size:2.4rem}
  .lib-grid{grid-template-columns:1fr}
  .fq-find input{padding:16px 48px 16px 50px;font-size:.95rem}
  .fq-head{padding:16px 18px;font-size:.92rem}
  .fq-ans p{padding:0 18px 4px}
  .fq-more{padding:12px 18px 16px}
}

/* The caption sits on top of a photograph that can be bright water. A veil
   that only darkens the last third leaves the text unreadable, so it runs
   the whole height, heaviest where the words are. */
.bn-hero figcaption{
  background:linear-gradient(to top,
    rgba(5,11,15,.94) 0%,rgba(5,11,15,.86) 30%,rgba(5,11,15,.5) 62%,rgba(5,11,15,.12) 100%)}
.bn-hero h2,.bn-hero p{text-shadow:0 1px 14px rgba(0,0,0,.5)}
.bn-ph:after{background:linear-gradient(to top,
  rgba(5,11,15,.9),rgba(5,11,15,.35) 55%,rgba(5,11,15,.05))}
.lib-card .cv:after{background:linear-gradient(to top,
  rgba(5,11,15,.92),rgba(5,11,15,.3) 62%,rgba(5,11,15,.02))}

/* the strapline beside the logo has nowhere to go on a narrow screen */
@media (max-width:760px){
  .br-top .brand span{display:none}
  .br-top .in{height:64px;padding:0 18px}
  .br-user .who{display:none}
}

/* the tile is now something you click, and the rate sits at its foot */
.bn-fig{text-align:left;font-family:inherit;color:inherit;cursor:pointer;
  display:flex;flex-direction:column}
.bn-fig .foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;
  border-top:1px solid var(--hair);font-size:.76rem;font-weight:300;
  color:rgba(255,255,255,.45);line-height:1.5}
.bn-fig .foot b{color:var(--gold-light);font-weight:500}
.bn-fig .foot .go{margin-left:auto;font-size:.9rem;color:rgba(255,255,255,.35);
  transition:.3s var(--t)}
.bn-fig:hover{transform:translateY(-5px);background:rgba(255,255,255,.095);
  border-color:rgba(207,179,136,.45);box-shadow:0 30px 70px -34px rgba(0,0,0,.95)}
.bn-fig:hover .foot .go{color:var(--gold);transform:translateX(4px)}

/* an empty dashboard that explains itself */
.ad-blank{border-radius:var(--r);padding:30px 34px;margin-bottom:26px;
  background:rgba(179,145,95,.09);border:1px solid rgba(207,179,136,.34);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.ad-blank b{color:#fff;font-weight:400}
.ad-blank > b{display:block;font-size:1.2rem;margin-bottom:8px}
.ad-blank p{font-size:.88rem;line-height:1.75;font-weight:300;max-width:74ch}
.ad-blank ol{margin:16px 0 4px;padding-left:20px;display:grid;gap:11px}
.ad-blank li{font-size:.88rem;line-height:1.7;font-weight:300;color:var(--dim);
  max-width:74ch}
.ad-blank li::marker{color:var(--gold)}
.ad-blank i{font-style:normal;color:var(--gold-light);
  background:rgba(255,255,255,.07);border-radius:5px;padding:1px 7px;font-size:.94em}
.ad-blank .sm{margin-top:16px;font-size:.8rem;color:rgba(255,255,255,.4)}

/* On a wide screen the old 1180px column left half the desk empty. The
   bento has more to show, so it is allowed more room. */
@media (min-width:1700px){
  .br-wrap{max-width:1420px}
  .bn-hero{min-height:380px}
  .lib-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}

/* ---------- the assistant, made solid again ----------
   Making every panel translucent was right for the tiles, which sit on a
   background of their own. It was wrong for the chat, which floats over
   whatever page you happen to be on: two columns of text fighting for the
   same pixels. A panel you read words in has to be opaque. */
.wg-panel,.chat{
  background:#101c25;
  background:
    linear-gradient(rgba(255,255,255,.045),rgba(255,255,255,.045)),
    #0d1720;
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  backdrop-filter:blur(30px) saturate(140%);-webkit-backdrop-filter:blur(30px) saturate(140%);
  box-shadow:0 34px 80px -26px rgba(0,0,0,.85)}
.wg-head,.chat-head{background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.12)}
.wg-in,.chat-in{background:rgba(0,0,0,.28);
  border-top:1px solid rgba(255,255,255,.12)}

/* the bubbles need to be told apart from the panel behind them */
.bub{max-width:82%}
.bub.bot{background:rgba(255,255,255,.11);color:#eef3f6;
  border:1px solid rgba(255,255,255,.08)}
.bub.me{background:linear-gradient(135deg,var(--gold),#a07f4f);color:#0b141b;
  border:1px solid rgba(179,145,95,.5)}
.typing{background:rgba(255,255,255,.11)}

/* the suggestions under a reply */
.wg-panel .chip,.chat .chip{background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);color:#dfe7ec}
.wg-panel .chip:hover,.chat .chip:hover{background:rgba(179,145,95,.2);
  border-color:var(--gold);color:#fff}
.wg-in input,.chat-in input{background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);color:#fff}
.wg-in input::placeholder,.chat-in input::placeholder{color:rgba(255,255,255,.42)}

/* and the same for the two message threads, which had the same problem */
.msg-log,.br-thread{background:none}

/* Two of the three photographs are bright skies, and white text on a bright
   sky is a guess rather than a read. A little more veil, and the words win. */
.bn-ph:after{background:
  linear-gradient(to top,rgba(5,11,15,.96) 0%,rgba(5,11,15,.82) 42%,
                  rgba(5,11,15,.34) 74%,rgba(5,11,15,.12) 100%)}

/* the small print that keeps a headline honest */
.bn-hero .note{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.73rem;line-height:1.55;color:rgba(255,255,255,.5);font-weight:300;max-width:48ch}

/* ---------- the assistant offering something to read ----------
   Not another bubble of text: a card, so the eye knows at once that this is
   an object you can open rather than a sentence you have to finish. */
.bub.read{max-width:88%;background:rgba(179,145,95,.14);
  border:1px solid rgba(207,179,136,.42);padding:16px 18px;display:flex;
  flex-direction:column;gap:5px;border-bottom-left-radius:4px}
.bub.read .k{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-light)}
.bub.read b{font-size:.98rem;font-weight:400;color:#fff;line-height:1.35}
.bub.read .d{font-size:.8rem;color:rgba(255,255,255,.6);line-height:1.55}
.bub.read .go{align-self:flex-start;margin-top:8px;font-family:inherit;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;padding:9px 16px;border-radius:999px;
  background:var(--gold);border:0;color:#0b141b;cursor:pointer;
  transition:transform .26s var(--t),background .26s var(--t)}
.bub.read .go:hover{background:var(--gold-light);transform:translateX(3px)}

/* ---------- the three simulation panels ---------- */
.sim-tabs{margin:0 0 26px}
.rg-say{font-size:.82rem;color:var(--gold-light);margin-top:8px;font-weight:300}
body.bridge input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:3px;
  background:rgba(255,255,255,.14);border-radius:999px;outline:none;margin-top:6px}
body.bridge input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--gold);cursor:pointer;border:0;
  box-shadow:0 0 0 5px rgba(179,145,95,.16);transition:box-shadow .25s var(--t)}
body.bridge input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 8px rgba(179,145,95,.24)}
body.bridge input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
  background:var(--gold);cursor:pointer;border:0}

/* your weeks on board */
.us-say{font-size:.85rem;color:var(--dim);font-weight:300;line-height:1.7;margin:22px 0 18px;
  max-width:52ch}
/* One line per season. The season names itself in the heading; the line
   underneath is the choice: how you book it, what that costs, how much of it
   you want. Three things, left to right, and nothing else on the line. */
.us-season{margin-bottom:20px}
.us-hd{display:flex;flex-direction:column;margin-bottom:8px}
.us-hd b{font-size:.94rem;font-weight:400;color:#fff}
.us-hd span{font-size:.76rem;color:rgba(255,255,255,.45);font-weight:300}
.us-line{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;
  padding:11px 15px;border-radius:14px;background:var(--app-2);border:1px solid var(--hair);
  margin-bottom:6px;transition:.26s var(--t)}
.us-line.on{border-color:rgba(207,179,136,.45);background:rgba(179,145,95,.1)}
.us-line .p{font-size:.8rem;color:var(--gold-light);white-space:nowrap;text-align:right}
.us-line .p i{font-style:normal;color:rgba(255,255,255,.4);font-size:.72rem;margin-left:.15em}
.us-line .n{display:flex;align-items:center;gap:4px}
.us-line .n button{width:26px;height:26px;border-radius:50%;border:1px solid var(--hair2);
  background:none;color:#fff;font-size:.9rem;line-height:1;cursor:pointer;transition:.22s var(--t)}
.us-line .n button:hover{background:var(--gold);border-color:var(--gold);color:#0b141b}
.us-line .n b{min-width:22px;text-align:center;font-weight:400;font-size:.92rem}
.us-line .n i.u{font-style:normal;font-size:.72rem;color:rgba(255,255,255,.4);
  margin-left:.35em;min-width:2.6em}

/* ----------------------------------------------------------------
   Every way of booking the season, priced, all at once.
   A switch hides two thirds of the answer behind a press. These do not:
   long term at 17,430 a week sits beside gap filling at 1,601 a day, and
   the whole argument for flexibility is made by the two numbers being
   next to each other. The unit rides along with the price, so the rule
   -- long term by the week, flexible and gap filling by the day -- needs
   no label of its own.
   ---------------------------------------------------------------- */
.us-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.us-opts.two{grid-template-columns:repeat(2,1fr)}
.us-opt{display:flex;flex-direction:column;border-radius:14px;background:var(--app-2);
  border:1px solid var(--hair);transition:.26s var(--t);overflow:hidden}
.us-opt.on{border-color:rgba(207,179,136,.5);background:rgba(179,145,95,.09)}
.us-opt.has{border-color:var(--gold);background:rgba(179,145,95,.15)}
.us-opt .pick{flex:1;display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;
  padding:13px 14px 12px}
.us-opt .nm{font-size:.86rem;font-weight:400;color:rgba(255,255,255,.72);transition:.22s var(--t)}
.us-opt.on .nm{color:#fff}
/* the unit sits under the number rather than beside it: in a third of a
   column "17,430 a week" runs off the edge, and the unit is too important
   to be the part that gets cut */
.us-opt .pr{font-size:.94rem;color:var(--gold-light);white-space:nowrap;line-height:1.3}
.us-opt .pr i{display:block;font-style:normal;font-size:.7rem;letter-spacing:.06em;
  color:rgba(255,255,255,.45);margin:1px 0 0}
.us-opt .ex{font-size:.72rem;line-height:1.45;color:rgba(255,255,255,.38);font-weight:300}
.us-opt .n{display:flex;align-items:center;gap:5px;padding:0 14px 13px}
.us-opt .n button{width:30px;height:30px;border-radius:50%;border:1px solid var(--hair2);
  background:none;color:#fff;font-size:.95rem;line-height:1;cursor:pointer;transition:.22s var(--t)}
.us-opt .n button:hover{background:var(--gold);border-color:var(--gold);color:#0b141b}
.us-opt .n b{min-width:24px;text-align:center;font-weight:400;font-size:1rem}
.us-opt .n i.u{font-style:normal;font-size:.72rem;color:rgba(255,255,255,.42);margin-left:.2em}

.us-also{grid-column:1/-1;font-size:.72rem;color:rgba(255,255,255,.35);font-weight:300;
  margin-bottom:-4px}
.us-add{background:none;border:0;border-bottom:1px solid rgba(207,179,136,.35);padding:0;
  margin:2px 0 0 4px;color:rgba(207,179,136,.8);font:inherit;font-size:.76rem;
  font-weight:300;cursor:pointer;transition:.22s var(--t)}
.us-add:hover{color:#fff;border-bottom-color:#fff}
.us-drop{background:none;border:0;color:rgba(255,255,255,.3);font-size:1rem;line-height:1;
  cursor:pointer;padding:0 0 0 4px;transition:.22s var(--t)}
.us-drop:hover{color:#e08b74}
.us-meter{margin:6px 0 20px}
.us-track{height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.us-fill{height:100%;background:var(--gold);border-radius:999px;
  transition:width .45s var(--t),background .3s var(--t)}
.us-fill.over{background:#e08b74}
.us-nums{display:flex;justify-content:space-between;margin-top:9px;font-size:.78rem;
  color:rgba(255,255,255,.45)}
.us-nums b{color:#fff;font-weight:400}
.us-grid{grid-template-columns:1fr 1fr}
.us-over{font-size:.84rem;line-height:1.7;font-weight:300;max-height:0;overflow:hidden;
  transition:max-height .4s var(--t),padding .3s var(--t)}
.us-over.on{max-height:200px;padding:16px 18px;margin-top:16px;border-radius:14px;
  background:rgba(224,139,116,.12);border:1px solid rgba(224,139,116,.4);color:#f3d6cd}
.us-over.on.quiet{background:rgba(179,145,95,.1);border-color:rgba(207,179,136,.4);
  color:rgba(255,255,255,.72)}
.us-over b{color:#fff;font-weight:500}

/* selling out */
.ls-rows{margin:4px 0 22px}
.ls-row{display:grid;grid-template-columns:1fr auto;gap:4px 18px;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.07)}
.ls-row .l{font-size:.9rem;font-weight:300}
.ls-row .l b,.ls-row .v b{font-weight:500;color:#fff}
.ls-row .v{font-size:.98rem;text-align:right;white-space:nowrap;color:var(--gold-light)}
.ls-row .s{grid-column:1/-1;font-size:.75rem;color:rgba(255,255,255,.4);font-weight:300;
  line-height:1.5}
.ls-gap{height:14px;border-bottom:0}
@media (max-width:760px){
  .us-grid{grid-template-columns:1fr}
  /* Three priced options will not sit side by side on a phone without
     becoming unreadable, so they stack. The comparison still works: the
     prices are one under the other, which is if anything easier to read
     than across. Each option becomes a row -- name and description on the
     left, price on the right -- and the chosen one grows a stepper. */
  .us-opts,.us-opts.two{grid-template-columns:1fr;gap:7px}
  .us-opt .pick{display:grid;grid-template-columns:1fr auto;
    grid-template-areas:'nm pr' 'ex pr';column-gap:14px;row-gap:2px;
    align-items:baseline;padding:14px 15px}
  .us-opt .nm{grid-area:nm}
  .us-opt .pr{grid-area:pr;align-self:center;text-align:right}
  .us-opt .pr i{display:inline;margin-left:.2em}
  .us-opt .ex{grid-area:ex}
  /* A thumb is not a mouse pointer. Thirty pixels is fine to click and
     miserable to tap, and this screen is nothing but tapping. */
  .us-opt .n{gap:8px;padding:0 15px 14px}
  .us-opt .n button{width:42px;height:42px;font-size:1.05rem}
  .us-opt .n b{min-width:30px;font-size:1.05rem}
  .us-drop{padding:8px;margin:-8px -4px -8px 0;font-size:1.15rem}
  .us-add{padding:8px 0;margin-top:0}
  /* room for the bar that follows you down the page */
  #sim-weeks{padding-bottom:96px}
  .sim-tabs .fq-chip{padding-top:10px;padding-bottom:10px}
}

/* ----------------------------------------------------------------
   The running total, kept in view on a phone.
   On a wide screen the budget sits in the panel beside the list and you see
   it move as you press. On a phone that panel is a long way down, so every
   tap looked like it did nothing at all. This is the same three numbers,
   pinned to the bottom of the screen while you are choosing.
   ---------------------------------------------------------------- */
.us-stick{display:none}
@media (max-width:760px){
  .us-stick{display:block;position:fixed;left:0;right:0;bottom:0;z-index:110;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
    background:rgba(11,20,27,.93);border-top:1px solid rgba(255,255,255,.12);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
  .us-stick .t{height:5px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
  .us-stick .f{height:100%;background:var(--gold);border-radius:999px;
    transition:width .35s var(--t),background .3s var(--t)}
  .us-stick .f.over{background:#e08b74}
  .us-stick .r{display:flex;justify-content:space-between;align-items:baseline;
    margin-top:8px;font-size:.76rem;color:rgba(255,255,255,.5);gap:10px;
    padding-right:64px}          /* clear of the chat bubble */
  .us-stick .r b{color:#fff;font-weight:400;font-size:.92rem}
  .us-stick .r em{font-style:normal;color:#e08b74}
  /* The launcher floats, so wherever it sits on this screen it sits on top of
     a control -- every line runs the full width. So it is docked into the bar
     instead, which is the one strip here that nothing is ever tapped on, and
     which keeps 64px clear on the right for exactly this. */
  body.us-bar .wg{bottom:calc(6px + env(safe-area-inset-bottom,0px));z-index:112}
  body.us-bar .wg-btn{width:48px;height:48px}
  body.us-bar .wg.open .wg-panel{margin-bottom:6px}
}

/* the points mark: an M with two strokes, sized to sit on the text baseline */
svg.pt{width:.78em;height:.72em;display:inline-block;vertical-align:-.03em;
  margin-right:.16em;color:currentColor}
.bn-fig .v svg.pt,.simgrid .v svg.pt{width:.72em;height:.66em}
.us-over .us-up{background:none;border:0;border-bottom:1px solid currentColor;
  color:var(--gold-light);font:inherit;cursor:pointer;padding:0}
.us-over .us-up:hover{color:#fff}

/* what the Liquidity Shield is not: a forecast */
.ls-hope{margin-top:18px;padding:18px 20px;border-radius:16px;
  background:rgba(179,145,95,.09);border:1px solid rgba(207,179,136,.32)}
.ls-hope .k{display:block;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:10px}
.ls-hope ul{margin:0;padding-left:18px;display:grid;gap:7px}
.ls-hope li{font-size:.82rem;line-height:1.6;font-weight:300;color:rgba(255,255,255,.72)}
.ls-hope li::marker{color:var(--gold)}
.ls-hope p{margin-top:11px;font-size:.79rem;color:rgba(255,255,255,.5);font-weight:300}

/* against chartering: the switches are the argument, so they get room */
.vs-hint{font-size:.76rem;color:rgba(255,255,255,.45);line-height:1.6;margin-top:10px;
  font-weight:300;max-width:46ch}
.vs-toggles{margin-top:24px}
.vs-toggles .k{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:12px}
.vs-tog{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;margin-bottom:9px;
  border-radius:14px;background:var(--app-2);border:1px solid var(--hair);cursor:pointer;
  transition:.26s var(--t)}
.vs-tog:hover{border-color:rgba(255,255,255,.26)}
.vs-tog:has(input:checked){border-color:rgba(207,179,136,.45);background:rgba(179,145,95,.1)}
.vs-tog input{margin-top:3px;accent-color:var(--gold);width:16px;height:16px;flex:none}
.vs-tog b{display:block;font-size:.88rem;font-weight:400;color:#fff}
.vs-tog i{display:block;font-style:normal;font-size:.76rem;color:rgba(255,255,255,.5);
  line-height:1.6;margin-top:4px;font-weight:300}
.vs-rows{margin:4px 0 20px}
.adv.bad{color:#e08b74}
.vs-soft{max-height:0;overflow:hidden;transition:max-height .45s var(--t)}
.vs-soft.on{max-height:420px;margin-top:18px;padding:18px 20px;border-radius:16px;
  background:rgba(179,145,95,.1);border:1px solid rgba(207,179,136,.34)}
.vs-soft b{display:block;color:#fff;font-weight:400;margin-bottom:9px;font-size:.94rem}
.vs-soft ul{margin:0;padding-left:18px;display:grid;gap:6px}
.vs-soft li{font-size:.82rem;line-height:1.6;font-weight:300;color:rgba(255,255,255,.72)}
.vs-soft li::marker{color:var(--gold)}
.vs-soft p{margin-top:11px;font-size:.79rem;color:rgba(255,255,255,.5);font-weight:300}

/* the three comparisons, side by side */
.vs-three{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;
  margin:2px 0 22px}
.vs-one{padding:15px 16px;border-radius:14px;background:var(--app-2);
  border:1px solid var(--hair)}
.vs-one.bad{border-color:rgba(224,139,116,.45);background:rgba(224,139,116,.1)}
.vs-one .k{display:block;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:8px;line-height:1.4}
.vs-one b{display:block;font-size:1.7rem;font-weight:200;letter-spacing:-.03em;
  color:var(--gold-light);line-height:1}
.vs-one.bad b{color:#e08b74}
.vs-one .s{display:block;font-size:.7rem;color:rgba(255,255,255,.4);line-height:1.5;
  margin-top:7px;font-weight:300}

/* what a sale is worth */
.dc{margin-top:30px;padding:26px 28px;border-radius:var(--r);background:var(--app-2);
  border:1px solid var(--hair);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.dc-head .k{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-light)}
.dc-head h3{font-size:1.35rem;font-weight:300;margin:6px 0 7px;letter-spacing:-.02em}
.dc-head p{font-size:.84rem;color:rgba(255,255,255,.5);line-height:1.65;max-width:60ch;
  font-weight:300}
/* The fleet has five boats and the other three questions have two or three
   answers each. Given equal columns the boats stack five deep beside three
   single rows, which leaves a hole the size of the panel. So the fleet takes
   a line of its own and the three short questions share the next. */
.dc-grid{display:grid;grid-template-columns:auto auto auto;justify-content:start;
  gap:26px 58px;margin:24px 0 28px}
.dc-q.wide{grid-column:1/-1}
.dc-q label{display:block;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.34);margin-bottom:11px}
.dc-q .simopts{display:flex;flex-wrap:wrap;gap:7px}
.dc-q .simopt{font-size:.8rem;padding:9px 15px}

/* the result: the reasoning on the left, the figures on the right, so
   neither is a single line stretched across a desk monitor */
.dc-out{border-top:1px solid var(--hair);padding-top:26px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(258px,330px);gap:44px;
  align-items:start}
.dc-say .dc-lead{font-family:'Instrument Serif',Georgia,serif;font-size:1.18rem;
  font-style:italic;font-weight:400;line-height:1.45;color:#fff;margin:0 0 14px;
  letter-spacing:-.01em}
.dc-say .dc-note{margin:0;font-size:.79rem;color:rgba(255,255,255,.4);font-weight:300;
  line-height:1.65;max-width:46ch}

.dc-slip{border:1px solid var(--hair);border-radius:16px;padding:18px 20px 20px;
  background:rgba(255,255,255,.025)}
.dc-line{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:8px 0;font-size:.84rem;font-weight:300;color:rgba(255,255,255,.5)}
.dc-line b{color:#fff;font-weight:400;white-space:nowrap;font-size:.95rem;
  font-variant-numeric:tabular-nums}
.dc-fee{margin-top:12px;padding-top:16px;border-top:1px solid var(--hair2);
  display:flex;flex-direction:column;gap:2px}
.dc-fee .k{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-light)}
.dc-fee b{font-size:2.1rem;font-weight:200;letter-spacing:-.035em;color:#fff;
  line-height:1.15;font-variant-numeric:tabular-nums}
.dc-fee em{font-style:normal;font-size:.72rem;color:rgba(255,255,255,.34);
  font-variant-numeric:tabular-nums}
@media(max-width:900px){
  .dc-grid{grid-template-columns:auto auto;gap:22px 40px}
  .dc-out{grid-template-columns:1fr;gap:24px}
  .dc-slip{order:-1}
}
@media(max-width:560px){
  .dc-grid{grid-template-columns:1fr;gap:20px}
  .dc-fee b{font-size:1.9rem}
}
.dc-note{margin-top:14px;font-size:.78rem;color:rgba(255,255,255,.45);line-height:1.65;
  font-weight:300;max-width:70ch}
.dc-none{font-size:.86rem;color:#e08b74}

/* the sailing patterns: whether the winter season is in it decides a lot */
.simopt .st-red{display:block;margin-top:6px;font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;opacity:.8}
.simopt.on .st-red{opacity:.75}
.st-say{margin-top:12px;font-size:.79rem;line-height:1.65;color:rgba(255,255,255,.5);
  font-weight:300;max-width:46ch}
.st-read{background:none;border:0;border-bottom:1px solid rgba(207,179,136,.4);
  color:var(--gold-light);font:inherit;font-size:.79rem;cursor:pointer;padding:0}
.st-read:hover{color:#fff;border-bottom-color:#fff}

/* ================================================================
   THE PORTAL ON A PHONE
   ----------------------------------------------------------------
   The portal was drawn on a wide screen and then made to fit a narrow
   one, which is not the same thing as being usable on one. Three
   habits from the desktop do not survive the move: type set small
   because there is plenty of it, controls sized for a pointer, and a
   row of filters that runs off the edge with nothing to say so.
   ================================================================ */
@media (max-width:760px){

  /* --- type ---
     The small uppercase labels sit at nine or ten pixels. On a desktop,
     at arm's length, that reads as a quiet caption. On a phone held at
     reading distance it is a squint. Nothing below eleven, and the rule
     is written by size rather than by class so a label added later
     cannot slip back under it. Only the size: the uppercase labels
     already carry their own tracking, and some of these classes hold
     ordinary sentences, which letter-spacing would ruin. */
  body.bridge .br-view .k,
  body.bridge .br-view .s,
  body.bridge .br-view .n,
  body.bridge .br-view .sec,
  body.bridge .br-view .cat,
  body.bridge .br-view .tag,
  body.bridge .br-view .st-red,
  body.bridge .br-view .rbase,
  body.bridge .br-view .fq-count,
  body.bridge .br-view label,
  body.bridge .br-view small{font-size:.7rem!important}
  body.bridge .br-view .lib-card .cat{font-size:.64rem!important}
  .eyebrow{font-size:.72rem;letter-spacing:.28em}

  /* --- controls ---
     Forty pixels is the smallest a thumb hits reliably. Everything that
     can be pressed clears it, and the ones that are only text get the
     room from padding so the look does not change. */
  .fq-chip{min-height:40px;display:inline-flex;align-items:center}
  .simopt{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .fq-chat,.nd-skip,.st-read,.us-add{padding-top:10px;padding-bottom:10px}
  /* a checkbox at seventeen pixels is a dot; and the label beside it
     should be part of the same target, which is what a label is for */
  .sign .agree input,
  input[type=checkbox],input[type=radio]{width:24px!important;height:24px!important;
    flex:0 0 24px!important}
  label:has(input[type=checkbox]),label:has(input[type=radio]){
    min-height:44px;gap:12px}
  /* the quiet text buttons: same look, a thumb's worth of room */
  body.bridge .br-view button:not(.btn):not(.fq-chip):not(.simopt):not(.us-sw button){
    min-height:38px}

  /* --- the filter rows ---
     They scroll sideways and the scrollbar is hidden, so a row of eight
     categories looks like a row of three. A fade on the edge is the
     whole tell: it says there is more that way. */
  .fq-chips{position:relative;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)}
  .fq-chips .fq-chip{scroll-snap-align:start}
  /* once you reach the end there is nothing more to promise */
  .fq-chips.at-end{-webkit-mask-image:none;mask-image:none}

  /* --- the chat launcher ---
     It floats over whatever happens to be under it, and on a long list
     that is always something. It steps out of the way as you read down
     and comes back the moment you look up. */
  .wg{transition:transform .3s var(--t),opacity .3s var(--t),bottom .3s var(--t)}
  body.wg-away .wg{transform:translateY(96px);opacity:0;pointer-events:none}
  body.wg-away .wg.open{transform:none;opacity:1;pointer-events:auto}
  /* and nothing sits trapped underneath the last card */
  .br-view{padding-bottom:84px}
}

/* The tab row sticks below the header, and the glass layer made its
   background five per cent white -- which over a scrolling page means the
   headline underneath reads straight through the tabs. Glass needs
   something behind it. */
@media(max-width:1000px){
  .br-nav{background:rgba(6,13,18,.88);
    -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
    z-index:58}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media(max-width:1000px){ .br-nav{background:#0b141b} }
}

/* The tab row was set to stick 66px below the top. Its own slot in the grid
   is 65px tall, so the offset pushed it a full row down and it came to rest
   on top of the page title -- on every tab, at rest, before you scroll at
   all. It did not stay pinned when you did scroll either, so the stickiness
   was buying nothing. It travels with the page now. */
@media(max-width:1000px){
  .br-nav{position:static;top:auto}
}

/* A flex child will not shrink below its own content width unless it is told
   it may. The message field held its ground and pushed the send button off
   the right edge on a narrow phone. */
.chat-in input{min-width:0}

/* ================================================================
   THE COMMISSION SCHEDULE
   ----------------------------------------------------------------
   Three products, two ways a client arrives. Set as six standing
   cards it took a screen and a half, repeated the column heading
   six times, and printed 7.5% twice side by side as though the two
   were different. As a table it is one glance: the products down
   the left, the two sources across the top, and where a rate does
   not care who brought the client, one number spanning both.
   ================================================================ */
/* Held to a readable measure: across the full width of a desk monitor the
   eye cannot carry a product name to a number a foot away. */
.cs{border-top:1px solid var(--hair);max-width:880px}
.cs-hd{display:grid;grid-template-columns:minmax(0,1fr) 116px 116px;gap:22px;
  padding:14px 0 12px;align-items:end}
.cs-hd span{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.34);text-align:right}
.cs-row{display:grid;grid-template-columns:minmax(0,1fr) 116px 116px;gap:6px 22px;
  padding:18px 0;border-top:1px solid var(--hair);align-items:baseline}
.cs-row .w .s{display:block;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:5px}
.cs-row .w b{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:400;
  color:#fff;letter-spacing:-.01em}
.cs-row .r{text-align:right}
.cs-row .r b{font-size:1.6rem;font-weight:200;letter-spacing:-.03em;color:var(--gold-light);
  font-variant-numeric:tabular-nums}
/* one rate, both columns: the number sits over the pair rather than
   being printed twice */
.cs-row .r.wide{grid-column:2/4;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.cs-row .r.wide span{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.3)}
.cs-say{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:6px 34px;margin-top:10px}
.cs-say p{margin:0;font-size:.79rem;line-height:1.6;font-weight:300;color:rgba(255,255,255,.42)}
.cs-say p span{display:block;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.3);margin-bottom:3px}
body.bridge .cs-row .w b{font-family:'Inter Tight',system-ui,sans-serif;font-size:1.12rem;
  font-weight:300}
.cs-say .rt{display:none}
@media(max-width:760px){
  /* Two rate columns will not fit, so the column headings go and each rate
     travels down beside the sentence it belongs to. Where one rate covers
     both, it stays on the product line and the sentences carry none. */
  .cs-hd{display:none}
  .cs-row{grid-template-columns:1fr auto;padding:20px 0}
  .cs-row .r{display:none}
  .cs-row.same .r.wide{display:flex;grid-column:auto}
  .cs-say{grid-template-columns:1fr;gap:16px;margin-top:14px}
  .cs-say p span{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    color:rgba(255,255,255,.4)}
  .cs-row:not(.same) .cs-say .rt{display:inline;font-style:normal;font-size:1.15rem;
    font-weight:200;letter-spacing:-.02em;color:var(--gold-light);text-transform:none;
    font-variant-numeric:tabular-nums}
}

/* the terms note lines up with the schedule above it rather than finding
   its own edge */
.cm-note{max-width:880px}

/* ================================================================
   FINE PRINT
   ----------------------------------------------------------------
   Terms belong at the bottom of a page, not in a box in the middle
   of it. A filled panel gives a paragraph the weight of a headline
   and asks to be read before anything above it; a hairline and a
   quiet heading give it the weight it actually has. Short headed
   notes, so the eye can find the one clause it came for instead of
   reading nine lines to reach it.
   ================================================================ */
.fine{max-width:880px;margin:26px 0 0;padding-top:20px;
  border-top:1px solid var(--hair);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:22px 34px}
.fine > div{min-width:0}
.fine span{display:block;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.36);margin-bottom:7px}
.fine p{margin:0;font-size:.79rem;line-height:1.65;font-weight:300;
  color:rgba(255,255,255,.44)}
@media(max-width:760px){
  .fine{grid-template-columns:1fr;gap:18px;margin-top:22px}
  .fine span{color:rgba(255,255,255,.42)}
}

/* The disclaimers carried a gold rule down their left edge, which is the
   colour this site uses for the things it wants read. A hairline says the
   same thing without asking for the attention. */
body.bridge .disclaimer{border-left-color:var(--hair2);color:rgba(255,255,255,.4);
  font-size:.75rem;padding-left:18px}

/* ================================================================
   THE SAUDI RED SEA ALMANAC
   ----------------------------------------------------------------
   Three layers on one page: a teaser anyone sees, a short version
   anyone can read, and the full edition behind the same single
   registration that opens the papers. Set as a book rather than as
   a long article -- a contents list you can jump from, chapters
   that alternate side to side so the eye has somewhere to rest,
   and the broker note held apart from the prose because it is
   addressed to a different reader.
   ================================================================ */

/* the card on Insights: this one is a book, so it gets the wide image */
.paper.feature{grid-template-columns:1fr}
.paper.feature .paper-img img{min-height:0;height:340px}
.paper.feature .paper-txt{padding:38px 40px 42px}
.paper.feature h3{font-size:2.3rem}

/* Every page hero on the site wraps its title in .wrap, which is what
   .page-hero styles: the padding, and the z-index that lifts the text above
   the dark scrim. Insights wrapped its title in .page-hero-inner instead, and
   nothing styled that at all -- so the title sat flush to the window edge and
   underneath the scrim, which is to say invisible. It had been invisible
   since the page was built. Both pages use .wrap now, like the rest. */
/* The Almanac's cover shot is a bright midday sea and the standard scrim is
   tuned for darker pictures: the gold eyebrow all but vanished into the sky.
   A little more weight, on this hero only. */
.alm-hero::after{background:linear-gradient(180deg,rgba(18,33,44,.62) 0%,rgba(18,33,44,.3) 42%,rgba(18,33,44,.8) 100%)}
.alm-hero h1{letter-spacing:.02em}

/* contents */
.alm-toc{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:38px}
.alm-toc a{background:#fff;padding:20px 22px;text-decoration:none;color:var(--navy);
  font-size:.95rem;line-height:1.35;transition:.3s var(--t);display:block}
.alm-toc a span{display:block;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:7px}
.alm-toc a:hover{background:var(--sand,#f7f4ef)}

/* the short version */
.alm-brief{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:34px 44px;margin-top:38px}
.ab-item h3{font-size:1.28rem;line-height:1.25;margin-bottom:10px}
.ab-item p{font-size:.95rem;line-height:1.75;color:var(--grey);margin:0}

/* the four questions the Almanac does not answer */
.alm-trade{margin-top:56px;padding-top:34px;border-top:1px solid var(--line)}
.at-hd{max-width:56ch;margin-bottom:26px}
.at-hd p{font-size:.9rem;color:var(--grey);line-height:1.7;margin:8px 0 0}
.at-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px 40px}
.at-item span{display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--navy);margin-bottom:9px}
.at-item p{font-size:.88rem;line-height:1.7;color:var(--grey);margin:0}

/* chapters */
.alm-chapters{margin-top:40px;display:grid;gap:2px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ac-ch{display:grid;grid-template-columns:400px 1fr;background:#fff;align-items:stretch}
.ac-ch.alt{grid-template-columns:1fr 400px}
.ac-ch.alt .ac-fig{order:2}
.ac-fig{position:relative;overflow:hidden;min-height:320px}
.ac-fig img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.22,1,.36,1)}
.ac-ch:hover .ac-fig img{transform:scale(1.04)}
.ac-cap{position:absolute;left:20px;bottom:18px;z-index:2;color:#fff;
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  text-shadow:0 1px 14px rgba(0,0,0,.7)}
.ac-txt{padding:42px 44px}
.ac-n{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  margin-bottom:9px}
.ac-txt h3{font-size:1.95rem;line-height:1.14;margin-bottom:6px}
.ac-sub{font-size:.95rem;color:var(--grey);font-style:italic;margin-bottom:20px}
.ac-txt p{font-size:.95rem;line-height:1.8;color:var(--grey);margin-bottom:15px}
/* the broker note speaks to a different reader, so it stands apart */
.ac-broker{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.ac-broker span{display:block;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--navy);margin-bottom:9px}
.ac-broker p{font-size:.88rem;line-height:1.75;color:var(--grey);margin:0}

/* the download */
.alm-get{display:grid;grid-template-columns:1fr 380px;gap:56px;align-items:center}
.alm-get-txt h2{margin-bottom:14px}
.alm-get-txt .lead{margin-bottom:26px}
.alm-get-fig img{width:100%;display:block;border-radius:2px}
.alm-get .btn .l-open{display:none}
body.papers-open .alm-get .btn .l-locked{display:none}
body.papers-open .alm-get .btn .l-open{display:inline}

@media(max-width:900px){
  .paper.feature .paper-img img{height:230px}
  .paper.feature h3{font-size:1.7rem}
  .ac-ch,.ac-ch.alt{grid-template-columns:1fr}
  .ac-ch.alt .ac-fig{order:0}
  .ac-fig{min-height:220px;max-height:280px}
  .ac-txt{padding:32px 26px 36px}
  .ac-txt h3{font-size:1.6rem}
  .alm-get{grid-template-columns:1fr;gap:32px}
  .alm-get-fig{order:-1}
  .alm-brief{gap:28px}
}

/* two doors on a paper card: the short version now, the full paper after
   registering. The free one is quieter, because it costs nothing to open */
.paper-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.paper-link.free{color:var(--grey);border-bottom:1px solid transparent}
.paper-link.free:after{background:var(--grey)}
.paper-link.free:hover{color:var(--navy)}

/* the short version of the Red Sea paper */
.rb-body{max-width:70ch;margin:0 auto}
.rb-part{margin-bottom:34px}
.rb-part h3{font-size:1.6rem;line-height:1.2;margin:44px 0 14px}
.rb-part p{font-size:1.02rem;line-height:1.85;color:var(--grey);margin-bottom:17px}
.rb-open p:first-child{font-size:1.25rem;line-height:1.6;color:var(--navy)}
.rb-next{max-width:70ch;margin:56px auto 0;padding-top:34px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr;gap:24px}
.rb-next h3{font-size:1.35rem;margin:6px 0 10px}
.rb-next p{font-size:.95rem;line-height:1.75;color:var(--grey);margin:0}
.rb-links{display:flex;flex-wrap:wrap;gap:14px}
@media(max-width:760px){
  .rb-part h3{font-size:1.35rem;margin-top:34px}
  .rb-open p:first-child{font-size:1.12rem}
}

/* the Almanac's introduction, set apart from the chapters that follow it */
.alm-intro{display:grid;grid-template-columns:180px 1fr;gap:40px;margin:40px 0 6px;
  padding-bottom:38px;border-bottom:1px solid var(--line)}
.ai-k{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  padding-top:6px}
.ai-t{max-width:68ch}
.ai-t p{font-size:1rem;line-height:1.85;color:var(--grey);margin-bottom:16px}
.ai-t p:first-child{font-size:1.2rem;line-height:1.6;color:var(--navy)}
.ai-t p:last-child{margin-bottom:0}
@media(max-width:900px){
  .alm-intro{grid-template-columns:1fr;gap:14px}
  .ai-t p:first-child{font-size:1.1rem}
}

/* Armin's own shapes inside a chapter: his lists, his pull-quotes, his yacht
   headings. Flattened into prose they read as nonsense, so they are kept. */
.ac-list,.ai-t .ac-list{margin:0 0 16px;padding-left:0;list-style:none}
.ac-list li{position:relative;padding-left:20px;font-size:.95rem;line-height:1.75;
  color:var(--grey);margin-bottom:6px}
.ac-list li:before{content:'';position:absolute;left:2px;top:.68em;width:6px;height:1px;
  background:var(--gold)}
.ac-q{margin:22px 0;padding:0 0 0 20px;border-left:1px solid var(--gold);
  font-family:'Cormorant Garamond',Georgia,serif;font-size:1.35rem;line-height:1.4;
  font-style:italic;color:var(--navy)}
.ac-h{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);
  margin:20px 0 7px}
.ai-t .ac-q{font-size:1.3rem}

/* ================================================================
   READING, RATHER THAN DOWNLOADING
   ----------------------------------------------------------------
   The papers used to be a gated PDF and the Almanac a wall of text.
   Both are now pages you read: a bar across the top telling you how
   far in you are, the sections listed down the side and keeping up
   with you, and enough movement that the page feels alive without
   getting in the way. Everything here stops for prefers-reduced-motion.
   ================================================================ */

/* the progress bar, shared by the papers and the Almanac */
.pp-bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
  background:rgba(35,61,77,.1);pointer-events:none}
.pp-bar span{display:block;height:100%;width:0;background:var(--gold);
  transition:width .12s linear}

/* --- a paper --- */
.pp-hero h1{max-width:20ch}
.pp-wrap{padding-top:60px}
.pp-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:70px;align-items:start}
/* The site header is styled with a bare `nav{position:fixed}`, which catches
   any <nav> anywhere -- so this reading rail was being lifted out of the page
   and pinned across the top, and the article collapsed into the 230px column
   the rail had left behind. */
/* and a sticky child only sticks for as long as its parent is on screen, so
   the rail has to be as tall as the reading beside it */
.pp-nav,.alm-rail{position:static;padding:0;z-index:auto;transition:none;
  align-self:stretch;height:100%}
/* the chapter index of a full paper is a <nav> too, and the same bare
   `nav{position:fixed}` was lifting it out of the page -- on a phone it sat
   printed straight over the first chapters of the essay */
nav.pp-full-ix{position:static;padding:0;z-index:auto;transition:none;
  background:transparent;box-shadow:none;height:auto}
.pp-nav-in{position:sticky;top:110px}
.pp-nav-k,.alm-rail-k{display:block;font-size:.56rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(35,61,77,.4);margin-bottom:16px}
.pp-nav a,.alm-rail a{display:grid;grid-template-columns:26px 1fr;gap:10px;
  padding:8px 0;font-size:.86rem;line-height:1.35;color:var(--grey);
  text-decoration:none;border-left:1px solid transparent;padding-left:14px;margin-left:-15px;
  transition:.3s var(--t)}
.pp-nav a span,.alm-rail a span{font-size:.62rem;letter-spacing:.1em;
  color:rgba(35,61,77,.35);padding-top:.2em}
.pp-nav a:hover,.alm-rail a:hover{color:var(--navy)}
.pp-nav a.on,.alm-rail a.on{color:var(--navy);border-left-color:var(--gold)}
.pp-nav a.on span,.alm-rail a.on span{color:var(--gold)}

.pp-body{max-width:68ch}
.pp-lead{font-size:1.3rem;line-height:1.6;color:var(--navy);margin-bottom:44px;
  padding-bottom:34px;border-bottom:1px solid var(--line)}
.pp-s{margin-bottom:46px;scroll-margin-top:100px}
.pp-s h2{font-size:1.7rem;line-height:1.2;margin-bottom:16px;display:grid;
  grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.pp-n{font-family:'Inter Tight',system-ui,sans-serif;font-size:.68rem;letter-spacing:.16em;
  color:var(--gold);font-weight:400}
.pp-s p{font-size:1.02rem;line-height:1.85;color:var(--grey);margin-bottom:17px}
.pp-pull{margin:52px 0;padding:6px 0 6px 26px;border-left:2px solid var(--gold)}
.pp-pull p{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.85rem;line-height:1.32;
  color:var(--navy);margin:0}
.pp-end{margin-top:56px;padding-top:34px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.pp-end h3{font-size:1.25rem;margin:6px 0 8px}
.pp-end p{font-size:.9rem;color:var(--grey);line-height:1.7;margin:0;max-width:46ch}
.pp-end .btn .l-open{display:none}
body.papers-open .pp-end .btn .l-locked{display:none}
body.papers-open .pp-end .btn .l-open{display:inline}

.pp-more{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px}
.pp-more-card{display:block;background:#fff;text-decoration:none;color:inherit;
  border:1px solid var(--line);transition:.4s var(--t)}
.pp-more-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(24,43,56,.1)}
.pp-more-img{height:190px;overflow:hidden}
.pp-more-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.pp-more-card:hover .pp-more-img img{transform:scale(1.05)}
.pp-more-txt{padding:24px 26px 28px}
.pp-more-txt .k{font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold)}
.pp-more-txt h3{font-size:1.3rem;line-height:1.2;margin:9px 0 7px}
.pp-more-txt p{font-size:.88rem;color:var(--grey);line-height:1.6;margin:0}

/* --- the Almanac --- */
.alm-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:38px}
.alm-figs > div{background:#fff;padding:26px 22px}
.alm-figs b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:2.5rem;
  font-weight:400;line-height:1;color:var(--navy);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.alm-figs span{display:block;margin-top:9px;font-size:.78rem;line-height:1.5;color:var(--grey)}

.alm-read{display:grid;grid-template-columns:230px minmax(0,1fr);gap:70px;align-items:start;
  margin-top:34px}
.alm-rail-in{position:sticky;top:110px}
.alm-chapters{margin-top:0}
.ac-ch{scroll-margin-top:90px}

/* the broker note, folded away until it is wanted */
.ac-broker{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.ac-broker summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.ac-broker summary::-webkit-details-marker{display:none}
.ac-broker summary span{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--navy)}
.ac-broker summary i{width:11px;height:11px;position:relative;flex:none}
.ac-broker summary i:before,.ac-broker summary i:after{content:'';position:absolute;
  background:var(--gold);transition:.3s var(--t)}
.ac-broker summary i:before{left:0;right:0;top:5px;height:1px}
.ac-broker summary i:after{top:0;bottom:0;left:5px;width:1px}
.ac-broker[open] summary i:after{transform:scaleY(0)}
.ac-broker-in{padding-top:12px}
.ac-broker-in p{font-size:.88rem;line-height:1.75;color:var(--grey);margin:0 0 12px}
.ac-broker-in p:last-child{margin-bottom:0}

.ac-next{display:block;margin-top:26px;padding:18px 0 0;border-top:1px solid var(--line);
  text-decoration:none;color:inherit;transition:.3s var(--t)}
.ac-next span{display:block;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px}
.ac-next b{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.4rem;font-weight:400;
  color:var(--navy);position:relative;padding-right:26px}
.ac-next b:after{content:'\\2192';position:absolute;right:0;transition:transform .3s var(--t)}
.ac-next:hover b:after{transform:translateX(5px)}

/* --- Insights: whole cards click, and they can be filtered --- */
a.paper{text-decoration:none;color:inherit;transition:.45s var(--t)}
a.paper:hover{background:#fdfcfa;transform:translateY(-2px)}
.ins-tools{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin:34px 0 8px}
.ins-find{position:relative;flex:1 1 260px;max-width:340px}
.ins-find svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;
  height:16px;fill:none;stroke:rgba(35,61,77,.35);stroke-width:1.6}
.ins-find input{width:100%;padding:13px 16px 13px 40px;border:1px solid var(--line);
  background:#fff;font-family:inherit;font-size:.9rem;color:var(--navy);
  border-radius:999px;outline:none;transition:border-color .3s}
.ins-find input:focus{border-color:var(--gold)}
.ins-chips{display:flex;flex-wrap:wrap;gap:8px}
.ins-chip{font-family:inherit;font-size:.78rem;padding:10px 18px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--grey);cursor:pointer;
  transition:.28s var(--t)}
.ins-chip:hover{border-color:rgba(35,61,77,.3);color:var(--navy)}
.ins-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.ins-none{display:none;margin:26px 0 0;font-size:.92rem;color:var(--grey)}
.ins-none.on{display:block}

@media(prefers-reduced-motion: reduce){
  .ac-fig img,.pp-more-img img{transition:none!important;transform:none!important}
  a.paper:hover,.pp-more-card:hover{transform:none}
}
@media(max-width:1000px){
  .pp-grid,.alm-read{grid-template-columns:1fr;gap:30px}
  /* the rail becomes a row you can swipe, above the reading */
  .pp-nav-in,.alm-rail-in{position:static;display:flex;gap:6px;overflow-x:auto;
    padding-bottom:8px;scrollbar-width:none}
  .pp-nav-in::-webkit-scrollbar,.alm-rail-in::-webkit-scrollbar{display:none}
  .pp-nav-k,.alm-rail-k{display:none}
  .pp-nav a,.alm-rail a{flex:none;border-left:0;border-bottom:1px solid transparent;
    margin-left:0;padding:8px 2px;grid-template-columns:auto;white-space:nowrap;
    font-size:.8rem}
  .pp-nav a span,.alm-rail a span{display:none}
  .pp-nav a.on,.alm-rail a.on{border-bottom-color:var(--gold)}
  .alm-figs{grid-template-columns:1fr 1fr}
  .pp-more{grid-template-columns:1fr}
  .pp-pull p{font-size:1.5rem}
  .pp-s h2{font-size:1.4rem}
}
@media(max-width:560px){
  .alm-figs{grid-template-columns:1fr}
  .pp-end{flex-direction:column;align-items:flex-start}
}

/* A grid row is as tall as its tallest cell, so on a long chapter the picture
   was being stretched to sixteen hundred pixels in a four-hundred-pixel column
   and cropped to a smeared vertical sliver. It keeps its own height now, and
   since it has room to spare it stays alongside you while you read the
   chapter rather than scrolling away in the first paragraph. */
@media(min-width:901px){
  .ac-ch{align-items:start}
  .ac-fig{position:sticky;top:100px;height:min(74vh,600px);min-height:0}
}

/* ================================================================
   THE ALMANAC AS A BOOK
   ----------------------------------------------------------------
   Nine chapters shown one at a time, so the page is never a wall.
   You turn the page: from the rail, from the contents, from the card
   at the foot of the chapter, or with the arrow keys.
   ================================================================ */
.alm-chapters.reader{border-top:0;border-bottom:0;background:none}
.alm-chapters.reader .ac-ch{display:none}
.alm-chapters.reader .ac-ch.on{display:grid;border:1px solid var(--line)}
/* a freshly opened chapter fades up once, quickly */
@keyframes pageTurn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.alm-chapters.reader .ac-ch.on{animation:pageTurn .45s var(--t) both}
@media(prefers-reduced-motion: reduce){
  .alm-chapters.reader .ac-ch.on{animation:none}
}
/* his first paragraph opens the chapter, so it opens like one -- the first
   body paragraph, not the italic standfirst above it */
.ac-txt .ac-sub + p::first-letter{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:3.3em;line-height:.78;
  float:left;padding:.08em .12em 0 0;color:var(--navy)}
/* chapter count under the rail heading */
.alm-rail a{cursor:pointer}

/* ================================================================
   GUEST REVIEWS
   ----------------------------------------------------------------
   A page from the guest book, photographed, typed out and cleared.
   The photo button is the biggest thing on the form because on a
   boat this happens on a phone, standing up.
   ================================================================ */
.rv-drop{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:34px 20px;border:1.5px dashed rgba(207,179,136,.5);border-radius:16px;
  background:rgba(179,145,95,.06);color:inherit;font:inherit;cursor:pointer;
  transition:.3s var(--t);margin-bottom:22px}
.rv-drop:hover{border-color:var(--gold);background:rgba(179,145,95,.12)}
.rv-drop .ic{width:44px;height:44px;border-radius:50%;background:rgba(179,145,95,.18);
  display:grid;place-items:center;color:var(--gold-light)}
.rv-drop .ic svg{width:22px;height:22px}
.rv-drop b{font-weight:400;font-size:.95rem}
.rv-drop .s{font-size:.78rem;color:rgba(255,255,255,.42)}
.rv-prev{position:relative;margin-bottom:22px}
.rv-prev img{width:100%;max-height:320px;object-fit:contain;border-radius:14px;
  background:rgba(0,0,0,.25);display:block}
.rv-prev button{position:absolute;right:12px;bottom:12px;font:inherit;font-size:.78rem;
  padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.35);
  background:rgba(11,20,27,.72);color:#fff;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rv-perms{margin:18px 0 22px;display:grid;gap:10px}
.rv-perms .k{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.4)}
.rv-ok{display:none;margin:14px 0 0;font-size:.88rem;color:var(--gold-light)}
.rv-ok.on{display:block}

.rv-item{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:18px;
  border:1px solid var(--hair);border-radius:16px;background:var(--app-2);
  margin-bottom:12px;align-items:start}
.rv-item > img{width:120px;height:120px;object-fit:cover;border-radius:10px}
.rv-item:not(:has(> img)){grid-template-columns:1fr}
.rv-top{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-bottom:8px}
.rv-top b{font-weight:400}
.rv-top span{font-size:.76rem;color:rgba(255,255,255,.42)}
.rv-body p{font-size:.9rem;line-height:1.7;font-weight:300;color:rgba(255,255,255,.72);
  font-style:italic;margin:0 0 10px}
.rv-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rv-tags i{font-style:normal;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid var(--hair2);
  color:rgba(255,255,255,.4)}
.rv-tags i.on{border-color:rgba(207,179,136,.5);color:var(--gold-light)}
.rv-tags em{font-style:normal;font-size:.76rem;color:var(--gold);margin-left:auto}
@media(max-width:620px){
  .rv-item{grid-template-columns:1fr}
  .rv-item > img{width:100%;height:170px}
}

/* the same review card in the admin, plus the decision */
.ad-rv.fresh{border-color:rgba(207,179,136,.55)}
.ad-rv-do{display:flex;gap:10px;margin-top:14px;align-items:center}
.ad-rv-do em{font-style:normal;font-size:.8rem;letter-spacing:.06em}
.ad-rv-do em.yes{color:#8fce9f}
.ad-rv-do em.no{color:#e08b74}

/* a textarea keeps its browser default width unless told otherwise, and this
   one is the heart of the form */
#rv-form textarea{width:100%}

/* the moment between the photo and the words */
.rv-read{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:.85rem;
  color:var(--gold-light)}
/* display:flex would beat the hidden attribute, and then the light never
   goes out */
.rv-read[hidden]{display:none}
.rv-read .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);
  animation:rvPulse 1s ease-in-out infinite}
@keyframes rvPulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
.rv-readnote{margin:8px 0 0;font-size:.78rem;color:rgba(255,255,255,.45);font-weight:300}
@media(prefers-reduced-motion: reduce){.rv-read .dot{animation:none}}

.ad-copy{font:inherit;font-size:.78rem;padding:9px 16px;border-radius:999px;
  border:1px solid rgba(207,179,136,.5);background:none;color:var(--gold-light);
  cursor:pointer;transition:.25s var(--t)}
.ad-copy:hover{background:var(--gold);border-color:var(--gold);color:#0b141b}

/* ================================================================
   THE SIDEBAR FOLD
   ----------------------------------------------------------------
   Introductions, Commissions and the guest book under one heading.
   Closed it is one line; open, its pages sit indented beneath it
   with a thin rule marking them as a family. When a page inside is
   the open one, the heading carries the gold dot so a closed fold
   never hides where you are.
   ================================================================ */
.nav-group{margin:2px 0}
.nav-parent{position:relative;width:100%;background:none;border:none;color:var(--dim);
  font-family:inherit;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:300;text-align:left;cursor:pointer;
  padding:15px 16px;border-radius:2px;display:flex;align-items:center;gap:10px;
  transition:.25s var(--t)}
.nav-parent:hover{color:#fff;background:rgba(255,255,255,.04)}
.nav-parent i{margin-left:auto;width:9px;height:9px;position:relative;flex:none;
  transition:transform .3s var(--t)}
.nav-parent i:before,.nav-parent i:after{content:'';position:absolute;top:50%;width:6px;
  height:1px;background:currentColor}
.nav-parent i:before{left:0;transform:rotate(45deg)}
.nav-parent i:after{right:-1px;transform:rotate(-45deg)}
.nav-group.open .nav-parent i{transform:rotate(180deg)}
/* the gold dot: a page in here is the open one */
.nav-parent.holds-on:after{content:'';position:absolute;left:5px;top:50%;margin-top:-2px;
  width:4px;height:4px;border-radius:50%;background:var(--gold)}
.nav-group .nav-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--t)}
.nav-group.open .nav-sub{grid-template-rows:1fr}
.nav-sub > button{min-height:0}
.nav-group .nav-sub{overflow:hidden}
.nav-sub{margin-left:14px;border-left:1px solid var(--hair)}
.nav-sub button{display:block;width:100%;background:none;border:none;color:var(--dim);
  font-family:inherit;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:300;text-align:left;cursor:pointer;
  padding:0 16px;line-height:0;opacity:0;border-radius:0 2px 2px 0;
  transition:.3s var(--t)}
.nav-group.open .nav-sub button{padding:12px 16px;line-height:1.4;opacity:1}
.nav-sub button:hover{color:#fff;background:rgba(255,255,255,.04)}
.nav-sub button.on{color:#fff;background:rgba(179,145,95,.14)}
@media(prefers-reduced-motion: reduce){
  .nav-group .nav-sub,.nav-sub button,.nav-parent i{transition:none}
}
/* on a phone the sidebar is a row, and a fold in a row is a hiding place:
   the heading disappears and the pages stand in the row like the others */
@media(max-width:1000px){
  .nav-group{display:contents}
  .nav-parent{display:none}
  .nav-group .nav-sub{display:contents;margin:0;border:0}
  .nav-sub button{opacity:1;line-height:1.4;padding:16px 15px;white-space:nowrap;
    border-radius:0;width:auto}
}

/* ================================================================
   THE PUBLIC SITE, 2026 PASS
   ----------------------------------------------------------------
   The forms and buttons on the light pages still wore 2014: white
   rectangles with hairline borders, square checkboxes, a square
   button. The portal moved on months ago; this brings the public
   side with it. Fields become soft filled shapes that sharpen when
   you touch them, checkboxes get corners and a proper check, and
   every button becomes a pill. Scoped to the light pages: the
   portal (body.bridge) keeps its own dark styling untouched.
   ================================================================ */

/* --- buttons: the pill is the single loudest de-ageing move --- */
.btn{border-radius:999px;padding:17px 42px;letter-spacing:.24em}
.btn.solid{box-shadow:0 10px 28px rgba(179,145,95,.28)}
.btn.solid:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(179,145,95,.36)}
@media(prefers-reduced-motion: reduce){.btn.solid:hover{transform:none}}

/* --- fields: filled, rounded, and they wake up under the cursor --- */
body:not(.bridge) .form-grid input:not([type=checkbox]):not([type=radio]),
body:not(.bridge) .form-grid select,
body:not(.bridge) .form-grid textarea{
  border-radius:16px;background-color:#f6f3ed;border:1.5px solid transparent;
  padding:17px 20px;transition:background-color .25s,border-color .25s,box-shadow .25s}
/* background-COLOR, never the shorthand: the select carries its arrow as a
   background-image, and the shorthand would wipe it off */
body:not(.bridge) .form-grid input:hover,
body:not(.bridge) .form-grid select:hover,
body:not(.bridge) .form-grid textarea:hover{background-color:#f1ede4}
body:not(.bridge) .form-grid input:focus,
body:not(.bridge) .form-grid select:focus,
body:not(.bridge) .form-grid textarea:focus{
  background-color:#fff;border-color:var(--gold);
  box-shadow:0 6px 24px rgba(35,61,77,.08)}
body:not(.bridge) .form-grid select{border-radius:16px}

/* the card around a form loses its engraved corner line; the shadow
   already says "this is the thing to fill in" */
body:not(.bridge) .form-card{border-radius:24px;border-color:rgba(35,61,77,.08);
  box-shadow:0 24px 70px rgba(24,43,56,.08)}
body:not(.bridge) .form-card:before{display:none}

/* --- consent: no ledger lines, a checkbox with corners --- */
body:not(.bridge) .form-grid label.consent{border-top:0;padding-top:4px;margin-top:0}
body:not(.bridge) .form-grid label.consent input[type=checkbox]{
  width:21px;height:21px;flex:0 0 21px;border-radius:7px;border-color:#cfc7b8}
body:not(.bridge) .form-grid label.consent input[type=checkbox]:checked::after{
  left:6.5px;top:2.5px;width:5px;height:10px}

/* the pdf row on the dark strips follows the same shapes */
.doc-row{border-radius:18px}

/* the CONTACT button in the header joins the pill family */
nav ul a.nav-cta{border-radius:999px;padding:10px 22px}

/* ================================================================
   THE PROGRAM TAB AS A BENTO
   ----------------------------------------------------------------
   The same five points, but as cards instead of ledger lines. The
   numeral becomes a big ghost behind the words, the first point
   takes the full row, and the cards breathe on hover the way the
   home tab already does.
   ================================================================ */
.pr-bento{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.pr-card{position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--app-2);border:1px solid var(--hair);
  padding:34px 32px 30px;transition:.45s var(--t)}
.pr-card.wide{grid-column:1/-1;padding:42px 40px 38px}
.pr-card:hover{transform:translateY(-3px);border-color:rgba(207,179,136,.4);
  background:rgba(179,145,95,.08)}
.pr-card .ghost{position:absolute;right:14px;top:-18px;
  font-family:'Cormorant Garamond',serif;font-size:7.5rem;line-height:1;
  color:var(--gold);opacity:.1;pointer-events:none;transition:opacity .45s}
.pr-card:hover .ghost{opacity:.2}
.pr-card h3{font-size:1.45rem;margin-bottom:12px;max-width:26ch;position:relative}
.pr-card.wide h3{font-size:1.7rem}
.pr-card p{font-size:.94rem;color:var(--dim);font-weight:300;line-height:1.8;
  max-width:70ch;position:relative;margin:0}
/* the straight-talk split keeps up with the cards around it */
.pr-split .img img{border-radius:var(--r)}
@media(max-width:860px){
  .pr-bento{grid-template-columns:1fr}
  .pr-card,.pr-card.wide{padding:28px 24px 26px}
  .pr-card .ghost{font-size:5.5rem;right:8px;top:-12px}
}
@media(prefers-reduced-motion: reduce){
  .pr-card:hover{transform:none}
}

/* ================================================================
   THE MORII JOURNAL
   ----------------------------------------------------------------
   Insights set like a magazine rather than a records office. A tall
   serif masthead, the Almanac as the cover story with the headline
   on the photograph, and the stories underneath in an editorial
   two-column grid: image, kicker, display title, standfirst. The
   photographs breathe on hover.
   ================================================================ */
.mag .mag-head{margin-bottom:20px}
.mag .mag-head h2{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02;
  letter-spacing:-.02em;margin:14px 0 22px}
.mag .mag-head .lead{max-width:52ch}

/* the shelf loses its ledger: no shared hairline background, real air */
.mag .papers{display:grid;grid-template-columns:1fr 1fr;gap:56px 44px;
  background:none;border:0;margin-top:26px}

/* the cover story: full width, headline on the photograph */
.mag .paper.feature{grid-column:1/-1;position:relative;display:block;
  border-radius:26px;overflow:hidden;background:var(--navy)}
.mag .paper.feature .paper-img{height:min(72vh,560px)}
.mag .paper.feature .paper-img img{height:100%;min-height:0;opacity:.85}
.mag .paper.feature .paper-txt{position:absolute;left:0;right:0;bottom:0;
  padding:46px 52px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(10,20,28,.82) 55%)}
.mag .paper.feature .paper-meta{color:var(--gold-light)}
.mag .paper.feature h3{color:#fff;font-size:clamp(2.2rem,4.5vw,3.6rem);line-height:1.05}
.mag .paper.feature .paper-sub{color:rgba(255,255,255,.75)}
.mag .paper.feature .paper-teaser{display:none}   /* the cover sells with six words, not sixty */
.mag .paper.feature .paper-link{color:#fff}
.mag .paper.feature .paper-link.free{color:rgba(255,255,255,.6)}
.mag .paper.feature:hover{background:var(--navy);transform:none}
.mag .paper.feature:hover .paper-img img{transform:scale(1.04)}

/* the stories: stacked editorial cards */
.mag .paper:not(.feature){display:block;background:none;border:0}
.mag .paper:not(.feature):hover{background:none;transform:none}
.mag .paper:not(.feature) .paper-img{height:300px;border-radius:20px;overflow:hidden}
.mag .paper:not(.feature) .paper-img img{min-height:0;height:100%}
.mag .paper:not(.feature):hover .paper-img img{transform:scale(1.06)}
.mag .paper:not(.feature) .paper-txt{padding:22px 4px 0}
.mag .paper:not(.feature) .paper-meta{font-size:.6rem}
.mag .paper:not(.feature) h3{font-size:2rem;line-height:1.08;margin:10px 0 8px;
  transition:color .3s}
.mag .paper:not(.feature):hover h3{color:var(--gold)}
.mag .paper:not(.feature) .paper-sub{font-style:italic;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:1.06rem;color:var(--grey)}
.mag .paper:not(.feature) .paper-teaser{margin-top:10px;font-size:.9rem;
  color:var(--grey);display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.mag .paper:not(.feature) .paper-links{margin-top:14px}
/* every other story flips emphasis so the page has rhythm, not rows */

@media(max-width:900px){
  .mag .papers{grid-template-columns:1fr;gap:44px}
  .mag .paper.feature .paper-txt{padding:26px 22px}
  .mag .paper:not(.feature) .paper-img,
  .mag .paper:not(.feature):nth-of-type(3n) .paper-img{height:230px}
  .mag .paper:not(.feature) h3{font-size:1.6rem}
}

/* ----------------------------------------------------------------
   The Journal set in the dark navy of the rest of the house. The
   photographs become the light on the page; the type goes ivory,
   the accents stay gold, and each story picks up a hairline top
   rule with its number, the way a printed index does.
   ---------------------------------------------------------------- */
.mag.dark{background:
  radial-gradient(120% 70% at 80% 0%,rgba(207,179,136,.07),transparent 55%),
  linear-gradient(180deg,#182b38 0%,#13232f 100%)}
.mag.dark .eyebrow{color:var(--gold-light)}
.mag.dark .mag-head h2{color:#fff}
.mag.dark .mag-head .lead{color:rgba(247,244,238,.7)}
.mag.dark .ins-find svg{stroke:rgba(207,179,136,.6)}
.mag.dark .ins-find input{background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.16);color:#fff}
.mag.dark .ins-find input::placeholder{color:rgba(247,244,238,.4)}
.mag.dark .ins-find input:focus{border-color:var(--gold-light)}
.mag.dark .ins-chip{background:transparent;
  border-color:rgba(255,255,255,.18);color:rgba(247,244,238,.7)}
.mag.dark .ins-chip:hover{border-color:rgba(207,179,136,.55);color:#fff}
.mag.dark .ins-chip.on{background:var(--gold);border-color:var(--gold);color:#182b38}
.mag.dark .ins-none{color:rgba(247,244,238,.55)}
.mag.dark .paper .paper-meta{color:var(--gold-light)}
.mag.dark .paper:not(.feature) .paper-txt{position:relative;padding-top:20px;margin-top:18px;
  border-top:1px solid rgba(255,255,255,.14)}
.mag.dark .paper:not(.feature) h3{color:#fff}
.mag.dark .paper:not(.feature):hover h3{color:var(--gold-light)}
.mag.dark .paper:not(.feature) .paper-sub{color:rgba(247,244,238,.62)}
.mag.dark .paper:not(.feature) .paper-teaser{color:rgba(247,244,238,.5)}
.mag.dark .paper:not(.feature) .paper-link{color:#fff}
.mag.dark .paper:not(.feature) .paper-link:after{background:var(--gold-light)}
.mag.dark .paper:not(.feature) .paper-link.free{color:rgba(247,244,238,.55)}
.mag.dark .paper:not(.feature) .paper-img{box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.mag.dark .paper.feature{box-shadow:0 40px 80px -35px rgba(0,0,0,.7)}

/* --- the brief pages: lists and the one table --- */
.bp-list{list-style:none;margin:0 0 17px;padding:0}
.bp-list li{position:relative;padding:0 0 8px 22px;font-size:1rem;
  line-height:1.7;color:var(--grey)}
.bp-list li:before{content:'';position:absolute;left:2px;top:.72em;width:7px;
  height:1px;background:var(--gold)}
.pp-teaser p{font-size:1.22rem;line-height:1.65;color:var(--navy);margin-bottom:16px}
.pp-teaser{padding-bottom:30px;border-bottom:1px solid var(--line);margin-bottom:40px}
.bp-scroll{overflow-x:auto;margin:6px 0 20px}
.bp-table{width:100%;border-collapse:collapse;font-size:.88rem}
.bp-table th,.bp-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
.bp-table thead th{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);font-weight:500}
.bp-table tbody th{font-weight:500;color:var(--navy)}
.bp-table td{color:var(--grey);font-variant-numeric:tabular-nums}
.bp-table tbody tr:hover{background:#faf8f4}

/* ================================================================
   THE EVENTS CARD, 2026
   ----------------------------------------------------------------
   The navy block with a gold rule on top said hotel-lobby-2015. It
   is a glass card now, with rounded corners and a hairline: dates
   as small gold marks, titles that slide when touched, and beneath
   the events one quiet door into the Shared Ownership Program.
   ================================================================ */
.evpop{border-radius:22px;border-top:0;border:1px solid rgba(255,255,255,.14);
  background:rgba(14,25,34,.88);
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 30px 90px rgba(0,0,0,.5);overflow:hidden;width:360px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .evpop{background:#0e1922}
}
.evpop .hd{padding:22px 26px 12px}
.evpop a.item{position:relative;padding:14px 26px;border-top:1px solid rgba(255,255,255,.07)}
.evpop a.item h5{transition:transform .35s var(--t),color .35s}
.evpop a.item:hover{background:rgba(179,145,95,.09)}
.evpop a.item:hover h5{transform:translateX(6px);color:var(--gold-light)}
.evpop .all{border-top:1px solid rgba(255,255,255,.1)}
/* the program, under the events: the reason this card is worth a corner
   of the screen at all */
.evpop .sop{display:block;padding:20px 26px 22px;background:rgba(179,145,95,.12);
  border-top:1px solid rgba(207,179,136,.3);transition:background .3s}
.evpop .sop:hover{background:rgba(179,145,95,.2)}
.evpop .sop .k{display:block;font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:6px}
.evpop .sop b{display:block;font-family:'Cormorant Garamond',serif;font-size:1.3rem;
  font-weight:500;color:#fff;line-height:1.25;margin-bottom:8px}
.evpop .sop .go{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-light)}

/* ================================================================
   THE PROGRAM CARDS, WITH PHOTOGRAPHY AND A DOOR
   ----------------------------------------------------------------
   The wide cards run a photograph down their right side behind a
   scrim, so the page argues with images as well as words. The last
   card is a door: gold, and it goes somewhere.
   ================================================================ */
.pr-card{display:block;width:100%;text-align:left;font-family:inherit;color:inherit;border:1px solid var(--hair)}
.pr-card .pr-in{position:relative;z-index:2}
.pr-card.has-shot .shot{position:absolute;inset:0;z-index:0}
.pr-card.has-shot .shot img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.pr-card.has-shot:hover .shot img{transform:scale(1.05)}
.pr-card.has-shot .shot:after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,20,27,.96) 0%,rgba(11,20,27,.88) 46%,rgba(11,20,27,.35) 100%)}
.pr-card.has-shot .pr-in{max-width:62%}
@media(max-width:860px){
  .pr-card.has-shot .shot:after{background:linear-gradient(180deg,rgba(11,20,27,.55),rgba(11,20,27,.92) 60%)}
  .pr-card.has-shot .pr-in{max-width:none;padding-top:64px}
}
/* the figures that sell the model, counted up as they come into view */
.pr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:6px 0 22px}
.pr-stats .ps{padding:22px 22px 20px;border:1px solid var(--hair);border-radius:var(--r);
  background:rgba(255,255,255,.02)}
.pr-stats .n{display:block;font-family:'Cormorant Garamond',serif;font-size:2.1rem;line-height:1.1;
  color:var(--gold-light);font-variant-numeric:tabular-nums;margin-bottom:6px}
.pr-stats em{display:block;font-style:normal;font-size:.78rem;color:var(--dim);
  font-weight:300;line-height:1.55}
@media(max-width:1100px){.pr-stats{grid-template-columns:1fr 1fr}}
@media(max-width:480px){
  .pr-stats{gap:10px}
  .pr-stats .ps{padding:16px 16px 14px}
  .pr-stats .n{font-size:1.7rem}
}

/* the story cards: a photograph on top, the argument beneath it */
.pr-card.story{padding:0;display:flex;flex-direction:column}
.pr-card.story .cover{position:relative;display:block;height:172px;overflow:hidden;flex:none}
.pr-card.story .cover img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.pr-card.story:hover .cover img{transform:scale(1.06)}
.pr-card.story .cover:after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,20,27,0) 35%,rgba(11,20,27,.65))}
.pr-card.story .idx{position:absolute;left:18px;bottom:12px;z-index:2;
  font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--gold-light);letter-spacing:.08em}
.pr-card.story .idx:after{content:'';display:inline-block;width:26px;height:1px;
  background:rgba(207,179,136,.6);vertical-align:middle;margin-left:10px}
.pr-card.story .pr-in{padding:22px 26px 26px}
.pr-card.story .ghost{display:none}
@media(max-width:860px){.pr-card.story .cover{height:140px}
  .pr-card.story .pr-in{padding:18px 20px 22px}}

/* ----------------------------------------------------------------
   The terms register for captains and brokers. No photographs and
   no boxes: a serif numeral, the rule, a hairline, the next rule.
   The way a fee schedule should read when it is done well.
   ---------------------------------------------------------------- */
.pr-ledger{border-top:1px solid var(--hair);margin-top:10px}
.lg-row{display:grid;grid-template-columns:84px minmax(220px,300px) 1fr;gap:16px 34px;
  align-items:start;padding:32px 10px 30px;border-bottom:1px solid var(--hair);
  transition:background .35s var(--t)}
.lg-row .lg-n{font-family:'Cormorant Garamond',serif;font-size:2rem;line-height:1;
  color:rgba(207,179,136,.5);transition:color .35s var(--t)}
.lg-row h3{font-size:1.3rem;line-height:1.3;margin:0;max-width:20ch}
.lg-row p{font-size:.94rem;color:var(--dim);font-weight:300;line-height:1.85;
  margin:0;max-width:64ch}
.lg-row:hover{background:linear-gradient(90deg,rgba(207,179,136,.06),transparent 70%)}
.lg-row:hover .lg-n{color:var(--gold-light)}
.pr-ledger + .pr-card.cta{margin-top:30px}
@media(max-width:900px){
  .lg-row{grid-template-columns:1fr;gap:6px;padding:24px 4px 22px}
  .lg-row .lg-n{font-size:1.4rem;margin-bottom:2px}
  .lg-row h3{max-width:none}
}

/* the door at the end */
.pr-card.cta{cursor:pointer;background:linear-gradient(135deg,rgba(179,145,95,.22),rgba(179,145,95,.1));
  border-color:rgba(207,179,136,.5);grid-column:1/-1}
.pr-card.cta:hover{background:linear-gradient(135deg,rgba(179,145,95,.3),rgba(179,145,95,.14));
  transform:translateY(-3px)}
.pr-card.cta .k{display:block;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:10px}
.pr-card.cta h3{max-width:34ch}
.pr-card.cta .pr-go{display:inline-block;margin-top:16px;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-light);border-bottom:1px solid rgba(207,179,136,.5);
  padding-bottom:4px;transition:.3s var(--t)}
.pr-card.cta:hover .pr-go{color:#fff;border-bottom-color:#fff}

/* ================================================================
   THE LIBRARY SHELF
   ----------------------------------------------------------------
   Not a crate of identical boxes: the first two documents stand
   forward with tall covers, the rest sit in the row behind them.
   Covers breathe on hover and the arrow leads the way out.
   ================================================================ */
.lib-grid{grid-template-columns:repeat(6,1fr);gap:16px}
.lib-grid .lib-card{grid-column:span 2}
.lib-grid .lib-card:nth-child(1),.lib-grid .lib-card:nth-child(2){grid-column:span 3}
.lib-grid .lib-card:nth-child(1) .cv,.lib-grid .lib-card:nth-child(2) .cv{height:230px}
.lib-grid .lib-card:nth-child(1) .t,.lib-grid .lib-card:nth-child(2) .t{font-size:1.3rem}
.lib-card{transition:.45s var(--t)}
.lib-card:hover{transform:translateY(-4px);border-color:rgba(207,179,136,.45)}
.lib-card .cv img{transition:transform 1s cubic-bezier(.22,1,.36,1)}
.lib-card:hover .cv img{transform:scale(1.07)}
.lib-card .go{transition:transform .35s var(--t)}
.lib-card:hover .go{transform:translateX(5px)}
@media(max-width:1100px){
  .lib-grid{grid-template-columns:1fr 1fr}
  .lib-grid .lib-card, .lib-grid .lib-card:nth-child(1),.lib-grid .lib-card:nth-child(2){grid-column:span 1}
}
@media(max-width:640px){
  .lib-grid{grid-template-columns:1fr}
}

/* ================================================================
   THE OWNER FAQ AS AN INDEX
   ----------------------------------------------------------------
   Twenty-five chapters read like the index of a book: a sticky rail
   of numbered subjects on the left, the questions grouped under
   their chapter headings on the right, and a gold door to the
   assistant above it all. On a phone the rail lies down and becomes
   the familiar row of chips.
   ================================================================ */
.fq-bot{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;width:100%;text-align:left;cursor:pointer;font-family:inherit;
  color:inherit;border-radius:var(--r);padding:18px 26px;margin:26px 0 6px;
  background:linear-gradient(135deg,rgba(179,145,95,.22),rgba(179,145,95,.09));
  border:1px solid rgba(207,179,136,.5);transition:.35s var(--t)}
.fq-bot:hover{background:linear-gradient(135deg,rgba(179,145,95,.3),rgba(179,145,95,.13));
  transform:translateY(-2px)}
.fq-bot .k{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-light)}
.fq-bot .go{font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-light);border-bottom:1px solid rgba(207,179,136,.5);
  padding-bottom:3px;transition:.3s var(--t)}
.fq-bot:hover .go{color:#fff;border-bottom-color:#fff}

.fq-sec-h{display:flex;align-items:baseline;gap:14px;margin:36px 2px 12px}
.fq-sec-h:first-child{margin-top:4px}
.fq-sec-h .n{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--gold-light)}
.fq-sec-h .t{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.fq-rail-k{display:none}

@media(min-width:901px){
  .fq-grid{display:grid;grid-template-columns:250px 1fr;gap:38px;align-items:start;margin-top:8px}
  .fq-rail{position:sticky;top:92px;max-height:calc(100vh - 120px);overflow:auto;
    scrollbar-width:none}
  .fq-rail::-webkit-scrollbar{display:none}
  .fq-rail-k{display:block;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;
    color:var(--gold-light);margin:20px 0 12px 14px}
  .fq-rail .fq-chips{display:flex;flex-direction:column;gap:0;margin:0;overflow:visible;
    padding:0;border-left:1px solid var(--hair)}
  .fq-rail .fq-chip{border:0;border-left:1px solid transparent;border-radius:0;
    margin-left:-1px;background:none;text-align:left;padding:7px 14px;font-size:.8rem;
    color:var(--dim);white-space:normal;line-height:1.4;transition:.25s var(--t)}
  .fq-rail .fq-chip .n{display:inline-block;min-width:26px;font-size:.66rem;
    color:rgba(207,179,136,.65);letter-spacing:.06em}
  .fq-rail .fq-chip:hover{color:#fff;border-left-color:rgba(255,255,255,.3)}
  .fq-rail .fq-chip.on{background:linear-gradient(90deg,rgba(207,179,136,.12),transparent);
    border-left-color:var(--gold);color:#fff;font-weight:400}
  .fq-main .fq-find{margin-top:0}
}
@media(max-width:900px){
  .fq-chip .n{display:none}
}

/* the page turn when a document opens or the shelf comes back */
@keyframes libTurn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
#dl-room.turn,#dl-shelf.turn{animation:libTurn .45s var(--t) both}
@media(prefers-reduced-motion: reduce){
  #dl-room.turn,#dl-shelf.turn{animation:none}
  .pr-card.cta:hover,.lib-card:hover{transform:none}
}

/* ================================================================
   THE 2026 PASS, PART THREE - the whole public site
   ----------------------------------------------------------------
   The boxes stop being boxes. Everything that held content behind
   a hard 1px rectangle becomes rounded and weightless, marked by a
   short gold tab instead of a full ruled border, and lifts a
   little under the cursor. The offset gold picture-frame -- the
   oldest trick on the page -- is retired; photographs now carry
   soft corners and their own shadow.
   ================================================================ */
/* photographs */
.split-img{border-radius:26px}
.split-img img{border-radius:26px}
.split-img.framed::after{display:none}
.split-img{box-shadow:0 34px 70px -36px rgba(24,43,56,.35)}
.show-media{border-radius:26px;box-shadow:0 34px 70px -36px rgba(24,43,56,.35)}
.brand-card{border-radius:24px}
.brand-card::before{inset:14px;border-radius:14px}

/* cards */
.feat{border-radius:22px;padding:34px 32px;
  transition:transform .4s ease,box-shadow .4s ease}
.feat:hover{transform:translateY(-4px);box-shadow:0 28px 56px -30px rgba(24,43,56,.25)}
.org-card{border-radius:20px;border-top:none;position:relative;overflow:hidden}
.org-card::before{content:'';position:absolute;top:0;left:30px;width:46px;height:3px;
  background:var(--gold);border-radius:0 0 3px 3px}
.ev{border-radius:20px;border-bottom:none;position:relative;overflow:hidden;
  box-shadow:0 1px 0 rgba(24,43,56,.04)}
.ev::after{content:'';position:absolute;bottom:0;left:28px;width:46px;height:3px;
  background:var(--gold);border-radius:3px 3px 0 0}
.step{border-radius:20px;border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.035)}

/* the italic ambition line loses its 1998 sidebar border */
.statement{border-left:none;padding-left:0;position:relative;padding-top:34px}
.statement::before{content:'\201C';position:absolute;top:0;left:-4px;
  font-family:'Cormorant Garamond',serif;font-size:3.4rem;line-height:1;
  color:var(--gold);opacity:.9}

/* ================================================================
   THE JOURNAL AS A LIVING BLOG
   ----------------------------------------------------------------
   One masthead instead of two stacked heroes; a pulse line that
   says when it last grew; the toolbar rides along under the nav
   while you scroll; the newest pieces wear a gold NEW; and the
   fourth story lies down across the page so the grid never turns
   into wallpaper.
   ================================================================ */
.jr-hero .wrap{max-width:880px}
.mag-issue{display:flex;align-items:center;gap:12px;margin-top:26px;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light)}
.mag-issue .dot{width:8px;height:8px;border-radius:50%;background:#8fd8ab;flex:none;
  box-shadow:0 0 0 0 rgba(143,216,171,.5);animation:issuePulse 2.6s ease-out infinite}
@keyframes issuePulse{
  0%{box-shadow:0 0 0 0 rgba(143,216,171,.45)}
  70%{box-shadow:0 0 0 9px rgba(143,216,171,0)}
  100%{box-shadow:0 0 0 0 rgba(143,216,171,0)}
}

.mag.dark .ins-tools{position:sticky;top:70px;z-index:6;
  margin:0 -16px 10px;padding:12px 16px;border-radius:20px;
  background:rgba(15,26,34,.86);backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  border:1px solid rgba(255,255,255,.07)}
@media(max-width:900px){.mag.dark .ins-tools{margin:0 0 10px;top:62px}}

.mag-new{display:inline-block;margin-left:10px;padding:3px 10px 2px;border-radius:999px;
  background:var(--gold);color:#16242e;font-size:.54rem;letter-spacing:.18em;
  font-weight:600;text-transform:uppercase;vertical-align:1px}



.mag-foot{margin-top:60px;text-align:center;font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(247,244,238,.45)}
.mag-foot b{color:var(--gold-light);font-weight:500;letter-spacing:inherit}
@media(prefers-reduced-motion: reduce){.mag-issue .dot{animation:none}}

/* ----------------------------------------------------------------
   Headlines on one line. The 720px cage around section heads broke
   every title in two; the cage widens, the leads stay at a
   readable measure, and the brand-card VISIT link stops folding.
   ---------------------------------------------------------------- */
.section-head{max-width:1000px}
.section-head h2{letter-spacing:-.01em}
.section-head p.lead{max-width:64ch}
.page-hero p.sub{max-width:880px}
.brand-card .visit{white-space:nowrap;font-size:.6rem;letter-spacing:.12em}

/* the photo bands can never tile, whatever else touches their background */
.overlay-section{background-size:cover !important;background-repeat:no-repeat !important;
  background-position:center !important}

/* ================================================================
   READING IN THE DARK
   ----------------------------------------------------------------
   The article pages join the Journal: deep navy, ivory type, gold
   numerals. Opening a story no longer feels like stepping out of
   the magazine into an office.
   ================================================================ */
.pp-dark{background:
  radial-gradient(120% 60% at 85% 0%,rgba(207,179,136,.06),transparent 55%),
  linear-gradient(180deg,#182b38 0%,#13232f 100%)}
.pp-dark .pp-nav-k{color:var(--gold-light)}
.pp-dark .pp-nav a{color:rgba(247,244,238,.55);border-left-color:rgba(255,255,255,.14)}
.pp-dark .pp-nav a:hover{color:#fff}
.pp-dark .pp-nav a.on{color:#fff;border-left-color:var(--gold)}
.pp-dark .pp-nav a.on span,.pp-dark .pp-nav a span{color:rgba(207,179,136,.75)}
.pp-dark .pp-teaser{border-bottom-color:rgba(255,255,255,.14)}
.pp-dark .pp-teaser p{color:#f2ede4}
.pp-dark .pp-s h2{color:#fff}
.pp-dark .pp-n{color:var(--gold-light)}
.pp-dark .pp-s p{color:rgba(247,244,238,.68)}
.pp-dark .pp-pull{border-left-color:rgba(207,179,136,.7)}
.pp-dark .pp-pull p{color:var(--gold-light)}
.pp-dark .bp-list li{color:rgba(247,244,238,.68)}
.pp-dark .bp-list li:before{background:var(--gold-light)}
.pp-dark .bp-table th,.pp-dark .bp-table td{border-bottom-color:rgba(255,255,255,.14);
  color:rgba(247,244,238,.75)}
.pp-dark .bp-table thead th{color:var(--gold-light)}
.pp-dark .bp-table tbody th{color:#fff}
.pp-dark .pp-end{border-top-color:rgba(255,255,255,.14)}
.pp-dark .pp-end h3{color:#fff}
.pp-dark .pp-end p{color:rgba(247,244,238,.6)}
.pp-dark .pp-end .eyebrow{color:var(--gold-light)}
.pp-dark .pp-more-card{background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);border-radius:20px;overflow:hidden}
.pp-dark .pp-more-card:hover{border-color:rgba(207,179,136,.4);
  box-shadow:0 24px 50px -26px rgba(0,0,0,.6)}
.pp-dark .pp-more-txt h3{color:#fff}
.pp-dark .pp-more-txt p{color:rgba(247,244,238,.55)}
.pp-dark .pp-more-txt .k{color:var(--gold-light)}

/* two headlines that live in half-width columns: sized to stay on one line */
.h2-one{white-space:nowrap;font-size:clamp(1.5rem,2.55vw,2.35rem)}
@media(max-width:760px){.h2-one{white-space:normal;font-size:clamp(1.6rem,6vw,2rem)}}

/* ================================================================
   THE 2026 PASS, PART FOUR - navigation
   ----------------------------------------------------------------
   The dropdowns stop being 2014 admin panels. They are sheets of
   glass now: rounded, blurred, floating free of the bar, and the
   items arrive one after another with a little rise. The caret
   turns when the menu is open, links glide right as you touch
   them, and the external arrows lean into their corner.
   ================================================================ */
@media(min-width:1181px){
  .drop{background:rgba(17,30,40,.78);
    backdrop-filter:blur(24px) saturate(150%);
    -webkit-backdrop-filter:blur(24px) saturate(150%);
    border:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12);
    border-radius:18px;padding:10px;min-width:280px;left:-14px;
    top:calc(100% + 18px);
    box-shadow:0 36px 80px -24px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.12);
    transform:translateY(12px) scale(.985);transform-origin:top left;
    transition:opacity .32s cubic-bezier(.22,1,.36,1),
      transform .32s cubic-bezier(.22,1,.36,1),visibility .32s}
  .has-drop:hover .drop,.has-drop.open .drop{transform:none}
  .drop a{border-radius:12px;padding:12px 16px;letter-spacing:.14em;
    transition:background .25s ease,color .25s ease,padding-left .25s ease}
  .drop a:hover{background:rgba(207,179,136,.13);color:#fff;padding-left:22px}
  .drop a span.ext{transition:transform .25s ease}
  .drop a:hover span.ext{transform:translate(2px,-2px)}
  .drop .drop-note{padding:12px 16px 8px;font-size:.54rem;color:rgba(255,255,255,.35)}
  .drop li{opacity:0;transform:translateY(7px);
    transition:opacity .3s ease,transform .3s ease}
  .has-drop:hover .drop li,.has-drop.open .drop li{opacity:1;transform:none}
  .has-drop:hover .drop li:nth-child(2),.has-drop.open .drop li:nth-child(2){transition-delay:.04s}
  .has-drop:hover .drop li:nth-child(3),.has-drop.open .drop li:nth-child(3){transition-delay:.08s}
  .has-drop:hover .drop li:nth-child(4),.has-drop.open .drop li:nth-child(4){transition-delay:.12s}
  .has-drop:hover .drop li:nth-child(5),.has-drop.open .drop li:nth-child(5){transition-delay:.16s}
  .has-drop > a::after{display:inline-block;transition:transform .3s ease}
  .has-drop:hover > a::after{transform:rotate(180deg)}
}
@media (prefers-reduced-motion: reduce){
  .drop li{opacity:1;transform:none;transition:none}
  .drop{transition:opacity .2s}
}

/* ================================================================
   THE 2026 PASS, PART FIVE - the details people feel
   ----------------------------------------------------------------
   The holding block, the fleet table, the newsletter, the team
   portraits, the text you select: the last places where the site
   still felt like a document instead of a product.
   ================================================================ */
::selection{background:var(--gold);color:#fff}

.org-hold{border-radius:22px;box-shadow:0 30px 60px -30px rgba(24,43,56,.4)}

/* the fleet table becomes a card: rounded shell, breathing rows */
.table-scroll{border:1px solid var(--line);border-radius:20px;
  background:#fff;padding:6px 18px 2px;
  box-shadow:0 24px 55px -35px rgba(24,43,56,.25)}
.price-table th{border-bottom:1px solid var(--line)}
.price-table tbody tr:hover{background:rgba(179,145,95,.06)}
.price-table tbody tr:last-child td{border-bottom:none}

/* newsletter as one pill */
.nl-form input{border-radius:999px;padding:12px 18px;
  background:rgba(255,255,255,.06)}
.nl-form input:focus{border-color:var(--gold-light);outline:none}
.nl-form button{border-radius:999px;padding:12px 22px}

/* team portraits and the contact photograph */
.tm-img{border-radius:18px}
.contact-img{border-radius:24px;overflow:hidden;
  box-shadow:0 34px 70px -36px rgba(24,43,56,.35)}
.contact-img img{border-radius:24px}

/* quiet arrow links glide instead of sitting still */
a.more{position:relative;transition:color .3s}
a.more:hover{color:var(--gold)}

/* the growth line breathes gold */
.timeline::before{background:linear-gradient(90deg,rgba(207,179,136,.15),
  rgba(207,179,136,.6),rgba(207,179,136,.15))}

/* the three percentages line up whatever their labels do above them:
   the cards share grid rows, so every big number sits on the same line */
.vs-one{display:grid;grid-template-rows:minmax(2.9em,auto) auto auto;align-content:start}
@supports(grid-template-rows:subgrid){
  .vs-three{grid-template-rows:auto auto auto}
  .vs-one{grid-row:span 3;grid-template-rows:subgrid}
}

/* ================================================================
   THE SIMULATION, AFTER ARMIN'S NOTES
   ----------------------------------------------------------------
   The yacht herself opens the result panel: a quiet carousel, and a
   click makes her full screen. The mix counters sit under every way
   of booking at once. A hand-adjusted week count announces that the
   booking behaviour has changed.
   ================================================================ */
/* the carousel */
.yc{position:relative;margin:-4px 0 22px;border-radius:16px;overflow:hidden;
  height:210px;background:var(--app-2);cursor:zoom-in}
.yc img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s cubic-bezier(.22,1,.36,1)}
.yc:hover img{transform:scale(1.04)}
.yc:after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,20,27,0) 55%,rgba(11,20,27,.45))}
.yc .yc-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(11,20,27,.45);backdrop-filter:blur(6px);color:#fff;font-size:1.2rem;
  line-height:1;cursor:pointer;transition:.25s var(--t);opacity:0}
.yc:hover .yc-nav{opacity:1}
.yc .yc-nav.prev{left:12px}
.yc .yc-nav.next{right:12px}
.yc .yc-nav:hover{background:var(--gold);border-color:var(--gold);color:#0b141b}
.yc .yc-zoom{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;
  border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(11,20,27,.45);
  backdrop-filter:blur(6px);color:#fff;cursor:pointer;transition:.25s var(--t)}
.yc .yc-zoom:hover{background:var(--gold);border-color:var(--gold);color:#0b141b}
.yc-dots{position:absolute;left:0;right:0;bottom:10px;z-index:3;display:flex;
  justify-content:center;gap:6px}
.yc-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);
  transition:.25s}
.yc-dots i.on{background:var(--gold-light);transform:scale(1.25)}

/* full screen */
.yc-box{position:fixed;inset:0;z-index:260;background:rgba(8,15,21,.94);
  backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center}
.yc-box[hidden]{display:none}
.yc-box img{max-width:92vw;max-height:88vh;border-radius:14px;
  box-shadow:0 50px 120px -30px rgba(0,0,0,.8)}
.yc-box .x{position:absolute;top:22px;right:26px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:none;color:#fff;font-size:1rem;
  cursor:pointer;transition:.25s var(--t)}
.yc-box .x:hover{background:var(--gold);border-color:var(--gold);color:#0b141b}
.yc-box .yc-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
  border-radius:50%;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;
  font-size:1.5rem;cursor:pointer;transition:.25s var(--t)}
.yc-box .yc-nav.prev{left:26px}
.yc-box .yc-nav.next{right:26px}
.yc-box .yc-nav:hover{background:var(--gold);border-color:var(--gold);color:#0b141b}
body.yc-open{overflow:hidden}

/* the mix counters: every way of booking carries its own, always */
.us-opt .pick.as-txt{cursor:default}
.us-opt.mix .n{margin-top:auto}

/* a hand-tuned week count says what it means */
.vs-warn{margin-top:12px;padding:13px 16px;border-radius:12px;
  border:1px solid rgba(207,179,136,.55);background:rgba(179,145,95,.13);
  font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.8)}
.vs-warn b{color:var(--gold-light);font-weight:500}

/* the price list, one click away wherever it is mentioned */
.pl-link{background:none;border:none;padding:0;font:inherit;cursor:pointer;
  color:var(--gold-light);border-bottom:1px solid rgba(207,179,136,.5)}
.pl-link:hover{color:#fff;border-bottom-color:#fff}

/* ================================================================
   READING IN THE DARK, PART TWO
   ----------------------------------------------------------------
   The paper pages open with .pp-lead, which the first dark pass
   missed -- navy on navy, invisible. Fixed, and given a gold drop
   cap. The Almanac joins the dark, chapter furniture and all. And
   the pages MOVE now: paragraphs arrive one after another, every
   section heading draws its own gold rule, the pull quote grows
   its bar, the drop caps glow gold.
   ================================================================ */
.pp-dark .pp-lead{color:#f2ede4}
.pp-dark .pp-lead::first-letter{font-family:'Cormorant Garamond',serif;
  font-size:3.3em;float:left;line-height:.78;padding:6px 12px 0 0;
  color:var(--gold-light)}
.pp-dark .section-head h2,.pp-dark h2{color:#fff}
.pp-dark .section-head p.lead{color:rgba(247,244,238,.65)}
.pp-dark .eyebrow{color:var(--gold-light)}

/* --- motion: the page assembles itself as you reach it --- */
.pp-dark .pp-s h2::after{content:'';grid-column:2;width:0;height:1px;
  margin-top:12px;background:linear-gradient(90deg,var(--gold),transparent);
  transition:width 1.1s cubic-bezier(.22,1,.36,1) .15s}
.pp-dark .pp-s.visible h2::after{width:130px}
.pp-dark .pp-s p{opacity:0;transform:translateY(14px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.pp-dark .pp-s.visible p{opacity:1;transform:none}
.pp-dark .pp-s.visible p:nth-of-type(2){transition-delay:.1s}
.pp-dark .pp-s.visible p:nth-of-type(3){transition-delay:.2s}
.pp-dark .pp-s.visible p:nth-of-type(4){transition-delay:.3s}
.pp-dark .pp-s.visible p:nth-of-type(n+5){transition-delay:.4s}
.pp-dark .pp-pull{border-left-width:2px;position:relative;overflow:hidden}
.pp-dark .pp-pull p{opacity:0;transform:translateX(18px);
  transition:opacity .9s ease .2s,transform .9s cubic-bezier(.22,1,.36,1) .2s}
.pp-dark .pp-pull.visible p{opacity:1;transform:none}

/* --- the Almanac in the same navy --- */
.alm-dark .alm-figs{background:rgba(255,255,255,.12)}
.alm-dark .alm-figs > div{background:#16242f}
.alm-dark .alm-figs b{color:var(--gold-light)}
.alm-dark .alm-figs span{color:rgba(247,244,238,.55)}
.alm-dark .alm-toc{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12)}
.alm-dark .alm-toc a{background:#16242f;color:#f2ede4}
.alm-dark .alm-toc a:hover{background:#1c2e3b}
.alm-dark .alm-toc a span{color:var(--gold-light)}
.alm-dark .ab-item h3{color:#fff}
.alm-dark .ab-item p,.alm-dark .at-item p,.alm-dark .at-hd p{color:rgba(247,244,238,.62)}
.alm-dark .at-item span{color:var(--gold-light)}
.alm-dark .alm-trade{border-top-color:rgba(255,255,255,.14)}
.alm-dark .ai-k{color:var(--gold-light)}
.alm-dark .ai-t p{color:rgba(247,244,238,.62)}
.alm-dark .ai-t p:first-child{color:#f2ede4}
.alm-dark .alm-rail-k{color:var(--gold-light)}
.alm-dark .alm-rail a{color:rgba(247,244,238,.55);border-left-color:rgba(255,255,255,.14)}
.alm-dark .alm-rail a:hover{color:#fff}
.alm-dark .alm-rail a.on{color:#fff;border-left-color:var(--gold)}
.alm-dark .alm-rail a span,.alm-dark .alm-rail a.on span{color:rgba(207,179,136,.75)}
.alm-dark .alm-chapters{background:rgba(255,255,255,.1);
  border-top-color:rgba(255,255,255,.12);border-bottom-color:rgba(255,255,255,.12)}
.alm-dark .ac-ch{background:#16242f}
.alm-dark .ac-txt h3{color:#fff}
.alm-dark .ac-sub{color:rgba(247,244,238,.5)}
.alm-dark .ac-txt p,.alm-dark .ac-list li{color:rgba(247,244,238,.62)}
.alm-dark .ac-q{color:var(--gold-light);border-left-color:rgba(207,179,136,.7)}
.alm-dark .ac-h{color:var(--gold-light)}
.alm-dark .ac-broker{border-top-color:rgba(255,255,255,.14)}
.alm-dark .ac-broker span{color:var(--gold-light)}
.alm-dark .ac-broker p{color:rgba(247,244,238,.6)}
.alm-dark .ac-sub + p::first-letter{color:var(--gold-light)}
.alm-dark .alm-get-txt .lead{color:rgba(247,244,238,.65)}
.alm-dark .alm-get-fig img{border-radius:18px;
  box-shadow:0 34px 70px -34px rgba(0,0,0,.6)}

/* the almanac turns its page with the same rise the library uses */
.alm-chapters.reader .ac-ch.on{animation:libTurn .5s var(--t) both}

@media (prefers-reduced-motion: reduce){
  .pp-dark .pp-s p,.pp-dark .pp-pull p{opacity:1;transform:none;transition:none}
  .pp-dark .pp-s h2::after{transition:none;width:130px}
  .alm-chapters.reader .ac-ch.on{animation:none}
}

/* the yacht carousels, everywhere they appear */
.yc{background:#101c25}
.yc.solo .yc-nav,.yc.solo .yc-dots{display:none}
.yc.solo{cursor:zoom-in}
@media(hover:none){.yc .yc-nav{opacity:1}}
.psim-res .yc{margin:0 0 20px;height:230px}
@media(max-width:640px){.psim-res .yc{height:170px}}

/* ================================================================
   THE FINISH - the details that make a site feel engineered
   ----------------------------------------------------------------
   A page that breathes in when it opens. Heroes whose lines arrive
   one after the other, with a quiet scroll cue at the bottom. Nav
   links that underline themselves. Buttons that lift. A scrollbar
   and focus ring in the house colours. A way back to the top.
   ================================================================ */
/* the page breathes in */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body{animation:pageIn .5s ease both}

/* the hero assembles itself */
@keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero .eyebrow,.page-hero .eyebrow{animation:heroUp .9s cubic-bezier(.22,1,.36,1) .15s both}
.hero h1,.page-hero h1{animation:heroUp 1s cubic-bezier(.22,1,.36,1) .3s both}
.hero p.sub,.page-hero p.sub,.jr-hero .mag-issue{animation:heroUp 1s cubic-bezier(.22,1,.36,1) .5s both}
.hero .btn{animation:heroUp 1s cubic-bezier(.22,1,.36,1) .68s both}

/* a quiet cue that there is more below */
.scroll-cue{position:absolute;left:50%;bottom:26px;width:1px;height:52px;z-index:5;
  background:rgba(255,255,255,.22);overflow:hidden;pointer-events:none}
.scroll-cue::after{content:'';position:absolute;left:0;top:-40%;width:100%;height:40%;
  background:var(--gold-light);animation:cueDrop 2.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cueDrop{0%{top:-40%}70%,100%{top:110%}}

/* the nav underlines itself */
nav > .wrap > ul > li:not(.has-drop) > a:not(.nav-cta){position:relative;padding-bottom:5px}
nav > .wrap > ul > li:not(.has-drop) > a:not(.nav-cta)::after{content:'';position:absolute;
  left:0;right:0;bottom:0;height:1px;background:var(--gold-light);transform:scaleX(0);
  transform-origin:left;transition:transform .35s cubic-bezier(.22,1,.36,1)}
nav > .wrap > ul > li:not(.has-drop) > a:not(.nav-cta):hover::after,
nav > .wrap > ul > li:not(.has-drop) > a.active:not(.nav-cta)::after{transform:scaleX(1)}

/* buttons lift */
.btn{transition:all .35s cubic-bezier(.22,1,.36,1)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(179,145,95,.55)}

/* the ticker waits while you read it */
.marquee-track:hover{animation-play-state:paused}

/* back to the top */
.to-top{position:fixed;left:26px;bottom:26px;z-index:150;width:46px;height:46px;
  border-radius:50%;border:1px solid rgba(207,179,136,.5);cursor:pointer;
  background:rgba(24,43,56,.78);backdrop-filter:blur(10px);color:var(--gold-light);
  font-size:1rem;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:.4s cubic-bezier(.22,1,.36,1)}
.to-top.on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--gold);border-color:var(--gold);color:#0b141b}
@media(max-width:700px){.to-top{left:16px;bottom:16px;width:42px;height:42px}}

/* the house scrollbar and focus ring */
html{scrollbar-color:rgba(179,145,95,.55) rgba(24,43,56,.15);scrollbar-width:thin}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#111e28}
::-webkit-scrollbar-thumb{background:#3a5061;border-radius:8px;border:2px solid #111e28}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:3px}

@media (prefers-reduced-motion: reduce){
  body,.hero .eyebrow,.page-hero .eyebrow,.hero h1,.page-hero h1,
  .hero p.sub,.page-hero p.sub,.jr-hero .mag-issue,.hero .btn{animation:none}
  .scroll-cue{display:none}
  .btn:hover{transform:none}
}

/* ================================================================
   THE 2026 PASS, PART SIX - the last of the boxes
   ----------------------------------------------------------------
   The public simulation becomes one rounded card with real depth,
   its options become pills and the chosen one turns gold. The
   membership cards, journey stats, platform panels, week chips,
   badges and the WhatsApp card all lose their hard corners. After
   this pass there is no 1px rectangle left on the site.
   ================================================================ */
/* the public taste of the simulation */
.psim{border-radius:26px;overflow:hidden;
  box-shadow:0 46px 96px -50px rgba(24,43,56,.42)}
.psim-name{font-size:2.3rem}
.psim-opt{border-radius:999px;padding:12px 20px;
  transition:all .3s cubic-bezier(.22,1,.36,1)}
.psim-opt:hover{transform:translateY(-1px)}
.psim-opt.on{background:var(--gold);border-color:var(--gold);color:#fff}

/* the journey simulator on /start */
.simopt{border-radius:999px;padding:12px 20px;
  transition:all .3s cubic-bezier(.22,1,.36,1)}
.simopt.wide{border-radius:18px}
.simopt:hover{transform:translateY(-1px)}
body:not(.bridge) .simopt.on{background:var(--gold);border-color:var(--gold);color:#fff}
body:not(.bridge) .simres{border-radius:24px;overflow:hidden}
body:not(.bridge) .simres:before{left:32px;border-radius:0 0 3px 3px}
body:not(.bridge) .simgrid{border-radius:16px;overflow:hidden}

/* cells in a shell */
.jstats,.op-cards{border-radius:20px;overflow:hidden}
.eco-card{border-radius:22px;overflow:hidden}
.badge{border-radius:999px}
.model{border-radius:20px}
.model:hover{box-shadow:0 26px 52px -30px rgba(24,43,56,.25)}
.op-box{border-radius:20px}
.op-yacht img{border-radius:14px}
.wk{border-radius:12px}
.signin-box{border-radius:18px}
.signin-row input,.owner-box input{border-radius:12px}
.dl-view{border-radius:20px}
.wa{border-radius:22px;box-shadow:0 26px 55px -35px rgba(24,43,56,.22)}
.wa-qr img{border-radius:14px}
.jcards article{border-top:none;position:relative;padding-top:24px}
.jcards article::before{content:'';position:absolute;top:0;left:0;width:46px;height:3px;
  background:var(--gold);border-radius:3px}

/* ================================================================
   TEASER FREE, FULL AFTER THE ONE REGISTRATION
   ----------------------------------------------------------------
   Every insight now works the way Armin's folder is organised: the
   short version reads free, and a gold door in the page opens the
   complete paper for anyone who has registered - on this visit or
   any earlier one. Nothing is fetched or hidden by trickery: the
   full text is on the page, and the same body.papers-open class
   that has always unlocked the PDFs now unlocks the reading.
   ================================================================ */
.pp-gatecard{margin:46px 0;padding:34px 36px;border-radius:22px;position:relative;
  background:linear-gradient(135deg,rgba(179,145,95,.16),rgba(179,145,95,.05));
  border:1px solid rgba(179,145,95,.45)}
.pp-gatecard .k{display:block;font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.pp-gatecard h3{font-size:1.5rem;margin:0 0 10px}
.pp-gatecard p{font-size:.95rem;line-height:1.75;color:var(--grey);
  margin:0 0 20px;max-width:58ch}
.pp-dark .pp-gatecard{background:linear-gradient(135deg,rgba(179,145,95,.2),rgba(179,145,95,.07));
  border-color:rgba(207,179,136,.5)}
.pp-dark .pp-gatecard h3{color:#fff}
.pp-dark .pp-gatecard p{color:rgba(247,244,238,.65)}
.pp-dark .pp-gatecard .k{color:var(--gold-light)}

/* the full paper: present, and closed until the door is opened */
body:not(.papers-open) .pp-full{display:none}
body.papers-open .pp-gatecard{display:none}
body:not(.papers-open) .pp-full-area{display:none}
body.papers-open #alm-gate{display:none}

.pp-full-hd{margin:54px 0 22px;padding-top:34px;border-top:1px solid var(--line)}
.pp-dark .pp-full-hd{border-top-color:rgba(255,255,255,.14)}
.pp-full-hd .k{display:block;font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.pp-dark .pp-full-hd .k{color:var(--gold-light)}
.pp-full-hd h2{font-size:1.9rem;margin:0}
.pp-dark .pp-full-hd h2{color:#fff}

/* the chapter index of the full edition */
.pp-full-ix{display:grid;grid-template-columns:1fr 1fr;gap:2px 30px;margin:20px 0 44px}
.pp-full-ix a{display:grid;grid-template-columns:30px 1fr;gap:8px;padding:7px 0;
  font-size:.86rem;line-height:1.45;color:var(--grey);text-decoration:none;
  border-bottom:1px solid var(--line);transition:color .25s}
.pp-full-ix a span{font-size:.62rem;letter-spacing:.1em;color:var(--gold)}
.pp-full-ix a:hover{color:var(--navy)}
.pp-dark .pp-full-ix a{color:rgba(247,244,238,.6);border-bottom-color:rgba(255,255,255,.1)}
.pp-dark .pp-full-ix a:hover{color:#fff}
.pp-dark .pp-full-ix a span{color:rgba(207,179,136,.75)}
@media(max-width:700px){.pp-full-ix{grid-template-columns:1fr}}

/* the full chapters read exactly like the rest of the page */
.fp-s{margin-bottom:44px;scroll-margin-top:100px}
.fp-s h2{font-size:1.55rem;line-height:1.25;margin-bottom:14px;display:grid;
  grid-template-columns:44px 1fr;gap:10px;align-items:baseline}
.pp-dark .fp-s h2{color:#fff}
.fp-s p{font-size:1rem;line-height:1.85;color:var(--grey);margin-bottom:16px}
.pp-dark .fp-s p{color:rgba(247,244,238,.66)}
.fp-s p.pb,.pp-s p.pb{font-weight:500;color:var(--navy)}
.pp-dark .fp-s p.pb,.pp-dark .pp-s p.pb{color:#f2ede4;font-weight:400}

/* ================================================================
   THE WAY IN - are you curious about this, then read that
   ----------------------------------------------------------------
   Four doors. Press one and the three steps appear: read the short
   version, try the numbers, register once for everything. The same
   component wears ivory on the homepage and navy in the Journal.
   ================================================================ */
.fin{margin:0 0 26px}
.fin-hd{max-width:760px;margin-bottom:26px}
.fin-hd h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:10px 0 10px}
.fin-hd .lead{font-size:1.02rem;color:var(--grey)}
.fin-qs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.fin-q{font-family:inherit;text-align:left;cursor:pointer;border-radius:18px;
  padding:18px 20px;background:#fff;border:1px solid var(--line);
  transition:all .3s cubic-bezier(.22,1,.36,1)}
.fin-q b{display:block;font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:1.18rem;color:var(--navy);line-height:1.25;margin-bottom:5px}
.fin-q span{display:block;font-size:.78rem;line-height:1.5;color:var(--grey);font-weight:300}
.fin-q:hover{transform:translateY(-2px);border-color:rgba(179,145,95,.6)}
.fin-q.on{background:var(--navy);border-color:var(--navy)}
.fin-q.on b{color:#fff}
.fin-q.on span{color:rgba(255,255,255,.65)}
.fin-a{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fin-a[hidden]{display:none}
@keyframes finIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fin-a.turnin .fin-step{animation:finIn .5s cubic-bezier(.22,1,.36,1) both}
.fin-a.turnin .fin-step:nth-child(2){animation-delay:.08s}
.fin-a.turnin .fin-step:nth-child(3){animation-delay:.16s}
.fin-step{position:relative;display:block;border-radius:18px;padding:20px 22px 22px;
  background:linear-gradient(135deg,rgba(179,145,95,.1),rgba(179,145,95,.03));
  border:1px solid rgba(179,145,95,.35);text-decoration:none;color:inherit;
  transition:all .3s cubic-bezier(.22,1,.36,1)}
.fin-step:hover{transform:translateY(-3px);border-color:var(--gold);
  box-shadow:0 20px 44px -24px rgba(24,43,56,.3)}
.fin-step .n{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--gold);
  margin-right:8px}
.fin-step .k{font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.fin-step b{display:block;font-size:1.02rem;color:var(--navy);margin:7px 0 4px;font-weight:500}
.fin-step .s{display:block;font-size:.78rem;line-height:1.5;color:var(--grey);font-weight:300}
.fin-step .go{position:absolute;right:18px;bottom:14px;color:var(--gold);
  transition:transform .3s}
.fin-step:hover .go{transform:translateX(4px)}

/* in the Journal it wears navy */
.fin.dark{margin:6px 0 40px}
.fin.dark .fin-hd h2{color:#fff}
.fin.dark .fin-hd .lead{color:rgba(247,244,238,.6)}
.fin.dark .fin-q{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.14)}
.fin.dark .fin-q b{color:#fff}
.fin.dark .fin-q span{color:rgba(247,244,238,.5)}
.fin.dark .fin-q:hover{border-color:rgba(207,179,136,.55)}
.fin.dark .fin-q.on{background:var(--gold);border-color:var(--gold)}
.fin.dark .fin-q.on b{color:#16242e}
.fin.dark .fin-q.on span{color:rgba(22,36,46,.75)}
.fin.dark .fin-step{background:rgba(179,145,95,.1);border-color:rgba(207,179,136,.3)}
.fin.dark .fin-step b{color:#fff}
.fin.dark .fin-step .s{color:rgba(247,244,238,.55)}
.fin.dark .fin-step .k,.fin.dark .fin-step .n,.fin.dark .fin-step .go{color:var(--gold-light)}
.fin.dark .fin-step:hover{border-color:rgba(207,179,136,.7);
  box-shadow:0 24px 50px -26px rgba(0,0,0,.55)}
@media(max-width:1000px){.fin-qs{grid-template-columns:1fr 1fr}.fin-a{grid-template-columns:1fr}}
@media(max-width:520px){.fin-qs{grid-template-columns:1fr}}
@media(prefers-reduced-motion: reduce){.fin-a.turnin .fin-step{animation:none}}

/* ================================================================
   THE COMPASS, EVERYWHERE PEOPLE ARRIVE
   ----------------------------------------------------------------
   Four glass chips in the hero take you straight to the way-in,
   with the right door already open. And the corner popup is no
   longer an events board: it asks the one question that routes
   the whole site, with Cannes kept as a single quiet line.
   ================================================================ */
.hero-fin{margin-top:38px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  justify-content:center;animation:heroUp 1s cubic-bezier(.22,1,.36,1) .85s both}
.hero-fin .hf-k{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-right:6px}
.hero-fin a{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.85);padding:10px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.35);background:rgba(11,20,27,.25);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:all .3s cubic-bezier(.22,1,.36,1)}
.hero-fin a:hover{border-color:var(--gold-light);color:#fff;
  background:rgba(179,145,95,.25);transform:translateY(-2px)}
@media(max-width:700px){.hero-fin{gap:8px}.hero-fin .hf-k{width:100%;margin:0 0 2px}}
.fin{scroll-margin-top:90px}

/* the popup as the compass */
.evpop.finpop .fw-lead{font-family:'Cormorant Garamond',serif;font-size:1.45rem;
  color:#fff;margin:16px 22px 8px;line-height:1.2}
.evpop.finpop .fw{display:grid;grid-template-columns:1fr auto;gap:2px 12px;
  align-items:center;padding:11px 22px;text-decoration:none;
  transition:background .25s,padding-left .25s}
.evpop.finpop .fw b{font-size:.9rem;font-weight:400;color:#fff;grid-column:1}
.evpop.finpop .fw span{font-size:.72rem;color:rgba(255,255,255,.5);grid-column:1;
  font-weight:300}
.evpop.finpop .fw i{grid-column:2;grid-row:1/3;font-style:normal;color:var(--gold-light);
  transition:transform .25s}
.evpop.finpop .fw:hover{background:rgba(207,179,136,.12);padding-left:26px}
.evpop.finpop .fw:hover i{transform:translateX(3px)}
.evpop.finpop .fw-ev{display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-top:8px;padding:12px 22px 16px;text-decoration:none;
  border-top:1px solid rgba(255,255,255,.12)}
.evpop.finpop .fw-ev span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.45)}
.evpop.finpop .fw-ev i{font-style:normal;color:var(--gold-light)}
.evpop.finpop .fw-ev:hover span{color:var(--gold-light)}

/* one door, not two: before registration the gold card is the only
   block; the PDF panel appears only once the full text is open, as
   the natural end of the reading */
body:not(.papers-open) .pp-end{display:none}
body:not(.papers-open) #full{display:none}

/* ================================================================
   THE ISSUE, SET LIKE PRINT
   ----------------------------------------------------------------
   No more even grid: the issue is laid out the way an editor would
   run it. A contents column like the front of a magazine. A strip
   across the page to open, duos that breathe, a wide spread to
   turn the page, a strip to close - each story wearing its printed
   number as an outlined numeral. Filtering folds everything back
   into a quiet, even grid, because a designed sequence only makes
   sense complete.
   ================================================================ */
/* the contents column */
.issue-ix{position:static;padding-top:28px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 46px;
  margin:6px 0 50px;padding:28px 32px 22px;border-radius:22px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1)}
.issue-ix .ix-k{grid-column:1/-1;font-size:.58rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-light);margin-bottom:12px}
.issue-ix a{display:grid;grid-template-columns:52px 1fr auto;gap:14px;
  align-items:baseline;padding:10px 2px;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.08);transition:.25s}
.issue-ix a .n{font-family:'Cormorant Garamond',serif;font-size:1.02rem;
  color:rgba(207,179,136,.8)}
.issue-ix a b{font-weight:400;font-size:.94rem;color:rgba(247,244,238,.8);
  line-height:1.4;transition:color .25s}
.issue-ix a i{font-style:normal;font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(247,244,238,.35)}
.issue-ix a:hover{padding-left:8px}
.issue-ix a:hover b{color:#fff}
@media(max-width:800px){.issue-ix{grid-template-columns:1fr;padding:22px 22px 16px}}

/* the run of the issue */
.mag .papers{grid-template-columns:repeat(12,1fr);gap:60px 40px}
.mag .paper{scroll-margin-top:120px}
/* and the variants take over */
.mag .paper.st-duo{grid-column:span 6}
.mag .paper.st-duo .paper-img{height:300px}
@media(min-width:901px){
  .mag .paper.st-strip,.mag .paper.st-wide{grid-column:1/-1;display:grid;
    align-items:center;gap:48px}
  .mag .paper.st-strip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .mag .paper.st-wide{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .mag .paper.st-wide .paper-img{order:2}
  .mag .paper.st-strip .paper-img{height:340px}
  .mag .paper.st-wide .paper-img{height:430px}
  .mag.dark .paper.st-strip .paper-txt,.mag.dark .paper.st-wide .paper-txt{
    border-top:0;margin-top:0;padding-top:0}
  .mag .paper.st-strip h3{font-size:2.4rem;max-width:22ch}
  .mag .paper.st-wide h3{font-size:2.9rem;max-width:20ch}
  .mag .paper.st-strip .paper-teaser,.mag .paper.st-wide .paper-teaser{
    -webkit-line-clamp:4;max-width:58ch}
}
/* the printed numeral on every story */
.mag .paper{position:relative}
.st-nr{position:absolute;z-index:3;top:-34px;right:2px;pointer-events:none;
  font-family:'Cormorant Garamond',serif;font-size:5.2rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(207,179,136,.4)}
@supports not (-webkit-text-stroke:1px #000){.st-nr{color:rgba(207,179,136,.22)}}
.feature .st-nr{display:none}
@media(max-width:900px){.st-nr{font-size:3.4rem;top:-22px}}

/* a filtered list is an even grid again */
.mag .papers.filtered .paper:not(.feature){grid-column:span 6;display:block;
  grid-template-columns:none}
.mag .papers.filtered .paper:not(.feature) .paper-img{height:280px}
.mag .papers.filtered .paper:not(.feature) h3{font-size:2rem;max-width:none}
.mag .papers.filtered .st-nr{display:none}
.mag.dark .papers.filtered .paper:not(.feature) .paper-txt{border-top:1px solid
  rgba(255,255,255,.14);margin-top:18px;padding-top:20px}

@media(max-width:900px){
  .mag .papers{grid-template-columns:1fr;gap:44px}
  .mag .paper.st-duo,.mag .paper.st-strip,.mag .paper.st-wide,
  .mag .papers.filtered .paper:not(.feature){grid-column:1/-1}
  .mag .paper.st-strip,.mag .paper.st-wide{display:block}
  .mag .paper.st-strip .paper-img,.mag .paper.st-wide .paper-img,
  .mag .paper.st-duo .paper-img{height:230px}
}

/* ================================================================
   MORII ESSAYS - the printed edition, on screen
   ----------------------------------------------------------------
   Built to match Armin's printed teaser plate for plate: white
   paper, a running head, numbered section plates, thin navy
   headlines with the second voice in terracotta italic, tile rows,
   the 6-12 donut, the four-owners diagram and the closing checks.
   ================================================================ */
.es{background:#fff;padding:140px 0 40px}
.es .wrap{max-width:1000px}
.es-mast{display:flex;justify-content:space-between;align-items:center;
  padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.es-mast .l{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--grey)}
.es-mast img{height:20px;filter:none}
.es-mast.foot{border-bottom:0;border-top:1px solid var(--line);margin-top:70px}

.es-cover{padding-top:64px;padding-bottom:30px}
.es-cover h1{font-family:'Caviar Dreams','Jost',sans-serif;font-weight:300;
  font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.18;letter-spacing:.04em;
  color:var(--navy);margin-bottom:30px}
.es-strap{font-size:.95rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);line-height:2;margin-bottom:44px}
.es-fig{position:relative;margin:0;border-radius:22px;overflow:hidden}
.es-fig img{width:100%;height:460px;object-fit:cover;display:block}
.es-fig.tall img{height:520px}
.es-fig figcaption{position:absolute;right:34px;top:34px;max-width:34ch;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.25rem;
  line-height:1.5;color:#fff;text-align:right;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.es-fig figcaption:last-child{top:auto;bottom:26px;right:30px;font-size:1rem}

.es-s{padding-top:84px}
.es-k{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--navy);padding-bottom:12px;margin-bottom:34px;
  border-bottom:1px dashed rgba(35,61,77,.25)}
/* Two lines, not four: the navy sentence on its own line, the gold answer on
   its own line beneath it. The 30ch cage forced every heading to fold; sized
   to the column instead, each sentence holds one line on a desk screen. */
.es-s h2{font-family:'Caviar Dreams','Jost',sans-serif;font-weight:300;
  font-size:clamp(1.5rem,2.4vw,2.05rem);line-height:1.35;letter-spacing:.02em;
  color:var(--navy);max-width:none;margin-bottom:26px}
.es-s h2 em{display:block;font-style:normal;color:var(--gold);margin-top:6px}
.es-s p{font-size:1rem;line-height:1.85;color:var(--grey);max-width:70ch;
  margin-bottom:16px;font-weight:300}
.es-s p.es-em{color:var(--navy);font-weight:400}
.es-say{font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:1.45rem !important;color:var(--gold) !important;margin-top:26px}
.es-mid{color:var(--navy) !important}

/* the tile row of the printed plates */
.es-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:38px 0}
.es-tiles > div{border-top:1px solid var(--gold);padding-top:16px}
.es-tiles b{display:block;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--navy);font-weight:500;margin-bottom:8px}
.es-tiles span{font-size:.8rem;line-height:1.6;color:var(--grey);font-weight:300}
.es-tiles .hi b{color:var(--gold)}

/* checks, as printed */
.es-checks{list-style:none;margin:18px 0 0;padding:0}
.es-checks li{position:relative;padding:7px 0 7px 34px;font-size:.98rem;
  color:var(--navy);line-height:1.6}
.es-checks li::before{content:'\2713';position:absolute;left:0;top:7px;
  width:21px;height:21px;border:1px solid var(--gold);border-radius:50%;
  color:var(--gold);font-size:.7rem;line-height:21px;text-align:center}
.es-checks.two{columns:2;column-gap:56px;margin-top:26px}
@media(max-width:760px){.es-checks.two{columns:1}}

/* the reality: text beside the donut */
.es-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.es-donut-wrap{text-align:center}
.es-donut{width:230px;height:230px;border-radius:50%;margin:0 auto;
  background:conic-gradient(var(--gold) 0 62deg, var(--navy) 62deg 360deg);
  display:flex;align-items:center;justify-content:center}
.es-donut .in{width:174px;height:174px;border-radius:50%;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.es-donut .in b{font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:2rem;color:var(--navy)}
.es-donut .in span{font-size:.8rem;color:var(--grey)}
.es-donut-wrap .out{display:block;margin-top:14px;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}

/* wrong question / right question */
.es-qs{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin:36px 0 26px}
.es-qs .t{display:block;font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.es-qs .t::after{content:'\2713';margin-left:10px;color:var(--gold)}
.es-qs .no .t::after{content:'\2715';color:#b06a55}
.es-qs p{font-size:1rem;color:var(--navy)}

/* aviation steps */
.es-steps{display:flex;flex-direction:column;gap:0}
.es-steps > div{padding:20px 2px;border-bottom:1px dashed rgba(35,61,77,.2)}
.es-steps span{font-size:.95rem;line-height:1.7;color:var(--grey);font-weight:300}
.es-steps .hi span{color:var(--navy)}
.es-steps .hi b{font-family:'Cormorant Garamond',serif;font-size:1.5rem;
  color:var(--gold);margin-right:6px}

/* four owners = one order */
.es-oem{display:flex;align-items:center;justify-content:center;gap:46px;
  margin:44px 0 8px;flex-wrap:wrap}
.es-oem .own{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.es-oem .own i{width:104px;height:104px;border-radius:50%;
  border:1px solid var(--gold);display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-style:normal;
  font-size:.72rem;letter-spacing:.08em;color:var(--grey)}
.es-oem .own i b{font-family:'Cormorant Garamond',serif;font-size:1.25rem;
  color:var(--navy);margin-top:2px}
.es-oem .eq{font-family:'Cormorant Garamond',serif;font-size:2.6rem;color:var(--gold)}
.es-oem .order{width:210px;height:210px;border-radius:50%;
  border:2px solid var(--gold);display:flex;align-items:center;
  justify-content:center;text-align:center}
.es-oem .order b{font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:1.35rem;line-height:1.35;color:var(--navy)}

/* dealers / brokers / captains */
.es-three{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin:38px 0}
.es-three .t{display:block;font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--navy);font-weight:500;margin-bottom:12px;
  padding-top:14px;border-top:1px solid var(--gold)}
.es-three p{font-size:.9rem;line-height:1.7}

.es-fullwrap{margin-top:84px}
.es .pp-full-hd h2,.es .fp-s h2{color:var(--navy)}

@media(max-width:860px){
  .es{padding-top:110px}
  .es-cols{grid-template-columns:1fr;gap:36px}
  .es-tiles{grid-template-columns:1fr 1fr;gap:22px}
  .es-qs{grid-template-columns:1fr;gap:26px}
  .es-three{grid-template-columns:1fr;gap:26px}
  .es-fig img{height:280px}
  .es-fig.tall img{height:320px}
  .es-fig figcaption{position:static;color:var(--grey);text-shadow:none;
    text-align:left;padding:14px 4px 0;max-width:none}
  .es-oem{gap:26px}
}
/* the phone edition of the printed plates: the running head stops fighting
   the logo for one line, and the owners-to-order diagram stacks instead of
   squeezing its circles into ellipses */
@media(max-width:600px){
  .es-mast{gap:14px}
  .es-mast .l{font-size:.54rem;letter-spacing:.18em}
  .es-mast img{height:15px}
  .es-s{padding-top:60px}
  .es-oem{flex-direction:column;gap:20px}
  .es-oem .eq{transform:rotate(90deg)}
  .es-donut{width:200px;height:200px}
  .es-donut .in{width:150px;height:150px}
}

/* the essay page is white paper from the first pixel, so the bar is
   always in its solid state there */
body.es-page nav#nav{background:rgba(24,43,56,.96);padding:14px 0;
  box-shadow:0 6px 30px rgba(0,0,0,.14)}

/* the guide openings ran six paragraphs long at lead size, which read
   like a large-print edition. Only the first paragraph opens large;
   the rest settles into the reading size. */
.pp-teaser p{font-size:1rem;line-height:1.85}
.pp-teaser p:first-child{font-size:1.22rem;line-height:1.65}

/* ============================================================
   AUGUST 31 -- Armin's WhatsApp round
   ------------------------------------------------------------
   1  The white fleet-table card was written as a bare `.table-scroll`
      and so dressed the admin and portal tables in white as well --
      ivory text on a white card read as an empty list. On the dark
      pages the card keeps its shape but wears the room's colour.
   2  The admin library names the kind of document on every row.
   ============================================================ */
body.bridge .table-scroll{background:rgba(255,255,255,.04);border-color:var(--hair);
  box-shadow:none;padding:6px 22px 2px}
body.bridge .table-scroll:has(.ad-table){padding:14px 22px 6px}
body.bridge .price-table tbody tr:hover{background:rgba(179,145,95,.08)}
body.bridge .ad-table th{padding-left:0}

.dl-item .m .cat{font-style:normal;font-size:.55rem;letter-spacing:.14em;color:var(--ivory,#f2ede4);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:3px 9px;margin-right:8px;opacity:.85}

/* ============================================================
   AUGUST 31, part two -- the essays, gathered and navigable
   ------------------------------------------------------------
   1  Insights carries an essays band: a divider, then every printed
      essay stacked full width beneath it. New editions join the stack.
   2  The essay page reads with a margin rail: the plate titles down the
      left, the one you are reading lit gold, a click glides you there.
   ============================================================ */
/* the divider opens the list now that the essays are all it carries */
.ins-divider{grid-column:1/-1;margin:0 0 4px;padding-top:0;border-top:0}
.ins-divider .k{display:block;font-size:.6rem;letter-spacing:.3em;
  text-transform:uppercase;color:#cfb388;margin-bottom:12px}
.ins-divider h3{font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:2.1rem;color:#fff;margin:0 0 10px;line-height:1.15}
.ins-divider p{font-size:.92rem;line-height:1.75;color:rgba(247,244,238,.6);
  font-weight:300;max-width:620px;margin:0}
.papers.filtered .ins-divider{display:none}
@media(max-width:900px){.ins-divider{padding-top:36px}.ins-divider h3{font-size:1.7rem}}

/* the margin rail of the essay page. A <nav>, so the bare
   nav{position:fixed;left:0;right:0} is re-tailored here on purpose:
   it hangs in the white margin left of the 1000px page. */
.es-rail{position:fixed;top:150px;bottom:auto;z-index:40;
  left:calc((100vw - 1000px)/2 - 226px);right:auto;width:196px;
  max-height:calc(100vh - 220px);overflow:auto;
  padding:0;background:transparent;box-shadow:none;transition:none;
  border-left:1px solid var(--line)}
.es-rail .rk{display:block;font-size:.56rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);padding:2px 0 10px 16px}
.es-rail a{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:baseline;
  padding:7px 6px 7px 16px;margin-left:-1px;border-left:2px solid transparent;
  font-size:.8rem;line-height:1.45;color:var(--grey);text-decoration:none;
  font-weight:300;transition:color .25s ease,border-color .25s ease}
.es-rail a span{font-size:.6rem;letter-spacing:.08em;color:var(--gold)}
.es-rail a:hover{color:var(--navy)}
.es-rail a.on{color:var(--navy);border-left-color:var(--gold);font-weight:400}
.es-rail a.on span{color:var(--gold)}
/* a normal laptop still gets the rail, just a slimmer one */
@media(max-width:1479px){
  .es-rail{left:12px;width:152px}
  .es-rail a{font-size:.72rem;grid-template-columns:20px 1fr;padding-left:12px}
  .es-rail .rk{padding-left:12px}
}
@media(max-width:1339px){.es-rail{display:none}}

/* room to land under the fixed bar when the rail glides you somewhere */
.es-cover,.es-s,.es-fullwrap{scroll-margin-top:110px}

/* the little way back beside the people-count, once a dashboard tile has
   narrowed the list to its own question */
.ctx-x{background:none;border:none;padding:0;margin-left:6px;cursor:pointer;
  font:inherit;font-size:.82em;color:var(--gold);text-decoration:underline;
  text-underline-offset:3px;letter-spacing:.02em}
.ctx-x:hover{color:#fff}

/* seven programs in the portal band now; tighter rows keep the list level
   with the copy beside it */
.pb-list li{padding:14px 0}
.pb-list span{font-size:.85rem}

/* three tiles across, for the plates that come in threes */
.es-tiles.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.es-tiles.three{grid-template-columns:1fr}}

/* ============================================================
   SEPTEMBER 2 -- friendlier by the hand
   ------------------------------------------------------------
   1  The homepage says how the site works, in three steps.
   2  The portal greets a first visit with a four-door guide, and the
      ? in the top bar brings it back for anyone lost later.
   ============================================================ */
.how-band{background:var(--navy);padding:64px 0 70px;position:relative;overflow:hidden}
.how-band::after{content:'';position:absolute;inset:0;
  background:radial-gradient(90% 140% at 85% -20%, rgba(179,145,95,.14), transparent 60%);
  pointer-events:none}
.how-hd{display:flex;align-items:baseline;gap:26px;flex-wrap:wrap;margin-bottom:34px}
.how-band .eyebrow{margin-bottom:0}
.how-band h2{color:#fff;font-size:clamp(1.5rem,2.4vw,2.1rem);margin:0}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;z-index:1}
.how{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-radius:18px;
  padding:22px 22px 24px;text-decoration:none;
  transition:transform .35s ease,border-color .35s ease,background .35s ease}
.how:hover{transform:translateY(-4px);border-color:rgba(179,145,95,.55);background:rgba(255,255,255,.07)}
.how .n{font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:var(--gold);line-height:1}
.how b{display:block;color:#fff;font-size:1.02rem;font-weight:500;margin-bottom:6px}
.how .s{display:block;font-size:.86rem;line-height:1.65;color:rgba(247,244,238,.62);font-weight:300}
.how i{font-style:normal;color:var(--gold);font-size:1.05rem;transition:transform .35s ease;align-self:center}
.how:hover i{transform:translateX(5px)}
@media(max-width:980px){.how-grid{grid-template-columns:1fr}}

/* the portal's first-visit guide */
.pg-guide{margin:6px 0 30px;padding:26px 26px 24px;border:1px solid rgba(179,145,95,.4);
  border-radius:18px;background:linear-gradient(135deg, rgba(179,145,95,.12), rgba(179,145,95,.04) 55%)}
.pg-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px}
.pg-hd .k{display:block;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px}
.pg-hd h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.55rem;color:#fff;margin:0 0 6px}
.pg-hd p{font-size:.85rem;line-height:1.65;color:var(--dim);font-weight:300;margin:0;max-width:520px}
.pg-hd p b{color:var(--gold);font-weight:600}
.pg-x{background:none;border:1px solid var(--hair);border-radius:999px;color:var(--dim);
  font:inherit;font-size:.72rem;letter-spacing:.08em;padding:8px 16px;cursor:pointer;
  white-space:nowrap;transition:color .25s ease,border-color .25s ease}
.pg-x:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.pg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pg-step{position:relative;text-align:left;background:rgba(255,255,255,.04);
  border:1px solid var(--hair);border-radius:14px;padding:16px 16px 18px;cursor:pointer;
  font:inherit;color:inherit;display:block;
  transition:transform .3s ease,border-color .3s ease,background .3s ease}
.pg-step:hover{transform:translateY(-3px);border-color:rgba(179,145,95,.55);background:rgba(255,255,255,.06)}
.pg-step .n{display:block;font-size:.6rem;letter-spacing:.16em;color:var(--gold);margin-bottom:8px}
.pg-step b{display:block;color:#fff;font-size:.95rem;font-weight:500;margin-bottom:5px}
.pg-step .s{display:block;font-size:.8rem;line-height:1.55;color:var(--dim);font-weight:300;padding-right:14px}
.pg-step .go{position:absolute;right:14px;bottom:12px;color:var(--gold);
  transition:transform .3s ease}
.pg-step:hover .go{transform:translateX(4px)}
@media(max-width:1100px){.pg-steps{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.pg-steps{grid-template-columns:1fr}
  .pg-hd{flex-direction:column}.pg-x{align-self:flex-start}}

/* the ? that brings the guide back */
.br-help{width:32px;height:32px;border-radius:50%;border:1px solid var(--hair);
  background:none;color:var(--dim);font:inherit;font-size:.85rem;cursor:pointer;
  margin-right:12px;transition:color .25s ease,border-color .25s ease}
.br-help:hover{color:var(--gold);border-color:var(--gold)}

/* the way-around band grew a fourth step: the whole site, not just the reading */
.how-grid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1180px){.how-grid.four{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.how-grid.four{grid-template-columns:1fr}}

/* ============================================================
   SEPTEMBER 2, part two -- the tour and the sim hints
   ============================================================ */
/* one gold ring walks the portal; its shadow is the dimmed room */
.tour-ring{position:fixed;z-index:1200;border:2px solid var(--gold);border-radius:14px;
  box-shadow:0 0 0 200vmax rgba(10,22,31,.72);pointer-events:none;
  transition:all .45s cubic-bezier(.4,0,.2,1)}
.tour-ring.center{border-color:transparent;border-radius:50%}
.tour-card{position:fixed;z-index:1201;background:#13242f;border:1px solid rgba(179,145,95,.45);
  border-radius:16px;padding:22px 22px 20px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
  transition:left .45s cubic-bezier(.4,0,.2,1),top .45s cubic-bezier(.4,0,.2,1)}
.tour-card .k{display:block;font-size:.58rem;letter-spacing:.24em;color:var(--gold);
  text-transform:uppercase;margin-bottom:8px}
.tour-card h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.35rem;
  color:#fff;margin:0 0 8px}
.tour-card p{font-size:.85rem;line-height:1.65;color:var(--dim);font-weight:300;margin:0 0 16px}
.tour-x{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--dim);
  font-size:1.25rem;line-height:1;cursor:pointer;padding:6px}
.tour-x:hover{color:#fff}
.tour-next{font-size:.72rem;letter-spacing:.14em;padding:11px 22px}

/* one sentence of help above each simulation panel */
.sim-hint{grid-column:1/-1;margin:0 0 6px;padding:12px 16px;border-left:2px solid var(--gold);
  background:rgba(179,145,95,.08);border-radius:0 12px 12px 0;
  font-size:.85rem;line-height:1.65;color:var(--dim);font-weight:300}
.sim-hint b{color:var(--gold);font-weight:600}

/* ------------------------------------------------------------
   terms that explain themselves: a dotted underline marks them,
   hovering (or tapping) opens one plain sentence in a bubble
   ------------------------------------------------------------ */
.tip{position:relative;border-bottom:1px dotted rgba(179,145,95,.75);cursor:help}
.tip::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 10px);
  width:280px;max-width:74vw;background:#13242f;border:1px solid rgba(179,145,95,.45);
  border-radius:12px;padding:12px 14px;font-size:.78rem;line-height:1.6;
  color:#e9e4da;font-weight:300;font-style:normal;letter-spacing:0;text-transform:none;
  text-align:left;white-space:normal;box-shadow:0 18px 45px -12px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
  z-index:60;pointer-events:none}
.tip:hover::after,.tip:focus-visible::after,.tip.on::after{
  opacity:1;visibility:visible;transform:translateY(0)}
/* a rate cell in the commission schedule is a block, not a word */
.cs .r.tip{border-bottom:none;cursor:help}
.cs .r.tip::after{left:auto;right:0;width:300px}
.cs-hd .tip{cursor:help}

/* what the monthly buys, folded under the result */
.mo-cover{margin-top:18px;border:1px solid var(--hair);border-radius:14px;
  background:rgba(255,255,255,.03);padding:0 18px}
.mo-cover summary{cursor:pointer;list-style:none;padding:14px 0;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.mo-cover summary::-webkit-details-marker{display:none}
.mo-cover summary::after{content:'\25BE';float:right;transition:transform .3s ease}
.mo-cover[open] summary::after{transform:rotate(180deg)}
.mo-cover p{font-size:.84rem;line-height:1.7;color:var(--dim);font-weight:300;margin:0 0 12px}
.mo-cover ul{list-style:none;margin:0 0 14px;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.mo-cover li{font-size:.84rem;color:#e9e4da;font-weight:300;padding-left:18px;position:relative}
.mo-cover li::before{content:'\2713';position:absolute;left:0;color:var(--gold);font-size:.75rem}
@media(max-width:640px){.mo-cover ul{grid-template-columns:1fr}}

/* the print edition shows its face before you download it */
.dl-preview{flex-basis:100%;display:flex;gap:10px;margin-bottom:4px}
.dl-preview .pv{display:block;border:1px solid var(--hair);border-radius:8px;overflow:hidden;
  width:118px;flex:0 0 auto;background:#fff;transition:transform .25s ease,box-shadow .25s ease}
.dl-preview .pv:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.dl-preview img{display:block;width:100%;height:auto}
@media(max-width:640px){.dl-preview .pv{width:88px}.dl-preview .pv:nth-child(3){display:none}}

/* long explainers in the simulation fold away behind an arrow */
.us-fold{margin:22px 0 18px;border:1px solid var(--hair);border-radius:12px;
  background:rgba(255,255,255,.02);padding:0 16px}
.us-fold summary{cursor:pointer;list-style:none;padding:13px 0;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.us-fold summary::-webkit-details-marker{display:none}
.us-fold summary::after{content:'\25BE';float:right;transition:transform .3s ease}
.us-fold[open] summary::after{transform:rotate(180deg)}
.us-fold p{font-size:.85rem;color:var(--dim);font-weight:300;line-height:1.7;margin:0 0 14px}

/* the print edition, embedded in the portal reading room: a white paper
   inside the dark card, plates one under the other */
.es-embed{background:#fff;border-radius:16px;overflow:hidden;margin-top:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
.es-embed .es{padding:6px 0 26px}
.es-embed .es .wrap{max-width:960px;padding:0 clamp(22px,5%,64px)}
/* the dark reading-room typography must not bleed into the paper */
.es-embed .es p{font-size:1rem;line-height:1.85;color:var(--grey);font-weight:300;
  margin-bottom:16px;max-width:70ch}
.es-embed .es p.es-em{color:var(--navy);font-weight:400}
.es-embed .es .es-qs p{color:var(--navy);max-width:none}
.es-embed .es .es-tiles span,.es-embed .es .es-steps span{color:var(--grey)}
.es-embed .es .pp-full-ix a{color:var(--grey)}
.es-embed .es .pp-full-ix a:hover{color:var(--navy)}
.es-embed .es .pp-full-ix a span{color:var(--gold)}
.es-embed .es .fp-s h2{color:var(--navy)}
.es-embed .es .pp-full-hd h2{color:var(--navy)}
.es-embed .es-cover{padding-top:44px}
.es-embed .es-s{padding-top:64px}
@media(max-width:640px){
  .es-embed{border-radius:12px}
  .es-embed .es-cover{padding-top:30px}
  .es-embed .es-s{padding-top:46px}
  .es-embed .es-fig img{height:280px}
}

/* the portal's white-on-dark headings must not reach into the white paper */
.es-embed .es h1,.es-embed .es h2,.es-embed .es h3,.es-embed .es h4{color:var(--navy)}
.es-embed .es .es-s h2 em{color:var(--gold)}

/* a reading room holding a whole print edition grows very tall, and a
   backdrop blur on a surface that size makes browsers drop paint tiles;
   the glass adds nothing behind a full-screen card, so it goes */
#dl-room .dl-read{backdrop-filter:none;-webkit-backdrop-filter:none;background:#101c25}

/* Xanne, 2 September: the shelf reads like the essays band on the site,
   one wide card per row, cover beside the words */
.lib-grid{grid-template-columns:1fr;gap:18px}
.lib-grid .lib-card,.lib-grid .lib-card:nth-child(1),.lib-grid .lib-card:nth-child(2){grid-column:auto}
.lib-card{flex-direction:row;align-items:stretch}
.lib-card .cv,.lib-grid .lib-card:nth-child(1) .cv,.lib-grid .lib-card:nth-child(2) .cv{
  height:auto;min-height:200px;width:clamp(240px,32%,400px);flex:0 0 clamp(240px,32%,400px)}
.lib-card .bd{padding:28px 34px;justify-content:center}
.lib-card .t,.lib-grid .lib-card:nth-child(1) .t,.lib-grid .lib-card:nth-child(2) .t{font-size:1.35rem}
.lib-card .d{font-size:.88rem;max-width:75ch}
.lib-card .m{margin-top:14px;padding-top:14px}
.lib-card.soon .cv{height:auto;min-height:120px}
@media(max-width:760px){
  .lib-card,.lib-card.soon{flex-direction:column}
  .lib-card .cv,.lib-grid .lib-card:nth-child(1) .cv,.lib-grid .lib-card:nth-child(2) .cv{
    width:100%;flex:none;height:170px;min-height:0}
  .lib-card .bd{padding:20px 22px}
}

/* the cover follows the words, not the other way round: a portrait photo
   must not stretch its whole row */
.lib-card .cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.lib-card .cv img{position:absolute}}

/* week / year, one sum read two ways */
.vs-per{display:inline-flex;margin:14px 0 4px;border:1px solid var(--hair);
  border-radius:999px;padding:3px;gap:3px;background:rgba(255,255,255,.03)}
.vs-per button{border:0;background:transparent;color:var(--dim);cursor:pointer;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  padding:8px 18px;border-radius:999px;transition:.25s var(--t)}
.vs-per button.on{background:var(--gold);color:#182b38}
.vs-per button:not(.on):hover{color:#fff}

/* the comparison basis, highlighted in the header of the panel */
#vs-base b{color:var(--gold);font-weight:500}

/* the small line under an introductions form or list */
.inv-hint{font-size:.78rem;color:var(--dim);font-weight:300;line-height:1.65;margin-top:12px}

/* when the running points total is pinned to the bottom, the back-to-top
   arrow climbs above it instead of sitting on the figures */
body.us-bar .to-top{bottom:78px}
@media(max-width:700px){body.us-bar .to-top{bottom:72px}}

/* closed beta on the public teaser: the picture stays, the figures wait */
.psim-beta .psim-open .v{filter:blur(10px);opacity:.55;user-select:none}
.psim-beta .psim-open .s{opacity:.55}
.psim-betanote{margin-top:16px;padding:18px 20px;border:1px solid rgba(179,145,95,.4);
  border-radius:14px;background:rgba(179,145,95,.08);font-size:.88rem;line-height:1.7;
  color:var(--grey);font-weight:300}
.psim-betanote b{color:var(--navy);display:block;margin-bottom:6px}
.psim-betanote .btn{margin-top:12px;display:inline-block;font-size:.62rem}

/* the model switch above the simulation panels */
.sim-modelrow{margin:-6px 0 20px}
.sim-modelrow .vs-per{margin:0}

/* Armin: the portal itself does not print; the personal PDF is the way out */
@media print{
  body.bridge .br-shell, body.bridge .wg, body.bridge .chat{display:none !important}
  body.bridge::before{content:'This portal is personal and does not print. Use "Download your personal PDF" in the Library: it carries your name on every page.';
    display:block;padding:60px 40px;font-family:Georgia,serif;font-size:14pt;color:#000}
}

/* Armin, 3 September: anything on screen with business plan, cost or usage
   carries the beta flag until the official release */
.beta-tag{display:inline-block;font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;
  font-family:'Inter Tight','Jost',system-ui,sans-serif;font-weight:500;white-space:nowrap;
  color:#e0b357;border:1px solid rgba(224,179,87,.45);border-radius:999px;
  padding:5px 12px;margin-left:12px;vertical-align:middle;letter-spacing:.18em}
.beta-tag.light{color:#8a6f3f;border-color:rgba(138,111,63,.4)}
@media(max-width:640px){.beta-tag{display:inline-block;margin:8px 0 0;white-space:normal}}

/* the reader's name, faint and tiled, over every screen with figures:
   quiet to read through, present on every screenshot */
.scr-wm{position:absolute;inset:0;pointer-events:none;z-index:6;background-repeat:repeat}

/* the two buttons under a simulation panel: side by side with room, and
   stacked on a phone instead of on top of each other */
.sim-acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.sim-acts .btn{margin:0;flex:0 0 auto}
@media(max-width:640px){.sim-acts{flex-direction:column;align-items:stretch}
  .sim-acts .btn{width:100%;text-align:center}}

/* Armin: a session that ends should say so, not go quiet */
.sess-warn{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:400;
  background:rgba(24,43,56,.97);border:1px solid rgba(179,145,95,.5);border-radius:999px;
  padding:12px 20px;font-size:.82rem;color:#f7f4ee;font-weight:300;
  box-shadow:0 18px 50px rgba(0,0,0,.5);max-width:92vw}
.sess-warn button{margin-left:10px;background:none;border:0;color:var(--gold-light,#cfb388);
  font:inherit;cursor:pointer;border-bottom:1px solid currentColor;padding:0}
.sess-out{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
  background:rgba(8,15,21,.86);backdrop-filter:blur(6px);padding:24px}
.sess-out .box{max-width:420px;text-align:center;background:#101c25;
  border:1px solid rgba(179,145,95,.4);border-radius:18px;padding:34px 32px}
.sess-out h3{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:#fff;margin-bottom:10px}
.sess-out p{font-size:.9rem;line-height:1.7;color:#8fa2ae;font-weight:300;margin-bottom:22px}

/* what points mean when the whole boat is yours */
.us-full{margin:18px 0 6px;padding:18px 20px;border-left:2px solid var(--gold);
  background:rgba(179,145,95,.07);border-radius:0 12px 12px 0;
  font-size:.88rem;line-height:1.75;color:var(--dim);font-weight:300}
.us-full b{color:var(--gold);font-weight:500}

/* a place in the price list deserves a face */
.rd-place{display:flex;gap:20px;align-items:flex-start;margin:22px 0;
  padding:18px;border:1px solid var(--hair);border-radius:14px;
  background:rgba(255,255,255,.02)}
.rd-place img{width:190px;height:130px;object-fit:cover;border-radius:10px;flex:none}
.rd-place h4{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:#fff;margin-bottom:6px}
.rd-place p{font-size:.88rem !important;line-height:1.7;color:var(--dim);margin-bottom:8px}
.rd-place ul{list-style:none;margin:0 0 8px;padding:0}
.rd-place li{font-size:.86rem;color:var(--dim);font-weight:300;line-height:1.7;
  padding-left:16px;position:relative}
.rd-place li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;
  border:1px solid var(--gold);transform:rotate(45deg)}
.rd-place li b{color:#e9e4da;font-weight:500}
@media(max-width:640px){.rd-place{flex-direction:column}.rd-place img{width:100%;height:170px}}

/* ---------- the dashboard, rearranged ----------
   Xanne, 4 September: everything that matters should fit on one screen.
   Slimmer tiles, then two columns: what needs you, and the tools beside it. */
body.bridge .ad-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
  margin-bottom:26px}
body.bridge .ad-stat{padding:16px 18px}
body.bridge .ad-stat .k{font-size:.54rem;letter-spacing:.2em;margin-bottom:6px}
body.bridge .ad-stat .v{font-size:1.9rem;line-height:1.1;margin-bottom:2px}
body.bridge .ad-stat .s{font-size:.72rem;line-height:1.45}

.ad-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:26px;align-items:start}
.ad-col{min-width:0}
.ad-col.side{position:sticky;top:96px}
.ad-col.side .qual{margin:0 0 16px !important}
.ad-col.side .qual-act{gap:8px}
.ad-col.side .qual-act .btn{font-size:.58rem;padding:8px 13px}
.ad-grid .ad-sug{margin-bottom:22px}
.ad-grid .ad-feed{max-height:none}
@media(max-width:1100px){
  .ad-grid{grid-template-columns:1fr;gap:20px}
  .ad-col.side{position:static}
}

/* the band beside a name: a word, not a fake-precise number */
.sug .score{font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid rgba(207,179,136,.5);border-radius:999px;padding:4px 10px;
  margin-left:10px;color:var(--gold-light,#cfb388);vertical-align:middle;font-family:inherit}
.sug .score.band-ready{background:rgba(78,201,138,.14);border-color:rgba(78,201,138,.5);color:#7dc9a1}
.sug .score.band-early{opacity:.7}

/* to do and what we know, apart instead of in one pile */
.pr-part{margin-top:12px}
.pr-part .k{display:block;font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px}
.pr-none{font-size:.88rem;color:var(--dim);font-weight:300;margin-top:8px}

/* a row in the priority list keeps its button on the same line */
.ad-grid .sug{flex-wrap:nowrap;align-items:center;gap:14px}
.ad-grid .sug > div:first-child{min-width:0}
.ad-grid .sug .act{flex:0 0 auto;margin-left:auto}
@media(max-width:560px){.ad-grid .sug{flex-wrap:wrap}.ad-grid .sug .act{margin-left:0}}
/* an empty personal-link card should not sit there as an empty box */
.ad-link:empty{display:none}

/* the dashboard, second pass: give each block the width it needs.
   Priorities and the links panel run full width; the recent activity sits
   beside the two small tool cards. */
.ad-grid{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:28px;margin-top:8px}
body.bridge .ad-sug{margin-bottom:22px}
body.bridge .ad-link{margin-bottom:26px}
/* a feed line keeps its time and its sentence on one row */
body.bridge .ad-ev{grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:baseline}
body.bridge .ad-ev time{font-size:.72rem}
body.bridge .ad-ev span{overflow-wrap:anywhere}
@media(max-width:900px){
  body.bridge .ad-ev{grid-template-columns:1fr;gap:4px}
}

/* the sibling combination worth considering */
.alt-box{margin-top:20px;padding:18px 20px;border:1px solid rgba(179,145,95,.4);
  border-radius:14px;background:rgba(179,145,95,.07)}
.alt-box .k{display:block;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px}
.alt-box p{font-size:.86rem;line-height:1.7;color:var(--dim);font-weight:300;margin:0 0 12px}
.alt-box b{color:#e9e4da;font-weight:500}
.alt-box .btn{font-size:.6rem;padding:8px 16px}

/* the grey standard mark under a slider */
.rg-mark{position:relative;height:10px;margin:-6px 0 2px}
.rg-mark i{position:absolute;top:0;width:2px;height:8px;background:rgba(255,255,255,.28);
  transform:translateX(-1px);border-radius:1px}
.rg-mark i::after{content:'';position:absolute;left:-3px;top:8px;width:8px;height:8px;
  border-radius:50%;background:rgba(255,255,255,.14)}

/* the launch offer under the dealer slip */
.dc-special{grid-column:1/-1;margin-top:16px;padding:14px 18px;border-radius:12px;
  border:1px solid rgba(78,201,138,.4);background:rgba(78,201,138,.08)}
.dc-special .k{display:block;font-size:.54rem;letter-spacing:.22em;text-transform:uppercase;
  color:#7dc9a1;margin-bottom:6px}
.dc-special p{font-size:.86rem;line-height:1.65;color:var(--dim);font-weight:300;margin:0}

/* Armin: a clause number needs air between it and its title */
.rd-num{margin-right:14px !important;min-width:1.6em;display:inline-block}
.dl-read .bd h3{gap:14px}

/* was the answer any good: the one question that improves the assistant */
.bub-rate{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:9px;
  border-top:1px solid rgba(255,255,255,.08)}
.bub-rate span{font-size:.7rem;color:rgba(255,255,255,.4);font-weight:300}
.bub-rate span.ok{color:var(--gold-light,#cfb388)}
.bub-rate button{background:none;border:1px solid var(--hair);border-radius:999px;
  padding:3px 9px;cursor:pointer;font-size:.85rem;line-height:1.2;transition:.2s}
.bub-rate button:hover{border-color:var(--gold);transform:translateY(-1px)}

/* the Cannes invitation, while the festival runs */
.ev-pop{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(8,15,21,.82);backdrop-filter:blur(6px)}
.ev-pop[hidden]{display:none}
.ev-card{position:relative;max-width:520px;width:100%;max-height:92vh;overflow-y:auto;
  background:#101c25;border:1px solid rgba(179,145,95,.45);border-radius:20px;
  box-shadow:0 40px 90px rgba(0,0,0,.6)}
.ev-card > img{width:100%;height:190px;object-fit:cover;border-radius:19px 19px 0 0;display:block}
.ev-x{position:absolute;right:12px;top:12px;z-index:2;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(10,18,24,.6);color:#fff;
  font-size:1.1rem;line-height:1;cursor:pointer}
.ev-x:hover{background:rgba(10,18,24,.9)}
.ev-body{padding:26px 30px 28px}
.ev-body .k{display:block;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px}
.ev-body h3{font-family:'Cormorant Garamond',serif;font-size:1.6rem;color:#fff;margin-bottom:10px}
.ev-body p{font-size:.9rem;line-height:1.75;color:var(--dim);font-weight:300;margin-bottom:14px}
.ev-body ul{list-style:none;margin:0 0 20px;padding:0}
.ev-body li{position:relative;padding:0 0 9px 20px;font-size:.86rem;line-height:1.65;
  color:var(--dim);font-weight:300}
.ev-body li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;
  border:1px solid var(--gold);transform:rotate(45deg)}
.ev-acts{display:flex;flex-wrap:wrap;gap:10px}
.ev-acts .btn{font-size:.62rem}
.ev-later{margin-top:14px;background:none;border:0;color:rgba(255,255,255,.4);
  font:inherit;font-size:.78rem;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;padding:0}
.ev-later:hover{color:#fff}
body.ev-open{overflow:hidden}
@media(max-width:560px){
  .ev-card > img{height:150px}
  .ev-body{padding:20px 20px 24px}
  .ev-acts .btn{width:100%;text-align:center}
}
.ev-done{margin-top:14px;font-size:.85rem;line-height:1.65;color:#7dc9a1;font-weight:300}
.ev-code{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 4px;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8a8f93;font-weight:300}
.ev-code b{font-family:inherit;font-size:.95rem;letter-spacing:.18em;color:#c8a96a;
  border:1px solid rgba(200,169,106,.35);border-radius:2px;padding:6px 12px;font-weight:400}
.ev-copy{background:none;border:1px solid rgba(255,255,255,.16);color:#cfd3d6;border-radius:2px;
  padding:6px 12px;font:inherit;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.ev-copy:hover{border-color:rgba(200,169,106,.5);color:#c8a96a}
.ev-acts .ev-later{margin:0}

/* the invitation stays reachable after the card is closed */
.ev-chip{position:fixed;left:26px;bottom:88px;z-index:150;display:flex;align-items:center;gap:10px;
  background:rgba(12,24,32,.94);border:1px solid rgba(200,169,106,.4);border-radius:2px;
  padding:10px 16px 10px 13px;cursor:pointer;color:#e8eaec;text-align:left;font:inherit;
  box-shadow:0 18px 44px rgba(0,0,0,.34);backdrop-filter:blur(6px);
  transition:border-color .3s ease,transform .3s ease}
.ev-chip:hover{border-color:rgba(200,169,106,.85);transform:translateY(-2px)}
.ev-chip .d{width:7px;height:7px;border-radius:50%;background:#c8a96a;flex:none;
  box-shadow:0 0 0 0 rgba(200,169,106,.55);animation:evPulse 2.6s infinite}
@keyframes evPulse{70%{box-shadow:0 0 0 9px rgba(200,169,106,0)}100%{box-shadow:0 0 0 0 rgba(200,169,106,0)}}
.ev-chip .t{display:flex;flex-direction:column;gap:2px;font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:#8a8f93;font-weight:300;line-height:1.2}
.ev-chip .t b{font-size:.8rem;letter-spacing:.04em;text-transform:none;color:#e8eaec;font-weight:400}
body.ev-open .ev-chip{display:none}
@media(max-width:760px){
  .ev-chip{left:14px;right:auto;bottom:80px;padding:9px 13px 9px 11px}
  .ev-chip .t b{font-size:.74rem}
}

/* the quotation a dealer prepares for a client */
.qt-card{max-width:520px}
.qt-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 4px}
.qt-form label{display:flex;flex-direction:column;gap:6px;font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:#8a8f93;font-weight:300}
.qt-form label:first-child{grid-column:1/-1}
.qt-form input,.qt-form select{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:2px;padding:10px 12px;color:#e8eaec;font:inherit;font-size:.86rem;letter-spacing:.02em;
  text-transform:none}
.qt-form input:focus,.qt-form select:focus{outline:none;border-color:rgba(200,169,106,.6)}
.qt-form select option{background:#0c1820;color:#e8eaec}
.qt-note{margin-top:14px;font-size:.74rem;line-height:1.6;color:#8a8f93;font-weight:300}
@media(max-width:560px){.qt-form{grid-template-columns:1fr}}
.qt-form label.wide{grid-column:1/-1}
.qt-form textarea{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:2px;padding:10px 12px;color:#e8eaec;font:inherit;font-size:.86rem;
  text-transform:none;letter-spacing:.02em;resize:vertical}
.qt-form textarea:focus{outline:none;border-color:rgba(200,169,106,.6)}
.qt-done{margin-top:14px;font-size:.82rem;line-height:1.65;color:#7dc9a1;font-weight:300}

/* ---- the events page in the portal ---- */
.evt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:26px}
.evt-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:3px;
  padding:24px 24px 20px;display:flex;flex-direction:column;gap:10px;
  transition:border-color .3s ease,transform .3s ease}
.evt-card:hover{border-color:rgba(200,169,106,.42);transform:translateY(-2px)}
.evt-card.on{border-color:rgba(125,201,161,.4)}
.evt-card .k{font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:#c8a96a;font-weight:400}
.evt-card h3{margin:0;font-size:1.28rem;font-weight:300;letter-spacing:.01em;color:#e8eaec}
.evt-card p{margin:0;font-size:.86rem;line-height:1.7;color:#9aa3aa;font-weight:300}
.evt-card .ev-acts{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.evt-card .ev-acts .btn{flex:0 1 auto}
.evt-on{font-size:.8rem;line-height:1.6;color:#7dc9a1;font-weight:300}
.evt-loading{font-size:.88rem;color:#8a8f93;font-weight:300;margin-top:22px}
.evt-foot{margin-top:26px;font-size:.8rem;line-height:1.75;color:#8a8f93;font-weight:300}
.evt-foot a{color:#c8a96a;text-decoration:none;border-bottom:1px solid rgba(200,169,106,.35)}
@media(max-width:560px){
  .evt-grid{grid-template-columns:1fr;gap:14px}
  .evt-card{padding:20px 18px 18px}
  .evt-card h3{font-size:1.14rem}
  .evt-card .ev-acts{gap:8px}
  .evt-card .ev-acts .btn{flex:1 1 100%;text-align:center}
}

/* ---- the phone, September 12 ----
   Two things behaved badly at 390 pixels: the wide sailing-pattern buttons
   put their name, their explanation and their season badge on one line, and
   the events notice in the corner sat on top of whatever was underneath it. */
@media(max-width:700px){
  .simopt.wide{display:flex;flex-direction:column;align-items:flex-start;
    justify-content:center;text-align:left;gap:2px;padding:14px 18px;line-height:1.35}
  .simopt.wide small{display:block;margin-top:4px;font-size:.72rem;line-height:1.5;opacity:.72}
  .simopt.wide .st-red{margin-top:8px;font-size:.56rem}

  /* the notice keeps to the bottom left, above the back-to-top button, and
     the page gets the room underneath so nothing hides behind it */
  .ev-chip{left:14px;bottom:70px;padding:8px 12px 8px 10px;gap:8px;
    max-width:calc(100vw - 96px)}
  .ev-chip .t{font-size:.58rem;letter-spacing:.14em}
  .ev-chip .t b{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:calc(100vw - 140px)}
  body.ev-here .br-body{padding-bottom:96px}
  body.us-bar .ev-chip{bottom:126px}
}
body.ev-quiet .ev-chip,
body.ev-scroll .ev-chip{opacity:0;visibility:hidden;transform:translateY(8px)}
.ev-chip{transition:border-color .3s ease,transform .3s ease,opacity .25s ease,visibility .25s ease}
body.ev-quiet .br-body{padding-bottom:0}

@media(max-width:700px){
  /* on a phone the photograph fills the whole card, so the words need a
     darker floor under them than on a wide screen */
  .bn-hero figcaption{padding:22px 20px;
    background:linear-gradient(to top,rgba(5,11,15,.94) 24%,rgba(5,11,15,.62) 62%,rgba(5,11,15,.22))}
  .bn-hero h2{font-size:1.42rem;line-height:1.2}
  .bn-hero p{font-size:.82rem;line-height:1.55}
  /* the reading width of the leads: shorter lines, less scrolling */
  .br-view .lead{font-size:.95rem;line-height:1.7}
  .br-view .bn-h1,.br-view h1{font-size:1.9rem;line-height:1.15}
  .br-view .section-head h2{font-size:1.6rem;line-height:1.2}
}
.evt-say{margin:0;font-size:.78rem;line-height:1.6;color:#8a8f93;font-weight:300}
.evt-on{margin:0;font-size:.8rem;line-height:1.6;color:#7dc9a1;font-weight:300}
.evt-sure{margin:10px 0 0;font-size:.72rem;line-height:1.55;color:#6f767c;font-weight:300}

/* ---- the offers Morii prepared, in the member's portal ---- */
.of-list{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.of-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:3px;
  padding:24px 26px 20px}
.of-card.fresh{border-color:rgba(200,169,106,.45);background:rgba(200,169,106,.05)}
.of-top{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;margin-bottom:10px}
.of-card .k{font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:#c8a96a;font-weight:400}
.of-card h3{margin:0 0 8px;font-size:1.32rem;font-weight:300;color:#e8eaec;letter-spacing:.01em}
.of-amount{margin:0 0 10px;font-size:1.05rem;color:#e8eaec;font-weight:300}
.of-body{margin:0 0 16px;font-size:.88rem;line-height:1.75;color:#9aa3aa;font-weight:300;max-width:62ch;
  white-space:pre-wrap}
.of-empty{margin-top:24px;font-size:.9rem;line-height:1.7;color:#8a8f93;font-weight:300}
@media(max-width:560px){
  .of-card{padding:20px 18px 18px}
  .of-card h3{font-size:1.16rem}
  .of-card .ev-acts .btn{flex:1 1 100%;text-align:center}
}
/* hidden means hidden, even for the elements that are flex by default */
.ev-chip[hidden]{display:none}
.of-file{margin:10px 0 0;font-size:.72rem;letter-spacing:.04em;color:#6f767c;font-weight:300}
.of-state{margin:12px 0 0;font-size:.82rem;line-height:1.6;color:#c9a86a;font-weight:300}
.of-state.ok{color:#7dc9a1}

/* ---- the admin's offers tab ---- */
.of-row{padding:20px 22px;margin-bottom:14px}
.of-row-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.of-chip{font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid;
  border-radius:999px;padding:5px 12px;white-space:nowrap}
.of-row-meta{margin:12px 0 0;font-size:.78rem;line-height:1.7;color:rgba(247,244,238,.5)}
.of-row-said{margin:10px 0 0;font-size:.88rem;line-height:1.7;color:#e8eaec;font-style:italic;
  border-left:2px solid rgba(200,169,106,.5);padding-left:12px}
.of-row-acts{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:16px}
.of-row-acts button{background:none;border:none;padding:0;color:#cfb388;cursor:pointer;
  font:inherit;font-size:.8rem;text-decoration:underline}
.of-row-acts button.warn{color:#e08b74}
@media(max-width:640px){.of-row-top{flex-direction:column}}
.sug-group{margin-bottom:22px}
.sug-group:last-child{margin-bottom:0}
.sug-head{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:4px}
.sug-head span{opacity:.6}
.sug-note{margin:0 0 12px;font-size:.82rem;line-height:1.6;color:rgba(247,244,238,.5)}
/* a feed line you can open reads like one: the same row, with a hand */
button.ad-ev{width:100%;text-align:left;font:inherit;color:inherit;border:1px solid transparent;
  background:rgba(255,255,255,.03);cursor:pointer}
button.ad-ev:hover{border-color:rgba(200,169,106,.35);background:rgba(255,255,255,.055)}
button.ad-ev:focus-visible{outline:2px solid rgba(200,169,106,.6);outline-offset:2px}
.q-ask{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px}
.q-ask li{font-size:.82rem;line-height:1.6;color:rgba(247,244,238,.72)}
.q-ask li span{display:inline-block;min-width:120px;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(247,244,238,.42)}
.q-ask.big li{font-size:.92rem}
@media(max-width:640px){.q-ask li span{display:block;min-width:0;margin-bottom:2px}}
.ln-tick{background:none;border:1px solid rgba(255,255,255,.18);border-radius:999px;
  padding:9px 16px;font:inherit;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,244,238,.65);cursor:pointer;transition:all .25s ease}
.ln-tick:hover{border-color:#7dc9a1;color:#7dc9a1}