/* Two Dames & A Duster — starter site
   Color system tuned for Gulf Coast sunset hero.
*/

:root{
  --ink:#0b1324;
  --navy:#0a1b3d;
  --navy-2:#122a55;
  --teal:#1a7f86;
  --teal-2:#0f6f76;
  --sand:#f6f2ea;
  --paper:#ffffff;
  --muted:#6b7280;
  --shadow: 0 10px 30px rgba(0,0,0,.18);
  --radius: 14px;
  --radius-sm: 10px;
  --container: 1120px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{
  width:min(var(--container), calc(100% - 2rem));
  margin-inline:auto;
}
.section{
  padding: clamp(2.75rem, 5vw, 4.5rem) 0;
}
.section-title{
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  margin:0 0 .75rem 0;
  letter-spacing:-0.015em;
}
.section-intro{
  max-width: 70ch;
  color: #2d3748;
  margin: 0;
}
.divider{
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), rgba(26,127,134,.25));
  border-radius: 999px;
  margin: 1rem 0 1.25rem 0;
}

/* Header / Nav */
.header{
  position:fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(10, 27, 61, .62);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: .85rem 0;
}
.nav-list{
  list-style:none;
  display:flex;
  gap: .9rem;
  padding:0;
  margin:0;
  align-items:center;
  flex-wrap:wrap;
}
.nav-link{
  padding: .55rem .75rem;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: .95rem;
}
.nav-link:hover{background: rgba(255,255,255,.12)}
.nav-link.active{background: rgba(255,255,255,.18)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius: 999px;
  padding: .78rem 1.05rem;
  font-weight: 700;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active{transform: translateY(1px)}
.btn-primary{
  background: rgba(255,255,255,.95);
  color: var(--navy);
}
.btn-primary:hover{background: rgba(255,255,255,.86)}
.btn-outline{
  background: transparent;
  color: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.28);
}
.btn-outline:hover{background: rgba(255,255,255,.12)}

/* Hero */
.hero-full{
  min-height: 100svh;
  display:grid;
  place-items: center;
  position: relative;
  background-image:
    linear-gradient(120deg, rgba(10,27,61,.68) 0%, rgba(10,27,61,.35) 38%, rgba(10,27,61,.55) 100%),
    url("../images/biloxilighthouse.png");
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
}
.hero-overlay{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  padding-top: 70px; /* header offset */
}
.hero-content-full{
  max-width: 850px;
  color: rgba(255,255,255,.96);
  text-align: center;
  padding: clamp(2.25rem, 4vw, 3.25rem) 0;
}
.hero-logo-small{
  width: 210px;
  margin: 0 auto 1rem auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.hero-content-full h1{
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  line-height:1.05;
  margin: .25rem 0 .75rem 0;
  letter-spacing: -0.02em;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.hero-content-full p{
  margin: 0 auto 1.5rem auto;
  max-width: 55ch;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: rgba(255,255,255,.88);
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.hero-buttons{
  display:flex;
  justify-content:center;
  gap: .8rem;
  flex-wrap: wrap;
}
.btn-request{
  background: rgba(255,255,255,.94);
  color: var(--navy);
}
.btn-request:hover{background: rgba(255,255,255,.86)}
.btn-about{
  background: rgba(15, 111, 118, .92);
  color: rgba(255,255,255,.97);
  border-color: rgba(255,255,255,.18);
}
.btn-about:hover{background: rgba(15, 111, 118, .82)}

/* Cards / Grid */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.card{
  grid-column: span 12;
  background: var(--paper);
  border: 1px solid rgba(12,18,36,.10);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(10,27,61,.06);
  padding: 1.25rem;
}
.card h3{
  margin: 0 0 .5rem 0;
  font-size: 1.15rem;
}
.card p{margin:0; color:#374151}
.card ul{margin:.65rem 0 0 1rem; color:#374151}
.badge{
  display:inline-flex;
  align-items:center;
  padding:.35rem .6rem;
  border-radius:999px;
  border: 1px solid rgba(12,18,36,.12);
  background: rgba(246,242,234,.75);
  font-weight:700;
  font-size:.82rem;
  color: var(--navy-2);
}

/* Contact / Forms */
.contact-info{
  background: linear-gradient(180deg, rgba(246,242,234,.78), rgba(255,255,255,1));
  border-top: 1px solid rgba(12,18,36,.08);
}
.form{
  display:grid;
  gap:.9rem;
}
.form-row{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:.9rem;
}
.label{
  font-weight:700;
  font-size:.92rem;
  color:#111827;
  margin-bottom:.35rem;
}
.input, textarea{
  width:100%;
  border: 1px solid rgba(12,18,36,.14);
  border-radius: 12px;
  padding: .8rem .85rem;
  font-size: 1rem;
  background: rgba(255,255,255,.96);
  outline: none;
}
textarea{min-height: 130px; resize: vertical}
.input:focus, textarea:focus{
  border-color: rgba(26,127,134,.55);
  box-shadow: 0 0 0 4px rgba(26,127,134,.12);
}
.form-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn-submit{
  background: var(--navy);
  color: white;
}
.btn-submit:hover{background: var(--navy-2)}
.small-muted{color: var(--muted); font-size: .95rem}

/* Footer */
.footer{
  background: var(--navy);
  color: rgba(255,255,255,.92);
  padding: 2rem 0;
}
.footer a{color: rgba(255,255,255,.92); text-decoration: underline; text-underline-offset: 3px}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1.25rem;
  align-items:start;
}
.footer h4{margin:0 0 .5rem 0}
.footer p{margin:.25rem 0; color: rgba(255,255,255,.82)}
.footer .fineprint{
  margin-top: 1.25rem;
  color: rgba(255,255,255,.68);
  font-size: .92rem;
}

/* Page hero (interior pages) */
.page-hero{
  padding-top: 92px; /* fixed header offset */
  background: linear-gradient(120deg, rgba(10,27,61,.88), rgba(15,111,118,.45)),
              url("../images/biloxilighthouse.png");
  background-size: cover;
  background-position: center;
  color: white;
}
.page-hero-inner{
  padding: 3.1rem 0 2.35rem 0;
}
.page-hero h1{
  margin:0 0 .55rem 0;
  font-size: clamp(1.9rem, 3.1vw, 2.75rem);
  letter-spacing:-0.02em;
}
.page-hero p{margin:0; max-width: 70ch; color: rgba(255,255,255,.88)}

/* Responsive */
@media (min-width: 760px){
  .card.span-4{grid-column: span 4}
  .card.span-6{grid-column: span 6}
}
@media (max-width: 740px){
  .nav{
    flex-direction: column;
    align-items: stretch;
  }
  .nav-list{
    justify-content: center;
  }
  .form-row{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns: 1fr}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}