/* ===== NorthStar Marketing — design tokens ===== */
:root{
  /* type scale */
  --text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
  --text-sm:clamp(0.875rem,0.8rem + 0.35vw,1rem);
  --text-base:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + 0.75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-3xl:clamp(2.5rem,1rem + 4vw,4.5rem);

  /* spacing */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --space-20:5rem;--space-24:6rem;--space-32:8rem;

  --radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.625rem;--radius-xl:1rem;--radius-full:9999px;
  --transition-interactive:200ms cubic-bezier(.16,1,.3,1);

  --content-narrow:660px;--content-default:1000px;--content-wide:1200px;

  --font-display:'Instrument Serif',Georgia,serif;
  --font-body:'Switzer','Inter','Helvetica Neue',sans-serif;

  /* brand constants (same in both themes) */
  --navy:#0F1A2E;
  --navy-2:#15243D;
  --gold:#C9A24B;
  --gold-soft:#E0C288;
}

:root,[data-theme='light']{
  --color-bg:#F7F5F0;
  --color-surface:#FCFBF8;
  --color-surface-2:#FFFFFF;
  --color-surface-offset:#EEEAE1;
  --color-divider:#E0DAD0;
  --color-border:#D8D2C7;
  --color-text:#121B2D;
  --color-text-muted:#57607A;
  --color-text-faint:#8D94A5;
  --color-text-inverse:#F6F4EF;
  --color-primary:#8A6A1E;         /* AA-safe gold for text/links on light */
  --color-primary-hover:#6E5316;
  --color-accent:var(--gold);
  --color-on-dark:#F1EEE7;
  --color-on-dark-muted:#A9B2C4;
  --shadow-sm:0 1px 2px rgba(18,27,45,.06);
  --shadow-md:0 4px 16px rgba(18,27,45,.08),0 1px 3px rgba(18,27,45,.05);
  --shadow-lg:0 18px 48px rgba(18,27,45,.14);
}

[data-theme='dark']{
  --color-bg:#0B1220;
  --color-surface:#101A2B;
  --color-surface-2:#152036;
  --color-surface-offset:#17223A;
  --color-divider:#1E2A44;
  --color-border:#28344F;
  --color-text:#E7E4DD;
  --color-text-muted:#9CA6BA;
  --color-text-faint:#6C778F;
  --color-text-inverse:#0F1A2E;
  --color-primary:#DCB768;
  --color-primary-hover:#EBCC8B;
  --color-accent:var(--gold);
  --color-on-dark:#F1EEE7;
  --color-on-dark-muted:#A9B2C4;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 6px 20px rgba(0,0,0,.4);
  --shadow-lg:0 20px 52px rgba(0,0,0,.5);
}

/* ===== primitives ===== */
.container{width:100%;max-width:var(--content-wide);margin-inline:auto;padding-inline:clamp(var(--space-5),5vw,var(--space-16))}
.container--default{max-width:var(--content-default)}
.container--narrow{max-width:var(--content-narrow)}

.section{padding-block:clamp(var(--space-16),9vw,var(--space-32))}
.section--tight{padding-block:clamp(var(--space-12),6vw,var(--space-20))}

.eyebrow{
  font-size:var(--text-xs);letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--color-primary);
  display:flex;align-items:center;gap:var(--space-3);
}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--color-accent);flex:none}
.eyebrow--on-dark{color:var(--gold-soft)}

h1,h2,.display{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em}
h1{font-size:var(--text-3xl);line-height:1.02}
h2{font-size:var(--text-2xl);line-height:1.06}
h3{font-size:var(--text-lg);font-weight:600;letter-spacing:-.01em}
.lede{font-size:var(--text-lg);color:var(--color-text-muted);line-height:1.5;max-width:52ch}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:48px;padding:var(--space-3) var(--space-6);
  font-size:var(--text-sm);font-weight:600;letter-spacing:.02em;
  border-radius:var(--radius-full);text-decoration:none;white-space:nowrap;
}
.btn--primary{background:var(--gold);color:#14203a;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--gold-soft);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{border:1px solid var(--color-border);color:var(--color-text)}
.btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn--on-dark{border:1px solid rgba(241,238,231,.28);color:var(--color-on-dark)}
.btn--on-dark:hover{border-color:var(--gold);color:var(--gold-soft)}

.link-arrow{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-sm);font-weight:600;color:var(--color-primary);text-decoration:none;
}
.link-arrow svg{width:16px;height:16px;transition:transform var(--transition-interactive)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ===== header ===== */
.header{
  position:sticky;top:0;z-index:60;background:rgba(15,26,46,.86);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(241,238,231,.1);
}
.header__inner{display:flex;align-items:center;gap:var(--space-6);min-height:72px}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;margin-right:auto}
.brand img{width:34px;height:auto}
.brand__name{font-family:var(--font-display);font-size:1.3rem;line-height:1;color:var(--color-on-dark);letter-spacing:.01em}
.brand__name span{color:var(--gold-soft)}
.brand__sub{display:block;font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--color-on-dark-muted);margin-top:.28rem}

.nav{display:flex;align-items:center;gap:var(--space-6)}
.nav a{font-size:var(--text-sm);color:var(--color-on-dark-muted);text-decoration:none}
.nav a:hover{color:var(--gold-soft)}
.header__actions{display:flex;align-items:center;gap:var(--space-3)}
.header__phone{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-sm);font-weight:600;color:var(--color-on-dark);text-decoration:none;
}
.header__phone:hover{color:var(--gold-soft)}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:var(--radius-full);color:var(--color-on-dark-muted);
  border:1px solid rgba(241,238,231,.16);
}
.icon-btn:hover{color:var(--gold-soft);border-color:var(--gold)}
.nav-toggle{display:none}

.header__cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding:0 var(--space-5);border-radius:var(--radius-full);
  background:var(--gold);color:var(--navy);text-decoration:none;
  font-size:var(--text-sm);font-weight:600;letter-spacing:.01em;white-space:nowrap;
  transition:background 200ms ease,transform 200ms ease;
}
.header__cta:hover{background:var(--gold-soft);transform:translateY(-1px)}

.sr-only:focus-visible{
  position:fixed;top:var(--space-3);left:var(--space-3);z-index:200;
  width:auto;height:auto;margin:0;padding:.7rem 1.1rem;clip:auto;overflow:visible;
  background:var(--gold);color:var(--navy);border-radius:var(--radius-full);
  font-size:var(--text-sm);font-weight:600;text-decoration:none;
}

@media (max-width:900px){
  .nav{
    position:fixed;inset:72px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy);border-bottom:1px solid rgba(241,238,231,.12);
    padding:var(--space-2) clamp(var(--space-5),5vw,var(--space-16)) var(--space-6);
    transform:translateY(-120%);transition:transform 320ms cubic-bezier(.16,1,.3,1);
  }
  .nav[data-open='true']{transform:translateY(0)}
  .nav a{padding:var(--space-4) 0;border-bottom:1px solid rgba(241,238,231,.08);font-size:var(--text-base)}
  .nav-toggle{display:inline-flex}
  .header__phone span{display:none}
  .header__cta{display:none}
}

/* ===== hero ===== */
.hero{position:relative;isolation:isolate;background:var(--navy);color:var(--color-on-dark);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(9,15,28,.86) 0%,rgba(9,15,28,.6) 42%,rgba(9,15,28,.92) 100%),
    radial-gradient(90% 70% at 18% 40%,rgba(9,15,28,.72),transparent 70%);
}
.hero__inner{padding-block:clamp(var(--space-20),16vh,var(--space-32));display:grid;gap:var(--space-8);max-width:900px}
.hero h1{color:#fff;max-width:20ch}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero__lede{font-size:var(--text-lg);color:#D9DDE6;max-width:46ch;line-height:1.5}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);
  padding-top:var(--space-6);border-top:1px solid rgba(241,238,231,.16);
  font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-on-dark-muted);
}
.hero__meta li{display:flex;align-items:center;gap:var(--space-2)}
.hero__meta li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}

/* ===== marquee strip ===== */
.strip{background:var(--navy-2);color:var(--color-on-dark);border-block:1px solid rgba(241,238,231,.08)}
.strip__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--space-8);padding-block:var(--space-10)}
.strip dt{font-family:var(--font-display);font-size:var(--text-xl);color:var(--gold-soft);line-height:1}
.strip dd{font-size:var(--text-sm);color:var(--color-on-dark-muted);margin-top:var(--space-2);max-width:34ch}

/* ===== intro ===== */
.intro{display:grid;grid-template-columns:1fr;gap:var(--space-10)}
@media (min-width:900px){
  .intro{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(var(--space-10),6vw,var(--space-20));align-items:start}
}
.intro__body p+p{margin-top:var(--space-5)}
.intro__body p{color:var(--color-text-muted)}
.signature{margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--color-divider);font-size:var(--text-sm);color:var(--color-text-faint)}
.signature strong{display:block;font-size:var(--text-base);color:var(--color-text);font-weight:600}

/* ===== services ===== */
.services{display:grid;gap:var(--space-6)}
.svc{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);padding:clamp(var(--space-6),3vw,var(--space-10));
  box-shadow:var(--shadow-sm);
  transition:box-shadow 260ms cubic-bezier(.16,1,.3,1),border-color 260ms cubic-bezier(.16,1,.3,1);
}
@media (hover:hover){.svc:hover{box-shadow:var(--shadow-md);border-color:color-mix(in oklab,var(--color-accent) 45%,var(--color-border))}}
.svc__num{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;letter-spacing:.16em;color:var(--color-primary);line-height:1}
.svc h3{margin-top:var(--space-4)}
.svc p{margin-top:var(--space-3);color:var(--color-text-muted);font-size:var(--text-base)}
.svc ul{margin-top:var(--space-5);display:grid;gap:var(--space-2);list-style:none}
.svc li{position:relative;padding-left:var(--space-6);font-size:var(--text-sm);color:var(--color-text-muted)}
.svc li::before{
  content:'';position:absolute;left:0;top:.55em;width:10px;height:10px;
  background:var(--color-accent);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
}
.svc__foot{margin-top:var(--space-6)}

.svc--feature{display:grid;gap:var(--space-8);padding:0;overflow:hidden;background:var(--color-surface-2)}
.svc--feature .svc__text{padding:clamp(var(--space-6),3vw,var(--space-10))}
@media (min-width:860px){
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc--feature{grid-column:1/-1;grid-template-columns:1fr;align-items:stretch;gap:0}
  .svc--feature ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-10);max-width:60rem}
  .svc--wide{grid-column:1/-1}
}

/* ===== process ===== */
.process{background:var(--navy);color:var(--color-on-dark)}
.process h2{color:#fff}
.process__lede{color:var(--color-on-dark-muted);font-size:var(--text-lg);max-width:48ch;line-height:1.5}
.steps{margin-top:clamp(var(--space-10),5vw,var(--space-16));display:grid;gap:var(--space-8)}
@media (min-width:760px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(var(--space-10),6vw,var(--space-20))}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}}
.step{padding-top:var(--space-5);border-top:1px solid rgba(241,238,231,.2)}
.step__num{font-size:var(--text-xs);letter-spacing:.2em;color:var(--gold);font-weight:600}
.step h3{margin-top:var(--space-3);color:#fff;font-size:var(--text-base);font-weight:600}
.step p{margin-top:var(--space-2);color:var(--color-on-dark-muted);font-size:var(--text-sm)}

/* ===== who we serve ===== */
.serve{display:grid;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center}
@media (min-width:900px){.serve{grid-template-columns:.9fr 1.1fr}}
.serve figure{margin:0;position:relative}
.serve figure img{border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 60%}
.serve figure{padding-bottom:var(--space-8)}
.serve__badge{
  position:absolute;right:var(--space-5);bottom:0;
  background:var(--navy);color:var(--color-on-dark);border:1px solid rgba(241,238,231,.16);
  border-radius:var(--radius-lg);padding:var(--space-3) var(--space-5);max-width:260px;box-shadow:var(--shadow-lg);
}
.serve__badge strong{display:block;font-family:var(--font-display);font-size:var(--text-lg);color:var(--gold-soft);line-height:1.1}
.serve__badge span{font-size:var(--text-xs);color:var(--color-on-dark-muted);letter-spacing:.1em;text-transform:uppercase}
.tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-8);list-style:none}
.tags li{
  font-size:var(--text-sm);padding:var(--space-2) var(--space-4);
  border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-muted);
  background:var(--color-surface);
}
.serve__body p{color:var(--color-text-muted)}
.serve__body p+p{margin-top:var(--space-5)}

/* ===== quote ===== */
.quote{background:var(--color-surface-offset)}
.quote blockquote{margin:0}
.quote__wrap{display:grid;gap:var(--space-10)}
@media (min-width:900px){.quote__wrap{grid-template-columns:1.1fr .9fr;gap:clamp(var(--space-10),6vw,var(--space-20));align-items:center}}
.quote p{font-family:var(--font-display);font-size:clamp(1.75rem,1rem + 2.2vw,2.9rem);line-height:1.14;letter-spacing:-.015em;max-width:22ch}
.quote cite{display:block;margin-top:var(--space-6);font-style:normal;font-size:var(--text-sm);color:var(--color-text-muted)}
.promises{display:grid;gap:var(--space-5);list-style:none}
.promises li{display:grid;gap:var(--space-1);padding-left:var(--space-6);position:relative}
.promises li::before{content:'';position:absolute;left:0;top:.5em;width:9px;height:9px;border:1px solid var(--color-primary);transform:rotate(45deg)}
.promises strong{font-size:var(--text-base);font-weight:600}
.promises span{font-size:var(--text-sm);color:var(--color-text-muted)}

/* ===== faq ===== */
.faq__grid{display:grid;gap:var(--space-10)}
@media (min-width:900px){.faq__grid{grid-template-columns:.65fr 1.35fr;gap:clamp(var(--space-10),6vw,var(--space-20))}}
.faq details{border-bottom:1px solid var(--color-divider);padding-block:var(--space-5)}
.faq details:first-of-type{border-top:1px solid var(--color-divider)}
.faq summary{
  display:flex;align-items:flex-start;gap:var(--space-4);cursor:pointer;list-style:none;
  font-size:var(--text-base);font-weight:600;color:var(--color-text);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';margin-left:auto;font-family:var(--font-display);font-size:1.4rem;line-height:1;
  color:var(--color-primary);transition:transform var(--transition-interactive)
}
.faq details[open] summary::after{content:'–'}
.faq summary:hover{color:var(--color-primary)}
.faq details p{margin-top:var(--space-3);color:var(--color-text-muted);font-size:var(--text-base);padding-right:var(--space-8)}

/* ===== contact ===== */
.contact{background:var(--navy);color:var(--color-on-dark)}
.contact h2{color:#fff}
.contact__grid{display:grid;gap:clamp(var(--space-10),5vw,var(--space-16))}
@media (min-width:900px){.contact__grid{grid-template-columns:.85fr 1.15fr}}
.contact__lede{color:var(--color-on-dark-muted);font-size:var(--text-lg);line-height:1.5;max-width:36ch}
.contact__list{margin-top:var(--space-8);display:grid;gap:var(--space-6);list-style:none}
.contact__list dt{font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.contact__list dd{margin-top:var(--space-1);font-size:var(--text-lg);font-family:var(--font-display)}
.contact__list a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(201,162,75,.5)}
.contact__list a:hover{color:var(--gold-soft)}
.contact__hint{margin-left:.5rem;font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-on-dark-muted)}
.contact__note{margin-top:var(--space-8);font-size:var(--text-sm);color:var(--color-on-dark-muted)}

.form{
  background:rgba(241,238,231,.05);border:1px solid rgba(241,238,231,.14);
  border-radius:var(--radius-xl);padding:clamp(var(--space-6),3vw,var(--space-10));
  display:grid;gap:var(--space-5);
}
.field{display:grid;gap:var(--space-2)}
.field label{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--color-on-dark-muted)}
.field input,.field select,.field textarea{
  background:rgba(9,15,28,.5);border:1px solid rgba(241,238,231,.2);
  border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);
  color:#fff;font-size:var(--text-base);min-height:48px;width:100%;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(201,162,75,.18)}
.field input::placeholder,.field textarea::placeholder{color:#7C859A}
.field select option{color:#111}
.field--row{display:grid;gap:var(--space-5)}
@media (min-width:620px){.field--row{grid-template-columns:1fr 1fr}}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.form__hint{font-size:var(--text-xs);color:var(--color-on-dark-muted);max-width:34ch}
.form__status{font-size:var(--text-sm);color:var(--gold-soft);min-height:1.4em}

/* ===== footer ===== */
.footer{background:#08101F;color:var(--color-on-dark-muted);padding-block:var(--space-16) var(--space-8)}
.footer__grid{display:grid;gap:var(--space-10)}
@media (min-width:760px){.footer__grid{grid-template-columns:1.2fr .8fr .8fr}}
.footer img{width:150px;margin-bottom:var(--space-5)}
.footer p{font-size:var(--text-sm);max-width:34ch}
.footer__serve{margin-top:var(--space-4);color:color-mix(in oklab,var(--color-on-dark-muted) 78%,transparent)}
.footer h4{font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-4)}
.footer ul{list-style:none;display:grid;gap:var(--space-3)}
.footer li{font-size:var(--text-sm)}
.footer a{color:var(--color-on-dark-muted);text-decoration:none;font-size:var(--text-sm)}
.footer a:hover{color:var(--gold-soft)}
.footer__bottom{
  margin-top:var(--space-16);padding-top:var(--space-6);border-top:1px solid rgba(241,238,231,.1);
  display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);justify-content:space-between;font-size:var(--text-xs);
}

/* ===== sticky mobile call bar ===== */
.callbar{display:none}
@media (max-width:760px){
  .callbar{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);
    padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    background:rgba(15,26,46,.94);backdrop-filter:blur(14px);
    border-top:1px solid rgba(241,238,231,.14);
  }
  .callbar a{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
    min-height:48px;border-radius:var(--radius-full);text-decoration:none;
    font-size:var(--text-sm);font-weight:600;letter-spacing:.02em;
  }
  .callbar__call{background:var(--gold);color:#14203a}
  .callbar__call:active{background:var(--gold-soft)}
  .callbar__quote{border:1px solid rgba(241,238,231,.32);color:var(--color-on-dark)}
  .callbar__quote:active{border-color:var(--gold);color:var(--gold-soft)}
  body{padding-bottom:84px}
}

/* ===== reveal on scroll ===== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* client login entry point in the primary nav */
.nav__login{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .8rem;border:1px solid rgba(201,162,75,.5);border-radius:var(--radius-full);
  color:var(--gold-soft) !important;
}
.nav__login:hover{background:rgba(201,162,75,.14);border-color:var(--gold)}
@media (max-width:900px){
  .nav__login{border:none;padding:var(--space-4) 0;border-radius:0}
  .nav__login:hover{background:none}
}