/* ==========================================================================
   Homepage-only styles
   Loaded only by src/pages/index.astro (after shared.css) so the homepage's
   unique sections — split hero, process rows, values, services, paths, team,
   and CTA band — keep their layout.

   This lives in public/ rather than an inline <style slot="head"> block on
   purpose: Astro emits inline page styles as a hashed, scoped stylesheet
   (/_astro/*.css), and a stale cached copy of that file silently drops the
   homepage layout. Files under public/ are served unhashed and are immune.
   ========================================================================== */

section { padding: clamp(68px, 8vw, 104px) 0; }

    .eyebrow { color: var(--blue); font: 700 .76rem/1.4 inherit; letter-spacing: 2.4px; text-transform: uppercase; margin: 0; }

    h2.section-title { color: var(--navy-deep); font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.16; letter-spacing: -.01em; margin: 12px 0 16px; }

    .section-head { max-width: 700px; margin: 0 auto clamp(44px, 6vw, 64px); text-align: center; }
    .section-head p:last-child { max-width: 620px; margin: 0 auto; font-size: 1.06rem; line-height: 1.7; }

    .section-inverse { background: radial-gradient(130% 130% at 12% 0%, #1e3d2c 0%, var(--navy-deep) 58%, #0f1f18 100%); color: #cdddd2; }
    .section-inverse .eyebrow { color: var(--gold); }
    .section-inverse h2, .section-inverse h2.section-title { color: var(--white); }
    .section-inverse p { color: #cdddd2; }

    .contact-strip { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 38px; font-size: .9rem; color: #cdddd2; }

    .card { background: var(--white); color: var(--text); border: 1px solid rgba(20,38,28,.08); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px; }

    .values { padding: clamp(52px, 6vw, 74px) 0; }
    .value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
    .value { padding: 26px 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; color: var(--white); text-align: center; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
    .value:hover { transform: translateY(-3px); background: rgba(255,255,255,.1); border-color: rgba(246,185,59,.42); }
    .value strong { display: block; color: var(--gold); font-size: 1.06rem; letter-spacing: .01em; }
    .value span { display: block; margin-top: 5px; font-size: .85rem; color: #c3d5c9; }

    .services { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
    .service { display: flex; flex-direction: column; background: var(--white); border: 1px solid rgba(20,38,28,.08); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(20,38,28,.06); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
    .service:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(2,102,66,.2); }
    .service img { height: 220px; width: 100%; object-fit: cover; }
    .service-body { display: flex; flex-direction: column; flex: 1; padding: 30px; }
    .service h3 { color: var(--navy-deep); font-size: 1.25rem; margin: 0 0 10px; }
    .service h3 a { color: inherit; }
    .service p { margin: 0 0 22px; }
    .service .button { align-self: flex-start; margin-top: auto; }

    .path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 60px); align-items: center; }
    .path-grid img { width: 100%; height: 440px; object-fit: cover; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); box-shadow: 0 30px 60px rgba(8,18,13,.45); }
    .path-grid h2 { color: var(--white); margin: 10px 0 22px; font-size: clamp(1.85rem, 3.2vw, 2.5rem); line-height: 1.16; letter-spacing: -.01em; }
    .path-list { list-style: none; padding: 0; margin: 0; }
    .path-list li { margin-bottom: 18px; padding-left: 40px; position: relative; color: #cdddd2; }
    .path-list li strong { color: var(--white); }
    .path-list li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #2a2f07; font: 900 .78rem/26px system-ui; text-align: center; }
    .path-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

    .button { background: transparent; border: 2px solid var(--navy); color: var(--navy); transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
    .button:hover { background: var(--navy); border-color: var(--navy); color: var(--white); transform: translateY(-2px); }
    .button-solid { background: var(--navy); border-color: var(--navy); color: var(--white); }
    .button-solid:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--white); transform: translateY(-2px); }
    .section-inverse .button { border-color: rgba(255,255,255,.45); background: transparent; color: var(--white); }
    .section-inverse .button:hover { background: var(--white); border-color: var(--white); color: var(--navy-deep); }
    .section-inverse .button-solid { background: var(--gold); border-color: var(--gold); color: #2a2f07; }
    .section-inverse .button-solid:hover { background: #ffcb52; border-color: #ffcb52; color: #2a2f07; }

    .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
    .team { display: flex; flex-direction: column; align-items: center; padding: 34px 26px; background: var(--white); border: 1px solid rgba(20,38,28,.08); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(20,38,28,.06); text-align: center; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
    .team:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(2,102,66,.2); }
    .team img { width: 140px; height: 140px; margin: 0 auto 22px; border: 4px solid var(--sky); box-shadow: 0 0 0 1px rgba(20,38,28,.08); border-radius: 50%; object-fit: cover; }
    .team h3 { color: var(--navy-deep); margin: 0 0 6px; font-size: 1.15rem; }
    .team p { margin: 0 0 22px; font-size: .92rem; }
    .team-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: auto; }
    .team .button { min-height: 44px; padding: 10px 20px; }

    .cta-section { padding-top: 0; }
    .cta-band { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 100%); color: var(--white); border-radius: calc(var(--radius) + 6px); box-shadow: 0 30px 70px rgba(8,18,13,.28); padding: clamp(38px, 5vw, 62px); display: flex; gap: 30px; align-items: center; justify-content: space-between; }
    .cta-band::before { content: ""; position: absolute; top: -45%; right: -8%; width: 460px; height: 460px; background: radial-gradient(circle, rgba(246,185,59,.22), transparent 65%); pointer-events: none; }
    .cta-band > * { position: relative; z-index: 1; }
    .cta-band h2 { color: var(--white); margin: 0 0 8px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
    .cta-band p { margin: 0; color: #cdddd2; }
    .cta-band .button-solid { background: var(--gold); border-color: var(--gold); color: #2a2f07; }
    .cta-band .button-solid:hover { background: #ffcb52; border-color: #ffcb52; color: #2a2f07; transform: translateY(-2px); }

    @media (max-width: 860px) {
      .path-grid { grid-template-columns: 1fr; }
      .path-grid img { height: 340px; }
      .cta-band { align-items: flex-start; flex-direction: column; }
    }
    @media (max-width: 640px) {
      .value-grid { grid-template-columns: repeat(2, 1fr); }
      .value { padding: 22px 16px; }
      .path-grid img { height: 260px; }
      .card { padding: 24px; }
    }