:root { --p:#009aa7; --s:#f1983c; }

html { scroll-behavior: smooth; }
section[id]{ scroll-margin-top: 110px; }

html, body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

.header-shell.header--hidden { transform: translateY(-110%); }

.brand-logo{ height: 64px; width:auto; display:block; }
@media (min-width: 640px){ .brand-logo{ height: 72px; } }

.glass{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(229,231,235,.75);
}

.link-underline{ background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .28s ease; }
.link-underline:hover{ background-size: 100% 2px; }

.nav-link{
  font-size: .95rem;
  font-weight: 600;
  color: rgb(51 65 85);
  position: relative;
  transition: color .2s ease;
}
.nav-link:hover{ color: rgb(15 23 42); }
.nav-link.is-active{
  color: rgb(15 23 42);
}
.mobile-link{
  display:block;
  border-radius: .75rem;
  padding: .6rem .75rem;
  font-size: .95rem;
  font-weight: 700;
  color: rgb(51 65 85);
}
.mobile-link:hover{ background: rgb(248 250 252); }

.molecule{ position:absolute; inset:0; overflow:hidden; }
.molecule::before{
  content:"";
  position:absolute; inset:-20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,154,167,.22), transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(241,152,60,.18), transparent 34%),
    radial-gradient(circle at 70% 75%, rgba(0,154,167,.16), transparent 40%),
    radial-gradient(circle at 30% 85%, rgba(241,152,60,.12), transparent 42%);
  filter: blur(6px);
  animation: floatSlow 16s ease-in-out infinite alternate;
}
.molecule::after{
  content:"";
  position:absolute; inset:0;
  opacity:.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='360' viewBox='0 0 820 360'%3E%3Cg fill='none' stroke='%23009aa7' stroke-opacity='.22' stroke-width='1.2'%3E%3Cpath d='M35 290 L160 220 L270 270 L390 190 L520 220 L650 120 L780 170'/%3E%3Cpath d='M80 80 L180 140 L280 90 L360 130 L460 70 L560 120 L700 60'/%3E%3Cpath d='M120 320 L220 260 L340 310 L470 250 L610 300 L740 230'/%3E%3C/g%3E%3Cg fill='%23009aa7' fill-opacity='.20'%3E%3Ccircle cx='35' cy='290' r='6'/%3E%3Ccircle cx='160' cy='220' r='5'/%3E%3Ccircle cx='270' cy='270' r='7'/%3E%3Ccircle cx='390' cy='190' r='5'/%3E%3Ccircle cx='520' cy='220' r='6'/%3E%3Ccircle cx='650' cy='120' r='5'/%3E%3Ccircle cx='780' cy='170' r='6'/%3E%3Ccircle cx='80' cy='80' r='6'/%3E%3Ccircle cx='180' cy='140' r='5'/%3E%3Ccircle cx='280' cy='90' r='7'/%3E%3Ccircle cx='360' cy='130' r='5'/%3E%3Ccircle cx='460' cy='70' r='6'/%3E%3Ccircle cx='560' cy='120' r='5'/%3E%3Ccircle cx='700' cy='60' r='6'/%3E%3C/g%3E%3Cg fill='%23f1983c' fill-opacity='.14'%3E%3Ccircle cx='120' cy='320' r='7'/%3E%3Ccircle cx='220' cy='260' r='6'/%3E%3Ccircle cx='340' cy='310' r='7'/%3E%3Ccircle cx='470' cy='250' r='6'/%3E%3Ccircle cx='610' cy='300' r='7'/%3E%3Ccircle cx='740' cy='230' r='6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 980px auto;
  background-repeat: repeat;
  animation: drift 24s linear infinite;
  mix-blend-mode: multiply;
}
@keyframes drift { from { background-position: 0 0; } to { background-position: -980px 260px; } }
@keyframes floatSlow { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(18px,-12px,0) scale(1.02); } }

.slider{ position:relative; }
.slider-fullbleed{
  /* Avoid horizontal scrollbars caused by 100vw including the scrollbar width */
  width: calc(100vw - (100vw - 100%));
  margin-left: 50%;
  transform: translateX(-50%);
}
.slider-viewport{ overflow:hidden; }
.slider-track{ display:flex; transition: transform .55s cubic-bezier(.2,.85,.2,1); will-change: transform; }
.slide{ min-width:100%; position:relative; }
.slide img{ width:100%; height: clamp(320px, 42vw, 520px); object-fit: cover; display:block; }
.slide::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 15% 30%, rgba(0,0,0,.52), rgba(0,0,0,.08) 55%, rgba(0,0,0,0) 70%),
    linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 55%);
  pointer-events:none;
}
.slider-btn{
  position:absolute; top:50%; transform: translateY(-50%);
  width:46px; height:46px; border-radius:9999px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(229,231,235,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
  box-shadow: 0 12px 30px rgba(15,23,42,.18);
}
.slider-btn:hover{ background: rgba(255,255,255,.92); transform: translateY(-50%) scale(1.04); }
.slider-btn:active{ transform: translateY(-50%) scale(.98); }
.slider-prev{ left: 16px; }
.slider-next{ right: 16px; }

.dots{ position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:10px; }
.dot{
  width:10px; height:10px; border-radius:9999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(229,231,235,.9);
  transition: transform .18s ease, background .18s ease;
}
.dot.is-active{ background: var(--p); border-color: rgba(0,154,167,.65); transform: scale(1.15); }

.focus-ring:focus { outline: none; box-shadow: 0 0 0 3px rgba(241,152,60,.35); }