/* =========================================================
   EAGLE ROCK CREDIT, LLC — style.css
   Palette: deep navy → bright blue. Type: Space Grotesk + Inter.
   Signature: layered "strata" rock lines in the hero.
   ========================================================= */

:root{
  --navy:    #08213f;   /* deepest — the rock */
  --navy-2:  #0d2e57;
  --blue:    #1b4f93;   /* mid blue */
  --bright:  #2d7ff9;   /* accent — the eagle */
  --bright-2:#5aa0ff;
  --sky:     #dbe9fb;   /* tint */
  --paper:   #f4f8fd;   /* light section bg */
  --white:   #ffffff;
  --ink:     #0b1a2c;   /* body text */
  --muted:   #5a6b80;   /* secondary text */
  --line:    #d8e2f0;   /* hairlines */

  --display: "Space Grotesk", system-ui, sans-serif;
  --body:    "Inter", system-ui, sans-serif;

  --maxw: 1140px;
  --radius: 14px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.container{ max-width:var(--maxw); }

a{ text-decoration:none; color:inherit; }

h1,h2,h3{ font-family:var(--display); line-height:1.08; letter-spacing:-0.02em; margin:0; }

/* ---------- Brand / logo ---------- */
.brand{ display:inline-flex; align-items:center; gap:.7rem; }
.brand-mark{
  width:30px; height:30px; flex:0 0 auto; position:relative;
  background:
    linear-gradient(135deg, var(--bright) 0%, var(--blue) 100%);
  border-radius:6px;
  transform:rotate(45deg);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}
.brand-mark::after{
  /* eagle "chevron" carved into the mark */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(135deg, transparent 46%, rgba(255,255,255,.9) 46%, rgba(255,255,255,.9) 54%, transparent 54%);
}
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--display); font-weight:700; font-size:1.05rem; letter-spacing:.06em; color:var(--navy); }
.brand-sub{ font-family:var(--display); font-weight:500; font-size:.62rem; letter-spacing:.32em; color:var(--bright); margin-top:.28rem; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 8px 30px -22px rgba(8,33,63,.6);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:.85rem; padding-bottom:.85rem;
}

.main-nav{ display:flex; align-items:center; }
.nav-menu{
  list-style:none; display:flex; align-items:center; gap:2rem;
  margin:0; padding:0;
}
.nav-menu a{
  font-weight:500; font-size:.93rem; color:var(--navy-2);
  position:relative; padding:.25rem 0; transition:color .2s ease;
}
.nav-menu a:not(.btn-apply)::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--bright); transition:width .25s ease;
}
.nav-menu a:not(.btn-apply):hover{ color:var(--bright); }
.nav-menu a:not(.btn-apply):hover::after{ width:100%; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; width:38px; height:38px;
  border:1px solid var(--line); border-radius:9px; background:var(--white);
  cursor:pointer; align-items:center; justify-content:center;
}
.nav-toggle span{ width:18px; height:2px; background:var(--navy); border-radius:2px; transition:.25s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn-apply{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--display); font-weight:600; font-size:.92rem;
  color:var(--white); background:var(--bright);
  padding:.62rem 1.25rem; border-radius:999px; border:0;
  cursor:pointer; transition:transform .18s ease, background .2s ease, box-shadow .2s ease;
  box-shadow:0 12px 24px -12px rgba(45,127,249,.8);
}
.btn-apply:hover{ background:var(--blue); transform:translateY(-2px); color:var(--white); }
.btn-lg-apply{ padding:.9rem 1.7rem; font-size:1rem; }

.btn-ghost{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-weight:600; font-size:.96rem;
  color:var(--sky); padding:.9rem .4rem;
  border-bottom:2px solid transparent; transition:.2s;
}
.btn-ghost:hover{ color:var(--white); border-bottom-color:var(--bright-2); }
.btn-ghost i{ transition:transform .2s ease; }
.btn-ghost:hover i{ transform:translateX(4px); }

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(140% 120% at 85% -10%, var(--blue) 0%, transparent 55%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 100%);
  color:var(--white);
  padding:7rem 0 7.5rem;
}
/* signature: strata rock lines sweeping across */
.strata{ position:absolute; inset:0; pointer-events:none; }
.strata span{
  position:absolute; left:-15%; right:-15%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(90,160,255,.5), transparent);
  transform:rotate(-7deg);
}
.strata span:nth-child(1){ top:24%; opacity:.5; }
.strata span:nth-child(2){ top:38%; opacity:.35; }
.strata span:nth-child(3){ top:52%; opacity:.6; height:2px; }
.strata span:nth-child(4){ top:66%; opacity:.3; }
.strata span:nth-child(5){ top:78%; opacity:.45; }
.strata span:nth-child(6){ top:90%; opacity:.25; }

.hero-inner{ position:relative; z-index:2; max-width:840px; }
.eyebrow{
  font-family:var(--display); font-weight:500; font-size:.8rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--bright-2);
  margin:0 0 1.3rem;
}
.hero-title{
  font-size:clamp(2.6rem, 6.5vw, 4.6rem); font-weight:700; color:var(--white);
  margin-bottom:1.5rem;
}
.hero-lead{
  font-size:clamp(1.05rem, 2.2vw, 1.3rem); color:var(--sky);
  max-width:600px; margin:0 0 2.4rem; line-height:1.55;
}
.hero-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:1.2rem; }

/* ---------- Section scaffolding ---------- */
.section{ padding:6rem 0; }
.section-eyebrow{
  font-family:var(--display); font-weight:600; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bright);
  margin:0 0 1rem;
}
.section-title{
  font-size:clamp(1.9rem, 4vw, 2.9rem); font-weight:700; color:var(--navy);
  margin-bottom:1.1rem;
}
.section-intro{ color:var(--muted); font-size:1.08rem; max-width:560px; }
.lead-copy{ font-size:1.18rem; color:var(--ink); line-height:1.6; margin-bottom:1.2rem; }
.body-copy{ color:var(--muted); margin-bottom:1.4rem; }

/* ---------- About ---------- */
.about{ background:var(--white); }
.value-list{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:1rem; }
.value-list li{ display:flex; gap:.9rem; align-items:flex-start; }
.value-list i{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:var(--sky); color:var(--blue);
  display:grid; place-items:center; font-size:.85rem; margin-top:.15rem;
}
.value-list div{ color:var(--ink); }
.value-list strong{ color:var(--navy); }

/* ---------- Services ---------- */
.services{ background:var(--paper); }
.services-head{ max-width:620px; margin-bottom:3rem; }
.service-card{
  height:100%; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.8rem 1.6rem; position:relative;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-card:hover{
  transform:translateY(-5px);
  border-color:var(--bright);
  box-shadow:0 26px 50px -34px rgba(27,79,147,.85);
}
.service-num{
  font-family:var(--display); font-weight:600; font-size:.78rem;
  letter-spacing:.12em; color:var(--bright);
  display:inline-block; padding:.25rem .55rem; border:1px solid var(--line);
  border-radius:6px; margin-bottom:1.1rem;
}
.service-card h3{ font-size:1.28rem; color:var(--navy); margin-bottom:.6rem; }
.service-card p{ color:var(--muted); font-size:.97rem; margin:0; }

.industries{
  margin-top:3.5rem; padding-top:2.4rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem;
}
.industries-label{
  font-family:var(--display); font-weight:600; font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--navy); margin:0;
}
.industries-list{
  list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; margin:0; padding:0;
}
.industries-list li{
  font-size:.88rem; font-weight:500; color:var(--blue);
  background:var(--sky); padding:.4rem .9rem; border-radius:999px;
}

/* ---------- FAQ ---------- */
.faq{ background:var(--white); }
.accordion-item{
  border:1px solid var(--line); border-radius:var(--radius)!important;
  margin-bottom:.9rem; overflow:hidden; background:var(--white);
}
.accordion-button{
  font-family:var(--display); font-weight:600; font-size:1.05rem;
  color:var(--navy); padding:1.15rem 1.3rem; background:var(--white);
}
.accordion-button:not(.collapsed){ color:var(--bright); background:var(--paper); box-shadow:none; }
.accordion-button:focus{ box-shadow:0 0 0 3px rgba(45,127,249,.25); }
.accordion-button::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%231b4f93' stroke-linecap='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.accordion-body{ color:var(--muted); padding:0 1.3rem 1.25rem; font-size:1rem; }

/* ---------- Contact ---------- */
.contact{ background:var(--paper); }
.contact-details{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:1.4rem; }
.contact-details li{ display:flex; gap:1rem; align-items:flex-start; }
.contact-details i{
  flex:0 0 auto; width:42px; height:42px; border-radius:11px;
  background:var(--navy); color:var(--bright-2);
  display:grid; place-items:center; font-size:1.15rem;
}
.detail-label{
  display:block; font-family:var(--display); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:.2rem;
}
.contact-details a{ color:var(--blue); font-weight:600; font-size:1.05rem; }
.contact-details a:hover{ color:var(--bright); }
.contact-details address{ font-style:normal; color:var(--navy); font-weight:500; margin:0; }

.contact-form{
  background:var(--white); border:1px solid var(--line);
  border-radius:18px; padding:2rem;
  box-shadow:0 30px 60px -45px rgba(8,33,63,.7);
}
.contact-form label{
  display:block; font-size:.82rem; font-weight:600; color:var(--navy);
  margin-bottom:.4rem; letter-spacing:.01em;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%; font-family:var(--body); font-size:.97rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:.7rem .85rem; transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none; border-color:var(--bright);
  box-shadow:0 0 0 3px rgba(45,127,249,.18); background:var(--white);
}
.contact-form textarea{ resize:vertical; }
.btn-submit{ margin-top:.4rem; }
.form-note{ margin:.9rem 0 0; font-size:.9rem; font-weight:500; min-height:1.1rem; }
.form-note.ok{ color:#1b8a4b; }
.form-note.err{ color:#c0392b; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy); color:var(--sky); padding:3.5rem 0 2rem; }
.site-footer .brand-name{ color:var(--white); }
.footer-top{
  display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between;
  align-items:flex-start; padding-bottom:2.4rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-nav{ display:flex; flex-wrap:wrap; gap:1.6rem; }
.footer-nav a{ color:var(--sky); font-size:.95rem; font-weight:500; transition:color .2s; }
.footer-nav a:hover{ color:var(--bright-2); }
.footer-contact{ display:flex; flex-direction:column; gap:.4rem; text-align:right; }
.footer-contact a{ color:var(--white); font-weight:600; }
.footer-contact a:hover{ color:var(--bright-2); }
.footer-contact address{ font-style:normal; font-size:.9rem; color:var(--sky); opacity:.8; margin:0; }
.footer-bottom{ padding-top:1.6rem; }
.footer-bottom p{ margin:0; font-size:.86rem; opacity:.7; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .nav-toggle{ display:flex; }
  .nav-menu{
    position:absolute; top:100%; right:0; left:0;
    flex-direction:column; align-items:flex-start; gap:.4rem;
    background:var(--white); border-top:1px solid var(--line);
    padding:1rem 1.4rem 1.6rem;
    box-shadow:0 24px 40px -28px rgba(8,33,63,.6);
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:max-height .3s ease, opacity .25s ease, padding .3s ease;
  }
  .nav-menu.open{ max-height:420px; opacity:1; pointer-events:auto; }
  .nav-menu a{ width:100%; padding:.6rem 0; font-size:1rem; }
  .nav-cta{ width:100%; margin-top:.4rem; }
  .nav-cta .btn-apply{ width:100%; }
  .footer-top{ flex-direction:column; gap:1.6rem; }
  .footer-contact{ text-align:left; }
}

@media (max-width: 575px){
  .hero{ padding:5rem 0 5.5rem; }
  .section{ padding:4.2rem 0; }
  .contact-form{ padding:1.4rem; }
}