/* ============================================================================
   Valmier website — "island" layer (2026-10-25, owner: "elements a bit more island-like").
   Loaded on every page right after brand.css. Things float: the nav is a pill that hovers under the top
   edge, cards are rounded slabs with a lit top edge and a soft drop, small things (kickers, tags, buttons,
   the protocol strip, stats) become separate pills. Same monochrome palette.
   ========================================================================== */

:root{--r-island:28px;--island-top:inset 0 1px 0 rgba(242,242,239,.07);--island-drop:0 28px 60px -34px rgba(0,0,0,.95),0 2px 6px -2px rgba(0,0,0,.6)}

/* ---- nav: a floating pill --------------------------------------------------- */
.site-nav,.site-nav.is-scrolled{background:none;border-bottom-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding-top:12px}
.site-nav__inner,.site-nav.is-scrolled .site-nav__inner{min-height:60px;padding-inline:10px 10px;border-radius:22px;
  background:rgba(20,20,22,.62);border:1px solid var(--line);box-shadow:var(--island-top),0 18px 44px -26px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.site-nav.is-scrolled .site-nav__inner{background:rgba(20,20,22,.82);border-color:var(--line-2)}
.site-nav .brand{padding-inline-start:6px}
.nav-links a{border-radius:999px}
.nav-links a.is-active::after{background:var(--bone);inset-inline:16px;height:1.5px}
.nav-toggle{border-radius:999px}
.nav-sheet{top:calc(60px + 22px);inset-inline:12px;border-radius:26px;border:1px solid var(--line-2);box-shadow:var(--island-drop)}

/* ---- cards: rounded slabs that float ---------------------------------------- */
.card{border-radius:var(--r-island);box-shadow:var(--island-top),var(--island-drop)}
.card--interactive,.feat,.loc-card,.step,.price,.guide-card,.benefit{transition:transform .45s var(--ease),border-color .35s,box-shadow .45s var(--ease)}
.card--interactive:hover,.feat:hover,.loc-card:hover,.step:hover,.price:hover,.benefit:hover{
  box-shadow:var(--island-top),0 40px 70px -34px rgba(0,0,0,1),0 2px 8px -2px rgba(0,0,0,.6)}
.tile{border-radius:16px}
.m-hero,.m-row,.s-row,.chip{border-radius:16px}
.band,.cta-band{border-radius:36px}
.faq details{border-radius:22px}
.table-wrap{border-radius:var(--r-island);box-shadow:var(--island-drop)}

/* ---- small things become pills ---------------------------------------------- */
.btn{border-radius:999px}
.tag{border-radius:999px}
.kicker{display:inline-flex;align-items:center;gap:8px;padding:5px 13px 5px 12px;border:1px solid var(--line-2);border-radius:999px;
  background:rgba(242,242,239,.04);font-size:.74rem;box-shadow:var(--island-top)}
.kicker::before{width:6px;height:6px;border-radius:50%;background:var(--bone)}
.hero-badge{box-shadow:var(--island-top),0 14px 30px -20px rgba(0,0,0,.9)}

/* stats: four islands instead of one strip */
.stat-strip{gap:12px;background:none!important;border:0;overflow:visible;box-shadow:none}
.stat-strip__item{border:1px solid var(--line)!important;border-radius:24px;background:var(--night);box-shadow:var(--island-top),var(--island-drop)}

/* protocol strip: a floating pill */
.marquee{width:min(100% - 32px,1160px);margin:18px auto 0;border:1px solid var(--line);border-radius:999px;box-shadow:var(--island-top),var(--island-drop);
  -webkit-mask:none;mask:none}

/* footer: one island */
.site-footer__main{background:var(--night);border:1px solid var(--line);border-radius:32px;padding:clamp(22px,3vw,34px);box-shadow:var(--island-top),var(--island-drop)}

@media(max-width:620px){
  .site-nav{padding-top:8px}
  .site-nav__inner,.site-nav.is-scrolled .site-nav__inner{width:calc(100% - 16px);min-height:56px}
  .nav-sheet{top:calc(56px + 16px);inset-inline:8px}
  .stat-strip{gap:8px}
  .marquee{width:calc(100% - 16px)}
}