/* =========================================================
   NOVARA ADVISORY — Design System v2 "Midnight & Gold"
   Deep navy, radiant gold, elevated cards, premium motion
   ========================================================= */

:root{
  --navy:       #0A1628;
  --navy-2:     #10233F;
  --navy-3:     #16305A;
  --gold:       #C9A227;
  --gold-hi:    #E8C766;
  --gold-deep:  #A07E14;
  --cream:      #FAF8F3;
  --white:      #FFFFFF;
  --ink:        #101B2D;
  --ink-70:     rgba(16,27,45,.72);
  --ink-45:     rgba(16,27,45,.45);
  --line:       #E4DFD2;
  --line-navy:  rgba(232,199,102,.18);
  --paper-60:   rgba(250,248,243,.75);
  --glow:       rgba(201,162,39,.22);

  --serif: "IBM Plex Serif", Georgia, serif;
  --sans:  "IBM Plex Sans", -apple-system, Segoe UI, Arial, sans-serif;
  --mono:  "IBM Plex Mono", "Courier New", monospace;

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 6px;
  --shadow-card: 0 2px 6px rgba(10,22,40,.06), 0 14px 34px rgba(10,22,40,.10);
  --shadow-lift: 0 6px 14px rgba(10,22,40,.10), 0 24px 54px rgba(10,22,40,.16);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.1;
  margin:0 0 .5em;
  letter-spacing:-0.012em;
}
h1{font-size:clamp(2.6rem,5.8vw,4.4rem);}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}

h1 em, h2 em{
  font-style:italic;
  background:linear-gradient(100deg, var(--gold-hi), var(--gold) 60%, var(--gold-deep));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1.1em;
}
.eyebrow::before{
  content:"";
  width:26px;height:2px;
  background:linear-gradient(90deg, var(--gold-hi), var(--gold));
  display:inline-block;
  border-radius:2px;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--navy); color:var(--cream);
  padding:.6em 1em; font-family:var(--mono); font-size:.8rem;
  z-index:200;
}
.skip-link:focus{left:12px; top:12px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:1em 1.7em;
  border:1px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  background:transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{
  background:linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-deep) 130%);
  color:var(--navy);
  font-weight:600;
  box-shadow:0 6px 18px rgba(201,162,39,.35);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(201,162,39,.45);}
.btn-outline{
  border-color:var(--gold-deep);
  color:var(--ink);
}
.btn-outline:hover{background:var(--navy); color:var(--cream); border-color:var(--navy); transform:translateY(-2px);}
.btn-on-dark{
  background:linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-deep) 130%);
  color:var(--navy);
  font-weight:600;
  box-shadow:0 6px 18px rgba(201,162,39,.35);
}
.btn-on-dark:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(232,199,102,.5);}
.btn-ghost-dark{
  border-color:var(--line-navy);
  color:var(--cream);
}
.btn-ghost-dark:hover{border-color:var(--gold); color:var(--gold-hi);}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(10,22,40,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-navy);
  color:var(--cream);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gutter);
  max-width:var(--maxw); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:.65em; color:var(--cream);}
.brand-mark{width:32px; height:32px; flex-shrink:0; color:var(--gold-hi);}
.brand-word{font-family:var(--mono); line-height:1.05;}
.brand-word .n1{display:block; font-size:.95rem; letter-spacing:.16em; font-weight:600; color:var(--cream);}
.brand-word .n2{display:block; font-size:.58rem; letter-spacing:.34em; color:var(--gold);}

.nav-links{display:flex; align-items:center; gap:2.1em;}
.nav-links a{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.3em 0; border-bottom:2px solid transparent; color:rgba(250,248,243,.85);
  transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--gold-hi); border-bottom-color:var(--gold);}
.nav-cta{margin-left:.4em;}
.nav-links .btn-outline{border-color:var(--gold); color:var(--gold-hi);}
.nav-links .btn-outline:hover{background:var(--gold); color:var(--navy); border-color:var(--gold);}

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--gold); border-radius:var(--radius);
  width:42px; height:38px; cursor:pointer;
  position:relative;
}
.nav-toggle span{
  position:absolute; left:10px; right:10px; height:2px; background:var(--gold-hi);
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span:nth-child(1){top:12px;}
.nav-toggle span:nth-child(2){top:18px;}
.nav-toggle span:nth-child(3){top:24px;}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media (max-width: 860px){
  .nav-links{
    position:fixed; inset:70px 0 auto 0; background:var(--navy);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:10px var(--gutter) 30px;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .18s ease, transform .18s ease;
    border-bottom:1px solid var(--line-navy);
  }
  .nav-links.open{opacity:1; visibility:visible; transform:translateY(0);}
  .nav-links a{width:100%; padding:.9em 0; border-bottom:1px solid var(--line-navy);}
  .nav-cta{margin-left:0; margin-top:.8em;}
  .nav-toggle{display:block;}
}

/* ---------- Hero (dark, radiant) ---------- */
.hero{
  padding:110px 0 100px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 500px at 78% 30%, rgba(201,162,39,.16), transparent 60%),
    radial-gradient(700px 600px at 10% 110%, rgba(22,48,90,.9), transparent 65%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy) 100%);
  color:var(--cream);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(232,199,102,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,199,102,.05) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(800px 500px at 30% 40%, black 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(800px 500px at 30% 40%, black 0%, transparent 75%);
  pointer-events:none;
}
.hero-inner{max-width:720px; position:relative; z-index:2;}
.hero .eyebrow{color:var(--gold-hi);}
.hero h1{margin-bottom:.5em; color:var(--white); text-shadow:0 2px 30px rgba(0,0,0,.35);}
.hero .lede{font-size:1.18rem; color:rgba(250,248,243,.82); max-width:560px;}
.hero-actions{display:flex; gap:1em; margin-top:2.2em; flex-wrap:wrap; align-items:center;}
.hero-note{font-family:var(--mono); font-size:.74rem; color:rgba(250,248,243,.55); letter-spacing:.04em;}

.hero-compass{
  position:absolute; right:clamp(-30px,3vw,80px); top:50%; transform:translateY(-50%);
  width:min(420px,36vw); z-index:1; color:var(--gold-hi);
  filter:drop-shadow(0 0 34px rgba(201,162,39,.35));
}
.hero-compass .ring{opacity:.5;}
.hero-compass .ticks{opacity:.6;}
.hero-compass .needle{
  transform-origin:50% 50%;
  animation:bearing 14s ease-in-out infinite;
}
@keyframes bearing{
  0%{transform:rotate(0deg);}
  30%{transform:rotate(14deg);}
  55%{transform:rotate(-9deg);}
  80%{transform:rotate(5deg);}
  100%{transform:rotate(0deg);}
}
@media (prefers-reduced-motion: reduce){.hero-compass .needle{animation:none;}}
@media (max-width:900px){.hero-compass{display:none;}}

/* ---------- Page hero (secondary pages) ---------- */
.page-hero{
  padding:80px 0 64px;
  background:
    radial-gradient(700px 340px at 80% 0%, rgba(201,162,39,.14), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color:var(--cream);
}
.page-hero .eyebrow{color:var(--gold-hi);}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.2rem); color:var(--white);}
.page-hero .lede{color:rgba(250,248,243,.8); max-width:640px; font-size:1.08rem;}

/* ---------- Practice-area cards ---------- */
.ledger-rows{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  border:none;
}
.ledger-row{
  display:flex; flex-direction:column; gap:.6em;
  background:var(--white);
  border:1px solid var(--line);
  border-top:3px solid var(--gold);
  border-radius:var(--radius);
  padding:30px 28px 26px;
  box-shadow:var(--shadow-card);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position:relative;
}
.ledger-row:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lift);
  border-top-color:var(--gold-hi);
}
.row-code{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  color:var(--gold-deep);
}
.row-title{font-family:var(--serif); font-weight:600; font-size:1.35rem; color:var(--ink);}
.row-desc{color:var(--ink-70); font-size:.96rem; flex:1;}
.row-arrow{
  font-family:var(--mono); font-size:.85rem; color:var(--gold-deep);
  margin-top:.6em; transition:transform .2s ease;
}
.ledger-row:hover .row-arrow{transform:translateX(6px); color:var(--gold);}

@media (max-width:860px){
  .ledger-rows{grid-template-columns:1fr; gap:18px;}
}

/* ---------- Section utility ---------- */
.section{padding:92px 0;}
.section-tight{padding:64px 0;}
.section-dark{
  background:
    radial-gradient(800px 400px at 15% 100%, rgba(201,162,39,.12), transparent 60%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 70%, var(--navy-3) 130%);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.section-dark .eyebrow{color:var(--gold-hi);}
.section-dark h2{color:var(--white);}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:64px;}
@media (max-width:820px){.two-col{grid-template-columns:1fr; gap:40px;}}

.divider{
  display:flex; align-items:center; gap:18px;
  margin:0 0 40px; color:var(--gold-deep);
}
.divider .line{flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent);}
.divider svg{width:22px; height:22px; flex-shrink:0;}

.pull{
  font-family:var(--serif); font-style:italic; font-size:1.45rem;
  line-height:1.45; color:var(--ink);
  border-left:3px solid var(--gold); padding-left:1.1em;
}

/* ---------- Engagement phases ---------- */
.phases{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  border:none;
}
.phase{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 24px;
  box-shadow:var(--shadow-card);
  position:relative;
  transition:transform .22s ease, box-shadow .22s ease;
}
.phase:hover{transform:translateY(-5px); box-shadow:var(--shadow-lift);}
.phase::after{
  content:"";
  position:absolute; top:50%; right:-22px; width:22px; height:2px;
  background:linear-gradient(90deg, var(--gold), transparent);
}
.phase:last-child::after{display:none;}
.phase-num{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  color:var(--navy);
  display:inline-block; margin-bottom:1em;
  background:linear-gradient(135deg, var(--gold-hi), var(--gold));
  padding:.35em .8em; border-radius:100px; font-weight:600;
}
.phase h3{font-size:1.14rem; margin-bottom:.5em;}
.phase p{font-size:.92rem; color:var(--ink-70);}
@media (max-width:860px){
  .phases{grid-template-columns:1fr 1fr;}
  .phase::after{display:none;}
}
@media (max-width:520px){.phases{grid-template-columns:1fr;}}

/* ---------- Service detail blocks ---------- */
.service-block{padding:72px 0; border-bottom:1px solid var(--line);}
.service-block:last-of-type{border-bottom:none;}
.service-block:nth-of-type(even){background:var(--white);}
.service-head{display:flex; gap:24px; align-items:baseline; margin-bottom:1em; flex-wrap:wrap;}
.service-head .row-code{
  font-size:.78rem; background:linear-gradient(135deg, var(--gold-hi), var(--gold));
  color:var(--navy); padding:.4em .9em; border-radius:100px; font-weight:600;
}
.service-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:48px;}
@media (max-width:820px){.service-grid{grid-template-columns:1fr;}}
.service-list{font-family:var(--mono); font-size:.85rem; line-height:1.9;}
.service-list li{padding:.6em 0; border-bottom:1px solid var(--line); display:flex; gap:.8em;}
.service-list li::before{content:"◆"; color:var(--gold); flex-shrink:0; font-size:.7em; align-self:center;}

/* ---------- Principles ---------- */
.principles{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.principle{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  border-top:3px solid var(--gold);
  padding:28px 26px;
  box-shadow:var(--shadow-card);
  transition:transform .22s ease, box-shadow .22s ease;
}
.principle:hover{transform:translateY(-5px); box-shadow:var(--shadow-lift);}
.principle h3{font-size:1.14rem;}
.principle p{font-size:.93rem; color:var(--ink-70);}
@media (max-width:760px){.principles{grid-template-columns:1fr; gap:18px;}}

/* ---------- Founder card ---------- */
.founder{
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:flex-start;
  background:
    radial-gradient(500px 200px at 100% 0%, rgba(201,162,39,.15), transparent 60%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 100%);
  color:var(--cream);
  border:1px solid var(--line-navy); padding:38px; border-radius:var(--radius);
  box-shadow:var(--shadow-lift);
}
.founder h3{color:var(--white); margin-bottom:.2em;}
.founder-mark{width:52px; height:52px; color:var(--gold-hi);}
.founder .role{font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-hi); margin-bottom:.8em; display:block;}
.founder p{color:rgba(250,248,243,.82);}
.placeholder-note{
  margin-top:1em; font-family:var(--mono); font-size:.74rem; color:rgba(250,248,243,.5);
  border-top:1px dashed var(--line-navy); padding-top:.8em;
}
@media (max-width:600px){.founder{grid-template-columns:1fr;}}

/* ---------- Forms ---------- */
.form-grid{display:grid; gap:22px;}
.field{display:flex; flex-direction:column; gap:.5em;}
.field label{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-70);
}
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:1rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white); padding:.85em 1em;
  color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--gold); outline:none;
  box-shadow:0 0 0 3px rgba(201,162,39,.18);
}
.field textarea{resize:vertical; min-height:120px;}
.hp-field{position:absolute; left:-9999px; opacity:0;}

.contact-panel{
  background:
    radial-gradient(500px 240px at 100% 0%, rgba(201,162,39,.16), transparent 60%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 100%);
  color:var(--cream); padding:44px; border-radius:var(--radius);
  box-shadow:var(--shadow-lift);
  border:1px solid var(--line-navy);
}
.contact-panel h3{color:var(--white);}
.contact-line{margin-bottom:1.8em;}
.contact-line .label{display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-hi); margin-bottom:.35em;}
.steps{margin-top:2em; padding-top:1.6em; border-top:1px solid var(--line-navy);}
.steps li{display:flex; gap:.9em; font-size:.92rem; margin-bottom:.9em; color:rgba(250,248,243,.8);}
.steps li .num{
  font-family:var(--mono); color:var(--navy); font-weight:600;
  background:linear-gradient(135deg, var(--gold-hi), var(--gold));
  min-width:2em; height:2em; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:.78rem; flex-shrink:0;
}

/* ---------- Footer ---------- */
.site-footer{
  background:linear-gradient(160deg, var(--navy) 0%, #071120 100%);
  color:rgba(250,248,243,.6); padding:70px 0 28px;
  border-top:2px solid var(--gold);
}
.footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line-navy);}
@media (max-width:760px){.footer-top{grid-template-columns:1fr; gap:32px;}}
.footer-brand{display:flex; gap:.65em; align-items:center; margin-bottom:1em;}
.footer-brand svg{width:28px; height:28px; color:var(--gold-hi);}
.footer-tagline{font-family:var(--serif); font-style:italic; color:var(--cream); font-size:1.05rem; max-width:280px;}
.footer-col h4{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-hi); margin-bottom:1.1em;}
.footer-col li{margin-bottom:.7em; font-size:.9rem;}
.footer-col a{transition:color .15s ease;}
.footer-col a:hover{color:var(--gold-hi);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:22px; font-family:var(--mono); font-size:.72rem; letter-spacing:.02em;
}
.draft-flag{
  display:inline-block; margin-top:.4em; font-family:var(--mono); font-size:.68rem;
  color:var(--gold-hi); border:1px solid var(--line-navy); padding:.2em .6em; border-radius:100px;
}

/* ---------- Legal / draft pages ---------- */
.legal-banner{
  background:linear-gradient(135deg, var(--gold-hi), var(--gold));
  color:var(--navy); font-family:var(--mono); font-size:.82rem; font-weight:600;
  padding:14px var(--gutter); text-align:center;
}
.legal-content{max-width:740px; margin:0 auto; padding:56px var(--gutter) 90px;}
.legal-content h2{margin-top:1.6em;}
.legal-content mark{background:rgba(201,162,39,.25); padding:.05em .2em; border-radius:3px;}

/* ---------- 404 / utility pages ---------- */
.error-page{
  min-height:70vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:80px 0;
}
.error-code{font-family:var(--mono); font-size:.85rem; color:var(--gold-deep); margin-bottom:1em;}

/* Reveal-on-scroll (progressive enhancement, JS adds .in) */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none;}}