/* ==========================================================================
   OAS GEOSPATIAL CONSULTS — Design System
   Surveying & Geospatial Solutions for Property Development & Management
   ========================================================================== */

:root{
  /* Brand colors — sampled directly from the company logo */
  --green-50:  #eef8f1;
  --green-100: #d7efdf;
  --green-300: #8fcfa6;
  --green-500: #0a7d3b;   /* primary brand green (logo) */
  --green-600: #076b31;
  --green-700: #055727;
  --green-800: #054d24;
  --green-900: #06281a;   /* near-black green for cinematic hero */
  --green-950: #04160e;

  --ink:        #1f2226;  /* charcoal (logo wordmark) */
  --ink-soft:   #3a3e44;
  --slate:      #68696c;  /* gray accent (logo triangle / tagline) */
  --slate-soft: #8a8c90;

  --line:       #e4e9e4;
  --line-soft:  #eef2ee;
  --paper:      #ffffff;
  --paper-soft: #f6f9f6;
  --white:      #ffffff;

  --accent-gold: #c9a24a; /* sparing use — certificates / premium accents */

  /* Semantic */
  --color-bg: var(--paper);
  --color-bg-soft: var(--paper-soft);
  --color-text: var(--ink);
  --color-muted: var(--slate);
  --color-primary: var(--green-500);
  --color-primary-dark: var(--green-700);
  --color-border: var(--line);

  /* Typography */
  --font-head: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Spacing (4/8 rhythm) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 150ms;
  --dur-med: 300ms;
  --dur-slow: 600ms;

  --shadow-sm: 0 1px 2px rgba(6,40,26,.06), 0 1px 1px rgba(6,40,26,.04);
  --shadow-md: 0 8px 24px rgba(6,40,26,.10), 0 2px 6px rgba(6,40,26,.06);
  --shadow-lg: 0 24px 64px rgba(6,40,26,.16), 0 8px 20px rgba(6,40,26,.08);
  --shadow-glow: 0 0 0 1px rgba(10,125,59,.14), 0 20px 50px rgba(10,125,59,.18);

  color-scheme: light;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  background: #ffffff;
  background: var(--color-bg);
  color: #1f2226;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
[hidden]{ display: none !important; }
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5,h6{ margin: 0; font-family: var(--font-head); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
p{ margin: 0; }
button{ font-family: inherit; }
input, textarea, select{ font-family: inherit; font-size: 16px; }

::selection{ background: var(--green-500); color: var(--white); }

:focus-visible{
  outline: 3px solid var(--green-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section{ padding-block: var(--space-9); }
.section-sm{ padding-block: var(--space-7); }
@media (max-width: 720px){
  .section{ padding-block: var(--space-8); }
}

.stack{ display: flex; flex-direction: column; }
.cluster{ display: flex; flex-wrap: wrap; align-items: center; }
.grid{ display: grid; gap: var(--space-6); }

.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-600);
}
.eyebrow::before{
  content: '';
  width: 22px; height: 2px;
  background: var(--green-500);
  border-radius: 2px;
}
.eyebrow.on-dark{ color: var(--green-600); }
.eyebrow.on-dark::before{ background: var(--green-500); }

h1, .h1{ font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.04; letter-spacing: -0.02em; }
h2, .h2{ font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; }
h3, .h3{ font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.25; }
h4, .h4{ font-size: 1.125rem; line-height: 1.35; }
.lede{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--color-muted); line-height: 1.6; max-width: 60ch; }
.eyebrow + h1, .eyebrow + h2{ margin-top: var(--space-4); }

.text-muted{ color: var(--color-muted); }
.text-on-dark{ color: var(--ink); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  --btn-bg: var(--green-500);
  --btn-fg: var(--white);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-glow); background: var(--green-600); }
.btn:active{ transform: translateY(0); }
.btn svg{ width: 18px; height: 18px; transition: transform var(--dur-med) var(--ease-spring); }
.btn:hover svg{ transform: translate(3px,-3px); }

.btn-ghost{
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover{ background: var(--paper-soft); border-color: var(--green-500); color: var(--green-700); box-shadow: none; }

.btn-on-dark{
  --btn-bg: var(--green-500);
  --btn-fg: var(--white);
}
.btn-on-dark:hover{ background: var(--green-600); }

.btn-outline-on-dark{
  --btn-bg: transparent;
  --btn-fg: var(--white);
  border-color: var(--line);
}
.btn-outline-on-dark:hover{ background: var(--paper-soft); border-color: var(--green-500); color: var(--green-700); box-shadow: none; }

.btn-sm{ padding: 10px 18px; font-size: 14px; min-height: 38px; }
.btn-block{ width: 100%; }

.link-arrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--green-700);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
.link-arrow:hover{ border-color: var(--green-500); gap: 12px; }
.link-arrow svg{ width: 16px; height: 16px; }

/* ==========================================================================
   Custom cursor (desktop only, disabled on touch + reduced motion)
   ========================================================================== */
.cursor-dot, .cursor-ring{
  position: fixed; top: 0; left: 0; z-index: 999;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.cursor-dot{ width: 6px; height: 6px; background: var(--green-500); }
.cursor-ring{
  width: 34px; height: 34px;
  border: 1.5px solid rgba(10,125,59,.55);
  transition: width var(--dur-med) var(--ease-spring), height var(--dur-med) var(--ease-spring), border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
}
.cursor-ring.is-active{
  width: 64px; height: 64px;
  background: rgba(10,125,59,.08);
  border-color: var(--green-600);
}
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button{ cursor: none; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce){
  .cursor-dot, .cursor-ring{ display: none !important; }
  body.has-custom-cursor{ cursor: auto; }
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  width: 100%; max-width: 100vw;
  padding: 18px var(--gutter) 0;
  transition: padding var(--dur-med) var(--ease-out);
}
.nav-shell{
  max-width: var(--container);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  padding: 8px 10px 8px 18px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(228,233,228,.9);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled .nav-shell{ box-shadow: var(--shadow-md); background: rgba(255,255,255,.92); }
.brand{ display: flex; align-items: center; gap: 10px; }
.brand img{ height: 34px; width: auto; }
.brand-word{ font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: .01em; color: var(--ink); line-height: 1.1; }
.brand-word small{ display:block; font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: .1em; color: var(--slate); text-transform: uppercase; }

.nav-links{ display: flex; align-items: center; gap: 2px; }
.nav-links a{
  padding: 9px 13px; border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 500; color: var(--ink-soft);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover, .nav-links a.is-active{ background: var(--green-50); color: var(--green-700); }

.nav-cta{ display: flex; align-items: center; gap: 10px; }
.nav-toggle{
  display: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white);
  align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: all var(--dur-fast) var(--ease-out);
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

@media (max-width: 1100px){
  .nav-shell{ gap: var(--space-3); padding-left: 14px; }
  .nav-links a{ padding: 8px 9px; font-size: 13px; }
  .brand-word{ font-size: 14px; }
}
@media (max-width: 820px){
  .nav-links{ display: none; }
  .nav-toggle{ display: inline-flex; }
}
@media (max-width: 480px){
  .nav-cta .btn-sm span.btn-label-full{ display:none; }
}
@media (max-width: 600px){
  .nav-cta .btn-ghost{ display:none; }
  .nav-cta{ gap:8px; }
}

.mobile-nav{
  position: fixed; inset: 0; z-index: 600;
  width: 100%; max-width: 100vw;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-8) var(--gutter);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.mobile-nav.is-open{ transform: translateY(0); visibility: visible; transition: transform var(--dur-slow) var(--ease-out); }
.mobile-nav a{ display:block; min-width:0; font-family: var(--font-head); font-size: clamp(2rem,8vw,3rem); color: var(--ink); padding: 10px 0; border-bottom: 1px solid var(--line); word-break: break-word; }
.mobile-nav-close{
  position: absolute; top: 22px; right: var(--gutter);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--green-50); border: 1px solid var(--line);
  color: var(--ink); font-size: 20px; cursor: pointer;
}
.mobile-nav-foot{ margin-top: var(--space-6); color: var(--color-muted); font-size: 14px; }

/* ==========================================================================
   Hero (cinematic, topo-line motif)
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 160px var(--gutter) var(--space-9);
  background: var(--white);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.hero-topo{ position: absolute; inset: 0; z-index: -2; opacity: .5; }
.hero-topo svg{ width: 100%; height: 100%; }
.hero-grain{
  position: absolute; inset: -20%; z-index: -1;
  background-image: radial-gradient(rgba(6,40,26,.05) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  opacity: .5;
}
.hero-scan{
  position: absolute; left: 0; right: 0; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(10,125,59,.35), transparent);
  top: 30%;
}
.hero-inner{ max-width: var(--container); margin-inline: auto; width: 100%; position: relative; }
.hero-top-row{ display:flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); margin-bottom: var(--space-7); }
.hero-coords{
  font-family: var(--font-body); font-size: 12.5px; letter-spacing: .08em; color: var(--color-muted);
  display:flex; flex-direction: column; gap: 4px; text-align: right;
}
.hero-title{ max-width: 16ch; color: var(--ink); }
.hero-title .accent{ color: var(--green-600); font-style: normal; }
.hero-foot{ display:flex; flex-wrap: wrap; gap: var(--space-7); align-items: flex-end; justify-content: space-between; margin-top: var(--space-7); }
.hero-actions{ display:flex; flex-wrap: wrap; gap: 14px; }
.hero-stats{ display:flex; gap: var(--space-6); flex-wrap: wrap; }
.hero-stat b{ display:block; font-family: var(--font-head); font-size: 1.7rem; color: var(--ink); }
.hero-stat span{ font-size: 12.5px; color: var(--color-muted); letter-spacing:.03em; }
.hero-scroll{
  position: absolute; bottom: -8px; right: 0;
  display:flex; align-items:center; gap:10px; color: var(--color-muted); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
}
.hero-scroll .dot-line{ width: 1px; height: 34px; background: linear-gradient(var(--green-500), transparent); position: relative; overflow: hidden; }
.hero-scroll .dot-line::after{ content:''; position:absolute; left:0; top:-30%; width:100%; height: 30%; background: var(--green-500); animation: scrollDrip 1.8s infinite ease-in-out; }
@keyframes scrollDrip{ 0%{ top:-30%;} 100%{ top:100%;} }
@media (prefers-reduced-motion: reduce){ .hero-scroll .dot-line::after{ animation: none; top: 50%; } }

@media (max-width: 720px){
  .hero{ padding-top: 130px; align-items: stretch; }
  .hero-top-row{ flex-direction: column; gap: var(--space-3); }
  .hero-coords{ text-align: left; flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .hero-foot{ flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .hero-scroll{ position: static; }
}

/* Hero — photo carousel variant */
.hero-photo{ background: var(--green-950); }
.hero-slides{ position: absolute; inset: 0; z-index: -3; }
.hero-slides{ overflow: hidden; }
.hero-slide{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: translateX(6%) scale(1.12);
  transition: opacity 1.4s var(--ease-out), transform 1.8s var(--ease-out);
  will-change: transform, opacity;
}
.hero-slide.is-active{ opacity: 1; transform: translateX(0) scale(1); animation: hero-drift 9s ease-out forwards; }
@keyframes hero-drift{ from{ transform: translateX(0) scale(1); } to{ transform: translateX(-1.5%) scale(1.07); } }
@media (prefers-reduced-motion: reduce){
  .hero-slide, .hero-slide.is-active{ transform:none; animation:none; transition: opacity 1.4s linear; }
}
.hero-scrim{
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(0deg, rgba(4,22,14,.88) 0%, rgba(4,22,14,.55) 45%, rgba(4,22,14,.35) 100%),
    linear-gradient(90deg, rgba(4,22,14,.5), transparent 60%);
}
.hero-photo .hero-topo{ opacity: .35; mix-blend-mode: screen; }
.hero-photo .hero-topo svg g{ stroke: #fff; }
.hero-photo .eyebrow{ color: #d7efdf; }
.hero-photo .eyebrow::before{ background: var(--green-500); }
.hero-photo .hero-coords{ color: rgba(255,255,255,.6); }
.hero-photo .hero-title{ color: #fff; }
.hero-photo .hero-title .accent{ color: #8fe3ac; }
.hero-photo .lede{ color: rgba(255,255,255,.82) !important; }
.hero-photo .hero-stat b{ color: #fff; }
.hero-photo .hero-stat span{ color: rgba(255,255,255,.65); }
.hero-photo .hero-scroll{ color: rgba(255,255,255,.75); }
.hero-carousel-controls{
  position: absolute; right: var(--gutter); bottom: var(--space-8); z-index: 3;
  display: flex; gap: 10px;
}
.hero-carousel-arrow{
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.35); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.hero-carousel-arrow:hover{ background: var(--green-500); border-color: var(--green-500); }
.hero-carousel-arrow svg{ width: 18px; height: 18px; }
.hero-carousel-dots{
  position: absolute; left: var(--gutter); bottom: var(--space-5); z-index: 3;
  display: flex; gap: 8px;
}
.hero-carousel-dot{
  width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35);
  border: none; cursor: pointer; padding: 0;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.hero-carousel-dot.is-active{ background: var(--green-500); transform: scale(1.25); }
@media (max-width: 640px){
  .hero-carousel-controls{ display: none; }
}

/* Big stat band — years of practice */
.stat-band{
  display: flex; align-items: center; gap: var(--space-7); flex-wrap: wrap;
}
.stat-band-num{
  font-family: var(--font-head); font-weight: 800; line-height: .9;
  font-size: clamp(4rem, 9vw, 6.5rem); color: var(--green-600); flex-shrink: 0;
}
.stat-band-num small{ font-size: .5em; color: var(--ink); font-weight: 800; }
.stat-band-label{ font-family: var(--font-head); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; color: var(--slate); margin-bottom: 6px; }
.stat-band-text{ font-family: var(--font-head); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.8rem); max-width: 34ch; }

/* News / insights band */
.news-band{ background: var(--green-600); color: #fff; padding-block: var(--space-8) var(--space-7); text-align: center; }
.news-band h2{ color: #fff; }
.news-band .eyebrow{ justify-content: center; color: rgba(255,255,255,.85); }
.news-band .eyebrow::before{ background: #fff; }
.news-cards{ margin-top: var(--space-7); }
.news-card{
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-6); text-align: left;
}
.news-card .soon-badge{ margin-top: var(--space-4); }

/* Services showcase grid — photo-topped cards */
.showcase-grid{ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.showcase-card{
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
  background: var(--white); display: flex; flex-direction: column;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.showcase-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.showcase-card-media{ aspect-ratio: 4/3; overflow: hidden; background: var(--paper-soft); }
.showcase-card-media img{ width:100%; height:100%; object-fit: cover; display:block; transition: transform .5s var(--ease-out); }
.showcase-card:hover .showcase-card-media img{ transform: scale(1.06); }
.showcase-card-media.is-icon{ display:flex; align-items:center; justify-content:center; }
.showcase-card-media.is-icon svg{ width:44px; height:44px; color: var(--green-600); }
.showcase-card-body{ background: var(--green-800); color: #fff; padding: var(--space-5); flex:1; display:flex; flex-direction:column; }
.showcase-card-body h3{ color: #fff; font-size: 1.05rem; }
.showcase-card-body p{ color: rgba(255,255,255,.75); font-size: 13.5px; margin-top: 8px; flex:1; }
.showcase-card-body .link-arrow{ color: #fff; margin-top: 12px; }
.showcase-card-body .link-arrow:hover{ border-color: #fff; }

/* Footer — icon-led contact items (used on selected pages) */
.footer-contact-item{ display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.footer-contact-item svg{ width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--green-600); }
.site-footer.is-dark-bottom .footer-bottom{ background: var(--green-950); color: rgba(255,255,255,.65); margin-top: var(--space-6); padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); }
.site-footer.is-dark-bottom .footer-bottom a{ color: rgba(255,255,255,.8); }

/* ==========================================================================
   Marquee strip
   ========================================================================== */
.marquee{
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; background: var(--paper-soft);
}
.marquee-track{ display:flex; gap: var(--space-8); padding: 18px 0; width: max-content; animation: marquee 28s linear infinite; }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation: none; overflow-x: auto; } }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
.marquee-item{ display:flex; align-items:center; gap:10px; font-family: var(--font-head); font-weight:600; font-size: 14px; letter-spacing:.04em; color: var(--slate); text-transform: uppercase; white-space:nowrap; }
.marquee-item svg{ width:16px; height:16px; color: var(--green-500); }

/* ==========================================================================
   Cards / Services
   ========================================================================== */
.card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

.service-grid{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.service-card{ position: relative; overflow:hidden; }
.service-card .num{ position:absolute; top: var(--space-5); right: var(--space-6); font-family: var(--font-head); font-size: 13px; color: var(--line); font-weight:600; }
.service-icon{
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background: var(--green-50); color: var(--green-600);
  margin-bottom: var(--space-5);
  transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-spring);
}
.service-card:hover .service-icon{ background: var(--green-500); color: #fff; transform: rotate(-6deg) scale(1.05); }
.service-icon svg{ width: 26px; height: 26px; }
.service-card h3{ margin-bottom: 10px; }
.service-card p{ color: var(--color-muted); font-size: 14.5px; }
.service-card .tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top: var(--space-4); }
.service-card .tags span{ font-size: 11.5px; font-weight:600; letter-spacing:.03em; text-transform: uppercase; color: var(--green-700); background: var(--green-50); padding: 5px 10px; border-radius: var(--radius-pill); }

/* ==========================================================================
   Services wheel — rotating circular navigator, links to each service page
   ========================================================================== */
.services-wheel{
  position: relative;
  width: min(640px, 92vw);
  aspect-ratio: 1;
  margin: var(--space-8) auto var(--space-6);
}
.wheel-track{ position:absolute; inset:0; border:1.5px dashed var(--line); border-radius:50%; }
.wheel-hub{
  position:absolute; inset:0; margin:auto;
  width: 38%; height: 38%;
  border-radius:50%;
  background: var(--white); color: var(--green-700);
  border: 2.5px solid var(--green-500);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:8px; padding:10%; z-index:2; box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.wheel-hub:hover, .wheel-hub:focus-visible{ transform: scale(1.06); box-shadow: var(--shadow-glow); background: var(--green-50); outline: none; }
.wheel-hub-logo{ width:34%; min-width:32px; max-width:60px; height:auto; }
.wheel-hub span{ font-family: var(--font-head); font-weight:700; font-size: 15px; line-height:1.25; }
@media (max-width: 640px){ .wheel-hub span{ font-size: 11px; } }
.wheel-ring{ position:absolute; inset:0; animation: wheel-spin 55s linear infinite; }
.services-wheel:hover .wheel-ring,
.services-wheel:focus-within .wheel-ring{ animation-play-state: paused; }
@keyframes wheel-spin{ to{ transform: rotate(360deg); } }
@keyframes wheel-spin-reverse{ to{ transform: rotate(-360deg); } }
.wheel-node{
  position:absolute; top:50%; left:50%;
  width: 25%; aspect-ratio:1; margin-top: -12.5%; margin-left: -12.5%;
  transform: rotate(calc(var(--i) * 60deg)) translate(min(255px, 38vw)) rotate(calc(var(--i) * -60deg));
}
.wheel-node-link{
  display:flex; width:100%; height:100%; border-radius:50%;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background: var(--white); border: 1.5px solid var(--line); box-shadow: var(--shadow-sm);
  text-align:center; padding:8px; overflow:hidden;
  animation: wheel-spin-reverse 55s linear infinite;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.wheel-node-link:hover, .wheel-node-link:focus-visible{ border-color: var(--green-500); box-shadow: var(--shadow-md); background: var(--green-50); outline:none; }
.wheel-node-link svg{ width:22px; height:22px; color: var(--green-600); flex-shrink:0; }
.wheel-node-link small{ font-size:11.5px; font-weight:600; line-height:1.1; color: var(--ink); letter-spacing:-.01em; }
.section-dark .wheel-node-link{ background: var(--white); }
@media (max-width: 640px){
  .services-wheel{ width: min(380px, 92vw); margin-block: var(--space-6); }
  .wheel-node{ transform: rotate(calc(var(--i) * 60deg)) translate(min(150px, 36vw)) rotate(calc(var(--i) * -60deg)); }
  .wheel-node-link svg{ width:20px; height:20px; }
  .wheel-node-link small{ font-size:10.5px; }
}
@media (prefers-reduced-motion: reduce){
  .wheel-ring, .wheel-node-link{ animation: none; }
}
.service-card .link-arrow{ margin-top: var(--space-5); }

/* ==========================================================================
   Process dashboard — static visual stage tracker (consultation → delivery)
   ========================================================================== */
.stage-dashboard{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:24px; margin-top:16px; }
.stage-track{ position:absolute; top:22px; left:5%; right:5%; height:2px; background:var(--line); z-index:0; border-radius:2px; overflow:hidden; }
.stage-track-fill{ position:absolute; inset:0; background:linear-gradient(90deg, var(--green-600), var(--green-300)); }
.stage-item{ position:relative; z-index:1; text-align:center; padding:0 6px; }
.stage-dot{
  width:44px; height:44px; border-radius:50%; margin:0 auto 16px;
  background:var(--white); border:2.5px solid var(--green-500); color:var(--green-700);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-family:var(--font-head); font-size:15px;
  box-shadow: var(--shadow-sm);
}
.stage-item h4{ font-size:15px; }
.stage-item p{ font-size:13px; margin-top:6px; line-height:1.5; }
@media (max-width: 860px){
  .stage-dashboard{ grid-template-columns:1fr; gap:28px; }
  .stage-track{ top:0; bottom:0; left:21px; right:auto; width:2px; height:auto; }
  .stage-track-fill{ background:linear-gradient(180deg, var(--green-600), var(--green-300)); }
  .stage-item{ text-align:left; display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start; }
  .stage-dot{ margin:0; }
}

/* Process / steps */
.steps{ counter-reset: step; }
.step{ position:relative; padding-left: 64px; padding-block: var(--space-5); border-top: 1px solid var(--line); }
.step:first-child{ border-top: none; }
.step::before{
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position:absolute; left:0; top: var(--space-5);
  font-family: var(--font-head); font-weight:700; font-size: 15px; color: var(--green-500);
  width: 44px; height:44px; border-radius:50%; border:1.5px solid var(--green-500);
  display:flex; align-items:center; justify-content:center;
}

/* Stat block */
.stat-grid{ grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }
.stat b{ display:block; font-family: var(--font-head); font-size: clamp(2rem,4vw,3rem); color: var(--green-700); }
.stat span{ color: var(--color-muted); font-size: 14px; }

/* Section dark variant (now light, per site-wide white background) */
.section-dark{
  background: var(--paper-soft);
  color: var(--ink);
  border-block: 1px solid var(--line);
}
.section-dark .text-muted{ color: var(--color-muted); }
.section-dark h2, .section-dark h3, .section-dark h4{ color: var(--ink); }
.section-dark .card{ background: var(--white); border-color: var(--line); }
.section-dark .card:hover{ border-color: transparent; }

/* Topographic divider */
.topo-divider{ height: 90px; width: 100%; display:block; }

/* ==========================================================================
   Forms
   ========================================================================== */
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom: var(--space-5); }
.field label{ font-size: 13.5px; font-weight:600; color: var(--ink); }
.field .hint{ font-size:12.5px; color: var(--color-muted); }
.field input, .field select, .field textarea{
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 16px; background: var(--white); color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  min-height: 48px;
}
.field textarea{ min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: var(--green-500); box-shadow: 0 0 0 4px var(--green-50);
}
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color: #c0362c; }
.field-error{ font-size: 12.5px; color: #c0362c; display:none; }
.field.has-error .field-error{ display:block; }
.field-row{ display:grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 600px){ .field-row{ grid-template-columns: 1fr; } }
.required::after{ content: ' *'; color: var(--green-600); }

.form-note{
  display:flex; gap:10px; align-items:flex-start;
  background: var(--green-50); border: 1px solid var(--green-100);
  padding: var(--space-4); border-radius: var(--radius-md);
  font-size: 13.5px; color: var(--green-800); margin-top: var(--space-4);
}
.form-note svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; color: var(--green-600); }

.form-success{
  display:none; text-align:center; padding: var(--space-7) var(--space-5);
}
.form-success.is-visible{ display:block; }
.form-success .icon-badge{ width:64px; height:64px; border-radius:50%; background: var(--green-50); color: var(--green-600); display:flex; align-items:center; justify-content:center; margin: 0 auto var(--space-4); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--white); color: var(--color-muted); padding-top: var(--space-9); border-top: 1px solid var(--line); }
.footer-top{ display:grid; gap: var(--space-7); grid-template-columns: 1.3fr 1fr 1fr 1fr; padding-bottom: var(--space-8); border-bottom: 1px solid var(--line); }
@media (max-width: 860px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-brand .logo-chip{
  display: inline-flex; align-items:center;
  background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 10px 16px; margin-bottom: var(--space-4);
}
.footer-brand img{ height: 30px; display:block; }
.footer-brand p{ font-size: 14px; max-width: 32ch; color: var(--color-muted); }
.footer-col h5{ color: var(--ink); font-family: var(--font-head); font-size: 13px; letter-spacing:.08em; text-transform: uppercase; margin-bottom: var(--space-4); }
.footer-col li{ margin-bottom: 10px; }
.footer-col a{ font-size: 14.5px; color: var(--color-muted); transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover{ color: var(--green-700); }
.footer-social{ display:flex; gap:10px; margin-top: var(--space-4); }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color: var(--color-muted); }
.footer-social a:hover{ background: var(--green-600); border-color: var(--green-600); color: #fff; }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-block: var(--space-5); font-size: 13px; color: var(--slate-soft); }
.footer-bottom a{ color: var(--slate-soft); }
.footer-bottom a:hover{ color: var(--ink); }

/* ==========================================================================
   Utility / reveal animation hooks (progressively enhanced by JS)
   ========================================================================== */
[data-reveal]{ opacity: 0; transform: translateY(24px); }
.reveal-ready [data-reveal]{ transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.is-revealed[data-reveal]{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1 !important; transform: none !important; }
}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--green-50); color: var(--green-700);
  font-size: 12.5px; font-weight: 600; letter-spacing:.03em;
}
.badge svg{ width:14px; height:14px; }

.divider{ height:1px; background: var(--line); border:none; margin: var(--space-7) 0; }

.pill-tab{
  padding: 10px 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--line);
  background: var(--white); font-weight: 600; font-size: 14px; color: var(--slate);
  cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
}
.pill-tab.is-active, .pill-tab:hover{ background: var(--green-500); border-color: var(--green-500); color:#fff; }

.table-wrap{ overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
table{ width:100%; border-collapse: collapse; min-width: 480px; }
th, td{ text-align:left; padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--line); }
th{ background: var(--paper-soft); font-family: var(--font-head); font-size: 12.5px; text-transform: uppercase; letter-spacing:.05em; color: var(--slate); }
tr:last-child td{ border-bottom: none; }

/* Back to top */
.to-top{
  position: fixed; right: 24px; bottom: 24px; z-index: 400;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--green-500); color:#fff; border: none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform: translateY(10px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  box-shadow: var(--shadow-md);
}
.to-top.is-visible{ opacity:1; pointer-events:auto; transform: translateY(0); }
.to-top svg{ width:20px; height:20px; }

/* ==========================================================================
   Media / photography blocks
   ========================================================================== */
.media-frame{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
  background: var(--paper-soft);
}
.media-frame img{ width:100%; height:100%; object-fit: cover; display:block; }
.media-frame .media-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: var(--space-6) var(--space-5) var(--space-4);
  background: linear-gradient(0deg, rgba(4,22,14,.85), rgba(4,22,14,0));
  color:#fff; font-size: 13.5px; font-weight:600; letter-spacing:.01em; line-height:1.4;
}

/* Two-up: photo beside supporting copy, used on service pages */
.service-media{ grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items:center; }
.service-media .media-frame{ aspect-ratio: 4/3; }
.service-media.media-reverse{ direction: rtl; }
.service-media.media-reverse > *{ direction: ltr; }
@media (max-width: 780px){ .service-media{ grid-template-columns: 1fr; } }

/* Bento gallery, used on the homepage */
.media-gallery{ grid-template-columns: 1.3fr 1fr; gap: var(--space-5); }
.media-gallery .media-frame:first-child{ aspect-ratio: 4/3; }
.media-gallery .media-stack{ display:grid; gap: var(--space-5); }
.media-gallery .media-stack .media-frame{ aspect-ratio: 16/10; }
@media (max-width: 780px){ .media-gallery{ grid-template-columns: 1fr; } }

/* Vision & Mission — photo beside icon-led statement columns */
.vm-block{ grid-template-columns: 1fr 1.4fr; gap: var(--space-8); align-items:stretch; }
.vm-photo{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); min-height: 320px; }
.vm-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.vm-cols{ display:grid; grid-template-columns:1fr 1fr; gap: var(--space-7); }
.vm-col{ text-align:center; }
.vm-icon{ width:56px; height:56px; margin:0 auto var(--space-4); color: var(--slate); }
.vm-col:first-child .vm-icon{ color: var(--green-600); }
.vm-col h3{ font-size: 1.15rem; text-transform:uppercase; letter-spacing:.04em; color: var(--green-700); }
.vm-col p{ margin-top: var(--space-4); }
@media (max-width: 780px){
  .vm-block{ grid-template-columns:1fr; }
  .vm-photo{ min-height: 260px; }
  .vm-cols{ grid-template-columns:1fr; gap: var(--space-6); }
}

/* Page hero (secondary pages, lighter) */
.page-hero{
  padding: 160px var(--gutter) var(--space-8);
  background:
    radial-gradient(60% 60% at 90% 0%, var(--green-50), transparent 60%),
    var(--paper);
  border-bottom: 1px solid var(--line);
}
.page-hero-inner{ max-width: var(--container); margin-inline:auto; }
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size: 13px; color: var(--color-muted); margin-bottom: var(--space-5); }
.breadcrumb a:hover{ color: var(--green-600); }

.skip-link{
  position:absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--green-700); color:#fff; padding: 12px 18px; border-radius: 10px;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top: 12px; }


/* ==========================================================================
   Corporate homepage components (redesign)
   ========================================================================== */
.section-soft{ background: var(--paper-soft); border-block: 1px solid var(--line); }
.section-head{ max-width: 62ch; margin-bottom: var(--space-8); }
.section-head h2{ margin-top: 14px; }
.section-head .lede{ margin-top: 16px; }
.section-head-row{ max-width: none; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.section-head-row > div{ max-width: 62ch; }

/* Trust */
.trust-grid{ grid-template-columns: repeat(4, 1fr); gap: 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-item{ padding: var(--space-6) var(--space-5); border-right:1px solid var(--line); }
.trust-item:last-child{ border-right:0; }
.trust-figure{ font-family: var(--font-head); font-weight:700; font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height:1; color: var(--green-700); letter-spacing:-.02em; }
.trust-figure small{ font-size:.55em; margin-left:2px; }
.trust-figure-text{ font-size: clamp(2rem, 3.6vw, 2.8rem); }
.trust-item h3{ font-size:1.05rem; margin-top: var(--space-4); }
.trust-item p{ margin-top:8px; font-size:.95rem; line-height:1.55; }
.credentials{ grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.credential{ display:flex; flex-direction:column; gap:6px; padding: var(--space-5); border-radius: var(--radius-md); border:1px solid var(--line); background: var(--white); }
.credential.is-placeholder, .case-placeholder, .leader-photo.is-placeholder{ border:1.5px dashed var(--green-300); background: var(--green-50); }
.credential-label{ font-family: var(--font-head); font-weight:700; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color: var(--green-800); }
.credential-note{ font-size:.9rem; color: var(--slate); }

/* Outcomes */
.outcome-grid{ grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.outcome-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); display:flex; flex-direction:column; gap:12px; }
.outcome-num{ font-family: var(--font-head); font-weight:700; font-size:.85rem; letter-spacing:.08em; color: var(--green-600); }
.outcome-card h3{ font-size:1.2rem; }
.outcome-card p{ line-height:1.55; flex:1; }
.outcome-card .link-arrow{ margin-top:8px; }

/* Services */
.svc-grid{ grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.svc-card{ display:flex; flex-direction:column; gap:10px; padding: var(--space-6); border:1px solid var(--line); border-radius: var(--radius-md); background: var(--white); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.svc-card:hover{ border-color: var(--green-500); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.svc-card h3{ font-size:1.1rem; line-height:1.25; }
.svc-card p{ font-size:.95rem; line-height:1.55; }
.svc-deliver{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); color: var(--ink-soft); }
.svc-deliver strong{ display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--green-700); margin-bottom:2px; }
.svc-more{ font-weight:600; font-size:.9rem; color: var(--green-700); }
.fee-strip{ margin-top: var(--space-7); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding: var(--space-5) var(--space-6); border:1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-soft); }
.fee-strip > div{ display:flex; flex-direction:column; gap:4px; max-width:70ch; }

/* Case studies / leadership placeholders */
.case-placeholder{ border-radius: var(--radius-md); padding: var(--space-7); display:flex; flex-direction:column; gap:12px; max-width:760px; }
.case-placeholder p{ color: var(--ink-soft); line-height:1.6; }
.leader{ grid-template-columns: 0.7fr 1.3fr; gap: var(--space-8); align-items:center; }
.leader-photo{ aspect-ratio: 4/5; max-width: 340px; border-radius: var(--radius-md); display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; }

/* Insights */
.insight-grid{ grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.insight-card{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding: var(--space-6); border:1px solid var(--line); border-radius: var(--radius-md); background: var(--white); }
.insight-card h3{ font-size:1.15rem; line-height:1.3; }
.insight-card .soon-badge{ margin-top:auto; font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color: var(--slate); }

/* Final CTA */
.cta-final{ padding-block: var(--space-9); background: var(--green-900); color:#fff; }
.cta-final h2{ color:#fff; }
.cta-final .btn-outline-on-dark{ border-color: rgba(255,255,255,.45); }
.cta-final-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-8); align-items:center; }
.cta-final h2{ max-width:20ch; }
.cta-final .lede{ margin-top:16px; color: rgba(255,255,255,.82); }
.cta-contact{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,.18); }
.cta-contact li{ display:flex; flex-direction:column; gap:2px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.18); color:#fff; }
.cta-contact li span{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--green-300); }
.cta-contact a{ color:#fff; font-weight:600; font-size:clamp(.9rem,1.5vw,1rem); overflow-wrap:anywhere; }
.mobile-nav .mobile-nav-cta{ color: var(--green-700); }

/* Process dashboard: numbers like "01" */
.stage-dot{ font-size:13px; letter-spacing:.02em; }

@media (max-width: 900px){
  .cta-final-grid{ grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 1100px){
  .svc-grid, .outcome-grid{ grid-template-columns: repeat(2, 1fr); }
  .trust-grid{ grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2){ border-right:0; }
  .trust-item:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}
@media (max-width: 760px){
  .svc-grid, .outcome-grid, .insight-grid, .credentials{ grid-template-columns: 1fr; }
  .trust-grid{ grid-template-columns: 1fr; }
  .trust-item{ border-right:0; border-bottom:1px solid var(--line); }
  .trust-item:last-child{ border-bottom:0; }
  .leader{ grid-template-columns: 1fr; }
  .leader-photo{ max-width: 240px; }
  .cta-final-grid{ grid-template-columns: 1fr; gap: var(--space-6); }
  .section-head-row{ align-items:flex-start; }
}


/* About: "Why we exist" visual flow + pillars */
.why-flow{ display:grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--space-5); align-items:center; padding: var(--space-7) var(--space-6); background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); }
.flow-col{ display:flex; flex-direction:column; gap:10px; }
.flow-label{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--slate); margin-bottom:2px; }
.flow-chip{ display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-soft); font-weight:600; color: var(--ink); }
.flow-chip svg{ width:22px; height:22px; color: var(--green-600); flex-shrink:0; }
.flow-chip-out{ background: var(--green-50); border-color: var(--green-100); color: var(--green-800); }
.flow-arrow{ color: var(--green-500); }
.flow-arrow svg{ width:32px; height:32px; }
.flow-core{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); background: var(--green-900); color:#fff; box-shadow: var(--shadow-md); }
.flow-core svg{ width:44px; height:44px; color: var(--green-300); }
.flow-core strong{ font-family: var(--font-head); font-size:1.2rem; }
.flow-core span{ font-size:.9rem; color: rgba(255,255,255,.78); }
.pillar-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
.pillar-card{ background: var(--white); border:1px solid var(--line); border-top:3px solid var(--green-500); border-radius: var(--radius-md); padding: var(--space-7) var(--space-6); }
.pillar-icon{ width:56px; height:56px; border-radius: var(--radius-md); background: var(--green-50); color: var(--green-600); display:flex; align-items:center; justify-content:center; margin-bottom: var(--space-4); }
.pillar-icon svg{ width:28px; height:28px; }
.pillar-card h3{ font-size:1.25rem; }
.pillar-card p{ margin-top:10px; line-height:1.65; }
@media (max-width: 900px){
  .why-flow{ grid-template-columns: 1fr; padding: var(--space-6) var(--space-5); }
  .flow-arrow{ display:flex; justify-content:center; }
  .flow-arrow svg{ transform: rotate(90deg); }
  .pillar-grid{ grid-template-columns: 1fr; }
}


/* Activities image slider */
.slider-controls{ display:flex; gap:10px; }
.slider-btn{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background: var(--white); color: var(--green-700); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.slider-btn:hover{ background: var(--green-50); border-color: var(--green-500); }
.slider-btn svg{ width:20px; height:20px; }
.slider{ position:relative; }
.slider-track{ display:flex; gap: var(--space-5); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding: 4px var(--gutter) var(--space-5); scrollbar-width:thin; scrollbar-color: var(--green-300) transparent; }
.slider-track:focus-visible{ outline:2px solid var(--green-500); outline-offset:-2px; }
.slide{ flex:0 0 clamp(280px, 34vw, 440px); scroll-snap-align:start; margin:0; border-radius: var(--radius-md); overflow:hidden; background: var(--white); border:1px solid var(--line); box-shadow: var(--shadow-sm); }
.slide img{ width:100%; aspect-ratio: 4/3; object-fit:cover; display:block; }
.slide figcaption{ display:flex; flex-direction:column; gap:4px; padding: var(--space-4) var(--space-5) var(--space-5); }
.slide figcaption strong{ font-family: var(--font-head); font-size:1.02rem; color: var(--ink); }
.slide figcaption span{ font-size:.92rem; color: var(--color-muted); line-height:1.45; }
@media (prefers-reduced-motion: reduce){ .slider-track{ scroll-behavior:auto; } }


/* Location map */
.map-embed{ position:relative; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-sm); background: var(--paper-soft); }
.map-embed iframe{ display:block; width:100%; height: clamp(300px, 46vw, 460px); border:0; }


/* Survey fee by state */
.state-grid{ grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.state-card{ display:flex; flex-direction:column; gap:8px; text-align:left; padding: var(--space-5); border:1.5px solid var(--line); border-radius: var(--radius-md); background: var(--white); cursor:pointer; font: inherit; color: var(--ink); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.state-card:hover{ border-color: var(--green-500); box-shadow: var(--shadow-sm); }
.state-card.is-selected{ border-color: var(--green-500); background: var(--green-50); box-shadow: 0 0 0 3px rgba(10,125,59,.14); }
.state-name{ font-family: var(--font-head); font-weight:700; font-size:1.15rem; }
.state-mode{ align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius: var(--radius-pill); background: var(--paper-soft); border:1px solid var(--line); color: var(--slate); }
.state-mode.is-instant{ background: var(--green-500); border-color: var(--green-500); color:#fff; }
.state-desc{ font-size:.92rem; line-height:1.5; color: var(--color-muted); }
@media (max-width: 1000px){ .state-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .state-grid{ grid-template-columns: 1fr; } }


/* Professional Trust: 2 x 2 pillars, international statement, credentials */
.trust-pillars{ display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.trust-pillar{ display:flex; gap: var(--space-5); align-items:flex-start; padding: var(--space-7) var(--space-6); border:1px solid var(--line); border-radius: var(--radius-md); background: var(--white); }
.tp-icon{ flex:0 0 56px; width:56px; height:56px; border-radius: var(--radius-md); background: var(--green-50); border:1px solid var(--green-100); color: var(--green-600); display:flex; align-items:center; justify-content:center; }
.tp-icon svg{ width:28px; height:28px; }
.tp-label{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--green-600); }
.trust-pillar h3{ font-size:1.25rem; line-height:1.25; margin-top:6px; }
.trust-pillar p{ margin-top:10px; line-height:1.65; color: var(--color-muted); }
.trust-intl{ display:flex; gap: var(--space-5); align-items:flex-start; margin-top: var(--space-6); padding: var(--space-6); border-left:3px solid var(--green-500); background: var(--paper-soft); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.trust-intl > svg{ flex:0 0 36px; width:36px; height:36px; color: var(--green-600); margin-top:2px; }
.trust-intl h3{ font-size:1.2rem; }
.trust-intl p{ margin-top:8px; line-height:1.65; color: var(--color-muted); max-width:78ch; }
.cred-grid{ grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.cred-card{ display:flex; flex-direction:column; gap:10px; padding: var(--space-6); border:1px solid var(--line); border-top:3px solid var(--green-500); border-radius: var(--radius-md); background: var(--white); }
.cred-label{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--green-600); }
.cred-card h3{ font-size:1.15rem; line-height:1.3; }
.cred-card p{ line-height:1.6; color: var(--color-muted); }
.cred-todo{ margin-top:auto; padding:10px 12px; border:1.5px dashed var(--green-300); border-radius: var(--radius-sm); background: var(--green-50); color: var(--green-800) !important; font-size:.9rem; }
.cred-note{ font-size:.85rem; color: var(--slate) !important; }
@media (max-width: 900px){
  .cred-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .trust-pillars{ grid-template-columns: 1fr; }
  .trust-pillar{ flex-direction:column; gap: var(--space-4); padding: var(--space-6) var(--space-5); }
  .trust-intl{ flex-direction:column; gap: var(--space-3); }
}


/* Core Services: soft off-white with faint geospatial linework */
.section-geo{ position:relative; overflow:hidden; background: #f7f8f4; border-block: 1px solid var(--line); }
.section-geo .geo-bg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.section-geo > .container{ position:relative; z-index:1; }
#core-services .section-head h2{ color: var(--ink); letter-spacing:-.015em; }
#core-services .section-head .lede{ color: var(--ink-soft); max-width:58ch; }
#core-services .eyebrow{ color: var(--green-600); }
#core-services .wheel-track{ border:1px solid rgba(10,125,59,.22); }
#core-services .wheel-hub{ border-width:1.5px; box-shadow: 0 8px 28px rgba(5,40,26,.08); }
#core-services .wheel-node-link{ border:1px solid rgba(10,125,59,.18); box-shadow: 0 2px 10px rgba(5,40,26,.06); }
#core-services .wheel-node-link:hover, #core-services .wheel-node-link:focus-visible{ border-color: var(--green-500); box-shadow: 0 6px 18px rgba(5,40,26,.10); }
#core-services .wheel-node-link small{ color: var(--ink); }
#core-services .text-muted{ color: var(--slate); }


/* Professional Trust + Credentials: deep green, authoritative, faint survey linework */
.section-dkgeo{ position:relative; overflow:hidden; background: #0c1f18; color: rgba(255,255,255,.78); }
#credentials.section-dkgeo{ padding-top: 0; }
.section-dkgeo .geo-bg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.section-dkgeo > .container{ position:relative; z-index:1; }
.section-dkgeo .eyebrow{ color: var(--green-300); }
.section-dkgeo .eyebrow::before{ background: var(--green-500); }
.section-dkgeo h2, .section-dkgeo h3{ color:#fff; }
.section-dkgeo .lede{ color: rgba(255,255,255,.74); }
.section-dkgeo .trust-pillar{ background: rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.13); }
.section-dkgeo .tp-icon{ background: rgba(95,196,137,.10); border:1px solid rgba(95,196,137,.35); color: var(--green-300); }
.section-dkgeo .tp-label{ color: var(--green-300); }
.section-dkgeo .trust-pillar p{ color: rgba(255,255,255,.72); }
.section-dkgeo .trust-intl{ background: rgba(255,255,255,.04); border-left:3px solid var(--green-500); }
.section-dkgeo .trust-intl > svg{ color: var(--green-300); }
.section-dkgeo .trust-intl p{ color: rgba(255,255,255,.72); }
.section-dkgeo .cred-card{ background:#f6f7f3; border:1px solid #dde2d9; border-top:3px solid var(--green-500); }
.section-dkgeo .cred-card h3{ color: var(--ink); }
.section-dkgeo .cred-card p{ color: var(--ink-soft); }
.section-dkgeo .cred-label{ color: var(--green-600); }
.section-dkgeo .cred-todo{ background: #eaf3ec; color: var(--green-800) !important; }
.section-dkgeo .cred-note{ color: var(--slate) !important; }
#credentials.section-dkgeo > .container{ border-top:1px solid rgba(255,255,255,.12); padding-top: var(--space-8); }

.cred-verified{ margin-top:auto; padding:12px 14px; border:1px solid #cfd8cb; border-left:3px solid var(--green-500); border-radius: var(--radius-sm); background:#fff; color: var(--ink) !important; font-weight:600; font-size:.95rem; }


/* How We Support Your Project: warm off-white, project-lifecycle timeline */
.section-warm{ position:relative; overflow:hidden; background:#f4f3ee; border-block:1px solid #e6e4dc; }
.section-warm .geo-bg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.section-warm > .container{ position:relative; z-index:1; }
#needs .section-head h2{ color: var(--ink); }
#needs .section-head .lede{ color: var(--slate); }
#needs .outcome-card{ background:#fff; border:1px solid #e3e1d8; box-shadow: 0 1px 2px rgba(5,40,26,.04); padding: var(--space-7) var(--space-6); }
#needs .outcome-card h3{ color: var(--ink); }
#needs .outcome-card p{ color: var(--slate); }
#needs .outcome-num{ color: var(--green-600); font-size:.9rem; letter-spacing:.1em; }
#needs .outcome-card .link-arrow{ color: var(--green-700); }

.outcome-flow{ position:relative; padding-top: 44px; }
.outcome-flow::before{ content:''; position:absolute; top:13px; left:24px; right:0; height:1px; background: linear-gradient(90deg, var(--green-500), rgba(10,125,59,.25)); }
.outcome-flow::after{ content:''; position:absolute; top:9px; right:0; width:0; height:0; border-left:8px solid rgba(10,125,59,.45); border-top:4px solid transparent; border-bottom:4px solid transparent; }
.outcome-flow .outcome-card{ position:relative; }
.outcome-flow .outcome-card::before{ content:''; position:absolute; top:-37px; left:20px; width:15px; height:15px; border-radius:50%; background:#f4f3ee; border:2px solid var(--green-500); box-shadow: 0 0 0 4px #f4f3ee; }
.outcome-flow .outcome-card::after{ content:''; position:absolute; top:-22px; left:27px; width:1px; height:22px; background: rgba(10,125,59,.35); }
@media (max-width: 1000px){
  .outcome-flow{ grid-template-columns: 1fr; padding-top:0; padding-left: 40px; }
  .outcome-flow::before{ top:8px; bottom:8px; left:10px; right:auto; width:1px; height:auto; background: linear-gradient(180deg, var(--green-500), rgba(10,125,59,.25)); }
  .outcome-flow::after{ display:none; }
  .outcome-flow .outcome-card::before{ top:30px; left:-37px; }
  .outcome-flow .outcome-card::after{ top:37px; left:-22px; width:22px; height:1px; }
}


/* Our Approach to Project Delivery: pale sage-grey, technical workflow */
.section-cool{ position:relative; overflow:hidden; background:#eef2ef; border-block:1px solid #dde4df; }
.section-cool .geo-bg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.section-cool > .container{ position:relative; z-index:1; }
#approach .section-head h2{ color: var(--ink); }
#approach .section-head .lede{ color: var(--slate); }
#approach .stage-dashboard{ gap: var(--space-4); margin-top: 0; }
#approach .stage-track{ top:20px; left:20px; right:0; height:1px; background: linear-gradient(90deg, var(--green-500), rgba(10,125,59,.25)); border-radius:0; overflow:visible; }
#approach .stage-track-fill{ display:none; }
#approach .stage-item{ text-align:left; padding:64px 0 0; display:block; }
#approach .stage-dot{ position:absolute; top:0; left:0; margin:0; width:40px; height:40px; background:#eef2ef; border:1.5px solid var(--green-500); color: var(--green-600); font-size:.8rem; font-weight:700; letter-spacing:.04em; box-shadow:none; }
#approach .stage-item::after{ content:''; position:absolute; top:40px; left:20px; width:1px; height:24px; background: rgba(10,125,59,.35); }
#approach .stage-card{ height:100%; background:#fff; border:1px solid #dbe2dd; border-radius: var(--radius-md); padding: var(--space-6) var(--space-5); box-shadow: 0 1px 2px rgba(5,40,26,.04); }
#approach .stage-card h4{ color: var(--ink); font-size:1.02rem; line-height:1.3; }
#approach .stage-card p{ color: var(--slate); font-size:.92rem; line-height:1.6; margin-top:10px; }
@media (max-width: 1000px){
  #approach .stage-dashboard{ grid-template-columns: 1fr; gap: var(--space-5); padding-left:60px; }
  #approach .stage-track{ top:20px; bottom:20px; left:20px; right:auto; width:1px; height:auto; background: linear-gradient(180deg, var(--green-500), rgba(10,125,59,.25)); }
  #approach .stage-item{ display:block; padding:0; grid-template-columns:none; }
  #approach .stage-dot{ left:-60px; top:22px; }
  #approach .stage-item::after{ top:42px; left:-20px; width:20px; height:1px; }
}


/* Home: single welcoming screen with page-to-page navigation */
.hero.hero-home{ padding-top: 140px; padding-bottom: var(--space-6); align-items: flex-end; }
.hero-home .hero-top-row{ margin-bottom: var(--space-5); }
.hero-home .hero-foot{ margin-top: var(--space-5); }
.hero-explore{ display:grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); margin-top: var(--space-7); }
.explore-card{ display:flex; flex-direction:column; gap:6px; padding: var(--space-4) var(--space-5); background: rgba(255,255,255,.96); border:1px solid rgba(255,255,255,.6); border-radius: var(--radius-md); color: var(--ink); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.explore-card:hover{ transform: translateY(-3px); background:#fff; box-shadow: var(--shadow-md); }
.explore-kicker{ font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--green-600); }
.explore-title{ display:flex; align-items:center; gap:8px; font-family: var(--font-head); font-weight:700; font-size:1.1rem; }
.explore-title svg{ width:18px; height:18px; color: var(--green-600); transition: transform var(--dur-fast) var(--ease-out); }
.explore-card:hover .explore-title svg{ transform: translateX(4px); }
.explore-desc{ font-size:.85rem; line-height:1.45; color: var(--slate); }
@media (max-width: 1100px){ .hero-explore{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px){
  .hero.hero-home{ padding-top: 120px; }
  .hero-explore{ grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .explore-card{ padding: var(--space-3) var(--space-4); }
  .explore-desc{ display:none; }
  .explore-title{ font-size:1rem; }
}

/* Next-page band */
.next-page{ border-top:1px solid var(--line); background: var(--paper-soft); padding-block: var(--space-7); }
.next-page .container{ display:flex; align-items:center; flex-wrap:wrap; gap: var(--space-5); }
.next-kicker{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--slate); }
.next-link{ display:inline-flex; align-items:center; gap:12px; font-family: var(--font-head); font-weight:700; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--ink); }
.next-link svg{ width:28px; height:28px; color: var(--green-600); transition: transform var(--dur-fast) var(--ease-out); }
.next-link:hover svg{ transform: translateX(6px); }
.next-link:hover{ color: var(--green-700); }
.next-desc{ color: var(--slate); max-width:46ch; }

/* Home hero: compact enough to fit one laptop screen */
.hero-home .hero-title{ max-width: 22ch; font-size: clamp(2rem, 4.4vw, 3.7rem); line-height: 1.08; }
.hero-home .hero-foot{ gap: var(--space-5); }
.hero-home .hero-foot .lede{ font-size: clamp(.98rem, 1.25vw, 1.1rem); max-width: 62ch !important; }
.hero-home .hero-top-row{ margin-bottom: var(--space-4); }
.hero-home .hero-explore{ margin-top: var(--space-6); }
@media (min-width: 1000px) and (max-height: 820px){
  .hero.hero-home{ padding-top: 112px; padding-bottom: var(--space-5); }
  .hero-home .hero-foot .lede{ font-size: .98rem; line-height:1.5; }
  .hero-home .hero-explore{ margin-top: var(--space-5); }
  .explore-desc{ display:none; }
}