/* =========================================================
   315SnoBlow — styles.css
   Clean, modern, premium; minimal winter aesthetic
   ========================================================= */

/* ===== CSS Variables: brand palette & spacing ===== */
:root{
  --navy:#0e2a47;
  --cyan:#18b9d7;
  --ice:#eaf6ff;
  --cta:#ff8a3d;
  --white:#ffffff;
  --text:#0f2233;
  --muted:#5b778c;
  --bg:#f7fbff;

  --radius:14px;
  --shadow:0 10px 30px rgba(14,42,71,0.12);
  --maxw:1200px;
  --pad:clamp(16px, 3vw, 28px);
  --section:clamp(56px, 9vw, 96px);
  --header-h:70px;
}

/* ===== Reset & base ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text); background:var(--bg);
  line-height:1.55;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}

/* ===== Accessibility: skip link ===== */
.skip-link{
  position:absolute; left:-9999px; top:auto;
  background:var(--white); color:var(--navy); padding:10px 14px; border-radius:8px;
  box-shadow:var(--shadow); z-index:9999;
}
.skip-link:focus{left:10px; top:10px}

/* ===== Header / Nav ===== */
header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(14,42,71,0.7);
  color:var(--white);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav{
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px;
}
.brand-logo{
  width:34px; height:34px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--cyan), #7ae3ff);
  color:var(--navy); font-weight:800;
}
nav ul{display:flex; gap:20px; list-style:none; margin:0; padding:0}
nav a{color:var(--white); opacity:.9; font-weight:600}
nav a:hover, nav a.active{opacity:1; color:#cfefff}
.cta-btn{
  background:var(--cta); color:#1c120c; padding:10px 16px; border-radius:12px; font-weight:800;
  border:2px solid transparent; transition:transform .15s ease, box-shadow .2s ease;
  box-shadow:0 6px 16px rgba(255,138,61,.2);
}
.cta-btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(255,138,61,.3)}
.menu-toggle{display:none; background:transparent; border:none; color:var(--white); font-size:1.4rem}

/* ===== Hero ===== */
.hero{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(24,185,215,.25), transparent),
    linear-gradient(180deg, #0e2a47, #12355a 55%, #15456f);
  color:var(--white);
  padding-top:clamp(30px, 4vw, 50px);
  padding-bottom:clamp(40px, 8vw, 100px);
  position:relative; overflow:hidden;
}
/* subtle snow "texture" */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.12) 1px, transparent 2px),
    radial-gradient(rgba(255,255,255,.09) 1px, transparent 2px);
  background-size: 22px 22px, 36px 36px;
  background-position: 0 0, 12px 18px;
  opacity:.25;
}
.hero-grid{
  display:grid; gap:28px; align-items:center;
  grid-template-columns: 1.1fr .9fr;
}
.eyebrow{color:#b7ecff; letter-spacing:.8px; font-weight:700; text-transform:uppercase; font-size:.82rem}
.hero h1{margin:.3em 0 .4em; font-size:clamp(1.9rem, 3.6vw, 3rem); line-height:1.1}
.hero p{color:#d7e9f6; font-size:clamp(1rem, 1.3vw, 1.15rem)}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px;
  font-weight:700; border:2px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--cta); color:#1c120c}
.btn-outline{border-color:#bfeeff; color:#e7f9ff; background:transparent}
.note{
  margin-top:14px; font-size:.95rem; color:#cfe3f1;
}

/* Placeholder visual (replace images later) */
.placeholder{
  background:linear-gradient(180deg, #dff6ff, #ccecff);
  border-radius:var(--radius); padding:16px;
  border:1px solid #bfe6f6; box-shadow:var(--shadow);
  color:#0e2a47;
}
.placeholder .ph-in{
  border:2px dashed #7dcfe6; border-radius:12px; padding:24px; text-align:center;
  font-weight:700; color:#0e2a47; min-height:220px; display:grid; place-items:center;
}
.ph-small{min-height:120px}

/* ===== Sections ===== */
section{padding:var(--section) 0}
.section-head{margin-bottom:18px}
.kicker{color:var(--navy); text-transform:uppercase; font-size:.78rem; letter-spacing:.08em; font-weight:800}
h2{margin:.2em 0 .5em; font-size:clamp(1.4rem, 2.4vw, 2rem); color:var(--navy)}
.muted{color:var(--muted)}

/* Cards & grids */
.grid{display:grid; gap:18px}
.grid-3{grid-template-columns: repeat(3, 1fr)}
.grid-2{grid-template-columns: repeat(2, 1fr)}
.card{
  background:var(--white); border:1px solid #e6eef4; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)
}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:var(--ice); color:var(--navy); font-weight:700; border:1px solid #cfe8f6}
.icon{width:22px; height:22px}

/* How it works steps */
.steps{counter-reset:step}
.step{
  position:relative; padding-left:52px; min-height:52px;
}
.step::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:0; width:40px; height:40px; border-radius:10px;
  background:linear-gradient(135deg, var(--cyan), #7ae3ff); color:#0e2a47; font-weight:900; display:grid; place-items:center;
  border:2px solid #e6fbff;
}

/* Contact form */
form{
  display:grid; gap:12px;
}
.field{
  display:flex; flex-direction:column; gap:6px;
}
label{font-weight:700; color:var(--navy)}
input, select, textarea{
  padding:12px 14px; border-radius:12px; border:1px solid #d9e6f0; background:#fff;
  font-size:1rem; outline:none;
}
input:focus, select:focus, textarea:focus{border-color:#9ddcf0; box-shadow:0 0 0 4px #e8f8ff}
.helper{font-size:.9rem; color:var(--muted)}
.agree{display:flex; align-items:flex-start; gap:10px}
.form-note{font-size:.9rem; color:var(--muted)}
.success{display:none; padding:12px 14px; background:#ebfff3; color:#114422; border:1px solid #c3f1d5; border-radius:12px; font-weight:700}
.error{display:none; padding:12px 14px; background:#fff2f0; color:#6d1207; border:1px solid #ffd1cc; border-radius:12px; font-weight:700}

/* ===== Gallery Section ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-item:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* Caption Overlay */
.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 0 0 12px 12px;
}

.gallery-item:hover .gallery-caption {
  opacity: 1;
}

/* Responsive Adjustments */
@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}
/* Footer */
footer{
  background:var(--navy); color:#cfe3f1; padding:26px 0; margin-top:20px;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-grid{display:grid; gap:20px; grid-template-columns: 1.4fr .8fr .8fr}
.foot a{color:#dff6ff}
.copyright{margin-top:16px; font-size:.92rem; color:#b9d5e6}

/* Fade-in animation (on scroll) */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:translateY(0)}

/* Responsive */
@media (max-width: 900px){
  nav ul{display:none; position:absolute; top:var(--header-h); right:var(--pad); left:var(--pad); background:rgba(14,42,71,.96); padding:14px; border-radius:12px; border:1px solid rgba(255,255,255,.08)}
  nav ul.open{display:grid; gap:12px}
  .menu-toggle{display:inline-flex}
  .hero-grid{grid-template-columns: 1fr}
  .grid-3{grid-template-columns: 1fr}
  .grid-2{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns: 1fr}
}