/* ============================================================
   AYL COMPONENTS
   Shared, reusable UI lifted faithfully from the approved mockup.
   These are global building blocks used across multiple pages —
   page sections themselves are assembled in later phases.

   Contents:
     1. Site header / navigation
     2. Mobile navigation
     3. Site footer
     4. CTA band (reusable)
     5. Forest feature band (reusable)
     6. Editorial numbered rows
     7. Blog / insight cards
     8. Industry cards
     9. Package cards
    10. Ticker / marquee
    11. Responsive (single 968px breakpoint)
   ============================================================ */


/* ============================================================
   1. SITE HEADER / NAVIGATION
   ============================================================ */
.site-header { position: sticky; top:0; z-index: 300; }
.admin-bar .site-header { top:32px; }

.site-nav {
  background: var(--cream);
  padding: 1.8rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--rule);
}
.site-logo {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 400;
  color: var(--forest); letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none;
}
.site-logo .ayl-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--forest);
  font-family: var(--font-display);
  font-weight: 500; font-size: 0.85rem; letter-spacing: 0.05em;
}

/* Uploaded custom logo — constrained + responsive, never distorted. */
.site-logo--image { display: inline-flex; align-items: center; }
.site-logo--image .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; }
.custom-logo { /*max-height: 44px;*/ width: auto; height: auto; display: block; }

.site-menu {
  display: flex; gap: 3rem; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.site-menu li { margin: 0; }
.site-menu a {
  color: var(--forest); text-decoration: none;
  font-size: 0.82rem; font-weight: 400;
  letter-spacing: 0.02em; transition: color 0.3s;
}
.site-menu a:hover,
.site-menu .current-menu-item > a,
.site-menu .current_page_item > a,
.site-menu .current-menu-ancestor > a,
.site-menu a.active { color: var(--terracotta); }

/* Nav CTA button — add CSS class `nav-cta` to the menu item ("Book a Call"). */
.site-menu .nav-cta > a {
  background: transparent; color: var(--forest);
  padding: 0.7rem 1.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--forest);
  transition: all 0.3s;
}
.site-menu .nav-cta > a:hover { background: var(--forest); color: var(--cream); }


/* ============================================================
   2. MOBILE NAVIGATION  (net-new — mockup only hid the menu)
   ============================================================ */
.nav-toggle {
  display: none;
  align-items: center; gap: 0.6rem;
  background: transparent; border: 1px solid var(--forest);
  color: var(--forest); cursor: pointer;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.nav-toggle-bars {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 4px; width: 16px;
}
.nav-toggle-bars span {
  display: block; height: 1px; width: 100%;
  background: var(--forest); transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child {
  transform: translateY(2.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child {
  transform: translateY(-2.5px) rotate(-45deg);
}


/* ============================================================
   3. SITE FOOTER
   ============================================================ */
.site-footer {
  background: var(--forest);
  color: var(--cream);
  padding: 5rem var(--gutter) 2.5rem;
  position: relative;
}
.site-footer::before {           /* copper/terracotta hairline top rule */
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
}
.footer-inner {
  max-width: var(--container-max); margin: 0 auto;
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
  gap: 3rem;
}
.footer-brand h3 {
  font-family: var(--font-display);
  font-size: 1.4rem; color: var(--cream);
  margin-bottom: 1.2rem; font-weight: 400;
}
.footer-brand p {
  color: rgba(244,241,234,0.6);
  font-size: 0.85rem; line-height: 1.7; max-width: 380px;
}
.footer-tagline {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.95rem; font-style: italic;
  margin-top: 1rem;
}
.footer-social { margin-top: 2rem; display: flex; gap: 1.5rem; }
.footer-social a {
  color: var(--gold); text-decoration: none;
  font-size: 0.8rem; letter-spacing: 0.1em;
}
.footer-social a:hover { color: var(--cream); }

.site-footer h5 {
  font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.5rem; font-weight: 500;
}
.site-footer .footer-menu,
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer .footer-menu li,
.site-footer ul li { padding: 0.35rem 0; }
.site-footer .footer-menu a,
.site-footer ul li a {
  color: rgba(244,241,234,0.7); text-decoration: none;
  font-size: 0.85rem; transition: color 0.3s;
}
.site-footer .footer-menu a:hover,
.site-footer ul li a:hover { color: var(--gold); }

.footer-base {
  border-top: 1px solid rgba(244,241,234,0.08);
  margin-top: 4rem; padding-top: 2rem;
  max-width: var(--container-max); margin-left: auto; margin-right: auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.75rem; color: rgba(244,241,234,0.45);
}
.footer-base a { color: rgba(244,241,234,0.45); text-decoration: none; }
.footer-base a:hover { color: var(--gold); }


/* ============================================================
   4. CTA BAND  (reusable — consolidates .home-cta / .ai-cta / .shared-cta)
   Variants: default (cream) and .cta-band--forest (dark).
   ============================================================ */
.cta-band {
  background: var(--cream);
  padding: 8rem var(--gutter);
  text-align: center;
  border-top: 1px solid var(--rule);
}
.cta-band__inner { max-width: 800px; margin: 0 auto; }
.cta-band .eyebrow { justify-content: center; }
.cta-band h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin: 1.5rem 0 2rem;
  line-height: 1.05; font-weight: 300;
}
.cta-band h2 .accent-line { color: var(--terracotta); margin-top: 0.3rem; }
.cta-band p {
  font-size: 1.05rem; line-height: 1.7;
  color: var(--espresso);
  max-width: 560px; margin: 0 auto 3rem;
}
.cta-band__actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.5rem; }

/* Forest variant */
.cta-band--forest {
  background: var(--forest); color: var(--cream);
  border-top: none; position: relative; overflow: hidden;
}
.cta-band--forest::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(74,90,70,0.30) 0%, transparent 70%);
}
.cta-band--forest .cta-band__inner { position: relative; z-index: 2; }
.cta-band--forest h2 { color: var(--cream); }
.cta-band--forest h2 .accent-line { color: var(--gold); }
.cta-band--forest p { color: rgba(244,241,234,0.85); }
.cta-band--forest .eyebrow { color: var(--gold); }
.cta-band--forest .eyebrow::before { background: var(--gold); }
.cta-band--forest .btn-primary { background: var(--gold); color: var(--forest); }
.cta-band--forest .btn-primary:hover { background: var(--cream); }
.cta-band--forest .btn-secondary { color: var(--cream); border-color: var(--cream); }
.cta-band--forest .btn-secondary:hover { color: var(--gold); border-color: var(--gold); }


/* ============================================================
   5. FOREST FEATURE BAND  (reusable — .home-firm / .team-section /
      .cross-practice / .cross-industry)
   ============================================================ */
.forest-band {
  background: var(--forest);
  color: var(--cream);
  padding: 8rem var(--gutter);
  position: relative; overflow: hidden;
}
.forest-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at top right, rgba(74,90,70,0.40) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(184,120,80,0.08) 0%, transparent 50%);
}
.forest-band__inner {
  max-width: var(--container-max); margin: 0 auto;
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 6rem; align-items: center;
}
.forest-band .eyebrow { color: var(--gold); }
.forest-band .eyebrow::before { background: var(--gold); }
.forest-band h2 {
  color: var(--cream);
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  margin: 1.5rem 0 2rem; line-height: 1.05; font-weight: 300;
}
.forest-band h2 .accent-line { color: var(--gold); margin-top: 0.3rem; }
.forest-band p {
  color: rgba(244,241,234,0.8);
  line-height: 1.75; margin-bottom: 1.5rem;
  font-size: 1rem; max-width: 560px;
}

/* Centered single-column variant (cross-practice / cross-industry) */
.forest-band--center .forest-band__inner {
  display: block; max-width: 900px; text-align: center;
}
.forest-band--center .eyebrow { justify-content: center; }
.forest-band--center p { margin-left: auto; margin-right: auto; max-width: 700px; }

/* Pull-quote (firm section) */
.firm-pull-quote { border-left: 1px solid var(--copper); padding-left: 2rem; }
.firm-pull-quote .quote {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.6rem; line-height: 1.4;
  color: var(--cream); font-weight: 300; margin-bottom: 1.5rem;
}
.firm-pull-quote .attribution {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
}

/* Cross-industry CTA — reusable forest-gradient band over .forest-band--center.
   Shared by the Industries page and the Service Packages page (the mockup uses
   the same .cross-industry treatment on both). */
.cross-industry {
  background: linear-gradient(180deg, var(--forest-3) 0%, var(--forest-7) 100%);
}
.cross-industry::before {
  background: radial-gradient(ellipse at center, rgba(74,90,70,0.40) 0%, transparent 70%);
}
.cross-industry h2 { margin: 2rem 0; }
.cross-industry p { font-size: 1.05rem; line-height: 1.75; margin: 0 auto 3rem; }
.cross-industry .btn-primary { background: var(--gold); color: var(--forest); }
.cross-industry .btn-primary:hover { background: var(--cream); }
.cross-industry .btn-secondary { color: var(--cream); border-color: var(--cream); }
.cross-industry .btn-secondary:hover { color: var(--gold); border-color: var(--gold); }


/* ============================================================
   6. EDITORIAL NUMBERED ROWS
      .practice-item   (compact — homepage)
      .practice-detail (expanded — practices hub)
      .service-row     (two-up services list)
   ============================================================ */
.editorial-list { border-top: 1px solid var(--rule-strong); }

.practice-item {
  display: grid;
  grid-template-columns: 80px 1fr 1.2fr 60px;
  gap: 3rem; padding: 2.5rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: start; transition: all 0.4s;
  cursor: pointer; text-decoration: none; color: inherit;
}
.practice-item:hover { padding-left: 2rem; border-bottom-color: var(--terracotta); }
.practice-item:hover .practice-num { color: var(--terracotta); }
.practice-item:hover .practice-arrow { color: var(--terracotta); transform: translateX(8px); }
.practice-num {
  font-family: var(--font-display); font-size: 0.9rem;
  color: var(--espresso); letter-spacing: 0.1em;
  padding-top: 0.5rem; transition: color 0.3s;
}
.practice-item h3 { font-size: 1.7rem; font-weight: 400; margin-bottom: 0.7rem; }
.practice-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.practice-tags span {
  font-size: 0.65rem; padding: 0.3rem 0.7rem;
  color: var(--olive); letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--rule);
}
.practice-desc { color: var(--espresso); line-height: 1.7; font-size: 0.95rem; padding-top: 0.3rem; }
.practice-arrow {
  font-family: var(--font-display); color: var(--olive);
  font-size: 1.3rem; text-align: right; padding-top: 0.3rem;
  transition: all 0.4s;
}

.practice-detail {
  display: grid; grid-template-columns: 90px 1fr 1.3fr;
  gap: 4rem; padding: 4rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: start; text-decoration: none; color: inherit;
  transition: all 0.4s;
}
.practice-detail:hover {
  background: linear-gradient(90deg, var(--cream) 0%, var(--cream-warm) 100%);
  padding-left: 2rem;
}
.practice-detail:hover .practice-detail-num { color: var(--terracotta); }
.practice-detail-num {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 400;
  color: var(--espresso); padding-top: 0.5rem; transition: color 0.3s;
}
.practice-detail-info h3 { font-size: 2.2rem; font-weight: 400; margin-bottom: 1rem; line-height: 1.05; }
.practice-detail-info .tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.practice-detail-info .tags span {
  font-size: 0.65rem; padding: 0.35rem 0.8rem;
  border: 1px solid var(--rule-strong); color: var(--olive);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.practice-detail-desc { color: var(--espresso); line-height: 1.8; font-size: 0.95rem; position: relative; }
.practice-detail-desc .desc-arrow {
  position: absolute; top: 0; right: 0;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--olive);
  transition: all 0.4s;
}
.practice-detail:hover .practice-detail-desc .desc-arrow { color: var(--terracotta); transform: translateX(8px); }

.service-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.3rem 0; border-bottom: 1px solid var(--rule);
  cursor: pointer; transition: all 0.3s;
}
.service-row:hover { padding-left: 1rem; }
.service-row:hover .name { color: var(--terracotta); }
.service-row:hover .arrow { color: var(--terracotta); transform: translateX(4px); }
.service-row .name {
  font-family: var(--font-display); font-size: 1.15rem;
  color: var(--forest); font-weight: 400; transition: color 0.3s;
}
.service-row .arrow { color: var(--olive); font-family: var(--font-display); transition: all 0.3s; }


/* ============================================================
   7. BLOG / INSIGHT CARDS
   ============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.blog-card {
  padding: 2rem 2.5rem;
  border-right: 1px solid var(--rule);
  cursor: pointer; transition: all 0.3s;
  text-decoration: none; color: inherit; display: block;
}
.blog-card:first-child { padding-left: 0; }
.blog-card:last-child { border-right: none; padding-right: 0; }
.blog-card:hover h4 { color: var(--terracotta); }
.blog-meta {
  display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem;
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--espresso);
}
.blog-meta .cat { color: var(--terracotta); }
.blog-meta .dot { color: var(--olive); }
.blog-card h4 {
  font-size: 1.4rem; line-height: 1.2; margin-bottom: 1rem;
  font-weight: 400; transition: color 0.3s;
}
.blog-card p { color: var(--espresso); font-size: 0.9rem; line-height: 1.6; }


/* ===== INSIGHT ARTICLE CARDS + PAGINATION =====
   Shared editorial article grid/card + pagination used by the Insights hub
   (home.php), the category/tag archives (archive.php), and search. The section
   wrappers (.insights-grid-section, .insights-pagination, .archive-*) stay
   page-specific; these are the reusable visuals. */
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.article-card {
  padding: 2.5rem 2.5rem 3rem;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  cursor: pointer; transition: all 0.3s; text-decoration: none; color: inherit;
  background: var(--cream); display: flex; flex-direction: column;
}
.article-card:nth-child(3n) { border-right: none; }
.article-card:hover { background: var(--cream-warm); }
.article-card:hover h4 { color: var(--terracotta); }
.article-card .article-meta {
  display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.5rem;
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--espresso);
}
.article-card .article-cat { color: var(--terracotta); font-weight: 500; }
.article-card .article-dot { color: var(--olive); }
.article-card h4 { font-size: 1.4rem; line-height: 1.25; margin-bottom: 1rem; font-weight: 400; transition: color 0.3s; flex-grow: 1; }
.article-card p { color: var(--espresso); font-size: 0.88rem; line-height: 1.6; margin-bottom: 1.5rem; }
.article-card .read-more {
  color: var(--olive); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; font-weight: 500;
}

/* Pagination visuals (the wrapper sections remain page-specific). */
.page-count { font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--espresso); }
.page-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.page-nav a,
.page-nav .page-numbers {
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 0.5rem;
  border: 1px solid var(--rule-strong); color: var(--forest); text-decoration: none;
  font-size: 0.85rem; transition: all 0.3s;
}
.page-nav a:hover,
.page-nav a.current,
.page-nav .page-numbers:hover,
.page-nav .page-numbers.current {
  background: var(--forest); color: var(--cream); border-color: var(--forest);
}
.page-nav .page-numbers.dots { border-color: transparent; }


/* ============================================================
   8. INDUSTRY CARDS
   ============================================================ */
.industries-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--rule-strong);
  border-left: 1px solid var(--rule);
}
.industry-card {
  padding: 3rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  cursor: pointer; transition: all 0.4s;
  text-decoration: none; color: inherit; position: relative;
  background: var(--cream); min-height: 320px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.industry-card:hover { background: var(--forest); color: var(--cream); }
.industry-card:hover h3,
.industry-card:hover .industry-num { color: var(--gold); }
.industry-card:hover p { color: rgba(244,241,234,0.85); }
.industry-card:hover .industry-tags span { color: var(--gold); border-color: rgba(200,169,107,0.3); }
.industry-card:hover .arrow { color: var(--gold); opacity: 1; transform: translateX(8px); }
.industry-num {
  font-family: var(--font-display); font-size: 0.85rem;
  color: var(--copper); letter-spacing: 0.1em; margin-bottom: 2rem;
  display: flex; align-items: center; gap: 0.7rem; transition: color 0.3s;
}
.industry-num::before { content: ''; display: block; width: 24px; height: 1px; background: var(--copper); }
.industry-card h3 { font-size: 1.8rem; margin-bottom: 1rem; font-weight: 400; transition: color 0.3s; }
.industry-card p { color: var(--espresso); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1; transition: color 0.3s; }
.industry-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.industry-tags span {
  font-size: 0.65rem; padding: 0.3rem 0.6rem;
  border: 1px solid var(--rule-strong); color: var(--olive);
  letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.3s;
}
.industry-card .arrow {
  font-family: var(--font-display); font-size: 1.3rem; color: var(--olive);
  align-self: flex-end; opacity: 0.5; transition: all 0.3s;
}


/* ============================================================
   9. PACKAGE CARDS  (Foundation / Growth(featured) / Scale)
   ============================================================ */
.packages-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--rule-strong);
}
.package-card {
  padding: 3.5rem 3rem; background: var(--cream);
  border-right: 1px solid var(--rule-strong);
  display: flex; flex-direction: column; position: relative;
}
.package-card:last-child { border-right: none; }
.package-card.featured {
  background: linear-gradient(180deg, var(--forest-3) 0%, var(--forest-6) 100%);
  color: var(--cream); margin: -1px; z-index: 2;
}
.package-card.featured::before {
  content: 'Most Selected';
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--forest);
  font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase;
  padding: 0.5rem 1.2rem; font-weight: 600;
}
.package-card .tier-label {
  font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--copper); margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 0.7rem;
}
.package-card .tier-label::before { content: ''; display: block; width: 24px; height: 1px; background: var(--copper); }
.package-card.featured .tier-label { color: var(--gold); }
.package-card.featured .tier-label::before { background: var(--gold); }
.package-card h3 { font-size: 2.4rem; margin-bottom: 0.5rem; font-weight: 400; line-height: 1; }
.package-card.featured h3 { color: var(--cream); }
.package-card .subtitle { font-family: var(--font-display); color: var(--olive); font-size: 1rem; margin-bottom: 2rem; line-height: 1.4; }
.package-card.featured .subtitle { color: var(--gold); }
.package-card .description { color: var(--espresso); line-height: 1.7; font-size: 0.95rem; margin-bottom: 2rem; }
.package-card.featured .description { color: rgba(244,241,234,0.85); }
.package-card .ideal-row { background: var(--cream-warm); padding: 1.2rem; margin-bottom: 2rem; border-left: 2px solid var(--copper); }
.package-card.featured .ideal-row { background: rgba(14,22,18,0.4); border-left-color: var(--gold); }
.package-card .ideal-row .lbl { font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--copper); margin-bottom: 0.5rem; display: block; }
.package-card.featured .ideal-row .lbl { color: var(--gold); }
.package-card .ideal-row .val { color: var(--forest); font-size: 0.9rem; line-height: 1.5; }
.package-card.featured .ideal-row .val { color: var(--cream); }
.package-card .features-label {
  font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--espresso); margin-bottom: 1.2rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.package-card.featured .features-label { color: var(--gold); border-bottom-color: rgba(244,241,234,0.15); }
.package-card ul { list-style: none; flex-grow: 1; margin-bottom: 2rem; }
.package-card ul li {
  padding: 0.7rem 0; color: var(--espresso); font-size: 0.9rem; line-height: 1.5;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: flex-start; gap: 0.7rem;
}
.package-card ul li:last-child { border-bottom: none; }
.package-card.featured ul li { color: rgba(244,241,234,0.85); border-bottom-color: rgba(244,241,234,0.08); }
.package-card ul li::before { content: '✦'; color: var(--copper); font-size: 0.65rem; line-height: 1.5; flex-shrink: 0; }
.package-card.featured ul li::before { color: var(--gold); }
.package-card .package-cta {
  background: var(--forest); color: var(--cream);
  padding: 1.1rem 2rem; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; text-align: center; transition: background 0.3s; display: block;
}
.package-card .package-cta:hover { background: var(--terracotta); }
.package-card.featured .package-cta { background: var(--gold); color: var(--forest); }
.package-card.featured .package-cta:hover { background: var(--cream); }


/* ============================================================
   10. TICKER / MARQUEE  (homepage — base styling, used in Phase 2)
   ============================================================ */
.home-ticker {
  background: var(--cream-warm);
  padding: 1.5rem 0; overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.ticker-track { display: flex; gap: 5rem; white-space: nowrap; animation: ayl-ticker 60s linear infinite; }
.ticker-item {
  font-family: var(--font-display); font-size: 0.95rem;
  color: var(--espresso); font-weight: 400;
  display: flex; align-items: center; gap: 5rem;
}
.ticker-item::after { content: '✦'; color: var(--copper); font-size: 0.7rem; }
@keyframes ayl-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}





/* ===================== SERVICE ACCORDIONS (one per area) ===================== */
.services-accordions { background: var(--cream); padding: 4rem var(--gutter) 6rem; }
.services-accordions-inner { max-width: var(--container-max); margin: 0 auto; border-top: 1px solid var(--rule-strong); }
.svc-acc { border-bottom: 1px solid var(--rule-strong); scroll-margin-top: 1.5rem; }
.svc-acc-head {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 1.5rem; padding: 2.1rem 0.25rem;
}
.svc-acc-head::-webkit-details-marker { display: none; }
.svc-acc-head::marker { content: ''; }
.svc-acc-head:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; }
.svc-acc-num { font-family: var(--font-display); font-size: 1.15rem; color: var(--copper); flex-shrink: 0; width: 2.4rem; padding-top: 0.15rem; }
.svc-acc-titles { flex-grow: 1; }
.svc-acc-title { display: block; font-family: var(--font-display); font-size: clamp(1.45rem, 3vw, 2.1rem); font-weight: 400; color: var(--forest); line-height: 1.12; transition: color 0.2s; }
.svc-acc-head:hover .svc-acc-title,
.svc-acc[open] .svc-acc-title { color: var(--terracotta); }
.svc-acc-sub { display: block; font-family: var(--font-display); font-style: italic; color: var(--copper); font-size: 1rem; line-height: 1.35; margin-top: 0.4rem; }
.svc-acc-icon { flex-shrink: 0; position: relative; width: 1.6rem; height: 1.6rem; }
.svc-acc-icon::before {
  content: '+'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: var(--terracotta); transition: color 0.2s;
}
.svc-acc[open] .svc-acc-icon::before { content: '\2013'; } /* en dash */
.svc-acc-body { padding: 0.5rem 0 3rem; max-width: 820px; }

/* Editorial detail blocks (rendered inside the accordion bodies) */
.services-detail-copy p { color: var(--espresso); font-size: 1.05rem; line-height: 1.8; margin-bottom: 1rem; }
.services-detail-copy p:last-child { margin-bottom: 0; }
.services-detail-lead { margin-top: 0; }
.services-detail-lead p { color: var(--forest); font-size: 1.2rem; line-height: 1.6; margin-bottom: 1rem; }
.services-detail-lead p:last-child { color: var(--terracotta); }
.services-detail-block { margin-top: 2.6rem; }
.services-detail-block h3 { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--copper); font-weight: 600; margin-bottom: 1rem; }
.services-detail-block p { color: var(--espresso); font-size: 1.02rem; line-height: 1.8; margin-bottom: 0.9rem; }
.services-detail-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; border-top: 1px solid var(--rule); }
.services-detail-list li { padding: 0.8rem 0 0.8rem 1.6rem; border-bottom: 1px solid var(--rule); position: relative; color: var(--espresso); font-size: 0.98rem; line-height: 1.4; }
.services-detail-list li::before { content: '+'; position: absolute; left: 0; color: var(--copper); font-family: var(--font-display); }





/* ============================================================
   11. RESPONSIVE  (single breakpoint, matching the mockup)
   ============================================================ */
@media (max-width: 968px) {

  /* --- Header / mobile menu --- */
  .site-nav { padding: 1.5rem var(--gutter-mobile); }
  .custom-logo { max-height: 36px; }
  .nav-toggle { display: inline-flex; }
  .site-menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 1.5rem; align-items: flex-start;
    background: var(--cream); padding: 2rem var(--gutter-mobile);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 18px 40px rgba(24,33,28,0.10);
  }
  .site-menu.is-open { display: flex; }
  .site-menu a { font-size: 1rem; }
  .site-menu .nav-cta { margin-top: 0.5rem; }
  .site-menu .nav-cta > a { display: inline-flex; }

  /* --- Footer --- */
  .site-footer { padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); }
  .footer-inner { grid-template-columns: 1fr; gap: 3rem; }

  /* --- Shared section bands --- */
  .cta-band,
  .forest-band { padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); }
  .forest-band__inner { grid-template-columns: 1fr; gap: 3rem; }

  /* --- Shared grids collapse --- */
  .blog-grid,
  .industries-grid,
  .packages-grid,
  .insights-grid { grid-template-columns: 1fr; }
  .blog-card { padding: 2rem 0; border-right: none; border-bottom: 1px solid var(--rule); }
  .article-card { border-right: none; }

  .practice-item,
  .practice-detail { grid-template-columns: 1fr; gap: 1.5rem; }
  .practice-arrow { display: none; }

  .package-card.featured { margin: 0; }
}