/* Local fonts loaded via assets/css/fonts.css */
:root{
  --color-primary:#162F3A; /* dark primary */
  --color-secondary:#9349FA; /* purple accent */
  --text-color:#ffffff; /* global text now white */
  --bg:#FCF4EF; /* light surface */
  --box-max-width: 800px; /* shared width for content boxes and header logo */
}
*{box-sizing:border-box}
html{
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
body{margin:0;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text-color);display:flex;flex-direction:column;}
body.no-scroll{height:100vh;overflow:hidden;touch-action:none}
body.with-sticky-footer{padding-bottom:80px}
/* Subpages: default to dark text color on light bg */
body.subpage{color:#162F3A}
/* Space content below fixed header logo on subpages */
/* Subpages: ensure first content sits below floating logo by the same
   distance the homepage reserves above the footer. Use footer height
   as reference so spacing visually matches. */
body.subpage .container:first-of-type,
body.subpage main { padding-top: 120px; }

/* Main page: use same spacing as bottom gap for equal top/bottom spacing */
.fullscreen-section { padding-top: 8px; }

.logo-section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;left: 0;right: 0;bottom: 0;
  background: transparent;
  z-index: 3;
  pointer-events: none;
}

.logo-section.hero-hidden{display:none}

.logo-section.is-pinned { min-height: 20vh; }

.fullscreen-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 24px 33px 24px;
  width: 100%;
}

/* Floating text logo shown after hero, hides when scrolled back to hero */
.floating-text-logo{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:50;opacity:0;pointer-events:none;transition:opacity .25s ease-out;width:min(100%, var(--box-max-width))}
.floating-text-logo img{width:100%;height:auto;display:block}
.floating-text-logo.is-visible{opacity:1;pointer-events:auto}
@keyframes floatY{0%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}100%{transform:translate(-50%,0)}}

.container{width:100%;max-width:1100px;margin:0 auto;padding:24px}
.card{background:#162F3A;color:#FCF4EF;backdrop-filter:saturate(120%) blur(8px);border-radius:20px;box-shadow:0 12px 30px rgba(0,0,0,0.08);padding:24px}
/* Hero overrides: no box, no shadow */
.logo-breath{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;background:transparent;box-shadow:none;border-radius:0;backdrop-filter:none;will-change:transform,opacity;transition:transform 0.18s ease-out,opacity 0.18s ease-out}
.logo-breath .logo{
  width: 60vw;
  height:auto;
  filter:none;
  transform-origin: center;
  will-change: transform, opacity;
  transition: transform 0.18s ease-out, opacity 0.18s ease-out;
}

.logo-section.is-pinned .logo {
  width: 20vw;
}

@keyframes breathe{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.logo-breath .logo{animation:breathe 2.5s ease-in-out infinite}

.logo-breath .logo.animation-stopped {
  animation: none;
}

.scroll-indicator {
  display: none; /* Arrow is removed */
}

.grid{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0; /* Remove gap, use margin instead */
  width: 100%;
  max-width: 1100px;
  transform: translateY(var(--stack-offset, 0px));
  transition: transform 0.18s ease-out;
  opacity: 1; /* Show grid immediately */
  min-height: calc(100vh + 9px);
  justify-content: center;
  padding-bottom: 9px;
}

.grid.content-active{opacity:1;transition:opacity .3s ease-out}
.box{
  border-radius:18px;
  background:#162F3A;
  padding:24px;
  box-shadow:0 10px 20px rgba(0,0,0,0.06);
  width: 100%;
  max-width: var(--box-max-width);
  opacity: 0; /* Hidden by default */
  transform: translateY(0);
  margin-bottom: 6vh; /* Tighter vertical spacing */
}

/* First box is visible by default for centered display */
.box:first-child {
  opacity: 1;
}



.box:last-child {
  margin-bottom: 9px; /* Add 9px margin to extend scrollable area */
}

/* Box transitions removed - boxes are always visible */

/* Box visibility no longer needed - boxes are always visible */

.box h3{margin:0 0 8px;font-size:1.1rem;color:#FCF4EF}
.box p{margin:0;color:#FCF4EF}
/* Scroll hint below Box 1 before first scroll */
.scroll-hint{display:flex;flex-direction:column;align-items:center;gap:4px;margin:20px 0 0;color:#162F3A;opacity:.85;font-size:.72rem;cursor:pointer;user-select:none;transition:opacity .2s ease;background:none;border:0;padding:0;box-shadow:none;appearance:none;-webkit-appearance:none;outline:none}
.scroll-hint:hover{opacity:1}
.scroll-hint .arrow{font-size:27.04px;line-height:1;animation:hintPulse 1.2s ease-in-out infinite;display:inline-flex}
.scroll-hint .arrow-icon{width:27.04px;height:27.04px;display:block}
.scroll-hint .label{display:none}
@keyframes hintPulse{0%{transform:translateY(0)}50%{transform:translateY(4px)}100%{transform:translateY(0)}}
img.rounded{border-radius:14px;max-width:100%;height:auto}
nav.footer-nav a{color:inherit;text-decoration:none;padding:6px 10px;border-radius:10px;transition:background-color .2s ease,color .2s ease,transform .1s ease}
nav.footer-nav{justify-content:center}
nav.footer-nav a:hover{background:rgba(22,47,58,0.14);text-decoration:underline}
.box.box-image{padding:0;overflow:hidden}
/* Variant 1: Full-bleed image */
.image-full-bleed{display:block;margin:0}
.image-full-bleed img{display:block;width:100%;height:auto;object-fit:cover}
.image-full-bleed figcaption{padding:12px 16px;color:#FCF4EF;opacity:.9;font-size:.95rem}

/* Variant 2: Split layout */
.box-image-split .split{display:grid;grid-template-columns:1fr;gap:12px;padding:14px}
.box-image-split .split-media{display:flex}
.box-image-split .split-media img{width:100%;height:auto;object-fit:cover;background:#0f2129;border-radius:14px}
.box-image-split .split-content{padding:4px 6px 10px}
.box-image-split .split-content h3{margin:0 0 6px}
.box-image-split .split-content p{margin:0}
@media (min-width: 720px){
  .box-image-split .split{grid-template-columns:1.1fr 1fr;align-items:center;gap:18px;padding:18px}
}

/* Variant 3: Collage (maintain natural proportions with consistent max height) */
.box-image-collage{padding: 14px 14px 32px;}
.box-image-collage .collage{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-items:center;
}

/* Contact card */
.box-contact{background:#162F3A}
.box-contact .contact-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:6px}
.box-contact .member{display:flex;gap:12px;align-items:flex-start}
.box-contact .avatar{width:75px;height:75px;object-fit:cover;border-radius:50%}
.box-contact .member-info{display:flex;flex-direction:column;gap:4px}
.box-contact .name{margin:0;color:#FCF4EF;font-size:1.02rem}
.box-contact .role{margin:0;color:#E7DED9;font-size:.9rem;opacity:.9}
.box-contact .bio{margin:2px 0 0;color:#FCF4EF;opacity:.95}
.box-contact .contact-links{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.box-contact .contact-links a{color:#A1ECFF;text-decoration:none;white-space:nowrap}
.box-contact .contact-links a:hover{text-decoration:underline}
.box-contact .public-inbox{margin-top:12px;color:#E7DED9}
@media (min-width: 720px){
  .box-contact .contact-grid{grid-template-columns:1fr 1fr}
}
/* Maintain natural proportions with consistent height */
.box-image-collage .collage img{
  display:block;
  width:100%;
  height:200px;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto;
  border-radius: 14px;
}
/* Comfortable spacing for heading and text */
.box-image-collage h3,.box-image-collage p{padding:0 14px}
@media (min-width: 720px){
  .box-image-collage{padding: 18px 18px 36px;}
  .box-image-collage .collage{
    grid-template-columns:1fr 1fr;
    gap:16px;
    align-items:stretch;
  }
  .box-image-collage .collage img{
    height:220px;
    width:100%;
  }
}
.color-primary{color:var(--color-primary)}
.color-secondary{color:var(--color-secondary)}
a{color:var(--color-secondary)}
.text-gradient{background:linear-gradient(90deg,#1E98FD 0%,#FF00F7 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.site-footer .container{text-align:center}
.site-footer{color:#162F3A;position:fixed;left:0;right:0;bottom:-10px;background:var(--bg);z-index:100;border-top:none;box-shadow:none;opacity:0;pointer-events:none;transition:opacity .3s ease-out}
.site-footer a{color:#162F3A !important}

/* Header bar: same style family as footer, fixed at top */
.site-header{position:fixed;left:0;right:0;top:0;background:var(--bg);z-index:49;border-bottom:none;box-shadow:none;color:#162F3A}

body.with-sticky-footer .site-footer{opacity:1;pointer-events:auto}

/* Desktop left-side branding logo (shows after hero) */
.side-branding-logo{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:45;opacity:0;pointer-events:none;transition:opacity .25s ease-out;display:none}
.side-branding-logo img{height:44vh;width:auto;display:block}
.side-branding-logo.is-visible{opacity:1;pointer-events:auto}

/* Page transition: hero logo zoom-out */
.page-transition-overlay{position:fixed;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:9999;opacity:0;pointer-events:none}
.page-transition-overlay.is-active{opacity:1}
.page-transition-logo{width:clamp(140px,32vw,360px);height:auto;transform-origin:center;animation:pageZoomOut 1200ms cubic-bezier(0.65,0,0.35,1) forwards}
@keyframes pageZoomOut{0%{transform:scale(1);opacity:1}100%{transform:scale(3.2);opacity:0}}

/* Hide content while entry overlay plays on subpages (but allow overlay to show) */
body.preload-hidden > :not(.page-transition-overlay){visibility:hidden}