/* =========================================================
   Secured Equity Title Pawn — Static Rebuild
   style.css — CLEAN SOURCE OF TRUTH v1.0
   Date: 2026-02-21
   Notes:
   - Header + Hero are LOCKED (do not redesign)
   - Single container system
   - Single section/typography system
   - Single footer system
   - Single back-to-top system (.back-to-top + .show)
========================================================= */

/* =========================
   GLOBAL RESET
========================= */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  font-family:'Montserrat',Arial,sans-serif;
  color:#1a1a1a;
  background:#fff;
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block;}
button,input,select,textarea{font:inherit;}

/* =========================
   ACCESSIBILITY: FOCUS STYLES
========================= */
:focus{ outline: none; }

:focus-visible{
  outline: 3px solid rgba(153,0,0,0.55);
  outline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible{
  border-radius: 10px;
}

/* =========================
   ACCESSIBILITY HELPERS
========================= */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.skip-link{
  position:absolute;
  left:-9999px;
  top:8px;
  background:#fff;
  padding:8px 10px;
  border:1px solid rgba(0,0,0,0.2);
  border-radius:8px;
  z-index:9999;
}
.skip-link:focus{ left:12px; }

/* =========================================================
   DESIGN TOKENS + BASE SYSTEM (below-hero)
========================================================= */
:root{
  --page-max: 1180px;
  --gutter: 24px;

  --section-y: clamp(56px, 5vw, 92px);
  --section-y-tight: clamp(40px, 4vw, 72px);

  --radius: 14px;
  --shadow-sm: 0 6px 18px rgba(0,0,0,0.08);

  --text: #1a1a1a;
  --muted: rgba(26,26,26,0.72);
  --muted-2: rgba(26,26,26,0.58);

  --border: rgba(0,0,0,0.10);
  --surface: #ffffff;
  --surface-2: #f7f8fa;

  --brand-red: #990000;
  --brand-blue: #02344a;

  --link: var(--brand-blue);
  --link-hover: #012739;
}

/* Container (single source of truth) */
.container{
  width: min(var(--page-max), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

/* Sections */
.section{ padding-block: var(--section-y); }
.section.section--tight{ padding-block: var(--section-y-tight); }
.section.section--alt{ background: var(--surface-2); }
.section + .section{ border-top: 1px solid rgba(0,0,0,0.04); }

/* Sticky header anchor offset */
.section[id]{ scroll-margin-top: 96px; }

/* Typography helpers (used throughout below-hero) */
.section-header{
  max-width: 820px;
  margin: 0 auto 28px;
  text-align: center;
}
.h2{
  font-size: clamp(26px, 2.2vw, 38px);
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--text);
}
.h3{
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--text);
}
.lede{
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.p{
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}

/* Links */
a{ color: var(--link); text-decoration:none; }
a:hover{ color: var(--link-hover); text-decoration:underline; }

@media (max-width: 900px){
  .section-header{ text-align:left; margin-bottom:18px; }
}

/* =========================================================
   STATIC HEADER (LOCKED)
========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:999;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,0.08);
}

.header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}
.brand-logo{
  height:120px;
  width:auto;
  display:block;
}

/* Desktop nav */
.site-nav{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.site-nav a,
.site-nav button{
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  color:var(--brand-blue);
  background:none;
  border:0;
  padding:8px 6px;
  cursor:pointer;
  text-decoration:none;
}

.site-nav a:hover,
.site-nav button:hover{ color:var(--brand-red); }

.nav-cta{
  background:var(--brand-red);
  color:#fff !important;
  padding:10px 14px;
  border-radius:8px;
  text-decoration:none;
}
.nav-cta:hover{ filter:brightness(0.92); }

/* Dropdowns */
.nav-dropdown{
  position:relative;
}

.nav-dropmenu{
  position:absolute;
  top:100%;               /* remove dead gap */
  left:0;
  margin-top:8px;         /* visual spacing instead */
  min-width:260px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:10px;
  padding:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.10);
  display:none;
}

/* invisible hover bridge */
.nav-dropmenu::before{
  content:"";
  position:absolute;
  top:-10px;
  left:0;
  width:100%;
  height:10px;
}

/* keep menu open on hover + keyboard focus */
.nav-dropdown:hover .nav-dropmenu,
.nav-dropdown:focus-within .nav-dropmenu{
  display:block;
}

.nav-sublink{
  display:block;
  padding:10px;
  border-radius:8px;
  color:var(--brand-blue);
  text-decoration:none;
  font-weight:600;
}

.nav-sublink:hover{
  background:rgba(2,52,74,0.06);
  color:var(--brand-red);
}

/* Hamburger */
.nav-toggle{
  display:none;
  font-size:28px;
  background:none;
  border:0;
  cursor:pointer;
  padding:8px 10px;
}

/* Mobile menu */
.mobile-nav{
  max-width:1200px;
  margin:0 auto;
  padding:12px 18px 18px;
  display:grid;
  gap:10px;
  border-top:1px solid rgba(0,0,0,0.06);
}
.mobile-nav a{
  color:var(--brand-blue);
  text-decoration:none;
  font-weight:700;
  padding:10px;
  border-radius:10px;
}
.mobile-nav a:hover{
  background:rgba(2,52,74,0.06);
  color:var(--brand-red);
}
.mobile-cta{
  background:var(--brand-red);
  color:#fff !important;
  text-align:center;
}
.mobile-nav[hidden]{ display:none !important; }

@media (max-width:980px){
  .site-nav{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .brand-logo{ height:80px; }
}

/* =========================================================
   HERO (LOCKED — single source of truth)
========================================================= */
.btn-primary{
  display:inline-block;
  padding:14px 28px;
  background:var(--brand-red);
  color:#fff;
  text-decoration:none;
  border-radius:6px;
  transition:0.3s ease;
}
.btn-primary:hover{ background:#7a0000; }
/* Compatibility: allow .btn-primary/.btn-secondary to behave like modifier buttons */
.btn.btn-primary{ background: var(--brand-red); color:#fff; }
.btn.btn-primary:hover{ text-decoration:none; box-shadow: 0 10px 22px rgba(153,0,0,0.20); }

.btn.btn-secondary{
  background: transparent;
  border: 1px solid rgba(2,52,74,0.30);
  color: var(--brand-blue);
}
.btn.btn-secondary:hover{
  text-decoration:none;
  border-color: rgba(2,52,74,0.55);
  box-shadow: 0 10px 22px rgba(2,52,74,0.10);
}

.hero{
  position:relative;
  width:100%;
  min-height:520px;
  overflow:hidden;
}

/* background layer */
.hero-media{
  position:absolute;
  inset:0;
  margin:0;
}
.hero-media > img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* overlay */
.hero-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
}

/* content grid */
.hero-content{
  position:relative;
  z-index:2;

  min-height:520px;
  max-width:1200px;
  margin:0 auto;
  padding:48px 24px;

  display:grid;
  grid-template-columns: 1fr 360px;
  gap:32px;
  align-items:center;
}

/* left column: CENTERED text block */
.hero-content h1,
.hero-content p,
.hero-content .btn-primary{
  grid-column:1;
  justify-self:center;
  text-align:center;
  color:#fff;
}

.hero-content h1{
  margin:0 0 14px;
  font-weight:800;
  font-size:clamp(38px, 4.2vw, 58px);
  line-height:1.05;
  max-width:18ch;
}
.hero-content p{
  margin:0 0 18px;
  font-size:18px;
  max-width:52ch;
}

/* right column: estimator card */
.hero-estimator{
  grid-column:2;
  justify-self:end;

  width:360px;
  max-width:100%;

  background:rgba(0,0,0,0.55);
  color:#fff;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:14px;
  padding:18px 18px 14px;
  backdrop-filter:blur(6px);
}

.hero-estimator__title{
  font-weight:800;
  font-size:16px;
  margin-bottom:10px;
}
.hero-estimator__label{
  display:block;
  font-size:13px;
  font-weight:700;
  margin:10px 0 6px;
}
.hero-estimator__input{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.20);
  background:rgba(255,255,255,0.08);
  color:#fff;
  padding:10px 12px;
  outline:none;
}
.hero-estimator__input:focus{ outline:2px solid rgba(255,255,255,0.30); }
.hero-estimator__input option{ color:#000; }

.hero-estimator__btn{
  width:100%;
  margin-top:12px;
  padding:12px 14px;
  border:0;
  border-radius:10px;
  background:var(--brand-red);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
.hero-estimator__btn:hover{ filter:brightness(0.92); }

.hero-estimator__result{ margin-top:12px; font-size:14px; }
.hero-estimator__fineprint{
  margin-top:10px;
  font-size:12px;
  opacity:0.9;
  line-height:1.35;
}

/* Mobile: stack estimator below centered text */
@media (max-width:900px){
  .hero, .hero-content{ min-height:420px; }
  .hero-content{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    padding:40px 18px;
  }
  .hero-estimator{
    grid-column:1;
    justify-self:center;
    width:min(420px, 100%);
    margin-top:18px;
  }
  .hero-content h1{ max-width:22ch; }
}

/* =========================================================
   BELOW-HERO UTILITIES (grids, cards, bullets, buttons)
========================================================= */
.grid-2{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(18px, 3vw, 36px);
  align-items:start;
}
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.4vw, 26px);
}

@media (max-width: 900px){
  .grid-2{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
}

/* Cards */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(16px, 2.2vw, 22px);
}
.card.card--flat{ box-shadow:none; background:transparent; }

/* Bullets */
.bullets{
  display:grid;
  gap:12px;
  padding:0;
  margin:14px 0 0;
  list-style:none;
}
.bullets li{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:10px;
  align-items:start;
  color: var(--muted);
  line-height:1.6;
}
.bullets li::before{
  content:"";
  width:10px;
  height:10px;
  margin-top:6px;
  border-radius:999px;
  background: var(--brand-red);
}

/* Buttons (below hero) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: var(--brand-red);
  color:#fff;
}
.btn--primary:hover{
  text-decoration:none;
  box-shadow: 0 10px 22px rgba(153,0,0,0.20);
}

.btn--secondary{
  background: transparent;
  border-color: rgba(2,52,74,0.30);
  color: var(--brand-blue);
}
.btn--secondary:hover{
  text-decoration:none;
  border-color: rgba(2,52,74,0.55);
  box-shadow: 0 10px 22px rgba(2,52,74,0.10);
}

@media (max-width: 520px){
  .btn{ width:100%; }
  .btn + .btn{ margin-left:0 !important; margin-top:10px; }
}

/* Divider utility */
.divider{
  height:1px;
  background: rgba(0,0,0,0.08);
  margin:22px 0;
}

/* =========================================================
   FAQ — CSS-only accordion (<details>)
========================================================= */
.faq{
  max-width: 920px;
  margin: 0 auto;
  display:grid;
  gap:12px;
}
.faq-item{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.faq-q{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  font-weight:700;
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q::after{
  content:"+";
  font-weight:800;
  color: var(--brand-blue);
  flex:0 0 auto;
}
.faq-item[open] .faq-q::after{ content:"–"; }
.faq-a{ padding:0 18px 18px; }
/* =========================
   BREADCRUMBS (Global)
========================= */

.breadcrumbs{
  padding: 14px 0;
}

.breadcrumbs-list{
  list-style: none;      /* removes 1., 2., etc. */
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.breadcrumbs-list li{
  font-size: 14px;
  color: var(--muted);
}

.breadcrumbs-list li a{
  color: var(--brand-blue);
  text-decoration: none;
}

.breadcrumbs-list li a:hover{
  text-decoration: underline;
}

.breadcrumbs-list li + li::before{
  content: "›";
  opacity: 0.6;
  margin-right: 10px;
}

/* =========================================================
   CTA BAND — refined separation above footer
========================================================= */
.cta-band{
  background: linear-gradient(180deg, #0e4b5d 0%, #0d4353 100%);
  padding: clamp(70px, 8vw, 110px) 0;
  position: relative;
}
.cta-band::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:1px;
  background: rgba(255,255,255,0.12);
}
.cta-inner{
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 42px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.cta-band .h2{ color:#fff; }
.cta-band .lede{ color: rgba(255,255,255,0.85); }

.cta-band .btn--secondary{
  border-color: rgba(255,255,255,0.35);
  color:#fff;
}
.cta-band .btn--secondary:hover{
  border-color: rgba(255,255,255,0.65);
  box-shadow: 0 12px 24px rgba(0,0,0,0.25);
}

@media (max-width: 900px){
  .cta-inner{ flex-direction:column; align-items:flex-start; }
}
/* =========================
   FINAL CTA (Services)
========================= */

.section-final-cta {
  text-align: center;
}

.section-final-cta .cta-box {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 32px;

  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.section-final-cta h2 {
  margin-top: 0;
  margin-bottom: 12px;
}

.section-final-cta p {
  margin-bottom: 22px;
}

.section-final-cta .cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
/* =========================================================
   FOOTER v1.0 — Secured Equity Title Pawn
   (Global footer styling — keep in style.css)
========================================================= */

/* Footer base */
.site-footer{
  background:#0b3b4a;
  color:rgba(255,255,255,.88);
  padding:64px 0 38px;
  position:relative;
}

/* Ensure footer content aligns with site width */
.site-footer .container{
  width:min(1200px, calc(100% - 48px));
  margin-inline:auto;
}

/* Prevent default UL spacing from breaking layout */
.site-footer ul{
  list-style:none;
  margin:0;
  padding:0;
}

/* Top layout */
.footer-top{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr 0.9fr;
  gap:28px;
  align-items:start;
  margin-bottom:28px;
}

/* Logo */
.footer-logo img{
  display:block;
  height:auto;
  max-width:220px;
}

/* Brand text */
.footer-title{
  margin-top:14px;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#fff;
}

.footer-subtitle{
  margin-top:6px;
  color:rgba(255,255,255,.72);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:12px;
}

/* Hours block */
.footer-hours{
  margin-top:18px;
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:14px;
  max-width:320px;
}

.footer-hours-title{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  margin-bottom:10px;
  color:rgba(255,255,255,.78);
}

.footer-hours-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:14px;
  color:rgba(255,255,255,.78);
  padding:6px 0;
  border-bottom:1px dashed rgba(255,255,255,.10);
}

/* Column heading */
.footer-col-title{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  margin-bottom:14px;
  color:#fff;
}

/* Footer navigation links */
.footer-nav{
  display:grid;
  gap:10px;
}

.footer-nav a{
  color:rgba(255,255,255,.78);
  text-decoration:none;
}

.footer-nav a:hover{
  color:#fff;
  text-decoration:underline;
}

/* Small note text */
.footer-mini-note{
  margin-top:16px;
  color:rgba(255,255,255,.70);
  font-size:12px;
  line-height:1.5;
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* Apply button (if present) */
.footer-cta .footer-apply{
  width:200px;
  justify-content:center;
  margin-bottom:14px;
}

/* Social buttons */
.footer-social{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.social-btn{
  width:42px;
  height:42px;
  border-radius:10px;
  background:#990000;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  text-decoration:none;
}

.social-btn svg{
  width:20px;
  height:20px;
  fill:#fff;
}

.social-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* Disclosure section */
.footer-disclosure{
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:18px;
  margin-top:10px;
  text-align:center;
}

.footer-disclosure-title{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:12px;
  margin-bottom:10px;
  color:#fff;
}

.footer-disclosure p{
  margin:10px auto 0;
  max-width:980px;
  font-size:12px;
  line-height:1.7;
  color: rgba(255,255,255,.74);
}

/* MLA / legal highlight */
.footer-mla{
  margin:18px auto 0;
  max-width:980px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.12);
  text-align:center;
}

.footer-mla-title{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  margin-bottom:8px;
  color:#ffdd77;
}

/* Bottom row */
.footer-bottom{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  gap:14px;
  justify-content:space-between;
  flex-wrap:wrap;
  align-items:center;
}

.footer-bottom a{
  color:rgba(255,255,255,.74);
  text-decoration:none;
  font-size:13px;
}

.footer-bottom a:hover{
  color:#fff;
  text-decoration:underline;
}

.footer-dot{
  color:rgba(255,255,255,.38);
  margin:0 8px;
}

.footer-bottom-right{
  color:rgba(255,255,255,.62);
  font-size:13px;
}

/* Back-to-top pulsing arrow */
.back-to-top{
  position:fixed;
  right:18px;
  bottom:18px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(153,0,0,.95);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform: translateY(10px);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  transition: opacity .16s ease, transform .16s ease, filter .16s ease;
}

.back-to-top.show{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
  animation: pulseUp 1.6s ease-in-out infinite;
}

.back-to-top:hover{
  filter: brightness(1.08);
  animation:none;
}

@keyframes pulseUp{
  0%,100%{ transform: translateY(0); box-shadow: 0 10px 22px rgba(0,0,0,.22); }
  50%{ transform: translateY(-3px); box-shadow: 0 14px 26px rgba(0,0,0,.28); }
}

/* Responsive footer */
@media (max-width: 900px){
  .footer-top{ grid-template-columns:1fr; }
  .footer-disclosure, .footer-mla{ text-align:left; }
}