/* Base */
*{box-sizing:border-box}
html{
  margin:0;
  padding:0;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, sans-serif;
  line-height:1.6;
  color:#111317;
  background:var(--page-bg);
}

:root{
  --accent-blue:0 113 227;

  --nav-pill-height-mobile:56px;
  --nav-pill-height-desktop:44px;
  --nav-icon-size:var(--nav-pill-height-desktop);
  --nav-inline-pad:16px;
  --footer-inline-pad:clamp(16px, 6vw, 28px);

  /* Shared nav shadow tokens */
  --nav-shadow:0 0 28px -14px rgba(0,0,0,.24);
  --nav-shadow-mobile-scrolled:0 0 40px -12px rgba(0,0,0,.30);

  /* Nav theme tokens (default: dark look) */
  --surface-dark:#111113;
  --nav-surface:rgba(24,24,27,.54);
  --nav-border:#ffffff33;
  --nav-text:rgba(232,233,236,1);
  --nav-text-dim:rgba(232,233,236,.72);
  --nav-press-bg:rgba(255,255,255,.06);

  --menu-thumb-bg-default:rgba(255,255,255,.16);
  --menu-thumb-bg-press:rgba(255,255,255,.24);

  /* Nav backdrop */
  --nav-backdrop:linear-gradient(
    to bottom,
    rgba(0,0,0,.46) 0%,
    rgba(0,0,0,.28) 55%,
    rgba(0,0,0,0) 100%
  );

  --nav-backdrop-h-mobile:calc(env(safe-area-inset-top, 0px) + 12px + var(--nav-pill-height-mobile) + 18px);
  --nav-backdrop-h-desktop:calc(env(safe-area-inset-top, 0px) + 12px + var(--nav-pill-height-desktop) + 18px);

  --nav-offset-mobile:calc(12px + var(--nav-pill-height-mobile) + var(--banner-vert-gap));
  --nav-offset-desktop:calc(12px + var(--nav-pill-height-desktop) + var(--banner-vert-gap));

  --banner-radius:calc(var(--nav-pill-height-mobile) / 2);
  --banner-side-gap:12px;
  --banner-vert-gap:14px;

  --page-bg:#ffffff;
}

/* Light mode nav */
@media (prefers-color-scheme: light){
  :root{
    --nav-surface:rgba(255,255,255,.78);
    --nav-border:rgba(0,0,0,.14);
    --nav-text:rgba(17,19,23,.92);
    --nav-text-dim:rgba(17,19,23,.68);
    --nav-press-bg:rgba(0,0,0,.06);

    --menu-thumb-bg-default:rgba(0,0,0,.08);
    --menu-thumb-bg-press:rgba(0,0,0,.12);
  }
}

.container{max-width:1100px;margin:0 auto;padding:0 12px}
.muted{color:#5e6572}
.small{font-size:.9rem}
.no-scroll{overflow:hidden}

/* Full-width containers for fixed nav + footer */
.nav .container,
.footer .container{
  max-width:none;
}

/* Nav backdrop */
.nav-backdrop{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--nav-backdrop-h-mobile);
  background:var(--nav-backdrop);
  z-index:1;
  pointer-events:none;

  opacity:0;
  transition:opacity .22s ease;
  will-change:opacity;

  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}

@media (min-width:900px){
  :root{
    --nav-inline-pad:24px;
  }
  .nav-backdrop{
    height:var(--nav-backdrop-h-desktop);
  }
}

/* Mobile portrait: no nav backdrop */
@media (max-width:900px) and (orientation:portrait){
  .nav-backdrop{display:none !important;}
}

.nav-backdrop.is-visible{opacity:1}

/* Nav */
.nav{
  position:fixed;
  top:calc(env(safe-area-inset-top, 0px) + 12px);
  left:0; right:0;
  z-index:1000;
  padding:0;
  padding-left:env(safe-area-inset-left, 0px);
  padding-right:env(safe-area-inset-right, 0px);
  pointer-events:none;
  backface-visibility:hidden;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  will-change:transform;
}
@media (hover:none) and (pointer:coarse) and (orientation:landscape){
  .nav{
    padding-left:0;
    padding-right:0;
  }
}
@media (hover:none) and (pointer:coarse) and (min-width:900px){
  .nav{
    -webkit-transform:none;
    transform:none;
  }
}
.nav *{pointer-events:auto}
.nav-inner{
  position:relative;
  z-index:2;
  isolation:isolate;
}

.row{
  height:var(--nav-pill-height-mobile);
  display:flex;
  align-items:center;
  padding:0 var(--nav-inline-pad);
  gap:16px;
  position:relative;
  z-index:3;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--nav-text);
}
.brand-logo{
  display:none;
  height:clamp(30px, 7.5vw, 36px);
  width:auto;
}
.brand.has-logo .brand-logo{display:block}

/* Light mode + desktop/landscape: black logo at top, white logo after scroll */
@media (prefers-color-scheme: light) and (min-width:900px){
  body:not(.nav--scrolled) .brand-logo{filter:invert(1)}
  body.nav--scrolled .brand-logo{filter:none}
}
@media (prefers-color-scheme: light) and (max-width:900px) and (orientation:landscape){
  body:not(.nav--scrolled) .brand-logo{filter:invert(1)}
  body.nav--scrolled .brand-logo{filter:none}
}

/* Mobile portrait: keep the logo black in light mode */
@media (prefers-color-scheme: light) and (max-width:900px) and (orientation:portrait){
  body .brand-logo{filter:invert(1) !important;}
}

.menu{
  display:flex;
  gap:14px;
  list-style:none;
  margin:0 auto;
  padding:0 var(--menu-pill-pad, 0px);
  font-size:.95rem;
  position:relative;
  isolation:isolate;

  --menu-thumb-pad:6px;
  --menu-thumb-h:32px;
  --menu-thumb-bg:var(--menu-thumb-bg-default);
}

.nav-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.nav-search,
.nav-toggle{
  width:var(--nav-icon-size);
  height:var(--nav-icon-size);
  border-radius:50%;
  border:1px solid var(--nav-border);
  background:var(--nav-surface);
  backdrop-filter:saturate(170%) blur(18px);
  -webkit-backdrop-filter:saturate(170%) blur(18px);
  box-shadow:var(--nav-shadow);
  color:var(--nav-text);
}

.nav-search{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* CSS-only search icon */
.nav-search::before,
.nav-search::after{
  content:"";
  position:absolute;
  display:block;
  pointer-events:none;
}
.nav-search::before{
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid currentColor;
  box-sizing:border-box;
  top:50%;
  left:50%;
  margin-top:-9px;
  margin-left:-9px;
}
.nav-search::after{
  width:9px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  top:50%;
  left:50%;
  margin-top:1px;
  margin-left:1px;
  transform-origin:left center;
  transform:rotate(45deg);
}

.menu a{
  color:var(--nav-text-dim);
  font-weight:500;
  text-decoration:none;
  padding:6px 12px;
  border-radius:12px;
  transition:color .18s linear;
}
.menu a.is-current{color:var(--nav-text)}
.menu a.is-target{color:var(--nav-text)}

/* Fix: prevent two fully-opaque labels (current + hovered) */
@supports selector(.menu:has(a)){
  .menu:has(a.is-target:not(.is-current)) a.is-current{
    color:var(--nav-text-dim);
  }
}
/* Fallback for browsers without :has */
@supports not selector(.menu:has(a)){
  @media (hover:hover) and (pointer:fine){
    .menu:hover a.is-current{color:var(--nav-text-dim)}
    .menu:hover a.is-current:hover{color:var(--nav-text)}
  }
}

@media (hover:hover) and (pointer:fine){
  .menu a:hover{color:var(--nav-text)}
}

.nav-toggle{
  display:none;
  outline:none;
  border-radius:50%;
  place-items:center;
  z-index:2;
}
.nav--open .nav-toggle{background:var(--nav-press-bg) !important}
.nav-toggle:focus,.nav-toggle:focus-visible{outline:none}
.nav-toggle-bar{
  display:block;
  width:18px;
  height:2px;
  background:currentColor;
  position:relative;
  border-radius:2px;
}
.nav-toggle-bar::before,
.nav-toggle-bar::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:currentColor;
  border-radius:2px;
  transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .2s linear;
}
.nav-toggle-bar::before{top:-6px}
.nav-toggle-bar::after{top:6px}
.sheet{display:none}

.nav-search:active{background:var(--nav-press-bg)}

/* Desktop / landscape: frosted menu pill + thumb highlight */
@media (min-width:900px), (max-width:900px) and (orientation:landscape){
  .row{height:var(--nav-pill-height-desktop)}
  .nav-inner::before{content:none}

  .menu{
    height:var(--nav-pill-height-desktop);
    align-items:center;

    --menu-thumb-pad:6px;
    --menu-thumb-h:32px;
    --menu-pill-pad:calc(var(--menu-thumb-pad) + (var(--nav-pill-height-desktop) - var(--menu-thumb-h)) * 0.5);
    padding:0 var(--menu-pill-pad);

    box-sizing:border-box;
    overflow:hidden;

    border:1px solid var(--nav-border);
    border-radius:calc(var(--nav-pill-height-desktop) / 2);
    background:var(--nav-surface);
    backdrop-filter:saturate(170%) blur(18px);
    -webkit-backdrop-filter:saturate(170%) blur(18px);
    box-shadow:var(--nav-shadow);
  }

  .menu a.is-current{background:transparent}

  .menu::before{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    height:var(--menu-thumb-h);
    width:var(--menu-thumb-w, 0px);
    transform:translateY(-50%) translateX(var(--menu-thumb-x, 0px));
    border-radius:calc(var(--menu-thumb-h) / 2);
    background:var(--menu-thumb-bg, var(--menu-thumb-bg-default));
    opacity:var(--menu-thumb-o, 0);
    transition:
      transform .45s cubic-bezier(.22,1,.36,1),
      width .45s cubic-bezier(.22,1,.36,1),
      opacity .18s linear,
      background-color .12s linear;
    pointer-events:none;
    z-index:0;
  }

  .menu a{
    position:relative;
    z-index:1;
    background:transparent;
    -webkit-tap-highlight-color:transparent;
  }

  .menu a:active{background:transparent !important}

  @supports selector(.menu:has(a:active)){
    .menu:has(a:active){
      --menu-thumb-bg: var(--menu-thumb-bg-press);
    }
  }

  .menu.thumb-init::before{transition:none !important}
}

@media (prefers-reduced-motion: reduce){
  @media (min-width:900px), (max-width:900px) and (orientation:landscape){
    .menu::before{transition:none !important}
  }
}

/* Mobile portrait nav */
@media (max-width:900px) and (orientation:portrait){
  .desktop{display:none}
  .nav-toggle{display:grid}

  .nav-inner{
    margin:0 var(--banner-side-gap);
    border:1px solid var(--nav-border);
    border-radius:calc(var(--nav-pill-height-mobile) / 2);
    background:var(--nav-surface);
    backdrop-filter:saturate(170%) blur(18px);
    -webkit-backdrop-filter:saturate(170%) blur(18px);
    box-shadow:var(--nav-shadow);
    transition:box-shadow .22s ease;
  }

  /* When scrolled, allow a slightly wider/stronger shadow for readability */
  body.nav--scrolled .nav-inner{
    box-shadow:var(--nav-shadow-mobile-scrolled);
  }

  .sheet{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1);
  }

  .row{
    height:var(--nav-pill-height-mobile);
    padding:0 16px;
  }

  .nav-search,
  .nav-toggle{
    width:40px;
    height:40px;
    border:none;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .nav-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
    margin-left:auto;
  }
  .nav-search{order:1}
  .nav-toggle{order:2;margin-right:0}
}

.sheet-content{overflow:hidden}
.mobile-menu{
  list-style:none;
  margin:0;
  padding:16px 4px 18px;
}
.mobile-menu a{
  display:block;
  padding:10px 12px;
  font-size:1.25rem;
  line-height:1.35;
  font-weight:600;
  color:var(--nav-text);
  text-decoration:none;
  border-radius:999px;
}

@media (hover:hover) and (pointer:fine){
  .menu a:hover{background:transparent}
  .mobile-menu a:hover{background:var(--nav-press-bg)}
  .nav-search:hover{background:var(--nav-press-bg)}
}

/* Press background should apply only to the mobile sheet links */
.mobile-menu a:active{
  background:var(--nav-press-bg);
}

/* Cache / precedence safety */
.menu a:active{background:transparent !important}

.nav--open .sheet{grid-template-rows:1fr}
.nav--open .nav-toggle-bar{background:transparent}
.nav--open .nav-toggle-bar::before{transform:translateY(6px) rotate(45deg)}
.nav--open .nav-toggle-bar::after{transform:translateY(-6px) rotate(-45deg)}

/* Sections */
.section{padding:44px 0 32px}
.section + .section{margin-top:12px}

.section--first{
  margin-top:0;
  padding-top:44px;
}

/* Ensure the first card clears the floating nav (desktop + landscape) */
@media (min-width:900px), (max-width:900px) and (orientation:landscape){
  .section--first{
    margin-top:calc(env(safe-area-inset-top, 0px) + 12px + var(--nav-pill-height-desktop) + 12px);
  }
}

.section--black,
.section--white{
  position:relative;
}
.section--black{background:#000; color:#e8e9ec}
.section--white{background:#f5f5f7; color:#111317}

/* Card layout for desktop + landscape (page cards, nav/footer excluded) */
@media (min-width:900px), (max-width:900px) and (orientation:landscape){
  .section--black,
  .section--white{
    margin-left:var(--banner-side-gap);
    margin-right:var(--banner-side-gap);
    border-radius:var(--banner-radius);
    overflow:hidden;
  }

  .media{
    border-radius:calc(var(--banner-radius) - 8px);
  }
}

/* Card layout for mobile portrait */
@media (max-width:900px) and (orientation:portrait){
  .section--black,
  .section--white{
    margin-left:var(--banner-side-gap);
    margin-right:var(--banner-side-gap);
    border-radius:var(--banner-radius);
    overflow:hidden;
  }

  .section + .section{margin-top:var(--banner-vert-gap)}

  .section--first{
    margin-top:calc(env(safe-area-inset-top, 0px) + var(--nav-offset-mobile));
    padding-top:28px;
  }

  .media{
    border-radius:calc(var(--banner-radius) - 8px);
  }
}

/* Hero */
.hero{display:flex; flex-direction:column; align-items:center; gap:16px}
.copy{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px, 1.6vw, 12px);
  padding:0 6px;
}
.copy .title{
  margin:0;
  font-size:clamp(28px,4.6vw,56px);
  line-height:1.06;
  letter-spacing:-.01em;
}
.copy .subtitle{margin:0; color:rgba(232,233,236,.88)}
.section--white .copy .subtitle{color:#5e6572}
.cta{display:flex; gap:12px; justify-content:center; margin-top:12px}

/* Shared feature-page hero card */
.page-feature .section--first{
  padding-top:0;
}
.page-hero-shell{
  margin:0 var(--banner-side-gap);
}
.page-hero-card{
  --hero-a:90 205 211;
  --hero-b:215 132 174;
  --hero-c:226 177 111;
  position:relative;
  min-height:clamp(460px, 56vw, 620px);
  overflow:hidden;
  isolation:isolate;
  border-radius:var(--banner-radius);
  color:#f5f5f7;
  background:linear-gradient(145deg, #0c0d10 0%, #08090c 52%, #0b090c 100%);
}
.page-hero-card::before{
  content:"";
  position:absolute;
  inset:-14%;
  z-index:-2;
  background:
    radial-gradient(58% 66% at 12% 36%, rgb(var(--hero-a) / .34) 0%, rgb(var(--hero-a) / 0) 68%),
    radial-gradient(56% 68% at 88% 30%, rgb(var(--hero-b) / .30) 0%, rgb(var(--hero-b) / 0) 68%),
    radial-gradient(52% 58% at 58% 92%, rgb(var(--hero-c) / .24) 0%, rgb(var(--hero-c) / 0) 70%);
  filter:blur(14px) saturate(1.12);
  animation:page-hero-ambient 18s cubic-bezier(.22,1,.36,1) infinite alternate;
  transform:scale(1.04);
}
.page-hero-card::after{
  content:"";
  position:absolute;
  inset:34% 0 0;
  z-index:1;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.18) 24%,
    rgba(0,0,0,.72) 62%,
    rgba(0,0,0,1) 100%
  );
  pointer-events:none;
}
.page-hero-media{
  position:absolute;
  inset:0;
}
.page-hero-media img{
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  width:clamp(340px, 64%, 650px);
  max-width:100%;
  max-height:88%;
  object-fit:contain;
  filter:drop-shadow(0 18px 42px rgba(0,0,0,.26));
  transform:translate(-50%, -50%);
}
.page-hero-copy.copy{
  position:absolute;
  left:clamp(24px, 4vw, 44px);
  right:clamp(24px, 4vw, 44px);
  bottom:clamp(24px, 4vw, 38px);
  z-index:2;
  align-items:flex-start;
  gap:6px;
  padding:0;
  text-align:left;
}
.page-hero-copy.copy .title{
  font-size:clamp(34px, 5.2vw, 58px);
  letter-spacing:-.025em;
}
.page-hero-copy.copy .subtitle{
  color:rgba(245,245,247,.78);
  font-size:clamp(14px, 2vw, 18px);
  line-height:1.45;
}
.page-hero-card--text-only{
  min-height:clamp(260px, 32vw, 360px);
}
@keyframes page-hero-ambient{
  from{ transform:scale(1.04) translate3d(-1.5%, -1%, 0); }
  to{ transform:scale(1.08) translate3d(1.5%, 1%, 0); }
}
@media (max-width:900px) and (orientation:portrait){
  .page-hero-card{
    display:grid;
    grid-template-rows:auto auto;
    min-height:0;
  }
  .page-hero-media{
    position:relative;
    inset:auto;
    height:clamp(300px, 84vw, 390px);
  }
  .page-hero-media img{
    width:min(108%, 460px);
    max-width:none;
    max-height:100%;
  }
  .page-hero-copy.copy{
    position:relative;
    inset:auto;
    padding:0 24px 26px;
  }
  .page-hero-card--text-only{
    display:flex;
    min-height:clamp(240px, 70vw, 320px);
  }
  .page-hero-card--text-only .page-hero-copy.copy{
    width:100%;
    margin-top:auto;
  }
}
@media (max-width:900px) and (orientation:landscape){
  .page-hero-card{ min-height:clamp(300px, 72vh, 420px); }
  .page-hero-media img{
    width:min(58vw, 460px);
    max-height:90%;
  }
  .page-hero-copy.copy{
    left:24px;
    right:24px;
    bottom:22px;
  }
  .page-hero-copy.copy .title{ font-size:clamp(30px, 6vw, 42px); }
}
@media (prefers-reduced-motion:reduce){
  .page-hero-card::before{ animation:none; }
}

/* Hero media */
.media{
  width:100%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  border-radius:12px;
  aspect-ratio:1/1;
}
@media (min-width:900px){
  .media{aspect-ratio:16/9; width:92%; margin:0 auto}
}

.media-27{
  background-image:url("../img/hero-iStage-27-mobile.png");
}
.media-18{
  background-image:url("../img/hero-iStage-18-mobile.png");
}
@media (min-width:900px){
  .media-27{
    background-image:url("../img/hero-iStage-27-desktop.png");
  }
  .media-18{
    background-image:url("../img/hero-iStage-18-desktop.png");
  }
}

/* Buttons */
a.btn,.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4ch;
  padding: clamp(10px, 2.8vw, 12px) clamp(14px, 4.2vw, 18px);
  border-radius:999px;
  font-weight:500;
  line-height:1;
  font-size: clamp(.88rem, 2.6vw, 1rem);
  text-decoration:none !important;
  appearance:none;
  -webkit-appearance:none;

  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:saturate(170%) blur(18px);
  -webkit-backdrop-filter:saturate(170%) blur(18px);
  box-shadow:0 0 24px -14px rgba(0,0,0,.28);

  transition:
    background-color .18s linear,
    border-color .18s linear,
    filter .18s linear,
    transform .12s ease;
}
a.btn:link,a.btn:visited{color:inherit}

.btn-blue{
  background:rgb(var(--accent-blue) / .76);
  border-color:rgb(var(--accent-blue) / .56);
  color:#fff !important;
}
.btn-blue:hover{background:rgb(var(--accent-blue) / .84)}
.btn-blue:active{background:rgb(var(--accent-blue) / .68); transform:translateY(0.5px)}

.btn-outline{
  background:rgba(120,120,120,.32);
  border-color:rgba(255,255,255,.18) !important;
  color:#fff !important;
}
.btn-outline:hover{background:rgba(120,120,120,.40)}
.btn-outline:active{background:rgba(120,120,120,.24); transform:translateY(0.5px)}

/* Releases */
.card{
  background:var(--surface-dark);
  border:1px solid var(--nav-border);
  border-radius:18px;
  padding:18px;
  color:#e8e9ec;
}
.releases-list{display:grid; gap:16px}

/* Footer */
.footer{
  position:relative;
  border-top:0;
  margin-top:0;
  padding:clamp(2.5rem, 4vw, 3.5rem) var(--footer-inline-pad) max(2rem, env(safe-area-inset-bottom, 0px));
  padding-left:max(var(--footer-inline-pad), calc(env(safe-area-inset-left, 0px) + var(--footer-inline-pad)));
  padding-right:max(var(--footer-inline-pad), calc(env(safe-area-inset-right, 0px) + var(--footer-inline-pad)));
  background:#f5f5f7;
  color:#a7acb7;
}
.footer .container{
  width:100%;
  max-width:1180px;
  padding:0;
}
.footer-content{
  display:grid;
  gap:clamp(1.75rem, 2.8vw, 2.5rem);
}
.footer-navigation{
  display:grid;
  gap:clamp(1.25rem, 3vw, 1.5rem);
}
.footer-title{
  margin:0;
  color:#f3f2ee;
  font-size:clamp(1.4rem, 2.5vw, 2rem);
  font-weight:700;
  line-height:1;
}
.footer-sitemap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.8rem clamp(1.5rem, 3.5vw, 3.2rem);
}
.footer-sitemap a{
  color:rgba(232,233,236,.72);
  font-size:clamp(.86rem, 1.4vw, 1rem);
  font-weight:600;
  letter-spacing:.08em;
  text-decoration:none;
  transition:opacity .22s ease;
}
.footer-sitemap a:hover{
  opacity:.72;
  text-decoration:none;
}
.footer-meta{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
  min-height:1.5rem;
  padding-right:clamp(4.4rem, 7vw, 5.2rem);
  font-size:.94rem;
}
.footer-meta p{margin:0}
.footer-brand{
  position:absolute;
  top:50%;
  right:0;
  display:block;
  width:clamp(3.4rem, 5vw, 4rem);
  color:inherit;
  line-height:0;
  opacity:.72;
  transform:translateY(-50%);
  transition:opacity .22s ease;
}
.footer-brand:hover{opacity:1; text-decoration:none}
.footer-brand svg{display:block; width:100%; height:auto; overflow:visible}
.footer-brand path{
  fill:none;
  stroke:currentColor;
  stroke-width:10;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.footer a{color:inherit; text-decoration:none}

@media (max-width:700px){
  .footer-sitemap{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .footer-meta{align-items:center}
}

/* Mobile menu enter animation */
.mobile-menu li{opacity:0; transform:translateY(-6px)}
.nav--open .mobile-menu li{
  animation:mobile-menu-in .45s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:var(--menu-delay, 0s);
}
@keyframes mobile-menu-in{
  from{opacity:0; transform:translateY(-6px)}
  to{opacity:1; transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .mobile-menu li{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
}

/* Reveal on scroll */
@keyframes fade-up{
  from{opacity:0; transform:translateY(var(--reveal-distance, 18px))}
  to{opacity:1; transform:translateY(0)}
}
.reveal{opacity:1; transform:none}
.js .reveal{
  opacity:0;
  transform:translateY(var(--reveal-distance, 18px));
  transition:
    opacity var(--reveal-duration, .75s) cubic-bezier(.22,1,.36,1),
    transform var(--reveal-duration, .75s) cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay, 0s);
}
.js .reveal.is-revealed{opacity:1; transform:none}
.reveal-onload{
  animation:fade-up var(--reveal-duration, .75s) cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:var(--reveal-delay, 0s);
}
.reveal-delay-0{--reveal-delay:0s}
.reveal-delay-1{--reveal-delay:.12s}
.reveal-delay-2{--reveal-delay:.24s}
.reveal-delay-3{--reveal-delay:.36s}
.reveal-delay-4{--reveal-delay:.48s}
.reveal-delay-5{--reveal-delay:.60s}
.reveal--short{--reveal-distance:10px}
.reveal--long{--reveal-distance:28px}

@media (prefers-reduced-motion: reduce){
  .reveal,
  .js .reveal,
  .js .reveal.is-revealed,
  .reveal-onload{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }
}