/* ==================================================================
   Coast Marine Sales — Stylesheet
   Updated: 2025-08-09 13:52
   See README.md for a map of components.
================================================================== */

/* --- Variables / Theme Tokens --- */
:root{--gutter-min:24px;--gutter-max:64px;
  --navy:#0B2A3F;
  --teal:#1E6F6D;
  --sand:#E8E3D3;
  --charcoal:#111827;
  --white:#ffffff;
  --muted:#6B7280;
  --radius:16px;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --container:1200px;
}

*{box-sizing:border-box}
html,
/* --- Base / Body --- */
body{margin:0;padding:0}

/* --- Base / Body --- */
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--charcoal);
  background:#fafbfc;
  line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}


/* --- Typography --- */
h1,h2,h3{font-family:"Playfair Display",Georgia,serif; color:var(--navy); line-height:1.2; margin:0 0 .6rem}
h1{font-size:clamp(2rem,5vw,3rem)}
h2{font-size:clamp(1.35rem,3vw,2rem)}
h3{font-size:clamp(1.125rem,2.2vw,1.3rem)}

.container{max-width:var(--container,1200px);margin:0 auto;padding-left:clamp(var(--gutter-min),4vw,var(--gutter-max));padding-right:clamp(var(--gutter-min),4vw,var(--gutter-max))}

.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:20px; top:12px; width:auto; height:auto; background:var(--navy); color:var(--white); padding:10px 14px; border-radius:10px; z-index:1000}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(6px); border-bottom:1px solid #eef1f4}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-name{font-weight:700; color:var(--navy)}
.main-nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.main-nav a{color:var(--charcoal); text-decoration:none; font-weight:500}
.main-nav a:hover,.main-nav a:focus{color:var(--teal)}
.header-cta{margin-left:auto}
.nav-toggle{display:none; border:1px solid #e5e7eb; background:#fff; border-radius:12px; padding:8px 12px}

.mobile-nav{display:flex; flex-direction:column; gap:10px; padding:12px 20px; border-bottom:1px solid #eef1f4; background:#fff}
.mobile-nav a{padding:10px 12px; text-decoration:none; color:var(--charcoal); border-radius:10px}
.mobile-nav .btn-block{display:block; text-align:center}


/* --- Mobile Nav Sheet & Responsiveness --- */
@media (max-width: 900px){
  .main-nav{display:none}
  .nav-toggle{display:inline-block}
  .header-cta{display:none}
}

/* Hero */
.hero{position:relative; background:linear-gradient(135deg, var(--navy), #0d3a57); color:var(--white); overflow:hidden}
.hero-inner{padding:80px 0; display:grid; gap:16px; align-items:center}
.hero-title{color:var(--white)}
.hero-subtitle{color:#e6eef5; max-width:68ch}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}

.hero-bg{position:absolute; inset:0; pointer-events:none}
.hero-bg::before{content:""; position:absolute; inset:-20% -10% 0 -10%; background:radial-gradient(50% 50% at 10% 20%, rgba(255,255,255,.09) 0, rgba(255,255,255,0) 65%);}
.hero-bg::after{content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 90% 10%, rgba(30,111,109,.25) 0, rgba(30,111,109,0) 60%)}

/* Sections */
.section{padding:56px 0}
.section.alt{background:#f6f8f9}
.section-head{display:grid; gap:6px; margin-bottom:20px}
.section-head p{color:var(--muted); margin:0}

/* Cards */

/* --- Card Grid & Cards --- */
.card-grid{display:grid; grid-template-columns:repeat(12, 1fr); gap:16px}
.card{grid-column:span 12; background:#fff; border:1px solid #eef1f4; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card-media{display:flex; align-items:center; justify-content:center; padding:6px 6px 12px}
.card-
/* --- Base / Body --- */
body{display:grid; gap:10px}
.card-title{margin:0 0 6px}
.card-text{margin:0}
.card-actions{display:flex; gap:10px; flex-wrap:wrap}
.pill-list{display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:0; list-style:none}
.pill-list li{background:var(--sand); color:#1B2A34; padding:6px 10px; border-radius:999px; font-size:.9rem}

@media (min-width: 720px){
  .card{grid-column:span 6}
}
@media (min-width: 980px){
  .card{grid-column:span 4}
}

/* Certs */

/* --- Certifications --- */
.cert-grid{display:flex; gap:10px; flex-wrap:wrap; padding:0; list-style:none}
.badge{display:inline-block; border:1px dashed #cbd5e1; padding:10px 12px; border-radius:12px; text-decoration:none; color:var(--charcoal); background:#fff}

/* Contact */

/* --- Contact Card --- */
.contact-card{background:#fff; border:1px solid #eef1f4; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); display:grid; gap:6px; max-width:480px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:600; border:1px solid transparent}
.btn-primary{background:var(--teal); color:var(--white)}
.btn-primary:hover,.btn-primary:focus{filter:brightness(.95)}
.btn-secondary{background:transparent; color:var(--white); border-color:rgba(255,255,255,.5)}
.btn-secondary:hover,.btn-secondary:focus{background:rgba(255,255,255,.1)}
.btn-tertiary{background:#f3f6f8; color:#0b2a3f; border-color:#e5e7eb}
.btn-link{background:transparent; color:var(--teal); border-color:transparent; padding-left:0}

/* Footer */
.site-footer{border-top:1px solid #eef1f4; background:#fff}
.footer-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:20px 0}
.site-footer a{text-decoration:none; color:var(--charcoal); margin-right:12px}
.site-footer a:hover{color:var(--teal)}

/* --- Compact header & logo fixes --- */
.brand img{height:32px;width:auto;display:block}

.header-inner{padding:8px 0}
.brand-name{font-size:0.95rem}
.main-nav ul{gap:14px}
.site-header .btn{padding:8px 12px} /* default smaller in header */
.btn-sm{padding:6px 10px; font-size:.92rem}


/* --- Mobile Nav Sheet & Responsiveness --- */
@media (max-width: 900px){
  .mobile-nav{padding:8px 16px}
  .mobile-nav a{padding:8px 10px}
}

/* --- Contact modal --- */
body.modal-open{overflow:hidden}
.modal{position:fixed; inset:0; z-index:100; display:block}
.modal[hidden]{display:none}
.modal-overlay{position:absolute; inset:0; background:rgba(0,0,0,.45)}
.modal-dialog{
  position:relative; z-index:1; background:#fff; color:var(--charcoal);
  width:min(520px, 92vw); margin:12vh auto 0; border-radius:16px; border:1px solid #e5e7eb;
  box-shadow:0 30px 60px rgba(0,0,0,.2); padding:18px;
  outline: none;
}
.modal-head{display:grid; gap:4px; margin-bottom:12px}
.modal-sub{color:var(--muted); margin:0}
.modal-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-start}
.modal-close{
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
  border:1px solid #e5e7eb; background:#fff; font-size:18px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
@media (max-width:520px){
  .modal-dialog{margin:15vh auto 0; padding:16px}
  .modal-actions .btn{flex:1 1 auto}
}

/* --- Contact dialog --- */

/* --- Dialog --- */
.dialog-backdrop{position:fixed; inset:0; background:rgba(17,24,39,.5); backdrop-filter:blur(2px); z-index:90}
.dialog{position:fixed; inset:auto 0 0 0; margin:auto; width:min(92vw,420px); background:#fff; border:1px solid #eef1f4; border-radius:16px; box-shadow:0 30px 60px rgba(0,0,0,.2); z-index:100; padding:16px; top:50%; transform:translateY(-50%);}
.dialog-header{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.dialog-header h2{margin:0; font-size:1.25rem}
.dialog-close{border:1px solid #e5e7eb; background:#fff; border-radius:10px; padding:4px 10px; font-size:1.25rem; line-height:1}
.dialog-
/* --- Base / Body --- */
body{display:grid; gap:14px}
.dialog-actions{display:flex; gap:10px; flex-wrap:wrap}
@media (max-width:480px){ .dialog{width:92vw} }

/* --- Mobile nav sheet + desktop reset --- */

/* --- Mobile Nav Sheet & Responsiveness --- */
@media (max-width: 900px){
  .site-header { position: sticky; top: 0; }
  .header-inner { position: relative; }
  #mobile-menu.mobile-nav{
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 640px);
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 12px 14px;
    z-index: 60;
  }
  .mobile-nav a, .mobile-nav button{
    text-align: center;
  }
}
@media (min-width: 901px){
  #mobile-menu{ display: none !important; }
}

.site-footer .footer-inner{padding-left:clamp(var(--gutter-min),4vw,var(--gutter-max));padding-right:clamp(var(--gutter-min),4vw,var(--gutter-max))}