/* Sarah Grace Foundation – olive and gold theme with interactive sparkles */
/*
  Import high‑end fonts from Google.  Montserrat provides a crisp
  sans‑serif for body copy while Playfair Display lends an elegant
  serif look to headings.  If the fonts fail to load, the
  browser falls back to standard system fonts.
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap');

:root {
  --bg: #e5ead4;
  --bg-olive: #c7d4a0;
  --bg-olive-deep: #9cae68;
  --ink: #1d2317;
  --ink-soft: #404b33;
  --ink-muted: #657052;
  --accent: #ccb25a;
  --accent-bright: #f1da84;
  --accent-soft: rgba(204, 178, 90, 0.26);
  /* Use Montserrat for primary text and Playfair Display for
     titles. These fonts evoke a refined, luxury feel similar
     to high‑end jewellery brands. */
  --sans: "Montserrat", "Helvetica Neue", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Playfair Display", "Cormorant Garamond", "Georgia", serif;
  --radius-lg: 32px;
  --radius-md: 24px;
  --shadow-soft: 0 36px 70px rgba(32, 35, 29, 0.08);
  --shadow-light: 0 20px 36px rgba(32, 35, 29, 0.05);
  --transition: 0.35s ease;
}

/* ---------------------------------------------------------------------
   Custom additions for a modern, chic single‑page experience
   These styles define full viewport sections, scroll indicators,
   lightweight content cards, and refined typography tweaks to
   declutter the original design. They build on top of the existing
   variables and colors defined above.                                        
*/

/* Ensure each full section occupies the viewport and is centered */
.full-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  margin-bottom: 0;
  /* Fallback safe space so content doesn't sit under the fixed arrow */
  padding-bottom: 120px;
}

/* Prefer targeted padding only when a scroll arrow exists */
@supports selector(:has(*)) {
  .full-section:has(.scroll-arrow) {
    padding-bottom: clamp(110px, 14vh, 170px);
  }
  .section:has(.scroll-arrow) {
    padding-bottom: clamp(110px, 14vh, 170px);
  }
}

/* JS fallback for browsers without :has() */
.section.has-scroll-arrow, .full-section.has-scroll-arrow {
  padding-bottom: clamp(110px, 14vh, 170px);
}

/* Scroll arrow that guides users to the next page/section */
/* Position the scroll indicator fixed so it remains visible
   at the bottom of the viewport, regardless of content height. */
.scroll-arrow {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--accent);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 10;
}

.scroll-arrow:hover {
  transform: translateX(-50%) translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid currentColor;
}

/* Lightweight card to wrap content on secondary pages */
.content-card {
  max-width: 820px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.32);
  padding: 2.2rem;
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-light);
  color: var(--ink);
}

/* Refine typography for headings and remove decorative lines */
.hero-title,
.section-heading h2 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.hero-title::after,
.section-heading h2::after {
  display: none;
}

.subheading {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.7;
  background: radial-gradient(circle at 20% 10%, rgba(188, 204, 132, 0.45), transparent 60%),
              radial-gradient(circle at 80% 0%, rgba(153, 174, 104, 0.55), transparent 58%),
              linear-gradient(155deg, var(--bg-olive-deep) 0%, var(--bg-olive) 55%, var(--bg) 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body::before,
/* Removed the redundant body::after placeholder. The decorative overlay is defined below. */

body::before {
  background: radial-gradient(circle at 18% 20%, rgba(169, 186, 106, 0.65), transparent 52%),
              radial-gradient(circle at 78% 12%, rgba(137, 153, 89, 0.5), transparent 60%),
              radial-gradient(circle at 50% 82%, rgba(113, 132, 72, 0.46), transparent 64%);
  opacity: 0.9;
}

body::after {
  /*
    The overlay combines a subtle vine motif with the existing gold dust pattern.
    The vine artwork lives in assets/vine-pattern.png and repeats across the page.
    Additional radial gradients provide the shimmering dots from the original design.
  */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    url('assets/vine-pattern.png'),
    radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    radial-gradient(rgba(204, 178, 90, 0.22) 2px, transparent 2px);
  /* Size the vine pattern large for a refined feel, with smaller repeat for the dots */
  background-size:
    600px 600px,
    150px 150px,
    210px 210px;
  background-position:
    0 0,
    0 0,
    90px 70px;
  background-repeat:
    repeat,
    repeat,
    repeat;
  /* Overlay mode softens the vine image and integrates it with the gradient below */
  mix-blend-mode: overlay;
  opacity: 0.6;
  animation: drift 34s linear infinite;
  z-index: -4;
}

@keyframes drift {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(28px, -26px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes logo-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 14px rgba(241, 218, 132, 0.38));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 26px rgba(241, 218, 132, 0.62));
  }
}

/* Subtle pulse for floating word pairs below the logo */
@keyframes word-pulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    text-shadow: 0 0 0 rgba(241, 218, 132, 0.0);
  }
  50% {
    transform: translateY(-6px) scale(1.06);
    text-shadow: 0 0 14px rgba(241, 218, 132, 0.28);
  }
}

a {
  color: inherit;
  text-decoration: none;
  position: relative;
}

a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

a:hover::after,
a:focus-visible::after {
  transform: scaleX(1);
}

.sparkle-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -2;
  mix-blend-mode: screen;
  opacity: 0.9;
}

.top-nav {
  max-width: 1120px;
  margin: 0 auto;
  padding: 42px 28px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 5;
}

/* Brand text that appears persistently in the top left next to the logo.  Its
   uppercase lettering and generous letter‑spacing give it the stature of
   a luxury wordmark. */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

/* When the viewport is small, ensure the brand does not crowd out the
   navigation links by reducing its size slightly. */
@media (max-width: 480px) {
  .nav-brand {
    font-size: 0.8rem;
    letter-spacing: 0.22em;
  }
}

.brand {
  font-family: var(--serif);
  font-size: 1.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links {
  display: flex;
  gap: 26px;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.nav-links a {
  padding-bottom: 2px;
}

.nav-logo-wrapper {
  position: relative;
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-logo {
  width: 68px;
  height: 68px;
  object-fit: contain;
  animation: logo-pulse 4.8s ease-in-out infinite;
  will-change: transform, filter;
}

main {
  padding: 0 28px 120px;
}

.section {
  max-width: 1120px;
  margin: 0 auto 110px;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.section.visible {
  opacity: 1;
  transform: translateY(0);
}

.hero {
  display: grid;
  gap: 60px;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  align-items: end;
  margin-top: 40px;
}

/* Centered hero variant for homepage intro */
.hero.centered {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  align-items: center;
  gap: 28px;
}
.hero.centered .hero-text { max-width: 920px; }
.hero.centered .hero-actions { justify-content: center; }
.hero.centered .hero-summary { display: none; }

/* Prominent centered logo in hero */
.hero-logo {
  width: clamp(120px, 16vw, 200px);
  height: clamp(120px, 16vw, 200px);
  object-fit: contain;
  filter: drop-shadow(0 10px 28px rgba(32, 35, 29, 0.18));
  animation: logo-pulse 5.2s ease-in-out infinite;
}

/* A special variant of the logo used on the home page when
   displayed alone.  It scales larger to command attention at
   the centre of the viewport. */
.center-logo {
  width: clamp(360px, 60vw, 720px);
  height: clamp(360px, 60vw, 720px);
  object-fit: contain;
  filter: drop-shadow(0 12px 32px rgba(32, 35, 29, 0.16));
  animation: logo-pulse 6s ease-in-out infinite;
}

/* Raise the home hero a bit higher on the page */
#home.hero.centered {
  align-items: start;
  padding-top: clamp(32px, 12vh, 160px);
}

/* Floating phrases row under the logo */
.floating-phrases {
  margin-top: clamp(12px, 2.2vh, 24px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 2vw, 16px);
  pointer-events: none;
  z-index: 2;
}

.phrase {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(32, 35, 29, 0.14);
  box-shadow: 0 8px 18px rgba(32, 35, 29, 0.06);
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(0.78rem, 1.1vw, 0.98rem);
  color: var(--ink);
  opacity: 0.92;
  white-space: nowrap;
  animation: word-pulse 6.8s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* Gentle distinction across phrases via staggered delays and subtle tones */
.phrase-a { --delay: 0s; }
.phrase-b { --delay: 0.4s; background: rgba(232, 238, 214, 0.72); }
.phrase-c { --delay: 0.8s; }
.phrase-d { --delay: 1.2s; background: rgba(255, 255, 255, 0.58); }

@media (max-width: 900px) {
  /* Keep logo reasonably high but centered on smaller screens */
  #home.hero.centered { align-items: center; padding-top: clamp(24px, 10vh, 120px); }
}

.hero-kicker {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.8rem;
  color: var(--ink);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(32, 35, 29, 0.14);
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(32, 35, 29, 0.06);
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 4.8rem);
  line-height: 1.05;
  margin-bottom: 24px;
  color: var(--ink);
  position: relative;
}

.hero-title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -12px;
  width: 120px;
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), rgba(204,178,90,0));
  opacity: 0.6;
}

.lead {
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.primary-btn,
.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85em 1.9em;
  border-radius: 999px;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.primary-btn {
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent-bright) 80%);
  color: #2b2514;
  box-shadow: 0 20px 44px rgba(216, 185, 116, 0.38);
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 56px rgba(216, 185, 116, 0.48);
}

.ghost-btn {
  background: transparent;
  border-color: rgba(32, 35, 29, 0.24);
  color: var(--ink);
}

.ghost-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(32, 35, 29, 0.45);
}

.hero-summary {
  background: rgba(230, 235, 212, 0.82);
  border-radius: var(--radius-lg);
  padding: 36px;
  border: 1px solid rgba(32, 35, 29, 0.08);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.hero-summary h3 {
  font-size: 0.82rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 22px;
}

.highlight-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--ink-soft);
}

.highlight-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.highlight-list li::before {
  content: "✶";
  color: var(--accent);
  font-size: 0.9rem;
  margin-top: 2px;
}

.section-heading {
  max-width: 700px;
  margin-bottom: 46px;
}

.section-heading .kicker {
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--ink);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(32, 35, 29, 0.14);
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(32, 35, 29, 0.06);
}

.section-heading h2 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  margin-bottom: 22px;
  font-weight: 700;
  position: relative;
}

.section-heading h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 90px;
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), rgba(204,178,90,0));
  opacity: 0.55;
}

.section-heading p {
  color: var(--ink-soft);
}

.foundation-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.foundation-card {
  background: rgba(232, 238, 214, 0.86);
  border-radius: var(--radius-md);
  padding: 32px;
  border: 1px solid rgba(32, 35, 29, 0.08);
  box-shadow: var(--shadow-light);
  backdrop-filter: blur(10px);
  transition: transform var(--transition), box-shadow var(--transition);
}

.foundation-card h3 {
  font-family: var(--serif);
  font-weight: 700;
  position: relative;
  margin-top: 0;
}

.foundation-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 60px;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), rgba(204,178,90,0));
  opacity: 0.5;
}

.foundation-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px rgba(32, 35, 29, 0.12);
}

.narrative-card:hover {
  transform: none;
  box-shadow: var(--shadow-light);
}

.narrative-card {
  gap: 18px;
  line-height: 1.75;
}

.narrative-card p {
  margin: 0;
  color: var(--ink-soft);
}

.card-kicker {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-bottom: 12px;
}

.gold-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--ink-soft);
}

.gold-list li {
  position: relative;
  padding-left: 22px;
}

.gold-list li::before {
  content: "✺";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-bright);
  font-size: 0.75rem;
  transform: translateY(4px);
}

.foundation-card h3 {
  font-family: var(--serif);
  font-size: 1.6rem;
  margin-bottom: 12px;
}

.foundation-card p {
  color: var(--ink-soft);
  margin: 0;
}

.story-frame {
  display: grid;
  gap: 42px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}

/* -------------------------------------------------------------------
   Contact page layout
   The contact section uses a two‑column card that positions the
   invitation and the practical details side by side on wide screens
   and stacks them on narrow screens.  This layout evokes the feel of
   a high‑end brochure while keeping information easy to digest.  */

.contact-container {
  max-width: 920px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-light);
  padding: 3rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  color: var(--ink);
}

.contact-message {
  flex: 1;
  text-align: center;
}

.contact-message .hero-title {
  margin-bottom: 1rem;
}

.contact-message p {
  margin: 0 0 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.contact-info {
  flex: 1;
  text-align: center;
}

.contact-info h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 1.4rem 0 0.4rem;
  color: var(--ink-soft);
}

.contact-info p {
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: 1rem;
}

.contact-info a {
  color: var(--ink);
  text-decoration: underline;
  transition: color var(--transition);
}

.contact-info a:hover {
  color: var(--accent);
}

@media (min-width: 768px) {
  .contact-container {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
  .contact-message,
  .contact-info {
    text-align: left;
  }
}

.story-copy p {
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.pill-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pill-list li {
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(120, 137, 96, 0.18);
  color: var(--ink);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stat-card {
  background: rgba(229, 234, 211, 0.85);
  border: 1px solid rgba(32, 35, 29, 0.1);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-soft);
}

.stat-card h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.stat-card p {
  color: var(--ink-soft);
  margin: 0 0 16px;
}

.stat-card p:last-child {
  margin-bottom: 0;
}

.stat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stat-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
}

.stat-value {
  font-family: var(--serif);
  font-size: 1.8rem;
  color: var(--ink);
}

.quote-card {
  background: rgba(234, 238, 217, 0.86);
  border-radius: var(--radius-lg);
  padding: 60px;
  text-align: center;
  border: 1px solid rgba(32, 35, 29, 0.1);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}

.quote-card .mark {
  font-family: var(--serif);
  font-size: 4rem;
  color: rgba(216, 185, 116, 0.42);
}

.quote-card blockquote {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  margin: 18px 0;
  color: var(--ink);
}

.quote-card cite {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  color: var(--ink-muted);
}

.cta-card {
  background: rgba(230, 236, 214, 0.88);
  border-radius: var(--radius-lg);
  padding: 56px;
  text-align: center;
  border: 1px solid rgba(216, 185, 116, 0.26);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
}

.cta-card h2 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: 18px;
}

.cta-card p {
  color: var(--ink-soft);
  margin-bottom: 28px;
}

/* Slogan quote card for homepage */
.slogan-card {
  background: rgba(234, 238, 217, 0.92);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
  border: 1px solid rgba(32, 35, 29, 0.12);
  box-shadow: var(--shadow-soft);
}
.slogan-card h3 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  margin: 0 0 10px;
}
.slogan-card p { color: var(--ink-soft); margin: 0; }

.contact-layout {
  display: grid;
  gap: 42px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}

.contact-details p {
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.contact-card {
  background: rgba(232, 238, 214, 0.9);
  border-radius: var(--radius-md);
  padding: 32px;
  border: 1px solid rgba(32, 35, 29, 0.12);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}

/* Quick contact info card */
.quick-contact {
  display: grid;
  gap: 10px;
}
.quick-contact .label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
}
.quick-contact .value {
  font-family: var(--serif);
  font-size: 1.2rem;
}

#contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#contact-form input,
#contact-form textarea {
  border: 1px solid rgba(32, 35, 29, 0.18);
  border-radius: 18px;
  padding: 0.95em 1.15em;
  background: rgba(255, 255, 255, 0.92);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border var(--transition), box-shadow var(--transition);
}

#contact-form input:focus,
#contact-form textarea:focus {
  outline: none;
  border-color: rgba(216, 185, 116, 0.6);
  box-shadow: 0 0 0 3px rgba(216, 185, 116, 0.25);
}

#contact-form button {
  border: none;
  cursor: pointer;
}

.form-status {
  font-size: 0.88rem;
  color: var(--ink-muted);
}

.form-status.success {
  color: var(--ink);
}

.form-status.error {
  color: #b46363;
}

footer {
  text-align: center;
  padding: 60px 24px 80px;
  color: var(--ink-muted);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .top-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .nav-right {
    width: 100%;
    justify-content: space-between;
  }

  .nav-links {
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.85rem;
  }

  .nav-logo-wrapper {
    width: 64px;
    height: 64px;
  }

  .nav-logo {
    width: 58px;
    height: 58px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero.centered { gap: 22px; }
  .hero.centered .hero-title::after { bottom: -10px; }

  .scroll-arrow { bottom: calc(18px + env(safe-area-inset-bottom)); }

  .hero-summary {
    order: -1;
  }

  .section {
    margin-bottom: 90px;
  }

  .quote-card,
  .cta-card {
    padding: 42px 32px;
  }
}

@media (max-width: 560px) {
  main {
    padding-bottom: 90px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .primary-btn,
  .ghost-btn {
    width: 100%;
  }

  .top-nav {
    padding-top: 28px;
  }

  .nav-right {
    flex-direction: row;
    align-items: center;
  }

  .scroll-arrow { bottom: calc(14px + env(safe-area-inset-bottom)); }
}