/* ================================================================
   ORCHARD WOODWORKS — DESIGN SYSTEM v2.0
   design-system.css
   ================================================================
   Complete design token and component system for Orchard Woodworks.
   Link this file AFTER style.css to enhance and override selectively,
   or use it as the sole stylesheet on a fresh build.
   Framework-agnostic. All tokens as CSS custom properties.
   ================================================================ */

/* ----------------------------------------------------------------
   1. DESIGN TOKENS — COLOR
   ----------------------------------------------------------------
   Palette rationale:
   • Walnut   — primary brand, CTAs, accents, active states
   • Sand     — warm neutrals for surfaces and backgrounds
   • Charcoal — text, strong UI, dark sections
   • Sage     — trust/natural secondary accent (replaces all teal)
   • Status   — success, error, warning
   ---------------------------------------------------------------- */

:root {

  /* — Walnut (brand primary) ------------------------------------ */
  --walnut-950: #1f0e05;
  --walnut-900: #3d2010;
  --walnut-800: #5c3420;
  --walnut-700: #7a4a2c;
  --walnut-600: #8b5a32;   /* deep walnut — dark hover */
  --walnut-500: #b07a4a;   /* walnut mid  — primary CTA */
  --walnut-400: #c9956a;   /* warm amber  — highlights */
  --walnut-300: #deb899;   /* pale amber  — tints */
  --walnut-200: #edd9c4;   /* blush sand  — subtle fills */
  --walnut-100: #f7ede0;   /* cream       — section bg alt */
  --walnut-050: #fdf8f2;   /* near white  — page surface */

  /* — Sand (warm neutrals) -------------------------------------- */
  --sand-900: #1e1812;
  --sand-800: #2d241c;
  --sand-700: #3f3028;
  --sand-600: #574436;
  --sand-500: #7a6355;
  --sand-400: #9c8878;
  --sand-300: #bfb0a2;
  --sand-200: #dbd0c5;
  --sand-100: #ede7df;
  --sand-050: #faf6f0;

  /* — Charcoal (text & dark surfaces) -------------------------- */
  --charcoal-900: #141210;
  --charcoal-800: #242220;
  --charcoal-700: #373530;
  --charcoal-600: #4d4a45;
  --charcoal-500: #646058;
  --charcoal-400: #8a8580;
  --charcoal-300: #b0aba6;
  --charcoal-200: #d0ccc8;
  --charcoal-100: #e8e5e2;
  --charcoal-050: #f4f3f1;

  /* — Sage (natural secondary accent — replaces all teal/blue) - */
  --sage-800: #253428;
  --sage-700: #2d4a35;
  --sage-600: #3d6145;   /* deep sage — hover on sage elements */
  --sage-500: #527a5c;   /* mid sage  — secondary accent */
  --sage-400: #7a9e84;
  --sage-300: #a8c4af;
  --sage-200: #d1e4d5;
  --sage-100: #ebf3ee;

  /* — Semantic Aliases ----------------------------------------- */
  --color-primary:       var(--walnut-500);
  --color-primary-dark:  var(--walnut-600);
  --color-primary-light: var(--walnut-300);
  --color-secondary:     var(--sage-500);
  --color-secondary-dark:var(--sage-600);

  --text-base:    var(--sand-900);
  --text-body:    var(--sand-700);
  --text-muted:   var(--sand-500);
  --text-subtle:  var(--sand-400);
  --text-inverse: var(--walnut-050);

  --surface-page:    var(--sand-050);    /* warm off-white page */
  --surface-card:    #ffffff;
  --surface-warm:    var(--walnut-100);  /* warm cream sections */
  --surface-alt:     var(--charcoal-050);
  --surface-dark:    var(--sand-800);
  --surface-darkest: var(--sand-900);

  --border-default: var(--sand-200);
  --border-subtle:  var(--sand-100);
  --border-strong:  var(--sand-300);
  --border-accent:  rgba(176, 122, 74, 0.32);

  /* — Status ---------------------------------------------------- */
  --status-success: #1f8f5f;
  --status-error:   #c0392b;
  --status-warning: #d97706;

  /* ----------------------------------------------------------------
     LEGACY VARIABLE REMAPPING
     ----------------------------------------------------------------
     Redefines the tokens used by style.css so all existing
     components automatically inherit the new design system values.
     ---------------------------------------------------------------- */
  --bg:          #faf6f0;      /* was #f6f1e9 — slightly warmer, crisper */
  --bg-muted:    var(--walnut-100);   /* was #e9e0d4 */
  --text:        var(--sand-900);     /* was #211c18 */
  --text-muted:  var(--sand-600);     /* was #65584d — softer */
  --accent:      var(--walnut-500);   /* was #b66c36 — consistent walnut */
  --accent-dark: var(--walnut-600);   /* was #79431f */
  --accent-alt:  var(--sage-500);     /* was #536052 — now properly named sage */
  --card-bg:     #ffffff;
  --border:      rgba(63, 48, 40, 0.10);
  --shadow:      0 8px 24px rgba(30, 20, 12, 0.10);
  --radius:      var(--radius-card);   /* 14px */


  /* ----------------------------------------------------------------
     2. DESIGN TOKENS — TYPOGRAPHY
     ----------------------------------------------------------------
     Font roles:
     • Merriweather   — editorial headings (h1, h2, display)
     • EB Garamond    — body text, long-form, quotes
     • Montserrat     — UI labels, eyebrows, buttons, nav
     ---------------------------------------------------------------- */

  --font-serif:  'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body:   'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-ui:     'Montserrat', 'Raleway', system-ui, sans-serif;

  /* Type scale — fluid with clamp() */
  --text-xs:   0.75rem;    /* 12px  — labels, captions, meta */
  --text-sm:   0.875rem;   /* 14px  — secondary UI text */
  --text-base: 1rem;       /* 16px  — base */
  --text-md:   1.125rem;   /* 18px  — comfortable body */
  --text-lg:   1.25rem;    /* 20px  — lead text */
  --text-xl:   1.5rem;     /* 24px  — h4 */
  --text-2xl:  1.875rem;   /* 30px  — h3 */
  --text-3xl:  2.25rem;    /* 36px  — h2 mobile */
  --text-4xl:  3rem;       /* 48px  — h2 desktop */
  --text-5xl:  clamp(2.75rem, 6vw, 4.5rem);   /* h1 */
  --text-display: clamp(3.25rem, 8vw, 6.5rem); /* hero display */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.28;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0em;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.22em;


  /* ----------------------------------------------------------------
     3. DESIGN TOKENS — SPACING
     ----------------------------------------------------------------
     Base: 4px unit. Scale follows 4px → 8px → 12px → 16px...
     Named for semantic clarity.
     ---------------------------------------------------------------- */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* Section vertical rhythm */
  --section-sm:  clamp(3rem,   5vw, 4.5rem);
  --section-md:  clamp(4.5rem, 7vw, 7rem);
  --section-lg:  clamp(6rem,   9vw, 10rem);

  /* Container */
  --container-max:   1280px;
  --container-prose: 760px;
  --container-narrow:560px;
  --gutter:          clamp(1rem, 4vw, 2rem);


  /* ----------------------------------------------------------------
     4. DESIGN TOKENS — SHADOWS & DEPTH
     ----------------------------------------------------------------
     Five elevation tiers named for physical sensation.
     Each shadow carries warm brown undertones.
     ---------------------------------------------------------------- */

  --shadow-xs:   0 1px 2px rgba(30, 20, 12, 0.06);
  --shadow-sm:   0 2px 8px rgba(30, 20, 12, 0.08);
  --shadow-md:   0 8px 24px rgba(30, 20, 12, 0.10);
  --shadow-lg:   0 16px 40px rgba(30, 20, 12, 0.12);
  --shadow-xl:   0 28px 60px rgba(30, 20, 12, 0.15);
  --shadow-2xl:  0 40px 80px rgba(30, 20, 12, 0.20);

  /* Named semantic shadows */
  --shadow-card:        var(--shadow-md);
  --shadow-card-hover:  var(--shadow-xl);
  --shadow-nav:         0 4px 20px rgba(30, 20, 12, 0.10);
  --shadow-hero-image:  0 24px 60px rgba(20, 14, 8, 0.22);
  --shadow-cta:         0 12px 32px rgba(139, 90, 50, 0.28);
  --shadow-inset:       inset 0 1px 4px rgba(30, 20, 12, 0.08);

  /* Glow (for CTA buttons on dark bg) */
  --glow-primary: 0 0 0 4px rgba(176, 122, 74, 0.22);
  --glow-focus:   0 0 0 3px rgba(176, 122, 74, 0.35);


  /* ----------------------------------------------------------------
     5. DESIGN TOKENS — BORDERS & RADII
     ---------------------------------------------------------------- */

  --radius-none:  0;
  --radius-xs:    2px;
  --radius-sm:    4px;   /* chips, filter pills */
  --radius-md:    8px;   /* cards, inputs */
  --radius-lg:    14px;  /* featured cards, modals */
  --radius-xl:    20px;  /* hero images */
  --radius-2xl:   28px;  /* large media containers */
  --radius-full:  9999px; /* pills, badges */

  --radius-card:  var(--radius-lg);
  --radius-btn:   var(--radius-sm);   /* clean, precise buttons */
  --radius-input: var(--radius-md);
  --radius-badge: var(--radius-full);
  --radius-image: var(--radius-xl);

  --border-width-thin:    1px;
  --border-width-default: 1px;
  --border-width-thick:   2px;
  --border-width-accent:  3px;


  /* ----------------------------------------------------------------
     6. DESIGN TOKENS — MOTION & TRANSITIONS
     ---------------------------------------------------------------- */

  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-inout:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* slight overshoot */
  --ease-crafted: cubic-bezier(0.22, 1, 0.36, 1);     /* buttery slow exit */

  --duration-fast:   150ms;
  --duration-normal: 280ms;
  --duration-slow:   450ms;
  --duration-lazy:   700ms;

  --transition-default: all var(--duration-normal) var(--ease-inout);
  --transition-color:   color var(--duration-fast) var(--ease-out),
                        background-color var(--duration-fast) var(--ease-out),
                        border-color var(--duration-fast) var(--ease-out);
  --transition-lift:    transform var(--duration-normal) var(--ease-spring),
                        box-shadow var(--duration-normal) var(--ease-out);
  --transition-fade:    opacity var(--duration-normal) var(--ease-out);

}


/* ================================================================
   COMPONENT TOKENS — Quick Reference Table
   ================================================================

   BUTTON (primary)       bg: --walnut-500     text: white
   BUTTON (ghost)         border: --walnut-500  text: --walnut-500
   BUTTON (dark)          bg: --sand-900        text: white
   BUTTON hover lift      transform: translateY(-2px)
   BUTTON radius          --radius-sm (4px) — precise, crafted

   CARD                   bg: --surface-card    border: --border-default
   CARD hover             shadow: --shadow-card-hover  lift: -5px
   CARD radius            --radius-card (14px)

   NAV (transparent)      bg: transparent       text: white
   NAV (scrolled)         bg: --sand-900/92%    backdrop-filter: blur(16px)
   NAV CTA button         bg: --walnut-500      radius: --radius-full

   HERO (dark)            bg: --sand-900 + warm overlay
   HERO image             radius: --radius-image    shadow: --shadow-hero-image

   FOOTER                 bg: --sand-900        text: rgba(255,255,255,0.7)

   INPUT                  border: --border-default   focus: --walnut-500 + glow
   INPUT radius           --radius-input (8px)

   SECTION ALT            bg: --surface-warm or --surface-alt
   SECTION dark           bg: --surface-dark

   ================================================================ */


/* Hero — full width (no gallery) */
.hero-content.hero-full {
  grid-template-columns: 1fr;
}

.hero-content.hero-full .hero-text {
  max-width: 780px;
}

/* ================================================================
   ABOUT SPLIT LAYOUT
   ================================================================ */

.about-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(var(--space-10), 7vw, var(--space-20));
  align-items: start;
}

.about-copy h2 {
  margin-top: var(--space-4);
}

.about-copy p {
  margin-bottom: var(--space-5);
}

.about-copy .btn {
  margin-top: var(--space-3);
}

.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8) var(--space-6);
}

.about-feature {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.about-feature-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-warm);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
}

.about-feature-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: sepia(0.2);
}

.about-feature h3 {
  font-size: var(--text-base);
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  color: var(--text-base);
}

.about-feature p {
  font-size: var(--text-sm);
  margin: 0;
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

@media (max-width: 900px) {
  .about-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .about-features {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   SECTION HERO FULL — override split grid at responsive breakpoints
   ================================================================ */
@media (max-width: 1100px) {
  .hero-content.hero-full {
    grid-template-columns: 1fr;
  }
}



*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ================================================================
   8. TYPOGRAPHY SCALE
   ================================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--text-base);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-6);
  line-height: var(--leading-tight);
  font-weight: 700;
}

h1 { font-size: var(--text-5xl); line-height: var(--leading-tight); }
h2 { font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl)); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); letter-spacing: var(--tracking-normal); }
h6 {
  font-size: var(--text-sm);
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

p {
  margin: 0 0 var(--space-5);
  color: var(--text-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

p:last-child { margin-bottom: 0; }

.display {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Eyebrow — small uppercase label above headings */
.eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.eyebrow.light { color: rgba(255,255,255,0.7); }
.eyebrow.sage  { color: var(--sage-400); }

/* Lead / intro paragraph */
.lead {
  font-size: clamp(var(--text-md), 2vw, var(--text-lg));
  color: var(--text-body);
  line-height: var(--leading-normal);
}

/* Blockquote — for testimonials */
blockquote {
  margin: 0;
  padding: var(--space-6) var(--space-8);
  border-left: var(--border-width-accent) solid var(--color-primary);
  background: var(--surface-warm);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--text-base);
}

blockquote cite {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-style: normal;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}


/* ================================================================
   9. LAYOUT — CONTAINER & GRID
   ================================================================ */

.container {
  width: min(var(--container-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.container-prose  { max-width: var(--container-prose); margin-inline: auto; }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; }

.section {
  padding-block: var(--section-md);
  overflow: hidden;
}
.section-sm { padding-block: var(--section-sm); }
.section-lg { padding-block: var(--section-lg); }

.section-warm    { background-color: var(--surface-warm); }
.section-alt     { background-color: var(--surface-alt); }
.section-dark    { background-color: var(--surface-dark);    color: var(--text-inverse); }
.section-darkest { background-color: var(--surface-darkest); color: var(--text-inverse); }

.section-heading {
  text-align: center;
  max-width: var(--container-prose);
  margin: 0 auto var(--space-16);
}

.section-heading .eyebrow { margin-bottom: var(--space-3); }
.section-heading p { font-size: var(--text-lg); color: var(--text-muted); }


/* ================================================================
   10. NAVIGATION
   ================================================================
   Design: Transparent on hero, deep charcoal glassmorphic on scroll.
   CTA pill uses walnut primary. Mobile: slide-in panel.
   ================================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(rgba(30, 24, 18, 0.72), rgba(30, 24, 18, 0.35));
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background var(--duration-normal) var(--ease-inout),
              box-shadow  var(--duration-normal) var(--ease-inout);
}

/* When page scrolls — warm dark glass */
.site-header.is-scrolled,
#header.header-scrolled {
  background: rgba(30, 24, 18, 0.95);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow-nav);
}

/* If the header starts over a light section (non-hero pages) */
.site-header.header-light {
  background: rgba(250, 246, 240, 0.96);
  border-bottom: 1px solid var(--border-default);
}

.site-header .container,
#header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding-block: var(--space-3);
}

/* Logo */
.logo,
#header .logo a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

#header .logo img { max-height: 44px; }

/* Nav links */
.site-nav,
#header .navbar ul {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a,
#header .navbar a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: var(--transition-color), background var(--duration-fast) var(--ease-out);
}

.site-nav a:hover,
#header .navbar a:hover,
#header .navbar .active,
#header .navbar li:hover > a {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* CTA pill in nav */
.site-nav .nav-cta,
.nav-cta,
#header .navbar .nav-cta {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--radius-full) !important;
  padding: var(--space-2) var(--space-5) !important;
  transition: var(--transition-lift), background var(--duration-fast) var(--ease-out) !important;
}

.site-nav .nav-cta:hover,
.nav-cta:hover,
#header .navbar .nav-cta:hover {
  background: var(--color-primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta) !important;
}


/* ================================================================
   11. HERO SECTION
   ================================================================
   Split layout: editorial copy (left) + image composition (right).
   Dark walnut overlay on a full-bleed background photo.
   Floating product card anchored to image bottom-right.
   ================================================================ */

.hero,
#hero {
  position: relative;
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  padding-block: var(--section-lg);
  background:
    linear-gradient(125deg, rgba(14, 10, 6, 0.82) 0%, rgba(40, 28, 18, 0.60) 100%),
    image-set(url('../img/bg.webp') type('image/webp'), url('../img/bg.jpg') type('image/jpeg')) center/cover;
  color: #fff;
  overflow: hidden;
}

/* Subtle warm grain overlay — CSS-only texture */
.hero::before,
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(176, 122, 74, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(92, 52, 32, 0.18) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.hero > .container,
#hero > .container {
  position: relative;
  z-index: 1;
}

.hero-content,
#hero .row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--space-12), 7vw, var(--space-32));
  align-items: center;
}

/* Copy column */
.hero-copy,
.hero-text {
  position: relative;
  z-index: 1;
}

.hero-eyebrow,
#hero .hero-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--walnut-300);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--walnut-400);
  flex-shrink: 0;
}

#hero h1,
.hero h1 {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #fff;
  margin-bottom: var(--space-6);
  text-transform: none;
}

.hero-subtitle,
#hero .hero-subtitle {
  font-size: clamp(var(--text-base), 2vw, var(--text-lg));
  color: rgba(255, 255, 255, 0.75);
  max-width: 520px;
  line-height: var(--leading-normal);
  margin-bottom: var(--space-8);
}

.hero-actions,
#hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

/* Trust signals below CTA */
.hero-trust,
#hero .hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.hero-trust span::before {
  content: '✓  ';
  color: var(--walnut-400);
}

/* Media column */
.hero-media,
#hero .hero-media {
  position: relative;
  z-index: 1;
}

.hero-image,
#hero .hero-image {
  border-radius: var(--radius-image);
  overflow: hidden;
  box-shadow: var(--shadow-hero-image);
  border: 6px solid rgba(255, 255, 255, 0.14);
  background: var(--sand-800);
}

.hero-image img { width: 100%; display: block; }

/* Floating product card */
.hero-card,
#hero .hero-card {
  position: absolute;
  right: -var(--space-4);
  bottom: calc(-1 * var(--space-10));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(176, 122, 74, 0.18);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 240px;
}

.hero-card h2,
#hero .hero-card h2 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-base);
  margin: 0 0 var(--space-1);
  text-transform: none;
  letter-spacing: 0;
}

.hero-card p,
#hero .hero-card p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

@media (max-width: 1024px) {
  .hero-content, #hero .row {
    grid-template-columns: 1fr;
  }
  .hero-card, #hero .hero-card {
    position: static;
    margin-top: var(--space-6);
    display: inline-block;
  }
}

@media (max-width: 640px) {
  .hero h1, #hero h1 { font-size: clamp(2.4rem, 12vw, 3.5rem); }
  .hero-actions, #hero .hero-actions { flex-direction: column; }
}


/* ================================================================
   12. BUTTONS
   ================================================================
   Design philosophy: precise, slightly squared (4px radius),
   not pill-shaped — reflects woodworking precision.
   Exception: nav CTA pill for warmth and contrast.
   ================================================================ */

.btn,
.btn-solid,
.btn-outline,
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-btn);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  border: var(--border-width-thick) solid transparent;
  cursor: pointer;
  transition: var(--transition-lift), var(--transition-color);
  white-space: nowrap;
}

/* Primary — walnut fill */
.btn.primary,
.btn-solid,
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.btn.primary:hover, .btn.primary:focus,
.btn-solid:hover,  .btn-solid:focus {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta);
}

/* Ghost — outline with walnut text */
.btn.ghost,
.btn-outline,
.btn-ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--color-primary);
}

.btn.ghost:hover, .btn.ghost:focus,
.btn-outline:hover, .btn-outline:focus {
  background: rgba(176, 122, 74, 0.08);
  transform: translateY(-2px);
}

/* Ghost light — on dark backgrounds */
.btn.ghost.light,
.btn-outline-light {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.55);
}

.btn.ghost.light:hover, .btn.ghost.light:focus,
.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.8);
}

/* Dark — near-black on light backgrounds */
.btn.dark, .btn-dark {
  background: var(--text-base);
  color: var(--text-inverse);
  border-color: var(--text-base);
}

.btn.dark:hover, .btn-dark:hover {
  background: var(--charcoal-900);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* CTA button (used in CTA/CTA-banner sections) */
.cta-btn {
  background: var(--text-base);
  color: #fff;
  border-radius: var(--radius-full);
  padding: 0.9rem 1.8rem;
}

.cta-btn:hover {
  background: var(--charcoal-900);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Text link with animated underline */
.text-link {
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  position: relative;
  transition: color var(--duration-fast) var(--ease-out);
}

.text-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-normal) var(--ease-crafted);
}

.text-link:hover::after,
.text-link:focus::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Focus visible ring — branded */
:focus-visible {
  outline: none;
  box-shadow: var(--glow-focus);
}


/* ================================================================
   13. CARDS
   ================================================================ */

.card {
  background: var(--surface-card);
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  transition: var(--transition-lift), border-color var(--duration-normal) var(--ease-out);
}

.card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

/* Service card — icon + title + description */
.service-card,
.icon-box.build-card,
.services .icon-box {
  padding: var(--space-8) var(--space-6);
  position: relative;
  overflow: hidden;
  background: var(--surface-card);
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-card) !important;
  box-shadow: none;
  transition: var(--transition-lift), border-color var(--duration-normal) var(--ease-out) !important;
  z-index: 1;
}

/* Warm fill accent on hover — from bottom */
.services .icon-box::before,
.service-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background: linear-gradient(135deg, var(--walnut-600), var(--walnut-800));
  transition: height var(--duration-slow) var(--ease-crafted);
  z-index: -1;
}

.services .icon-box:hover::before,
.service-card:hover::before {
  height: 100%;
  border-radius: 0;
}

.services .icon-box:hover,
.service-card:hover {
  border-color: var(--walnut-600);
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}

.services .icon-box:hover .title a,
.services .icon-box:hover .description,
.services .icon-box:hover .icon i,
.service-card:hover h3,
.service-card:hover p {
  color: #fff;
}

/* Feature / Trust card */
.feature-card,
.step-card,
.how-it-works .step-card {
  background: var(--surface-card);
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-card) !important;
  border-top: var(--border-width-accent) solid var(--color-primary) !important;
  padding: var(--space-8) var(--space-6) !important;
  height: 100%;
  transition: var(--transition-lift) !important;
}

.feature-card:hover,
.step-card:hover,
.how-it-works .step-card:hover {
  box-shadow: var(--shadow-card-hover) !important;
  transform: translateY(-5px) !important;
}

/* Step number */
.step-number,
.how-it-works .step-number {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 700;
  color: var(--walnut-200);
  line-height: 1;
  margin-bottom: var(--space-4);
  display: block;
  letter-spacing: var(--tracking-tight);
}

/* Lead time card */
.lead-time-card {
  background: var(--surface-card);
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  height: 100%;
  transition: var(--transition-lift);
}

.lead-time-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.lead-time-range {
  font-family: var(--font-ui);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  display: block;
}

/* Team member card */
.member,
.team .member {
  text-align: center;
}

.member .pic,
.team .member .pic {
  overflow: hidden;
  border-radius: var(--radius-image);
  margin-bottom: var(--space-5);
  background: var(--surface-warm);
}

.member .pic img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-crafted);
}

.member:hover .pic img { transform: scale(1.04); }

.member-info h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.member-info span {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}


/* ================================================================
   14. PORTFOLIO GRID
   ================================================================ */

.portfolio .portfolio-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-warm);
}

.portfolio .portfolio-wrap img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-crafted);
  border-radius: 0;
}

.portfolio .portfolio-wrap:hover img { transform: scale(1.05); }

.portfolio .portfolio-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 40%,
    rgba(30, 24, 18, 0.70) 100%
  );
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  z-index: 1;
}

.portfolio .portfolio-wrap:hover::before { opacity: 1; }

.portfolio .portfolio-links {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  display: flex;
  gap: var(--space-2);
  transform: translateY(var(--space-6));
  opacity: 0;
  transition: transform var(--duration-normal) var(--ease-spring),
              opacity    var(--duration-normal) var(--ease-out);
}

.portfolio .portfolio-wrap:hover .portfolio-links {
  transform: translateY(0);
  opacity: 1;
}

.portfolio .portfolio-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-sm);
  color: var(--text-base);
  font-size: 1.2rem;
  transition: var(--transition-color), transform var(--duration-fast) var(--ease-spring);
}

.portfolio .portfolio-links a:hover {
  background: var(--color-primary);
  color: #fff;
  transform: scale(1.1);
}

.portfolio .portfolio-meta {
  padding-top: var(--space-4);
}

.portfolio .portfolio-meta h3 {
  font-size: var(--text-base);
  font-weight: 700;
  font-family: var(--font-ui);
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-1);
  text-transform: uppercase;
  color: var(--text-base);
}

/* Portfolio filters */
#portfolio-flters,
.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 auto var(--space-10);
  padding: var(--space-2) var(--space-3);
  list-style: none;
  background: transparent;
  border-radius: var(--radius-full);
  justify-content: center;
}

#portfolio-flters li,
.filter-chip {
  cursor: pointer;
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-body);
  border-radius: var(--radius-full);
  border: var(--border-width-default) solid var(--border-default);
  background: var(--surface-card);
  transition: var(--transition-color), border-color var(--duration-fast) var(--ease-out);
}

#portfolio-flters li:hover,
#portfolio-flters li.filter-active,
.filter-chip:hover,
.filter-chip.is-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}


/* ================================================================
   15. SECTION STYLES — ABOUT, CTA, PROCESS, STORE CTA
   ================================================================ */

/* About section */
.about {
  background: linear-gradient(
    rgba(250, 246, 240, 0.90),
    rgba(250, 246, 240, 0.95)
  ),
  center/cover no-repeat;
  padding: var(--section-md) 0;
}

.about .content {
  padding: var(--space-10) var(--space-8) var(--space-10) 0;
}

.about .content h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  color: var(--text-base);
  font-family: var(--font-serif);
}

/* About CTA link — remove blue remnant, use walnut */
.about .content .about-btn {
  background: var(--color-primary) !important;
  border-radius: var(--radius-full) !important;
  padding: var(--space-3) var(--space-8) var(--space-3) var(--space-6) !important;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: #fff !important;
  transition: var(--transition-lift);
}

.about .content .about-btn:hover {
  background: var(--color-primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta);
}

/* About icon boxes — replace blue icons with walnut */
.about .icon-boxes .icon-box i {
  color: var(--color-primary) !important;
  font-size: 2.25rem;
  margin-bottom: var(--space-3);
}

.about .icon-boxes .icon-box h3 {
  font-size: var(--text-base);
  font-weight: 700;
  font-family: var(--font-ui);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}


/* Primary CTA Banner */
.cta,
#cta {
  background:
    linear-gradient(125deg, rgba(250, 246, 240, 0.95), rgba(237, 217, 196, 0.92)),
    center/cover no-repeat;
  padding: var(--section-sm) 0;
  position: relative;
  overflow: hidden;
}

/* Decorative side accent */
.cta::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--walnut-400), var(--walnut-700));
}

.cta h2 { font-family: var(--font-serif); color: var(--text-base); }
.cta p  { color: var(--text-muted); }
.cta .cta-list { list-style: none; padding: 0; margin: var(--space-5) 0 0; }
.cta .cta-list li {
  padding: var(--space-2) 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-body);
}


/* Store CTA — warm walnut full-bleed */
.store-cta {
  background:
    linear-gradient(125deg, rgba(92, 52, 32, 0.92), rgba(62, 34, 18, 0.95)),
    center/cover no-repeat;
  padding: var(--section-sm) 0;
  color: #fff;
}

.store-cta h2 { color: #fff; font-family: var(--font-serif); }
.store-cta p  { color: rgba(255,255,255,0.80); }

.store-cta .cta-btn {
  border: 2px solid rgba(255,255,255,0.70);
  background: transparent;
  color: #fff;
  border-radius: var(--radius-full);
}

.store-cta .cta-btn:hover {
  background: #fff;
  color: var(--walnut-700);
  box-shadow: none;
}


/* Process section */
.process.section-bg,
.process,
#process {
  background-color: var(--surface-warm) !important;
}

.process-caption {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-4);
}

/* Lead Times section */
.lead-times.section-bg,
.lead-times {
  background-color: var(--surface-alt) !important;
}

.lead-times .lead-time-card i {
  color: var(--color-primary) !important;
}


/* ================================================================
   16. SECTION TITLE
   ================================================================ */

.section-title {
  text-align: center;
  padding-bottom: var(--space-10);
}

.section-title h2 {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-family: var(--font-serif);
  color: var(--text-base) !important;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
  position: relative;
}

/* Clean underline accent — replaces the PNG decoration */
.section-title h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--walnut-500), var(--walnut-300));
  margin: var(--space-4) auto 0;
  border-radius: var(--radius-full);
}

.section-title p {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: var(--container-prose);
  margin: 0 auto;
}


/* ================================================================
   17. CONTACT SECTION & FORM
   ================================================================ */

.contact.section-bg,
.contact {
  background-color: var(--surface-alt) !important;
}

.contact .info-box {
  background: var(--surface-card);
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  transition: var(--transition-lift);
}

.contact .info-box:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}

.contact .info-box i {
  font-size: 2rem;
  color: var(--color-primary) !important;
}

.contact .info-box h3 {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-base);
  margin: 0;
}

/* Form inputs */
.form-control,
.contact-form input,
.contact-form textarea,
#contact-form input,
#contact-form textarea {
  width: 100%;
  padding: 0.85rem var(--space-5);
  border-radius: var(--radius-input) !important;
  border: var(--border-width-default) solid var(--border-default) !important;
  background: var(--surface-card) !important;
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow   var(--duration-fast) var(--ease-out);
}

.form-control:focus,
.contact-form input:focus,
.contact-form textarea:focus,
#contact-form input:focus,
#contact-form textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: var(--glow-focus) !important;
  outline: none;
}

#contact-form button[type="submit"] {
  width: 100%;
  margin-top: var(--space-2);
  padding: 0.85rem var(--space-8);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition-lift), background var(--duration-fast) var(--ease-out);
}

#contact-form button[type="submit"]:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta);
}

/* Fix Bootstrap's .form-group spacing */
.form-group { margin-bottom: var(--space-4); }


/* ================================================================
   18. FOOTER
   ================================================================ */

#footer,
.site-footer {
  background: var(--sand-900) !important;
  color: rgba(255, 255, 255, 0.70);
}

.footer-top {
  padding: clamp(var(--space-12), 6vw, var(--space-20)) 0 var(--space-10);
}

.footer-info h3,
.footer-brand {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: var(--space-4);
  display: block;
}

.footer-info p,
#footer p,
.site-footer p {
  color: rgba(255, 255, 255, 0.60);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.footer-links h4 {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--space-5);
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-links ul li a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-links ul li a:hover {
  color: var(--walnut-300);
}

.footer-links .bx-chevron-right { display: none; }

/* Social links in footer */
.footer-info .social-links a,
#footer .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.70);
  font-size: 1.1rem;
  transition: var(--transition-lift), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  background: transparent;
}

.footer-info .social-links a:hover,
#footer .social-links a:hover {
  border-color: var(--walnut-400);
  color: var(--walnut-300);
  transform: translateY(-2px);
}

/* Footer copyright bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-6) 0;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
}


/* ================================================================
   19. MOBILE NAV — Remove blue overlay, use warm dark
   ================================================================ */

.navbar-mobile {
  background: rgba(30, 24, 18, 0.97) !important;
  backdrop-filter: blur(16px);
}

.navbar-mobile ul {
  background-color: var(--sand-050) !important;
  border-radius: var(--radius-lg);
}

.navbar-mobile a,
.navbar-mobile a:focus {
  color: var(--text-base) !important;
  font-family: var(--font-ui);
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
  color: var(--color-primary) !important;
  background: rgba(176, 122, 74, 0.06);
}

.navbar-mobile .nav-cta,
.navbar-mobile .nav-cta:focus {
  background: var(--color-primary) !important;
  color: #fff !important;
}


/* ================================================================
   20. SECTION-BG OVERRIDE
   ================================================================
   Fix the template's cool/blue section-bg to warm sand.
   ================================================================ */

.section-bg {
  background-color: var(--surface-warm) !important;
}


/* ================================================================
   21. IMAGE PRESENTATION
   ================================================================ */

/* Gallery/portfolio images */
.gallery-card,
.portfolio-item img {
  border-radius: var(--radius-lg);
}

/* Animated image zoom on hover */
.img-hover-zoom {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-warm);
}

.img-hover-zoom img {
  width: 100%;
  transition: transform var(--duration-slow) var(--ease-crafted);
}

.img-hover-zoom:hover img { transform: scale(1.05); }

/* Image with natural frame — warm border + shadow */
.img-framed {
  border-radius: var(--radius-image);
  box-shadow: var(--shadow-hero-image);
  border: 6px solid #fff;
  overflow: hidden;
}


/* ================================================================
   22. UTILITY CLASSES
   ================================================================ */

/* Parallax banner */
.parallax-break {
  position: relative;
  background: center/cover fixed no-repeat;
  padding: var(--section-sm) 0;
  color: #fff;
}

.parallax-break::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(10, 7, 4, 0.82),
    rgba(45, 32, 20, 0.70)
  );
}

.parallax-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: var(--container-prose);
  margin: 0 auto;
}

.parallax-content h2,
.parallax-content p { color: #fff; }

/* Species/material chips */
.species-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.species-list span,
.species-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-base);
  transition: var(--transition-color), border-color var(--duration-fast);
}

.species-list span:hover, .species-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Back-to-top */
.back-to-top {
  background: var(--color-primary) !important;
  border-radius: var(--radius-md) !important;
  transition: var(--transition-lift) !important;
}

.back-to-top:hover {
  background: var(--color-primary-dark) !important;
  transform: translateY(-2px);
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus { top: 0; color: #fff; }


/* ================================================================
   23. ANIMATIONS
   ================================================================ */

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ================================================================
   24. RESPONSIVE OVERRIDES
   ================================================================ */

@media (max-width: 1024px) {
  .about .content { padding-right: 0; }
}

@media (max-width: 768px) {
  .about { text-align: center; }
  .cta::before { display: none; }
  .section-title h2::after { margin: var(--space-3) auto 0; }
}

@media (max-width: 600px) {
  .card, .contact-form { padding: var(--space-6); }

  .portfolio .portfolio-links {
    transform: none;
    opacity: 1;
    position: static;
    margin-top: var(--space-3);
    justify-content: flex-start;
  }

  .portfolio .portfolio-wrap::before { opacity: 0.5; }
}

/* ================================================================
   END OF DESIGN SYSTEM
   ================================================================
   Usage:
     <link rel="stylesheet" href="assets/css/design-system.css">
   Place AFTER Bootstrap and AFTER any existing style.css.

   To apply the full system cleanly:
     1. Add class="section" to all <section> elements
     2. Replace .section-bg with .section-warm or .section-alt
     3. Update mobile nav overlay class if using custom JS

   Design Decisions Summary:
     • All blue/teal template remnants replaced with walnut/sage
     • Section backgrounds now warm sand (--surface-warm) or
       neutral (--surface-alt), never cool blue
     • Buttons use precise 4px radius — precision over pill shapes
       (except nav CTA and filter chips which stay pill-shaped)
     • Cards hover with warm bottom-fill on service cards
     • Typography: Merriweather editorial headings, EB Garamond
       body, Montserrat/Raleway for all UI labels
     • Shadows carry warm brown undertones throughout
   ================================================================ */

/* ================================================================
   TEAM BIO CARDS
   ================================================================ */

.team-bio-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 900px;
  margin-inline: auto;
}

.team-bio-card {
  text-align: center;
}

.team-bio-card .card-image.circle {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto var(--space-5);
  border: 4px solid var(--border-default);
  transition: border-color var(--duration-normal) var(--ease-out);
}

.team-bio-card:hover .card-image.circle {
  border-color: var(--color-primary);
}

.team-bio-card h3 {
  margin-bottom: var(--space-1);
}

.team-role {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.team-bio-card > p:not(.team-role) {
  font-size: var(--text-sm);
  text-align: left;
  margin-bottom: var(--space-5);
}