/* CompassRidge Co. Styles */
:root{
  --navy:#0A2342; --navy-600:#132C55; --navy-700:#081A2E; --gold:#D4AF37; --slate:#6F7A81; --sky:#E8F3FF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,"Helvetica Neue",Arial,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--navy);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
.btn{display:inline-block;padding:.875rem 1.25rem;border-radius:8px;font-weight:600;border:2px solid var(--gold);color:var(--navy);background:var(--gold)}
.btn:hover{filter:brightness(1.05)}
.container{width:min(1140px,92%);margin:0 auto}
.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #EDF1F7}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img.logo{width:44px;height:auto}
.brand .name{font-weight:800;letter-spacing:.04em}
.hero{position:relative;background:var(--sky)}
.hero picture,.hero img{width:100%}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.0) 0%,rgba(255,255,255,.25) 55%,rgba(255,255,255,.55) 100%)}
.hero-content{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:clamp(1rem,4vw,3rem)}
.hero h1{font-family:"Playfair Display",Georgia,serif;font-size:clamp(2rem,4vw,3rem);margin:.25rem 0 .5rem}
.hero p{max-width:820px;margin:.25rem auto 1rem;color:var(--navy)}
.section{padding:clamp(2rem,6vw,4rem) 0}
.section-title{font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.5rem,3vw,2rem);margin:.2rem 0 1rem;position:relative}
.section-title::before{content:"";position:absolute;top:-10px;left:0;width:72px;height:3px;background:var(--gold)}
.grid{display:grid;gap:clamp(1rem,3vw,2rem)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}}
.card{padding:1.25rem;border:1px solid #ECF0F6;border-radius:12px;background:#fff}
.subtle{color:var(--slate)}
.process{counter-reset:step}
.process li{list-style:none;border-left:3px solid var(--gold);padding:.5rem 0 .5rem 1rem;margin:.25rem 0}
.process li::before{counter-increment:step;content:counter(step);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--navy);font-weight:700;margin-right:.5rem}
.footer{padding:2rem 0;background:var(--navy);color:#fff}
.footer small{opacity:.85}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:1rem;z-index:100}
.modal[open]{display:flex}
.dialog{background:#fff;width:min(720px,95%);border-radius:12px;padding:1.25rem;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.form-grid{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.form-grid .full{grid-column:1/-1}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}
label{font-weight:600;font-size:.95rem}
input,textarea,select{width:100%;padding:.75rem;border:1px solid #DDE3EE;border-radius:8px;font:inherit}
textarea{min-height:140px}
hr.divider{border:0;height:1px;background:linear-gradient(90deg,rgba(212,175,55,.8),rgba(212,175,55,.1));margin:1.5rem 0}
:focus-visible{outline:3px solid #8EC5FF;outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Mobile-only fix: keep brand (logo + name) clearly above hero text; desktop unchanged ===== */
@media (max-width: 767px) {
  :root { --mobile-header-height: 168px; }

  /* Stack brand and nav vertically if space is tight */
  .header-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .25rem;
    padding: .5rem 0; /* slightly tighter on mobile */
  }
  .brand { width: 100%; }
  .header nav { width: 100%; }

  /* Push the hero overlay content downward so it never appears on the same visual row as the header */
  .hero-content {
    /* The base padding in the original CSS is `clamp(1rem, 4vw, 3rem)`; add header height to the top only. */
    padding-top: calc(clamp(1rem, 4vw, 3rem) + var(--mobile-header-height)) !important;
    /* Keep other paddings as originally defined by the shorthand */
  }

  /* Defensive: ensure hero is a block-level section on its own line */
  .hero { display: block; width: 100%; clear: both; }
}