/* ============================================================
   WOODJA WOODJA TRAILS & LANDSCAPING — styles.css
   Earthy forest-green + warm clay accent on warm-cream surfaces.
   ============================================================ */

:root,
[data-theme='light'] {
  /* Surfaces — warm cream */
  --color-bg: #f5f3ee;
  --color-surface: #fbfaf7;
  --color-surface-2: #ffffff;
  --color-surface-offset: #efece4;
  --color-surface-offset-2: #e7e3d8;
  --color-divider: #ddd8cc;
  --color-border: #d3cdbf;

  /* Text */
  --color-text: #221f18;
  --color-text-muted: #6b685f;
  --color-text-faint: #a8a496;
  --color-text-inverse: #f9f7f1;

  /* Primary — deep forest green */
  --color-primary: #2f5d3a;
  --color-primary-hover: #244a2d;
  --color-primary-active: #1b3a23;
  --color-primary-highlight: #d8e2d6;

  /* Accent — warm clay / amber */
  --color-accent: #c2691b;
  --color-accent-hover: #a8581a;
  --color-accent-active: #8a4814;
  --color-accent-soft: #f0e2cf;

  /* Success */
  --color-success: #3d7a2e;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px oklch(0.2 0.02 80 / 0.07);
  --shadow-md: 0 6px 18px oklch(0.2 0.02 80 / 0.10);
  --shadow-lg: 0 18px 48px oklch(0.2 0.02 80 / 0.16);

  --content-narrow: 640px;
  --content-default: 1120px;
  --content-wide: 1280px;

  /* Fonts */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Helvetica Neue', system-ui, sans-serif;

  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem);
  --text-sm: clamp(0.875rem, 0.83rem + 0.3vw, 0.975rem);
  --text-base: clamp(1rem, 0.96rem + 0.22vw, 1.1rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.55vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.2rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  --text-3xl: clamp(2.6rem, 1.5rem + 4.5vw, 4.6rem);

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;
}

[data-theme='dark'] {
  --color-bg: #131310;
  --color-surface: #1a1916;
  --color-surface-2: #211f1b;
  --color-surface-offset: #1d1c18;
  --color-surface-offset-2: #262421;
  --color-divider: #2a2823;
  --color-border: #38352e;

  --color-text: #e4e1d8;
  --color-text-muted: #a09c91;
  --color-text-faint: #6a6760;
  --color-text-inverse: #1a1916;

  --color-primary: #7bb06a;
  --color-primary-hover: #5e9a4d;
  --color-primary-active: #4d8440;
  --color-primary-highlight: #2b3429;

  --color-accent: #e0923f;
  --color-accent-hover: #f0a85a;
  --color-accent-active: #f5b873;
  --color-accent-soft: #3a2e1f;

  --color-success: #7bb06a;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 6px 18px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 18px 48px oklch(0 0 0 / 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #131310;
    --color-surface: #1a1916;
    --color-surface-2: #211f1b;
    --color-surface-offset: #1d1c18;
    --color-surface-offset-2: #262421;
    --color-divider: #2a2823;
    --color-border: #38352e;
    --color-text: #e4e1d8;
    --color-text-muted: #a09c91;
    --color-text-faint: #6a6760;
    --color-text-inverse: #1a1916;
    --color-primary: #7bb06a;
    --color-primary-hover: #5e9a4d;
    --color-primary-active: #4d8440;
    --color-primary-highlight: #2b3429;
    --color-accent: #e0923f;
    --color-accent-hover: #f0a85a;
    --color-accent-active: #f5b873;
    --color-accent-soft: #3a2e1f;
    --color-success: #7bb06a;
  }
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  min-height: 100dvh;
  line-height: 1.65;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; text-wrap: balance; letter-spacing: -0.01em; }
p, li { text-wrap: pretty; max-width: 72ch; }

::selection { background: oklch(from var(--color-primary) l c h / 0.28); color: var(--color-text); }

:focus-visible { outline: 2.5px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }

button { cursor: pointer; background: none; border: none; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--color-primary); color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 600;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--content-default); margin-inline: auto; padding-inline: clamp(var(--space-5), 5vw, var(--space-12)); }
.section { padding-block: clamp(var(--space-16), 7vw, var(--space-32)); }
.section-head { max-width: 60ch; margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); }
.eyebrow {
  display: inline-block; font-family: var(--font-body); font-size: var(--text-xs);
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: var(--space-3);
}
[data-theme='dark'] .eyebrow { color: var(--color-primary); }
.section-head h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.section-lead { font-size: var(--text-lg); color: var(--color-text-muted); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-full);
  border: 1.5px solid transparent; line-height: 1; white-space: nowrap;
  transition: background var(--transition-interactive), color var(--transition-interactive),
              border-color var(--transition-interactive), transform var(--transition-interactive),
              box-shadow var(--transition-interactive);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: var(--space-2) var(--space-4); }
.btn-lg { padding: var(--space-4) var(--space-7); font-size: var(--text-base); }
.btn-block { width: 100%; }

.btn-primary { background: var(--color-primary); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); }

.btn-accent { background: var(--color-accent); color: #fff; }
.btn-accent:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-md); }

.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-ghost:hover { border-color: var(--color-text-muted); background: var(--color-surface-offset); }

/* Light ghost button for dark backgrounds (hero) */
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn-ghost-light:hover { border-color: #fff; background: rgba(255,255,255,0.14); }

/* ---- Header ---- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklab, var(--color-bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--color-divider);
  transition: box-shadow var(--transition-interactive);
}
.header.scrolled { box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: 72px; }

.brand { display: inline-flex; align-items: center; gap: var(--space-3); }
.brand-mark { width: 38px; height: 38px; flex-shrink: 0; }
.brand-name { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1; color: var(--color-text); }
.brand-sub { font-family: var(--font-body); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--color-text-muted); text-transform: uppercase; margin-top: 3px; }

.nav { display: flex; gap: var(--space-7); }
.nav a { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); transition: color var(--transition-interactive); position: relative; }
.nav a:hover { color: var(--color-text); }
.nav a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--color-accent); transition: width var(--transition-interactive); }
.nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.theme-toggle {
  width: 38px; height: 38px; border-radius: var(--radius-full); display: grid; place-items: center;
  color: var(--color-text-muted); border: 1.5px solid var(--color-border); transition: all var(--transition-interactive);
}
.theme-toggle:hover { color: var(--color-text); border-color: var(--color-text-muted); }

.menu-toggle { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 5px; align-items: center; }
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform var(--transition-interactive), opacity var(--transition-interactive); }
.menu-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { display: none; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-bottom: 1px solid var(--color-divider); background: var(--color-surface); }
.mobile-nav.open { display: flex; }
.mobile-nav a { font-size: var(--text-base); font-weight: 500; padding: var(--space-2) 0; }
.mobile-nav .btn { margin-top: var(--space-2); }

@media (max-width: 920px) {
  .nav { display: none; }
  .header-actions .btn-sm { display: none; }
  .menu-toggle { display: flex; }
}

/* ---- Hero ---- */
.hero { position: relative; min-height: clamp(560px, 88vh, 880px); display: flex; align-items: flex-end; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(in oklab,
    oklch(0.15 0.02 140 / 0.55) 0%,
    oklch(0.12 0.02 140 / 0.35) 40%,
    oklch(0.1 0.02 140 / 0.72) 100%);
}
.hero-content { position: relative; z-index: 2; padding-block: clamp(var(--space-16), 8vw, var(--space-24)); color: #f7f4ec; max-width: 760px; }
.hero-content .eyebrow { color: var(--color-accent); }
.hero h1 { font-size: var(--text-3xl); color: #fdfbf5; margin-bottom: var(--space-5); text-shadow: 0 2px 24px oklch(0.1 0.02 140 / 0.4); }
.hero-lead { font-size: var(--text-lg); color: rgba(253,251,245,0.92); max-width: 56ch; margin-bottom: var(--space-8); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); }
.hero-points { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.hero-points li { font-size: var(--text-sm); font-weight: 500; color: rgba(253,251,245,0.9); display: flex; align-items: center; gap: var(--space-2); max-width: none; }
.hero-points li::before { content: '✓'; color: var(--color-accent); font-weight: 700; }

/* ---- Trust bar ---- */
.trust-bar { background: var(--color-primary); color: var(--color-text-inverse); }
.trust-grid { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-6); flex-wrap: wrap; }
.trust-item { display: flex; flex-direction: column; gap: 2px; }
.trust-num { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: #fff; line-height: 1; }
.trust-label { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.82); }
.trust-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.18); }
@media (max-width: 720px) { .trust-divider { display: none; } .trust-grid { gap: var(--space-5); justify-content: space-between; } }

/* ---- Services ---- */
.services { background: var(--color-bg); }
.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(var(--space-6), 3vw, var(--space-8)); }
.service-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), border-color var(--transition-interactive);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-primary-highlight); }
.service-img { aspect-ratio: 4/3; overflow: hidden; }
.service-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(0.16,1,0.3,1); }
.service-card:hover .service-img img { transform: scale(1.05); }
.service-body { padding: clamp(var(--space-5), 2.5vw, var(--space-7)); }
.service-body h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.service-body > p { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.service-list { display: grid; gap: var(--space-2); }
.service-list li { font-size: var(--text-sm); color: var(--color-text); padding-left: var(--space-5); position: relative; max-width: none; }
.service-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
@media (max-width: 760px) { .service-grid { grid-template-columns: 1fr; } }

/* ---- About ---- */
.about { background: var(--color-surface-offset); }
.about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.about-media img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); aspect-ratio: 4/3; object-fit: cover; }
.about-text h2 { font-size: var(--text-2xl); margin-bottom: var(--space-5); }
.about-text > p { color: var(--color-text-muted); margin-bottom: var(--space-6); font-size: var(--text-lg); }
.check-list { display: grid; gap: var(--space-4); margin-bottom: var(--space-8); }
.check-list li { padding-left: var(--space-7); position: relative; max-width: none; }
.check-list li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--color-primary); color: var(--color-text-inverse); font-size: 0.8rem; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.check-list strong { color: var(--color-text); }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } .about-media { order: -1; } }

/* ---- Work / portfolio ---- */
.work { background: var(--color-bg); }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(var(--space-4), 2vw, var(--space-6)); }
.work-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1/1; box-shadow: var(--shadow-sm); }
.work-lg { grid-column: span 2; aspect-ratio: 16/10; }
.work-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.16,1,0.3,1); }
.work-card:hover img { transform: scale(1.06); }
.work-card figcaption {
  position: absolute; inset: auto 0 0 0; padding: var(--space-8) var(--space-5) var(--space-5);
  background: linear-gradient(in oklab, transparent, oklch(0.1 0.02 140 / 0.85));
  color: #f7f4ec;
}
.work-tag { display: inline-block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2); }
.work-card h3 { font-size: var(--text-lg); color: #fff; margin-bottom: var(--space-1); }
.work-card figcaption p { font-size: var(--text-sm); color: rgba(247,244,236,0.82); max-width: none; }
.work-note { text-align: center; margin-top: clamp(var(--space-8), 5vw, var(--space-12)); font-size: var(--text-lg); color: var(--color-text-muted); }
.work-note a { color: var(--color-primary); font-weight: 600; }
[data-theme='dark'] .work-note a { color: var(--color-primary); }
@media (max-width: 860px) { .work-grid { grid-template-columns: 1fr 1fr; } .work-lg { grid-column: span 2; } }
@media (max-width: 560px) { .work-grid { grid-template-columns: 1fr; } .work-lg { grid-column: span 1; aspect-ratio: 4/3; } .work-card { aspect-ratio: 4/3; } }

/* ---- Service area ---- */
.area { background: var(--color-primary); color: var(--color-text-inverse); }
.area .eyebrow { color: var(--color-accent); }
.area-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.area-text h2 { font-size: var(--text-2xl); color: #fff; margin-bottom: var(--space-4); }
.area-text > p { color: rgba(255,255,255,0.85); margin-bottom: var(--space-8); font-size: var(--text-lg); }
.area-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-bottom: var(--space-8); }
.area-cols h3 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-3); }
.area-list { display: grid; gap: var(--space-2); }
.area-list li { color: rgba(255,255,255,0.88); font-size: var(--text-sm); max-width: none; }
.area-media img { width: 100%; border-radius: var(--radius-xl); aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--shadow-lg); }
.area .btn-primary { background: var(--color-accent); color: #fff; }
.area .btn-primary:hover { background: var(--color-accent-hover); }
@media (max-width: 860px) { .area-grid { grid-template-columns: 1fr; } .area-media { order: -1; } }
@media (max-width: 480px) { .area-cols { grid-template-columns: 1fr; } }

/* ---- Estimate / scheduling ---- */
.estimate { background: var(--color-surface-offset); }
.estimate .section-head { text-align: center; margin-inline: auto; }
.estimate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-6), 3vw, var(--space-10)); align-items: start; }
.schedule-block, .form-block { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(var(--space-6), 3vw, var(--space-8)); }
.schedule-block h3, .form-block h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.schedule-block > p, .form-block > p { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.calendly-inline { min-height: 680px; border-radius: var(--radius-md); overflow: hidden; }
.calendly-placeholder { border: 2px dashed var(--color-border); border-radius: var(--radius-md); padding: var(--space-8); text-align: center; min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); background: var(--color-surface-offset); }
.calendly-placeholder p { color: var(--color-text-muted); max-width: 42ch; }

/* Form */
.lead-form { display: grid; gap: var(--space-4); }
.form-row { display: grid; gap: var(--space-2); }
.form-row.split { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.lead-form label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-surface-2); border: 1.5px solid var(--color-border); color: var(--color-text);
  font-size: var(--text-base); transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-highlight); }
.lead-form textarea { resize: vertical; }
.form-fineprint { font-size: var(--text-xs); color: var(--color-text-faint); text-align: center; }
.form-success { background: var(--color-primary-highlight); color: var(--color-primary-active); padding: var(--space-4); border-radius: var(--radius-md); text-align: center; font-weight: 600; }
@media (max-width: 760px) { .estimate-grid { grid-template-columns: 1fr; } .form-row.split { grid-template-columns: 1fr; } }

/* ---- Contact ---- */
.contact { background: var(--color-bg); }
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.contact-info h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.contact-info > p { color: var(--color-text-muted); margin-bottom: var(--space-8); font-size: var(--text-lg); }
.contact-list { display: grid; gap: var(--space-5); margin-bottom: var(--space-8); }
.contact-list li { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-ico { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-primary-highlight); color: var(--color-primary); display: grid; place-items: center; font-size: 1.1rem; font-weight: 700; }
[data-theme='dark'] .contact-ico { background: var(--color-primary-highlight); color: var(--color-primary); }
.contact-label { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 2px; }
.contact-list a { font-weight: 500; color: var(--color-text); }
.contact-list a:hover { color: var(--color-primary); }
.contact-hint { display: block; font-size: var(--text-xs); color: var(--color-text-faint); font-style: italic; }
.social-row { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.social-link { font-weight: 600; color: var(--color-primary); font-size: var(--text-sm); }
.social-link:hover { color: var(--color-accent); }
.contact-cta { background: var(--color-primary); color: var(--color-text-inverse); border-radius: var(--radius-xl); padding: clamp(var(--space-8), 4vw, var(--space-12)); text-align: center; box-shadow: var(--shadow-lg); }
.contact-cta h3 { font-size: var(--text-xl); color: #fff; margin-bottom: var(--space-3); }
.contact-cta p { color: rgba(255,255,255,0.85); margin-bottom: var(--space-6); }
.contact-cta .btn-accent { background: var(--color-accent); }
.contact-cta .btn-accent:hover { background: var(--color-accent-hover); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---- Footer ---- */
.footer { background: var(--color-surface-offset-2); border-top: 1px solid var(--color-border); padding-block: clamp(var(--space-12), 5vw, var(--space-20)) var(--space-8); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(var(--space-6), 4vw, var(--space-12)); margin-bottom: var(--space-12); }
.footer-brand .brand { margin-bottom: var(--space-4); }
.footer-brand p { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 38ch; }
.footer-col h4 { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-4); }
.footer-col { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { font-size: var(--text-sm); color: var(--color-text-muted); transition: color var(--transition-interactive); }
.footer-col a:hover { color: var(--color-primary); }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-6); border-top: 1px solid var(--color-divider); }
.footer-bottom p { font-size: var(--text-xs); color: var(--color-text-faint); max-width: none; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: span 2; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } .footer-brand { grid-column: span 1; } .footer-bottom { flex-direction: column; } }

/* ============================================================
   TRAILS PAGE — trails.html
   ============================================================ */

/* Trails hero — slightly shorter than home hero */
.trails-hero { min-height: clamp(520px, 78vh, 760px); }
.trails-hero .hero-content { max-width: 780px; }

/* Intro split */
.trails-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.trails-intro-text h2 { font-size: var(--text-2xl); margin-bottom: var(--space-5); }
.trails-intro-text > p { color: var(--color-text-muted); margin-bottom: var(--space-4); font-size: var(--text-lg); }
.trails-intro-text .btn { margin-top: var(--space-4); }
.trails-intro-media img { width: 100%; border-radius: var(--radius-xl); aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--shadow-lg); }
@media (max-width: 860px) { .trails-intro { grid-template-columns: 1fr; } .trails-intro-media { order: -1; } }

/* Features grid */
.trails-features-section { background: var(--color-surface-offset); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(var(--space-5), 2.5vw, var(--space-7)); }
.feature-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(var(--space-5), 2.5vw, var(--space-7)); transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), border-color var(--transition-interactive); }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary-highlight); }
.feature-ico { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--color-accent); margin-bottom: var(--space-3); line-height: 1; }
.feature-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.feature-card p { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width: 900px) { .features-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } }

/* Process steps */
.trails-process { background: var(--color-bg); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(var(--space-5), 2.5vw, var(--space-7)); list-style: none; }
.process-step { position: relative; padding-top: var(--space-2); }
.process-num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-text-inverse); font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); margin-bottom: var(--space-4); box-shadow: var(--shadow-sm); }
.process-step h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.process-step p { color: var(--color-text-muted); font-size: var(--text-sm); }
.process-step:not(:last-child)::after { content: ''; position: absolute; top: 22px; right: calc(var(--space-7) * -0.5); width: 100%; height: 2px; background: var(--color-divider); z-index: -1; }
@media (max-width: 900px) { .process-grid { grid-template-columns: 1fr 1fr; } .process-step:not(:last-child)::after { display: none; } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }

/* Gallery */
.trails-gallery-section { background: var(--color-surface-offset); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(var(--space-4), 2vw, var(--space-6)); }
.gallery-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1/1; box-shadow: var(--shadow-sm); background: var(--color-surface-offset-2); }
.gallery-wide { grid-column: span 2; aspect-ratio: 16/10; }
.gallery-tall { aspect-ratio: 8/10; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.16,1,0.3,1); }
.gallery-card:hover img { transform: scale(1.06); }
.gallery-card figcaption { position: absolute; inset: auto 0 0 0; padding: var(--space-8) var(--space-5) var(--space-5); background: linear-gradient(in oklab, transparent, oklch(0.1 0.02 140 / 0.85)); color: #f7f4ec; }
.gallery-card h3 { font-size: var(--text-lg); color: #fff; margin-bottom: var(--space-1); }
.gallery-card figcaption p { font-size: var(--text-sm); color: rgba(247,244,236,0.82); max-width: none; }
@media (max-width: 860px) { .gallery-grid { grid-template-columns: 1fr 1fr; } .gallery-wide { grid-column: span 2; } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } .gallery-wide { grid-column: span 1; aspect-ratio: 4/3; } .gallery-card { aspect-ratio: 4/3; } }

/* Benefits split */
.trails-benefits { background: var(--color-bg); }
.benefits-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.benefits-text h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.benefits-text > p { color: var(--color-text-muted); margin-bottom: var(--space-6); font-size: var(--text-lg); }
.benefits-text .check-list { margin-bottom: 0; }
.benefits-media img { width: 100%; border-radius: var(--radius-xl); aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--shadow-lg); }
@media (max-width: 860px) { .benefits-grid { grid-template-columns: 1fr; } .benefits-media { order: -1; } }

/* Trails CTA */
.trails-cta { background: var(--color-primary); color: var(--color-text-inverse); }
.trails-cta-inner { max-width: 60ch; text-align: center; }
.trails-cta h2 { font-size: var(--text-2xl); color: #fff; margin-bottom: var(--space-4); }
.trails-cta p { color: rgba(255,255,255,0.88); font-size: var(--text-lg); margin-bottom: var(--space-6); }

/* Service card "learn more" link */
.service-link { display: inline-block; margin-top: var(--space-4); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); transition: color var(--transition-interactive), gap var(--transition-interactive); }
.service-link:hover { color: var(--color-accent); }
[data-theme='dark'] .service-link { color: var(--color-primary); }