/* ═══════════════════════════════════════════════════════════
   KITILE AMAZING GRACE FARM — style.css
   Global styles, design tokens, and reusable components
   ═══════════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600&family=Jost:wght@200;300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  --earth:        #3D2B1F;
  --earth-light:  #5C3D2E;
  --earth-deep:   #231710;
  --soil:         #8B5E3C;
  --sand:         #C9A97A;
  --sand-light:   #DFC9A2;
  --cream:        #F5EDD8;
  --cream-dark:   #EDE3CC;
  --sage:         #6B7F5E;
  --sage-light:   #8FA080;
  --moss:         #3E5230;
  --moss-dark:    #2C3B22;
  --gold:         #C9962A;
  --gold-light:   #E8B84B;
  --gold-pale:    #F3D98A;
  --sky:          #8AADBC;
  --dusk:         #2B3A47;
  --dusk-dark:    #1A2530;
  --white:        #FDFAF4;
  --text-dark:    #1E1510;
  --text-mid:     #4A3728;

  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans:    'Jost', sans-serif;

  --shadow-sm:    0 4px 20px rgba(61,43,31,0.10);
  --shadow-md:    0 12px 40px rgba(61,43,31,0.18);
  --shadow-lg:    0 24px 80px rgba(61,43,31,0.25);
  --transition:   0.45s cubic-bezier(0.4,0,0.2,1);

  --nav-height:   80px;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--text-dark);
  overflow-x: hidden;
  line-height: 1.6;
}
img { display:block; max-width:100%; height:auto; }
a { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
ul, ol { list-style:none; }
input, textarea, select {
  font-family: inherit;
  -webkit-appearance:none;
  appearance:none;
}

/* ── PAGE SYSTEM ── */
.page { display:none; min-height:100vh; }
.page.active { display:block; animation: pageFadeIn 0.5s ease forwards; }

@keyframes pageFadeIn {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── PAGE TRANSITION OVERLAY ── */
#page-transition {
  position:fixed; inset:0; z-index:9999;
  background: var(--earth-deep);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0;
  transition: opacity 0.4s ease;
}
#page-transition.entering { opacity:1; pointer-events:all; }
.pt-logo {
  font-family: var(--font-display);
  font-size:2rem; font-style:italic;
  color: var(--gold-light);
  opacity:0; transform:scale(0.9);
  transition: all 0.4s ease 0.15s;
}
#page-transition.entering .pt-logo { opacity:1; transform:scale(1); }

/* ── REVEAL ANIMATIONS ── */
.reveal, .reveal-up { opacity:0; transform:translateY(45px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal-left        { opacity:0; transform:translateX(-45px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal-right       { opacity:0; transform:translateX(45px);  transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal-scale       { opacity:0; transform:scale(0.93);        transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.in, .reveal-up.in, .reveal-left.in, .reveal-right.in, .reveal-scale.in {
  opacity:1; transform:translate(0) scale(1);
}
.reveal-delay-1 { transition-delay:0.10s; }
.reveal-delay-2 { transition-delay:0.20s; }
.reveal-delay-3 { transition-delay:0.30s; }
.reveal-delay-4 { transition-delay:0.40s; }
.reveal-delay-5 { transition-delay:0.50s; }
.reveal-delay-6 { transition-delay:0.60s; }

/* ── TYPOGRAPHY UTILITIES ── */
.section-label {
  font-family: var(--font-sans);
  font-size:0.68rem; font-weight:300; letter-spacing:0.45em;
  text-transform:uppercase; color:var(--gold);
  display:block; margin-bottom:0.9rem;
}
.section-title {
  font-family: var(--font-display);
  font-size:clamp(2rem, 4.5vw, 3.8rem);
  font-weight:400; line-height:1.1; color:var(--earth);
}
.section-title em { font-style:italic; }
.section-title.light { color:var(--cream); }
.section-body {
  font-family: var(--font-serif);
  font-size:1.08rem; font-weight:300; line-height:1.9;
  color:var(--text-mid);
}
.section-body.light { color:rgba(245,237,216,0.75); }
.gold-rule { width:56px; height:1px; background:var(--gold); margin:1.2rem 0; }
.gold-rule.center { margin:1.2rem auto; }
.pull-quote {
  font-family: var(--font-display);
  font-size:clamp(1.2rem, 2.2vw, 1.7rem);
  font-style:italic; color:var(--earth-light);
  border-left:3px solid var(--gold);
  padding-left:1.6rem; line-height:1.45;
  margin:2rem 0;
}

/* ── BUTTONS ── */
.btn-gold {
  display:inline-block;
  font-family:var(--font-sans); font-size:0.75rem; font-weight:400;
  letter-spacing:0.22em; text-transform:uppercase;
  padding:0.95rem 2.6rem; background:var(--gold); color:var(--earth);
  border:1px solid var(--gold); transition:all var(--transition);
}
.btn-gold:hover { background:transparent; color:var(--gold-light); }
.btn-outline {
  display:inline-block;
  font-family:var(--font-sans); font-size:0.75rem; font-weight:400;
  letter-spacing:0.22em; text-transform:uppercase;
  padding:0.95rem 2.6rem; background:transparent; color:var(--cream);
  border:1px solid rgba(245,237,216,0.45); transition:all var(--transition);
}
.btn-outline:hover { border-color:var(--gold-light); color:var(--gold-light); }
.btn-outline-dark {
  display:inline-block;
  font-family:var(--font-sans); font-size:0.75rem; font-weight:400;
  letter-spacing:0.22em; text-transform:uppercase;
  padding:0.95rem 2.6rem; background:transparent; color:var(--earth);
  border:1px solid var(--earth); transition:all var(--transition);
}
.btn-outline-dark:hover { background:var(--earth); color:var(--cream); }
.btn-link {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--font-sans); font-size:0.72rem; font-weight:400;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--gold);
  cursor:pointer; transition:gap var(--transition);
  background:none; border:none;
}
.btn-link:hover { gap:0.9rem; }

/* ── VERSE BAND ── */
.verse-band {
  background:var(--earth-deep);
  padding:2.8rem 6rem;
  display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap;
}
.verse-cross { font-size:1.8rem; color:var(--gold); opacity:0.55; flex-shrink:0; }
.verse-band blockquote {
  font-family:var(--font-serif); font-size:clamp(0.92rem,1.8vw,1.18rem);
  font-style:italic; font-weight:300; color:var(--sand); line-height:1.7; text-align:center;
}
.verse-band cite {
  display:block; margin-top:0.5rem;
  font-family:var(--font-sans); font-size:0.68rem; letter-spacing:0.25em;
  text-transform:uppercase; font-style:normal; color:var(--gold); text-align:center;
}

/* ── HERO COMPONENTS ── */
.hero-section {
  height:100vh; min-height:680px;
  position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transform:scale(1.06); transition:transform 9s ease;
}
.hero-section.loaded .hero-bg { transform:scale(1); }
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(170deg,rgba(10,7,3,0.45) 0%,rgba(10,7,3,0.18) 50%,rgba(10,7,3,0.65) 100%);
}
.hero-content {
  position:relative; z-index:2; text-align:center; padding:0 2rem; max-width:980px;
}
.hero-eyebrow {
  font-family:var(--font-sans); font-size:0.7rem; font-weight:300; letter-spacing:0.45em;
  text-transform:uppercase; color:var(--gold-light); margin-bottom:1.4rem;
  opacity:0; animation:fadeUpIn 1s 0.4s forwards;
}
.hero-h1 {
  font-family:var(--font-display);
  font-size:clamp(3rem, 8.5vw, 7.5rem);
  font-weight:400; line-height:1.03; color:var(--cream); margin-bottom:1.2rem;
  opacity:0; animation:fadeUpIn 1s 0.65s forwards;
}
.hero-h1 em { font-style:italic; color:var(--gold-light); }
.hero-sub {
  font-family:var(--font-serif); font-size:clamp(1rem,2.2vw,1.5rem);
  font-style:italic; font-weight:300; color:rgba(245,237,216,0.8);
  margin-bottom:2.8rem; line-height:1.6;
  opacity:0; animation:fadeUpIn 1s 0.9s forwards;
}
.hero-ctas {
  display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap;
  opacity:0; animation:fadeUpIn 1s 1.1s forwards;
}
.hero-scroll {
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
  opacity:0; animation:fadeUpIn 1s 1.6s forwards;
}
.hero-scroll span {
  font-size:0.62rem; letter-spacing:0.35em; text-transform:uppercase; color:rgba(245,237,216,0.45);
}
.scroll-line { width:1px; height:52px; background:linear-gradient(to bottom, var(--gold), transparent); animation:scrollBlink 2s infinite; }

/* Inner page hero */
.page-hero {
  height:62vh; min-height:480px; position:relative; display:flex; align-items:flex-end; padding-bottom:5rem; overflow:hidden;
}
.page-hero .hero-bg { transform:scale(1); }
.page-hero-content { position:relative; z-index:2; padding:0 8rem; }
.breadcrumb {
  display:flex; align-items:center; gap:0.6rem;
  font-family:var(--font-sans); font-size:0.7rem; font-weight:300; letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(245,237,216,0.5); margin-bottom:1rem;
}
.breadcrumb span { color:var(--gold); }
.page-hero-title {
  font-family:var(--font-display); font-size:clamp(2.5rem, 6vw, 5.5rem);
  font-weight:400; color:var(--cream); line-height:1.05;
}
.page-hero-title em { font-style:italic; color:var(--gold-light); }

/* ── NEWSLETTER BANNER ── */
.newsletter-banner {
  background:var(--gold); padding:5rem 6rem;
  display:flex; align-items:center; justify-content:space-between; gap:3rem; flex-wrap:wrap;
}
.nb-text h3 {
  font-family:var(--font-display); font-size:2rem; font-weight:400; font-style:italic; color:var(--earth);
}
.nb-text p { font-family:var(--font-sans); font-size:0.85rem; font-weight:300; color:rgba(61,43,31,0.7); margin-top:0.4rem; }
.nb-form { display:flex; }
.nb-input {
  padding:0.9rem 1.5rem; width:320px;
  background:rgba(255,255,255,0.4); border:1px solid rgba(61,43,31,0.2); border-right:none;
  font-family:var(--font-sans); font-size:0.85rem; color:var(--earth); outline:none;
}
.nb-input::placeholder { color:rgba(61,43,31,0.5); }
.nb-submit {
  padding:0.9rem 1.8rem; background:var(--earth); color:var(--cream);
  font-family:var(--font-sans); font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
  transition:opacity 0.3s;
}
.nb-submit:hover { opacity:0.85; }

/* ── FOOTER ── */
.site-footer { background:var(--text-dark); padding:6rem 6rem 3rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:3rem; margin-bottom:5rem; }
.ft-logo { font-family:var(--font-display); font-size:1.7rem; font-style:italic; color:var(--gold-light); margin-bottom:1rem; }
.ft-tagline { font-family:var(--font-serif); font-size:0.95rem; font-style:italic; font-weight:300; color:var(--sand); line-height:1.7; margin-bottom:2rem; }
.ft-social { display:flex; gap:0.8rem; }
.ft-social-link {
  width:36px; height:36px; border:1px solid rgba(201,150,42,0.25);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-sans); font-size:0.72rem; color:var(--sand); transition:all 0.3s;
}
.ft-social-link:hover { border-color:var(--gold); color:var(--gold); background:rgba(201,150,42,0.08); }
.ft-col-title { font-family:var(--font-sans); font-size:0.68rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin-bottom:1.4rem; }
.ft-col-links { display:flex; flex-direction:column; gap:0.7rem; }
.ft-col-links a {
  font-family:var(--font-sans); font-size:0.84rem; font-weight:300; color:var(--sand);
  transition:all 0.3s; display:flex; align-items:center; gap:0.5rem;
}
.ft-col-links a:hover { color:var(--gold-light); padding-left:4px; }
.footer-divider { height:1px; background:rgba(201,150,42,0.1); margin-bottom:2.5rem; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-copy { font-family:var(--font-sans); font-size:0.75rem; font-weight:300; color:rgba(201,169,122,0.4); }
.footer-tagline-bottom { font-family:var(--font-serif); font-size:0.88rem; font-style:italic; color:rgba(201,169,122,0.35); }

/* ── ANIMATIONS ── */
@keyframes fadeUpIn {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes scrollBlink { 0%,100%{opacity:0.25;} 50%{opacity:1;} }
@keyframes pinPulse {
  0%,100%{ box-shadow:0 0 0 6px rgba(201,150,42,0.25),0 0 0 12px rgba(201,150,42,0.12); }
  50%    { box-shadow:0 0 0 10px rgba(201,150,42,0.35),0 0 0 20px rgba(201,150,42,0.08); }
}
@keyframes borderPulse {
  0%,100%{ border-color:rgba(201,150,42,0.3); }
  50%    { border-color:var(--gold); }
}

/* ── LIGHTBOX ── */
#lightbox {
  display:none; position:fixed; inset:0; z-index:9998;
  background:rgba(5,3,1,0.97); align-items:center; justify-content:center;
}
#lightbox.open { display:flex; }
#lb-img { max-width:90vw; max-height:85vh; object-fit:contain; box-shadow:0 0 80px rgba(0,0,0,0.5); }
.lb-close {
  position:absolute; top:2rem; right:2rem;
  font-size:2rem; color:var(--cream); cursor:pointer; transition:color 0.3s; line-height:1;
}
.lb-close:hover { color:var(--gold-light); }
.lb-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(201,150,42,0.15); border:1px solid rgba(201,150,42,0.3);
  color:var(--cream); font-size:1.5rem; cursor:pointer;
  width:50px; height:50px; display:flex; align-items:center; justify-content:center;
  transition:all 0.3s;
}
.lb-nav:hover { background:var(--gold); color:var(--earth); }
.lb-prev { left:1.5rem; }
.lb-next { right:1.5rem; }
.lb-caption {
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  font-family:var(--font-sans); font-size:0.75rem; letter-spacing:0.2em;
  text-transform:uppercase; color:rgba(245,237,216,0.5); white-space:nowrap;
}

/* ── MOBILE NAV OVERLAY ── */
.mob-nav {
  display:none; position:fixed; inset:0; z-index:997;
  background:rgba(15,9,4,0.98); backdrop-filter:blur(20px);
  flex-direction:column; align-items:center; justify-content:center; gap:0;
}
.mob-nav.open { display:flex; }
.mob-close {
  position:absolute; top:1.5rem; right:2rem;
  font-size:1.8rem; color:var(--cream); cursor:pointer; font-weight:200; line-height:1;
}
.mob-link {
  font-family:var(--font-display); font-size:clamp(1.8rem,5vw,3rem); font-style:italic;
  color:rgba(245,237,216,0.8); padding:0.6rem 0; cursor:pointer;
  transition:color 0.3s; border-bottom:1px solid rgba(201,150,42,0.1);
  width:80%; text-align:center;
}
.mob-link:hover { color:var(--gold-light); }
.mob-link:last-of-type { border-bottom:none; }

/* ── WHATSAPP BUTTON ── */
.wa-btn {
  display:inline-flex; align-items:center; gap:0.8rem;
  background:#25D366; padding:0.85rem 1.8rem;
  font-family:var(--font-sans); font-size:0.78rem; font-weight:400;
  letter-spacing:0.15em; text-transform:uppercase; color:white; transition:opacity 0.3s;
}
.wa-btn:hover { opacity:0.85; }

/* ── FORM FIELDS ── */
.form-field { margin-bottom:1rem; }
.form-field input, .form-field textarea, .form-field select {
  width:100%; background:rgba(255,255,255,0.055);
  border:1px solid rgba(201,150,42,0.22); padding:0.88rem 1.2rem;
  font-family:var(--font-sans); font-size:0.85rem; font-weight:300;
  color:var(--cream); outline:none; transition:border-color 0.3s;
}
.form-field input::placeholder, .form-field textarea::placeholder { color:rgba(201,169,122,0.4); }
.form-field input:focus, .form-field textarea:focus { border-color:var(--gold); }
.form-field textarea { resize:vertical; min-height:110px; }
.form-field select { cursor:pointer; }
.form-field select option { background:var(--earth-deep); color:var(--cream); }

.form-field-light input, .form-field-light textarea, .form-field-light select {
  background:white; border:1px solid rgba(61,43,31,0.15);
  border-bottom:2px solid rgba(201,150,42,0.3); color:var(--text-dark);
}
.form-field-light input::placeholder,
.form-field-light textarea::placeholder { color:rgba(74,55,40,0.4); }
.form-field-light input:focus,
.form-field-light textarea:focus { border-bottom-color:var(--gold); }

/* ── STATS STRIP ── */
.stats-strip {
  background:var(--earth);
  display:grid; grid-template-columns:repeat(5,1fr);
}
.stat-cell {
  padding:3.5rem 2rem; text-align:center;
  border-right:1px solid rgba(201,150,42,0.12); transition:background 0.3s;
}
.stat-cell:last-child { border-right:none; }
.stat-cell:hover { background:rgba(201,150,42,0.07); }
.stat-num { font-family:var(--font-display); font-size:3.2rem; font-weight:400; color:var(--gold-light); line-height:1; }
.stat-lbl { font-family:var(--font-sans); font-size:0.68rem; font-weight:300; letter-spacing:0.22em; text-transform:uppercase; color:var(--sand); margin-top:0.5rem; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width:1200px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
  .stats-strip { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px) {
  .page-hero-content { padding:0 2rem; }
  .verse-band { padding:2rem; }
  .newsletter-banner { padding:3rem 2rem; flex-direction:column; }
  .nb-form { flex-direction:column; }
  .nb-input { width:100%; border-right:1px solid rgba(61,43,31,0.2); }
  .stats-strip { grid-template-columns:1fr 1fr; }
  .stat-cell { padding:2.5rem 1rem; }
  .site-footer { padding:4rem 2rem 2rem; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:600px) {
  .stats-strip { grid-template-columns:1fr; }
  .page-hero { height:55vh; min-height:360px; padding-bottom:3rem; }
}