/* Night Angel — Atelier critical (above-fold) */
:root{
  --ink:#12161c;--ink-mid:#2a3140;--ink-deep:#0a0c10;
  --brass:#9a7350;--brass-dark:#7a5a3d;--brass-light:#c4a574;
  --paper:#eef0f3;--paper-deep:#dde1e7;--white:#fafbfc;
  --text:#1a1e26;--muted:#5a6270;
  --line:rgba(18,22,28,.12);
  --radius:2px;--radius-sm:2px;
  --shadow:0 1px 0 var(--line);
  --font:"Figtree",system-ui,sans-serif;
  --font-display:"Syne",system-ui,sans-serif;
  --font-brand:"Cinzel",Georgia,serif;
  /* legacy aliases used across templates */
  --ocean:var(--ink);--ocean-mid:var(--ink-mid);--ocean-dark:var(--ink-deep);
  --coral:var(--brass);--coral-dark:var(--brass-dark);
  --sand:var(--paper);--sand-dark:var(--paper-deep);--gold:var(--brass-light);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--font);color:var(--text);line-height:1.65;font-size:16px;overflow-x:clip;
  background-color:var(--paper);
  background-image:
    radial-gradient(ellipse 80% 50% at 10% -10%,rgba(154,115,80,.08),transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 0%,rgba(18,22,28,.04),transparent 50%),
    linear-gradient(180deg,var(--paper) 0%,#e8eaee 100%);
  padding-bottom:5.5rem;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--brass)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;padding:.5rem 1rem;background:var(--ink);color:#fff}
.skip-link:focus{left:1rem;top:1rem}

.sticky-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:300;display:flex;gap:.5rem;
  padding:.7rem 1rem;background:rgba(10,12,16,.96);backdrop-filter:blur(12px);
  border-top:1px solid rgba(154,115,80,.35);
}
.site-header{
  position:sticky;top:0;z-index:200;
  background:rgba(250,251,252,.92);border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}
.header-inner{
  max-width:1200px;margin:0 auto;padding:1rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.logo{
  font-family:var(--font-brand);font-size:1.15rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);line-height:1.15;
}
.logo span{display:block;font-family:var(--font);font-size:.62rem;font-weight:500;letter-spacing:.28em;color:var(--brass);margin-top:.15rem}
.nav-toggle{display:none;background:var(--ink);color:#fff;border:0;padding:.5rem .85rem;border-radius:var(--radius);cursor:pointer;font-family:var(--font);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}

.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:heroKen 18s ease-out forwards}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(105deg,rgba(10,12,16,.88) 0%,rgba(10,12,16,.45) 48%,rgba(10,12,16,.72) 100%),
    linear-gradient(180deg,transparent 20%,rgba(10,12,16,.85) 100%);
}
.hero-content{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:4rem 1.25rem 3.25rem;width:100%}
.hero-brand{
  font-family:var(--font-brand);font-size:clamp(1.65rem,4.5vw,2.75rem);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;margin:0 0 .85rem;
  opacity:0;animation:riseIn .9s ease .15s forwards;
}
.hero h1{
  font-family:var(--font-display);font-size:clamp(1.35rem,3.2vw,2rem);font-weight:600;
  line-height:1.2;margin-bottom:.75rem;letter-spacing:-.02em;max-width:18ch;
  color:rgba(255,255,255,.92);opacity:0;animation:riseIn .9s ease .35s forwards;
}
.hero-lead{font-size:1.02rem;opacity:0;max-width:420px;margin-bottom:1.35rem;color:rgba(255,255,255,.82);animation:riseIn .9s ease .5s forwards}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;opacity:0;animation:riseIn .9s ease .65s forwards}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.85rem 1.5rem;border-radius:var(--radius);font-weight:600;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s;
}
.btn-primary{background:var(--brass);color:#fff;border-color:var(--brass)}
.btn-primary:hover{background:var(--brass-dark);color:#fff;border-color:var(--brass-dark)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-outline:hover{background:#fff;color:var(--ink);border-color:#fff}

@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroKen{from{transform:scale(1.06)}to{transform:scale(1)}}

@media(max-width:768px){
  .nav-toggle{display:block;min-height:44px;min-width:44px}
  .nav-main{display:none}
  .nav-main.is-open{
    display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:var(--white);padding:1rem 1.25rem;border-bottom:1px solid var(--line);z-index:210;
  }
  .nav-main.is-open a{display:block;padding:.65rem 0;min-height:44px;line-height:1.4}
  .header-inner{position:relative;flex-wrap:wrap}
  .logo{font-size:1rem;max-width:calc(100% - 3.5rem)}
  body{padding-bottom:calc(4.75rem + env(safe-area-inset-bottom,0px))}
  .sticky-bar{padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom,0px))}
  .hero{min-height:78vh}
}