:root{
  --navy:#0a1b2a; --slate:#3a4a5b; --bg:#0f1115; --card:#15181f; --gold:#c9a44a; --line:#2a2f38;
  --hero: url('images/hero.jpg');
  --card-border: 2px; /* thicker service card borders */
  --header-height: 64px;
}

/* Base */
*{box-sizing:border-box} html,body{min-height:100%}
body{margin:0;color:#e7eaee;background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
html {
  background: var(--bg);
}
img{max-width:100%;display:block}
.container{width:min(1120px,92%);margin-inline:auto}

/* Type utilities */
.h1 {
  font: 700 clamp(2rem, 4vw, 3rem)/1.15 Poppins, Inter;
  position: relative;
  display: inline-block;
  margin: 0 0 .6rem;
  /* so the line matches the text width */
}
.h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  /* tweak up/down if you want more gap */
  height: 2px;
  width: 0;
  background: var(--gold);
  border-radius: 999px;
  animation: h1-underline .6s cubic-bezier(0.25, 0.8, 0.25, 1) .15s forwards;
}
.h2 {
  font: 700 clamp(1.5rem, 3vw, 2.25rem)/1.2 Poppins, Inter
}

@keyframes h1-underline {
  from {
    width: 0;
    opacity: 0;
  }

  to {
    width: 100%;
    opacity: 1;
  }
}
.h3{font:600 1.5rem/1.2 Poppins,Inter}
.h4{font:600 1.125rem/1.2 Poppins,Inter}
.lead{color:#c1c7d0}
.center{text-align:center}

/* Header */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(8px);background:rgba(11,14,19,.75);border-bottom:1px solid var(--gold)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}
.logo{display:flex;align-items:center;gap:.55rem;color:#fff;text-decoration:none;font:700 1.05rem Poppins,Inter;letter-spacing:.5px}
.logo-fav{width:28px;height:28px;display:inline-block}

@media (max-width:880px){.logo-fav{width:24px;height:24px}}
.nav-links{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0}
.nav-links a,
.footer-nav a{color:#d7dce3;text-decoration:none;position:relative}
.nav-links a::after,
.footer-nav a::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--gold);transition:width .25s}
.nav-links a:hover::after,
.footer-nav a:hover::after{width:100%}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:#d7dce3;margin:5px 0}

@media (max-width:880px) {
  .nav-toggle {
    display: block
  }
  .nav-links {
    position: fixed;
    inset: 60px 0 auto 0;
    background: rgba(15, 17, 21, .98);
    border-bottom: 1px solid var(--line);
    padding: 1rem 1.25rem;
    transform: translateY(-120%);
    transition: transform .3s;
    z-index: 60;
    /* ensures mobile menu is above sticky page title */
  }
  .nav-links[data-open="true"] {
    transform: translateY(0)
  }
}

/* Footer */
.footer {
  border-top: 1px solid var(--gold);
  background: #0d1016
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0
}

.footer-nav {
  display: flex;
  gap: 1rem
}

/* Hero */
.hero{position:relative;display:grid;place-items:center;min-height:80vh;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(60% 60% at 10% 10%, rgba(201,164,74,.10), transparent 60%),
  radial-gradient(50% 50% at 90% 20%, rgba(10,27,42,.35), transparent 60%),
  linear-gradient(120deg, #0b1e2f, #091523 60%, #0b1e2f);
  animation:gradientShift 18s ease-in-out infinite}
.hero-photo{position:absolute;inset:0;background-image:var(--hero);background-size:cover;background-position:center;opacity:.28;mix-blend:screen;filter:saturate(90%)}
@keyframes gradientShift{0%{filter:hue-rotate(0) brightness(1)}50%{filter:hue-rotate(8deg) brightness(1.03)}100%{filter:hue-rotate(0) brightness(1)}}
.hero-inner{position:relative;z-index:1;text-align:center;padding:6rem 1rem;color:#e6edf6}
.hero-title{margin:0 0 .75rem}
.hero-sub{margin:0 0 1.25rem;color:#d0d8e1}
.accent{color:var(--gold)}
.hero-cta{display:flex;gap:.75rem;justify-content:center}

/* Buttons (global) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1rem;border-radius:.75rem;text-decoration:none;font-weight:600;letter-spacing:.2px;cursor:pointer;border:1px solid transparent;transition:transform .08s, box-shadow .2s, background .3s, color .3s}
.btn:active{transform:translateY(1px)}
.btn-primary {
  background: var(--gold);
  color: #111;
  border-color: rgba(201, 164, 74, 0.8);
  box-shadow:
    0 0 0 1px rgba(201, 164, 74, 0.55),
    0 0 6px rgba(201, 164, 74, 0.75),
    0 10px 30px rgba(0, 0, 0, .18);
  transition:
    background .2s ease,
    box-shadow .25s ease,
    border-color .2s ease,
    filter .2s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  filter: brightness(1.04);
  border-color: rgba(201, 164, 74, 0.98);
  box-shadow:
    0 0 0 1px rgba(201, 164, 74, 0.98),
    0 0 12px rgba(201, 164, 74, 0.98),
    0 12px 36px rgba(0, 0, 0, .26);
}
.btn-ghost {
  background: transparent;
  color: #e6edf6;
  /* keep a steady, mid-strength outline */
  border-color: rgba(150, 200, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(150, 200, 255, 0.45),
    0 0 6px rgba(90, 150, 235, 0.55);
  transition:
    background .2s ease,
    box-shadow .25s ease;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: #ffffff1f;
  /* no border-color change here, so it doesn't flash */
  box-shadow:
    0 0 0 1px rgba(150, 200, 255, 0.45),
    0 0 12px rgba(110, 180, 255, 0.95);
}

/* Hero CTA — unified semi-transparent gold (single source of truth) */
.hero-cta .btn {
  /* both buttons */
  background: rgba(201, 164, 74, .20);
  border: 1px solid rgba(201, 164, 74, .55);
  color: #111;
  box-shadow:
    0 0 0 1px rgba(201, 164, 74, 0.45),
    0 0 6px rgba(201, 164, 74, 0.70),
    0 10px 30px rgba(0, 0, 0, .16);
}

@supports (background: color-mix(in srgb, red 30%, transparent)) {
  .hero-cta .btn {
    background: color-mix(in srgb, var(--gold) 60%, transparent);
  }

  .hero-cta .btn:hover {
    background: color-mix(in srgb, var(--gold) 90%, transparent);
  }
}

.hero-cta .btn:hover {
  border-color: rgba(201, 164, 74, .95);
  transform: translateY(-1px);
  filter: none;
  /* neutralize any global .btn-primary hover filter */
  box-shadow:
    0 0 0 1px rgba(201, 164, 74, 1),
    0 0 12px rgba(201, 164, 74, .98),
    0 14px 40px rgba(0, 0, 0, .28);
}

.hero-cta .btn:focus-visible {
  outline: 2px solid #c9a44a;
  outline-offset: 2px;
}

/* Sections */
.section{padding:clamp(3rem,6vw,5rem) 0}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.25rem;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.card.note{background:#1b1710;border-color:#3a2f18}
.stack{display:grid;gap:.75rem}
@media (max-width:880px){.split{grid-template-columns:1fr}}

/* Services */
.services .lead{margin-top:.25rem}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.25rem}
@media (max-width:1100px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.services-grid{grid-template-columns:1fr}}

/* Service pages: sticky page title under sticky header */
.service-page .page-title-bar {
  position: sticky;
  top: 3.4rem;
  /* snug under the header; tweak 3.4–3.8rem to taste */
  z-index: 40;
  padding: .25rem 0 .35rem;
  background: rgba(11, 14, 19, .85);
    /* similar to header background */
    backdrop-filter: saturate(140%) blur(8px);
}

.service-card {
  position: relative;
  background: var(--card);
  border: var(--card-border) solid rgba(201, 164, 74, 0.55);
  border-radius: 16px;
  padding: 0 0 1.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  cursor: pointer;
  /* prep for click-through */
  transform-origin: center center;

  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(120deg,
      rgba(201, 164, 74, 0.35),
      rgba(201, 164, 74, 0.12),
      rgba(201, 164, 74, 0.35)) border-box;
  background-clip: padding-box, border-box;
  background-size: 220% 220%;

  transition:
    transform .25s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow .25s ease,
    border-color .25s ease,
    background-position .6s ease,
    filter .25s ease;
}

.service-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .45);
  border-color: rgba(201, 164, 74, 0.98);
  background-position: 100% 0%;
  filter: brightness(1.04);
}

/* Stronger gold “ring” + glow on hover */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 4px;
  background: linear-gradient(120deg,
      rgba(201, 164, 74, 0.65),
      rgba(201, 164, 74, 0.25),
      rgba(201, 164, 74, 0.65));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 0 rgba(201, 164, 74, 0);
  transform: scale(.98);
  transition:
    opacity .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}

.service-card:hover::before {
  opacity: 1;
  box-shadow: 0 0 45px rgba(201, 164, 74, 0.7);
  transform: scale(1);
}

.service-card .thumb{
  height:140px; background-size:cover; background-position:center; border-radius:16px 16px 0 0; overflow:hidden;
  opacity:.9; filter:saturate(90%) contrast(105%); margin-bottom:.5rem; display:block;
}
.service-card .h4{margin:0 1rem .25rem; padding-top:.25rem}
.service-card p{margin:0 1rem 1rem}
.service-card .btn{margin:0 1rem 0}

/*Gold variant of service card*/
.card.card-gold {
  border: var(--card-border) solid rgba(201, 164, 74, 0.45);
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(120deg,
      rgba(201, 164, 74, 0.25),
      rgba(201, 164, 74, 0.10),
      rgba(201, 164, 74, 0.25)) border-box;
  background-clip: padding-box, border-box;
}

.card.card-gold:hover {
  border-color: rgba(201, 164, 74, 0.85);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
}

.card.note.card-gold {
  background:
    linear-gradient(#1b1710, #1b1710) padding-box,
    linear-gradient(120deg,
      rgba(201, 164, 74, 0.25),
      rgba(201, 164, 74, 0.10),
      rgba(201, 164, 74, 0.25)) border-box;
  background-clip: padding-box, border-box;
}

/* Education card: class list */
.card .class-list {
  list-style: none;
  padding: 0;
  margin: .75rem 0 0;
  display: grid;
  gap: .5rem;
}

.card .class-list li a,
.card .class-list li button {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: #e7eaee;
  padding: .5rem .75rem;
  border-radius: .5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(201, 164, 74, 0.18);
  cursor: pointer;
  font: inherit;
  outline: none;
  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .15s ease;
}

.card .class-list li button {
  background: rgba(255, 255, 255, 0.02);
  /* override default button styles */
  border: 1px solid rgba(201, 164, 74, 0.18);
}

.card .class-list li a:hover,
.card .class-list li a:focus-visible,
.card .class-list li button:hover,
.card .class-list li button:focus-visible {
  background: rgba(201, 164, 74, 0.08);
  border-color: rgba(201, 164, 74, 0.85);
  box-shadow: 0 0 10px rgba(201, 164, 74, 0.35);
  transform: translateY(-1px);
}

.card .class-list .class-date {
  font-size: .85rem;
  color: #a9b2c3;
}

.card .class-list .class-title {
  font-weight: 600;
  margin-top: 2px;
}

/* Contact */
.contact-list{list-style:none;padding:0;margin:.5rem 0 0;display:grid;gap:.25rem}
textarea,input,select{font:500 1rem/1.2 Inter,sans-serif;padding:.7rem .85rem;border-radius:.7rem;border:1px solid var(--line);background:#0e1117;color:#e7eaee}
textarea:focus,input:focus,select:focus{outline:2px solid color-mix(in srgb, var(--gold) 45%, transparent)}

/* Modals */
.modal{border:0;padding:0;background:transparent}
.modal::backdrop{background:rgba(9,13,20,.6)}
.modal[open] .modal-dialog{animation:rise .22s both}
.modal-dialog{width:min(560px, 92%);background:#0f131a;border-radius:16px;padding:1.25rem;border:1px solid var(--line);box-shadow:0 20px 70px rgba(0,0,0,.35);position:relative}
@keyframes rise{from{transform:translateY(22px);opacity:.6}to{transform:translateY(0);opacity:1}}
.modal-close{position:absolute;top:18px;right:18px;border:0;background:#1f2430;color:#d7dce3;border-radius:10px;padding:.35rem .55rem;cursor:pointer}

/*Modal headings text color lighter*/
.modal .modal-dialog h3,
.modal .modal-dialog .h3,
.modal .modal-dialog h4,
.modal .modal-dialog .h4,
.modal .modal-dialog .modal-head h3,
.modal .modal-dialog .modal-head .h3,
.modal .modal-dialog .callout-title {
  color: #f3f4f6; /* near-white for improved contrast; swap to #fff if you prefer pure white */
  -webkit-font-smoothing: antialiased;
  text-shadow: none;
}

/* Modal field alignment / overflow fix */
.modal .stack > input,
.modal .stack > select,
.modal .stack > textarea { width:100%; max-width:100%; display:block; box-sizing:border-box; border-radius:10px; }
.modal .stack > input,
.modal .stack > select { height:48px; line-height:48px; }
.modal-dialog { width:min(560px,92vw); }
.modal .stack { gap:.75rem; overflow-wrap:anywhere; }
.modal .stack .btn { max-width:100%; }


/* Reveal on scroll */
[data-observe]{opacity:0;transform:translateY(18px);transition:opacity .5s, transform .5s}
[data-observe].visible{opacity:1;transform:none}


/* --- Hero kicker & wordmark --- */
.hero-inner{ display:flex; flex-direction:column; align-items:center; }
.hero-kicker{
  margin: 0 0 .45rem;
  font-weight: 800;
  font-size: calc(1.18 * clamp(1.8rem, 3.2vw, 3rem)); /* slightly larger than hero-title */
  line-height: 1.05;
  letter-spacing: .2px;
}
.hero-wordmark{
  width: clamp(185px, 23vw, 305px);
  height: auto;
  margin: .25rem 0 .65rem;
  opacity: .95; /* transparent PNG lets background show through */
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.35));
}
.hero-title{ line-height: 1.1; }
/* Hero kicker color */
#top .hero-kicker {
  color: var(--gold);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

/* Contact links: white until hover, then link blue */
.contact-list a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color .2s ease, border-color .2s ease;
}

.contact-list a:visited {
  color: #fff;
}

.contact-list a:hover,
.contact-list a:focus-visible {
  color: #4ea1ff;
  /* link blue */
  border-bottom-color: currentColor;
}

.contact-list a:active {
  color: #79b9ff;
}

/* Footer disclaimer */
.footer-copy {
  max-width: 60ch;
}

.footer-disclaimer {
  margin: .25rem 0 0;
  font-size: .83rem;
  color: #c1c7d0;
}

@media (max-width: 640px) {
  .footer-inner {
    gap: .6rem;
  }
}

/* Demand Letter modal layout (non-invasive) */
.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 24px;
}

@media (max-width: 860px) {
  .modal-grid {
    grid-template-columns: 1fr;
  }
}

/* Left column callout */
.callout {
  background: var(--panel, #0f1419);
  border-radius: 14px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.callout-title {
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0 0 .75rem 0;
  color: #d4d4d4;
}

.callout-phone {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.1;
  margin: 0 0 1rem 0;
  white-space: nowrap;
}

.callout-phone a {
  text-decoration: none;
  color: var(--link, #7cc2ff);
}

.callout-divider {
  border: none;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin: 14px 0;
}

.callout-note {
  font-size: 1.25rem;
  color: #cfcfcf;
  margin: .5rem 0 0 0;
}

/* Right column form width */
.form-wrap .stack>label {
  display: block;
  margin-bottom: .85rem;
}

.form-wrap input,
.form-wrap textarea,
.form-wrap select {
  width: 100%;
}