/* ==========================================================================
   Come2Life — Design System
   Palette derived from the Come2Life logo (leaf greens + charcoal + sage),
   warmed with the gold used across Come2Life's own retreat posters.
   Type: Lora (display) + Raleway (body).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Raleway:wght@300;400;500;600;700&display=swap');

:root {
  /* Brand */
  --forest-900: #1E3220;
  --forest-800: #26402A;
  --forest-700: #2F5531;
  --forest-600: #3E6B34;
  --leaf-500:   #6FA63C;
  --leaf-400:   #8BC24A;
  --leaf-300:   #A6D267;
  --gold-500:   #D4A24A;
  --gold-600:   #C0892E;
  --gold-700:   #A6741F;
  --sage:       #8A9683;
  --sage-light: #B7C0AE;

  /* Neutrals */
  --cream:      #F7F3EA;
  --cream-dark: #EFE7D6;
  --ink:        #2C302A;
  --ink-soft:   #51574C;
  --white:      #FFFFFF;

  /* Semantic */
  --bg:            var(--cream);
  --surface:       var(--white);
  --text:          var(--ink);
  --text-muted:    var(--ink-soft);
  --primary:       var(--forest-600);
  --primary-strong:var(--forest-700);
  --accent:        var(--gold-500);
  --accent-strong: var(--gold-600);
  --border:        #E3DCC9;

  /* Rhythm */
  --radius:   14px;
  --radius-lg:22px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(30,50,32,.06);
  --shadow:    0 14px 40px -18px rgba(30,50,32,.28);
  --shadow-lg: 0 30px 70px -30px rgba(30,50,32,.40);
  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,h2,h3,h4 { font-family: 'Lora', Georgia, serif; font-weight: 600; line-height: 1.12; color: var(--forest-900); margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.3rem, 6vw, 4rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
p { margin: 0 0 1.1rem; }
a { color: var(--primary-strong); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--gold-700); }
img { max-width: 100%; display: block; }
strong { font-weight: 600; color: var(--forest-800); }
::selection { background: var(--leaf-300); color: var(--forest-900); }

/* Focus visibility */
:focus-visible { outline: 3px solid var(--gold-600); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.eyebrow {
  font-family: 'Raleway', sans-serif; font-weight: 600; font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-700);
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
}
.eyebrow::before { content:""; width: 28px; height: 2px; background: var(--gold-600); display:inline-block; border-radius: 2px; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--text-muted); line-height: 1.6; }
.measure { max-width: 60ch; }
.center { text-align: center; }
.center .eyebrow::before { display:none; }
.center .eyebrow { justify-content:center; }

/* ---------- Buttons ---------- */
.btn {
  --_bg: var(--gold-500); --_fg: var(--ink);
  display: inline-flex; align-items: center; justify-content:center; gap: .6rem;
  font-family: 'Raleway', sans-serif; font-weight: 600; font-size: .98rem;
  letter-spacing: .01em; line-height: 1;
  padding: .95rem 1.6rem; border-radius: var(--radius-pill);
  background: var(--_bg); color: var(--_fg);
  border: 2px solid transparent; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .2s var(--ease);
  box-shadow: 0 10px 24px -12px rgba(192,137,46,.7);
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(192,137,46,.8); background: var(--gold-600); color: var(--ink); }
.btn:active { transform: translateY(0); }

.btn-forest { --_bg: var(--forest-600); --_fg: #fff; box-shadow: 0 10px 24px -12px rgba(30,50,32,.6); }
.btn-forest:hover { background: var(--forest-700); color:#fff; box-shadow: 0 16px 30px -12px rgba(30,50,32,.7); }

.btn-outline {
  background: transparent; color: var(--forest-700); border-color: var(--forest-600);
  box-shadow: none;
}
.btn-outline:hover { background: var(--forest-700); color: #fff; box-shadow: none; }

.btn-ghost-light {
  background: rgba(255,255,255,.14); color:#fff; border-color: rgba(255,255,255,.55);
  backdrop-filter: blur(6px); box-shadow:none;
}
.btn-ghost-light:hover { background: #fff; color: var(--forest-800); border-color:#fff; }

.link-arrow { font-weight: 600; display: inline-flex; align-items:center; gap:.4rem; color: var(--forest-700); }
.link-arrow svg { width: 1.05em; height:1.05em; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,243,234,.94);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); border-bottom-color: var(--border); background: var(--cream); }
/* Glass blur only where it won't trap the fixed mobile drawer (desktop ≥ 961px) */
@media (min-width: 961px) {
  .site-header { background: rgba(247,243,234,.82); backdrop-filter: saturate(140%) blur(12px); }
  .site-header.is-scrolled { background: rgba(247,243,234,.95); }
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .7rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.brand img { height: 46px; width: auto; }
.nav-links { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-weight: 500; font-size: .95rem; color: var(--forest-800);
  padding: .55rem .8rem; border-radius: var(--radius-pill); position: relative;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover { color: var(--forest-900); background: rgba(111,166,60,.12); }
.nav-links a.active { color: var(--forest-900); }
.nav-links a.active::after {
  content:""; position:absolute; left: 50%; transform: translateX(-50%); bottom: .18rem;
  width: 18px; height: 2.5px; background: var(--gold-600); border-radius: 2px;
}
.nav-cta { margin-left: .4rem; }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:.5rem; color: var(--forest-800); }
.nav-toggle svg { width: 28px; height: 28px; }

/* Mobile nav */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed; top: 0; right: 0; bottom: auto;
    height: 100vh; height: 100dvh; width: min(82vw, 340px);
    flex-direction: column; align-items: stretch; gap: .25rem;
    background: var(--cream); padding: 5.5rem 1.4rem 2rem;
    box-shadow: var(--shadow-lg); transform: translateX(100%);
    transition: transform .35s var(--ease); overflow-y: auto;
    z-index: 60;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { padding: .85rem 1rem; font-size: 1.05rem; }
  .nav-links a.active::after { display:none; }
  .nav-links a.active { background: rgba(111,166,60,.14); }
  .nav-cta { margin: .8rem 0 0; }
  .nav-cta .btn { width: 100%; }
  body.nav-open { overflow: hidden; }
  .nav-backdrop { position: fixed; inset:0; background: rgba(30,50,32,.45); z-index: 40; opacity:0; visibility:hidden; transition: opacity .3s; }
  .nav-backdrop.show { opacity:1; visibility:visible; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(90vh, 760px); display: flex; align-items: center; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(20,34,22,.86) 0%, rgba(26,44,30,.66) 42%, rgba(26,44,30,.18) 72%, rgba(26,44,30,.05) 100%),
    linear-gradient(0deg, rgba(20,34,22,.55), rgba(20,34,22,0) 40%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero-inner { max-width: 640px; color: #fff; padding-block: clamp(4rem, 10vw, 7rem); }
.hero h1 { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.hero .lead { color: rgba(255,255,255,.92); }
.hero-tagline { font-family:'Lora',serif; font-style: italic; color: var(--leaf-300); font-size: clamp(1.05rem,1.6vw,1.25rem); margin-bottom: .6rem; }
.hero-cta { display:flex; flex-wrap:wrap; gap: .9rem; margin-top: 1.9rem; }

/* decorative aurora glow (subtle, nods to the Finland northern-lights imagery) */
.aurora { position:absolute; filter: blur(60px); opacity:.5; border-radius:50%; z-index:0; pointer-events:none; }

/* ---------- Pillars / feature row ---------- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.5rem; }
.pillar { display:flex; gap: 1rem; align-items:flex-start; }
.pillar-ic {
  flex-shrink:0; width: 54px; height: 54px; border-radius: 16px; display:grid; place-items:center;
  background: linear-gradient(145deg, var(--leaf-400), var(--forest-600)); color:#fff;
  box-shadow: var(--shadow-sm);
}
.pillar-ic svg { width: 26px; height: 26px; }
.pillar h3 { font-size: 1.12rem; margin-bottom: .2rem; color: var(--forest-800); }
.pillar p { font-size: .97rem; color: var(--text-muted); margin:0; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  display:flex; flex-direction:column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--sage-light); }
.card-media { aspect-ratio: 16/11; overflow:hidden; }
.card-media img { width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: 1.5rem 1.5rem 1.7rem; display:flex; flex-direction:column; flex:1; }
.card-body h3 { margin-bottom:.4rem; }
.card-meta { font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--gold-700); margin-bottom:.6rem; }
.card-body p { color: var(--text-muted); font-size:.98rem; }
.card-foot { margin-top:auto; padding-top: 1rem; }

.badge { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600; letter-spacing:.04em; padding:.3rem .7rem; border-radius: var(--radius-pill); background: var(--cream-dark); color: var(--forest-700); border:1px solid var(--border); }
.badge-gold { background: rgba(212,162,74,.16); color: var(--gold-700); border-color: rgba(192,137,46,.3); }

/* ---------- Trip card (feature) ---------- */
.trip { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 420px; display:flex; align-items:flex-end; color:#fff; box-shadow: var(--shadow-sm); }
.trip img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition: transform .7s var(--ease); }
.trip::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(20,34,22,.9) 0%, rgba(20,34,22,.4) 50%, rgba(20,34,22,.1) 100%); z-index:1; }
.trip:hover img { transform: scale(1.06); }
.trip-body { position:relative; z-index:2; padding: 1.8rem; width:100%; }
.trip-body h3 { color:#fff; margin-bottom:.3rem; font-size: 1.6rem; }
.trip-body .trip-date { font-weight:600; color: var(--leaf-300); font-size:.9rem; letter-spacing:.03em; margin-bottom:.5rem; }
.trip-body p { color: rgba(255,255,255,.88); font-size:.96rem; margin-bottom:1rem; }

/* ---------- Split feature ---------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.split.reverse .split-media { order: 2; }
.split-media { border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); position:relative; }
.split-media img { width:100%; height:100%; object-fit:cover; }
@media (max-width: 860px){ .split { grid-template-columns: 1fr; } .split.reverse .split-media { order: 0; } }

/* ---------- Panels ---------- */
.panel-forest { background: var(--forest-800); color: #fff; position: relative; overflow:hidden; }
.panel-forest h2, .panel-forest h3 { color:#fff; }
.panel-forest .eyebrow { color: var(--leaf-300); }
.panel-forest .eyebrow::before { background: var(--leaf-400); }
.panel-forest p { color: rgba(255,255,255,.85); }
.panel-cream { background: var(--cream-dark); }

/* quote / testimonial */
.quote { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem 1.9rem; box-shadow: var(--shadow-sm); position:relative; display:flex; flex-direction:column; height:100%; }
.quote::before { content:"\201C"; font-family:'Lora',serif; font-size: 4.5rem; line-height: .6; color: var(--leaf-400); opacity:.5; margin-bottom: .4rem; }
.quote p { font-family:'Lora',serif; font-style: italic; font-size: 1.08rem; color: var(--forest-900); line-height:1.6; }
.quote .who { margin-top:auto; font-family:'Raleway',sans-serif; font-style:normal; font-weight:600; font-size:.92rem; color: var(--forest-700); }
.quote .who span { display:block; font-weight:400; color: var(--text-muted); font-size:.85rem; }

/* ---------- Forms ---------- */
.field { margin-bottom: 1.3rem; }
.field label { display:block; font-weight:600; font-size:.92rem; color: var(--forest-800); margin-bottom:.4rem; }
.field .req { color: var(--gold-700); }
.field .hint { font-weight:400; color: var(--text-muted); font-size:.85rem; margin-top:.2rem; }
.input, .select, .textarea {
  width:100%; font-family:'Raleway',sans-serif; font-size:1rem; color: var(--ink);
  background: var(--white); border:1.5px solid var(--border); border-radius: var(--radius);
  padding: .8rem 1rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  min-height: 48px;
}
.textarea { min-height: 130px; resize: vertical; line-height:1.6; }
.input:focus, .select:focus, .textarea:focus { outline:none; border-color: var(--leaf-500); box-shadow: 0 0 0 4px rgba(111,166,60,.16); }
.input::placeholder, .textarea::placeholder { color: #A7A390; }
.choice-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:.6rem; }
.choice {
  display:flex; align-items:center; gap:.6rem; padding:.75rem .9rem; border:1.5px solid var(--border);
  border-radius: var(--radius); cursor:pointer; font-size:.95rem; background:var(--white);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.choice:hover { border-color: var(--leaf-400); }
.choice input { accent-color: var(--forest-600); width: 18px; height:18px; flex-shrink:0; }
.choice:has(input:checked) { border-color: var(--forest-600); background: rgba(111,166,60,.08); }
.form-note { font-size:.85rem; color: var(--text-muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--forest-900); color: rgba(255,255,255,.8); padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.site-footer h4 { color:#fff; font-family:'Raleway',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1rem; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: var(--leaf-300); }
.footer-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; font-size:.95rem; }
.footer-brand img { height: 54px; margin-bottom: 1rem; }
.footer-tag { font-family:'Lora',serif; font-style:italic; color: var(--leaf-300); font-size:1rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:2.5rem; padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.85rem; color: rgba(255,255,255,.6); }
.social { display:flex; gap:.7rem; }
.social a { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background: rgba(255,255,255,.08); color:#fff; transition: background .25s var(--ease), transform .25s var(--ease); }
.social a:hover { background: var(--gold-600); color:#fff; transform: translateY(-2px); }
.social svg { width:19px; height:19px; }
@media (max-width: 860px){ .footer-grid { grid-template-columns: 1fr 1fr; gap:2rem; } }
@media (max-width: 520px){ .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Page hero (interior) ---------- */
.page-hero { position:relative; padding-block: clamp(3rem,7vw,5.5rem); background: var(--forest-800); color:#fff; overflow:hidden; }
.page-hero::before { content:""; position:absolute; inset:0; background: radial-gradient(120% 120% at 85% 0%, rgba(111,166,60,.35), transparent 55%); }
.page-hero .wrap { position:relative; z-index:2; }
.page-hero h1 { color:#fff; }
.page-hero p { color: rgba(255,255,255,.88); }
.crumbs { font-size:.85rem; color: rgba(255,255,255,.7); margin-bottom:1rem; display:flex; gap:.5rem; }
.crumbs a { color: var(--leaf-300); }

/* ---------- Utility ---------- */
.grid-2 { display:grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap:1.8rem; }
.grid-3 { display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:1.8rem; }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack > * + * { margin-top: 1rem; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity:1; transform: none; }
.reveal.d1 { transition-delay:.08s } .reveal.d2 { transition-delay:.16s } .reveal.d3 { transition-delay:.24s } .reveal.d4 { transition-delay:.32s }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .card:hover, .btn:hover, .trip:hover img, .card:hover .card-media img { transform:none !important; }
  .aurora { display:none; }
}