:root{
  --bg: #fef6e9;
  --text: #1b2d2b;
  --muted: #5a6d67;
  --brand: #184b35;
  --brand-ink: #0b3d2f;
  --brand-contrast: #eaf4f0;
  --accent: #ea7a3c;
  --card: #ffffff;
  --peach: #f3d7c7;
  --mint: #dbe9e1;
}

*{ 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'; background: var(--bg); color: var(--text); line-height: 1.5; }

.container{ width: min(1100px, 92vw); margin-inline: auto; }
h1{ font-size: clamp(2rem, 4.8vw, 3.4rem); line-height: 1.05; margin: 0 0 0.6rem }
h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3{ font-size: 1.2rem; margin: 0 0 .5rem; color: var(--brand-ink) }
p{ margin: .4rem 0 .8rem; color: var(--muted) }

/* Buttons */
.btn{ display:inline-block; padding:.65rem 1rem; border-radius: 14px; text-decoration:none; font-weight:700; }
.btn-cta{ background: var(--accent); color:#fff; box-shadow: 0 6px 16px rgba(234,122,60,.35); }
.btn-cta:hover{ filter: brightness(0.95); }
.btn.lg{ padding: .85rem 1.25rem; border-radius: 16px; }

/* Header */
.site-header{
  --radius: 22px;
  position: sticky; top: 0; z-index: 50;
  background: var(--brand); color: var(--brand-contrast);
  border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius);
  box-shadow: 0 18px 28px rgba(0,0,0,.08);
}
.header-inner{ display:flex; align-items:center; gap: 1rem; padding: .6rem 0 1rem; }
.brand{ color: var(--brand-contrast); text-decoration:none; line-height:1; display:flex; flex-direction:column; }
.brand-title{ font-weight:900; font-size: 1.34rem; letter-spacing:.2px }
.brand-sub{ font-size:.7rem; opacity:.95; letter-spacing:2px; margin-top:2px }
.nav-toggle{ display:none; margin-left:auto; background:transparent; color:var(--brand-contrast); border:0; font-size:1.5rem; }

.site-nav{ margin-left:auto; display:flex; gap: 1.1rem; align-items:center; }
.site-nav a{ color:#e9f3ee; text-decoration:none; font-weight:700; }
.site-nav a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.site-nav a.active{ text-decoration: underline; text-underline-offset: 3px; }
.site-nav .btn-cta{ color:#fff; text-decoration:none; padding:.55rem 0.9rem; border-radius:999px; }

/* Decorative wave at bottom of header */
.header-wave{ display:block; width: 100%; height: 40px; margin-top: -6px; }
.header-wave path{ fill: var(--brand); }

/* Hero */
.hero{ display:grid; grid-template-columns: 1.2fr .9fr; gap: clamp(1rem, 4vw, 2.4rem); align-items:center; padding: 2.2rem 0 1rem; }
.hero-text .meta{ font-size:.95rem; color:#6d7f79; }
.hero-media{ display:flex; justify-content:center; }
.photo-card{ background: #f7eadf; border-radius: 22px; padding: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.photo-card img{ width: 100%; height: auto; border-radius: 16px; display:block; }

/* Cards section */
.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.8rem 0; }
.card{ background: var(--card); border-radius: 18px; padding: 1rem; box-shadow: 0 8px 16px rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.05); }
.card.peach{ background: var(--peach); }
.card.mint{ background: var(--mint); }

.list{ padding-left: 1rem; margin: .2rem 0; }
.list li{ margin: .25rem 0; }
.list.check li::marker{ content: "✓ "; color: var(--brand-ink); font-weight: 700; }
.list.dot li::marker{ content: "• "; color: var(--brand-ink); }
.thumbs{ display:flex; gap:.5rem; margin-top:.5rem; }
.thumbs .thumb{ width:56px; height:40px; background: #e7e1d6; border-radius: 8px; }

/* Info grid */
.info-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: 1.6rem 0 3rem; }
.info{ background: var(--card); border-radius: 16px; padding: 1rem; border: 1px solid rgba(0,0,0,.05); }

/* Footer */
.site-footer{ padding: 2rem 0; }
.footer-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.site-footer .tiny{ text-align:center; margin-top: 1rem; color: #6d7f79; font-size: .9rem; }

/* Responsive */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr 1fr; }
  .info-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px){
  .site-nav{ display:none; }
  .nav-toggle{ display:block; }
  .cards{ grid-template-columns: 1fr; }
  .info-grid{ grid-template-columns: 1fr; }
  .site-nav.open{ display:flex; flex-direction:column; gap:.8rem; margin: .75rem 0 1rem; width:100%; }
  .site-nav.open a{ padding:.3rem 0; }
  .header-wave{ height: 26px; }
}


/* === Custom overrides per request === */
:root{
  --bg: #fef6e9;           /* page background */
  --brand: #184b35;        /* header navbar */
  --accent: #ea7a3c;       /* CTA/button */
}

/* Wave should match page background (was showing black) */
.header-wave path{ fill: var(--bg) !important; }

/* Footer background */
.site-footer{ background: #faecda; border-top: 1px solid rgba(0,0,0,.04); }

/* Buttons - stronger pill shape + focus */
.btn{ border-radius: 18px; font-weight: 800; }
.btn-cta{
  background: var(--accent);
  color: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 22px rgba(234,122,60,.28);
  transition: transform .04s ease, filter .15s ease;
}
.btn-cta:hover{ filter: brightness(0.96); }
.btn-cta:active{ transform: translateY(1px); }
.btn-cta:focus-visible{ outline: 3px solid #184b35; outline-offset: 2px; }

/* Make the header bar explicitly the new brand color */
.site-header{ background: #184b35; }

/* --- Fixes: button anchor color/decoration --- */
a.btn, a.btn-cta { color: #fff !important; text-decoration: none !important; }
a.btn-cta:hover { text-decoration: none !important; }


/* === Global background single source === */
/* 1) Single source of truth for the page background */
:root{ --bg: #fef6e9; }
body{ background: var(--bg); }

/* 2) Ensure the wave and the first section below it use the SAME color */
.header-wave .wave-fill{ fill: var(--bg) !important; }
.site-header + main,
.site-header + .container,
.hero{
  background-color: var(--bg) !important;
  background-image: none !important;   /* kill any gradient */
}

/* 3) Remove seam-causing effects from the header */
.site-header{ box-shadow: none; }      /* or soften it if you prefer */
/* If you still see a hairline from subpixel rendering, nudge the wave down 1px */
.header-wave{ position: relative; top: 1px; height: 36px; }
/* === Hover / Lift effects === */
.card, .info, .photo-card, .thumb, .btn, .site-nav a{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease;
  will-change: transform;
}
.card:hover, .info:hover, .photo-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.12);
}
.thumbs .thumb{ box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.thumbs .thumb:hover{ transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,.12); }

/* Buttons */
.btn-cta{ box-shadow: 0 10px 22px rgba(234,122,60,.28); }
.btn-cta:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(234,122,60,.34); }
.btn-cta:active{ transform: translateY(0); box-shadow: 0 6px 14px rgba(234,122,60,.24); }

/* Nav links */
.site-nav a{ padding:.35rem .55rem; border-radius: 10px; }
.site-nav a:hover{ background: rgba(255,255,255,.08); text-decoration: none; }