/* ==========================================================================
   1. CORE RESET & BASE
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-serif); background: var(--color-background-tertiary, #f5f5f5); line-height: var(--line-height-body); letter-spacing: var(--letter-spacing-body); }
.site { max-width: 900px; margin: 0 auto; border: 0.5px solid var(--color-border-tertiary); border-top: none; border-bottom: none; background: #fff; }
:root {
  --motion-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --motion-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Font Stack - Intentional Serif Aesthetic */
  --font-serif: Georgia, "Times New Roman", Times, serif;

  /* Readability Tuning for Serif Body Text */
  --line-height-body: 1.7;
  --letter-spacing-body: 0.01em;

  /* Color System */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #1a1a1a;
  --color-text-tertiary: #1a1a1a;
  --color-background-primary: #ffffff;
  --color-background-secondary: #ffffff;
  --color-background-tertiary: #f5f5f5;
  --color-border-secondary: rgba(0,0,0,0.15);
  --color-border-tertiary: #ffffff;
}

/* ==========================================================================
   2. SHARED COMPONENTS (NAV, FOOTER, HEADER, BUTTONS)
   ========================================================================== */
nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; border-bottom: 0.5px solid var(--color-border-tertiary); background: #ffffff; position: sticky; top: 0; z-index: 10; transition: padding var(--motion-smooth), background-color var(--motion-smooth), box-shadow var(--motion-smooth); position: relative; }
.nav-scrolled { padding: 6px 40px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 12px rgba(0,0,0,0.03); backdrop-filter: blur(8px); }
.nav-logo { font-size: 15px; font-weight: 500; color: var(--color-text-primary); letter-spacing: -0.3px; }
.nav-logo span { color: #3B6D11; }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { font-size: 14px; color: var(--color-text-secondary); text-decoration: none; }
.nav-links .active { color: var(--color-text-primary); font-weight: 500; }
.nav-cta { background: #3B6D11; color: #fff; font-size: 13px; font-weight: 500; padding: 9px 18px; border-radius: 8px; text-decoration: none; transition: background var(--motion-smooth), transform var(--motion-smooth), box-shadow var(--motion-smooth); }
.nav-cta:hover { background: #27500A; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(59, 109, 17, 0.18); }
.nav-cta:active { transform: scale(0.98); }
.nav-hamburger { display: none; }

footer { border-top: 0.5px solid var(--color-border-tertiary); padding: 28px 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background: var(--color-background-secondary); }
.footer-logo { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); }
.footer-logo span { color: #3B6D11; }
.footer-links { display: flex; gap: 24px; list-style: none; }
.footer-links a { font-size: 12px; color: var(--color-text-tertiary); text-decoration: none; }
.footer-copy { font-size: 12px; color: var(--color-text-tertiary); }
.footer-contact { width: 100%; text-align: center; font-size: 12px; color: var(--color-text-tertiary); padding-top: 14px; border-top: 0.5px solid var(--color-border-tertiary); margin-top: 14px; }
.footer-contact a { color: inherit; text-decoration: none; }
.footer-contact a:hover { color: #3B6D11; }

.modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,0.4); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--motion-smooth), visibility var(--motion-smooth); }
.modal-overlay.modal-open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal-content { position: relative; width: min(100%, 480px); max-height: calc(100vh - 48px); overflow-y: auto; background: #fff; border: 0.5px solid var(--color-border-tertiary); border-radius: 12px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,0.16); }
.modal-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: none; background: transparent; color: var(--color-text-secondary); font-size: 26px; line-height: 1; cursor: pointer; }
.modal-close:hover { color: var(--color-text-primary); }
.modal-title { font-size: 24px; font-weight: 500; color: var(--color-text-primary); letter-spacing: -0.4px; margin-bottom: 16px; padding-right: 36px; }
.modal-list { padding-left: 18px; display: grid; gap: 12px; }
.modal-list li { font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; }

.page-header { padding: 56px 40px 28px; border-bottom: 0.5px solid var(--color-border-tertiary); }
.page-eyebrow { font-size: 11px; font-weight: 500; color: #3B6D11; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 14px; }
.page-headline { font-size: 34px; font-weight: 500; line-height: 1.2; letter-spacing: -0.7px; max-width: 560px; margin-bottom: 16px; color: var(--color-text-primary); }
.page-sub { font-size: 16px; color: var(--color-text-secondary); line-height: 1.7; max-width: 520px; }

.btn-primary { background: #3B6D11; color: #fff; font-size: 14px; font-weight: 500; padding: 13px 26px; border-radius: 8px; text-decoration: none; display: inline-block; border: none; cursor: pointer; transition: background var(--motion-smooth), transform var(--motion-smooth), box-shadow var(--motion-smooth); }
.btn-primary:hover { background: #27500A; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(59, 109, 17, 0.18); }
.btn-primary:active { transform: scale(0.98); }
.btn-ghost { font-size: 14px; color: var(--color-text-secondary); text-decoration: none; padding: 13px 0; display: inline-block; transition: color var(--motion-smooth), transform var(--motion-smooth); }
.btn-ghost:hover { color: #3B6D11; transform: translateX(2px); }
.fade-in-section { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.fade-in-section.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   3. HOME PAGE SPECIFIC
   ========================================================================== */
.hero { padding: 72px 40px 60px; background: var(--color-background-primary); display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: center; }
.hero-eyebrow { font-size: 12px; font-weight: 500; color: #3B6D11; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 14px; }
.hero-headline { font-size: 38px; font-weight: 500; line-height: 1.18; letter-spacing: -0.8px; color: var(--color-text-primary); margin-bottom: 18px; }
.hero-sub { font-size: 16px; color: var(--color-text-secondary); line-height: 1.65; margin-bottom: 32px; max-width: 420px; }
.hero-actions { display: flex; align-items: center; gap: 16px; }

.hero-card { background: #D5F0C0; border-radius: 12px; padding: 28px; border: 0.5px solid #97C459; transition: transform var(--motion-spring), box-shadow var(--motion-spring); }
.hero-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(59, 109, 17, 0.14); }
.hero-stat { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.hero-stat:last-child { margin-bottom: 0; }
.hero-stat-icon { width: 36px; height: 36px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0.5px solid #C0DD97; }
.hero-stat-icon i { font-size: 17px; color: #3B6D11; }
.hero-stat-val { font-size: 14px; font-weight: 500; color: #27500A; line-height: 1.3; }
.hero-stat-sub { font-size: 12px; color: #3B6D11; margin-top: 1px; }
.hero-divider { height: 0.5px; background: #C0DD97; margin: 14px 0; }

.about-section { padding: 60px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; border-bottom: 0.5px solid var(--color-border-tertiary); }
.about-eyebrow { font-size: 11px; font-weight: 500; color: #3B6D11; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 12px; }
.about-heading { font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.4px; margin-bottom: 16px; }
.about-body { font-size: 15px; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 24px; }
.about-link { font-size: 14px; color: #3B6D11; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.about-img-placeholder { background: #D5F0C0; border-radius: 12px; aspect-ratio: 4/3; position: relative; overflow: hidden; border: 0.5px solid #C0DD97; }
.about-img-placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.info-bar { background: var(--color-background-secondary); border-bottom: 0.5px solid var(--color-border-tertiary); padding: 36px 40px; }
.info-bar-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border-tertiary); }
.info-col { background: var(--color-background-secondary); padding: 24px 28px; }
.info-col:first-child { border-radius: 8px 0 0 8px; padding-left: 0; }
.info-col:last-child { border-radius: 0 8px 8px 0; padding-right: 0; }
.info-col-label { font-size: 11px; font-weight: 500; color: var(--color-text-tertiary); letter-spacing: .7px; text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.info-col-label i { font-size: 13px; }
.info-col-val { font-size: 18px; font-weight: 500; color: var(--color-text-primary); line-height: 1.25; margin-bottom: 4px; }
.info-col-note { font-size: 12px; color: var(--color-text-secondary); }

.cta-section { padding: 64px 40px; text-align: center; background: var(--color-background-primary); }
.cta-badge { display: inline-flex; align-items: center; gap: 6px; background: #EAF3DE; border: 0.5px solid #C0DD97; border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 500; color: #27500A; margin-bottom: 20px; }
.cta-badge i { font-size: 12px; color: #3B6D11; }
.cta-heading { font-size: 28px; font-weight: 500; letter-spacing: -0.5px; margin-bottom: 12px; }
.cta-sub { font-size: 15px; color: var(--color-text-secondary); line-height: 1.65; max-width: 460px; margin: 0 auto 32px; }
.cta-steps { display: flex; justify-content: center; margin-bottom: 36px; }
.cta-step { display: flex; align-items: center; }
.cta-step-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 20px; }
.cta-step-num { width: 28px; height: 28px; border-radius: 50%; background: #D5F0C0; border: 0.5px solid #97C459; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: #27500A; }
.cta-step-label { font-size: 12px; color: var(--color-text-secondary); text-align: center; line-height: 1.4; max-width: 80px; }
.cta-step-arrow { font-size: 14px; color: var(--color-border-secondary); margin-top: -18px; }

/* ==========================================================================
   4. ABOUT PAGE SPECIFIC
   ========================================================================== */
.story-section { padding: 60px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; border-bottom: 0.5px solid var(--color-border-tertiary); }
.story-img { background: #D5F0C0; border-radius: 12px; aspect-ratio: 3/4; position: relative; overflow: hidden; border: 0.5px solid #C0DD97; }
.story-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;  object-position: left; }
.story-img i { font-size: 36px; color: #97C459; transition: transform var(--motion-spring); }
.story-img:hover i { transform: scale(1.15); }
.story-img span { font-size: 12px; color: #3B6D11; }
.story-eyebrow { font-size: 11px; font-weight: 500; color: #3B6D11; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 14px; }
.story-heading { font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -0.4px; margin-bottom: 18px; }
.story-body { font-size: 15px; color: var(--color-text-secondary); line-height: 1.75; margin-bottom: 18px; }

.philosophy-section { padding: 60px 40px; background: #D5F0C0; border-bottom: 0.5px solid #97C459; }
.phil-label { font-size: 11px; font-weight: 500; color: #3B6D11; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 32px; }
.phil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.phil-card { background: #fff; border-radius: 12px; padding: 24px; border: 0.5px solid #C0DD97; transition: transform var(--motion-spring), box-shadow var(--motion-spring); }
.phil-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(59, 109, 17, 0.12); }
.phil-num { font-size: 11px; font-weight: 500; color: #97C459; letter-spacing: .5px; margin-bottom: 12px; }
.phil-title { font-size: 15px; font-weight: 500; color: #27500A; line-height: 1.3; margin-bottom: 10px; }
.phil-body { font-size: 13px; color: #3B6D11; line-height: 1.65; }

.day-section { padding: 60px 40px; border-bottom: 0.5px solid var(--color-border-tertiary); }
.day-eyebrow { font-size: 11px; font-weight: 500; color: #3B6D11; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 14px; }
.day-heading { font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -0.4px; margin-bottom: 32px; max-width: 480px; }
.day-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.day-item { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--color-background-secondary); border-radius: 12px; transition: transform var(--motion-spring), box-shadow var(--motion-spring), background var(--motion-spring); }
.day-item:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(59, 109, 17, 0.1); }
.day-icon { width: 36px; height: 36px; border-radius: 8px; background: #EAF3DE; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0.5px solid #C0DD97; }
.day-icon i { font-size: 17px; color: #3B6D11; }
.day-item-title { font-size: 14px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 4px; }
.day-item-body { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }

/* ==========================================================================
   5. GALLERY PAGE SPECIFIC
   ========================================================================== */
.gallery-section { padding: 48px 40px 56px; border-bottom: 0.5px solid var(--color-border-tertiary); }
.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; gap: 12px; grid-template-areas: "hero hero small-a txt-a" "hero hero small-b small-c" "wide-a wide-a txt-b small-d" "small-e small-f txt-c small-d" "small-g small-f small-h small-h"; }
.tile { border-radius: 12px; overflow: hidden; position: relative; }
.tile-photo { background: #D5F0C0; border: 0.5px solid #C0DD97; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; }
.tile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-photo i { font-size: 28px; color: #97C459; transition: transform var(--motion-spring); }
.tile-photo:hover i { transform: scale(1.15); }
.tile-photo .tile-label { font-size: 11px; color: #3B6D11; font-weight: 500; text-align: center; line-height: 1.4; max-width: 80%; }

.tile-hero { grid-area: hero; min-height: 340px; }
.tile-wide-a { grid-area: wide-a; min-height: 160px; }
.tile-small-a { grid-area: small-a; min-height: 160px; }
.tile-small-b { grid-area: small-b; min-height: 160px; }
.tile-small-c { grid-area: small-c; min-height: 160px; }
.tile-small-d { grid-area: small-d; min-height: 160px; }
.tile-small-e { grid-area: small-e; min-height: 160px; }
.tile-small-f { grid-area: small-f; min-height: 160px; }
.tile-small-g { grid-area: small-g; min-height: 160px; }
.tile-small-h { grid-area: small-h; min-height: 160px; }

.tile-text { display: flex; flex-direction: column; justify-content: center; padding: 24px; border-radius: 12px; border: 0.5px solid #C0DD97; min-height: 160px; }
.tile-txt-a { grid-area: txt-a; background: #D5F0C0; }
.tile-txt-b { grid-area: txt-b; background: #EAF3DE; border-color: #C0DD97; }
.tile-txt-c { grid-area: txt-c; background: #27500A; }

.tile-text .txt-icon { font-size: 20px; color: #3B6D11; margin-bottom: 12px; }
.tile-txt-c .txt-icon { color: #97C459; }
.tile-text .txt-heading { font-size: 15px; font-weight: 500; color: #27500A; line-height: 1.3; margin-bottom: 6px; }
.tile-txt-c .txt-heading { color: #D5F0C0; }
.tile-text .txt-body { font-size: 12px; color: #3B6D11; line-height: 1.6; }
.tile-txt-c .txt-body { color: #97C459; }

.gallery-note { margin-top: 20px; font-size: 12px; color: var(--color-text-tertiary); line-height: 1.6; display: flex; align-items: flex-start; gap: 6px; }
.gallery-note i { font-size: 13px; margin-top: 1px; flex-shrink: 0; }

.ig-section { padding: 56px 40px; text-align: center; border-top: 0.5px solid var(--color-border-tertiary); background: var(--color-background-secondary); }
.ig-eyebrow { font-size: 11px; font-weight: 500; color: #3B6D11; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 14px; }
.ig-heading { font-size: 24px; font-weight: 500; letter-spacing: -0.4px; margin-bottom: 12px; }
.ig-sub { font-size: 15px; color: var(--color-text-secondary); line-height: 1.65; max-width: 400px; margin: 0 auto 28px; }
.ig-btn { display: inline-flex; align-items: center; gap: 10px; background: #3B6D11; color: #fff; font-size: 14px; font-weight: 500; padding: 13px 24px; border-radius: 8px; text-decoration: none; transition: background var(--motion-smooth), transform var(--motion-smooth), box-shadow var(--motion-smooth); }
.ig-btn:hover { background: #27500A; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(59, 109, 17, 0.18); }
.ig-btn:active { transform: scale(0.98); }
.ig-btn i { font-size: 18px; }

/* ==========================================================================
   6. CONTACT PAGE SPECIFIC
   ========================================================================== */
.contact-layout { display: grid; grid-template-columns: 1fr 300px; gap: 0; border-bottom: 0.5px solid var(--color-border-tertiary); }
.form-section { padding: 0px 40px; border-right: 0.5px solid var(--color-border-tertiary); }
.form-group { margin-bottom: 22px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 7px; }
.form-group label .req { color: #3B6D11; margin-left: 2px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; font-family: "Times New Roman", Times, serif; font-size: 14px; color: var(--color-text-primary); background: var(--color-background-primary); border: 0.5px solid var(--color-border-secondary, rgba(0,0,0,0.3)); border-radius: 8px; padding: 10px 14px; outline: none; transition: border-color 0.15s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #3B6D11; box-shadow: 0 0 0 3px rgba(59,109,17,0.1); }

/* Error state styling */
.form-group--error input, .form-group--error select, .form-group--error textarea { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1); }
.form-group--error input:focus, .form-group--error select:focus, .form-group--error textarea:focus { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15); }

.form-error { font-size: 12px; color: #C0392B; margin-top: 5px; display: none; }
.form-error[aria-live="polite"]:not([hidden]) { display: block; }
.form-group textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233B6D11' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.char-counter { font-size: 12px; color: var(--color-text-tertiary); text-align: right; margin-top: 5px; }

.radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-option { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0.5px solid var(--color-border-secondary, rgba(0,0,0,0.3)); border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--color-text-secondary); transition: border-color 0.15s, background 0.15s; }
.radio-option input[type="radio"] { display: none; }
.radio-option.selected { border-color: #3B6D11; background: #EAF3DE; color: #27500A; font-weight: 500; }

.form-divider { height: 0.5px; background: var(--color-border-tertiary); margin: 28px 0; }
.form-section-label { font-size: 11px; font-weight: 500; color: #3B6D11; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 20px; }

.age-note { display: none; font-size: 13px; color: #993C1D; background: #FAECE7; border: 0.5px solid #F0997B; border-radius: 8px; padding: 10px 14px; margin-top: 8px; align-items: flex-start; gap: 8px; }
.age-note.visible { display: flex; }
.age-note i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

.honeypot { display: none; }

.btn-submit { width: 100%; background: #3B6D11; color: #fff; font-family: "Times New Roman", Times, serif; font-size: 14px; font-weight: 500; padding: 13px 24px; border-radius: 8px; border: none; cursor: pointer; margin-top: 8px; transition: background var(--motion-smooth), transform var(--motion-smooth), box-shadow var(--motion-smooth); }
.btn-submit:not(:disabled):hover { background: #27500A; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(59, 109, 17, 0.18); }
.btn-submit:not(:disabled):active { transform: scale(0.98); }
.btn-submit:disabled { background: #97C459; cursor: not-allowed; }
.btn-submit--submitted { background: #27500A; cursor: default; }
.form-disclaimer { font-size: 12px; color: var(--color-text-tertiary); line-height: 1.6; margin-top: 14px; text-align: center; }

.sidebar { padding: 48px 32px; background: var(--color-background-secondary); }
.sidebar-block { margin-bottom: 32px; }
.sidebar-block:last-child { margin-bottom: 0; }
.sidebar-label { font-size: 11px; font-weight: 500; color: #3B6D11; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 16px; }

.process-step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.process-step:last-child { margin-bottom: 0; }
.step-num { width: 26px; height: 26px; border-radius: 50%; background: #D5F0C0; border: 0.5px solid #97C459; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: #27500A; flex-shrink: 0; }
.step-text { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; padding-top: 3px; }
.step-text strong { color: var(--color-text-primary); font-weight: 500; }

.trust-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.trust-item:last-child { margin-bottom: 0; }
.trust-icon { width: 32px; height: 32px; border-radius: 7px; background: #EAF3DE; border: 0.5px solid #C0DD97; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trust-icon i { font-size: 15px; color: #3B6D11; }
.trust-text { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; padding-top: 6px; }
.sidebar-divider { height: 0.5px; background: #C0DD97; margin: 24px 0; }

/* ==========================================================================
   CONTENT PLANT COMPONENT
   ========================================================================== */
.content-plant {
  width: 80px;
  height: auto;
  display: block;
  margin: 0 auto 20px;
}
.page-header .content-plant {
  margin-bottom: 0;
}
.content-plant--float-left {
  margin: 0 20px 20px 0;
  float: left;
}
.content-plant svg {
  width: 100%;
  height: auto;
  display: block;
}
.content-plant path {
  fill: #3B6D11;
}

.success-overlay { display: none; padding: 48px 40px; text-align: center; }
.success-overlay.visible { display: block; }
.success-icon { width: 56px; height: 56px; border-radius: 50%; background: #D5F0C0; border: 0.5px solid #97C459; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 26px; color: #3B6D11; }
.success-heading { font-size: 22px; font-weight: 500; letter-spacing: -0.4px; color: var(--color-text-primary); margin-bottom: 10px; }
.success-sub { font-size: 15px; color: var(--color-text-secondary); line-height: 1.7; max-width: 400px; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-ghost,
  nav,
  .nav-cta,
  .ig-btn,
  .btn-submit,
  .hero-card,
  .phil-card,
  .day-item,
  .tile-photo i,
  .story-img i,
  .modal-overlay,
  .fade-in-section {
    transition: none;
  }

  .btn-primary:active,
  .nav-cta:active,
  .ig-btn:active,
  .btn-submit:not(:disabled):active {
    transform: none;
  }

  .fade-in-section {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   7. MEDIA QUERIES (MOBILE RESPONSIVE)
   ========================================================================== */
@media (max-width: 640px) {
  nav { padding: 14px 20px; }
  .nav-scrolled { padding: 6px 20px; }
  .nav-links { display: none; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 0.5px solid var(--color-border-tertiary); padding: 12px 20px; }
  .nav-links.nav-open { display: flex; }
  .nav-hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 4px; }
  .nav-hamburger span { display: block; height: 1.5px; background: var(--color-text-primary); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
  .nav-hamburger.nav-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-hamburger.nav-open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.nav-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .page-header { padding: 36px 20px 32px; }
  .page-headline { font-size: 26px; }
  
  .hero { grid-template-columns: 1fr; padding: 48px 20px; }
  .about-section { grid-template-columns: 1fr; padding: 48px 20px; }
  .info-bar-inner { grid-template-columns: 1fr; }
  .info-col { padding: 24px 20px; border-radius: 0 !important; }
  .cta-section { padding: 48px 20px; }
  .story-section, .philosophy-section, .day-section { grid-template-columns: 1fr; padding: 48px 20px; }
  .phil-grid, .day-grid { grid-template-columns: 1fr; }
  
  .gallery-section { padding: 32px 20px 40px; }
  .bento-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "wide-a" "small-a" "small-b" "txt-a" "small-c" "small-d" "txt-b" "small-e" "small-f" "txt-c" "small-g" "small-h";
  }
  .tile-hero, .tile-wide-a, .tile-small-a, .tile-small-b, .tile-small-c, .tile-small-d, .tile-small-e, .tile-small-f, .tile-small-g, .tile-small-h, .tile-text { min-height: 220px; }
  
  .contact-layout { grid-template-columns: 1fr; }
  .form-section { padding: 32px 20px; border-right: none; border-bottom: 0.5px solid var(--color-border-tertiary); }
  .form-row { grid-template-columns: 1fr; }
  .sidebar { padding: 32px 20px; }
  .content-plant { width: 70px; margin-bottom: 16px; }
  .content-plant--float-left { float: none; margin: 0 auto 16px; }

  footer { padding: 20px; flex-direction: column; gap: 16px; text-align: center; }
  .footer-links { justify-content: center; }
  .modal-overlay { padding: 16px; align-items: flex-end; }
  .modal-content { max-height: calc(100vh - 32px); padding: 24px 20px; }
}

/* Desktop: larger plants */
@media (min-width: 900px) {
  .content-plant { width: 100px; margin-bottom: 28px; }
  .content-plant--float-left { float: left; margin: 0 24px 24px 0; }
}