/* ============================================================
   Veeaa Studio — studio.veeaa.com
   Compiled from the Claude Design handoff (brand set v1.3).
   Palette is locked to five values; muted gold #B8956A is
   reserved for the wedding/anniversary tier and never used here.
   ============================================================ */

:root{
  --ink-deep:#08121F;   /* page ground */
  --ink-navy:#0F1D2E;   /* cards, alternating sections, nav when scrolled */
  --ink-line:#1E3148;   /* every hairline */
  --powder:#B8C9D6;     /* the one accent */
  --cream:#F5F1EB;      /* headings on dark, knockout, photo mats */
  --slate:#7A93A3;      /* muted/secondary text */
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--ink-deep);color:var(--powder);
  font-family:Inter,system-ui,sans-serif;font-size:15px;line-height:1.65;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--cream)}
p{margin:0 0 14px}
::selection{background:var(--powder);color:var(--ink-deep)}
@keyframes vslide{to{transform:translateX(-100%)}}

/* ── nav ─────────────────────────────────────────────────────
   The prototype recomputed this in JS on every scroll event.
   Here the scroll listener only toggles one class.            */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease;
}
.nav.is-glass{
  background:rgba(8,18,31,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:var(--ink-line);
}
/* The mobile panel lives in the DOM on every page; JS only flips this. */
.nav-menu{display:none!important}
.nav.is-open .nav-menu{display:flex!important}
.nav.is-open{background:rgba(8,18,31,.94);border-bottom-color:var(--ink-line)}

/* Prototype swapped these with a JS resize listener — a media query is cheaper
   and works before JS runs. */
.nav-burger{display:none!important}
@media (max-width:999px){
  .nav-links,.nav-cta{display:none!important}
  .nav-burger{display:grid!important}
}

/* ── focus ───────────────────────────────────────────────────
   The prototype styled no focus state at all. Required. */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--powder);outline-offset:2px;
}

/* ── motion ──────────────────────────────────────────────────
   The marquee runs a 42s infinite translate; honour the OS setting. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* ── hover states lifted from the prototype's style-hover attributes ── */
.h0:hover{background:#F5F1EB}
.h1:hover{background:#F5F1EB}
.h2:hover{border-color:#B8C9D6}
.h3:hover{border-color:#B8C9D6;color:#F5F1EB}
.h4:hover{border-color:#B8C9D6;color:#F5F1EB}
.h5:hover{background:#F5F1EB}
.h6:hover{background:#F5F1EB}
.h7:hover{background:#F5F1EB}
.h8:hover{background:#F5F1EB}
.h9:hover{border-color:#B8C9D6}
.h10:hover{color:#F5F1EB}
.h11:hover{color:#F5F1EB}
.h12:hover{border-color:#B8C9D6}
.h13:hover{background:#08121F}
.h14:hover{background:#08121F}
.h15:hover{color:#F5F1EB}
/* ── print ─────────────────────────────────────────────────── */
@media print{ .nav{position:static} body{background:#fff;color:#000} }