:root{
  --maple-red:#8F111D;
  --golden-aspen:#FF9705;
  --pumpkin-spice:#D42900;
  --oak-brown:#704622;
  --evergreen-pine:#2E473B; /* restored green tone for text */
  --lake-mist:#E6D5C6;
  --twilight-sky:#4A405A;

  --bg: linear-gradient(180deg, rgba(177,57,20,1.0) 0%,  rgba(227,161,30,0.80) 100%);

  --text: #fffaf6;
  --muted: #f3e2d4;
  --cta: var(--golden-aspen);
  --cta-text: #2c1e10;
  --card: rgba(255,255,255,.15);
  --header-bg: rgba(71,35,17,.55);
  --border: 1px solid rgba(255,255,255,.15);
  --shadow: 0 16px 40px rgba(0,0,0,.35);
}

*, *::before, *::after{ box-sizing: border-box }
html, body { height: 100% }
body{
  position: relative;
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x:hidden;
}


header{
  position: sticky; top:0; z-index:10; backdrop-filter: blur(8px);
  background: var(--header-bg); border-bottom: var(--border);
}
.nav{ max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:18px; padding:10px 18px }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit }

.brand img {
  height: clamp(28px, 4vw, 48px);
  width: auto;
  object-fit: contain;
}

.spacer{ flex:1 }
nav a{ color: var(--muted); text-decoration:none; padding:10px 12px; border-radius:10px }
nav a:hover, nav a:focus-visible{ background: rgba(255,255,255,.1); color:#fff; outline:none }

.wrap{ position:relative; min-height:100dvh; isolation:isolate }

.bg-hero{
  display: block; /* instead of flow-root, now that it’s working */
  position: relative;
  background: 
    url("https://isaacmavis-website-bucket.s3.us-east-1.amazonaws.com/assets/img/viking-boat-water.png") no-repeat 96% 97% / 100px fixed,
    url("https://isaacmavis-website-bucket.s3.us-east-1.amazonaws.com/assets/img/maple-tree-blowing-right.png") no-repeat 2% 99% / 100px fixed,
    url("https://isaacmavis-website-bucket.s3.us-east-1.amazonaws.com/assets/img/wind-leaves-3.png") no-repeat 10% 95% / 50px fixed,
    url("https://isaacmavis-website-bucket.s3.us-east-1.amazonaws.com/assets/img/wind-leaves-1.png") no-repeat 61.8% 99% / 50px fixed,
    url("https://isaacmavis-website-bucket.s3.us-east-1.amazonaws.com/assets/img/wind-leaves-1-up.png") no-repeat 38% 80% / 50px fixed,
    url("https://isaacmavis-website-bucket.s3.us-east-1.amazonaws.com/assets/img/wind-leaves-2.png") no-repeat 89% 85% / 50px fixed;
  padding: 0; /* reset any unintended padding */
  margin: 0;
}

.hero {
  display: grid;
  place-items: center;
  text-align: center;
  background: transparent;
}
.hero-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(56px, 10vh, 96px) 20px 56px;
}

.hero-inner{ max-width:920px }
.kicker{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .85rem; border-radius:999px; background: rgba(255,255,255,.08); border:var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.25); backdrop-filter: blur(6px); font-size:.95rem; color: var(--muted) }
h1{ margin:14px 0 10px; font-size: clamp(2rem, 4.2vw + .5rem, 4.2rem); line-height:1.08; letter-spacing:.2px }
.h1-accent{ color: var(--golden-aspen) }
.lead{ color:#fffaf6; opacity:.92; font-size: clamp(1.02rem, 1.2vw + .6rem, 1.3rem); line-height:1.6; max-width: 860px; margin-inline:auto }

.cta{ margin-top:24px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap }
.btn{ appearance:none; border:0; border-radius:14px; padding:12px 16px; font-weight:700; letter-spacing:.2px; cursor:pointer; box-shadow: var(--shadow); transform: translateZ(0); transition: transform .15s ease }
.btn.primary{ background: var(--cta); color: var(--cta-text) }
.btn.ghost{ background: rgba(255,255,255,.15); color: var(--text); border:var(--border) }
.btn:hover{ transform: translateY(-2px) }

.row{ display:grid; grid-template-columns: repeat(12, 1fr); gap:16px; max-width:1100px; margin:48px auto 72px; padding:0 20px }
.card{ grid-column: span 12; background: var(--card); border:var(--border); border-radius:18px; padding:18px 18px 20px; box-shadow: var(--shadow); backdrop-filter: blur(6px)}
@media (min-width:820px){ .card{ grid-column: span 4 } }
.card h3{ margin:6px 0 6px; letter-spacing:.3px; color: var(--evergreen-pine); }
.card p{ margin:0; color: var(--evergreen-pine); opacity:.9; line-height:1.55 }
.eyebrow{ font-size:.85rem; opacity:.85; letter-spacing:.15em; text-transform:uppercase; color: var(--evergreen-pine); }

.card:hover {
  background: rgba(255, 255, 255, 0.25); /* slightly brighter */
  transform: translateY(-6px); /* lift the card upward */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); /* deepen the shadow */
  border: 1px solid var(--golden-aspen); /* subtle accent border */
  cursor: pointer;
}

footer{ text-align:center; color:#fffaf6; opacity:.9; padding:36px 20px 64px }