/* Trident marketing site — shared styles. Built on the design-system tokens. */

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--ink-900);
  border-bottom:1px solid var(--border-on-dark);
}
.site-header .bar{
  display:flex;align-items:center;gap:var(--space-6);
  height:74px;max-width:var(--container-xl);margin-inline:auto;padding-inline:var(--gutter);
}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{height:34px;width:auto;flex:none}
.nav{display:flex;align-items:center;gap:var(--space-6);margin-left:var(--space-4)}
.nav a{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:13px;color:var(--neutral-300);
  transition:color var(--dur-base) var(--ease-out);position:relative;padding:6px 0;
}
.nav a:hover{color:var(--gold-400)}
.nav a.active{color:var(--gold-400)}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold-500)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:var(--space-5)}
.header-phone{
  display:flex;align-items:center;gap:8px;color:var(--neutral-25);font-family:var(--font-mono);
  font-size:14px;letter-spacing:.02em;white-space:nowrap;
}
.header-phone .lab{display:block;font-family:var(--font-display);font-size:10px;letter-spacing:.18em;color:var(--gold-400);text-transform:uppercase;line-height:1.1;white-space:nowrap}
.header-phone b{font-weight:600}

/* ---------- Buttons (site) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  height:var(--control-md);padding:0 22px;font-family:var(--font-display);font-weight:600;
  font-size:15px;text-transform:uppercase;letter-spacing:.08em;border-radius:var(--radius-sm);
  cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.btn:active{transform:translateY(1px)}
.btn-lg{height:var(--control-lg);padding:0 30px;font-size:16px}
.btn-sm{height:var(--control-sm);padding:0 16px;font-size:13px}
.btn-primary{background:var(--gold-500);color:var(--ink-900);border-color:var(--gold-500)}
.btn-primary:hover{background:var(--gold-600);border-color:var(--gold-600)}
.btn-dark{background:var(--ink-900);color:var(--neutral-25);border-color:var(--ink-900)}
.btn-dark:hover{background:var(--ink-700);border-color:var(--ink-700)}
.btn-outline{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
.btn-outline:hover{background:var(--ink-900);color:var(--neutral-25);border-color:var(--ink-900)}
.btn-ghost-light{background:transparent;color:var(--neutral-25);border-color:rgba(255,255,255,.28)}
.btn-ghost-light:hover{background:rgba(255,255,255,.08);border-color:var(--gold-400);color:var(--gold-400)}
.btn .ic{width:18px;height:18px}

/* ---------- Sections ---------- */
.section{padding-block:var(--section-y)}
.section--ink{background:var(--ink-900);color:var(--text-on-dark)}
.section--paper{background:var(--surface-page)}
.section--sunken{background:var(--surface-sunken)}
.wrap{width:100%;max-width:var(--container-xl);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--container-md)}

.eyebrow{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;font-size:.78rem;color:var(--text-gold);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gold-500)}
.eyebrow--dark{color:var(--gold-400)}

.display{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.01em;line-height:.95;color:var(--text-strong);
}
.display--dark{color:var(--neutral-25)}
.gold-word{color:var(--gold-500)}
.serif{font-family:var(--font-serif);line-height:1.2;letter-spacing:-.02em}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--text-muted)}
.lead--dark{color:var(--neutral-300)}
.section-head{max-width:760px}
.section-head h2{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1;font-size:var(--fs-display-md);margin:18px 0 0}

/* ---------- Cards ---------- */
.card{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-6);position:relative;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-default)}
.card--ink{background:var(--ink-800);border-color:var(--border-on-dark);color:var(--text-on-dark)}
.card__accent::before{content:"";position:absolute;top:0;left:var(--space-6);width:40px;height:3px;background:var(--gold-500);border-radius:0 0 2px 2px}
.card__icon{
  width:50px;height:50px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold-200);background:var(--gold-50);border-radius:var(--radius-md);color:var(--gold-700);
}
.card--ink .card__icon{background:rgba(200,162,74,.12);border-color:rgba(200,162,74,.35);color:var(--gold-400)}
.card__icon .ic{width:24px;height:24px}
.card h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:0;font-size:1.35rem;margin:18px 0 8px}
.card p{color:var(--text-muted)}
.card--ink p{color:var(--neutral-300)}

/* ---------- Photo slot (branded placeholder for real imagery) ---------- */
.photo{
  position:relative;background:var(--ink-800);overflow:hidden;border-radius:var(--radius-lg);
  background-image:radial-gradient(circle at 30% 20%, rgba(200,162,74,.10), transparent 60%),
                   repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 12px, transparent 12px 24px);
  display:flex;align-items:center;justify-content:center;
}
.photo::after{
  content:attr(data-caption);position:absolute;left:14px;bottom:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--neutral-500);
}
.photo img.wm{width:64px;height:64px;opacity:.5}

/* ---------- Stat ---------- */
.stat__value{font-family:var(--font-display);font-weight:800;font-size:clamp(2.5rem,1.5rem + 3vw,3.75rem);line-height:.9;letter-spacing:-.01em;color:var(--text-gold)}
.stat__value--dark{color:var(--gold-400)}
.stat__label{margin-top:8px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;color:var(--text-strong)}
.stat__label--dark{color:var(--neutral-25)}

/* ---------- Badge ---------- */
.badge{
  display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-display);font-weight:600;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;line-height:1;padding:5px 9px 4px;
  border-radius:var(--radius-xs);border:1px solid;
}
.badge--success{color:var(--green-500);background:var(--green-50);border-color:var(--green-500)}
.badge--warning{color:var(--amber-500);background:var(--amber-50);border-color:var(--amber-500)}
.badge--gold{color:var(--gold-800);background:var(--gold-50);border-color:var(--gold-200)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-900);color:var(--neutral-300);padding-block:var(--space-9) var(--space-6)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-6)}
.site-footer h5{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--gold-400);margin:0 0 16px}
.site-footer a{display:block;color:var(--neutral-300);padding:5px 0;font-size:15px;transition:color var(--dur-base)}
.site-footer a:hover{color:var(--gold-400)}
.footer-brand img{height:38px;margin-bottom:16px}
.footer-brand p{color:var(--neutral-400);font-size:14px;line-height:1.6;max-width:280px}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--border-on-dark);color:var(--neutral-500);font-size:13px}
.footer-bottom .disc{max-width:680px;line-height:1.5}

/* ---------- Utility ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.flex{display:flex}
.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}
.divider-gold{width:56px;height:3px;background:var(--gold-500);border:0;margin:0}

/* ---------- Service checklist ---------- */
.svc-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.svc-list li{position:relative;padding-left:26px;font-size:14px;color:var(--text-body)}
.svc-list li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;border-left:2px solid var(--gold-600);border-bottom:2px solid var(--gold-600);transform:rotate(-45deg)}

/* ---------- Lead-capture top bar ---------- */
.lead-bar{background:var(--ink-800);border-bottom:1px solid var(--border-on-dark)}
.lead-bar__inner{max-width:var(--container-xl);margin-inline:auto;padding:9px var(--gutter);display:flex;align-items:center;gap:var(--space-5);justify-content:space-between}
.lead-bar__msg{display:flex;align-items:center;gap:10px;color:var(--neutral-300);font-size:14px}
.lead-bar__msg b{color:var(--gold-400);font-weight:700}
.lead-bar__msg .ic{width:17px;height:17px;color:var(--gold-500);flex:none}
.lead-bar__form{display:flex;gap:8px;flex:none}
.lead-bar__form input{
  height:var(--control-sm);width:200px;padding:0 12px;border-radius:var(--radius-sm);
  background:var(--ink-900);border:1px solid var(--border-on-dark);color:var(--neutral-25);
  font-family:var(--font-sans);font-size:14px;outline:none;transition:border-color var(--dur-base)}
.lead-bar__form input::placeholder{color:var(--neutral-500)}
.lead-bar__form input:focus{border-color:var(--gold-500)}
.lead-bar__form .ic{width:15px;height:15px}

/* ---------- Lead popup modal ---------- */
.lead-overlay{
  position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(12,12,14,.74);backdrop-filter:blur(4px);
}
.lead-overlay.open{display:flex;animation:leadFade var(--dur-base) var(--ease-out)}
@keyframes leadFade{from{opacity:0}to{opacity:1}}
.lead-modal{
  position:relative;width:100%;max-width:480px;background:var(--surface-card);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow-y:auto;
  max-height:calc(100vh - 48px);
  animation:leadRise var(--dur-slow) var(--ease-out)}
@keyframes leadRise{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.lead-modal__accent{position:absolute;top:0;left:0;right:0;height:4px;background:var(--gold-500)}
.lead-modal__close{
  position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;background:transparent;
  font-size:26px;line-height:1;color:var(--neutral-500);cursor:pointer;border-radius:var(--radius-sm);
  transition:color var(--dur-base),background var(--dur-base)}
.lead-modal__close:hover{color:var(--text-strong);background:var(--neutral-100)}
.lead-modal__body{padding:var(--space-7) var(--space-7) var(--space-6)}
.lead-modal__mark{width:44px;height:44px;margin-bottom:14px}
.lead-modal__title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.01em;font-size:1.9rem;line-height:1;color:var(--text-strong);margin:14px 0 0}
.lead-modal__sub{color:var(--text-muted);font-size:15px;margin-top:12px;line-height:1.5}
.lead-form{margin-top:20px;display:grid;gap:14px}
.lead-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lead-form label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.lead-form input,.lead-form select{
  width:100%;height:var(--control-md);margin-top:7px;padding:0 13px;border:1px solid var(--border-default);
  border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:15px;color:var(--text-strong);
  background:var(--surface-card);outline:none;transition:border-color var(--dur-base),box-shadow var(--dur-base)}
.lead-form input:focus,.lead-form select:focus{border-color:var(--gold-500);box-shadow:var(--ring-focus)}
.lead-form__fine{font-size:12px;color:var(--text-subtle);line-height:1.5;margin-top:2px}
.lead-modal__thanks{display:none;padding:var(--space-9) var(--space-7);text-align:center}
.lead-modal.done .lead-modal__body{display:none}
.lead-modal.done .lead-modal__thanks{display:block}
.lead-modal__check{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:var(--green-50);color:var(--green-500);display:flex;align-items:center;justify-content:center}
.lead-modal__check .ic{width:32px;height:32px}

@media (max-width:760px){
  .lead-bar__form{display:none}
  .lead-bar__msg{font-size:13px}
}

@media (max-width:900px){
  .nav,.header-phone{display:none}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .grid-2,.footer-top{grid-template-columns:1fr}
  .footer-top{gap:var(--space-7)}
}
@media (max-width:560px){
  .grid-3,.grid-4{grid-template-columns:1fr}
}