/* ==========================================================================
   Aura Environmental Services Pvt. Ltd. — Eco / Nature-forward design system
   Warm cream · greens + earth tones · organic curves · soft serif headlines
   ========================================================================== */

:root {
   /* ==========================================================================
      BRAND PALETTE — Aura Brand Guidelines v1.0, §3.1–3.2. Exact hexes.
        Deep Navy   #00255F  Primary — the anchor. Dominates the system.
        Forest      #12402C  Primary
        Signal Grn  #2E9E6A  Accent — used SPARINGLY: CTAs, data highlights,
                             and the "pass / compliant" state only.
        Mist        #EAF1EC  Neutral
        Paper       #F9FAF9  Neutral
        Ink         #0D0D0D  Neutral (text)
      Approved combinations (§3.3): Navy on Paper · White on Navy ·
      White on Forest · Navy on Mist.
      ========================================================================== */
   --cream: #F9FAF9;
   /* Paper */
   --cream-2: #EAF1EC;
   /* Mist  */
   --panel: #FFFFFF;

   --forest: #12402C;
   --forest-2: #1A5A3C;
   --green: #2E9E6A;
   /* Signal Green */
   --green-deep: #22795A;
   --green-ink: #1E7A52;
   /* Signal Green, darkened for small-text contrast */
   --sage: #C3CEDF;
   /* Deep Navy 25% tint — decorative */
   --sage-050: #EAF1EC;
   /* Mist */
   --navy-050: #EDF1F7;
   /* Deep Navy 8% tint */

   --ink: #00255F;
   /* Deep Navy */
   --ink-900: #0D0D0D;
   /* Ink */
   --body: #474C52;
   --muted: #878D95;
   --line: #DDE5E0;
   --line-2: #CBD6CF;

   --r-sm: 14px;
   --r: 22px;
   --r-lg: 34px;
   --r-xl: 48px;

   /* Shadows are navy-tinted so depth belongs to the navy system. */
   --shadow-sm: 0 2px 12px rgba(0, 37, 95, .06);
   --shadow: 0 18px 44px rgba(0, 37, 95, .10);
   --shadow-lg: 0 40px 80px rgba(0, 37, 95, .16);
   --shadow-green: 0 16px 40px rgba(46, 158, 106, .30);

   --container: 1200px;
   --gutter: clamp(20px, 4vw, 52px);
   --section-y: clamp(68px, 9vw, 80px);
   --nav-h: 80px;

   /* Brand typefaces — Space Grotesk (display) + Inter (body/data). Guidelines §4.1–4.2 */
   --font-head: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
   --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
   --ease: cubic-bezier(.22, 1, .36, 1);
}

@media (min-width:1400px) {
   :root {
      --container: 1380px;
   }
}

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

.skip-link:focus {
   position: fixed;
   top: 12px;
   left: 12px;
   z-index: 200;
   width: auto;
   height: auto;
   clip: auto;
   margin: 0;
   padding: 11px 18px;
   background: var(--forest);
   color: #fff;
   border-radius: 12px;
}

/* ---- Reset -------------------------------------------------------------- */
*,
*::before,
*::after {
   box-sizing: border-box;
}

* {
   margin: 0;
}

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
}

body {
   font-family: var(--font-body);
   color: var(--body);
   background: var(--cream);
   line-height: 1.62;
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   overflow-x: hidden;
}

img,
svg,
video {
   display: block;
   max-width: 100%;
}

a {
   color: var(--green-ink);
   text-decoration: none;
   transition: color .2s var(--ease);
}

ul {
   list-style: none;
   padding: 0;
}

button {
   font: inherit;
   cursor: pointer;
   border: 0;
   background: none;
   color: inherit;
}

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

::selection {
   background: rgba(46, 158, 91, .22);
}

/* ---- Typography (soft serif headings) ----------------------------------- */
h1,
h2,
h3,
h4 {
   font-family: var(--font-head);
   color: var(--ink);
   font-weight: 500;
   line-height: 1.08;
   letter-spacing: -.01em;
}

/* Display headings sit at Space Grotesk Regular (§4.3) — hierarchy comes from
   size, not weight. Fraunces needed heavier weights; the grotesk does not. */
h1 {
   font-size: clamp(42px, 5.6vw, 74px);
   font-weight: 400;
   line-height: 1.02;
}

h2 {
   font-size: clamp(32px, 4vw, 51px);
   font-weight: 400;
}

h3 {
   font-size: clamp(20px, 2vw, 25px);
}

/* Accent word in headings. Space Grotesk has no true italic — never fake one
   (browsers synthesise a distorted oblique). Colour carries the accent instead. */
.serif-i {
   color: var(--green-ink);
}

p {
   margin: 0 0 16px;
}

p:last-child {
   margin-bottom: 0;
}

strong {
   color: var(--ink);
   font-weight: 600;
}

/* ---- Layout ------------------------------------------------------------- */
.container {
   width: 100%;
   max-width: var(--container);
   margin-inline: auto;
   padding-inline: var(--gutter);
}

.section {
   padding: var(--section-y) 0;
   position: relative;
}

.section--cream2 {
   background: var(--cream-2);
}

.section--white {
   background: var(--panel);
}

.section--sage {
   background: var(--sage-050);
}

.section--forest {
   background: var(--forest);
   color: #c2d4c8;
}

.section--forest h2,
.section--forest h3,
.section--forest h4 {
   color: #fff;
}

.section-head {
   max-width: 720px;
   margin: 0 auto clamp(44px, 6vw, 46px);
   text-align: center;
}

.section-head.left {
   margin-inline: 0;
   text-align: left;
}

.section-head p {
   color: var(--muted);
   font-size: 17px;
   margin-top: 16px;
}

.section--forest .section-head p {
   color: #93a99b;
}

.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   font-family: var(--font-body);
   font-weight: 600;
   font-size: 13px;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--green-ink);
   margin-bottom: 18px;
}

.eyebrow svg {
   width: 17px;
   height: 17px;
}

.eyebrow.center {
   justify-content: center;
}

.section--forest .eyebrow {
   color: var(--sage);
}

.lede {
   font-size: clamp(18px, 1.5vw, 20px);
   color: var(--body);
   line-height: 1.55;
}

.section--forest .lede {
   color: #c2d4c8;
}

/* ---- Organic blob decorations ------------------------------------------- */
.blob {
   position: absolute;
   border-radius: 50%;
   filter: blur(70px);
   opacity: .55;
   z-index: 0;
   pointer-events: none;
}

.blob--sage {
   background: radial-gradient(circle, rgba(0, 37, 95, .14), transparent 70%);
}

.blob--green {
   background: radial-gradient(circle, rgba(46, 158, 106, .32), transparent 70%);
}

.blob--earth {
   background: radial-gradient(circle, rgba(46, 158, 106, .12), transparent 70%);
}

/* ---- Buttons ------------------------------------------------------------ */
/* Modern button system — each variant carries its own hover bg + text so
   contrast is always preserved. --bg / --fg / --bg-hover / --ring drive it. */
.btn {
   --bg: var(--green);
   --fg: #fff;
   --bg-hover: var(--green-deep);
   --glow: rgba(46, 158, 106, .5);
   position: relative;
   overflow: hidden;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   font-family: var(--font-head);
   font-weight: 500;
   font-size: 15px;
   letter-spacing: .012em;
   padding: 13px 26px;
   border: 1.6px solid transparent;
   border-radius: 12px;
   background: var(--bg);
   color: var(--fg);
   box-shadow: 0 2px 6px rgba(0, 37, 95, .16), inset 0 1px 0 rgba(255, 255, 255, .16);
   transition: transform .2s var(--ease), box-shadow .3s var(--ease),
      background .2s var(--ease), border-color .2s var(--ease), color .18s var(--ease);
   white-space: nowrap;
   cursor: pointer;
}

/* Diagonal shine that sweeps across on hover — sits below the label. */
.btn::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .18) 50%, transparent 68%);
   transform: translateX(-130%);
   transition: transform .6s var(--ease);
   pointer-events: none;
}

.btn:hover::before {
   transform: translateX(130%);
}

.btn:hover {
   background: var(--bg-hover);
   color: var(--fg);
   transform: translateY(-3px);
   box-shadow: 0 16px 30px -12px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.btn:active {
   transform: translateY(-1px) scale(.99);
   box-shadow: 0 6px 14px -8px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.btn:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--bg-hover);
}

.btn svg {
   width: 16px;
   height: 16px;
}

.btn i,
.btn svg {
   position: relative;
   transition: transform .25s var(--ease);
}

.btn:hover i,
.btn:hover svg {
   transform: scale(1.12);
}

.btn--lg {
   padding: 15px 30px;
   font-size: 16px;
   border-radius: 13px;
}

/* Solid dark green */
.btn--forest {
   --bg: var(--forest);
   --bg-hover: var(--green-deep);
   --glow: rgba(18, 64, 44, .5);
}

/* Navy — the "authority" solid action (brand leads with navy). */
.btn--navy {
   --bg: var(--ink);
   --bg-hover: #001A45;
   --glow: rgba(0, 37, 95, .55);
}

/* Cream — on dark backgrounds. Text stays ink on hover (was turning white). */
.btn--cream {
   --bg: var(--cream);
   --fg: var(--ink);
   --bg-hover: #fff;
   --glow: rgba(0, 0, 0, .28);
   box-shadow: 0 2px 6px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* Outline — on light backgrounds. Fills forest on hover. */
.btn--outline {
   --bg: transparent;
   --fg: var(--ink);
   --bg-hover: var(--ink);
   --glow: rgba(0, 37, 95, .4);
   border-color: var(--line-2);
   box-shadow: none;
}

.btn--outline:hover {
   color: #fff;
   border-color: var(--ink);
}

/* Ghost — on dark backgrounds */
.btn--ghost,
.btn--ghost-light {
   --bg: rgba(255, 255, 255, .12);
   --fg: #fff;
   --bg-hover: rgba(255, 255, 255, .22);
   --glow: rgba(0, 0, 0, .3);
   border-color: rgba(255, 255, 255, .4);
   box-shadow: none;
}

.btn--ghost:hover,
.btn--ghost-light:hover {
   color: #fff;
   border-color: rgba(255, 255, 255, .8);
}

.arrow-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: var(--font-body);
   font-weight: 600;
   font-size: 15px;
   color: var(--green-ink);
}

.arrow-link svg {
   width: 16px;
   height: 16px;
   transition: transform .2s var(--ease);
}

.arrow-link:hover svg {
   transform: translateX(5px);
}

.section--forest .arrow-link {
   color: var(--sage);
}

/* ---- Reveal ------------------------------------------------------------- */
.reveal {
   opacity: 0;
   transform: translateY(26px);
   transition: opacity .7s var(--ease), transform .7s var(--ease);
   transition-delay: calc(var(--d, 0) * 80ms);
}

.reveal.in {
   opacity: 1;
   transform: none;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
   position: fixed;
   inset: 0 0 auto 0;
   z-index: 100;
   height: var(--nav-h);
   display: flex;
   align-items: center;
   transition: background .3s var(--ease), box-shadow .3s var(--ease), height .3s;
}

.site-header .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
}

.site-header.scrolled {
   height: 68px;
   background: rgba(251, 248, 241, .88);
   backdrop-filter: saturate(150%) blur(14px);
   box-shadow: 0 8px 30px rgba(0, 37, 95, .07);
}

.brand {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
}

.brand img {
   height: 54px;
   width: auto;
}

.site-header.scrolled .brand img {
   height: 54px;
}

.nav {
   display: flex;
   align-items: center;
   gap: 2px;
}

.nav>li {
   position: relative;
}

.nav>li>a {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   font-family: var(--font-body);
   font-weight: 500;
   font-size: 15px;
   color: var(--ink);
   padding: 8px;
   border-radius: 10px;
   white-space: nowrap;
   transition: color .2s, background .2s;
}

.nav>li>a:hover {
   color: var(--green-ink);
   background: rgba(46, 158, 91, .08);
}

.nav .caret {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 13px;
   height: 13px;
   margin-top: 1px;
   opacity: .55;
   transition: transform .2s var(--ease);
}

.nav .caret i,
.nav .caret svg {
   font-size: 11px;
   width: 11px;
   height: 11px;
   line-height: 1;
}

.nav>li:hover .caret {
   transform: rotate(180deg);
}

.dropdown {
   position: absolute;
   top: calc(100% + 14px);
   left: 0;
   min-width: 300px;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--r);
   box-shadow: var(--shadow-lg);
   padding: 8px;
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
}

.nav>li:hover .dropdown,
.nav>li:focus-within .dropdown {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.dropdown::before {
   content: "";
   position: absolute;
   top: -14px;
   left: 0;
   right: 0;
   height: 14px;
}

.dropdown a {
   display: block;
   padding: 11px 14px;
   border-radius: 12px;
   font-size: 15px;
   font-weight: 500;
   color: var(--body);
   transition: background .18s, color .18s, padding .18s;
}

.dropdown a:hover {
   background: var(--sage-050);
   color: var(--ink);
   padding-left: 17px;
}

.nav-actions {
   display: flex;
   align-items: center;
   gap: 11px;
}

/* drawer-only footer block (shown inside the mobile nav drawer) */
.nav-cta {
   display: none;
}

.nav-toggle {
   display: none;
   width: 46px;
   height: 46px;
   border-radius: 12px;
   align-items: center;
   justify-content: center;
   color: var(--ink);
   position: relative;
   z-index: 96;
   /* sits above the open drawer (z-index 95) */
}

/* pure-CSS hamburger that animates to an X (no webfont dependency) */
.nav-toggle .burger,
.nav-toggle .burger::before,
.nav-toggle .burger::after {
   content: "";
   display: block;
   width: 24px;
   height: 2px;
   border-radius: 2px;
   background: currentColor;
   transition: transform .3s var(--ease), opacity .2s, background .2s;
}

.nav-toggle .burger {
   position: relative;
}

.nav-toggle .burger::before {
   position: absolute;
   left: 0;
   top: -7px;
}

.nav-toggle .burger::after {
   position: absolute;
   left: 0;
   top: 7px;
}

body.nav-open .nav-toggle .burger {
   background: transparent;
}

body.nav-open .nav-toggle .burger::before {
   transform: translateY(7px) rotate(45deg);
}

body.nav-open .nav-toggle .burger::after {
   transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
   position: relative;
   padding: calc(var(--nav-h) + clamp(40px, 6vw, 80px)) 0 clamp(60px, 8vw, 110px);
   overflow: hidden;
}

.hero .blob--1 {
   width: 620px;
   height: 620px;
   top: -160px;
   right: -120px;
}

.hero .blob--2 {
   width: 420px;
   height: 420px;
   bottom: -140px;
   left: -120px;
   opacity: .4;
}

.hero-grid {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: clamp(32px, 5vw, 64px);
   align-items: center;
}

.hero-pill {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: #fff;
   border: 1px solid var(--line);
   box-shadow: var(--shadow-sm);
   padding: 7px 15px 7px 11px;
   border-radius: 999px;
   font-size: 13px;
   font-weight: 600;
   color: var(--ink);
   margin-bottom: 24px;
}

.hero-pill svg {
   width: 16px;
   height: 16px;
   color: var(--green);
}

.hero h1 {
   color: var(--ink);
   margin-bottom: 21px;
}

.hero-sub {
   font-size: 19px;
   color: var(--body);
   max-width: 50ch;
   margin-bottom: 32px;
}

.hero-cta {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   margin-bottom: 35px;
}

.hero-trust {
   display: flex;
   align-items: center;
   gap: 22px;
   flex-wrap: wrap;
}

.hero-trust .t {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 500;
   color: var(--body);
}

.hero-trust svg {
   width: 20px;
   height: 20px;
   color: var(--green);
}

/* organic hero image */
.hero-media {
   position: relative;
}

.hero-photo {
   position: relative;
   border-radius: 56% 44% 55% 45% / 55% 52% 48% 45%;
   overflow: hidden;
   aspect-ratio: 1/1.02;
   box-shadow: var(--shadow-lg);
   background: linear-gradient(150deg, var(--sage-050), var(--navy-050));
   border: 6px solid #fff;
}

.hero-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.hero-photo .ph {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
   text-align: center;
   color: var(--green-ink);
   padding: 32px;
}

.hero-photo .ph svg {
   width: 64px;
   height: 64px;
   opacity: .5;
   margin: 0 auto 10px;
}

.hero-float {
   position: absolute;
   z-index: 2;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 20px;
   box-shadow: var(--shadow);
   padding: 14px 18px;
   display: flex;
   align-items: center;
   gap: 12px;
}

.hero-float .ic {
   width: 44px;
   height: 44px;
   border-radius: 14px;
   background: var(--sage-050);
   color: var(--ink);
   display: grid;
   place-items: center;
}

.hero-float .ic svg {
   width: 22px;
   height: 22px;
}

.hero-float .n {
   font-family: var(--font-head);
   font-weight: 600;
   font-size: 20px;
   color: var(--ink);
   line-height: 1;
}

.hero-float .l {
   font-size: 12px;
   color: var(--muted);
}

.hero-float--1 {
   top: 6%;
   left: -26px;
   animation: bob 6s ease-in-out infinite;
}

.hero-float--2 {
   bottom: 8%;
   right: -22px;
   animation: bob 6s ease-in-out infinite 1.2s;
}

@keyframes bob {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-12px)
   }
}

.leaf-badge {
   position: absolute;
   top: -18px;
   right: 14%;
   z-index: 2;
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: var(--green);
   color: #fff;
   display: grid;
   place-items: center;
   box-shadow: var(--shadow-green);
   animation: bob 7s ease-in-out infinite .6s;
}

.leaf-badge svg {
   width: 30px;
   height: 30px;
}

/* ==========================================================================
   CLIENT MARQUEE
   ========================================================================== */
.marquee-wrap {
   padding: 8px 0 clamp(16px, 3vw, 30px);
}

.marquee-label {
   text-align: center;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--muted);
   margin-bottom: 27px;
}

.marquee {
   overflow: hidden;
   padding: 40px 0;
   mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee-track {
   display: flex;
   gap: 22px;
   align-items: center;
   width: max-content;
   animation: marquee 46s linear infinite;
}

.marquee:hover .marquee-track {
   animation-play-state: paused;
}

@keyframes marquee {
   to {
      transform: translateX(-50%);
   }
}

.client {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 188px;
   height: 92px;
   padding: 0px;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--r);
   box-shadow: var(--shadow-sm);
   transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

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

.client img {
   max-height: 60px;
   max-width: 160px;
   width: auto;
   object-fit: contain;
}

.client .wordmark {
   font-family: var(--font-head);
   font-weight: 600;
   font-size: 19px;
   color: var(--ink);
   white-space: nowrap;
}

/* ==========================================================================
   ABOUT / FOUNDER
   ========================================================================== */
.about-grid {
   display: grid;
   grid-template-columns: .92fr 1.08fr;
   gap: clamp(36px, 5vw, 80px);
   align-items: center;
}

.founder-media {
   position: relative;
   padding: 10px 12px 16px 12px;
}

/* soft brand glow behind the portrait */
.founder-glow {
   position: absolute;
   inset: -5% -3% 5% -7%;
   z-index: 0;
   background: radial-gradient(58% 58% at 42% 36%, rgba(46, 158, 91, .18), transparent 72%);
   pointer-events: none;
}

/* offset accent frame (gallery style) */
.founder-frame {
   position: absolute;
   inset: 30px -10px -12px 30px;
   z-index: 0;
   border: 2px solid var(--green);
   border-radius: 44% 44% 26px 26px;
   opacity: .5;
   pointer-events: none;
}

/* dotted accent */
.founder-dots {
   position: absolute;
   top: -8px;
   left: -8px;
   width: 92px;
   height: 92px;
   z-index: 0;
   background-image: radial-gradient(var(--sage) 2px, transparent 2px);
   background-size: 14px 14px;
   opacity: .85;
   pointer-events: none;
}

/* editorial arch portrait */
.founder-photo {
   position: relative;
   z-index: 1;
   border-radius: 44% 44% 26px 26px;
   overflow: hidden;
   aspect-ratio: 1/1.16;
   box-shadow: var(--shadow-lg);
   border: 6px solid #fff;
   background: linear-gradient(150deg, var(--sage-050), var(--navy-050));
}

.founder-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top;
}

.founder-photo::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(180deg, transparent 58%, rgba(0, 37, 95, .24));
   pointer-events: none;
}

.founder-photo .ph {
   position: absolute;
   inset: 0;
   z-index: 2;
   display: grid;
   place-items: center;
   text-align: center;
   color: var(--green-ink);
   padding: 32px;
}

.founder-photo .ph svg {
   width: 56px;
   height: 56px;
   opacity: .5;
   margin: 0 auto 10px;
}

/* floating brand badge */
.founder-badge {
   position: absolute;
   top: 6px;
   right: -2px;
   z-index: 3;
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: linear-gradient(150deg, var(--green), var(--green-deep));
   color: #fff;
   display: grid;
   place-items: center;
   box-shadow: var(--shadow-green);
   border: 4px solid var(--cream);
   animation: bob 6s ease-in-out infinite;
}

.founder-badge i {
   font-size: 26px;
}

/* refined glassy name plate */
.founder-card {
   position: absolute;
   bottom: 8%;
   left: -14px;
   z-index: 3;
   display: flex;
   align-items: center;
   gap: 14px;
   background: rgba(255, 255, 255, .9);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, .7);
   border-radius: 18px;
   box-shadow: var(--shadow-lg);
   padding: 13px 16px;
}

.founder-card .founder-line {
   width: 4px;
   align-self: stretch;
   border-radius: 4px;
   background: linear-gradient(var(--green), var(--green-deep));
   flex-shrink: 0;
}

.founder-card .nm {
   display: block;
   font-family: var(--font-head);
   font-weight: 600;
   color: var(--ink);
   font-size: 16px;
}

.founder-card .ro {
   display: block;
   font-size: 13px;
   color: var(--muted);
}

.founder-card .founder-linkedin {
   width: 40px;
   height: 40px;
   border-radius: 11px;
   background: var(--sage-050);
   color: var(--ink);
   display: grid;
   place-items: center;
   flex-shrink: 0;
   margin-left: 4px;
   transition: background .2s, color .2s, transform .2s;
}

.founder-card .founder-linkedin:hover {
   background: var(--green);
   color: #fff;
   transform: translateY(-2px);
}

.founder-card .founder-linkedin i {
   font-size: 16px;
}

@media (max-width: 560px) {
   .founder-card {
      left: 0;
      bottom: -2%;
   }

   .founder-frame {
      inset: 24px -4px -6px 24px;
   }

   .founder-badge {
      width: 56px;
      height: 56px;
   }

   .founder-badge i {
      font-size: 22px;
   }
}

.about-stats {
   display: flex;
   gap: 42px;
   margin: 32px 0;
   flex-wrap: wrap;
}

.about-stat .n {
   font-family: var(--font-head);
   font-weight: 600;
   font-size: clamp(34px, 3vw, 43px);
   color: var(--green-ink);
   line-height: 1;
}

.about-stat .l {
   font-size: 14px;
   color: var(--muted);
   margin-top: 6px;
   max-width: 16ch;
}

.cred-list {
   display: grid;
   gap: 14px;
   margin-top: 24px;
}

.cred-list li {
   display: flex;
   align-items: center;
   gap: 12px;
   font-weight: 500;
   color: var(--ink);
}

.cred-list .ck {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--sage-050);
   color: var(--green-ink);
   display: grid;
   place-items: center;
   flex-shrink: 0;
}

.cred-list .ck svg {
   width: 16px;
   height: 16px;
}

/* ==========================================================================
   SERVICES (organic rounded cards)
   ========================================================================== */
.svc-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}

.svc {
   position: relative;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--r-lg);
   padding: 32px;
   transition: transform .26s var(--ease), box-shadow .26s var(--ease);
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

.svc:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-lg);
}

.svc .ic {
   width: 60px;
   height: 60px;
   border-radius: 20px;
   background: var(--sage-050);
   color: var(--ink);
   display: grid;
   place-items: center;
   margin-bottom: 21px;
   transition: background .26s, color .26s, transform .26s;
}

.svc:hover .ic {
   background: var(--green);
   color: #fff;
   transform: rotate(-8deg);
}

.svc .ic svg {
   width: 28px;
   height: 28px;
}

.svc h3 {
   font-size: 21px;
   margin-bottom: 8px;
}

.svc h3 a {
   color: var(--ink);
}

.svc:hover h3 a {
   color: var(--green-ink);
}

.svc p {
   font-size: 15px;
   color: var(--body);
   flex: 1;
}

.svc .more {
   margin-top: 19px;
}

.svc--feature {
   grid-column: span 1;
   grid-row: span 2;
   background: linear-gradient(165deg, var(--forest), var(--forest-2));
   border-color: transparent;
   color: #c2d4c8;
}

.svc--feature .ic {
   background: rgba(255, 255, 255, .14);
   color: #fff;
}

.svc--feature:hover .ic {
   background: var(--green);
   color: #fff;
}

.svc--feature h3 {
   color: #fff;
   font-size: clamp(24px, 2.2vw, 30px);
}

/* Links inside the dark feature card must read white, not the default dark green. */
.svc--feature h3 a {
   color: #fff;
}

.svc--feature .arrow-link {
   color: #fff;
}

.svc--feature .arrow-link:hover {
   color: var(--sage);
}

.svc--feature p {
   color: #a7c0b1;
}

.svc--feature .blob {
   width: 280px;
   height: 280px;
   right: -90px;
   bottom: -110px;
   opacity: .4;
}

.svc--cta {
   background: linear-gradient(160deg, var(--green), var(--green-deep));
   border-color: transparent;
   color: #eafff2;
   justify-content: center;
}

.svc--cta .ic {
   background: rgba(255, 255, 255, .2);
   color: #fff;
}

.svc--cta:hover .ic {
   background: #fff;
   color: var(--green-deep);
}

.svc--cta h3 {
   color: #fff;
}

.svc--cta p {
   color: rgba(255, 255, 255, .9);
}

.svc--cta .arrow-link {
   color: #fff;
}

/* ---- Exceptional Offerings — "periodic table" of products -------------- */
.el-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   gap: 14px;
   margin-top: 14px;
}

.el {
   position: relative;
   display: flex;
   flex-direction: column;
   aspect-ratio: 1 / 1.08;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 18px;
   padding: 15px 16px 16px;
   overflow: hidden;
   cursor: pointer;
   text-align: left;
   transition: transform .26s var(--ease), box-shadow .26s var(--ease),
      background .26s var(--ease), border-color .26s var(--ease);
}

.el:focus-visible {
   outline: 2px solid var(--green);
   outline-offset: 3px;
}

.el-go {
   position: absolute;
   right: 15px;
   bottom: 15px;
   font-size: 14px;
   color: #eafff2;
   opacity: 0;
   transform: translateX(-5px);
   transition: opacity .26s var(--ease), transform .26s var(--ease);
}

.el:hover .el-go {
   opacity: 1;
   transform: none;
}

.el:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-lg);
   border-color: transparent;
   background: linear-gradient(165deg, var(--forest), var(--green-deep, #0c3020));
}

.el-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.el-num {
   font-family: var(--font-head);
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .06em;
   color: var(--muted);
   transition: color .26s var(--ease);
}

.el-ic {
   font-size: 18px;
   line-height: 1;
   color: var(--green-ink);
   opacity: .7;
   transition: color .26s var(--ease), opacity .26s var(--ease);
}

.el-sym {
   font-family: var(--font-head);
   font-weight: 600;
   font-size: clamp(30px, 3.2vw, 40px);
   line-height: 1;
   letter-spacing: -.02em;
   color: var(--forest);
   margin: 16px 0 auto;
   transition: color .26s var(--ease);
}

.el-name {
   margin: 0;
   padding-right: 18px;
   font-family: var(--font-body);
   font-size: 13px;
   font-weight: 600;
   line-height: 1.28;
   color: var(--ink);
   transition: color .26s var(--ease);
}

.el-note {
   display: block;
   font-size: 11px;
   font-weight: 500;
   letter-spacing: .04em;
   color: var(--muted);
   margin-top: 3px;
   transition: color .26s var(--ease);
}

.el:hover .el-sym {
   color: #fff;
}

.el:hover .el-name {
   color: #eafff2;
}

.el:hover .el-num {
   color: rgba(255, 255, 255, .55);
}

.el:hover .el-note {
   color: rgba(234, 255, 242, .7);
}

.el:hover .el-ic {
   color: var(--sage);
   opacity: 1;
}

.offer-cta {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 14px 24px;
   margin-top: 40px;
   text-align: center;
}

.offer-cta p {
   margin: 0;
   color: var(--body);
   font-size: 16px;
}

/* ---- Offerings detail modal -------------------------------------------- */
.el-modal[hidden] {
   display: none;
}

.el-modal {
   position: fixed;
   inset: 0;
   z-index: 1200;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
}

.el-modal__backdrop {
   position: absolute;
   inset: 0;
   background: rgba(0, 37, 95, .55);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   animation: elFade .25s ease;
}

.el-modal__card {
   position: relative;
   z-index: 1;
   display: flex;
   width: 100%;
   max-width: 900px;
   height: min(600px, calc(100vh - 40px));
   overflow: hidden;
   background: #fff;
   border-radius: 22px;
   box-shadow: 0 30px 60px -20px rgba(0, 37, 95, .45);
   animation: elPop .32s cubic-bezier(.16, 1, .3, 1);
}

/* LEFT column: product details flowing into the inline enquiry form.
   Scrolls internally with a fully hidden scrollbar. */
.el-modal__scroll {
   flex: 1 1 auto;
   min-width: 0;
   overflow-y: auto;
   padding: 32px 34px;
   scrollbar-width: none;
   /* Firefox */
   -ms-overflow-style: none;
   /* legacy Edge */
}

.el-modal__scroll::-webkit-scrollbar {
   width: 0;
   height: 0;
   display: none;
   /* Chrome / Safari / Edge */
}

@keyframes elFade {
   from { opacity: 0 }
   to { opacity: 1 }
}

@keyframes elPop {
   from { opacity: 0; transform: translateY(16px) scale(.97) }
   to { opacity: 1; transform: none }
}

.el-modal__close {
   position: absolute;
   top: 14px;
   right: 14px;
   z-index: 2;
   width: 38px;
   height: 38px;
   border: 1px solid var(--line);
   border-radius: 50%;
   background: var(--sage-050);
   color: var(--forest);
   display: grid;
   place-items: center;
   font-size: 16px;
   cursor: pointer;
   box-shadow: 0 4px 12px rgba(0, 37, 95, .12);
   transition: background .2s, color .2s, border-color .2s, transform .2s;
}

.el-modal__close:hover {
   background: var(--green);
   color: #fff;
   border-color: transparent;
   transform: rotate(90deg);
}

/* RIGHT column: product image on a clean white panel */
.el-modal__media {
   position: relative;
   flex: 0 0 42%;
   align-self: stretch;
   background: #fff;
   overflow: hidden;
   border-left: 1px solid var(--line);
}

.el-modal__img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   /* never crop the product */
   padding: 20px;
   display: block;
}

.el-modal__ph {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
   color: var(--green-ink);
   background:
      radial-gradient(120% 120% at 100% 0%, rgba(46, 158, 106, .12), transparent 60%),
      var(--sage-050);
}

.el-modal__ph i {
   opacity: .8;
}

.el-modal__ph span {
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--muted);
}

.el-modal__body {
   padding: 0;
}

.el-modal__note2 {
   display: block;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--green-ink);
   margin-bottom: 5px;
}

.el-modal__note2:empty {
   display: none;
}

.el-modal__body h3 {
   margin: 0 0 14px;
   font-size: clamp(21px, 2.4vw, 26px);
   line-height: 1.2;
   color: var(--forest);
}

.el-modal__desc {
   margin: 0 0 20px;
   color: var(--body);
   font-size: 15.5px;
   line-height: 1.62;
}

.el-modal__points {
   list-style: none;
   margin: 0 0 26px;
   padding: 0;
   display: grid;
   gap: 12px;
}

.el-modal__points li {
   position: relative;
   padding-left: 30px;
   color: var(--ink);
   font-size: 14.5px;
   line-height: 1.5;
}

.el-modal__points li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 1px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--sage-050);
}

.el-modal__points li::after {
   content: "\2713";
   position: absolute;
   left: 5px;
   top: 0;
   font-size: 12px;
   font-weight: 700;
   color: var(--green-ink);
}

/* "Scroll down to enquire" cue at the end of the details */
.el-modal__scrollcue {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   margin: 2px 0 0;
   color: var(--green-ink);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   user-select: none;
}

.el-modal__scrollcue i {
   animation: elCueBounce 1.6s ease-in-out infinite;
}

@keyframes elCueBounce {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(3px); }
}

/* Inline enquiry form section */
.el-modal__enquiry {
   margin-top: 28px;
   padding-top: 26px;
   border-top: 1px solid var(--line);
}

.el-modal__enquiry-head {
   margin-bottom: 16px;
}

.el-modal__enquiry-head h4 {
   margin: 4px 0 6px;
   font-family: var(--font-head);
   font-weight: 600;
   font-size: 20px;
   color: var(--forest);
}

.el-modal__enquiry-head p {
   margin: 0;
   color: var(--body);
   font-size: 14px;
   line-height: 1.55;
}

/* Stack to a single column on narrow screens (image on top) */
@media (max-width: 760px) {
   .el-modal__card {
      flex-direction: column;
      height: auto;
      max-height: calc(100vh - 32px);
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
   }

   .el-modal__card::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
   }

   .el-modal__media {
      order: -1;
      flex: none;
      width: 100%;
      aspect-ratio: 4 / 3;
      border-left: none;
      border-bottom: 1px solid var(--line);
   }

   .el-modal__scroll {
      overflow: visible;
      padding: 24px 22px 28px;
   }
}

/* ---- Manual Google reviews --------------------------------------------- */
.reviews-summary {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 14px 26px;
   margin-bottom: clamp(30px, 4vw, 44px);
}

.rs-num {
   font-family: var(--font-head);
   font-size: 48px;
   font-weight: 600;
   line-height: 1;
   color: var(--forest);
}

.rs-block {
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.rs-stars {
   font-size: 22px;
   letter-spacing: 3px;
}

.rs-sub {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-size: 14px;
   color: var(--muted);
}

.rs-cta {
   margin-left: 6px;
}

.rs-cta .google-g {
   margin-right: 2px;
}

.google-g {
   flex-shrink: 0;
   vertical-align: middle;
}

.reviews-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   grid-auto-rows: 1fr;
   /* every card equal height */
   gap: 20px;
}

.review {
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 22px 22px 20px;
   transition: box-shadow .24s var(--ease), transform .24s var(--ease), border-color .24s var(--ease);
}

.review:hover {
   transform: translateY(-5px);
   box-shadow: 0 18px 38px rgba(0, 37, 95, .16);
   border-color: transparent;
}

.review-top {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 13px;
}

.review-avatar {
   flex-shrink: 0;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   color: #fff;
   font-family: var(--font-head);
   font-weight: 600;
   font-size: 18px;
}

.review-id {
   display: flex;
   flex-direction: column;
   min-width: 0;
}

.review-name {
   font-weight: 600;
   font-size: 15px;
   color: var(--ink);
}

.review-meta {
   font-size: 12.5px;
   color: var(--muted);
}

.review-g {
   margin-left: auto;
   flex-shrink: 0;
   line-height: 1;
}

.review-stars {
   display: block;
   color: #F5A623;
   font-size: 15px;
   letter-spacing: 1.5px;
   line-height: 1;
   margin-bottom: 10px;
}

.review-stars .star-empty {
   color: #e3e3e3;
}

.review-text {
   margin: 0;
   font-size: 14.5px;
   line-height: 1.6;
   color: var(--body);
}

/* ---- Reviews slider (homepage) ----------------------------------------- */
.reviews-slider {
   position: relative;
}

/* Desktop: reserve side gutters so the arrows sit clear of the cards. */
@media (min-width: 561px) {
   .reviews-slider {
      padding-inline: 64px;
   }
}

.rs-track {
   display: flex;
   align-items: stretch;
   /* equal-height cards */
   gap: 20px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   /* generous vertical padding so the hover lift + shadow aren't clipped */
   padding: 28px 6px 52px;
   scrollbar-width: none;
   -ms-overflow-style: none;
}

.rs-track::-webkit-scrollbar {
   display: none;
}

.reviews-slider .review {
   flex: 0 0 calc((100% - 40px) / 3);
   /* 3 per view (two 20px gaps) */
   scroll-snap-align: start;
   margin: 0;
}

/* Slider controls */
.rs-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: #fff;
   border: 1px solid var(--line);
   color: var(--forest);
   display: grid;
   place-items: center;
   font-size: 17px;
   cursor: pointer;
   z-index: 3;
   box-shadow: 0 10px 26px rgba(0, 37, 95, .16);
   transition: background .24s var(--ease), color .24s var(--ease),
      border-color .24s var(--ease), box-shadow .24s var(--ease),
      transform .24s var(--ease), opacity .24s var(--ease);
}

.rs-prev {
   left: 4px;
}

.rs-next {
   right: 4px;
}

.rs-arrow:hover:not(:disabled) {
   background: linear-gradient(165deg, var(--green), var(--green-deep, #0c3020));
   color: #fff;
   border-color: transparent;
   transform: translateY(-50%) scale(1.09);
   box-shadow: 0 16px 34px rgba(46, 158, 106, .42);
}

.rs-arrow:active:not(:disabled) {
   transform: translateY(-50%) scale(1.02);
}

.rs-arrow:disabled {
   opacity: .3;
   cursor: default;
   box-shadow: 0 6px 14px rgba(0, 37, 95, .08);
}

@media (max-width: 900px) {
   .reviews-slider .review {
      flex-basis: calc((100% - 20px) / 2);
   }
}

@media (max-width: 560px) {
   .reviews-slider .review {
      flex-basis: 86%;
   }

   .rs-arrow {
      display: none;
   }
}

/* ==========================================================================
   PROCESS + STATS (forest section)
   ========================================================================== */
.statband {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
   margin-bottom: clamp(52px, 7vw, 84px);
}

.statband .s {
   text-align: center;
   position: relative;
   padding: 8px;
}

.statband .s:not(:last-child)::after {
   content: "";
   position: absolute;
   right: 0;
   top: 16%;
   height: 68%;
   width: 1px;
   background: rgba(255, 255, 255, .12);
}

.statband .num {
   font-family: var(--font-head);
   font-weight: 600;
   font-size: clamp(37px, 4.4vw, 54px);
   color: #fff;
   line-height: 1;
}

.statband .num .accent {
   color: var(--sage);
}

.statband .lbl {
   margin-top: 10px;
   color: #93a99b;
   font-size: 15px;
}

.steps {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 26px;
}

.steps--5 {
   grid-template-columns: repeat(5, 1fr);
}

.step {
   position: relative;
}

.step .num {
   width: 58px;
   height: 58px;
   border-radius: 20px;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .14);
   color: #fff;
   display: grid;
   place-items: center;
   font-family: var(--font-head);
   font-weight: 600;
   font-size: 22px;
   margin-bottom: 19px;
}

.step:first-child .num {
   background: var(--green);
   border-color: transparent;
}

.step h4 {
   color: #fff;
   font-size: 19px;
   margin-bottom: 8px;
}

.step p {
   color: #93a99b;
   font-size: 15px;
}

.step:not(:last-child)::after {
   content: "";
   position: absolute;
   top: 29px;
   left: 72px;
   right: -26px;
   height: 2px;
   background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 8px, transparent 8px 16px);
}

/* ==========================================================================
   DOMAINS (sage section)
   ========================================================================== */
.domains {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 19px;
}

.domain {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--r);
   padding: 24px;
   transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}

.domain:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow);
}

.domain .ic {
   width: 50px;
   height: 50px;
   border-radius: 16px;
   background: var(--sage-050);
   color: var(--ink);
   display: grid;
   place-items: center;
   margin-bottom: 16px;
}

.domain .ic svg {
   width: 24px;
   height: 24px;
}

.domain h4 {
   font-size: 17px;
   margin-bottom: 5px;
}

.domain p {
   font-size: 13px;
   color: var(--muted);
   line-height: 1.5;
}

/* ==========================================================================
   CASE STUDIES
   ========================================================================== */
.cases {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 26px;
}

.case {
   position: relative;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--r-lg);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   transition: transform .26s var(--ease), box-shadow .26s var(--ease);
   display: flex;
   flex-direction: column;
}

.case:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-lg);
}

.case .cover {
   aspect-ratio: 4 / 3;
   position: relative;
   overflow: hidden;
   background: linear-gradient(150deg, var(--sage), var(--green-deep));
}

.case .cover img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s var(--ease);
}

.case:hover .cover img {
   transform: scale(1.06);
}

/* When a real photo is present: hide the decorative watermark, add a subtle depth overlay */
.case .cover:has(img) .wm {
   display: none;
}

.case .cover:has(img)::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(180deg, rgba(0, 37, 95, 0) 45%, rgba(0, 37, 95, .42));
}

.case .cover .tag {
   position: absolute;
   top: 14px;
   left: 14px;
   z-index: 2;
   background: rgba(255, 255, 255, .9);
   color: var(--ink);
   font-size: 12px;
   font-weight: 600;
   padding: 6px 13px;
   border-radius: 999px;
}

.case .cover .wm {
   position: absolute;
   right: -12px;
   bottom: -20px;
   z-index: 1;
   color: rgba(255, 255, 255, .28);
}

.case .cover .wm svg {
   width: 130px;
   height: 130px;
}

.case .body {
   padding: 30px 28px 28px;
   display: flex;
   flex-direction: column;
   flex: 1;
}

.case .body .meta {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--muted);
   margin-bottom: 10px;
}

.case .body .meta .cat {
   color: var(--green-ink);
   font-weight: 600;
}

.case h3 {
   font-size: 20px;
   line-height: 1.32;
   letter-spacing: -.01em;
   margin-bottom: 14px;
}

/* Homepage case teasers use short titles kept to a single line. */
.cases--home .case h3 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.case h3 a {
   color: var(--ink);
}

.case:hover h3 a {
   color: var(--green-ink);
}

.case p {
   font-size: 15px;
   line-height: 1.62;
   color: var(--body);
   flex: 1;
}

.case .more {
   margin-top: 24px;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
/* testimonials slider */
.tslider {
   position: relative;
}

.tslider-track {
   display: flex;
   gap: 26px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   padding: 6px 2px 14px;
   scrollbar-width: none;
   -ms-overflow-style: none;
}

.tslider-track::-webkit-scrollbar {
   display: none;
}

.tslider .tcard {
   flex: 0 0 calc((100% - 51px) / 3);
   scroll-snap-align: start;
}

.tslider-nav {
   display: flex;
   justify-content: center;
   gap: 12px;
   margin-top: 34px;
}

.tslider-btn {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: 1px solid var(--line);
   background: #fff;
   color: var(--forest);
   display: grid;
   place-items: center;
   cursor: pointer;
   transition: background .2s, color .2s, transform .2s, border-color .2s;
}

.tslider-btn:hover {
   background: var(--green);
   border-color: var(--green);
   color: #fff;
   transform: translateY(-2px);
}

.tslider-btn i {
   font-size: 16px;
}

.tcard {
   position: relative;
   background: var(--cream);
   border: 1px solid var(--line);
   border-radius: var(--r-lg);
   padding: 32px;
   display: flex;
   flex-direction: column;
}

.tcard .quote {
   font-family: var(--font-head);
   font-size: 48px;
   line-height: 1;
   color: var(--sage);
   margin-bottom: 6px;
}

.tcard blockquote {
   font-size: 17px;
   color: var(--ink);
   line-height: 1.55;
   flex: 1;
}

.tcard .who {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-top: 24px;
   padding-top: 21px;
   border-top: 1px solid var(--line);
}

.tcard .who .av {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: var(--forest);
   color: #fff;
   display: grid;
   place-items: center;
   font-family: var(--font-head);
   font-weight: 600;
   font-size: 15px;
   flex-shrink: 0;
}

.tcard .who .nm {
   display: block;
   font-family: var(--font-head);
   font-weight: 600;
   color: var(--ink);
   font-size: 16px;
}

.tcard .who .og {
   display: block;
   font-size: 13px;
   color: var(--muted);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
   max-width: 840px;
   margin-inline: auto;
   display: grid;
   gap: 14px;
}

.faq-item {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--r);
   overflow: hidden;
   transition: box-shadow .2s var(--ease), border-color .2s;
}

.faq-item[open] {
   box-shadow: var(--shadow);
   border-color: var(--sage);
}

.faq-item summary {
   list-style: none;
   cursor: pointer;
   position: relative;
   padding: 20px 60px 20px 26px;
   font-family: var(--font-head);
   font-weight: 600;
   color: var(--ink);
   font-size: 18px;
   line-height: 1.45;
}

.faq-item summary::-webkit-details-marker {
   display: none;
}

.faq-item summary::-webkit-details-marker {
   display: none;
}

.faq-item .plus {
   position: absolute;
   right: 24px;
   top: 50%;
   transform: translateY(-50%);
   width: 26px;
   height: 26px;
}

.faq-item .plus::before,
.faq-item .plus::after {
   content: "";
   position: absolute;
   background: var(--green-ink);
   border-radius: 2px;
   transition: transform .25s var(--ease);
}

.faq-item .plus::before {
   top: 12px;
   left: 4px;
   width: 18px;
   height: 2px;
}

.faq-item .plus::after {
   top: 4px;
   left: 12px;
   width: 2px;
   height: 18px;
}

.faq-item[open] .plus::after {
   transform: rotate(90deg);
   opacity: 0;
}

.faq-item .faq-body {
   padding: 0 26px 22px;
   color: var(--body);
   font-size: 16px;
   line-height: 1.6;
}

/* ==========================================================================
   CTA (green organic panel)
   ========================================================================== */
.cta-wrap {
   padding: 0 var(--gutter) clamp(60px, 8vw, 110px);
}

.cta {
   position: relative;
   overflow: hidden;
   background: linear-gradient(150deg, var(--green-deep), var(--forest));
   color: #d7e8dd;
   border-radius: var(--r-xl);
   padding: clamp(48px, 7vw, 88px) clamp(28px, 5vw, 72px);
   max-width: var(--container);
   margin-inline: auto;
}

.cta .blob--1 {
   width: 420px;
   height: 420px;
   top: -160px;
   right: -120px;
   opacity: .5;
}

.cta .blob--2 {
   width: 320px;
   height: 320px;
   bottom: -160px;
   left: -100px;
   opacity: .35;
}

.cta-inner {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: 1.5fr auto;
   gap: 35px;
   align-items: center;
}

.cta .eyebrow {
   color: #a7d8b9;
}

.cta-inner h2 {
   color: #fff;
   margin-bottom: 10px;
}

.cta-inner p {
   color: rgba(255, 255, 255, .85);
   max-width: 52ch;
}

.cta-actions {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
}

/* ==========================================================================
   FOOTER (forest)
   ========================================================================== */
/* ===================== Footer (redesigned) ===================== */
.site-footer {
   background: linear-gradient(165deg, #00255F 0%, #001631 100%);
   color: #9db0c6;
   font-size: 15px;
   padding: clamp(52px, 7vw, 88px) 0 26px;
}

/* --- brand bar --- */
.footer-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 22px;
   padding-bottom: 30px;
   border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.footer-logo img {
   height: 74px;
   width: auto;
   display: block;
}

.footer-social {
   display: flex;
   gap: 10px;
}

.footer-social a {
   width: 42px;
   height: 42px;
   border-radius: 12px;
   background: rgba(255, 255, 255, .06);
   display: grid;
   place-items: center;
   color: #d7e8dd;
   transition: background .2s var(--ease), transform .2s var(--ease), color .2s;
}

.footer-social a:hover {
   background: var(--green);
   color: #fff;
   transform: translateY(-3px);
}

.footer-social i {
   font-size: 18px;
}

/* --- large tagline --- */
.footer-tagline {
   font-family: var(--font-head);
   font-weight: 400;
   font-size: clamp(26px, 3.6vw, 44px);
   line-height: 1.12;
   letter-spacing: -.01em;
   color: #e6edf6;
   max-width: 20ch;
   margin: clamp(32px, 4vw, 50px) 0 clamp(38px, 5vw, 56px);
}

.footer-tagline span {
   color: var(--green);
}

/* --- link + contact columns --- */
.footer-cols {
   display: grid;
   grid-template-columns: 1fr 1fr .85fr 1fr 1.5fr;
   gap: 40px 34px;
   padding-bottom: clamp(38px, 4vw, 54px);
}

.footer-col h4 {
   color: #fff;
   font-family: var(--font-body);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .14em;
   text-transform: uppercase;
   margin-bottom: 20px;
}

.footer-col ul {
   list-style: none;
   display: grid;
   gap: 11px;
   margin: 0;
   padding: 0;
}

.footer-col a {
   color: #9fb4a6;
   transition: color .18s var(--ease);
}

.footer-col ul li a:hover {
   color: #fff;
}

/* --- contact block --- */
.footer-contact {
   gap: 14px;
}

.footer-contact li {
   display: flex;
   gap: 11px;
   align-items: flex-start;
}

.footer-contact i {
   font-size: 16px;
   color: var(--sage);
   flex-shrink: 0;
   margin-top: 3px;
}

.footer-contact a,
.footer-contact span {
   color: #cdddd2;
}

.footer-contact a:hover {
   color: #fff;
}

.footer-badges {
   display: flex;
   align-items: center;
   gap: 18px;
   margin-top: 24px;
}

.footer-badges img {
   height: 52px;
   width: auto;
   opacity: .92;
}

/* --- bottom bar --- */
.footer-bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px 22px;
   padding-top: 24px;
   border-top: 1px solid rgba(255, 255, 255, .1);
   font-size: 13px;
   color: #7d9488;
}

.footer-copy {
   color: #9db3a6;
}

.footer-copy strong {
   color: #e6efe9;
   font-weight: 600;
}

.footer-legal {
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
}

.footer-legal a {
   color: #8ea69a;
   transition: color .2s ease;
}

.footer-legal a:hover {
   color: #fff;
}

.footer-credit {
   color: #8ea69a;
}

.footer-credit a {
   color: #cbd6e6;
   font-weight: 600;
   transition: color .2s ease;
}

.footer-credit a:hover {
   color: #fff;
}

.fab-call {
   display: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px) {
   .hero-grid {
      grid-template-columns: 1fr;
   }

   .hero-media {
      max-width: 460px;
      margin-inline: auto;
   }

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

   .svc--feature {
      grid-row: span 1;
      grid-column: span 2;
   }

   .steps {
      grid-template-columns: repeat(2, 1fr);
      gap: 32px 26px;
   }

   .step::after {
      display: none;
   }

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

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

   .founder-media {
      max-width: 460px;
   }

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

   .cases .case:last-child {
      grid-column: 1/-1;
   }

   .tslider .tcard {
      flex-basis: calc((100% - 26px) / 2);
   }

   .footer-cols {
      grid-template-columns: repeat(3, 1fr);
      gap: 36px 28px;
   }

   .footer-reach {
      grid-column: 1 / -1;
   }

   .footer-reach .footer-contact {
      max-width: 60ch;
   }
}

@media (max-width:1024px) {
   .nav-toggle {
      display: flex;
   }

   /* backdrop-filter on the header would make the fixed drawer contained by the
      header (a short box); use a solid background on mobile instead */
   .site-header.scrolled {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: var(--cream);
   }

   .hero-leaf {
      display: none;
   }

   .nav {
      position: fixed;
      inset: 0 0 0 auto;
      width: min(86vw, 340px);
      background: var(--cream);
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: calc(var(--nav-h) + 12px) 19px 32px;
      box-shadow: var(--shadow-lg);
      transform: translateX(100%);
      transition: transform .32s var(--ease);
      overflow-y: auto;
      z-index: 95;
   }

   body.nav-open .nav {
      transform: translateX(0);
   }

   .nav>li {
      border-bottom: 1px solid var(--line);
   }

   .nav>li>a {
      padding: 16px 4px;
      font-size: 17px;
      font-weight: 600;
      justify-content: space-between;
      width: 100%;
   }

   /* dropdown parents keep a rotating chevron indicator */
   .nav .caret {
      display: inline-flex;
      width: 30px;
      height: 30px;
      align-items: center;
      justify-content: center;
      border-radius: 9px;
      background: rgba(46, 158, 91, .1);
      color: var(--green-ink);
      opacity: 1;
      transition: transform .25s var(--ease), background .2s;
   }

   .nav .caret i {
      font-size: 14px;
   }

   .nav>li.open>a {
      color: var(--green-ink);
   }

   .nav>li.open>a .caret {
      transform: rotate(180deg);
      background: var(--green);
      color: #fff;
   }

   .dropdown {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: 0;
      padding: 4px 0 12px 6px;
      min-width: 0;
      display: none;
   }

   .nav>li.open .dropdown {
      display: block;
   }

   .dropdown a {
      padding: 10px 10px;
      border-radius: 10px;
      color: var(--body);
      font-weight: 500;
   }

   .dropdown a:hover {
      background: var(--sage-050);
      padding-left: 10px;
   }

   /* drawer footer — CTA, contact, social */
   .nav-cta {
      display: flex;
      flex-direction: column;
      gap: 16px;
      border-bottom: 0 !important;
      margin-top: auto;
      padding-top: 28px;
   }

   .nav-cta .btn {
      width: 100%;
      padding: 15px 24px;
   }

   .nav-contact {
      display: flex;
      flex-direction: column;
      gap: 6px;
   }

   .nav-contact a {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--body);
      font-size: 15px;
      font-weight: 500;
      padding: 6px 0;
   }

   .nav-contact a i {
      color: var(--green-ink);
      width: 20px;
      text-align: center;
   }

   .nav-social {
      display: flex;
      gap: 10px;
      margin-top: 2px;
   }

   .nav-social a {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid var(--line);
      display: grid;
      place-items: center;
      color: var(--forest);
      transition: background .2s, color .2s, transform .2s;
   }

   .nav-social a:hover {
      background: var(--green);
      color: #fff;
      transform: translateY(-2px);
   }

   .nav-social a i {
      font-size: 17px;
   }

   .nav-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 37, 95, .4);
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s;
      z-index: 90;
   }

   body.nav-open .nav-backdrop {
      opacity: 1;
      visibility: visible;
   }

   .statband {
      grid-template-columns: repeat(2, 1fr);
      gap: 38px 16px;
   }

   .statband .s:nth-child(2)::after {
      display: none;
   }

   .cta-inner {
      grid-template-columns: 1fr;
      text-align: center;
   }

   .cta-actions {
      justify-content: center;
   }

   .fab-call {
      display: flex;
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 80;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: var(--green);
      color: #fff;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-green);
   }

   .fab-call svg {
      width: 26px;
      height: 26px;
   }
}

@media (max-width:640px) {
   body {
      font-size: 16px;
   }

   .nav-actions .btn {
      display: none;
   }

   /* keep the hamburger clear of the edge on narrow phones */
   .site-header .container {
      gap: 12px;
   }

   .brand img {
      height: 44px;
   }

   .site-header.scrolled .brand img {
      height: 40px;
   }

   .svc-grid,
   .domains,
   .cases,
   .steps {
      grid-template-columns: 1fr;
   }

   .svc--feature {
      grid-column: span 1;
   }

   .cases .case:last-child {
      grid-column: auto;
   }

   .tslider .tcard {
      flex-basis: 100%;
   }

   .hero-float,
   .leaf-badge {
      display: none;
   }

   .hero-media {
      max-width: 340px;
   }

   .footer-cols {
      grid-template-columns: 1fr 1fr;
      gap: 32px 24px;
   }

   .footer-reach {
      grid-column: 1 / -1;
   }

   .footer-head {
      justify-content: flex-start;
   }

   .footer-bottom {
      justify-content: center;
      text-align: center;
   }
}

@media (max-width:480px) {
   .hero-pill i {
      font-size: 12px;
   }

   .hero-pill {
      font-size: 10px
   }
}

@media (prefers-reduced-motion:reduce) {
   * {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
   }

   .reveal {
      opacity: 1;
      transform: none;
   }

   .marquee-track {
      animation: none;
   }
}

/* ===== Font Awesome <i> icon sizing companions (auto-generated from svg rules) ===== */
.eyebrow i {
   font-size: 17px;
}

.btn i {
   font-size: 18px;
}

.arrow-link i {
   font-size: 16px;
   transition: transform .2s var(--ease);
}

.arrow-link:hover i {
   transform: translateX(5px);
}

.nav-toggle i {
   font-size: 26px;
}

.hero-pill i {
   font-size: 16px;
   color: var(--green);
}

.hero-trust i {
   font-size: 20px;
   color: var(--green);
}

.hero-photo .ph i {
   font-size: 64px;
   opacity: .5;
   margin: 0 auto 10px;
}

.hero-float .ic i {
   font-size: 22px;
}

.leaf-badge i {
   font-size: 30px;
}

.founder-photo .ph i {
   font-size: 56px;
   opacity: .5;
   margin: 0 auto 10px;
}

.cred-list .ck i {
   font-size: 16px;
}

.svc .ic i {
   font-size: 28px;
}

.domain .ic i {
   font-size: 24px;
}

.case .cover .wm i {
   font-size: 130px;
}

.fab-call i {
   font-size: 26px;
}

/* ==========================================================================
   HERO ENHANCEMENTS — organic animation + richer styling
   ========================================================================== */
/* staggered entrance */
@keyframes heroUp {
   from {
      opacity: 0;
      transform: translateY(28px);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

@keyframes heroPop {
   from {
      opacity: 0;
      transform: scale(.92);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

.hero-copy .hero-pill,
.hero-copy h1,
.hero-copy .hero-sub,
.hero-copy .hero-cta,
.hero-copy .hero-trust {
   animation: heroUp .9s var(--ease) backwards;
}

.hero-copy .hero-pill {
   animation-delay: .05s;
}

.hero-copy h1 {
   animation-delay: .18s;
}

.hero-copy .hero-sub {
   animation-delay: .34s;
}

.hero-copy .hero-cta {
   animation-delay: .5s;
}

.hero-copy .hero-trust {
   animation-delay: .64s;
}

.hero-media {
   animation: heroPop 1s var(--ease) .2s backwards;
}

/* morphing organic image frame */
@keyframes morph {

   0%,
   100% {
      border-radius: 58% 42% 55% 45% / 55% 48% 52% 45%;
   }

   25% {
      border-radius: 48% 52% 42% 58% / 45% 55% 45% 55%;
   }

   50% {
      border-radius: 52% 48% 58% 42% / 58% 42% 55% 45%;
   }

   75% {
      border-radius: 45% 55% 48% 52% / 42% 58% 48% 52%;
   }
}

.hero-photo {
   animation: morph 14s ease-in-out infinite;
}

/* layered morphing backdrop + soft glow behind the photo */
.hero-media::before {
   content: "";
   position: absolute;
   inset: -7% -5% -3% -7%;
   z-index: 0;
   background: linear-gradient(150deg, var(--sage), var(--navy-050));
   border-radius: 52% 48% 45% 55% / 48% 52% 55% 45%;
   animation: morph 18s ease-in-out infinite reverse;
   opacity: .55;
}

.hero-media::after {
   content: "";
   position: absolute;
   inset: 6%;
   z-index: 0;
   border-radius: 50%;
   background: radial-gradient(circle at 50% 42%, rgba(46, 158, 91, .16), transparent 62%);
   animation: glowPulse 6s ease-in-out infinite;
}

@keyframes glowPulse {

   0%,
   100% {
      transform: scale(1);
      opacity: .7;
   }

   50% {
      transform: scale(1.07);
      opacity: 1;
   }
}

.hero-photo,
.hero-float,
.leaf-badge {
   position: relative;
   z-index: 2;
}

/* floating leaves drifting through the hero */
.hero-leaf {
   position: absolute;
   z-index: 0;
   color: var(--sage);
   pointer-events: none;
   opacity: 0;
}

.hero-leaf--1 {
   top: 26%;
   left: 7%;
   font-size: 26px;
   animation: floatLeaf 13s linear infinite;
}

.hero-leaf--2 {
   top: 62%;
   left: 21%;
   font-size: 18px;
   color: var(--sage);
   animation: floatLeaf 17s linear infinite 3.5s;
}

.hero-leaf--3 {
   top: 44%;
   right: 15%;
   font-size: 22px;
   animation: floatLeaf 15s linear infinite 6.5s;
}

@keyframes floatLeaf {
   0% {
      transform: translateY(34px) rotate(-12deg);
      opacity: 0;
   }

   12% {
      opacity: .5;
   }

   86% {
      opacity: .5;
   }

   100% {
      transform: translateY(-150px) rotate(28deg);
      opacity: 0;
   }
}

/* slow-drifting background blobs */
.hero .blob--1 {
   animation: drift1 22s ease-in-out infinite;
}

.hero .blob--2 {
   animation: drift2 26s ease-in-out infinite;
}

@keyframes drift1 {

   0%,
   100% {
      transform: translate(0, 0) scale(1);
   }

   50% {
      transform: translate(-32px, 26px) scale(1.05);
   }
}

@keyframes drift2 {

   0%,
   100% {
      transform: translate(0, 0) scale(1);
   }

   50% {
      transform: translate(28px, -22px) scale(1.08);
   }
}

@media (prefers-reduced-motion: reduce) {

   .hero-photo,
   .hero-media::before,
   .hero-media::after,
   .hero .blob--1,
   .hero .blob--2,
   .hero-copy .hero-pill,
   .hero-copy h1,
   .hero-copy .hero-sub,
   .hero-copy .hero-cta,
   .hero-copy .hero-trust,
   .hero-media {
      animation: none;
      opacity: 1;
      transform: none;
   }

   .hero-leaf {
      display: none;
   }
}

/* ==========================================================================
   HERO — animated lab-flask ecosystem scene
   ========================================================================== */
.hero-media {
   max-width: 470px;
   margin-inline: auto;
}

.hero-media::before {
   opacity: .42;
}

.lab-scene {
   position: relative;
   z-index: 2;
   width: 100%;
   aspect-ratio: 1 / 1.06;
   display: grid;
   place-items: center;
}

.flask-svg {
   width: 74%;
   height: auto;
   overflow: visible;
   filter: drop-shadow(0 26px 44px rgba(0, 37, 95, .18));
   animation: flaskFloat 7s ease-in-out infinite;
}

@keyframes flaskFloat {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-10px);
   }
}

.lab-chip {
   position: absolute;
   z-index: 4;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: rgba(255, 255, 255, .92);
   backdrop-filter: blur(10px);
   border: 1px solid var(--line);
   box-shadow: var(--shadow);
   border-radius: 16px;
   padding: 9px 14px;
}

.lab-chip i {
   width: 34px;
   height: 34px;
   display: grid;
   place-items: center;
   border-radius: 10px;
   background: var(--sage-050);
   color: var(--ink);
   font-size: 15px;
   flex-shrink: 0;
}

.lab-chip span {
   display: flex;
   flex-direction: column;
   line-height: 1.18;
}

.lab-chip em {
   font-style: normal;
   font-size: 11px;
   letter-spacing: .02em;
   color: var(--muted);
}

.lab-chip b {
   font-family: var(--font-head);
   font-weight: 600;
   font-size: 15px;
   color: var(--ink);
   white-space: nowrap;
}

.lab-chip--a {
   top: 3%;
   right: -7%;
   animation: bob 6s ease-in-out infinite;
}

.lab-chip--b {
   top: 41%;
   left: -11%;
   animation: bob 6s ease-in-out infinite 1.3s;
}

.lab-chip--c {
   bottom: 2%;
   right: -3%;
   animation: bob 6s ease-in-out infinite 2.4s;
}

@media (prefers-reduced-motion: reduce) {

   .flask-svg,
   .lab-chip {
      animation: none;
   }
}

@media (max-width: 640px) {
   .lab-chip {
      display: none;
   }

   .flask-svg {
      width: 66%;
   }
}

/* ==========================================================================
   QUOTE MODAL
   ========================================================================== */
.modal {
   position: fixed;
   inset: 0;
   z-index: 200;
   display: grid;
   place-items: center;
   padding: 20px;
   opacity: 0;
   visibility: hidden;
   transition: opacity .3s var(--ease), visibility .3s;
}

.modal.open {
   opacity: 1;
   visibility: visible;
}

.modal-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(0, 37, 95, .55);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
}

.modal-dialog {
   position: relative;
   z-index: 1;
   width: 100%;
   max-width: 520px;
   max-height: 92vh;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   background: var(--cream);
   border-radius: var(--r-lg);
   box-shadow: var(--shadow-lg);
   transform: translateY(16px) scale(.98);
   transition: transform .3s var(--ease);
}

/* inner scroll area so the scrollbar stays inside the rounded dialog */
.modal-scroll {
   overflow-y: auto;
   min-height: 0;
   padding: clamp(24px, 4vw, 40px);
   scrollbar-width: thin;
   scrollbar-color: var(--sage) transparent;
}

.modal-scroll::-webkit-scrollbar {
   width: 8px;
}

.modal-scroll::-webkit-scrollbar-thumb {
   background: var(--sage);
   border-radius: 8px;
   border: 2px solid var(--cream);
}

.modal-scroll::-webkit-scrollbar-track {
   background: transparent;
}

.modal.open .modal-dialog {
   transform: none;
}

.modal-close {
   position: absolute;
   top: 16px;
   right: 16px;
   z-index: 3;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #fff;
   border: 1px solid var(--line);
   color: var(--forest);
   display: grid;
   place-items: center;
   cursor: pointer;
   transition: background .2s, color .2s, transform .2s;
}

.modal-close:hover {
   background: var(--green);
   color: #fff;
   transform: rotate(90deg);
}

.modal-close i {
   font-size: 16px;
}

.modal-head {
   margin-bottom: 22px;
}

.modal-head h3 {
   font-size: clamp(24px, 3vw, 30px);
   margin: 4px 0 8px;
}

.modal-head p {
   color: var(--body);
   font-size: 15px;
}

.quote-form .fields {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
}

.quote-form label {
   display: flex;
   flex-direction: column;
   gap: 6px;
   min-width: 0;
   /* let grid/flex tracks shrink below the input's intrinsic width */
   font-size: 13px;
   font-weight: 600;
   color: var(--ink);
}

.quote-form label.full {
   grid-column: 1 / -1;
}

.quote-form input,
.quote-form select,
.quote-form textarea {
   width: 100%;
   min-width: 0;
   max-width: 100%;
   font-family: var(--font-body);
   font-size: 15px;
   font-weight: 400;
   padding: 11px 14px;
   border: 1px solid var(--line-2);
   border-radius: 12px;
   background: #fff;
   color: var(--ink);
   transition: border-color .2s, box-shadow .2s;
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
   outline: none;
   border-color: var(--green);
   box-shadow: 0 0 0 3px rgba(46, 158, 91, .16);
}

.quote-form textarea {
   resize: vertical;
   min-height: 84px;
}

.quote-form .btn {
   width: 100%;
   margin-top: 18px;
}

.quote-note {
   text-align: center;
   font-size: 13px;
   color: var(--muted);
   margin-top: 14px;
}

.form-alert {
   display: flex;
   align-items: flex-start;
   gap: 9px;
   padding: 13px 16px;
   border-radius: 14px;
   font-size: 14px;
   line-height: 1.5;
   margin-bottom: 18px;
}

.form-alert i {
   margin-top: 3px;
}

.form-alert--error {
   background: #FCEBEA;
   border: 1px solid #F3C6C2;
   color: #A32C22;
}

.form-alert--error a {
   color: #A32C22;
   font-weight: 600;
}

/* ===================== Status pages (404 / thank-you) ===================== */
.status {
   text-align: center;
   max-width: 720px;
   margin: 0 auto;
}

.status-code {
   font-family: var(--font-head);
   font-weight: 500;
   font-size: clamp(96px, 20vw, 210px);
   line-height: .85;
   letter-spacing: -0.02em;
   color: var(--sage);
   margin: 0;
}

.status-icon {
   width: 92px;
   height: 92px;
   border-radius: 50%;
   background: var(--sage-050);
   color: var(--green-ink);
   display: grid;
   place-items: center;
   margin: 0 auto 6px;
}

.status-icon i {
   font-size: 40px;
}

.status h1 {
   color: var(--forest);
   font-size: clamp(30px, 4.2vw, 46px);
   margin: 14px 0 0;
}

.status .lead {
   color: var(--body);
   font-size: clamp(16px, 1.4vw, 18px);
   line-height: 1.6;
   max-width: 56ch;
   margin: 18px auto 0;
}

.status-cta {
   display: flex;
   gap: 14px;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 30px;
}

.status-links {
   margin-top: 40px;
   padding-top: 28px;
   border-top: 1px solid var(--line);
}

.status-links .label {
   font-size: 13px;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--muted);
   margin: 0 0 14px;
}

.status-links ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 10px 12px;
   justify-content: center;
}

.status-links a {
   font-size: 14px;
   font-weight: 600;
   color: var(--green-ink);
   background: var(--sage-050);
   padding: 8px 15px;
   border-radius: 999px;
   text-decoration: none;
   transition: background .2s var(--ease), color .2s var(--ease);
}

.status-links a:hover {
   background: var(--green);
   color: #fff;
}

.quote-success {
   text-align: center;
   padding: 16px 0;
}

.quote-success .ok {
   width: 66px;
   height: 66px;
   border-radius: 50%;
   background: var(--sage-050);
   color: var(--green-ink);
   display: grid;
   place-items: center;
   margin: 0 auto 16px;
}

.quote-success .ok i {
   font-size: 30px;
}

.quote-success p {
   color: var(--body);
}

body.modal-active {
   overflow: hidden;
}

@media (max-width: 520px) {
   .quote-form .fields {
      grid-template-columns: 1fr;
   }
}

/* ==========================================================================
   INNER PAGES — hero, breadcrumb, answer, facts card, tags
   ========================================================================== */
.page-hero {
   position: relative;
   overflow: hidden;
   padding: calc(var(--nav-h) + clamp(26px, 4vw, 46px)) 0 clamp(30px, 4vw, 46px);
   background: linear-gradient(180deg, var(--sage-050) 0%, transparent 78%);
}

/* Layered header artwork (sitewide via .page-hero):
   ::before = faint particle/bubble texture across the band;
   ::after  = line-art laboratory glassware clustered on the right. */
.page-hero::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background-image: radial-gradient(circle, rgba(0, 37, 95, .06) 1px, transparent 1.6px);
   background-size: 24px 24px;
   -webkit-mask-image: linear-gradient(105deg, transparent 22%, #000 82%);
   mask-image: linear-gradient(105deg, transparent 22%, #000 82%);
}

.page-hero::after {
   content: "";
   position: absolute;
   z-index: 0;
   pointer-events: none;
   top: 0;
   right: 0;
   bottom: 0;
   width: min(80%, 1020px);
   background: url("../img/patterns/hero-lab.svg") right -1% top 50% / contain no-repeat;
   opacity: .92;
   -webkit-mask-image: radial-gradient(140% 135% at 82% 46%, #000 52%, transparent 88%);
   mask-image: radial-gradient(140% 135% at 82% 46%, #000 52%, transparent 88%);
}

/* Status pages (thankyou / 404) center their content, so the right-clustered
   lab artwork sat directly under the text. Recentre it and fade it back to a
   faint, symmetric watermark so the copy stays crisp and readable. */
.page-hero--status::after {
   width: min(96%, 1120px);
   right: auto;
   left: 50%;
   transform: translateX(-50%);
   background-position: center center;
   opacity: .18;
   -webkit-mask-image: radial-gradient(120% 120% at 50% 46%, #000 42%, transparent 84%);
   mask-image: radial-gradient(120% 120% at 50% 46%, #000 42%, transparent 84%);
}

.page-hero-inner {
   position: relative;
   z-index: 1;
}

.page-hero .blob--1 {
   width: 560px;
   height: 560px;
   top: -180px;
   right: -140px;
}

.page-hero .blob--2 {
   width: 380px;
   height: 380px;
   bottom: -160px;
   left: -140px;
   opacity: .4;
}

.page-hero-grid {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: 1.25fr .9fr;
   gap: clamp(32px, 5vw, 60px);
   align-items: center;
}

.breadcrumb {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--muted);
   margin-bottom: 18px;
}

.breadcrumb a {
   color: var(--muted);
}

.breadcrumb a:hover {
   color: var(--green-ink);
}

.breadcrumb .sep {
   color: var(--line-2);
}

.breadcrumb [aria-current] {
   color: var(--green-ink);
   font-weight: 600;
}

.page-hero h1 {
   color: var(--forest);
   font-size: clamp(32px, 4.4vw, 52px);
   margin: 8px 0 0;
   max-width: 900px;
}

.page-hero h1 .serif-i {
   color: var(--green-ink);
}

.page-hero .lead {
   font-size: clamp(16px, 1.4vw, 16px);
   color: var(--body);
   max-width: 60ch;
   line-height: 1.55;
   margin-top: 18px;
}

.page-hero .hero-cta {
   margin: 26px 0 0;
}

.page-hero .hero-trust {
   margin-top: 22px;
}

/* quick facts card in the hero */
.facts-card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--r-lg);
   box-shadow: var(--shadow);
   padding: 26px;
}

.facts-card h3 {
   font-size: 18px;
   margin-bottom: 18px;
   display: flex;
   align-items: center;
   gap: 9px;
}

.facts-card h3 i {
   color: var(--green-ink);
   font-size: 18px;
}

.facts-card ul {
   display: grid;
   gap: 15px;
}

.facts-card li {
   display: flex;
   gap: 13px;
   align-items: center;
}

.facts-card .ic {
   width: 42px;
   height: 42px;
   border-radius: 12px;
   background: var(--sage-050);
   color: var(--ink);
   display: grid;
   place-items: center;
   flex-shrink: 0;
}

.facts-card .ic i {
   font-size: 18px;
}

.facts-card .k {
   display: block;
   font-family: var(--font-head);
   font-weight: 600;
   color: var(--ink);
   font-size: 15px;
}

.facts-card .v {
   display: block;
   font-size: 13px;
   color: var(--muted);
}

/* Relocated page summary — reads as a normal secondary intro paragraph */
.intro-summary {
   margin-top: 15px;
   font-size: 16px;
   line-height: 1.68;
   color: var(--body);
   max-width: 60ch;
}

.intro-summary strong {
   color: var(--ink);
}

/* Callout note — short CTA prompts on case studies, articles, etc. */
.answer {
   position: relative;
   background: var(--sage-050);
   border: 1px solid var(--sage);
   border-radius: var(--r);
   padding: clamp(24px, 3vw, 34px) clamp(26px, 3.6vw, 44px);
   font-size: 17px;
   line-height: 1.68;
   color: var(--forest);
   max-width: 940px;
   margin-inline: auto;
}

.answer strong {
   color: var(--ink);
}

.answer a {
   color: var(--green-ink);
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 2px;
}

/* parameter / scope tags */
.tag-list {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.tag {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 999px;
   padding: 9px 16px;
   font-size: 14px;
   font-weight: 500;
   color: var(--body);
}

.tag i {
   color: var(--green-ink);
   font-size: 12px;
}

/* generic two-column content */
.split-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(32px, 5vw, 60px);
   align-items: center;
}

@media (max-width: 900px) {
   .page-hero-grid {
      grid-template-columns: 1fr;
   }

   /* Shrink & tuck the elevation motif into the corner so it never
      sits behind the heading once it stacks to a single column. */
   .page-hero::after {
      width: min(72%, 420px);
      opacity: .55;
      -webkit-mask-image: radial-gradient(110% 90% at 100% 0%, #000 20%, transparent 70%);
      mask-image: radial-gradient(110% 90% at 100% 0%, #000 20%, transparent 70%);
   }

   .split-2 {
      grid-template-columns: 1fr;
   }
}

/* ===================== About founder photo ===================== */
.about-founder-photo {
   width: 100%;
   border-radius: 22px;
   object-fit: cover;
   box-shadow: 0 24px 60px -30px rgba(0, 37, 95, .5);
}

/* ===================== Contact page ===================== */
.contact-split {
   align-items: center;
}

.contact-card {
   background: #fff;
   border: 1px solid var(--sage-050);
   border-radius: 22px;
   padding: 28px;
   box-shadow: 0 24px 60px -34px rgba(0, 37, 95, .35);
}

.contact-social {
   display: flex;
   gap: 12px;
   margin-top: 24px;
}

.contact-social a {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--sage-050);
   color: var(--forest);
   transition: .2s ease;
}

.contact-social a:hover {
   background: var(--green);
   color: #fff;
   transform: translateY(-2px);
}

.contact-social i,
.contact-social svg {
   font-size: 17px;
}

.map-frame {
   border-radius: 22px;
   overflow: hidden;
   border: 1px solid var(--sage-050);
   box-shadow: 0 24px 60px -34px rgba(0, 37, 95, .35);
   line-height: 0;
}

.map-frame iframe {
   width: 100%;
   height: 420px;
   border: 0;
   display: block;
}

@media (max-width: 640px) {
   .map-frame iframe {
      height: 320px;
   }

   .contact-card {
      padding: 20px;
   }
}

/* ===================== Article & case-study prose ===================== */
.prose {
   max-width: 768px;
   margin: 0 auto;
}

.prose>*+* {
   margin-top: 18px;
}

.prose h2 {
   font-family: var(--font-head);
   font-weight: 500;
   font-size: 27px;
   line-height: 1.2;
   color: var(--forest);
   margin-top: 38px;
}

.prose h3 {
   font-size: 20px;
   color: var(--ink);
   margin-top: 28px;
}

.prose p {
   font-size: 17px;
   line-height: 1.75;
}

.prose ul {
   display: flex;
   flex-direction: column;
   gap: 11px;
   margin-top: 16px;
}

.prose li {
   position: relative;
   padding-left: 26px;
   line-height: 1.65;
}

.prose li::before {
   content: "";
   position: absolute;
   left: 2px;
   top: 9px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--green);
}

.prose strong {
   color: var(--ink);
}

.article-cover {
   border-radius: 22px;
   overflow: hidden;
   border: 1px solid var(--sage-050);
   margin: 0 auto 36px;
   max-width: 960px;
   line-height: 0;
   box-shadow: 0 24px 60px -34px rgba(0, 37, 95, .35);
}

.article-cover img {
   width: 100%;
   height: auto;
   display: block;
}

/* ===================== Brand photography — subtle navy duotone (§6.3) =====================
   A light navy cast so photography reads as one family. Deliberately restrained:
   the image keeps most of its natural colour. Applied to photographic content only —
   the logo, client marks and accreditation badges stay full colour (§6.3).
   :has(img) keeps the wash off the icon placeholders. */
.article-cover:has(img),
.page-figure:has(img),
.case .cover:has(img),
.gallery-grid figure:has(img),
.mini-thumb:has(img),
.founder-feature .ff-photo:has(img),
.team-card .photo:has(img) {
   position: relative;
   isolation: isolate;
}

.article-cover:has(img)::before,
.page-figure:has(img)::before,
.case .cover:has(img)::before,
.gallery-grid figure:has(img)::before,
.mini-thumb:has(img)::before,
.founder-feature .ff-photo:has(img)::before,
.team-card .photo:has(img)::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   border-radius: inherit;
   background: var(--ink);
   mix-blend-mode: color;
   opacity: .15;
   pointer-events: none;
}

/* Mute the source very slightly so the navy cast reads as intentional, not tinted. */
.article-cover:has(img) img,
.page-figure:has(img) img,
.case .cover:has(img) img,
.gallery-grid figure:has(img) img,
.mini-thumb:has(img) img,
.founder-feature .ff-photo:has(img) img,
.team-card .photo:has(img) img {
   filter: saturate(.9);
}

.meta-pills {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 22px;
}

.meta-pills .m {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   background: var(--sage-050);
   color: var(--forest);
   border-radius: 999px;
   padding: 7px 14px;
   font-size: 14px;
   font-weight: 600;
}

.meta-pills .m i,
.meta-pills .m svg {
   font-size: 13px;
}

/* ===================== Founder feature (leadership) ===================== */
.founder-feature {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: clamp(36px, 5vw, 72px);
   align-items: center;
   max-width: 1140px;
   margin: 0 auto;
   background: #fff;
   border: 1px solid var(--sage-050);
   border-radius: var(--r-xl);
   box-shadow: 0 40px 90px -44px rgba(0, 37, 95, .5);
   padding: clamp(34px, 4.5vw, 60px);
}

.founder-feature .ff-photo {
   width: clamp(210px, 26vw, 320px);
   height: clamp(210px, 26vw, 320px);
   flex: none;
   border-radius: 30px;
   overflow: hidden;
   background: var(--sage-050);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--sage);
}

.founder-feature .ff-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.ff-body h3 {
   font-size: clamp(28px, 3.4vw, 40px);
   color: var(--ink);
   line-height: 1.12;
}

.ff-body .role {
   color: var(--green-ink);
   font-weight: 600;
   font-size: clamp(15px, 1.4vw, 17px);
   margin-top: 7px;
}

.ff-body p {
   color: var(--body);
   font-size: clamp(16px, 1.3vw, 18px);
   line-height: 1.66;
   margin-top: 18px;
   max-width: 54ch;
}

.ff-body .arrow-link {
   margin-top: 22px;
}

/* ===================== Team grid ===================== */
.team-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 26px;
}

.team-grid--3 {
   grid-template-columns: repeat(3, 1fr);
   max-width: 1040px;
   margin: 0 auto;
   gap: 30px;
}

.team-card {
   background: #fff;
   border: 1px solid var(--sage-050);
   border-radius: 22px;
   padding: 36px 28px;
   text-align: center;
   box-shadow: 0 22px 54px -34px rgba(0, 37, 95, .32);
   transition: transform .2s var(--ease), box-shadow .28s var(--ease);
}

.team-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 30px 64px -34px rgba(0, 37, 95, .5);
}

.team-card .photo {
   width: 150px;
   height: 150px;
   border-radius: 50%;
   overflow: hidden;
   margin: 0 auto 20px;
   background: var(--sage-050);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--sage);
}

.team-card .photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.team-card h3 {
   font-size: 20px;
   color: var(--ink);
}

.team-card .role {
   color: var(--green-ink);
   font-weight: 600;
   font-size: 14px;
   margin-top: 6px;
}

@media (max-width: 640px) {
   .founder-feature {
      grid-template-columns: 1fr;
      text-align: center;
      justify-items: center;
   }

   .founder-feature .ff-photo {
      margin: 0 auto;
   }

   .ff-body p {
      margin-inline: auto;
   }
}

/* ===================== Gallery grid ===================== */
.cs-gallery {
   margin-top: 44px;
   padding-top: 40px;
   border-top: 1px solid var(--sage-050);
}

.cs-gallery h2 {
   margin: 0 0 8px;
}

.cs-gallery-note {
   max-width: 640px;
   margin: 0 0 24px;
   color: var(--muted);
}

.gallery-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
}

.gallery-grid figure {
   border-radius: 16px;
   overflow: hidden;
   border: 1px solid var(--sage-050);
   aspect-ratio: 4 / 3;
   background: var(--sage-050);
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 0;
   color: var(--sage);
}

.gallery-grid img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* ---- Tabbed gallery (segmented control) ---- */
.gtabs {
   text-align: center;
}

.gtabs-nav {
   display: inline-flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 4px;
   max-width: 100%;
   padding: 6px;
   margin-bottom: 34px;
   background: var(--sage-050);
   border-radius: 16px;
}

.gtab {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: var(--font-head);
   font-weight: 500;
   font-size: 14px;
   line-height: 1;
   color: var(--body);
   background: transparent;
   border: none;
   padding: 11px 18px;
   border-radius: 11px;
   cursor: pointer;
   white-space: nowrap;
   transition: color .2s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}

.gtab i {
   font-size: 15px;
   color: var(--muted);
   transition: color .2s var(--ease);
}

.gtab:hover {
   color: var(--ink);
}

.gtab.is-active {
   background: #fff;
   color: var(--green-ink);
   font-weight: 700;
   box-shadow: 0 4px 14px rgba(0, 37, 95, .12);
}

.gtab.is-active i {
   color: var(--green-ink);
}

.gtab-panel {
   display: none;
}

.gtab-panel.is-active {
   display: block;
   animation: gtabIn .35s var(--ease) both;
}

@keyframes gtabIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.gtab-heading {
   text-align: center;
   font-size: clamp(22px, 2.4vw, 28px);
   margin-bottom: 6px;
}

.gtab-intro {
   text-align: center;
   max-width: 620px;
   margin: 0 auto 28px;
   color: var(--body);
}

/* Sub-category heading within a tab (e.g. Gir Trip / Navratri 2024) */
.gallery-subhead {
   display: flex;
   align-items: center;
   gap: 9px;
   font-family: var(--font-head);
   font-weight: 600;
   font-size: 17px;
   color: var(--forest);
   margin: 30px 0 16px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--line);
}

.gallery-subhead i {
   color: var(--green-ink);
   font-size: 16px;
}

.gallery-subhead:first-of-type {
   margin-top: 6px;
}

/* ---- Mission & Vision cards (About) ------------------------------------ */
.mv-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(20px, 2.4vw, 28px);
   align-items: stretch;
   /* equal heights */
}

.mv-card {
   position: relative;
   overflow: hidden;
   border-radius: var(--r-lg);
   padding: clamp(30px, 3.4vw, 46px);
   display: flex;
   flex-direction: column;
   transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.mv-card:hover {
   transform: translateY(-6px);
}

.mv-card--mission {
   background: linear-gradient(158deg, var(--forest), var(--forest-2));
   color: #b9cec2;
   box-shadow: 0 30px 60px -26px rgba(18, 64, 44, .55);
}

.mv-card--mission:hover {
   box-shadow: 0 40px 72px -24px rgba(18, 64, 44, .6);
}

.mv-card--vision {
   background: #fff;
   border: 1px solid var(--line);
   color: var(--body);
   box-shadow: var(--shadow);
}

.mv-card--vision:hover {
   box-shadow: var(--shadow-lg);
   border-color: transparent;
}

.mv-ic {
   position: relative;
   z-index: 1;
   width: 60px;
   height: 60px;
   border-radius: 18px;
   display: grid;
   place-items: center;
   font-size: 25px;
   margin-bottom: 22px;
   transition: transform .3s var(--ease), background .3s var(--ease);
}

.mv-card:hover .mv-ic {
   transform: rotate(-8deg);
}

.mv-card--mission .mv-ic {
   background: rgba(255, 255, 255, .14);
   color: #fff;
}

.mv-card--vision .mv-ic {
   background: var(--sage-050);
   color: var(--green-ink);
}

.mv-card--vision:hover .mv-ic {
   background: var(--green);
   color: #fff;
}

.mv-label {
   position: relative;
   z-index: 1;
   font-family: var(--font-body);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .14em;
   text-transform: uppercase;
   margin-bottom: 8px;
}

.mv-card--mission .mv-label {
   color: var(--sage);
}

.mv-card--vision .mv-label {
   color: var(--green-ink);
}

.mv-card h3 {
   position: relative;
   z-index: 1;
   margin: 0 0 14px;
   font-size: clamp(20px, 2.1vw, 25px);
   line-height: 1.25;
}

.mv-card--mission h3 {
   color: #fff;
}

.mv-card--vision h3 {
   color: var(--forest);
}

.mv-card p {
   position: relative;
   z-index: 1;
   margin: 0;
   font-size: 16px;
   line-height: 1.66;
   max-width: 44ch;
}

/* commitment bullets under the narrative — reads on both cards */
.mv-list {
   position: relative;
   z-index: 1;
   list-style: none;
   margin: 20px 0 0;
   padding: 18px 0 0;
   display: grid;
   gap: 11px;
   max-width: 42ch;
   border-top: 1px solid;
}

.mv-list li {
   position: relative;
   padding-left: 26px;
   font-size: 15.5px;
   line-height: 1.5;
   font-weight: 500;
}

.mv-list li::before {
   content: "";
   position: absolute;
   left: 3px;
   top: 9px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
}

.mv-card--mission .mv-list {
   border-top-color: rgba(255, 255, 255, .14);
}

.mv-card--mission .mv-list li {
   color: #d6e4db;
}

.mv-card--mission .mv-list li::before {
   background: var(--sage);
}

.mv-card--vision .mv-list {
   border-top-color: var(--line);
}

.mv-card--vision .mv-list li {
   color: var(--ink);
}

.mv-card--vision .mv-list li::before {
   background: var(--green);
}

/* large faint watermark icon anchored bottom-right */
.mv-wm {
   position: absolute;
   right: -14px;
   bottom: -30px;
   z-index: 0;
   font-size: 158px;
   line-height: 1;
   pointer-events: none;
}

.mv-card--mission .mv-wm {
   color: rgba(255, 255, 255, .06);
}

.mv-card--vision .mv-wm {
   color: rgba(46, 158, 106, .07);
}

@media (max-width: 720px) {
   .mv-grid {
      grid-template-columns: 1fr;
   }
}

/* ---- "Coming soon" placeholder block ----------------------------------- */
.cs-block {
   max-width: 640px;
   margin: 0 auto;
   text-align: center;
}

.cs-ic {
   width: 82px;
   height: 82px;
   margin: 0 auto 22px;
   border-radius: 24px;
   display: grid;
   place-items: center;
   font-size: 32px;
   background: var(--sage-050);
   color: var(--green-ink);
}

.cs-block .eyebrow {
   margin-bottom: 10px;
}

.cs-block h2 {
   margin: 0 0 14px;
   color: var(--forest);
}

.cs-block p {
   color: var(--body);
   font-size: clamp(16px, 1.4vw, 18px);
   line-height: 1.66;
}

.cs-cta {
   display: flex;
   gap: 14px;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 26px;
}

@media (max-width: 560px) {
   .gtabs-nav {
      width: 100%;
      flex-wrap: nowrap;
      overflow-x: auto;
      justify-content: flex-start;
      border-radius: 14px;
      scrollbar-width: none;
   }

   .gtabs-nav::-webkit-scrollbar {
      display: none;
   }
}

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

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

@media (max-width: 520px) {
   .team-grid {
      grid-template-columns: 1fr;
   }

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

/* ===================== Article layout + sticky sidebar ===================== */
.article-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 328px;
   gap: 56px;
   align-items: start;
}

/* Cover now lives in the left content column — fill its width, cap height */
.article-main .article-cover {
   max-width: none;
   margin: 0 0 32px;
}

.article-aside {
   position: sticky;
   top: calc(var(--nav-h) + 20px);
}

.side-card {
   background: #fff;
   border: 1px solid var(--sage-050);
   border-radius: var(--r);
   padding: 26px 24px;
   box-shadow: 0 18px 44px rgba(0, 37, 95, .06);
}

.side-card-title {
   display: flex;
   align-items: center;
   gap: 9px;
   margin: 0 0 18px;
   font-family: var(--font-body);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--ink);
}

.side-card-title i {
   color: var(--green);
   font-size: 15px;
}

/* --- Case-study mini cards --- */
.mini-cards {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.mini-card a {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 10px;
   border-radius: 14px;
   text-decoration: none;
   transition: background .2s var(--ease), transform .2s var(--ease);
}

.mini-card a:hover {
   background: var(--sage-050);
   transform: translateX(2px);
}

.mini-thumb {
   flex-shrink: 0;
   width: 68px;
   height: 60px;
   border-radius: 11px;
   overflow: hidden;
   background: var(--sage-050);
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 0;
   color: var(--sage);
}

.mini-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.mini-body {
   display: flex;
   flex-direction: column;
   gap: 3px;
   min-width: 0;
}

.mini-tag {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--green-ink);
}

.mini-title {
   font-size: 14px;
   font-weight: 600;
   line-height: 1.35;
   color: var(--forest);
}

.side-card-cta {
   margin-top: 18px;
   font-size: 14px;
   font-weight: 600;
}

/* --- Blog table of contents --- */
.toc-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
   border-left: 2px solid var(--sage-050);
}

.toc-list a {
   display: block;
   padding: 8px 16px;
   margin-left: -2px;
   border-left: 2px solid transparent;
   font-size: 14px;
   line-height: 1.4;
   color: var(--body);
   text-decoration: none;
   transition: color .2s var(--ease), border-color .2s var(--ease);
}

.toc-list a:hover {
   color: var(--green-ink);
}

.toc-list a.active {
   color: var(--ink);
   font-weight: 600;
   border-left-color: var(--green);
}

@media (max-width: 980px) {
   .article-layout {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .article-aside {
      position: static;
      top: auto;
   }

   .side-card--toc {
      display: none;
   }
}

/* ===================== Compact page header — category accents ===================== */
.page-hero .eyebrow {
   margin-bottom: 10px;
}

.page-hero .breadcrumb {
   margin-bottom: 14px;
}

/* Testing Lab, Services & Compliance all share the brand green accent
   (client request: replace the sky-blue / amber variants with green). */
.page-hero--testing,
.page-hero--services,
.page-hero--compliance {
   background: linear-gradient(180deg, var(--sage-050) 0%, transparent 80%);
}

.page-hero--testing .eyebrow,
.page-hero--testing .breadcrumb [aria-current],
.page-hero--services .eyebrow,
.page-hero--services .breadcrumb [aria-current] {
   color: var(--green-ink);
}

/* ===================== Page intro (details moved below the header) ===================== */
.page-intro-grid {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   gap: clamp(32px, 5vw, 60px);
   align-items: center;
}

.page-intro-copy .lead {
   font-size: clamp(16px, 1.4vw, 16px);
   color: var(--body);
   line-height: 1.62;
   max-width: 54ch;
}

.page-intro-copy .hero-cta {
   margin-top: 24px;
}

.page-intro-copy .hero-trust {
   margin-top: 22px;
}

/* Representative image */
.page-figure {
   position: relative;
   border-radius: var(--r-lg);
   overflow: hidden;
   border: 1px solid var(--line);
   box-shadow: var(--shadow);
   aspect-ratio: 4 / 3;
   background: var(--sage-050);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--sage);
   margin: 0;
}

.page-figure img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.page-figure .ph {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   color: var(--sage);
   font-size: 13px;
}

/* Quick-facts strip (was the hero facts-card) */
.facts-strip {
   margin-top: clamp(30px, 4vw, 48px);
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--r-lg);
   box-shadow: var(--shadow);
   padding: 22px clamp(18px, 3vw, 30px);
}

.facts-strip .fs-title {
   font-size: 14px;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--green-ink);
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   gap: 9px;
}

.facts-strip .fs-title i {
   color: var(--green-ink);
   font-size: 15px;
}

.facts-strip ul {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
}

.facts-strip li {
   display: flex;
   gap: 12px;
   align-items: center;
}

.facts-strip .ic {
   width: 40px;
   height: 40px;
   flex: none;
   border-radius: 11px;
   background: var(--sage-050);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--ink);
}

.facts-strip .ic i {
   font-size: 16px;
}

.facts-strip .k {
   display: block;
   font-weight: 600;
   font-size: 15px;
   color: var(--ink);
   line-height: 1.25;
}

.facts-strip .v {
   display: block;
   font-size: 13px;
   color: var(--muted);
   margin-top: 2px;
}

@media (max-width: 900px) {
   .page-intro-grid {
      grid-template-columns: 1fr;
      gap: 28px;
   }

   .page-figure {
      order: -1;
   }

   .facts-strip ul {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
   }
}

@media (max-width: 520px) {
   .facts-strip ul {
      grid-template-columns: 1fr;
   }
}

/* ===================== Contact detail cards ===================== */
.contact-cards {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
}

.contact-card-item {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--r-lg);
   box-shadow: var(--shadow);
   padding: 26px 24px;
   transition: transform .2s var(--ease), box-shadow .28s var(--ease);
}

.contact-card-item:hover {
   transform: translateY(-4px);
   box-shadow: 0 22px 50px -30px rgba(0, 37, 95, .5);
}

.contact-card-item .ic {
   width: 50px;
   height: 50px;
   border-radius: 14px;
   background: var(--sage-050);
   color: var(--ink);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 16px;
}

.contact-card-item .ic i {
   font-size: 20px;
}

.contact-card-item h3 {
   font-size: 15px;
   letter-spacing: .03em;
   text-transform: uppercase;
   color: var(--green-ink);
   margin-bottom: 8px;
}

.contact-card-item p,
.contact-card-item a {
   font-size: 16px;
   color: var(--body);
   line-height: 1.5;
   display: block;
}

.contact-card-item a:hover {
   color: var(--green-ink);
}

.contact-card-item .sub {
   font-size: 13px;
   color: var(--muted);
   margin-top: 4px;
}

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

@media (max-width: 520px) {
   .contact-cards {
      grid-template-columns: 1fr;
   }
}

/* ===================== Important links — link cards ===================== */
.link-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
}

.link-card {
   display: flex;
   align-items: center;
   gap: 14px;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--r);
   padding: 18px 20px;
   text-decoration: none;
   transition: transform .2s var(--ease), box-shadow .28s var(--ease), border-color .2s var(--ease);
}

.link-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 18px 44px -28px rgba(0, 37, 95, .5);
   border-color: var(--sage);
}

.link-card .lc-ic {
   flex-shrink: 0;
   width: 44px;
   height: 44px;
   border-radius: 12px;
   background: var(--sage-050);
   color: var(--ink);
   display: flex;
   align-items: center;
   justify-content: center;
}

.link-card .lc-ic i {
   font-size: 18px;
}

.link-card .lc-label {
   flex: 1;
   min-width: 0;
   font-weight: 600;
   font-size: 16px;
   line-height: 1.35;
   color: var(--forest);
}

.link-card .lc-arrow {
   flex-shrink: 0;
   color: var(--muted);
   line-height: 0;
   transition: color .2s var(--ease), transform .2s var(--ease);
}

.link-card .lc-arrow i {
   font-size: 14px;
}

.link-card:hover .lc-arrow {
   color: var(--green-ink);
   transform: translateX(2px);
}

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

@media (max-width: 560px) {
   .link-grid {
      grid-template-columns: 1fr;
   }
}

/* ===================== Resources / document cards ===================== */
.docs-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
}

.doc-card {
   display: flex;
   align-items: flex-start;
   gap: 18px;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--r);
   padding: 24px 24px 24px 22px;
   box-shadow: var(--shadow-sm);
   transition: transform .2s var(--ease), box-shadow .28s var(--ease), border-color .2s var(--ease);
}

.doc-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 22px 50px -30px rgba(0, 37, 95, .5);
   border-color: var(--sage);
}

.doc-ic {
   flex-shrink: 0;
   width: 52px;
   height: 52px;
   border-radius: 14px;
   background: var(--sage-050);
   color: var(--ink);
   display: grid;
   place-items: center;
}

.doc-ic i {
   font-size: 24px;
}

.doc-ic--pdf {
   background: #FDECEC;
   color: #C0392B;
}

.doc-ic--ppt {
   background: #FCEEE4;
   color: #C56A28;
}

.doc-body {
   flex: 1;
   min-width: 0;
}

.doc-body h3 {
   font-size: 17px;
   line-height: 1.35;
   margin-bottom: 6px;
}

.doc-body p {
   font-size: 14px;
   line-height: 1.55;
   color: var(--body);
   margin-bottom: 12px;
}

.doc-meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 7px;
   font-size: 12px;
   color: var(--muted);
}

.doc-meta .doc-type {
   font-weight: 700;
   letter-spacing: .05em;
   color: var(--green-ink);
}

.doc-meta .sep {
   color: var(--line-2);
}

.doc-dl {
   flex-shrink: 0;
   align-self: center;
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-family: var(--font-head);
   font-weight: 500;
   font-size: 14px;
   color: #fff;
   background: var(--green);
   padding: 9px 16px;
   border: none;
   border-radius: 10px;
   text-decoration: none;
   cursor: pointer;
   transition: background .2s var(--ease), transform .2s var(--ease);
}

.doc-dl:hover {
   background: var(--green-deep);
   transform: translateY(-1px);
}

.doc-dl--soon {
   background: var(--sage-050);
   color: var(--muted);
   cursor: default;
}

.doc-dl--soon:hover {
   background: var(--sage-050);
   transform: none;
}

@media (max-width: 720px) {
   .docs-grid {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 460px) {
   .doc-card {
      flex-wrap: wrap;
   }

   .doc-dl {
      align-self: stretch;
      justify-content: center;
      width: 100%;
   }
}

/* ===================== Category inquiry band (navy — logo colour) ===================== */
.inquiry {
   position: relative;
   overflow: hidden;
   background: linear-gradient(150deg, var(--green-deep) 0%, var(--forest) 100%);
   color: #fff;
   padding: clamp(50px, 6vw, 86px) 0;
}

.inquiry .blob--1 {
   position: absolute;
   width: 460px;
   height: 460px;
   border-radius: 50%;
   top: -170px;
   right: -130px;
   opacity: .5;
   background: radial-gradient(circle, rgba(46, 158, 106, .32), transparent 70%);
   pointer-events: none;
}

.inquiry-grid {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(32px, 5vw, 60px);
   align-items: center;
}

.inquiry-copy .eyebrow {
   color: #93e3b1;
   margin-bottom: 14px;
}

.inquiry-copy h2 {
   color: #fff;
   font-size: clamp(26px, 3vw, 38px);
   line-height: 1.14;
}

.inquiry-copy p {
   color: rgba(255, 255, 255, .82);
   margin-top: 16px;
   max-width: 46ch;
   line-height: 1.62;
}

.inquiry-contact {
   display: flex;
   flex-wrap: wrap;
   gap: 14px 28px;
   margin-top: 26px;
}

.inquiry-contact a {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   color: #fff;
   font-weight: 600;
   font-size: 15px;
}

.inquiry-contact a i,
.inquiry-contact a svg {
   color: #93e3b1;
   font-size: 15px;
}

.inquiry-contact a:hover {
   opacity: .82;
}

.inquiry-card {
   background: #fff;
   border-radius: var(--r-xl);
   padding: clamp(24px, 3vw, 34px);
   box-shadow: 0 44px 84px -44px rgba(0, 0, 0, .65);
}

.inquiry-success {
   text-align: center;
   padding: 22px 0;
}

.inquiry-success .ok {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: var(--sage-050);
   color: var(--green-ink);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 14px;
}

.inquiry-success .ok i {
   font-size: 26px;
}

.inquiry-success h3 {
   font-size: 20px;
   color: var(--ink);
}

.inquiry-success p {
   color: var(--muted);
   margin-top: 6px;
}

@media (max-width: 820px) {
   .inquiry-grid {
      grid-template-columns: 1fr;
      gap: 30px;
   }
}

.facts-strip .fs-title,
.facts-strip .fs-title i {
   color: var(--ink);
}

.facts-strip .ic {
   background: rgba(0, 37, 95, .07);
   color: var(--ink);
}

.contact-card-item h3 {
   color: var(--ink);
}

.contact-card-item .ic {
   background: rgba(0, 37, 95, .07);
   color: var(--ink);
}