/* =========================
   TOKENS (Palette)
========================= */
:root{
  --font-display: 'Cormorant Garamond', serif;
  --font-ui: 'NeueHaasGrotText','Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --color-bg: #f6f4ef;      /* Soft ivory */
  --color-text: #0f1f3a;    /* Deep navy */
  --color-accent: #0f3d3a;  /* Deep teal */
  --color-silver: #d6d9de;  /* Soft silver */
  --ivory: #edeae3;         /* True ivory */
  --max-width: 720px;
}


/* =========================
   CUSTOM FONT (Neue Haas Grotesk Text)
   Files live in: assets/fonts/
   Using: 55 Roman, 65 Medium, 75 Bold (+ italics)
========================= */
@font-face{
  font-family: "NeueHaasGrotText";
  src: url("assets/fonts/NeueHaasGrotText-55Roman-Trial.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "NeueHaasGrotText";
  src: url("assets/fonts/NeueHaasGrotText-56Italic-Trial.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "NeueHaasGrotText";
  src: url("assets/fonts/NeueHaasGrotText-65Medium-Trial.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "NeueHaasGrotText";
  src: url("assets/fonts/NeueHaasGrotText-66MediumItalic-Trial.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "NeueHaasGrotText";
  src: url("assets/fonts/NeueHaasGrotText-75Bold-Trial.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "NeueHaasGrotText";
  src: url("assets/fonts/NeueHaasGrotText-76BoldItalic-Trial.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/* =========================
   BASE
========================= */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: var(--font-ui);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; }
.no-scroll{ overflow:hidden; }
.fade-in{ animation: fadeIn 520ms ease both; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.page-fade-out{ opacity:0; transition: opacity 220ms ease; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================
   BUTTONS
========================= */
.button{
  display:inline-block;
  padding: 14px 28px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--ivory);
  text-decoration:none;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: all 0.25s ease;
}
.button:hover{ background: transparent; color: var(--color-accent); }
.button:disabled{ opacity:0.55; cursor:not-allowed; }

/* =========================
   LOGO (Adaptive)
========================= */
.site-logo{
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  left: calc(14px + env(safe-area-inset-left));
  z-index: 1150;
  display:inline-flex;
}
.site-logo--hero .logo-primary{ fill: rgba(237,234,227,0.95); }
.site-logo--hero .logo-secondary{ fill: rgba(214,217,222,0.92); }

.site-logo:not(.site-logo--hero) .logo-primary{ fill: var(--color-accent); }
.site-logo:not(.site-logo--hero) .logo-secondary{ fill: rgba(15,31,58,0.75); }

.logo-svg{ width: 130px; height: auto; display:block; }
.site-logo--hero .logo-svg{ width: 190px; } /* bigger on landing */
@media (max-width: 480px){
  .logo-svg{ width: 110px; }
  .site-logo--hero .logo-svg{ width: 165px; }
}

/* =========================
   HAMBURGER (Clickable)
========================= */
.hamburger-btn{
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 1250;
  width: 52px;
  height: 52px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 12px;
}
.hamburger-btn span{
  display:block;
  width: 28px;
  height: 2px;
  margin: 6px auto;
  background: rgba(15,31,58,0.82);
  transition: 0.25s;
}
.hamburger-btn--hero span{
  background: rgba(237,234,227,0.92);
  box-shadow: 0 8px 20px rgba(0,0,0,0.22);
}

/* =========================
   MENU
========================= */
.menu{
  position: fixed;
  top: 0;
  right: -100%;
  width: min(380px, 85vw);
  height: 100%;
  background: var(--color-bg);
  padding: 96px 28px 28px;
  transition: right 420ms ease;
  z-index: 1200;
  box-shadow: -10px 0 30px rgba(0,0,0,0.06);
}
.menu.active{ right: 0; }
.menu a{
  display:block;
  margin-bottom: 18px;
  font-size: 18px;
  text-decoration:none;
  color: var(--color-text);
  transition: color 200ms ease;
}
.menu a:hover{ color: var(--color-accent); }
.menu__divider{
  height: 1px;
  background: rgba(15,31,58,0.20);
  margin: 20px 0 18px;
}
.menu__ig{
  display:inline-flex !important;
  width: 44px;
  height: 44px;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(15,31,58,0.18);
  border-radius: 999px;
  color: var(--color-text);
}

/* =========================
   HERO
========================= */
.hero{
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 100vh;
  overflow: hidden;
  background: #0f1f3a;
}
.hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  filter: brightness(0.83) contrast(0.94) saturate(0.93);
  transform: scale(1.01);
  object-position: 55% 58%; /* show more lower frame */
}
@media (max-width: 700px){
  .hero__img{
    object-position: 50% 62%; /* keep BOTH of you in frame */
    transform: scale(1.0);    /* slightly less zoom than desktop */
  }
}

.hero__overlay{ position:absolute; inset:0; pointer-events:none; }
.hero__overlay--bottom{
  background: linear-gradient(
    to top,
    rgba(15,31,58,0.70) 0%,
    rgba(15,31,58,0.28) 32%,
    rgba(15,31,58,0.10) 60%,
    rgba(15,31,58,0.00) 80%
  );
}
.hero__overlay--top{
  background: linear-gradient(
    to bottom,
    rgba(15,31,58,0.22) 0%,
    rgba(15,31,58,0.10) 18%,
    rgba(15,31,58,0.00) 42%
  );
}

.hero__lockup{
  max-width: 92vw;

  position:absolute;
  left:50%;
  bottom: 56px;
  transform: translateX(-50%);
  text-align:center;
  padding: 0 18px;
  z-index: 5;
}
.hero__names{
  font-family: var(--font-display);
  color: rgba(237,234,227,0.92);
  font-size: clamp(38px, 5.1vw, 68px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.02;
  text-shadow: 0 12px 28px rgba(0,0,0,0.30);
  white-space: nowrap; /* desktop: one-line */
}
.hero__meta{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 14px;
  color: rgba(214,217,222,0.90);
  font-size: 15px;
  letter-spacing: 0.10em;
  text-transform: none;
  text-shadow: 0 10px 22px rgba(0,0,0,0.22);
}
.hero__sep{
  width: 20px;
  height: 1px;
  background: rgba(214,217,222,0.70);
  flex: 0 0 auto;
}
@media (max-width: 480px){
  .hero__lockup{ bottom: calc(60px + env(safe-area-inset-bottom)); }
  .hero__names{
    font-size: 40px;
    letter-spacing: 0.01em;
    white-space: normal;
    text-wrap: balance;
  }
  .hero__meta{
    font-size: 13px;
    letter-spacing: 0.08em;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero__sep{ width: 16px; }
}

/* =========================
   PASSWORD GATE (Luxe)
========================= */
.gate{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 48px 24px;
  background:
    radial-gradient(900px 500px at 50% 20%, rgba(15,61,58,0.08), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(15,31,58,0.06), transparent 60%),
    var(--color-bg);
}
.gate__card{
  width: 100%;
  max-width: 520px;
  text-align:center;
  padding: 34px 26px 28px;
  border: 1px solid rgba(15,31,58,0.14);
  border-radius: 22px;
  background: rgba(246,244,239,0.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 55px rgba(15,31,58,0.10);
}
.gate__logo-wrap{ display:flex; justify-content:center; margin-bottom: 10px; }
.gate__logo-wrap .logo-svg{ width: 170px; }
.gate__title{
  margin: 8px 0 10px;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 400;
  letter-spacing: 0.03em;
}
.gate__subtitle{
  margin: 0 0 24px;
  font-size: 16px;
  opacity: 0.82;
}
.gate__form{ display:flex; flex-direction:column; gap: 14px; align-items:center; }
.gate__input{
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(15,31,58,0.18);
  background: rgba(237,234,227,0.55);
  color: var(--color-text);
  font-size: 16px;
  outline:none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.gate__input:focus{
  border-color: rgba(15,61,58,0.55);
  box-shadow: 0 0 0 6px rgba(15,61,58,0.10);
}
.gate__help{ margin-top:-6px; font-size: 13px; opacity: 0.7; }
.gate__error{ min-height: 20px; margin:0; font-size: 14px; color: rgba(15,61,58,0.95); }

/* =========================
   INTERNAL PAGES
========================= */
.page{ padding: 120px 0 80px; }
.container{ max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.page__title{ font-size: 40px; font-weight: 400; letter-spacing: 0.02em; margin: 0 0 18px; }
.divider{ width: 60px; height: 1px; background: rgba(15,31,58,0.18); margin: 28px 0; }
.page__body p{ font-size: 16px; line-height: 1.75; opacity: 0.92; }


/* =========================
   MENU BACKDROP (click outside to close)
========================= */
.menu-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15,31,58,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
  z-index: 1090; /* under menu (1100) but over page */
}
.menu-backdrop.active{
  opacity: 1;
  pointer-events: auto;
}


/* When menu is open, make the hero hamburger dark for contrast against ivory menu */
body.menu-open .hamburger-btn--hero span{
  background: rgba(15,31,58,0.82);
  box-shadow: none;
}

/* Subtle flourish: italic ampersand only (keeps it luxury, not cheesy) */
.hero__names em{
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
}

@media (max-width: 520px){
  .hero__names{
    white-space: normal;
    text-wrap: balance;
  }
}

/* Prevent logo from visually colliding with the slide-in menu on mobile */
@media (max-width: 700px){
  body.menu-open .site-logo{ opacity: 0; pointer-events: none; }
}

/* Ultra-tall phones: bias slightly left so both faces remain visible */
@media (max-aspect-ratio: 9/16){
  .hero__img{ object-position: 48% 58%; }
}