/* ============================================================
   STYLE.CSS — v5
   Homepage + Internal Pages + Media Queries
   Lattice Signworks Inc.
   ============================================================ */





/* ==========================================================
   OUR PROCESS PAGE — page-scoped styles
========================================================== */

.process-framework,
.process-how-we-work,
.process-coordinate,
.process-why,
.process-outcome,
.process-closing {
  padding: 4.5rem 0;
}

.process-framework .container,
.process-how-we-work .container,
.process-coordinate .container,
.process-why .container,
.process-outcome .container,
.process-closing .container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.process-section-intro {
  max-width: 44rem;
  margin: 0 auto 3rem;
  text-align: center;
}

.process-section-intro h2 {
  font-family: var(--font-heading);
  color: var(--color-dark-green);
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.process-section-intro p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.625rem;
  color: var(--color-dark-green);
  margin-bottom: 0.75rem;
}

.process-section-intro p:last-child {
  margin-bottom: 0;
}

/* ==========================================================
   1. THE LATTICE FRAMEWORK
========================================================== */

.process-framework {
  background-color: var(--color-off-white);
}

.framework-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "design      permitting   fabrication"
    "brand       center       installation"
    "communication budget     timelines";
  gap: 1.5rem;
}

.framework-item-design        { grid-area: design; }
.framework-item-permitting    { grid-area: permitting; }
.framework-item-fabrication   { grid-area: fabrication; }
.framework-item-brand         { grid-area: brand; }
.framework-item-installation  { grid-area: installation; }
.framework-item-communication { grid-area: communication; }
.framework-item-budget        { grid-area: budget; }
.framework-item-timelines     { grid-area: timelines; }
.framework-center             { grid-area: center; }

.framework-item {
  background-color: var(--color-dark-green);
  border-radius: 0.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
}

.framework-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  background-color: var(--color-accent);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
}

.framework-icon i {
  color: var(--color-white);
  font-size: 1.375rem;
}

.framework-item h3 {
  font-family: var(--font-heading);
  color: var(--color-amber-gold);
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.625rem;
}

.framework-item p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--color-white);
  margin: 0;
}

.framework-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--color-amber-gold);
  border-radius: 0.5rem;
  padding: 2rem 1.5rem;
}

.framework-center i {
  display: none; /* decorative placeholder removed visually, kept for potential icon swap */
}

.framework-center p {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.5rem;
  color: var(--color-dark-green);
  margin: 0;
}

/* ==========================================================
   2. HOW WE WORK
========================================================== */

.process-how-we-work {
  background-color: var(--color-white);
}

.how-we-work-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  counter-reset: none;
}

.how-we-work-steps li {
  position: relative;
  text-align: center;
  padding: 0 0.5rem;
}

.how-we-work-steps li:not(:last-child)::after {
  content: "\f061"; /* fa-arrow-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 1.125rem;
  right: -0.875rem;
  color: var(--color-accent);
  font-size: 1rem;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-dark-green);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  margin-bottom: 0.875rem;
}

.how-we-work-steps h3 {
  font-family: var(--font-heading);
  color: var(--color-dark-green);
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
}

.how-we-work-steps p {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-dark-green);
  margin: 0;
}

/* ==========================================================
   3. WHAT WE COORDINATE
========================================================== */

.process-coordinate {
  background-color: var(--color-off-white);
}

.coordinate-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.coordinate-card {
  background-color: var(--color-white);
  border: 0.0625rem solid var(--color-accent-light);
  border-radius: 0.5rem;
  padding: 1.75rem 1rem;
  text-align: center;
}

.coordinate-card i {
  font-size: 1.75rem;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
  display: block;
}

.coordinate-card p {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-dark-green);
  margin: 0;
}

/* ==========================================================
   4. WHY THIS MATTERS
========================================================== */

.process-why {
  background-color: var(--color-white);
}

.why-table-wrap {
  overflow-x: auto;
  max-width: 62.5rem;
  margin: 0 auto;
}

.why-table {
  width: 100%;
  border-collapse: collapse;
}

.why-table th {
  font-family: var(--font-heading);
  font-size: 1rem;
  text-align: left;
  color: var(--color-white);
  background-color: var(--color-dark-green);
  padding: 0.875rem 1.25rem;
}

.why-table th:first-child {
  border-radius: 0.375rem 0 0 0;
}

.why-table th:last-child {
  border-radius: 0 0.375rem 0 0;
}

.why-table td {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--color-dark-green);
  padding: 0.875rem 1.25rem;
  border-bottom: 0.0625rem solid var(--color-off-white);
}

.why-table tbody tr:nth-child(even) {
  background-color: var(--color-off-white);
}

.why-table td:first-child {
  border-right: 0.0625rem solid var(--color-off-white);
}

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

/* ==========================================================
   5. THE OUTCOME
========================================================== */

.process-outcome {
  background-color: var(--color-off-white);
}

.outcome-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 2.5rem;
  max-width: 56.25rem;
  margin: 0 auto;
}

.outcome-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.625rem;
  color: var(--color-dark-green);
}

.outcome-list i {
  color: var(--color-accent);
  font-size: 1.125rem;
  margin-top: 0.1875rem;
}

/* ==========================================================
   6. CLOSING STATEMENT / CTA
========================================================== */

.process-closing {
  background-color: var(--color-dark-green);
  text-align: center;
}

.process-closing h2 {
  font-family: var(--font-heading);
  color: var(--color-white);
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.process-closing-subtext {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-accent);
  margin-bottom: 2rem;
}

/* ==========================================================
   MEDIA QUERIES (max-width)
========================================================== */

@media (max-width: 1024px) {
  .framework-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "design      permitting"
      "fabrication brand"
      "center      center"
      "installation budget"
      "communication timelines";
  }

  .how-we-work-steps {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 2.5rem;
  }

  .how-we-work-steps li:nth-child(3)::after,
  .how-we-work-steps li:nth-child(6)::after {
    content: none;
  }

  .coordinate-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .process-framework,
  .process-how-we-work,
  .process-coordinate,
  .process-why,
  .process-outcome,
  .process-closing {
    padding: 3rem 0;
  }

  .process-section-intro h2,
  .process-closing h2 {
    font-size: 1.625rem;
  }

  .framework-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "design"
      "permitting"
      "fabrication"
      "brand"
      "center"
      "installation"
      "budget"
      "communication"
      "timelines";
  }

  .how-we-work-steps {
    grid-template-columns: 1fr;
    row-gap: 1.75rem;
  }

  .how-we-work-steps li::after {
    content: "\f063" !important; /* fa-arrow-down */
    top: auto !important;
    right: auto !important;
    bottom: -1.25rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .coordinate-grid {
    grid-template-columns: 1fr 1fr;
  }

  .why-table th,
  .why-table td {
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
  }

  .outcome-list {
    grid-template-columns: 1fr;
  }
}






/* ==========================================================
   INDUSTRIES SECTION
   Append to css/who-we-help.css
   Uses variables from above-fold.css:
   --color-dark-green, --color-accent, --color-amber-gold,
   --color-white, --color-off-white, --font-heading, --font-body
========================================================== */

.industries-section {
  background-color: var(--color-off-white);
  padding: 5rem 0;
}

.industries-section .container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.industries-intro {
  max-width: 50rem;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.industries-intro h2 {
  font-family: var(--font-heading);
  color: var(--color-dark-green);
  font-size: clamp(1.875rem, 3vw, 2.875rem);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.industries-intro p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.625rem;
  color: var(--color-dark-green);
  margin-bottom: 1rem;
}

.industries-intro p:last-child {
  margin-bottom: 0;
}

/* Grid */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.industry-card {
  background-color: var(--color-white);
  border-top: 0.25rem solid var(--color-amber-gold);
  border-radius: 0.375rem;
  padding: 2.25rem 1.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.industry-card:hover,
.industry-card:focus-within {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.75rem 1.5rem rgba(26, 26, 26, 0.08);
}

.industry-card i {
  font-size: 2.25rem;
  color: var(--color-accent);
  margin-bottom: 1rem;
  display: block;
}

.industry-card h3 {
  font-family: var(--font-heading);
  color: var(--color-dark-green);
  font-size: 1.375rem;
  margin-bottom: 0.75rem;
}

.industry-card p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--color-dark-green);
  margin-bottom: 0.875rem;
}

.industry-card-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-amber-gold);
  margin: 1.25rem 0 0.625rem;
}

.industry-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.industry-card li {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.625rem;
  color: var(--color-dark-green);
  padding-left: 1.125rem;
  position: relative;
}

.industry-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-accent);
}

/* Closing statement */
.industries-closing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2.5rem;
  background-color: var(--color-dark-green);
  border-radius: 0.375rem;
  margin-top: 4rem;
  overflow: hidden;
}

.industries-closing-text {
  padding: 3rem;
}

.industries-closing-text p {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--color-white);
  margin: 0;
}

.industries-closing-image {
  height: 100%;
}

.industries-closing-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

/* ==========================================================
   MEDIA QUERIES (max-width)
========================================================== */

@media (max-width: 1024px) {
  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .industries-section {
    padding: 3.5rem 0;
  }

  .industries-intro h2 {
    font-size: 1.625rem;
  }

  .industries-grid {
    grid-template-columns: 1fr;
  }

  .industries-closing {
    grid-template-columns: 1fr;
  }

  .industries-closing-text {
    padding: 2rem;
    order: 2;
  }

  .industries-closing-image {
    order: 1;
  }

  .industries-closing-image img {
    aspect-ratio: 16 / 9;
  }
}



































/* ============================================================
   WHO-WE-HELP.CSS
   Lattice Signworks Inc.
   Page-specific styles for who-we-help.html only.
   All selectors prefixed .wwh- — no impact on other pages.
   Depends on: above-fold.css + style.css (CSS variables)
   ============================================================ */

        /* ============================================================
           WHO WE HELP — page-scoped styles
           All selectors prefixed with .wwh-
           Zero impact on any other page or shared CSS file.
           ============================================================ */

        /* ── Shared section spacing ── */
        .wwh-section {
            padding-block: clamp(4rem, 7vw, 6.5rem);
        }

        /* ── Shared centered header ── */
        .wwh-header {
            text-align: center;
            margin-bottom: clamp(2.5rem, 5vw, 4rem);
        }

        .wwh-header .eyebrow { color: var(--color-amber-gold); }

        .wwh-header h2 {
            font-size: clamp(1.875rem, 3vw, 2.875rem);
            color: var(--color-dark);
            margin-bottom: 0.5rem;
        }

        .wwh-header .gold-divider, .wwh-promise-inner .gold-divider { margin-inline: auto; }

        .wwh-header p {
            color: var(--color-text-muted);
            font-size: 1.0625rem;
            line-height: 1.75;
            max-width: 580px;
            margin-inline: auto;
            margin-top: 1rem;
            margin-bottom: 0;
        }

        /* ============================================================
           SECTION 1 — WHO WE WORK WITH
           About version: white bg, horizontal card (icon left + text right)
           This version: dark green bg, stacked card (icon top),
                         amber-gold left border, full-width at mobile
           ============================================================ */
        .wwh-partners {
            background: var(--color-dark-green);
            position: relative;
            overflow: hidden;
			border-top: 1px solid rgba(255,255,255,0.06);
        }

        /* Subtle diagonal stripe texture — different from the hexagon pattern on about.html */
        /*.wwh-partners::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: repeating-linear-gradient(
                -55deg,
                transparent,
                transparent 40px,
                rgba(86,151,160,0.04) 40px,
                rgba(86,151,160,0.04) 41px
            );
            pointer-events: none;
        }*/

        .wwh-partners .container { position: relative; z-index: 1; }

        /* Header overrides for dark bg */
        .wwh-partners .wwh-header .eyebrow { color: var(--color-accent); }
        .wwh-partners .wwh-header h2       { color: var(--color-white); }
        .wwh-partners .wwh-header p        { color: rgba(255,255,255,0.65); }
        .wwh-partners .wwh-header .gold-divider { background: var(--color-amber-gold); }

        /* 3-col grid, same count — different card style */
        .wwh-partner-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        /* Card: stacked layout, amber-gold left border, no icon circle */
        .wwh-partner-card {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            border-left: 3px solid var(--color-amber-gold);
            padding: clamp(1.75rem, 2.5vw, 2.25rem);
            display: flex;
            flex-direction: column;
            gap: 0.875rem;
			position: relative;
            transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
        }
.wwh-partner-card a.link{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

        .wwh-partner-card:hover {
            background: rgba(255,255,255,0.09);
            border-left-color: var(--color-accent);
            transform: translateY(-3px);
        }

        /* Large icon — top of card, no circle container */
        .wwh-partner-card i {
            font-size: 2rem;
            color: var(--color-amber-gold);
            display: block;
        }

        .wwh-partner-card h4 {
            font-size: 1rem;
            font-family: var(--font-body);
            font-weight: 700;
            color: var(--color-white);
            margin: 0;
            line-height: 1.3;
        }

        .wwh-partner-card p {
            font-size: 0.9375rem;
            color: rgba(255,255,255,0.6);
            line-height: 1.7;
            margin: 0;
        }

        /* ============================================================
           SECTION 2 — SEE THE DIFFERENCE
           About version: two-column table with header row
           This version: white bg, two side-by-side comparison columns
                         built from cards — no <table> element
           ============================================================ */
        .wwh-compare {
            background: var(--color-white);
            border-top: 1px solid #e2e8f0;
        }

        /* Two-column flex layout */
        .wwh-compare-cols {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
            border: 1px solid #e2e8f0;
            overflow: hidden;
        }

        /* Column header */
        .wwh-compare-col-header {
            padding: 1.375rem 2rem;
            font-family: var(--font-body);
            font-size: 0.8125rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            text-align: center;
        }

        .wwh-compare-col-header.traditional {
            background: var(--color-off-white);
            color: var(--color-text-muted);
            border-right: 1px solid #e2e8f0;
            border-bottom: 2px solid #e2e8f0;
        }

        .wwh-compare-col-header.lattice {
            background: var(--color-amber-gold);
            color: var(--color-white);
            border-bottom: 2px solid rgba(0,0,0,0.08);
        }

        /* Row list inside each column */
        .wwh-compare-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .wwh-compare-list li {
            padding: 1.0625rem 2rem;
            font-size: 1rem;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            line-height: 1.45;
            min-height: 3.5rem;
        }

        .wwh-compare-list li:last-child { border-bottom: none; }

        /* Traditional column */
        .wwh-col-traditional .wwh-compare-list li {
            color: var(--color-text-muted);
            background: var(--color-white);
            border-right: 1px solid #e2e8f0;
        }

        .wwh-col-traditional .wwh-compare-list li::before {
            content: '\f00d';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            font-size: 0.75rem;
            color: #cbd5e1;
            flex-shrink: 0;
        }

        .wwh-col-traditional .wwh-compare-list li:nth-child(even) {
            background: var(--color-off-white);
        }

        /* Lattice column */
        .wwh-col-lattice .wwh-compare-list li {
            color: var(--color-dark);
            font-weight: 600;
            background: var(--color-white);
        }

        .wwh-col-lattice .wwh-compare-list li::before {
            content: '\f00c';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            font-size: 0.75rem;
            color: var(--color-amber-gold);
            flex-shrink: 0;
        }

        .wwh-col-lattice .wwh-compare-list li:nth-child(even) {
            background: rgba(196,159,88,0.04);
        }

        /* ============================================================
           SECTION 3 — OUR PROMISE
           About version: dark green two-col (text left, glass box right),
                          SVG hexagon pattern overlay
           This version: white bg, centred single column, amber-gold
                         top accent bar, clean minimal layout — no box
           ============================================================ */
        .wwh-promise {
            background: var(--color-white);
            border-top: 1px solid #e2e8f0;
            position: relative;
        }

        /* Amber-gold top accent bar */
        .wwh-promise::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--color-amber-gold);
        }

        .wwh-promise-inner {
            max-width: 760px;
            margin-inline: auto;
            text-align: center;
        }

        .wwh-promise-inner .eyebrow { color: var(--color-amber-gold); }

        .wwh-promise-inner h2 {
            font-size: clamp(1.875rem, 3vw, 2.875rem);
            color: var(--color-dark);
            margin-bottom: 1.25rem;
            line-height: 1.2;
        }

        .wwh-promise-inner > p {
            color: var(--color-text-muted);
            font-size: 1.0625rem;
            line-height: 1.8;
            margin-bottom: 2.5rem;
        }

        /* Three value pills below the text */
        .wwh-promise-pills {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 2.5rem;
        }

        .wwh-promise-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.625rem 1.25rem;
            background: var(--color-off-white);
            border: 1px solid #e2e8f0;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--color-dark);
            letter-spacing: 0.03em;
        }

        .wwh-promise-pill i {
            color: var(--color-amber-gold);
            font-size: 0.875rem;
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 1024px) {
            .wwh-partner-grid  { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 768px) {
            .wwh-partner-grid  { grid-template-columns: 1fr; }
            .wwh-compare-cols  { grid-template-columns: 1fr; }
            .wwh-col-traditional .wwh-compare-col-header.traditional { border-right: none; border-bottom: 2px solid #e2e8f0; }
            .wwh-col-traditional .wwh-compare-list li  { border-right: none; }
            .wwh-promise-pills { gap: 0.75rem; }
        }

        @media (max-width: 540px) {
            .wwh-compare-list li { padding: 0.875rem 1.25rem; font-size: 0.9375rem; }
            .wwh-compare-col-header { padding: 1.125rem 1.25rem; }
            .wwh-promise-pill { font-size: 0.8125rem; padding: 0.5rem 1rem; }
        }










































.res-section {
    padding-block: clamp(4rem, 7vw, 6.5rem);
}

/* ── Shared section header ── */
.res-header {
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.res-header.centered {
    text-align: center;
}

.res-header .eyebrow { color: var(--color-accent); }

.res-header h2 {
    font-size: clamp(1.875rem, 3vw, 2.875rem);
    color: var(--color-dark);
    margin-bottom: 0;
}

.res-header .gold-divider.centered {
    margin-inline: auto;
}

.res-header p {
    color: var(--color-text-muted);
    font-size: 1.0625rem;
    line-height: 1.75;
    max-width: 620px;
    margin-top: 1rem;
    margin-bottom: 0;
}

.res-header.centered p {
    margin-inline: auto;
}

/* ================================================================
   SECTION 1 — INTRO (dark bg, two-col)
   ================================================================ */
.res-intro {
    background: var(--color-dark-green);
    padding-block: clamp(4rem, 7vw, 6.5rem);
    position: relative;
    overflow: hidden;
}

.res-intro::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpolygon points='60,5 115,32.5 115,87.5 60,115 5,87.5 5,32.5' fill='none' stroke='%235697a0' stroke-width='0.8' stroke-opacity='0.1'/%3E%3Cpolygon points='60,20 100,40 100,80 60,100 20,80 20,40' fill='none' stroke='%235697a0' stroke-width='0.6' stroke-opacity='0.07'/%3E%3C/svg%3E");
    background-size: 120px 120px;
    pointer-events: none;
}

.res-intro .container { position: relative; z-index: 1; }

.res-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.res-intro-text .eyebrow { color: var(--color-accent); }

.res-intro-text h2 {
    color: var(--color-white);
    font-size: clamp(1.875rem, 3vw, 2.875rem);
    margin-bottom: 1.25rem;
    line-height: 1.15;
}

.res-intro-text p {
    color: rgba(255,255,255,0.72);
    font-size: 1.0625rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.res-intro-text p:last-of-type { margin-bottom: 0; }

.res-intro-text .gold-divider { background: var(--color-amber-gold); }

/* Stat tiles */
.res-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.res-stat-tile {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 1.75rem 1.5rem;
    text-align: center;
}

.res-stat-tile i {
    font-size: 2rem;
    color: var(--color-amber-gold);
    display: block;
    margin-bottom: 0.875rem;
}

.res-stat-tile strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1;
    margin-bottom: 0.375rem;
}

.res-stat-tile span {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.4;
    display: block;
}

/* ================================================================
   FILTER BAR — sticky jump-nav
   ================================================================ */
.res-filter-bar {
    background: var(--color-white);
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 200;
}

.res-filter-inner {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.res-filter-inner::-webkit-scrollbar { display: none; }

.res-filter-btn {
    padding: 1rem 1.5rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.res-filter-btn i {
    font-size: 0.9375rem;
    color: var(--color-accent);
}

.res-filter-btn:hover {
    color: var(--color-dark);
    border-bottom-color: #e2e8f0;
}

.res-filter-btn.is-active {
    color: var(--color-accent);
    border-bottom-color: var(--color-amber-gold);
}

.res-filter-btn.is-active i { color: var(--color-amber-gold); }

/* ================================================================
   FEATURED RESOURCE CARD
   ================================================================ */
.res-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid #e2e8f0;
    margin-bottom: 3rem;
    background: var(--color-white);
    overflow: hidden;
    transition: box-shadow var(--transition-base);
}

.res-featured:hover {
    box-shadow: var(--shadow-md);
}

.res-featured-img {
    position: relative;
    overflow: hidden;
    background: var(--color-off-white);
    min-height: 320px;
}

.res-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.res-featured:hover .res-featured-img img {
    transform: scale(1.03);
}

.res-featured-badge {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    background: var(--color-amber-gold);
    color: var(--color-white);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.375rem 0.875rem;
}

.res-featured-body {
    padding: clamp(2rem, 3.5vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Type tag (Guide / Article / Video label) */
.res-type-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.875rem;
}

.res-type-tag i { font-size: 0.875rem; }

.res-featured-body h3 {
    font-size: clamp(1.375rem, 2vw, 1.875rem);
    color: var(--color-dark);
    margin-bottom: 1rem;
    line-height: 1.25;
}

.res-featured-body p {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

/* Meta row (read time, category) */
.res-meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}

.res-meta i { color: var(--color-accent); margin-right: 0.25rem; }

/* ================================================================
   RESOURCE CARD GRID
   ================================================================ */
.res-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

.res-card {
    background: var(--color-white);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

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

/* Thumbnail */
.res-card-thumb {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--color-off-white);
    position: relative;
    flex-shrink: 0;
    display: block;
}

.res-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.res-card:hover .res-card-thumb img { transform: scale(1.04); }

/* Video play button overlay via CSS only */
.res-card-thumb.is-video::after {
    content: '\f144';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--color-white);
    background: rgba(13,50,59,0.45);
    transition: background var(--transition-base);
}

.res-card:hover .res-card-thumb.is-video::after {
    background: rgba(13,50,59,0.62);
}

/* Card body */
.res-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.res-card-body h4 {
    font-size: 1.0625rem;
    color: var(--color-dark);
    margin-bottom: 0.625rem;
    line-height: 1.35;
}

.res-card-body h4 a {
    color: var(--color-dark);
    transition: color var(--transition-fast);
}

.res-card-body h4 a:hover { color: var(--color-accent); }

.res-card-body p {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 1.25rem;
}

/* Card footer — meta + CTA link */
.res-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f4f4;
    margin-top: auto;
    flex-wrap: wrap;
}

.res-card-footer .res-meta {
    margin-bottom: 0;
    gap: 0.75rem;
}

.res-card-footer .res-cta {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: color var(--transition-fast), gap var(--transition-fast);
    white-space: nowrap;
}

.res-card:hover .res-card-footer .res-cta {
    color: var(--color-amber-gold);
    gap: 0.625rem;
}

/* ================================================================
   SECTION BACKGROUNDS
   ================================================================ */
.res-guides   { background: var(--color-white); }
.res-articles { background: var(--color-off-white); }
.res-education { /*background: var(--color-off-white);*/ }

/* Videos — dark green with pattern */
.res-videos {
    background: var(--color-dark-green);
    position: relative;
    overflow: hidden;
}

.res-videos::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpolygon points='60,5 115,32.5 115,87.5 60,115 5,87.5 5,32.5' fill='none' stroke='%235697a0' stroke-width='0.8' stroke-opacity='0.08'/%3E%3C/svg%3E");
    background-size: 120px 120px;
    pointer-events: none;
}

.res-videos .container { position: relative; z-index: 1; }

/* Video section — text overrides for dark bg */
.res-videos .res-header h2        { color: var(--color-white); }
.res-videos .res-header .eyebrow  { color: var(--color-accent); }
.res-videos .res-header .gold-divider { background: var(--color-amber-gold); }
.res-videos .res-header p         { color: rgba(255,255,255,0.65); }

/* Video section — card overrides for dark bg */
.res-videos .res-card                       { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
.res-videos .res-card:hover                 { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.2); }
.res-videos .res-card-body h4 a             { color: var(--color-white); }
.res-videos .res-card-body h4 a:hover       { color: var(--color-amber-gold); }
.res-videos .res-card-body p                { color: rgba(255,255,255,0.6); }
.res-videos .res-card-footer                { border-top-color: rgba(255,255,255,0.1); }
.res-videos .res-meta                       { color: rgba(255,255,255,0.45); }
.res-videos .res-meta i                     { color: var(--color-accent); }
.res-videos .res-card-footer .res-cta       { color: var(--color-accent); }
.res-videos .res-card:hover .res-card-footer .res-cta { color: var(--color-amber-gold); }

/* ================================================================
   EDUCATION HUB — topic cards
   ================================================================ */
.res-topic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.res-topic-card {
    background: var(--color-white);
    border: 1px solid #e2e8f0;
    border-top: 3px solid var(--color-amber-gold);
    padding: clamp(1.5rem, 2.5vw, 2rem);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.res-topic-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.res-topic-card i {
    font-size: 2rem;
    color: var(--color-amber-gold);
    display: block;
    margin-bottom: 1rem;
}

.res-topic-card h4 {
    font-size: 1rem;
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 0.625rem;
}

.res-topic-card p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 1.25rem;
}

.res-topic-card a {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: color var(--transition-fast), gap var(--transition-fast);
    margin-top: auto;
}

.res-topic-card:hover a {
    color: var(--color-amber-gold);
    gap: 0.625rem;
}

/* ================================================================
   NEWSLETTER SECTION
   ================================================================ */
.res-newsletter {
    background: var(--color-white);
    border-top: 1px solid #e2e8f0;
}

.res-newsletter-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.res-newsletter-text .eyebrow { color: var(--color-accent); }

.res-newsletter-text h2 {
    font-size: clamp(1.875rem, 3vw, 2.875rem);
    color: var(--color-dark);
    margin-bottom: 1rem;
}

.res-newsletter-text p {
    color: var(--color-text-muted);
    font-size: 1.0625rem;
    line-height: 1.8;
    margin: 0;
}

.res-newsletter-form {
    background: var(--color-off-white);
    border: 1px solid #e2e8f0;
    padding: clamp(2rem, 3vw, 2.75rem);
}

.res-newsletter-form h3 {
    font-size: 1.375rem;
    margin-bottom: 0.375rem;
}

.res-newsletter-form > p {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.55;
}

.res-newsletter-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.res-newsletter-form .form-group label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-dark);
}

.res-newsletter-form .form-group input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-dark);
    background: var(--color-white);
    border: 1.5px solid #e2e8f0;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.res-newsletter-form .form-group input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(86,151,160,0.15);
}

.res-newsletter-form .form-disclaimer {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.5;
}

.res-newsletter-form .form-disclaimer i {
    color: var(--color-accent);
    margin-right: 0.25rem;
}

/* ================================================================
   RESPONSIVE (max-width)
   ================================================================ */
@media (max-width: 1024px) {
    .res-intro-grid          { grid-template-columns: 1fr; gap: 3rem; }
    .res-featured            { grid-template-columns: 1fr; }
    .res-featured-img        { min-height: 240px; }
    .res-grid                { grid-template-columns: repeat(2, 1fr); }
    .res-topic-grid          { grid-template-columns: repeat(2, 1fr); }
    .res-newsletter-inner    { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 768px) {
    .res-stat-grid   { grid-template-columns: repeat(2, 1fr); }
    .res-filter-btn  { padding: 0.875rem 1rem; font-size: 0.75rem; }
    .res-grid        { grid-template-columns: 1fr; }
    .res-topic-grid  { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
    .res-stat-grid { grid-template-columns: 1fr 1fr; gap: 0.875rem; }
}











































.reviews-section {
    background: var(--color-off-white);
    padding-block: clamp(4rem, 7vw, 6.5rem);
    border-top: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
}

/* ── Section header ── */
.reviews-header {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.reviews-header .eyebrow {
    color: var(--color-accent);
}

.reviews-header h2 {
    font-size: clamp(1.875rem, 3vw, 2.875rem);
    color: var(--color-dark);
    margin-bottom: 0.5rem;
}

.reviews-header .gold-divider {
    margin-inline: auto;
}

/* Google badge row */
.reviews-google-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    background: var(--color-white);
    border: 1px solid #e2e8f0;
    padding: 0.625rem 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.reviews-google-badge img {
    height: 1.375rem;
    width: auto;
    display: block;
}

.reviews-google-badge .badge-score {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1;
}

.reviews-google-badge .badge-stars {
    display: flex;
    gap: 2px;
    color: #f5b400;
    font-size: 0.875rem;
}

.reviews-google-badge .badge-count {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* ── Slick carousel wrapper ── */
.reviews-carousel-wrap {
    position: relative;
}
.reviews-carousel .slick-track{
	display: flex;
}
/* ── Individual review card ── */
.review-card {
    background: var(--color-white);
    border: 1px solid #e2e8f0;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    margin: 0.5rem 0.875rem 1.5rem;   /* vertical: breathing room for box-shadow */
    display: flex !important;          /* override slick inline-block */
    flex-direction: column;
    gap: 1rem;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    height: auto;
}

.review-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

/* Top row: name + date + stars */
.review-top {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.review-meta {
    flex: 1;
    min-width: 0;
}

.review-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-date {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.125rem;
}

.review-stars {
    display: flex;
    gap: 2px;
    color: #f5b400;
    font-size: 0.9375rem;
    flex-shrink: 0;
}

/* Review body text */
.review-body {
    font-size: 0.9375rem;
    color: var(--color-text);
    line-height: 1.75;
    margin: 0;
}

/* ── Slick dots ── */
.reviews-carousel .slick-dots {
    bottom: -2rem;
    display: flex !important;
    justify-content: center;
    gap: 0.375rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.reviews-carousel .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
}

.reviews-carousel .slick-dots li button {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #cbd5e1;
    border: none;
    padding: 0;
    font-size: 0;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.reviews-carousel .slick-dots li button::before {
    display: none; /* hide slick default pseudo-content */
}

.reviews-carousel .slick-dots li.slick-active button {
    background: var(--color-amber-gold);
    transform: scale(1.35);
}

/* ── Custom prev/next arrows ── */
.reviews-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
    background: var(--color-white);
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    font-size: 0.875rem;
    color: var(--color-dark);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.reviews-arrow:hover {
    background: var(--color-amber-gold);
    border-color: var(--color-amber-gold);
    color: var(--color-white);
}

.reviews-arrow-prev { left: -2.5rem; }
.reviews-arrow-next { right: -2.5rem; }

/* ── CTA row below carousel ── */
.reviews-cta {
    text-align: center;
    margin-top: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.reviews-cta .btn-google {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75em 1.5em;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--color-dark);
    background: var(--color-white);
    border: 1.5px solid #e2e8f0;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    text-decoration: none;
}

.reviews-cta .btn-google:hover {
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    color: var(--color-dark);
}

.reviews-cta .btn-google img {
    height: 1.125rem;
    width: auto;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .reviews-arrow-prev { left: -0.5rem; }
    .reviews-arrow-next { right: -0.5rem; }
}

@media (max-width: 768px) {
    .reviews-carousel-wrap {
        -webkit-mask-image: none;
        mask-image: none;
    }
    /*.reviews-arrow { display: none !important; }*/
    .review-card { margin-inline: 0.25rem; padding: 30px;}
}

@media (max-width: 540px) {
    .reviews-google-badge { flex-wrap: wrap; justify-content: center; }
}



















.cta-content-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}


/* ── About page–specific styles (scoped, won't affect other pages) ── */

        /* Section spacing reuse */
        .about-section {
            padding-block: clamp(4rem, 7vw, 6.5rem);
        }

        /* ── S1: Intro ── */
        .about-intro-wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center;
        }

        .about-intro-text .eyebrow { color: var(--color-accent); }

        .about-intro-text h2 {
            font-size: clamp(1.875rem, 3vw, 2.875rem);
            margin-bottom: 1rem;
            line-height: 1.15;
        }

        .about-intro-text p {
            color: var(--color-text-muted);
            font-size: 1.0625rem;
            line-height: 1.8;
            margin-bottom: 1rem;
        }

        .about-intro-text p:last-child { margin-bottom: 0; }

        .about-intro-img-wrap {
            position: relative;
        }

        .about-intro-img-wrap img {
            width: 100%;
            display: block;
            object-fit: cover;
        }

        /* ── S2: Why Lattice Exists — dark bg ── */
        .about-why {
            background: var(--color-dark-green);
            position: relative;
            overflow: hidden;
        }

        /*.about-why::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpolygon points='60,5 115,32.5 115,87.5 60,115 5,87.5 5,32.5' fill='none' stroke='%235697a0' stroke-width='0.8' stroke-opacity='0.1'/%3E%3Cpolygon points='60,20 100,40 100,80 60,100 20,80 20,40' fill='none' stroke='%235697a0' stroke-width='0.6' stroke-opacity='0.07'/%3E%3C/svg%3E");
            background-size: 120px 120px;
            pointer-events: none;
        }*/

        .about-why .container { position: relative; z-index: 1; }

        .about-why-inner {
            max-width: 820px;
            margin-inline: auto;
            text-align: center;
        }

        .about-why-inner .eyebrow { color: var(--color-accent); }

        .about-why-inner h2 {
            color: var(--color-white);
            font-size: clamp(1.875rem, 3vw, 2.875rem);
            margin-bottom: 1.5rem;
        }

        .about-why-inner p {
            color: rgba(255,255,255,0.72);
            font-size: 1.0625rem;
            line-height: 1.8;
            margin-bottom: 1rem;
        }

        .about-why-inner p:last-child { margin-bottom: 0; }

        .about-why-inner .gold-divider {
            background: var(--color-amber-gold);
            margin-inline: auto;
        }

        /* ── S3: What Makes Lattice Different — 4 cards ── */
        .about-diff {
            background: var(--color-off-white);
        }

        .about-diff-header {
            text-align: center;
            margin-bottom: clamp(2.5rem, 5vw, 4rem);
        }

        .about-diff-header .eyebrow { color: var(--color-accent); }

        .about-diff-header h2 {
            font-size: clamp(1.875rem, 3vw, 2.875rem);
            margin-bottom: 0;
        }

        .about-diff-header .gold-divider { margin-inline: auto; }

        .about-diff-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
        }

        .about-diff-card {
            background: var(--color-white);
            border: 1px solid #e2e8f0;
            padding: clamp(1.5rem, 2.5vw, 2.25rem);
            border-top: 3px solid var(--color-amber-gold);
            transition: box-shadow var(--transition-base), transform var(--transition-base);
        }

        .about-diff-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-4px);
        }

        .about-diff-card i {
            font-size: 2rem;
            color: var(--color-amber-gold);
            display: block;
            margin-bottom: 1rem;
        }

        .about-diff-card h4 {
            font-size: 1rem;
            font-family: var(--font-body);
            font-weight: 700;
            color: var(--color-dark);
            margin-bottom: 0.625rem;
        }

        .about-diff-card p {
            font-size: 0.9375rem;
            color: var(--color-text-muted);
            line-height: 1.7;
            margin: 0;
        }

        /* ── S4: Philosophy — white bg, full-width pull-quote ── */
        .about-philosophy {
            background: var(--color-white);
            border-top: 1px solid #e2e8f0;
        }

        .about-philosophy-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center;
        }

        .about-philosophy-text .eyebrow { color: var(--color-accent); }

        .about-philosophy-text h2 {
            font-size: clamp(1.875rem, 3vw, 2.875rem);
            margin-bottom: 0.5rem;
            font-style: italic;
        }

        .about-philosophy-text > p {
            color: var(--color-text-muted);
            font-size: 1.0625rem;
            line-height: 1.8;
            margin-bottom: 0;
        }

        /* Checklist on the right */
        .about-checklist {
            list-style: none;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0.875rem;
        }

        .about-checklist li {
            display: flex;
            align-items: center;
            gap: 0.875rem;
            font-size: 1.0625rem;
            color: var(--color-dark);
            font-weight: 500;
            line-height: 1.4;
        }

        .about-checklist li i {
            color: var(--color-amber-gold);
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        /* ── S5: Meet Amy ── */
        .about-amy {
            background: var(--color-off-white);
            border-top: 1px solid #e2e8f0;
        }

        .about-amy-inner {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 4rem;
            align-items: start;
        }

        .about-amy-photo {
            position: relative;
        }

        .about-amy-photo img {
            width: 100%;
            display: block;
            object-fit: cover;
            aspect-ratio: 3/4;
        }

        .about-amy-text .eyebrow { color: var(--color-accent); }

        .about-amy-text h2 {
            font-size: clamp(1.75rem, 2.5vw, 2.5rem);
            margin-bottom: 1.25rem;
        }

        .about-amy-text p {
            color: var(--color-text-muted);
            font-size: 1rem;
            line-height: 1.8;
            margin-bottom: 1rem;
        }

        .about-amy-text p:last-of-type { margin-bottom: 0; }

        /* Credential badges (circles/squares with text) */
        .about-amy-badges {
            display: flex;
            gap: 1.25rem;
            margin-top: 2rem;
            flex-wrap: wrap;
        }

        .about-amy-badge {
            background: var(--color-dark-green);
            color: var(--color-white);
            width: 9rem;
            height: 9rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 1rem;
            font-size: 0.8125rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            line-height: 1.35;
            flex-shrink: 0;
        }

        .about-amy-badge i {
            display: block;
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            color: var(--color-amber-gold);
        }

        /* ── S6: Who We Partner With — visual cards ── */
        .about-partners {
            background: var(--color-white);
            border-top: 1px solid #e2e8f0;
        }

        .about-partners-header {
            text-align: center;
           /* margin-bottom: clamp(2.5rem, 5vw, 4rem);*/
        }

        .about-partners-header .eyebrow { color: var(--color-accent); }

        .about-partners-header h2 {
            font-size: clamp(1.875rem, 3vw, 2.875rem);
            margin-bottom: 0.5rem;
        }

        .about-partners-header > p {
            color: var(--color-text-muted);
            font-size: 1.0625rem;
            max-width: 700px;
            margin-inline: auto;
            margin-bottom: 0;
            line-height: 1.7;
        }

        .about-partners-header .gold-divider { margin-inline: auto; }

        .about-partners-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        .about-partner-card {
            border: 1px solid #e2e8f0;
            padding: clamp(1.5rem, 2.5vw, 2rem);
            display: flex;
            gap: 1.25rem;
            align-items: flex-start;
            transition: box-shadow var(--transition-base), border-color var(--transition-base);
        }

        .about-partner-card:hover {
            box-shadow: var(--shadow-sm);
            border-color: var(--color-accent);
        }

        .about-partner-card .icon-circle {
            width: 3.25rem;
            height: 3.25rem;
            border-radius: 50%;
            background: rgba(86,151,160,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .about-partner-card .icon-circle i {
            font-size: 1.25rem;
            color: var(--color-accent);
        }

        .about-partner-card h4 {
            font-size: 0.9375rem;
            font-family: var(--font-body);
            font-weight: 700;
            color: var(--color-dark);
            margin-bottom: 0.375rem;
        }

        .about-partner-card p {
            font-size: 0.875rem;
            color: var(--color-text-muted);
            line-height: 1.65;
            margin: 0;
        }

        /* ── S7: Comparison table ── */
        .about-compare {
            background: var(--color-off-white);
            border-top: 1px solid #e2e8f0;
        }

        .about-compare-header {
            text-align: center;
            margin-bottom: clamp(2.5rem, 5vw, 4rem);
        }

        .about-compare-header .eyebrow { color: var(--color-accent); }

        .about-compare-header h2 {
            font-size: clamp(1.875rem, 3vw, 2.875rem);
            margin-bottom: 0;
        }

        .about-compare-header .gold-divider { margin-inline: auto; }

        .compare-table {
            width: 100%;
            border-collapse: collapse;
            background: var(--color-white);
            border: 1px solid #e2e8f0;
        }

        .compare-table thead th {
            padding: 1.25rem 1.75rem;
            font-family: var(--font-body);
            font-size: 0.8125rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .compare-table thead th:first-child {
            background: var(--color-off-white);
            color: var(--color-text-muted);
            border-right: 2px solid #e2e8f0;
            width: 50%;
        }

        .compare-table thead th:last-child {
            background: var(--color-dark-green);
            color: var(--color-white);
            width: 50%;
        }

        .compare-table tbody tr {
            border-bottom: 1px solid #e2e8f0;
        }

        .compare-table tbody tr:last-child { border-bottom: none; }

        .compare-table tbody tr:nth-child(even) .col-lattice {
            background: rgba(86,151,160,0.04);
        }

        .compare-table tbody td {
            padding: 1.125rem 1.75rem;
            font-size: 1rem;
            line-height: 1.5;
            vertical-align: middle;
        }

        .compare-table tbody td.col-traditional {
            color: var(--color-text-muted);
            border-right: 2px solid #e2e8f0;
        }

        .compare-table tbody td.col-lattice {
            color: var(--color-dark);
            font-weight: 600;
        }

        .compare-table tbody td.col-lattice::before {
            content: '\f00c';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            color: var(--color-amber-gold);
            margin-right: 0.75rem;
            font-size: 0.875rem;
        }

        /* ── S8: Promise + Final CTA ── */
        .about-promise {
            background: var(--color-dark);
            position: relative;
            overflow: hidden;
        }

        .about-promise::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpolygon points='60,5 115,32.5 115,87.5 60,115 5,87.5 5,32.5' fill='none' stroke='%235697a0' stroke-width='0.8' stroke-opacity='0.08'/%3E%3C/svg%3E");
            background-size: 120px 120px;
            pointer-events: none;
        }

        .about-promise .container { position: relative; z-index: 1; }

        .about-promise-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center;
        }

        .about-promise-text .eyebrow { color: var(--color-accent); }

        .about-promise-text h2 {
            color: var(--color-white);
            font-size: clamp(1.875rem, 3vw, 2.875rem);
            margin-bottom: 1.25rem;
        }

        .about-promise-text p {
            color: rgba(255,255,255,0.72);
            font-size: 1.0625rem;
            line-height: 1.8;
            margin: 0;
        }

        .about-cta-box {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.12);
            padding: clamp(2rem, 3vw, 3rem);
        }

        .about-cta-box h3 {
            color: var(--color-white);
            font-size: clamp(1.375rem, 2vw, 1.875rem);
            margin-bottom: 1rem;
        }

        .about-cta-box p {
            color: rgba(255,255,255,0.65);
            font-size: 1rem;
            line-height: 1.75;
            margin-bottom: 1.75rem;
        }

        /* ── Responsive ── */
        @media (max-width: 1024px) {
            .about-intro-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
            .about-diff-grid { grid-template-columns: repeat(2, 1fr); }
            .about-philosophy-inner { grid-template-columns: 1fr; gap: 2.5rem; }
            .about-amy-inner { grid-template-columns: 1fr; gap: 2rem; }
            .about-amy-photo img { /*aspect-ratio: 16/9; */}
            .about-amy-badges { justify-content: flex-start; }
            .about-partners-grid { grid-template-columns: repeat(2, 1fr); }
            .about-promise-inner { grid-template-columns: 1fr; gap: 2.5rem; }
        }

        @media (max-width: 768px) {
            .about-diff-grid { grid-template-columns: 1fr; }
            .about-partners-grid { grid-template-columns: 1fr; }
            .about-amy-badges { gap: 1rem; }
            .about-amy-badge { width: 8rem; height: 8rem; }
            .compare-table thead th,
            .compare-table tbody td { padding: 0.875rem 1rem; font-size: 0.9375rem; }
        }










































/* ================================================================
   SECTION 2 — INSTANT CLARITY (A Better Way)
   ================================================================ */
.contentside ul li {
  list-style-type: none;
  padding: 2px 0 2px 1.3em;
  position: relative;
}
.contentside ol, .contentside ul {
  margin: 0 0 20px;
  padding: 0;
}
.contentside ul li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-size: 0.75em;
  position: absolute;
  left: 0;
  top: 5px;
  font-weight: 700;
  color: var(--color-amber-gold);
}




#instant-clarity {
    background-color: var(--color-off-white);
    background-image: url('../../img/pattern-purple.png');
    background-repeat: repeat;
    background-size: 420px auto;
    padding-block: clamp(4rem, 7vw, 7rem);
}

.clarity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.clarity-text .eyebrow { color: var(--color-accent); }

.clarity-text h1 {color: var(--color-dark);
  margin-bottom: 1rem;
  font-size: clamp(1.875rem, 3vw, 2.875rem);
  font-weight: 700;}

.clarity-text p {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.75;
}
.clarity-text ul{
	 color: var(--color-text-muted);
}
.clarity-text .gold-divider { background: var(--color-accent); }



/* Inline consultation form */
.clarity-form {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border: 1px solid rgba(162,170,208,0.25);
    box-shadow: var(--shadow-md);
}

.clarity-form h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.375rem;
    text-align: center;
}

.clarity-form > p {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin-bottom: 1.75rem;
    text-align: center;
    line-height: 1.55;
}

.clarity-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.clarity-form .form-row .form-group { margin-bottom: 0; }

.clarity-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.clarity-form .form-group label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-dark);
}

.clarity-form .form-group input,
.clarity-form .form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-dark);
    background: var(--color-off-white);
    border: 1.5px solid #e2e8f0;
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.clarity-form .form-group input:focus,
.clarity-form .form-group textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(162,170,208,0.18);
    background: var(--color-white);
}

.clarity-form .form-group textarea { resize: vertical; min-height: 5rem; }

.clarity-form .btn {
    width: 100%;
    justify-content: center;
    padding-block: 0.95em;
    font-size: 1rem;
    margin-top: 0.5rem;
}

.clarity-form .form-note {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: center;
}
.clarity-form .form-note i { color: var(--color-accent); margin-right: 0.25rem; }

/* ================================================================
   SECTION 3 — WHAT WE DO (white bg, vertical dividers, big icons)
   ================================================================ */
#what-we-do {
    background: var(--color-white);
    padding-block: clamp(4rem, 7vw, 7rem);
    position: relative;
    border-bottom: 1px solid #e2e8f0;
}

/* 2-col top row — vertically center aligned */
.what-we-do-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3.5rem;
}

.what-we-do-top .eyebrow { color: #8592ee; }

.what-we-do-top h2 {
    color: var(--color-dark);
    margin-bottom: 15px;
}

.what-we-do-right {
    padding-top: 0;
    display: flex;
    align-items: center;
}

.what-we-do-right p {
    color: var(--color-text-muted);
    font-size: 1.0625rem;
    line-height: 1.75;
    margin: 0;
}

/* 6-item pillar layout — 3 columns, 2 rows */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
}

/* Vertical dividers between columns */
.pillar-card {
    background: transparent;
    border: none;
    border-left: 1px solid #e2e8f0;
    padding: clamp(1.5rem, 2vw, 2.5rem) clamp(1.25rem, 2vw, 2rem);
    position: relative;
    transition: background var(--transition-base);
}

/* First item in each row: no left border */
.pillar-card:first-child,
.pillar-card:nth-child(4) { border-left: none; }

/* Top row cards: no top border; bottom row cards get top border */
.pillar-card:nth-child(n+4) { border-top: 1px solid #e2e8f0; }

.pillar-card:hover { background: var(--color-off-white); }

/* No top-bar hover effect */
.pillar-card::after { display: none; }

.pillar-icon {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    display: block;
    margin-bottom: 1.25rem;
    transition: none;
}
.pillar-card:hover .pillar-icon { background: transparent; }
.pillar-icon i {
    font-size: 2.5rem;
    color: var(--color-amber-gold);   /* GREEN icons */
    display: block;
}

.pillar-card h4 {
    color: var(--color-dark);
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.pillar-card p {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0;
}

/* ================================================================
   SECTION 4 — OUR PROCESS (dark bg, two-row layout like What We Do)
   ================================================================ */
#our-process {
    background: var(--color-dark-green);
    padding-block: clamp(4rem, 7vw, 7rem);
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ROW 1: two-col header — left=heading block, right=description+button */
.process-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3.5rem;
}

.process-header-left .eyebrow { color: #8592ee; }
.process-header-left h2 { color: var(--color-white); margin-bottom: 0; }

.process-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.process-header-right p {
    color: rgba(255,255,255,0.65);
    font-size: 1rem;
    line-height: 1.75;
    margin: 0;
}

/* White outlined button in process header */
.process-header-right .btn-outline {
    border: 1px solid var(--color-white);
    color: var(--color-white);
    background: transparent;
}
.process-header-right .btn-outline:hover { background: rgba(255,255,255,0.1); }

/* ROW 2: Steps grid */
.process-steps-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    position: relative;
}

.process-steps-grid::before { display: none; }

.process-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  position: relative;
  z-index: 1;
  padding: 0 1.0rem 0 0;
  border-right: 1px solid rgba(255,255,255,0.12);
  margin-right: 1.0rem;
}

.process-step:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

/* Photo above each process step — fixed height for equal sizing */
.process-step-img {
    width: 100%;
    height: 180px;          /* fixed equal height across all steps */
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.process-step-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}

.process-step:hover .process-step-img img { transform: scale(1.04); }

/* Button centred below the steps grid */
.process-btn-wrap {
    text-align: center;
    margin-top: 2.5rem;
}

.step-icon {
    font-size: 2rem;
    color: var(--color-accent);
    margin-bottom: 0.875rem;
    display: block;
}

.step-num {
    background: none;
    border: none;
    border-radius: 0;
    width: auto; height: auto;
    display: block;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.step-num .step-label {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    font-style: italic;
    color: #c49f58 !important;
    line-height: 1;
    display: block;
}

.process-step:not(:last-child) .step-num::after { display: none; }

.process-step h4 {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.5rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--font-body);
}

.process-step p {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
    margin: 0;
}

.step-text { padding-top: 0; }

/* Keep old .process-layout/.process-left for legacy — hidden now */
.process-layout { display: none; }

/* ================================================================
   SECTION 5 — PRODUCTS (dark background per client)
   ================================================================ */
#products-services {
    background: var(--color-dark-green);
    padding-block: clamp(4rem, 7vw, 7rem);
    position: relative;
    overflow: hidden;
}

#products-services::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 40 L20 0 L40 40 L20 80 Z M40 40 L60 0 L80 40 L60 80 Z' fill='none' stroke='%23a2aad0' stroke-width='0.4' stroke-opacity='0.06'/%3E%3C/svg%3E");
    background-size: 80px 80px;
    pointer-events: none;
}

#products-services .section-header {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    position: relative;
}

#products-services .section-header h2 { color: var(--color-white); }

#products-services .section-header .eyebrow { color: var(--color-accent); }

#products-services .section-header .gold-divider {
    background: var(--color-accent);
    margin-inline: auto;
}

#products-services .section-header p {
    color: rgba(255,255,255,0.6);
    max-width: 540px;
    margin-inline: auto;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
    position: relative;
}

.product-card {
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    display: flex;
    flex-direction: column;   /* enables button push-to-bottom */
	position: relative;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(162,170,208,0.3);
}

.product-card-img {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #2c3a38;
    flex-shrink: 0;
}

.product-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.product-card:hover .product-card-img img { transform: scale(1.05); }

/* Card body: flex column, button pushed to bottom */
.product-card-body {
padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  justify-content: flex-end;
}
.prod-link {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.product-card-body h4 {
  color: var(--color-white);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0;
  padding: 10px;
  background: rgba(0,0,0,0.5);
}

.product-card-body ul {
    list-style: none;
    margin-bottom: 1.5rem;
    flex: 1;   /* grows to fill space, pushes button down */
}

.product-card-body ul li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 1rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.5rem;
    line-height: 1.55;
}

.product-card-body ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.58em;
    width: 6px; height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
}

/* btn inside card always at bottom, full width */
.product-card-body .btn {
    align-self: flex-start;
    width: auto;
}

/* Product card Learn More — accent bg */
.product-card-body .btn-accent {
    background: var(--color-accent);
    color: var(--color-dark);
    border-color: var(--color-accent);
}
.product-card-body .btn-accent:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-white);
}

/* View All button in products */
#products-services .view-all-wrap {
    text-align: center;
    margin-top: 2.5rem;
    position: relative;
}

/* ================================================================
   SECTION 6 — WHY LATTICE (Our Difference) — WHITE BACKGROUND
   ================================================================ */
#why-lattice {
    background: var(--color-white);
    padding-block: clamp(4rem, 7vw, 7rem);
    position: relative;
    overflow: hidden;
    border-top: 1px solid #e2e8f0;
}

#why-lattice::before {
    content: '';
    position: absolute;
    top: -8rem; right: -8rem;
    width: 36rem; height: 36rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(162,170,208,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.why-text .eyebrow { color: var(--color-accent); }
.why-text h2 { color: var(--color-dark); margin-bottom: 1.25rem; }
.why-text .gold-divider { background: var(--color-accent); }

.why-text > p {
    color: var(--color-text-muted);
    font-size: 1.0625rem;
    line-height: 1.75;
    margin-bottom: 2rem;
}

.why-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.why-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.why-list li .icon-wrap {
    width: 2.75rem; height: 2.75rem;
    background: rgba(196,159,88,0.12);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
    transition: background var(--transition-base);
}
.why-list li:hover .icon-wrap { background: rgba(196,159,88,0.22); }
.why-list li .icon-wrap i { color: var(--color-amber-gold); font-size: 1.25rem; }

.why-list li .text strong {
    display: block;
    color: var(--color-dark);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}
.why-list li .text span { color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.55; }

.why-image { position: relative; }

.why-image-wrap {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    /*aspect-ratio: 4/5;*/
    background: #e8ecf0;
}
.why-image-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* Badge — GREEN background for 3rd colour accent */
.why-image-badge {
    position: absolute;
    bottom: -1.5rem;
    left: -1.5rem;
    background: var(--color-amber-gold);
    color: var(--color-white);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    width: 10rem;
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.why-image-badge strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
    color: var(--color-white);
}
.why-image-badge span {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
}

/* ================================================================
   SECTION 7 — READY TO BEGIN (hero image bg, #1e302e overlay)
   ================================================================ */
#cta-close {
    position: relative;
    padding-block: clamp(5rem, 10vw, 9rem);
    overflow: hidden;
    background: var(--color-dark-green);
    /* Divider between stacked dark sections */
    border-top: 1px solid rgba(255,255,255,0.08);
}

.cta-bg-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

#cta-close::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(30,48,46,0.70);
    z-index: 1;
}

#cta-close .container {
    position: relative;
    z-index: 2;
    display: block;
}

.cta-content .eyebrow { color: var(--color-accent); }
.cta-content h2 { color: var(--color-white); margin-bottom: 0.875rem; }
.cta-content p {
    color: rgba(255,255,255,0.7);
    font-size: 1.0625rem;
    line-height: 1.75;
    max-width: 600px;
    margin-bottom: 2rem;
}

.cta-actions {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ================================================================
   SECTION 8 — FAQ
   ================================================================ */
#faq {
    background: var(--color-off-white);
    padding-block: clamp(4rem, 7vw, 7rem);
}

#faq .section-header {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
#faq .section-header h2 { color: var(--color-dark); }
#faq .section-header .eyebrow { color: var(--color-accent); }
#faq .section-header .gold-divider { background: var(--color-accent); margin-inline: auto; }
#faq .section-header p { max-width: 560px; margin-inline: auto; color: var(--color-text-muted); }

.faq-list {
    max-width: 860px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    background: var(--color-white);
    border-radius: var(--radius-md);
    margin-bottom: 0.875rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border: 1px solid #e8ecf0;
    transition: box-shadow var(--transition-base);
}
.faq-item:hover { box-shadow: var(--shadow-md); }

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    width: 100%;
    padding: 1.375rem 1.75rem;
    background: none; border: none;
    cursor: pointer; text-align: left;
    font-family: var(--font-body);
    font-size: 1.0625rem; font-weight: 600;
    color: var(--color-dark);
    line-height: 1.45;
    transition: color var(--transition-fast);
}
.faq-question:hover { color: var(--color-accent); }
.faq-question[aria-expanded="true"] {
    color: var(--color-accent);
    border-bottom: 1px solid #e8ecf0;
}

.faq-icon {
    flex-shrink: 0;
    font-size: 0.875rem;
    color: var(--color-accent);
    transition: transform var(--transition-base);
}
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }

.faq-answer { padding: 1.375rem 1.75rem; }
.faq-answer p { font-size: 1rem; color: var(--color-text-muted); line-height: 1.75; margin: 0; }

/* ================================================================
   SECTION 9 — LEAD CAPTURE FORM (Start Your Project)
   ================================================================ */
#lead-form-section {
    background-color: var(--color-white);
    background-image: url('../../img/pattern-purple.png');
    background-repeat: repeat;
    background-size: 420px auto;
    padding-block: clamp(4rem, 7vw, 7rem);
    position: relative;
}

.form-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.form-info .eyebrow { color: var(--color-accent); }
.form-info h2 { margin-bottom: 1rem; }
.form-info .gold-divider { background: var(--color-accent); }

.form-info p {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

.contact-details { list-style: none; display: flex; flex-direction: column; gap: 0.875rem; }
.contact-details li {
    display: flex; align-items: center; gap: 0.875rem;
    font-size: 1rem; color: var(--color-text-muted);
}
.contact-details li i { color: var(--color-accent); width: 1.25rem; text-align: center; }
.contact-details li a { color: var(--color-text-muted); transition: color var(--transition-fast); }
.contact-details li a:hover { color: var(--color-accent); }

/* Lead Form box */
.lead-form {
    background: var(--color-off-white);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border: 1px solid rgba(162,170,208,0.2);
}

.lead-form h3 {
    margin-bottom: 0.5rem;
    font-size: 1.625rem; font-weight: 700;
    text-align: center;
}

.lead-form > p {
    color: var(--color-text-muted);
    font-size: 1rem; margin-bottom: 1.75rem;
    text-align: center; line-height: 1.55;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem; margin-bottom: 1rem;
}

.form-group {
    display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem;
}
.form-group:last-of-type { margin-bottom: 1.5rem; }
.form-row .form-group { margin-bottom: 0; }

.form-group label {
    font-size: 0.8125rem; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--color-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-dark);
    background: var(--color-white);
    border: 1.5px solid #e2e8f0;
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none; -webkit-appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(162,170,208,0.2);
}

.form-group textarea { resize: vertical; min-height: 5.5rem; }

.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem; cursor: pointer;
}

.lead-form .btn { width: 100%; justify-content: center; padding-block: 1em; font-size: 1rem; }

.form-disclaimer {
    margin-top: 0.875rem; font-size: 0.8rem;
    color: var(--color-text-muted); text-align: center; line-height: 1.5;
}
.form-disclaimer i { color: var(--color-accent); margin-right: 0.25rem; }

/* ================================================================
   SECTION 10 — FOOTER
   ================================================================ */
#site-footer {
    background: var(--color-dark-green);
    color:#fff;
    position: relative;
    overflow: hidden;
}
.footer-bottom a{
    color: #fff;
    text-decoration: underline;
}
#site-footer::before {
    content: none;
}

.footer-top {
    padding-block: clamp(3rem, 6vw, 5rem);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    position: relative;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
}

.footer-brand .site-logo { margin-bottom: 1.25rem; max-width: 200px; }
.footer-brand p { font-size: 0.9rem; line-height: 1.7; margin-bottom: 1.25rem; }

.social-links { display: flex; gap: 0.625rem; }
.social-links a {
    width: 2.25rem; height: 2.25rem;
    background: rgba(162,170,208,0.1);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-accent);
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}
.social-links a:hover { background: var(--color-accent); color: var(--color-dark); }

.footer-col h5 {
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; }
.footer-col ul li a {
    font-size: 0.9rem;
    color: #fff;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
    display: inline-block;
}
.footer-col ul li a:hover { color: var(--color-accent); padding-left: 0.375rem; }

.footer-contact li {
    display: flex; align-items: flex-start; gap: 0.75rem;
    font-size: 0.9rem; line-height: 1.55; margin-bottom: 0.75rem;
}
.footer-contact li i { color: var(--color-accent); margin-top: 0.2rem; width: 1rem; text-align: center; flex-shrink: 0; }
.footer-contact li a { color: rgba(255,255,255,0.55); transition: color var(--transition-fast); }
.footer-contact li a:hover { color: var(--color-accent); }

.footer-bottom {
    padding-block: 1.25rem;
    position: relative;
}
.footer-bottom .container {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.footer-bottom p { font-size: 0.8125rem; color: #fff; margin: 0; }

.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { font-size: 0.8125rem; color: #fff; transition: color var(--transition-fast); }
.footer-legal a:hover { color: var(--color-accent); }

/* ================================================================
   BACK TO TOP
   ================================================================ */
#back-to-top {
    position: fixed;
    bottom: 2rem; right: 2rem; z-index: 900;
    width: 3rem; height: 3rem;
    background: var(--color-amber-gold);
    color: var(--color-white);
    border: none; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}
#back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#back-to-top:hover { background: var(--color-dark-green); color: var(--color-white); }

/* ================================================================
   MEDIA QUERIES (max-width)
   ================================================================ */

/* 1280px */
@media (max-width: 1280px) {
    .pillars-grid { grid-template-columns: repeat(3, 1fr); }
    .process-steps-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* 1199px — nav collapses to hamburger only */
@media (max-width: 1199px) {
	.mobile-nav{
		padding-top: 10rem;
	}
    .site-nav, .header-cta { display: none !important; }
    .nav-toggle { display: flex !important; }
}

/* Always ensure desktop nav and mobile nav are mutually exclusive */
@media (min-width: 1200px) {
    .nav-toggle { display: none !important; }
    .mobile-nav { display: none !important; }
}

/* 1024px */
@media (max-width: 1024px) {
	 .cta-content-wrap {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
    .clarity-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .what-we-do-top { grid-template-columns: 1fr; gap: 1rem; }
    .process-header { grid-template-columns: 1fr; gap: 1.5rem; }
    .process-steps-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .why-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .why-image { order: -1; }
    /*.why-image-wrap { aspect-ratio: 16/9; }*/
    .why-image-badge { bottom: -1rem; left: 1rem; }
    .form-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
    .products-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 768px */
@media (max-width: 768px) {
    .hero-content { max-width: 100%; }
    .hero-actions { flex-direction: column; align-items: flex-start; }
    .hero-actions .btn { width: 100%; justify-content: center; }

    .trust-band-label { display: none; }
    .trust-industry { justify-content: flex-start; }

    .pillars-grid { grid-template-columns: 1fr; }
    .process-steps-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .products-grid { grid-template-columns: 1fr; }

    .form-row { grid-template-columns: 1fr; }
    .clarity-form .form-row { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom .container { flex-direction: column; text-align: center; }
    .footer-legal { justify-content: center; }
    .cta-actions { flex-direction: column; }
}

/* 480px */
@media (max-width: 480px) {
    .process-steps-grid { grid-template-columns: 1fr; }
    .hero-trust .container { gap: 0.75rem 1.5rem; }
    .trust-item { font-size: 0.75rem; }
    #back-to-top { bottom: 1.25rem; right: 1.25rem; }
	.process-step{
		border-right: none !important;
    padding-right: 0;
    margin-right: 0;
	}
}

/* ================================================================
   3RD COLOUR (GREEN) — Consistent application
   ================================================================ */

/* Process step number — accent (eyebrow) already #8592ee; keep.
   Step icon on process section in green */
.process-step .step-icon { color: var(--color-green); }

/* FAQ chevron icon in green */
.faq-icon { color: var(--color-green) !important; }

/* Contact detail icons in green */
.contact-details li i { color: var(--color-green) !important; }

/* Gold divider — use green tint */
.gold-divider { background: var(--color-green); }

/* ================================================================
   LATTICE BACKGROUND — Lead form + header/footer areas
   ================================================================ */
/* Subtle lattice SVG watermark using the logo hexagonal diamond pattern */
.lattice-bg-overlay {
    position: relative;
}
.lattice-bg-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpolygon points='60,5 115,32.5 115,87.5 60,115 5,87.5 5,32.5' fill='none' stroke='%234caf82' stroke-width='0.8' stroke-opacity='0.12'/%3E%3Cpolygon points='60,20 100,40 100,80 60,100 20,80 20,40' fill='none' stroke='%234caf82' stroke-width='0.6' stroke-opacity='0.08'/%3E%3Cpolygon points='60,35 85,47.5 85,72.5 60,85 35,72.5 35,47.5' fill='none' stroke='%234caf82' stroke-width='0.5' stroke-opacity='0.06'/%3E%3C/svg%3E");
    background-size: 120px 120px;
    background-repeat: repeat;
}
.lattice-bg-overlay > * { position: relative; z-index: 1; }

/* Lead form and footer lattice overlays removed — pattern-purple.png used instead */
#lead-form-section { position: relative; }
#lead-form-section > .container { position: relative; z-index: 1; }

/* ================================================================
   GREEN CTA HOVER — all buttons on dark backgrounds
   ================================================================ */



/* ================================================================
   PROCESS STEP — Hover: image fades, word appears in GREEN
   ================================================================ */
.process-step {
    position: relative;
    cursor: pointer;
}

/* Step word overlay — hidden by default, revealed on hover */
.process-step-word {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30,48,46,0.70); /* semi-transparent so image shows through */
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.process-step-word span {
    font-family: var(--font-heading);
    font-size: clamp(0.875rem, 1.8vw, 1.25rem); /* smaller, responsive */
    font-weight: 800;
    font-style: italic;
    color: var(--color-green);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
    padding: 0 0.5rem;
}

/* On hover: image fades to 40% (still partially visible), word appears */
.process-step:hover .process-step-img img {
    opacity: 0.40;
    transform: none;
}

.process-step:hover .process-step-word {
    opacity: 1;
}

/* Smooth image fade */
.process-step-img img {
    transition: opacity var(--transition-base), transform 0.5s ease;
}

/* Eyebrow numbers — apply green accent to process step numbers */
.step-label { color: var(--color-green) !important; }

/* ================================================================
   RESPONSIVE — shared across homepage + internal pages
   ================================================================ */
/* internal pages will @include or link style.css for all common styles */


/* ================================================================
   INTERNAL PAGES — Single source of truth (merged from internal.css)
   ================================================================ */

/* ── Page Hero — compact, centred, solid bg, no pattern ── */
.page-hero {
    background: var(--color-dark-green);
    padding-block: clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.page-hero .container { position: relative; }

.page-hero h1,
.page-hero h2 {
    color: var(--color-white);
    margin-bottom: 0;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
}

/* ── Breadcrumb ── */
.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.75rem;
    list-style: none;
    padding: 0;
}

.breadcrumb li a {
    color: rgba(255,255,255,0.5);
    transition: color var(--transition-fast);
}
.breadcrumb li a:hover { color: var(--color-green); }
.breadcrumb li:not(:last-child)::after {
    content: '/';
    margin-left: 0.5rem;
    opacity: 0.4;
}

/* ── Internal section spacing ── */
.internal-section {
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

/* ── Section divider ── */
.section-divider {
    height: 1px;
    background: #e2e8f0;
    margin-block: 3rem;
    border: none;
}

/* ── Common card grid ── */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* ================================================================
   2-COLUMN CONTENT + SIDEBAR
   ================================================================ */
.content-sidebar-wrap {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 3rem;
    align-items: start;
}

/* ── SIDEBAR ── */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sidebar-widget {
    background: var(--color-off-white);
    border: 1px solid #e2e8f0;
    padding: 1.75rem;
}

.sidebar-widget-title {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-dark);
    margin-bottom: 1.25rem;
    padding-bottom: 0.875rem;
    border-bottom: 2px solid var(--color-green);
}

/* Sidebar lead form */
.sidebar-widget .lead-form {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.sidebar-widget .lead-form h3 {
    font-size: 1.25rem;
    text-align: left;
}

.sidebar-widget .lead-form > p {
    text-align: left;
    font-size: 0.9375rem;
}

/* Sidebar form: single-column fields */
.sidebar-widget .form-row {
    grid-template-columns: 1fr;
}

/* Blog categories — no count badge */
.sidebar-categories {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-categories li { border-bottom: 1px solid #e2e8f0; }
.sidebar-categories li:last-child { border-bottom: none; }

.sidebar-categories li a {
    display: flex;
    align-items: center;
    padding: 0.625rem 0;
    font-size: 0.9375rem;
    color: var(--color-text);
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.sidebar-categories li a:hover {
    color: var(--color-green);
    padding-left: 0.375rem;
}

/* Archives */
.sidebar-archives {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-archives li { border-bottom: 1px solid #e2e8f0; }
.sidebar-archives li:last-child { border-bottom: none; }

.sidebar-archives li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0;
    font-size: 0.9375rem;
    color: var(--color-text);
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.sidebar-archives li a::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.6rem;
    color: var(--color-green);
    flex-shrink: 0;
}

.sidebar-archives li a:hover {
    color: var(--color-green);
    padding-left: 0.375rem;
}

/* ================================================================
   ABOUT PAGE
   ================================================================ */
.about-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-intro-img { position: relative; }

.about-intro-img img {
    width: 100%;
   /* aspect-ratio: 4/3;*/
    object-fit: cover;
    display: block;
}

.about-intro-img .img-badge {
    position: absolute;
    bottom: -1.5rem;
    right: -1.5rem;
    background: var(--color-amber-gold);
    color: var(--color-white);
    padding: 1.25rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.about-intro-img .img-badge strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.about-intro-img .img-badge span {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Values grid */
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.value-card {
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    border-left: 1px solid #e2e8f0;
}

.value-card:first-child,
.value-card:nth-child(4) { border-left: none; }

.value-card:nth-child(n+4) { border-top: 1px solid #e2e8f0; }

.value-card i {
    font-size: 2.25rem;
    color: var(--color-amber-gold);
    display: block;
    margin-bottom: 1rem;
}

.value-card h4 {
    font-size: 0.875rem;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.625rem;
    color: var(--color-dark);
}

.value-card p {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0;
}

/* ================================================================
   BLOG LIST PAGE
   ================================================================ */
.blog-card {
    background: var(--color-white);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

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

.blog-card-img {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--color-off-white);
    flex-shrink: 0;
    display: block;
}

.blog-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-img img { transform: scale(1.04); }

.blog-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.875rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.blog-card-body h3 {
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.blog-card-body h3 a {
    color: var(--color-dark);
    transition: color var(--transition-fast);
}

.blog-card-body h3 a:hover { color: var(--color-green); }

.blog-card-body p {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 1.25rem;
}

/* Read More — standard button style */
.blog-card-body .read-more {
    display: inline-flex;
    align-items: center;
    padding: 0.625em 1.5em;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-btn);
    border: 1px solid var(--color-btn);
    transition: background var(--transition-fast), border-color var(--transition-fast);
    align-self: flex-start;
    text-decoration: none;
}

.blog-card-body .read-more:hover {
    background: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-white);
}

/* Blog grid — 2 columns inside content area */
.blog-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 2.5rem;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    color: var(--color-text);
    transition: all var(--transition-fast);
    text-decoration: none;
}

.pagination a:hover,
.pagination span.current {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

.pagination .prev-next {
    font-size: 0.75rem;
    width: auto;
    padding-inline: 1rem;
    gap: 0.375rem;
}

/* ================================================================
   BLOG DETAIL PAGE
   ================================================================ */
.blog-detail-img {
    width: 100%;
    aspect-ratio: 16/7;
    overflow: hidden;
    margin-bottom: 2rem;
    background: var(--color-off-white);
}

.blog-detail-img img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.blog-detail-meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}

.blog-detail-meta i { color: var(--color-green); margin-right: 0.25rem; }

/* Post title (H1) sits above the featured image */
.post-title {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.2;
    margin-bottom: 1.25rem;
    color: var(--color-dark);
}

/* Post content typography */
.post-content h2 {
    font-size: clamp(1.5rem, 2vw, 2rem);
}

.post-content h3 {
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.post-content p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.post-content ul,
.post-content ol {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
    color: var(--color-text);
    line-height: 1.8;
}

.post-content ol { list-style: decimal; }
.post-content li { margin-bottom: 0.375rem; }

.post-content blockquote {
    border-left: 3px solid var(--color-green);
    margin: 2rem 0;
    padding: 1.25rem 1.75rem;
    background: var(--color-off-white);
    font-style: italic;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    color: var(--color-dark);
    line-height: 1.6;
}

.post-content blockquote cite {
    display: block;
    font-size: 0.8125rem;
    font-style: normal;
    font-family: var(--font-body);
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

/*.post-content img {
    width: 100%;
    height: auto;
    display: block;
    margin-block: 2rem;
}*/

/* Author box */
.author-box {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.75rem;
    background: var(--color-off-white);
    border: 1px solid #e2e8f0;
    margin-top: 3rem;
}

.author-box-img {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-accent);
}

.author-box-img img { width: 100%; height: 100%; object-fit: cover; }
.author-box-info h4 { font-size: 1rem; margin-bottom: 0.25rem; }

.author-box-info .author-role {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-green);
    margin-bottom: 0.625rem;
}

.author-box-info p {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0;
}

/* ================================================================
   GALLERY PAGE
   ================================================================ */
.gallery-grid {
    columns: 3;
    column-gap: 1.25rem;
}

.gallery-item {
    break-inside: avoid;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
    display: block;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-item:hover img { transform: scale(1.04); }

.gallery-item-overlay {
    position: absolute;
    inset: 0;
    background: rgba(30,48,46,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-overlay i { color: var(--color-white); font-size: 2rem; }

/* ================================================================
   PRODUCTS PAGE
   ================================================================ */
.product-section {
    padding-block: clamp(3rem, 6vw, 5rem);
    border-bottom: 1px solid #e2e8f0;
}

.product-section:last-of-type { border-bottom: none; }

.product-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.product-feature.reverse { direction: rtl; }
.product-feature.reverse > * { direction: ltr; }

.product-feature-img {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--color-off-white);
}

.product-feature-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-feature:hover .product-feature-img img { transform: scale(1.03); }

.product-feature-text .eyebrow { color: var(--color-accent); }

.product-feature-text h2 {
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    margin-bottom: 1rem;
}

.product-feature-text p {
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

/* Product bullet list — no class on ul/li needed */
.product-feature-text ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
    padding: 0;
}

.product-feature-text ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: var(--color-text);
    line-height: 1.55;
}

.product-feature-text ul li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--color-green);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.5em;
}

/* Products CTA section — uses dark green with subtle border contrast */
.products-cta-section {
    background: #162624;
    padding-block: clamp(3.5rem, 7vw, 6rem);
    border-top: 3px solid var(--color-green);
}

/* ================================================================
   FAQ PAGE
   ================================================================ */
.faq-intro {
    max-width: 700px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.faq-intro .eyebrow { color: var(--color-green); }
.faq-intro p { color: var(--color-text-muted); font-size: 1.0625rem; line-height: 1.75; margin: 0; }

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.contact-page-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 4rem;
    align-items: start;
}

.contact-info-block .eyebrow { color:var(--color-accent); }
.contact-info-block h2 { margin-bottom: 1rem; }
.contact-info-block > p { color: var(--color-text-muted); line-height: 1.8; margin-bottom: 2rem; }

.contact-info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
    padding: 0;
}

.contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.55;
}

.contact-info-list li .icon-wrap {
    width: 2.75rem;
    height: 2.75rem;
    background: rgba(196,159,88,0.12);
    border: 1px solid rgba(196,159,88,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.blog-list-grid .btn{
	align-self: flex-start;
}
.contact-info-list li .icon-wrap i { color: var(--color-amber-gold); font-size: 1rem; }

.contact-info-list li a {
    color: var(--color-text);
    transition: color var(--transition-fast);
}

.contact-info-list li a:hover { color: var(--color-green); }

.map-placeholder {
    width: 100%;
    height: 260px;
    background: var(--color-off-white);
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    gap: 0.5rem;
    margin-top: 2rem;
}

.map-placeholder i { color: var(--color-green); }

.contact-form-box {
    background: var(--color-off-white);
    border: 1px solid #e2e8f0;
    padding: clamp(1.75rem, 3vw, 2.5rem);
}

.contact-form-box h3 { margin-bottom: 0.375rem; }

.contact-form-box > p {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin-bottom: 1.75rem;
    line-height: 1.55;
}

/* ================================================================
   INTERNAL PAGE MEDIA QUERIES (max-width)
   ================================================================ */

@media (max-width: 1024px) {
	.why-image-wrap img {
  object-position: top;
}
    .content-sidebar-wrap {
        grid-template-columns: 1fr;
    }
    /* content first, sidebar second — matches desktop reading order */
    .sidebar { order: 2; }

    .blog-list-grid { grid-template-columns: 1fr; }
    .about-intro-grid { grid-template-columns: 1fr; gap: 2rem; }
    .about-intro-img .img-badge { bottom: -1rem; right: -0.5rem; }
    .product-feature { grid-template-columns: 1fr; gap: 2rem; }
    .product-feature.reverse { direction: ltr; }
    .contact-page-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid .value-card:nth-child(3) { border-left: 1px solid #e2e8f0; }
    .gallery-grid { columns: 2; }
    .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .page-hero { padding-block: 1.75rem; }
    .values-grid { grid-template-columns: 1fr; }
    .values-grid .value-card { border-left: none; border-top: 1px solid #e2e8f0; }
    .values-grid .value-card:first-child { border-top: none; }
    .gallery-grid { columns: 2; }
    .card-grid { grid-template-columns: 1fr; }
    .blog-detail-meta { gap: 0.75rem; }
    .blog-list-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	#what-we-do .pillar-card{
		border-left: none;
		border-top:none !important; 
	}
	img.alignright,
	img.alignleft{
		float: none;
		margin: 0 0 20px 0;
	} 
}

@media (max-width: 540px) {
    .gallery-grid { columns: 1; }
    .pagination a, .pagination span { width: 2.25rem; height: 2.25rem; }
    .author-box { flex-direction: column; gap: 1rem; }
}