/* ============================================================
   CCC — Creative Christian Coaching
   Commercial Leadership & Public Speaking Theme
   ============================================================ */

:root {
  /* High-Contrast Professional Logo Palette */
  --brand-espresso: #3a2720;     /* Primary dark neutral from logo */
  --brand-espresso-light: #4c352d;
  --brand-cream: #faf7f2;        /* Editorial background canvas */
  --brand-white: #ffffff;        /* Raised card background */
  
  --brand-teal: #2c8c92;         /* Leadership action & focus color */
  --brand-teal-hover: #226f74;
  --brand-rose: #b84a5d;         /* Accent warmth & storytelling */
  --brand-rose-hover: #9e3d4f;
  --brand-sage: #5a7a5e;
  
  --text-dark: #2b1d18;          /* High contrast readability */
  --text-muted: #6e5c56;         /* Secondary copy */
  --border-subtle: rgba(58, 39, 32, 0.12);

  /* Typography */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body: 'Cormorant Garamond', serif;

  /* Form & Layout */
  --radius-card: 8px;
  --radius-btn: 4px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body { 
    background-color: var(--brand-cream); 
    color: var(--text-dark); 
    font-family: var(--font-body); 
    font-size: 1.2rem; 
    line-height: 1.7; 
    -webkit-font-smoothing: antialiased; 
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.page { min-height: 100vh; background: var(--brand-cream); }
.container { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.text-center { text-align: center; }

/* ── Typography Scale ── */
.eyebrow { font-family: var(--font-sans); font-size: .8rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; margin-bottom: 1.25rem; }
.eyebrow-rose { color: var(--brand-rose); }
.eyebrow-teal { color: var(--brand-teal); }
.eyebrow-sage { color: var(--brand-sage); }

.section-title { font-family: var(--font-serif); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; line-height: 1.15; color: var(--brand-espresso); letter-spacing: -0.01em; margin-bottom: 1.25rem; }
.section-lead { max-width: 44rem; margin: 0 auto; color: var(--text-muted); font-weight: 300; font-size: 1.25rem; line-height: 1.7; }

/* ── Primary Navigation ── */
.site-nav-wrapper { 
  background: var(--brand-espresso); 
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
  position: relative;
}

.site-nav { 
  position: relative; 
  z-index: 10; 
  max-width: 72rem; 
  margin: 0 auto; 
  padding: 1rem 1.5rem; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
}

/* 1. Fluid Logo Sizing (Scales smoothly using clamp) */
.nav-brand-logo { 
  /* Min 70px on tiny phones, ideal 8vw, Max 130px on large displays */
  height: clamp(70px, 8vw, 130px); 
  width: auto; 
  object-fit: contain; 
  transition: transform .3s ease;
}

/* 2. Desktop Navigation Links */
.nav-links { 
  display: flex; 
  gap: 2rem; 
  margin: 0; 
  padding: 0; 
  list-style: none; 
}

.nav-link { 
  font-family: var(--font-sans); 
  font-size: .75rem; 
  font-weight: 600; 
  letter-spacing: .18em; 
  text-transform: uppercase; 
  transition: opacity .3s ease; 
  text-decoration: none;
}

.nav-link:hover { opacity: .75; }
.nav-link--rose { color: #e8a0a8; }
.nav-link--teal { color: #8fd4de; }
.nav-link--sage { color: #a8d8cc; }
.nav-link--cream { color: #faf7f2; }

/* Hide mobile toggle inputs on desktop */
.nav-toggle, 
.hamburger { display: none; }


/* ── Mobile Layout & Hamburger Menu (< 768px) ── */
@media (max-width: 767px) {
  
  .site-nav {
    /* Stack elements to easily center the logo */
    justify-content: center;
    padding: 0.75rem 1.5rem;
  }

  /* Center the logo on mobile */
  .nav-brand-logo {
    margin: 0 auto;
  }

  /* Stylized Mobile Hamburger Button */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 20px;
    cursor: pointer;
    z-index: 30;
  }

  .hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--brand-white, #ffffff);
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
  }

  /* Hidden Checkbox for CSS-Only Toggle */
  .nav-toggle {
    display: none;
  }

  /* Mobile Slide-Down Nav Drawer */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--brand-espresso);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
    
    /* Hidden State */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 20px 30px rgba(0,0,0,0.3);
  }

  /* Reveal Menu When Checkbox is Checked */
  .nav-toggle:checked ~ .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Animate Hamburger into an "X" when open */
  .nav-toggle:checked ~ .hamburger span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .nav-toggle:checked ~ .hamburger span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle:checked ~ .hamburger span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
}

/* ── High-Impact Hero ── */
.hero { position: relative; overflow: hidden; background: var(--brand-espresso); color: var(--brand-cream); padding: 4rem 0 6rem; }
.hero-inner { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-kicker { font-family: var(--font-sans); font-size: .75rem; font-weight: 700; letter-spacing: .35em; text-transform: uppercase; color: #8fd4de; margin-bottom: 1.25rem; }
.hero-title { font-family: var(--font-serif); font-size: clamp(2.8rem, 6.5vw, 5.2rem); font-weight: 700; line-height: 1.05; color: var(--brand-cream); letter-spacing: -0.01em; margin-bottom: 1rem; }
.hero-title em { color: #e8a0a8; font-style: italic; }
.hero-rule { width: 4rem; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-rose), transparent); margin: 1.5rem auto; }
.hero-tagline { max-width: 40rem; font-size: clamp(1.2rem, 2.2vw, 1.4rem); font-style: italic; font-weight: 300; color: #e2d9d5; margin-bottom: .75rem; }
.hero-sub { max-width: 36rem; color: #bcaaa4; font-weight: 300; font-size: 1.05rem; line-height: 1.7; margin-bottom: 2.5rem; }
.hero-media { position: relative; width: 100%; max-width: 56rem; border-radius: var(--radius-card); overflow: hidden; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 25px 50px -12px rgba(0,0,0,.45); }
.hero-media img { width: 100%; }
.hero-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 2.5rem; text-align: left; background: linear-gradient(to top, rgba(20,10,5,.88) 0%, transparent 100%); }
.hero-caption p { color: #fff; font-family: var(--font-serif); font-style: italic; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.5; }
.hero-scripture { display: block; margin-top: .5rem; font-family: var(--font-sans); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: #8fd4de; }
.hero-journey { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; margin-top: 3rem; }
.journey-arrow { color: #e8a0a8; font-size: 1.125rem; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 2.25rem; border-radius: var(--radius-btn); border: 0; cursor: pointer; font-family: var(--font-sans); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(58, 39, 32, 0.15); }
.btn-teal { background: var(--brand-teal); color: #fff; }
.btn-teal:hover { background: var(--brand-teal-hover); }
.btn-rose { background: var(--brand-rose); color: #fff; }
.btn-rose:hover { background: var(--brand-rose-hover); }
.btn-espresso { background: var(--brand-espresso); color: #fff; }
.btn-espresso:hover { background: var(--brand-espresso-light); }
.btn-outline-cream { background: transparent; border: 1px solid rgba(250,247,242,0.4); color: var(--brand-cream); }
.btn-outline-cream:hover { background: var(--brand-cream); color: var(--brand-espresso); }
.btn-sm { padding: .85rem 1.75rem; font-size: .75rem; }

/* ── Hero Buttons Section Spacing ── */

/* Container holding the three buttons */
.hero-cta-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    
    /* 1. Moves buttons down below the hero banner area */
    margin-top: 3.5rem; 
    position: relative;
    z-index: 10;
}


/* ── Pill Button Base & Uniform Hover Style ── */

.btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px; /* Pill shape */
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Default Semi-Transparent Dark Glass Background */
    background: rgba(58, 39, 32, 0.6); 
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Individual Color Accents (Text & Arrow Color) */
.btn-pill--rose { color: #e8a0a8; border-color: rgba(232, 160, 168, 0.3); }
.btn-pill--sage { color: #a8d8cc; border-color: rgba(168, 216, 204, 0.3); }
.btn-pill--teal { color: #8fd4de; border-color: rgba(143, 212, 222, 0.3); }

/* 2. Unified White Light Hover Effect for ALL 3 Buttons */
.btn-pill:hover {
    background: rgba(255, 255, 255, 0.95); /* Bright white filled background */
    color: var(--brand-espresso);           /* Dark crisp text on hover */
    border-color: #ffffff;
    transform: translateY(-2px);           /* Subtle upward float */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.btn-pill:hover .arrow {
    transform: translateX(3px); /* Gentle arrow shift on hover */
}

/* Smooth Arrow Transition */
.btn-pill .arrow {
    transition: transform 0.3s ease;
}

/* ── Section Structure ── */
.section { position: relative; padding: 6rem 0; overflow: hidden; }
.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 4rem; }
.section-icon { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.icon-rose { background: rgba(184, 74, 93, 0.1); border: 1px solid rgba(184, 74, 93, 0.25); }
.icon-teal { background: rgba(44, 140, 146, 0.1); border: 1px solid rgba(44, 140, 146, 0.25); }
.icon-sage { background: rgba(90, 122, 94, 0.1); border: 1px solid rgba(90, 122, 94, 0.25); }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: start; }
.transition-breath { height: 1px; width: 100%; }
.breath-teal { background: linear-gradient(90deg, transparent, rgba(44, 140, 146, 0.3), transparent); }
.breath-sage { background: linear-gradient(90deg, transparent, rgba(90, 122, 94, 0.3), transparent); }
.breath-rose { background: linear-gradient(90deg, transparent, rgba(184, 74, 93, 0.3), transparent); }

/* ── Witness Section ── */
.witness-section { background: var(--brand-cream); }
.step-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3.5rem; }
.step-card { background: var(--brand-white); border: 1px solid var(--border-subtle); border-top: 4px solid var(--brand-rose); border-radius: var(--radius-card); padding: 2.25rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 10px 30px rgba(58, 39, 32, 0.04); transition: transform .3s ease, box-shadow .3s ease; }
.step-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(58, 39, 32, 0.08); }
.step-num { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-btn); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; margin-bottom: .25rem; }
.step-num-rose { background: rgba(184, 74, 93, 0.1); color: var(--brand-rose); }
.step-num-teal { background: rgba(44, 140, 146, 0.1); color: var(--brand-teal); }
.step-num-sage { background: rgba(90, 122, 94, 0.1); color: var(--brand-sage); }
.step-card h3 { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; color: var(--brand-espresso); }
.step-card p { color: var(--text-muted); font-weight: 300; font-size: 1rem; line-height: 1.7; }
.tag { display: inline-block; font-family: var(--font-sans); font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; border-radius: 999px; padding: .3rem .75rem; align-self: flex-start; }
.tag-rose { color: var(--brand-rose); background: rgba(184, 74, 93, 0.08); }
.tag-teal { color: var(--brand-teal); background: rgba(44, 140, 146, 0.08); }
.tag-sage { color: var(--brand-sage); background: rgba(90, 122, 94, 0.1); }

/* Editorial Callout for Ministry Context */
.witness-note { max-width: 64rem; margin: 0 auto 3rem; background: var(--brand-white); border: 1px solid var(--border-subtle); border-left: 5px solid var(--brand-rose); border-radius: var(--radius-card); padding: 2.75rem; text-align: left; box-shadow: 0 10px 30px rgba(58, 39, 32, 0.03); }
.witness-note .ministry-tag { display: inline-block; font-family: var(--font-sans); font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-rose); margin-bottom: .75rem; }
.witness-note h3 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: var(--brand-espresso); margin-bottom: 1rem; }
.witness-note p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.8; margin-bottom: 1rem; }
.witness-note p:last-of-type { margin-bottom: 0; }
.witness-note a { color: var(--brand-rose); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.continue-link { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-sans); font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; transition: opacity .3s ease; }
.continue-link:hover { opacity: .75; }
.continue-link--rose { color: var(--brand-rose); }
.continue-link--teal { color: var(--brand-teal); }
.continue-link--sage { color: var(--brand-sage); }

/* ── Encounter Section ── */
.encounter-section { background: #f2ebe1; }
.media-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.media-frame { position: relative; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 20px 45px rgba(58, 39, 32, 0.12); border: 1px solid var(--border-subtle); }
.media-frame img { width: 100%; }
.scripture-card { border-radius: var(--radius-card); padding: 2rem; background: var(--brand-white); border: 1px solid var(--border-subtle); }
.scripture-card p { font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; line-height: 1.7; color: var(--brand-espresso); margin-bottom: .75rem; }
.scripture-card span { font-family: var(--font-sans); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--brand-rose); font-weight: 700; }

.teaching-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.teaching-card { background: var(--brand-white); border-radius: var(--radius-card); padding: 2rem; border: 1px solid var(--border-subtle); border-left: 4px solid var(--brand-teal); box-shadow: 0 10px 30px rgba(58, 39, 32, 0.03); transition: transform .3s ease; }
.teaching-card:hover { transform: translateY(-3px); }
.teaching-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.teaching-dot { width: .5rem; height: .5rem; border-radius: 50%; }
.dot-teal { background: var(--brand-teal); }
.dot-rose { background: var(--brand-rose); }
.dot-sky { background: #5ab8c8; }
.teaching-label { font-family: var(--font-sans); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-teal); }
.teaching-label--rose { color: var(--brand-rose); }
.teaching-label--sky { color: #23808e; }
.teaching-card h3 { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; color: var(--brand-espresso); margin-bottom: .5rem; }
.teaching-card p { color: var(--text-muted); font-weight: 300; font-size: 1rem; line-height: 1.75; }

/* ── Formation Section ── */
.formation-section { background: var(--brand-cream); }
.framework-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3.5rem; }
/* ── Updated Framework Cards (Centered & Spanning Tags) ── */

.framework-card { 
    background: var(--brand-white); 
    border: 1px solid var(--border-subtle); 
    border-top: 4px solid var(--brand-sage); 
    border-radius: var(--radius-card); 
    padding: 2.25rem 2rem; 
    display: flex; 
    flex-direction: column; 
    align-items: center; /* Centers the image, tags, and headings vertically */
    text-align: center;   /* Centers all body text and headers */
    gap: 0.75rem; 
    box-shadow: 0 10px 30px rgba(58, 39, 32, 0.04); 
    transition: transform .3s ease, box-shadow .3s ease; 
}

.framework-card:hover { 
    transform: translateY(-4px); 
    box-shadow: 0 16px 40px rgba(58, 39, 32, 0.08); 
}

/* Updated Thumbnail Badge Styling */
.framework-card .thumb { 
    width: 4.5rem; 
    height: 4.5rem; 
    object-fit: cover; 
    border-radius: var(--radius-card); 
    border: 1px solid rgba(58, 39, 32, 0.15);
    box-shadow: 0 4px 12px rgba(58, 39, 32, 0.08);
    margin-bottom: 0.25rem; 
}

/* Spanning Tag Banner */
.tag { 
    display: block; 
    width: 100%; /* Stretches tag across the full card width */
    text-align: center;
    font-family: var(--font-sans); 
    font-size: .7rem; 
    font-weight: 700; 
    letter-spacing: .18em; 
    text-transform: uppercase; 
    border-radius: 4px; /* Matches sharp executive corner system */
    padding: .4rem .75rem; 
}

/* Headings Alignment inside Framework Card */
.framework-card h5 { 
    font-family: var(--font-sans); 
    font-size: .75rem; 
    letter-spacing: .15em; 
    text-transform: uppercase; 
    color: var(--brand-sage); 
    font-weight: 700; 
    margin-top: .25rem; 
}

.framework-card h3 { 
    font-family: var(--font-serif); 
    font-size: 1.4rem; 
    font-weight: 600; 
    color: var(--brand-espresso); 
    margin-bottom: .25rem; 
}

.framework-card p { 
    color: var(--text-muted); 
    font-weight: 300; 
    font-size: 1rem; 
    line-height: 1.7; 
}

.scripture-line { 
    font-style: italic; 
    font-size: .95rem; 
    color: var(--brand-teal); 
    margin-top: auto; 
    padding-top: .5rem;
}
.note-card { max-width: 44rem; margin: 0 auto 3rem; background: var(--brand-white); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: 2rem; text-align: center; box-shadow: 0 8px 20px rgba(58,39,32,0.02); }
.note-card p { color: var(--text-muted); font-style: italic; font-size: 1.15rem; line-height: 1.7; }

/* ── Expression Section ── */
.expression-section { background: #f2ebe1; }
.expression-quote-card { max-width: 44rem; margin: 0 auto 4rem; text-align: center; background: var(--brand-white); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: 2.75rem; box-shadow: 0 10px 30px rgba(58,39,32,0.04); }
.expression-quote-card p { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; line-height: 1.7; color: var(--brand-espresso); margin-bottom: 1rem; }
.expression-quote-card span { font-family: var(--font-sans); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--brand-rose); font-weight: 700; }

.ministry-card { background: var(--brand-white); border: 1px solid var(--border-subtle); border-top: 4px solid var(--brand-espresso); border-radius: var(--radius-card); padding: 2.5rem; box-shadow: 0 10px 30px rgba(58, 39, 32, 0.05); margin-top: 1.25rem; }
.ministry-card .ministry-tag { font-family: var(--font-sans); font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--brand-rose); display: block; margin-bottom: .5rem; }
.ministry-card h3 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: var(--brand-espresso); margin-bottom: 1.25rem; }
.ministry-card p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.25rem; }

/* Narrative */
.narrative-col { background: var(--brand-cream); border: 1px solid var(--border-subtle);border-top: 4px solid var(--brand-teal); border-radius: var(--radius-card); padding: 2.5rem; box-shadow: 0 10px 30px rgba(58, 39, 32, 0.05); }
.narrative-col h2 { font-size: 2.25rem; margin-bottom: 1.5rem; }
.narrative-col p { font-size: 1.125rem; line-height: 1.7; color: var(--slate); margin-bottom: 1.5rem; }

/* ── Contact Band ── */
.contact-band { position: relative; padding: 4.5rem 1.5rem; text-align: center; background: var(--brand-white); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.contact-quote { max-width: 38rem; margin: 0 auto 1rem; font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; color: var(--brand-espresso); }
.contact-link { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-sans); font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-teal); transition: opacity .3s ease; }
.contact-link:hover { opacity: .75; }

/* ── Dark Executive Footer ── */
.site-footer { position: relative; padding: 5rem 1.5rem 3rem; overflow: hidden; background: var(--brand-espresso); color: var(--brand-cream); }
.footer-topline { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--brand-teal), var(--brand-rose), var(--brand-sage)); }
.footer-inner { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; }
.footer-brand { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; padding-bottom: 2.75rem; margin-bottom: 2.75rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-kicker { font-family: var(--font-sans); font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #8fd4de; margin-bottom: .5rem; }
.footer-brand h3 { font-family: var(--font-serif); font-size: 1.85rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }
.footer-brand p { max-width: 36rem; color: #bcaaa4; font-size: 1.05rem; line-height: 1.7; }
.footer-cta { display: inline-flex; align-items: center; gap: .5rem; padding: 1rem 2rem; border-radius: var(--radius-btn); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; font-family: var(--font-sans); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: all .3s ease; }
.footer-cta:hover { background: #fff; color: var(--brand-espresso); }
.footer-cols { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.footer-col h4 { font-family: var(--font-sans); font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #e8a0a8; margin-bottom: 1.25rem; }
.footer-col ul { display: flex; flex-direction: column; gap: .75rem; }
.footer-col a { font-family: var(--font-sans); font-size: .85rem; color: #bcaaa4; transition: color .2s ease; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
    display: grid;
    /* 1fr = left, auto = center, 1fr = right */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,.1);
}

.footer-logo-wrap {
    display: flex;
    justify-content: flex-start; /* Aligns logo to the left */
}

.footer-logo {
    height: 40px;
    width: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.footer-copyright {
    text-align: center;
    font-family: var(--font-sans);
    font-size: .75rem;
    letter-spacing: .08em;
    color: #8d7a74;
}

.footer-legal-nav {
    display: flex;
    justify-content: flex-end; /* Aligns nav to the right */
    gap: 1.5rem;
}

/* Ensure the link-button behaves in the nav */
.link-button {
    background: none;
    border: none;
    color: #8d7a74;
    text-decoration: underline;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: .75rem;
    letter-spacing: .08em;
    padding: 0;
    transition: color 0.2s;
}
.link-button:hover { color: #fff; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .footer-bottom {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }
    .footer-logo-wrap { justify-content: center; }
    .footer-legal-nav { justify-content: center; }
}

.footer-social { display: flex; align-items: center; gap: .75rem; }
.social-btn { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); transition: transform .3s ease; }
.social-btn:hover { transform: scale(1.1); }



.footer-logo:hover {
    opacity: 1;
}

/* ── Modal Trigger ── */
  .link-button { font-family: var(--font-sans); font-size: .75rem; letter-spacing: .08em; color: #8d7a74; background: none; padding: 0;}

  /* HTML dialog backdrop and box */
  dialog {border: 1px solid #ccc; border-radius: 8px; padding: 1.5rem; max-width: 500px; width: 90%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}

  /* Dim the background behind the modal */
  dialog::backdrop {background: rgba(0, 0, 0, 0.5);}

/* ── Responsive ── */
@media (min-width: 640px) { .step-grid, .framework-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .step-grid, .framework-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { flex-direction: row; align-items: center; justify-content: space-between; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) { .section { padding: 4rem 0; } }