/* === Variables === */
:root {
  --sage: #7A9E7E;
  --sage-dark: #5C7E60;
  --sage-light: #E8F0E9;
  --gold: #C9A84C;
  --cream: #FDF8F0;
  --cream-dark: #F5EDE0;
  --gold: #D4A84B;
  --gold-light: #F5E6C8;
  --blue: #3A8FC2; /* from their logo */
  --blue-light: #E8F2F8;
  --text: #2D3228;
  --text-light: #5A6155;
  --white: #FFFFFF;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 4px 24px rgba(45,50,40,0.08);
  --shadow-lg: 0 8px 40px rgba(45,50,40,0.12);
  --transition: 0.3s ease;
}

/* === Reset === */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family:'Inter',sans-serif; color:var(--text); background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--sage-dark); text-decoration:none; }
img { max-width:100%; display:block; }
ul { list-style:none; }

/* === Utility === */
.container { max-width:1120px; margin:0 auto; padding:0 1.5rem; }
.accent { color:var(--gold); }
.accent-light { color:var(--gold-light); }

/* === Animate on scroll === */
.anim { opacity:0; transform:translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.anim.visible { opacity:1; transform:translateY(0); }
.anim:nth-child(2) { transition-delay:0.1s; }
.anim:nth-child(3) { transition-delay:0.15s; }
.anim:nth-child(4) { transition-delay:0.2s; }
.anim:nth-child(5) { transition-delay:0.25s; }
.anim:nth-child(6) { transition-delay:0.3s; }

/* === Buttons === */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.75rem; border-radius:50px; font-weight:600; font-size:1rem; transition:var(--transition); cursor:pointer; border:2px solid transparent; text-align:center; }
.btn-primary { background:var(--sage); color:var(--white); border-color:var(--sage); }
.btn-primary:hover { background:var(--sage-dark); border-color:var(--sage-dark); transform:translateY(-2px); box-shadow:0 4px 16px rgba(92,126,96,0.3); }
.btn-outline-light { background:rgba(255,255,255,0.15); color:var(--white); border-color:var(--white); backdrop-filter:blur(4px); }
.btn-outline-light:hover { background:var(--white); color:var(--text); }
.btn-sm { padding:.55rem 1.25rem; font-size:.9rem; }

/* === Nav === */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:1rem 0; transition:var(--transition); }
.nav.scrolled { background:rgba(253,248,240,0.97); backdrop-filter:blur(12px); box-shadow:var(--shadow); padding:.65rem 0; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; }
.nav-logo-img { height:80px; width:auto; transition:var(--transition); }
.nav.scrolled .nav-logo-img { height:60px; }
.nav-links { display:flex; align-items:center; gap:2rem; }
.nav-links a { font-weight:500; font-size:.95rem; color:var(--white); transition:var(--transition); text-shadow:0 1px 3px rgba(0,0,0,0.3); }
.nav.scrolled .nav-links a { color:var(--text); text-shadow:none; }
.nav-links a:hover { color:var(--gold); }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--white); border-radius:2px; transition:var(--transition); }
.nav.scrolled .nav-toggle span { background:var(--text); }

/* === Hero === */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; }
.hero-bg-img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(35,45,35,0.55) 0%, rgba(35,45,35,0.7) 100%); }
.hero-content { position:relative; z-index:2; text-align:center; padding:6rem 0 4rem; }
.hero-badge { display:inline-block; background:rgba(255,255,255,0.15); backdrop-filter:blur(8px); padding:.5rem 1.25rem; border-radius:50px; font-size:.85rem; font-weight:600; color:var(--white); margin-bottom:1.5rem; border:1px solid rgba(255,255,255,0.2); }
.hero h1 { font-family:'Playfair Display',serif; font-size:3.75rem; line-height:1.15; margin-bottom:1.25rem; color:var(--white); }
.hero-sub { font-size:1.15rem; color:rgba(255,255,255,0.85); max-width:560px; margin:0 auto 2.5rem; }
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* === Sections === */
.section { padding:5rem 0; }
.section-alt { background:var(--white); }
.section-header { text-align:center; max-width:640px; margin:0 auto 3rem; }
.section-tag { font-size:.85rem; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:.5rem; }
.section-header h2 { font-family:'Playfair Display',serif; font-size:2.25rem; margin-bottom:.75rem; }
.section-desc { color:var(--text-light); font-size:1.05rem; }

/* === About === */
.about-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:3rem; align-items:center; }
.about-img-wrapper { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); }
.about-img { width:100%; height:100%; object-fit:cover; object-position:center top; aspect-ratio:4/5; }
.about-cards-col { display:flex; flex-direction:column; gap:1.5rem; }
.about-card { display:flex; gap:1.25rem; align-items:flex-start; background:var(--white); padding:1.75rem; border-radius:var(--radius); box-shadow:var(--shadow); transition:var(--transition); }
.about-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.about-icon { width:52px; height:52px; min-width:52px; background:var(--sage-light); border-radius:12px; display:flex; align-items:center; justify-content:center; }
.about-icon-img { width:28px; height:28px; object-fit:contain; filter:brightness(0) saturate(100%) invert(33%) sepia(15%) saturate(1000%) hue-rotate(90deg); }
.about-card h3 { font-family:'Playfair Display',serif; font-size:1.15rem; margin-bottom:.35rem; }
.about-card p { color:var(--text-light); font-size:.92rem; line-height:1.55; }

/* === Gallery Strip === */
.gallery-strip { background:var(--sage-dark); padding:0; overflow:hidden; }
.gallery-strip-inner { display:grid; grid-template-columns:repeat(3,1fr); }
.gallery-item { overflow:hidden; aspect-ratio:16/10; }
.gallery-item img { width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform 0.6s ease; }
.gallery-item:hover img { transform:scale(1.05); }

/* === Pricing === */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:3rem; }
.price-card { background:var(--cream); border:2px solid var(--sage-light); border-radius:var(--radius); padding:2rem; text-align:center; transition:var(--transition); }
.price-card:hover { border-color:var(--sage); transform:translateY(-3px); box-shadow:var(--shadow); }
.price-card-accent { background:var(--sage-light); border-color:var(--sage); }
.price-size { font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:600; margin-bottom:.35rem; }
.price-examples { font-size:.85rem; color:var(--text-light); margin-bottom:1rem; min-height:2.4em; }
.price-amount { font-size:2.5rem; font-weight:700; color:var(--sage-dark); }
.price-amount span { font-size:1.25rem; }

/* Extras */
.extras-section { background:var(--cream); border-radius:var(--radius); padding:2.5rem; }
.extras-section h3 { font-family:'Playfair Display',serif; text-align:center; margin-bottom:1.5rem; font-size:1.35rem; }
.extras-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.extra-item { display:flex; justify-content:space-between; padding:.75rem 1rem; background:var(--white); border-radius:var(--radius-sm); font-size:.95rem; }
.extra-item span:last-child { font-weight:600; color:var(--sage-dark); }

/* === Specialty === */
.specialty-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:3rem; }
.specialty-card { background:var(--white); border-radius:var(--radius); padding:2rem; border-left:4px solid var(--gold); box-shadow:var(--shadow); transition:var(--transition); }
.specialty-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.specialty-card h4 { font-family:'Playfair Display',serif; font-size:1.15rem; margin-bottom:.5rem; }
.specialty-card p { font-size:.9rem; color:var(--text-light); margin-bottom:.75rem; }
.specialty-price { font-size:1.5rem; font-weight:700; color:var(--sage-dark); }

/* Policies */
.policies-box { background:var(--gold-light); border-radius:var(--radius); padding:2.5rem; }
.policies-box h3 { font-family:'Playfair Display',serif; margin-bottom:1rem; font-size:1.2rem; }
.policies-box ul { display:grid; gap:.65rem; }
.policies-box li { padding-left:1.25rem; position:relative; font-size:.95rem; color:var(--text-light); }
.policies-box li::before { content:'•'; position:absolute; left:0; color:var(--gold); font-weight:bold; }

/* === Contact === */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.contact-block { margin-bottom:1.75rem; }
.contact-block h4 { font-size:1rem; margin-bottom:.35rem; }
.contact-block a { color:var(--sage-dark); font-weight:500; }
.contact-block a:hover { text-decoration:underline; }
.hours-table { border-collapse:collapse; font-size:.95rem; }
.hours-table td { padding:.3rem 1rem .3rem 0; }
.hours-table tr td:last-child { font-weight:500; }
.contact-map { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.map-img { width:100%; height:auto; display:block; border-radius:var(--radius); transition:var(--transition); }
.map-img:hover { box-shadow:var(--shadow-lg); transform:scale(1.01); }

/* === Footer === */
.footer { background:var(--text); color:rgba(255,255,255,0.6); padding:2.5rem 0; text-align:center; }
.footer-inner { display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.footer-logo-img { height:50px; width:auto; filter:brightness(0) invert(1); opacity:0.8; }

/* === Mobile === */
@media (max-width:768px) {
  .nav-toggle { display:flex; }
  .nav-links { position:fixed; top:0; right:-100%; width:75%; height:100vh; background:var(--cream); flex-direction:column; padding:5rem 2rem 2rem; gap:1.5rem; transition:var(--transition); box-shadow:var(--shadow-lg); }
  .nav-links.open { right:0; }
  .nav-links a { color:var(--text) !important; text-shadow:none !important; }
  .hero h1 { font-size:2.25rem; }
  .hero-content { padding:8rem 0 4rem; }
  .about-layout { grid-template-columns:1fr; }
  .about-img { aspect-ratio:16/10; }
  .gallery-strip-inner { grid-template-columns:1fr; }
  .gallery-item { aspect-ratio:16/9; }
  .pricing-grid, .specialty-grid { grid-template-columns:1fr; }
  .extras-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
}
/* === Awards === */
.awards-strip { background: linear-gradient(135deg, var(--cream) 0%, var(--sage-light) 100%); padding: 3rem 0; }
.awards-inner { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; }
.award-badge {
  position: relative;
  background: white;
  border: 2px solid var(--gold, #C9A84C);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  min-width: 220px;
  transition: transform .3s;
}
.award-badge:hover { transform: translateY(-4px); }
.award-ribbon {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 24px;
  background: linear-gradient(135deg, #C9A84C, #E8D48B);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(201,168,76,.3);
}
.award-ribbon::after {
  content: '★';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  color: white; font-size: .85rem;
}
.award-icon { font-size: 2.5rem; margin: .5rem 0; }
.award-text { display: flex; flex-direction: column; gap: .15rem; }
.award-title { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700; color: var(--charcoal); }
.award-cat { font-size: .95rem; color: var(--sage-dark); font-weight: 600; }
.award-source { font-size: .8rem; color: #888; letter-spacing: .5px; text-transform: uppercase; margin-top: .25rem; }

.about-card-owner { border-left: 4px solid var(--sage); background: var(--sage-light); }
.about-card-owner .about-icon { font-size: 2rem; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; }

@media (min-width:769px) and (max-width:1024px) {
  .about-layout { grid-template-columns:1fr; }
  .about-img { aspect-ratio:16/9; }
  .pricing-grid, .specialty-grid { grid-template-columns:repeat(2,1fr); }
  .extras-grid { grid-template-columns:repeat(2,1fr); }
  .gallery-strip-inner { grid-template-columns:repeat(3,1fr); }
}
