/*
 Theme Name:   Astra Starter Child
 Theme URI:    https://yoursite.com
 Description:  A minimal, reusable child theme for Astra. Built as a clean starter template for new WordPress projects.
 Author:       Your Name
 Author URI:   https://yoursite.com
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  astra-starter-child
*/


@media screen and (min-width: 921px) {.ast-theme-transparent-header #masthead{position:inherit;}}
.page .site-content .ast-container{margin-top: -26px;margin-bottom: -26px;}
ol, ul{margin:inherit;}
.site-logo-img .transparent-custom-logo img, .ast-theme-transparent-header .site-logo-img img{filter: none;}
.ast-mobile-header-wrap .ast-primary-header-bar, .ast-primary-header-bar .site-primary-header-wrap {min-height: 90px;}
.ast-primary-header-bar.main-header-bar{padding-block:0;}
.footer-brand img{width:50%;}

/* =========================================================
   FARNEK · CORE STYLESHEET
   Premium corporate · Architectural minimalism
   ---------------------------------------------------------
   Structure:
   01  Reset + Base
   02  Design Tokens (CSS variables)
   03  Typography Base
   04  Layout Primitives (container, grid, rule)
   05  UI Components (button, label, eyebrow, link-arrow)
   06  Header / Navigation
   07  Hero
   08  Trust Bar
   09  Position Statement
   10  Pillars
   11  Services
   12  Industries
   13  Outcomes
   14  Smart + Green
   15  Group
   16  Clients
   17  Insights
   18  Final CTA
   19  Footer
   20  Animations / Reveal
   21  Responsive
   ========================================================= */


/* =========================================================
   01  RESET + BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }


/* =========================================================
   02  DESIGN TOKENS
   ========================================================= */
:root {
  /* ---- COLOR ---- */
  --c-bg:           #FFFFFF;
  --c-bg-warm:      #F4F4F2;   /* neutral pale grey: image fallback, badge surfaces (no longer used for full sections) */
  --c-bg-soft:      #EEEEEC;   /* neutral pale grey, deeper variant */
  --c-bg-tint:      #FBF1E8;   /* faint orange tint, hover surfaces */

  --c-ink:          #1A1A1A;   /* primary text, deeper than #333 for premium */
  --c-ink-2:        #4A4A4A;   /* body text */
  --c-ink-3:        #8A8478;   /* muted, warm grey-tan */
  --c-ink-4:        #BEB8AC;   /* very muted, decorative numerals */

  --c-rule:         #E5E2DC;   /* warm subtle border / divider */
  --c-rule-strong:  #C7C2B5;

  --c-brand:        #E87722;   /* Farnek orange (per brand guidelines) */
  --c-brand-deep:   #C8631A;   /* darker hover */
  --c-brand-soft:   #FBF1E8;   /* tint */

  --c-green:        #328D2E;   /* sustainability green (per brand guidelines) */
  --c-green-deep:   #2A7726;

  /* ---- TYPOGRAPHY ---- */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Source Sans 3', 'Source Sans Pro', 'Segoe UI', sans-serif;

  /* type scale — fluid */
  --fs-hero:        clamp(2.25rem, 5.2vw, 4.75rem);
  --fs-display:     clamp(2.25rem, 4.6vw, 4rem);
  --fs-h1:          clamp(1.9rem, 3.4vw, 3rem);
  --fs-h2:          clamp(1.4rem, 2.2vw, 1.85rem);
  --fs-h3:          clamp(1.15rem, 1.5vw, 1.35rem);
  --fs-body-lg:     1.125rem;
  --fs-body:        1rem;
  --fs-small:       0.875rem;
  --fs-micro:       0.75rem;

  /* graphic numerals (used as visual anchors) */
  --fs-numeral-xl:  clamp(5rem, 14vw, 13rem);
  --fs-numeral-lg:  clamp(3.5rem, 7vw, 6rem);
  --fs-numeral-md:  clamp(2.5rem, 4vw, 3.5rem);

  /* line-heights */
  --lh-tight:   1.02;
  --lh-display: 1.08;
  --lh-snug:    1.25;
  --lh-base:    1.6;
  --lh-loose:   1.75;

  /* letter-spacing for labels / uppercase */
  --tracking-wide:   0.18em;
  --tracking-wider:  0.24em;
  --tracking-widest: 0.32em;

  /* ---- SPACING (8pt scale) ---- */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 8rem;
  --s-9: 10rem;

  /* section vertical padding */
  --section-py:    clamp(5rem, 10vw, 6rem);
  --section-py-sm: clamp(3rem, 6vw, 5rem);

  /* ---- LAYOUT ---- */
  --container-max: 1440px;
  --container-px:  clamp(1.25rem, 4vw, 3.5rem);

  --header-h:        84px;
  --header-h-scrolled: 64px;

  /* ---- MOTION ---- */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur:      400ms;
  --dur-slow: 700ms;

  /* ---- BORDERS ---- */
  --bw: 1px;
}


/* =========================================================
   03  TYPOGRAPHY BASE
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-display);
  color: var(--c-ink);
  letter-spacing: -0.01em;
}

p { font-size: var(--fs-body); line-height: var(--lh-base); color: var(--c-ink-2); }
strong { color: var(--c-ink); font-weight: 600; }


/* =========================================================
   04  LAYOUT PRIMITIVES
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

/* 12-column grid for asymmetric layouts */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  row-gap: var(--s-4);
}

.section {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
  position: relative;
}
.section--sm { padding-top: var(--section-py-sm); padding-bottom: var(--section-py-sm); }
.section--warm { background: var(--c-bg-warm); }
.section--soft { background: var(--c-bg-soft); }

/* Decorative thin rule */
.rule { height: 1px; background: var(--c-rule); width: 100%; }
.rule--strong { background: var(--c-rule-strong); }
.rule--brand { background: var(--c-brand); height: 2px; width: 48px; }


/* =========================================================
   05  UI COMPONENTS
   ========================================================= */

/* eyebrow / section label (small, tracked uppercase) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.eyebrow__index {
  display: inline-block;
  color: var(--c-brand);
  font-weight: 700;
}
.eyebrow__slash {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--c-rule-strong);
}

/* button system */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.05rem 1.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: var(--bw) solid transparent;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn__arrow {
  display: inline-block;
  width: 14px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width var(--dur) var(--ease);
}
.btn__arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.btn:hover .btn__arrow { width: 22px; }

.btn--primary {
  background: var(--c-brand);
  color: #FFFFFF;
  border-color: var(--c-brand);
}
.btn--primary:hover { background: var(--c-brand-deep); border-color: var(--c-brand-deep); }

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-rule-strong);
}
.btn--ghost:hover { border-color: var(--c-ink); }

/* arrow link (used in lists) */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink);
  transition: color var(--dur) var(--ease);
}
.arrow-link__line {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width var(--dur) var(--ease);
}
.arrow-link__line::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.arrow-link:hover { color: var(--c-brand); }
.arrow-link:hover .arrow-link__line { width: 28px; }


/* =========================================================
   06  HEADER / NAVIGATION
   ========================================================= */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
  transition: height var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
  border-bottom: var(--bw) solid transparent;
}
.header.is-scrolled {
  height: var(--header-h-scrolled);
  border-bottom-color: var(--c-rule);
}
.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--c-brand);
}
.brand__e {
  color: var(--c-ink);
  display: inline-block;
  border-bottom: 3px solid var(--c-ink);
  padding-bottom: 1px;
  margin: 0 1px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}
.nav__link {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink);
  position: relative;
  padding: 6px 0;
  transition: color var(--dur) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--c-brand);
  transition: width var(--dur) var(--ease);
}
.nav__link:hover { color: var(--c-brand); }
.nav__link:hover::after { width: 100%; }

.nav__cta-group {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.nav__phone {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--c-ink);
}
.nav__phone:hover { color: var(--c-brand); }
.nav__cta {
  padding: 0.75rem 1.25rem;
  font-size: 0.75rem;
}

.nav__toggle {
  display: none;
  width: 36px; height: 24px;
  position: relative;
}

/* mobile drawer — hidden on desktop, enabled at mobile breakpoint */
.nav-drawer { display: none; }
.nav__toggle span {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--c-ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__toggle span:nth-child(1) { top: 4px; }
.nav__toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav__toggle span:nth-child(3) { bottom: 4px; }
.is-nav-open .nav__toggle span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.is-nav-open .nav__toggle span:nth-child(2) { opacity: 0; }
.is-nav-open .nav__toggle span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }


/* =========================================================
   07  HERO
   Asymmetric, light, 100vh, with a large floating year numeral
   ========================================================= */
.hero {
  min-height: 100vh;
  /*padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4rem));*/
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 2rem));
  padding-bottom: 0;
  background: var(--c-bg);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: -32px;
}

/* decorative very faint grid - subtle architectural texture */
.hero::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 45%; height: 100%;
  background-image:
    linear-gradient(to right, rgba(26,26,26,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,26,26,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}

.hero__body {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  align-items: center;
  position: relative;
  z-index: 1;
  margin-bottom:100px;
}

.hero__content {
  grid-column: 1 / span 8;
  max-width: 880px;
}

.hero__eyebrow {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--c-ink);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.hero__title .accent {
  color: var(--c-brand);
  font-weight: 700;
}
.hero__title .accent-green {
  color: var(--c-green);
  font-weight: 700;
}
.hero__title .period {
  color: var(--c-brand);
}

.hero__sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.55;
  color: var(--c-ink-2);
  max-width: 620px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* The big floating year numeral, right-side */
.hero__numeral {
  grid-column: 9 / span 4;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  position: relative;
  padding-left: var(--s-4);
}
.hero__numeral::before {
  content: "";
  position: absolute;
  left: 0; top: 8%;
  width: 1px; height: 84%;
  background: var(--c-rule-strong);
}
.hero__numeral-figure {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-numeral-xl);
  line-height: 0.85;
  color: var(--c-ink);
  letter-spacing: -0.04em;
  position: relative;
}
.hero__numeral-figure .plus {
  color: var(--c-brand);
  font-weight: 700;
  font-size: 0.5em;
  vertical-align: top;
  margin-left: 0.05em;
}
.hero__numeral-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-top: var(--s-2);
  line-height: 1.6;
}
.hero__numeral-est {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-brand);
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-rule-strong);
  display: inline-block;
}

/* hero trust strip — anchored at base of 100vh */
.hero__trust {
  border-top: 1px solid var(--c-rule-strong);
  padding: clamp(1.25rem, 2vw, 1.75rem) 0;
  position: relative;
  z-index: 1;
}
.hero__trust-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-3);
  align-items: end;
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.trust-item__figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  line-height: 1;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.trust-item__figure .plus { color: var(--c-brand); }
.trust-item__label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

/* hero scroll cue */
.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  color: var(--c-ink-3);
  text-transform: uppercase;
  display: none; /* hidden by default, can be enabled */
}


/* =========================================================
   09  POSITION STATEMENT
   Asymmetric: small label upper-left, massive statement right
   ========================================================= */
.position {
  background: var(--c-bg);
}
.position__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
}
.position__label-col {
  grid-column: 1 / span 3;
  padding-top: 0.5rem;
}
.position__content-col {
  grid-column: 5 / span 8;
}
.position__statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin-bottom: var(--s-5);
}
.position__statement .period { color: var(--c-brand); }
.position__statement em {
  font-style: normal;
  position: relative;
  display: inline-block;
}
.position__statement em::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.08em;
  width: 100%;
  height: 8px;
  background: var(--c-brand-soft);
  z-index: -1;
}
.position__body {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  max-width: 700px;
  margin-bottom: var(--s-4);
}


/* =========================================================
   10  PILLARS
   Three full-width horizontal rows with huge index numerals
   ========================================================= */
.pillars {
  background: var(--c-bg);
}
.pillars__head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  margin-bottom: var(--s-7);
}
.pillars__head-label { grid-column: 1 / span 3; padding-top: 0.5rem; }
.pillars__head-title {
  grid-column: 5 / span 7;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
}
.pillars__head-title .accent { color: var(--c-brand); font-weight: 900; }

.pillar {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--c-rule-strong);
  position: relative;
  align-items: start;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.pillar:last-child { border-bottom: 1px solid var(--c-rule-strong); }
.pillar::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 2px;
  background: var(--c-brand);
  transition: width var(--dur-slow) var(--ease-out);
}
.pillar:hover::before { width: 100%; }

.pillar__num {
  grid-column: 1 / span 3;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-numeral-lg);
  line-height: 0.85;
  color: var(--c-ink-4);
  letter-spacing: -0.04em;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pillar:hover .pillar__num { color: var(--c-brand); transform: translateX(8px); }

.pillar__content {
  grid-column: 5 / span 6;
}
.pillar__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-ink);
  margin-bottom: var(--s-3);
}
.pillar__body {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-base);
  color: var(--c-ink-2);
  max-width: 60ch;
}
.pillar__meta {
  grid-column: 11 / span 2;
  padding-top: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-4);
}
.pillar__tag {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.pillar--green .pillar__num { /* sustainability pillar tone */ }

.pillar--green:hover .pillar__num { color: var(--c-green); }
.pillar--blue:hover .pillar__num { color: #0366ad; }
.pillar--green::before { background: var(--c-green); }
.pillar--blue::before { background: #0366ad; }

/* =========================================================
   11  SERVICES
   Asymmetric: left intro column sticky-feeling, right is a
   numbered list of services with hover line-draws
   ========================================================= */
.services { background: var(--c-bg); }

.services__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  row-gap: var(--s-5);
}
.services__intro {
  grid-column: 1 / span 4;
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  align-self: start;
}
.services__intro-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  margin: var(--s-3) 0 var(--s-3);
}
.services__intro-body {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-2);
  margin-bottom: var(--s-4);
  max-width: 38ch;
}
.services__intro-rule {
  width: 48px; height: 2px;
  background: var(--c-brand);
  margin-top: var(--s-3);
}

.services__list {
  grid-column: 6 / span 7;
  border-top: 1px solid var(--c-rule-strong);
}
.service-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: clamp(1.5rem, 2.6vw, 2.25rem) 0;
  border-bottom: 1px solid var(--c-rule);
  position: relative;
  transition: padding-left var(--dur) var(--ease);
}
.service-row::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--c-brand);
  transform: translateY(-50%);
  transition: width var(--dur) var(--ease);
}
.service-row:hover { padding-left: 40px; }
.service-row:hover::before { width: 24px; }

.service-row__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: var(--tracking-wide);
  color: var(--c-ink-3);
}
.service-row__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  letter-spacing: -0.01em;
  color: var(--c-ink);
  transition: color var(--dur) var(--ease);
}
.service-row:hover .service-row__name { color: var(--c-brand); }
.service-row__desc {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--c-ink-3);
  font-weight: 400;
  margin-top: 0.25rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease), margin-top var(--dur) var(--ease);
}
.service-row:hover .service-row__desc { max-height: 60px; opacity: 1; margin-top: 0.5rem; }

.service-row__arrow {
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--c-rule-strong);
  position: relative;
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.service-row__arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1px solid var(--c-rule-strong);
  border-right: 1px solid var(--c-rule-strong);
  transform: translateY(-50%) rotate(45deg);
  transition: border-color var(--dur) var(--ease);
}
.service-row:hover .service-row__arrow { width: 36px; background: var(--c-brand); }
.service-row:hover .service-row__arrow::after { border-color: var(--c-brand); }


/* =========================================================
   12  INDUSTRIES
   Index-style typographic grid. No boxes, no icons.
   ========================================================= */
.industries { background: var(--c-bg); }
.industries__head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  margin-bottom: var(--s-6);
}
.industries__head-label { grid-column: 1 / span 3; padding-top: 0.5rem; }
.industries__head-title {
  grid-column: 5 / span 7;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
}
.industries__head-title .accent { color: var(--c-brand); font-weight: 900; }

.industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--c-rule-strong);
}
.industry-cell {
  border-bottom: 1px solid var(--c-rule);
  padding: clamp(1.5rem, 2.4vw, 2rem) var(--s-3) clamp(1.5rem, 2.4vw, 2rem) 0;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  position: relative;
  cursor: pointer;
  transition: padding-left var(--dur) var(--ease);
}
.industry-cell:not(:nth-child(3n)) {
  border-right: 1px solid var(--c-rule);
  padding-right: var(--s-4);
}
.industry-cell:not(:nth-child(3n)) {
  padding-right: clamp(1.5rem, 2.4vw, 2rem);
}
.industry-cell::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 2px;
  background: var(--c-brand);
  transition: width var(--dur) var(--ease);
}
.industry-cell:hover::before { width: 100%; }
.industry-cell:hover .industry-cell__name { color: var(--c-brand); }
.industry-cell__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--c-ink-3);
  letter-spacing: var(--tracking-wide);
  flex-shrink: 0;
  width: 28px;
}
.industry-cell__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  color: var(--c-ink);
  letter-spacing: -0.005em;
  transition: color var(--dur) var(--ease);
}


/* =========================================================
   13  OUTCOMES
   Featured results presented as large horizontal rows
   ========================================================= */
.outcomes { background: var(--c-bg); }
.outcomes__head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  margin-bottom: var(--s-6);
}
.outcomes__head-label { grid-column: 1 / span 3; padding-top: 0.5rem; }
.outcomes__head-title {
  grid-column: 5 / span 7;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
}
.outcomes__list { border-top: 1px solid var(--c-rule-strong); }
.outcome {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-bottom: 1px solid var(--c-rule);
  align-items: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.outcome:hover { background: var(--c-bg-warm); }
.outcome__result {
  grid-column: 1 / span 5;
}
.outcome__result-figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--c-ink);
  margin-bottom: 0.5rem;
}
.outcome__result-figure .accent { color: var(--c-brand); }
.outcome__result-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.outcome__client {
  grid-column: 6 / span 5;
}
.outcome__client-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--c-ink);
  margin-bottom: 0.25rem;
}
.outcome__client-meta {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--c-ink-3);
}
.outcome__action {
  grid-column: 11 / span 2;
  display: flex;
  justify-content: flex-end;
}


/* =========================================================
   14  SMART + GREEN combined narrative
   Asymmetric two-column with large stat callouts
   ========================================================= */
.smartgreen { background: var(--c-bg); }
.smartgreen__head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  margin-bottom: var(--s-6);
}
.smartgreen__head-label { grid-column: 1 / span 3; padding-top: 0.5rem; }
.smartgreen__head-title {
  grid-column: 5 / span 7;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
}

.smartgreen__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  row-gap: var(--s-5);
}
.smartgreen__col {
  position: relative;
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--c-rule-strong);
}
.smartgreen__col--smart   { grid-column: 1 / span 6; }
.smartgreen__col--green   { grid-column: 7 / span 6; }
.smartgreen__col--green {
  border-top-color: var(--c-green);
  border-top-width: 2px;
  padding-left: clamp(1rem, 3vw, 3rem);
}
.smartgreen__col--smart {
  border-top-color: var(--c-brand);
  border-top-width: 2px;
  padding-right: clamp(1rem, 3vw, 3rem);
}
.smartgreen__col-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: var(--s-3);
}
.smartgreen__col--green .smartgreen__col-label { color: var(--c-green); }

.smartgreen__col-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-3);
}
.smartgreen__col-body {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  margin-bottom: var(--s-4);
}
.smartgreen__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.smartgreen__stat-figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 2.6vw, 2.4rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin-bottom: 0.25rem;
}
.smartgreen__stat-label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-ink-3);
  line-height: 1.5;
}


/* =========================================================
   15  GROUP — typographic list of group brands
   ========================================================= */
.group { background: var(--c-bg); }
.group__head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  margin-bottom: var(--s-6);
}
.group__head-label { grid-column: 1 / span 3; padding-top: 0.5rem; }
.group__head-title {
  grid-column: 5 / span 7;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
}
.group__head-title .accent { color: var(--c-brand); font-weight: 900; }
.group__head-body {
  grid-column: 5 / span 7;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  margin-top: var(--s-3);
  max-width: 700px;
}

.group__list { border-top: 1px solid var(--c-rule-strong); }
.group-item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--c-rule);
  align-items: center;
  position: relative;
  transition: padding-left var(--dur) var(--ease);
}
.group-item::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--c-brand);
  transform: translateY(-50%);
  transition: width var(--dur) var(--ease);
}
.group-item:hover { padding-left: 32px; }
.group-item:hover::before { width: 24px; }

.group-item__name {
  grid-column: 1 / span 4;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  letter-spacing: -0.01em;
  color: var(--c-ink);
  transition: color var(--dur) var(--ease);
}
.group-item:hover .group-item__name { color: var(--c-brand); }

.group-item__endorsement {
  grid-column: 5 / span 3;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.group-item__category {
  grid-column: 8 / span 3;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--c-ink-2);
}
.group-item__domain {
  grid-column: 11 / span 2;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--c-ink);
  text-align: right;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
.group-item__domain-arrow {
  display: inline-block;
  width: 12px;
  height: 1px;
  background: var(--c-ink);
  position: relative;
  transition: width var(--dur) var(--ease);
}
.group-item__domain-arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 5px; height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.group-item:hover .group-item__domain-arrow { width: 22px; }


/* =========================================================
   16  CLIENTS — typographic, no logos
   ========================================================= */
.clients { background: var(--c-bg); }
.clients__head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  margin-bottom: var(--s-5);
}
.clients__head-label { grid-column: 1 / span 3; padding-top: 0.5rem; }
.clients__head-title {
  grid-column: 5 / span 7;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
}

.clients__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  /*background: var(--c-rule);*/
  /*border: 1px solid var(--c-rule);*/
}
.client-cell {
  aspect-ratio: 2.5 / 1;
    /* background: var(--color-bg); */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
}
.client-cell img{
        max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.72;
}
.client-cell:hover {
  color: var(--c-ink);
  background: var(--c-bg-warm);
}


/* =========================================================
   17  INSIGHTS
   Three latest items as horizontal rows
   ========================================================= */
.insights { background: var(--c-bg); }
.insights__head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  margin-bottom: var(--s-5);
  align-items: end;
}
.insights__head-label { grid-column: 1 / span 3; padding-bottom: 0.5rem; }
.insights__head-title {
  grid-column: 5 / span 5;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
}
.insights__head-action {
  grid-column: 11 / span 2;
  display: flex;
  justify-content: flex-end;
}

.insights__list { border-top: 1px solid var(--c-rule-strong); }
.insight {
  display: grid;
  grid-template-columns: 120px 160px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: clamp(1.5rem, 2.4vw, 2rem) 0;
  border-bottom: 1px solid var(--c-rule);
  transition: padding-left var(--dur) var(--ease);
}
.insight:hover { padding-left: 24px; }
.insight__date {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.insight__category {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-brand);
}
.insight__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  color: var(--c-ink);
  line-height: 1.3;
  transition: color var(--dur) var(--ease);
}
.insight:hover .insight__title { color: var(--c-brand); }


/* =========================================================
   18  FINAL CTA
   Asymmetric layout, no dark background
   ========================================================= */
.final-cta {
  background: var(--c-bg);
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
}
.final-cta__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  align-items: end;
}
.final-cta__content { grid-column: 1 / span 8; }
.final-cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--c-ink);
  margin-bottom: var(--s-3);
}
.final-cta__title .period { color: var(--c-brand); }
.final-cta__sub {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-base);
  color: var(--c-ink-2);
  max-width: 580px;
  margin-bottom: var(--s-4);
}
.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.final-cta__phone {
  grid-column: 10 / span 3;
  text-align: right;
}
.final-cta__phone-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: 0.75rem;
  display: block;
}
.final-cta__phone-number {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  line-height: 1;
}
.final-cta__phone-number:hover { color: var(--c-brand); }


/* =========================================================
   19  FOOTER
   Light warm grey, multi-column, refined
   ========================================================= */
.footer {
  background: var(--c-bg);
  border-top: 1px solid var(--c-rule);
  padding-top: clamp(4rem, 7vw, 6rem);
  padding-bottom: var(--s-4);
}
.footer__top {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  row-gap: var(--s-5);
  margin-bottom: clamp(3rem, 5vw, 5rem);
}
.footer__brand {
  grid-column: 1 / 4;
}
.footer__brand img {
        width: 80%;
    margin-bottom: 20px;
}
.footer__brand-tag {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: var(--s-4);
  line-height: 1.6;
}
.footer__brand-body {
  font-size: 0.92rem;
  color: var(--c-ink-2);
  line-height: var(--lh-base);
  max-width: 36ch;
}

.footer__col {
  grid-column: span 2;
}
.footer__col-title {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: var(--s-3);
}
.footer__col-list li { margin-bottom: 0.6rem; }
.footer__col-link {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--c-ink-2);
  transition: color var(--dur) var(--ease);
}
.footer__col-link:hover { color: var(--c-brand); }

.footer__contact {
  grid-column: 10 / 14;
}
.footer__contact-block { margin-bottom: var(--s-3); }
.footer__contact-label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: 0.35rem;
}
.footer__contact-value {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-ink);
}
.footer__contact-value--phone {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

.footer__bottom {
  border-top: 1px solid var(--c-rule);
  padding-top: var(--s-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.footer__copyright {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--c-ink-3);
}
.footer__legal {
  display: flex;
  gap: var(--s-4);
}
.footer__legal-link {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.footer__legal-link:hover { color: var(--c-brand); }
.footer__social {
  display: flex;
  gap: var(--s-3);
}
.footer__social-link {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.footer__social-link:hover { color: var(--c-brand); }


/* =========================================================
   20  ANIMATIONS / REVEAL
   ========================================================= */
/*.reveal {*/
/*  opacity: 0;*/
/*  transform: translateY(24px);*/
/*  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);*/
/*}*/
/*.reveal.is-visible { opacity: 1; transform: translateY(0); }*/

/*.reveal-stagger > * {*/
/*  opacity: 0;*/
/*  transform: translateY(24px);*/
/*  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);*/
/*}*/
/*.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }*/
/*.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }*/
/*.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; }*/
/*.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; }*/
/*.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; }*/
/*.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 400ms; }*/


/* =========================================================
   21  RESPONSIVE
   ========================================================= */

/* tablet */
@media (max-width: 1024px) {
  .nav__list { gap: 1.5rem; }
  .nav__link { font-size: 0.72rem; }

  /* asymmetric layouts collapse closer to symmetric on tablet but keep offset */
  .position__label-col { grid-column: 1 / span 4; }
  .position__content-col { grid-column: 1 / span 12; }

  .pillars__head-label,
  .industries__head-label,
  .outcomes__head-label,
  .smartgreen__head-label,
  .group__head-label,
  .clients__head-label,
  .insights__head-label { grid-column: 1 / span 12; margin-bottom: var(--s-3); }
  .pillars__head-title,
  .industries__head-title,
  .outcomes__head-title,
  .smartgreen__head-title,
  .group__head-title,
  .group__head-body,
  .clients__head-title,
  .insights__head-title { grid-column: 1 / span 12; }
  .insights__head-action { grid-column: 1 / span 12; justify-content: flex-start; margin-top: var(--s-2); }

  .pillar__num { grid-column: 1 / span 2; }
  .pillar__content { grid-column: 3 / span 8; }
  .pillar__meta { grid-column: 1 / span 12; align-items: flex-start; padding-top: var(--s-2); }

  .services__intro { grid-column: 1 / span 12; position: relative; top: auto; }
  .services__list { grid-column: 1 / span 12; }

  .industries__grid { grid-template-columns: repeat(2, 1fr); }
  .industry-cell:not(:nth-child(3n)) { border-right: none; padding-right: var(--s-3); }
  .industry-cell:not(:nth-child(2n)) { border-right: 1px solid var(--c-rule); padding-right: var(--s-4); }

  .outcome__result { grid-column: 1 / span 12; margin-bottom: var(--s-2); }
  .outcome__client { grid-column: 1 / span 9; }
  .outcome__action { grid-column: 10 / span 3; }

  .smartgreen__col--smart,
  .smartgreen__col--green { grid-column: 1 / span 12; padding-left: 0; padding-right: 0; }
  .smartgreen__col--green { margin-top: var(--s-4); }

  .group-item__name { grid-column: 1 / span 5; }
  .group-item__endorsement { grid-column: 6 / span 4; }
  .group-item__category { grid-column: 1 / span 8; padding-top: 0.5rem; }
  .group-item__domain { grid-column: 9 / span 4; }

  .clients__grid { grid-template-columns: repeat(3, 1fr); }

  .insight { grid-template-columns: 100px 1fr auto; }
  .insight__date { grid-row: 1; grid-column: 1; }
  .insight__category { grid-row: 1; grid-column: 2; }
  .insight__title { grid-row: 2; grid-column: 1 / span 3; margin-top: 0.5rem; }

  .final-cta__content { grid-column: 1 / span 12; margin-bottom: var(--s-4); }
  .final-cta__phone { grid-column: 1 / span 12; text-align: left; }

  .footer__brand { grid-column: 1 / span 12; }
  .footer__col { grid-column: span 4; }
  .footer__contact { grid-column: 1 / span 12; }
}

/* mobile */
@media (max-width: 720px) {
  :root {
    --header-h: 64px;
    --header-h-scrolled: 56px;
  }

  .nav__toggle { display: block; }
  .nav__list,
  .nav__cta-group { display: none; }

  /* mobile menu drawer */
  .nav-drawer {
    display: flex;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    bottom: 0;
    background: var(--c-bg);
    padding: var(--s-4) var(--container-px);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    z-index: 99;
    border-top: 1px solid var(--c-rule);
    flex-direction: column;
  }
  .is-nav-open .nav-drawer { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-drawer__link {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--c-rule);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.005em;
    color: var(--c-ink);
  }
  .nav-drawer__cta { margin-top: var(--s-4); }

  /* hero */
  .hero__content { grid-column: 1 / span 12; }
  .hero__numeral { display: none; }
  .hero::before { display: none; }
  .hero__trust-list { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .trust-item:nth-child(5) { grid-column: 1 / span 2; }

  /* sections — collapse asymmetry on mobile */
  .position__label-col,
  .position__content-col { grid-column: 1 / span 12; }
  .position__label-col { margin-bottom: var(--s-3); }

  .pillar { padding: var(--s-5) 0; }
  .pillar__num { grid-column: 1 / span 12; }
  .pillar__content { grid-column: 1 / span 12; }

  .services__list { grid-column: 1 / span 12; }
  .service-row { grid-template-columns: 40px 1fr auto; }

  .industries__grid { grid-template-columns: 1fr; }
  .industry-cell:not(:nth-child(2n)),
  .industry-cell { border-right: none; padding-right: var(--s-3); }

  .outcome { padding: var(--s-4) 0; }
  .outcome__client { grid-column: 1 / span 12; padding-top: var(--s-2); }
  .outcome__action { grid-column: 1 / span 12; justify-content: flex-start; padding-top: var(--s-2); }

  .group-item { padding: var(--s-3) 0; }
  .group-item__name,
  .group-item__endorsement,
  .group-item__category,
  .group-item__domain { grid-column: 1 / span 12; }
  .group-item__endorsement { padding-top: 0.25rem; }
  .group-item__category { padding-top: 0.5rem; }
  .group-item__domain { padding-top: 0.5rem; text-align: left; }

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

  .insight { grid-template-columns: 1fr; gap: 0.5rem; padding: var(--s-4) 0; }
  .insight__date,
  .insight__category { grid-row: auto; grid-column: auto; }
  .insight__title { grid-row: auto; grid-column: auto; margin-top: 0.5rem; }

  .final-cta__title { font-size: clamp(2rem, 7vw, 3rem); }

  .footer__col { grid-column: span 6; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}


/* =========================================================
   22  ENHANCEMENTS
   Visual richness: images, marquee, watermarks, counters,
   scroll progress, and dynamic states. Loaded after base
   styles so these overrides take effect.
   ========================================================= */

/* ---- 22.1  GLOBAL ITALIC REMOVAL ---- */
em, i, address, blockquote, cite, dfn { font-style: normal; }

/* ---- 22.2  HIGHLIGHT SPAN (replaces <em> for cream-orange underline) ---- */
.hl {
  position: relative;
  display: inline-block;
  color: var(--c-ink);
  font-weight: inherit;
  z-index: 1;
}
.hl::after {
  content: "";
  position: absolute;
  left: -0.06em; right: -0.06em;
  bottom: 0.08em;
  height: 0.32em;
  background: var(--c-brand-soft);
  z-index: -1;
  transition: height var(--dur) var(--ease);
}
.hl:hover::after { height: 0.5em; }

/* ---- 22.3  SCROLL PROGRESS BAR ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  z-index: 200;
  pointer-events: none;
}
.scroll-progress__bar {
  height: 100%;
  background: var(--c-brand);
  width: 0%;
  transition: width 80ms linear;
  transform-origin: left center;
}

/* ---- 22.4  MEDIA WRAPPER (reusable image container) ---- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-warm);
  display: block;
}
.media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.media--hover-zoom:hover img { transform: scale(1.05); }
.media__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(26,26,26,0.55) 100%);
  pointer-events: none;
}
.media__caption {
  position: absolute;
  left: 1.5rem; bottom: 1.25rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  z-index: 2;
}

/* ---- 22.5  HERO MEDIA (image on right + 46+ badge overlay) ---- */
.hero__body { position: relative; }
.hero__media {
  grid-column: 8 / span 5;
  align-self: center;
  position: relative;
  padding-top: clamp(0.5rem, 1vw, 1rem);
  padding-bottom: clamp(1rem, 2vw, 2rem);
}
.hero__media-frame {
  width: 100%;
  /*height: clamp(300px, 76vh, 600px);*/
  position: relative;
  overflow: hidden;
  background: var(--c-bg-warm);
}
.hero__media-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero__media-badge {
  position: absolute;
  left: -24px;
  bottom: 32px;
  background: var(--c-bg-warm);
  padding: 1.25rem 1.5rem 1.25rem 1.75rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-left: 3px solid var(--c-brand);
  z-index: 3;
  box-shadow: 0 1px 0 var(--c-rule);
}
.hero__media-badge-figure {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--c-ink);
}
.hero__media-badge-figure .plus {
  color: var(--c-brand);
  font-size: 0.45em;
  vertical-align: top;
  margin-left: 0.05em;
}
.hero__media-badge-meta {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-ink-3);
  line-height: 1.5;
  max-width: 9ch;
}
.hero__media-est {
  position: absolute;
  right: -6px;
  top: 32px;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-brand);
  background: var(--c-bg-warm);
  padding: 0.75rem 0.5rem;
  z-index: 3;
}

/* hide old right-column numeral when media is present */
.hero__numeral.has-media-version { display: none; }

/* tighten hero content column when media is present */
.hero__content.has-media-companion { grid-column: 1 / span 7; }

/* ---- 22.6  CAPABILITY MARQUEE ---- */
.marquee {
  background: var(--c-ink);
  color: #ffffff;
  overflow: hidden;
  border-top: 2px solid var(--c-brand);
  position: relative;
}
.marquee__track {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(1.25rem, 2vw, 1.75rem) 0;
  animation: marquee-scroll 38s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: #ffffff;
  flex-shrink: 0;
}
.marquee__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--c-brand);
  border-radius: 50%;
  flex-shrink: 0;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- 22.7  SECTION NUMBER WATERMARKS ---- */
.section { position: relative; overflow: hidden; }
.section > .container { position: relative; z-index: 2; }
.watermark {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--c-ink);
  opacity: 0.05;
  letter-spacing: -0.06em;
  line-height: 0.8;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.watermark--right { right: -3vw; top: 4vw; font-size: clamp(14rem, 34vw, 38rem); }
.watermark--left  { left:  -3vw; top: 4vw; font-size: clamp(14rem, 34vw, 38rem); }
.watermark--green { color: var(--c-green); }

/* ---- 22.8  SERVICES INTRO IMAGE ---- */
.services__intro-image {
  width: 100%;
  height: clamp(220px, 28vh, 320px);
  overflow: hidden;
  position: relative;
  margin-bottom: var(--s-4);
  background: var(--c-bg-warm);
}
.services__intro-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.services__intro:hover .services__intro-image img { transform: scale(1.04); }

/* ---- 22.9  INDUSTRIES SPOTLIGHT ---- */
.industries__spotlight {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  margin-bottom: var(--s-6);
  align-items: stretch;
}
.industries__spotlight-image {
  grid-column: 1 / span 7;
  position: relative;
  min-height: clamp(320px, 42vh, 460px);
  overflow: hidden;
}
.industries__spotlight-image img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.industries__spotlight-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(26,26,26,0.65) 100%);
  z-index: 1;
}
.industries__spotlight-image-caption {
  position: absolute;
  left: 1.75rem; bottom: 1.5rem;
  color: #ffffff;
  z-index: 2;
}
.industries__spotlight-image-caption-label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--c-brand);
}
.industries__spotlight-image-caption-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  max-width: 24ch;
}
.industries__spotlight-content {
  grid-column: 8 / span 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s-3) 0;
}
.industries__spotlight-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: var(--s-2);
}
.industries__spotlight-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-3);
  color: var(--c-ink);
}
.industries__spotlight-body {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-2);
  margin-bottom: var(--s-3);
  max-width: 38ch;
}
.industries__spotlight-stat {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-rule-strong);
  border-bottom: 1px solid var(--c-rule-strong);
  margin: var(--s-3) 0;
  align-items: center;
}
.industries__spotlight-stat-figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  flex-shrink: 0;
}
.industries__spotlight-stat-figure .plus { color: var(--c-brand); }
.industries__spotlight-stat-label {
  font-size: 0.85rem;
  color: var(--c-ink-2);
  line-height: 1.45;
  max-width: 30ch;
}

/* ---- 22.10  OUTCOMES — IMAGE-LED REDESIGN ---- */
.outcome {
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}
.outcome__image {
  grid-column: 1 / span 5;
  height: clamp(240px, 30vh, 340px);
  overflow: hidden;
  position: relative;
  background: var(--c-bg-warm);
}
.outcome__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.outcome:hover .outcome__image img { transform: scale(1.06); }
.outcome__result {
  grid-column: 6 / span 3;
  padding-left: var(--s-3);
}
.outcome__client {
  grid-column: 9 / span 2;
}
.outcome__action {
  grid-column: 11 / span 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* ---- 22.11  SMART + GREEN — column feature images ---- */
.smartgreen__col-image {
  width: 100%;
  height: clamp(220px, 28vh, 280px);
  overflow: hidden;
  position: relative;
  margin-bottom: var(--s-4);
  background: var(--c-bg-warm);
}
.smartgreen__col-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.smartgreen__col:hover .smartgreen__col-image img { transform: scale(1.04); }

/* ---- 22.12  INSIGHTS — clean text-led rows ---- */
.insight {
  grid-template-columns: 120px 160px 1fr auto;
  gap: var(--s-3);
}
.insight__arrow {
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--c-rule-strong);
  position: relative;
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.insight__arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1px solid var(--c-rule-strong);
  border-right: 1px solid var(--c-rule-strong);
  transform: translateY(-50%) rotate(45deg);
  transition: border-color var(--dur) var(--ease);
}
.insight:hover .insight__arrow { width: 36px; background: var(--c-brand); }
.insight:hover .insight__arrow::after { border-color: var(--c-brand); }

/* ---- 22.13  COUNTER ---- */
[data-counter] { font-variant-numeric: tabular-nums; }

/* ---- 22.14  RESPONSIVE OVERRIDES FOR ENHANCEMENTS ---- */
@media (max-width: 1024px) {
  .hero__media,
  .hero__content.has-media-companion { grid-column: 1 / span 12; }
  .hero__media { display: none; } /* hide image on tablet, content carries it */
  .watermark { font-size: clamp(10rem, 24vw, 18rem); opacity: 0.025; }

  .industries__spotlight-image { grid-column: 1 / span 12; min-height: 280px; }
  .industries__spotlight-content { grid-column: 1 / span 12; padding-top: var(--s-4); }

  .outcome__image { grid-column: 1 / span 5; }
  .outcome__result { grid-column: 6 / span 7; padding-left: var(--s-2); margin-bottom: 0; }
  .outcome__client { grid-column: 1 / span 9; padding-top: var(--s-3); }
  .outcome__action { grid-column: 10 / span 3; padding-top: var(--s-3); }

  .insight { grid-template-columns: 100px 140px 1fr auto; gap: var(--s-2); }
  .insight__title { grid-column: 1 / span 4; padding-top: 0.5rem; }
  .insight__date { grid-column: 1; }
  .insight__category { grid-column: 2; }
  .insight__arrow { display: none; }
}

@media (max-width: 720px) {
  .hero__media { display: none; }
  .watermark { display: none; }

  .industries__spotlight-image { min-height: 220px; }

  .outcome__image { grid-column: 1 / span 12; height: 200px; }
  .outcome__result { grid-column: 1 / span 12; padding-left: 0; padding-top: var(--s-3); }

  .insight { grid-template-columns: 1fr; gap: 0.25rem; padding: var(--s-3) 0; }
  .insight__date, .insight__category, .insight__title { grid-column: 1; }
}


/* =========================================================
   23  MANIFESTO STRIP
   A single typographic statement, asymmetric, placed where
   the marquee used to live. Pure corporate move: no animation,
   no decoration, just typographic confidence.
   ========================================================= */

.manifesto {
  padding: clamp(5rem, 9vw, 8rem) 0;
  border-top: 1px solid var(--c-rule);
  /*border-bottom: 1px solid var(--c-rule);*/
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
}

.manifesto__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  align-items: end;
}

.manifesto__label {
  grid-column: 1 / span 3;
  padding-bottom: clamp(0.5rem, 1.5vw, 1.5rem);
}

.manifesto__line {
  grid-column: 4 / span 9;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--c-ink);
}
.manifesto__line .accent {
  color: var(--c-brand);
  font-weight: 900;
}
.manifesto__line .period { color: var(--c-brand); }

.manifesto__meta {
  grid-column: 1 / span 12;
  margin-top: clamp(2rem, 4vw, 8rem);
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid var(--c-rule);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.manifesto__meta-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.manifesto__meta-figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.manifesto__meta-figure .plus { color: var(--c-brand); }
.manifesto__meta-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

/* watermark inside manifesto */
.manifesto .watermark {
  right: -4vw; top: 50%;
  transform: translateY(-50%);
  font-size: clamp(12rem, 26vw, 28rem);
}

@media (max-width: 1024px) {
  .manifesto__label { grid-column: 1 / span 12; margin-bottom: var(--s-3); padding-bottom: 0; }
  .manifesto__line  { grid-column: 1 / span 12; }
  .manifesto__meta { flex-direction: column; gap: var(--s-2); }
  .manifesto .watermark { display: none; }
}


/* =========================================================
   24  WHY FARNEK
   3x2 grid of differentiators sourced from original site
   content. Each cell: orange-accent rule, dark uppercase
   title, body description.
   ========================================================= */

.why-us { background: var(--c-bg); }

.why-us__head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.why-us__head-label { grid-column: 1 / span 3; padding-top: 0.5rem; }
.why-us__head-title {
  grid-column: 5 / span 7;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
}
.why-us__head-title .accent { color: var(--c-brand); font-weight: 900; }

.why-us__layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch;
}

.why-us__content {
  /* contains the inner reasons grid */
}

.why-us__visual {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-warm);
  min-height: 100%;
}
.why-us__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.why-us__visual:hover img { transform: scale(1.04); }

.why-us__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(2rem, 3vw, 3rem);
  row-gap: clamp(2rem, 3vw, 3rem);
}

.reason {
  position: relative;
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
}
.reason::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 40px; height: 2px;
  background: var(--c-brand);
}

.reason__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-bottom: var(--s-2);
}
.reason__body {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--c-ink-2);
  max-width: 38ch;
}


/* =========================================================
   25  INDUSTRIES — substantive 4-column directory
   Replaces the old industries__grid (industry-cell)
   ========================================================= */

.industries__head-body {
  grid-column: 5 / span 7;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  margin-top: var(--s-3);
  max-width: 60ch;
}

.industries__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-rule-strong);
}
.industry {
  display: block;
  padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem);
  border-bottom: 1px solid var(--c-rule);
  border-right: 1px solid var(--c-rule);
  position: relative;
  cursor: pointer;
  transition: padding-left var(--dur) var(--ease);
}
.industry:nth-child(4n) { border-right: none; }
.industry:nth-last-child(-n+4) { border-bottom: none; }
.industry::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 2px;
  background: var(--c-brand);
  transition: width var(--dur) var(--ease);
}
.industry:hover::before { width: 100%; }

.industry__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  letter-spacing: -0.005em;
  color: var(--c-ink);
  margin-bottom: 0.5rem;
  line-height: 1.2;
  transition: color var(--dur) var(--ease);
}
.industry:hover .industry__name { color: var(--c-brand); }

.industry__tag {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--c-ink-3);
  margin-bottom: var(--s-3);
  min-height: 2.5em;
}
.industry__arrow {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--c-rule-strong);
  position: relative;
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.industry__arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1px solid var(--c-rule-strong);
  border-right: 1px solid var(--c-rule-strong);
  transform: translateY(-50%) rotate(45deg);
  transition: border-color var(--dur) var(--ease);
}
.industry:hover .industry__arrow { width: 32px; background: var(--c-brand); }
.industry:hover .industry__arrow::after { border-color: var(--c-brand); }


/* =========================================================
   26  OUTCOMES — traditional 3-column case study cards
   Standard corporate pattern: image top, content below.
   No rounded corners, no gray background, no shadows.
   Cards lift slightly on hover; image zooms; CTA tints orange.
   ========================================================= */

.outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.case-card {
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease);
  background: var(--c-bg);
}
.case-card:hover { transform: translateY(-4px); }

.case-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-bg-warm);
  margin-bottom: var(--s-3);
}
.case-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.case-card:hover .case-card__image img { transform: scale(1.06); }

.case-card__body {
  padding: 0;
}

.case-card__tag {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: var(--s-2);
}

.case-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin-bottom: var(--s-2);
  transition: color var(--dur) var(--ease);
}
.case-card:hover .case-card__title { color: var(--c-brand); }

.case-card__desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--c-ink-2);
  margin-bottom: var(--s-3);
}

.case-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink);
  margin-top: auto;
  transition: color var(--dur) var(--ease);
}
.case-card:hover .case-card__cta { color: var(--c-brand); }
.case-card__cta .arrow-link__line {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width var(--dur) var(--ease);
}
.case-card__cta .arrow-link__line::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.case-card:hover .case-card__cta .arrow-link__line { width: 28px; }


/* =========================================================
   27  RESPONSIVE OVERRIDES for sections 24-26
   ========================================================= */

@media (max-width: 1024px) {
  .why-us__head-label { grid-column: 1 / span 12; margin-bottom: var(--s-3); }
  .why-us__head-title, .why-us__head-body { grid-column: 1 / span 12; }
  .why-us__layout { grid-template-columns: 1fr; row-gap: var(--s-5); }
  .why-us__visual { min-height: 280px; order: -1; }

  .industries__head-body { grid-column: 1 / span 12; }
  .industries__grid { grid-template-columns: repeat(2, 1fr); }
  .industry:nth-child(4n) { border-right: 1px solid var(--c-rule); }
  .industry:nth-child(2n) { border-right: none; }
  .industry:nth-last-child(-n+4) { border-bottom: 1px solid var(--c-rule); }
  .industry:nth-last-child(-n+2) { border-bottom: none; }

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

@media (max-width: 720px) {
  .why-us__grid { grid-template-columns: 1fr; row-gap: var(--s-5); }

  .industries__grid { grid-template-columns: 1fr; }
  .industry, .industry:nth-child(4n), .industry:nth-child(2n) {
    border-right: none;
    border-bottom: 1px solid var(--c-rule);
  }
  .industry:last-child { border-bottom: none; }

  .outcomes__grid { grid-template-columns: 1fr; gap: var(--s-5); }
}