/* ═══════════════════════════════════════════════
   GREEN & LIME DESIGN: SHARED BASE
   Used by every page with body.gl. The *-classic.html pages
   (the previous design) don't load it. Tokens, nav, the hero shell, rounded
   panels, the lime word band, testimonials, the closing CTA,
   the footer and the scroll reveal live here; each page file
   adds its own sections.
   The hero sheen comes from home-v8.css (.v8-hero / .v8-sheen)
   unchanged, so every concept hero keeps the one-way motion.
   ═══════════════════════════════════════════════ */

/* ── TOKENS ── */
.gl{
  --gl-brand:#06392f;--gl-deep:#042a22;--gl-mid:#0b4a3d;
  --gl-teal:#2fa383;--gl-dteal:#0f5c4b;
  --gl-lime:#c6f16b;--gl-lime-hover:#d4f68a;--gl-lime-soft:#e9fbc4;
  --gl-cream:#f4f6f1;--gl-ink:#0b1f1a;--gl-muted:#5a6a65;
  --gl-line:rgba(6,57,47,.12);--gl-line-dark:rgba(255,255,255,.12);
  --gl-max:1240px;--gl-gutter:24px;
  --gl-panel-r:40px;--gl-panel-m:12px;
  /* spacing standard, used on every concept page:
     --gl-s     gap between one section's content and the next section (or a panel edge)
     --gl-head  gap between a section header (eyebrow, h2, lead) and the section's content
     --gl-panel-m (above) also sets the gap where two rounded panels, or a panel and the footer, meet */
  --gl-s:110px;--gl-head:48px;
  --gl-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306392f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background:var(--gl-cream);color:var(--gl-ink);
}
@media(max-width:640px){.gl{--gl-gutter:16px;--gl-panel-r:28px;--gl-panel-m:8px;--gl-s:76px;--gl-head:32px}}
.gl .gl-wrap,.gl .section-wrap,.gl .sec-wrap,.gl .cal-inner,.gl .hcta-inner,.gl .footer-inner{max-width:calc(var(--gl-max) + 2 * var(--gl-gutter));margin:0 auto;padding:0 var(--gl-gutter)}

/* ── TYPE ── */
.gl h2{font-size:clamp(32px,4.4vw,56px);font-weight:700;line-height:1.08;letter-spacing:-.03em;color:var(--gl-ink)}
/* eyebrow: small caps label with a lime dot (lime text on dark) */
.gl-eyebrow,.gl .sec-label,.gl .v8-logos-label,.gl .numbers-label,.gl .hcta-label,.gl .team-right-label{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font-size:13px;font-weight:700;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--gl-brand)}
.gl-eyebrow::before,.gl .sec-label::before,.gl .v8-logos-label::before,.gl .numbers-label::before,.gl .hcta-label::before,.gl .team-right-label::before{content:"";flex-shrink:0;width:8px;height:8px;margin:0 0 0 4px;border-radius:50%;background:var(--gl-lime);box-shadow:0 0 0 4px rgba(198,241,107,.4)}
.gl .gl-hero .gl-eyebrow,.gl .gl-panel-dark .gl-eyebrow,.gl .cal-section .sec-label,.gl .numbers-label,.gl .hcta-label{color:var(--gl-lime)}
.gl .gl-hero .gl-eyebrow::before,.gl .gl-panel-dark .gl-eyebrow::before,.gl .cal-section .sec-label::before,.gl .numbers-label::before,.gl .hcta-label::before{box-shadow:0 0 0 4px rgba(198,241,107,.18)}

/* ── ARROW BADGE (inside pill buttons) ── */
.gl-arr{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--gl-brand);color:var(--gl-lime);transition:transform .25s ease,background-color .2s ease,color .2s ease}
.gl-arr svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ── ROUNDED PANELS ── */
.gl-panel{position:relative;overflow:hidden;isolation:isolate;margin:0 var(--gl-panel-m);border-radius:var(--gl-panel-r)}
.gl-panel+.gl-panel{margin-top:var(--gl-panel-m)}
.gl-panel>.v8-wrap,.gl-panel>.gl-wrap{position:relative;z-index:1}
.gl .gl-panel-dark{background:var(--gl-brand);color:rgba(255,255,255,.78)}
.gl .gl-panel-dark h2,.gl .gl-panel-dark h3{color:#fff}
.gl .gl-panel-light{background:#fff}
/* soft corner glows (radial gradients, no blur filter) */
.gl-glow{position:absolute;z-index:0;border-radius:50%;pointer-events:none}
.gl-glow-lime{top:-220px;right:-160px;width:560px;height:560px;background:radial-gradient(closest-side,rgba(198,241,107,.2),transparent)}
.gl-glow-teal{bottom:-280px;left:-220px;width:680px;height:680px;background:radial-gradient(closest-side,rgba(47,163,131,.32),transparent)}

/* ── ANNOUNCEMENT BAR + NAV (shared partial, re-skinned here only) ── */
.gl .ann{background:var(--gl-deep);border-bottom:1px solid var(--gl-line-dark)}
.gl .ann-text strong{color:var(--gl-lime)}
.gl .ann-btn{background:var(--gl-lime);color:var(--gl-brand);border-radius:999px}
.gl .ann-btn:hover{background:var(--gl-lime-hover)}
/* sticky, and pulled over the hero by its own height: transparent at the top, solid once scrolled (green-lime.js) */
.gl nav{margin-bottom:-70px;padding:0 max(var(--gl-gutter),calc((100% - var(--gl-max)) / 2));background:transparent;border-bottom:1px solid transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .3s ease,border-color .3s ease}
.gl-scrolled .gl nav{background:rgba(4,42,34,.92);border-bottom-color:var(--gl-line-dark);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.gl .nav-logo{color:#fff}
.gl .nav-logo span{color:var(--gl-lime)}
.gl .nav-links a{color:rgba(255,255,255,.78)}
.gl .nav-links a:hover,.gl .nav-links a.active{color:#fff;border-bottom-color:var(--gl-lime)}
.gl .nav-dropdown{border:1px solid var(--gl-line);border-radius:14px}
.gl .nav-dropdown a{color:var(--gl-muted);border-radius:10px}
.gl .nav-dropdown a:hover{color:var(--gl-brand);background:var(--gl-cream)}
.gl .nav-cta{display:inline-flex;align-items:center;gap:10px;padding:8px 8px 8px 20px;border-radius:999px;background:var(--gl-lime);color:var(--gl-brand);transition:background-color .2s ease,transform .2s ease}
.gl .nav-cta::after{content:"";flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--gl-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6f16b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/13px no-repeat}
.gl .nav-cta:hover{background:var(--gl-lime-hover);transform:translateY(-2px)}
@media(min-width:769px){.gl .nav-sign{right:max(var(--gl-gutter),calc((100% - var(--gl-max)) / 2))}}
.gl .nav-hamburger{gap:4px;padding:12px 10px;border:1px solid rgba(255,255,255,.3);border-radius:12px}
.gl .nav-hamburger span{width:20px;background:#fff}
.gl .nav-mobile{top:calc(100% + 8px);left:var(--gl-panel-m);right:var(--gl-panel-m);max-height:calc(100dvh - 90px);padding:10px 22px 22px;background:var(--gl-deep);border:1px solid var(--gl-line-dark);border-radius:22px;box-shadow:0 24px 48px rgba(0,0,0,.3)}
.gl .nav-mobile a{color:#fff;border-bottom-color:var(--gl-line-dark)}
.gl .nav-mobile .nm-group{border-bottom-color:var(--gl-line-dark)}
.gl .nm-toggle{color:#fff}
.gl .nav-mobile .nm-submenu .nm-sub{color:rgba(255,255,255,.72)}
.gl .nav-mobile .nm-submenu .nm-sub::before{background:var(--gl-lime)}
.gl .nav-mobile .nm-cta{background:var(--gl-lime);color:var(--gl-brand);border-radius:999px}
@media(max-width:860px){
  .gl .nav-links,.gl .nav-cta{display:none}
  .gl .nav-hamburger{display:flex}
}

/* ── HERO SHELL (v8 sheen + grid + glows, rounded bottom) ── */
.gl .gl-hero{padding:0;border-radius:0 0 var(--gl-panel-r) var(--gl-panel-r)}
.gl .gl-page-hero{min-height:0}
.gl-hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 80% 90% at 100% 0,#000,transparent 70%);mask-image:radial-gradient(ellipse 80% 90% at 100% 0,#000,transparent 70%)}
.gl .gl-hero .gl-glow-lime{top:-260px;right:-200px;width:720px;height:720px}
/* width:100%: as a flex child with auto side margins the wrapper would otherwise shrink to its content and drift off the nav's left edge */
.gl .gl-hero .gl-hero-inner{position:relative;z-index:1;width:100%;flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:150px;padding-bottom:72px}
.gl .gl-hero h1{margin:0;font-size:min(75px,7.2vw);font-weight:700;line-height:1.08;letter-spacing:-.03em;color:#fff}
.gl .gl-hero h1.gl-h1-long{max-width:24ch;font-size:min(52px,5vw)}
.gl-hl{color:var(--gl-lime)}
.gl-hero-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);align-items:end;gap:40px 64px;margin-top:56px}
.gl .gl-hero-sub,.gl .gl-hero .v8-hero-sub{max-width:560px;margin-top:0;font-size:18px;line-height:1.55;color:rgba(255,255,255,.78)}
.gl-stats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gl-stat{padding:22px 20px 20px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--gl-line-dark)}
.gl-stat-fig{display:block;font-size:30px;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--gl-lime);white-space:nowrap}
.gl-stat-label{display:block;margin-top:10px;font-size:14px;line-height:1.4;color:rgba(255,255,255,.72)}

/* ── WORK FRAME: coloured 4:3 frame with the screenshot inside a browser window ── */
.gl-frame{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:22px;transition:transform .4s ease}
.gl-frame-brand{background:var(--gl-brand)}
.gl-frame-lime{background:var(--gl-lime-soft)}
.gl-frame-teal{background:var(--gl-dteal)}
.gl-browser{position:absolute;top:28px;left:28px;right:28px;bottom:0;overflow:hidden;border-radius:12px 12px 0 0;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.22)}
.gl-browser-bar{display:flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-bottom:1px solid var(--gl-line)}
.gl-browser-bar i{width:8px;height:8px;border-radius:50%;background:#d6ddd8}
@media(max-width:640px){.gl-browser{top:20px;left:20px;right:20px}}

/* ── WORD MARQUEE BAND (lime, slightly rotated) ── */
.gl-band{overflow:hidden;padding:28px 0 36px}
.gl-band-strip{margin:0 -40px;background:var(--gl-lime);transform:rotate(-1.2deg)}
.gl-band-track{display:flex;align-items:center;width:max-content;animation:gl-band 60s linear infinite}
.gl-band-word{display:inline-flex;align-items:center;padding:22px 0;font-size:clamp(26px,3.6vw,48px);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--gl-brand);white-space:nowrap}
.gl-band-word svg{width:.78em;height:.78em;margin-right:.3em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gl-band-sep{margin:0 .9em;font-size:clamp(16px,2vw,26px);color:var(--gl-brand)}
@keyframes gl-band{to{transform:translateX(-50%)}}
/* the band counts as a section: one --gl-s from the neighbouring content or panel edge to the strip.
   The band keeps 28px of that inside (room for the rotation); the neighbours give the rest. */
.gl .gl-band{padding:28px 0}
.gl section:not(.gl-panel):has(+ .gl-band){padding-bottom:calc(var(--gl-s) - 28px)}
.gl .gl-band + section:not(.gl-panel){padding-top:calc(var(--gl-s) - 28px)}
.gl .gl-panel:has(+ .gl-band){margin-bottom:calc(var(--gl-s) - 28px)}
.gl .gl-band + .gl-panel{margin-top:calc(var(--gl-s) - 28px)}

/* ── TESTIMONIAL CARDS (Our Work + Why Us; the middle card is the dark one) ── */
.gl .test-section{padding:110px 0;background:none}
.gl .test-grid{gap:20px;margin-top:var(--gl-head)}
.gl .test-card{padding:36px;background:#fff;border:1px solid var(--gl-line);border-radius:22px;transition:transform .3s ease,box-shadow .3s ease}
.gl .test-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(6,57,47,.1)}
.gl .test-qmark{top:14px;right:24px;font-size:72px;color:var(--gl-teal);opacity:.35}
.gl .test-industry{border:0;border-radius:999px;background:var(--gl-lime-soft);color:var(--gl-brand)}
.gl .test-text{font-size:16px;line-height:1.7;font-style:normal;color:var(--gl-ink)}
.gl .test-author{border-top-color:var(--gl-line)}
.gl .test-av{background:var(--gl-brand);color:var(--gl-lime)}
.gl .test-name{color:var(--gl-ink)}
.gl .test-role{color:var(--gl-muted)}
.gl .test-card:nth-child(2){background:var(--gl-brand);border-color:var(--gl-brand)}
.gl .test-card:nth-child(2) .test-qmark{color:var(--gl-lime);opacity:1}
.gl .test-card:nth-child(2) .test-industry{background:rgba(198,241,107,.16);color:var(--gl-lime)}
.gl .test-card:nth-child(2) .test-text{color:rgba(255,255,255,.88)}
.gl .test-card:nth-child(2) .test-author{border-top-color:var(--gl-line-dark)}
.gl .test-card:nth-child(2) .test-av{background:var(--gl-lime);color:var(--gl-brand)}
.gl .test-card:nth-child(2) .test-name{color:#fff}
.gl .test-card:nth-child(2) .test-role{color:rgba(255,255,255,.6)}

/* ── CLOSING CTA (dark panel; the booking widget is the white card) ── */
.gl .cal-section,.gl .hcta-section{position:relative;overflow:hidden;isolation:isolate;margin:0 var(--gl-panel-m) var(--gl-panel-m);padding:110px 0;border-top:0;border-radius:var(--gl-panel-r);background:var(--gl-brand)}
.gl .cal-inner,.gl .hcta-inner{position:relative;z-index:1;gap:64px}
.gl .cal-h2,.gl .hcta-h2{margin-bottom:20px;color:#fff}
.gl .cal-sub,.gl .hcta-sub{margin-bottom:36px;font-size:18px;line-height:1.55;color:rgba(255,255,255,.75)}
.gl .cal-guar{align-items:center}
.gl .cal-tick{width:34px;height:34px;margin:0;background:var(--gl-lime)}
.gl .cal-tick svg{width:15px;height:15px;stroke:var(--gl-brand);stroke-width:3}
.gl .cal-guar-text{color:rgba(255,255,255,.75)}
.gl .cal-guar-text strong{color:#fff}
.gl .cal-host,.gl .hcta-host{background:rgba(255,255,255,.06);border-color:var(--gl-line-dark);border-radius:22px}
.gl .cal-host-name,.gl .hcta-host-name{color:#fff}
.gl .cal-host-role,.gl .hcta-host-role{color:rgba(255,255,255,.6)}
.gl .cal-host-tag,.gl .hcta-host-tag{border-radius:999px;background:rgba(198,241,107,.14);color:var(--gl-lime)}
.gl .cal-right{border:0;border-radius:22px;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.gl .cal-widget-header{padding:28px 32px;background:#fff;border-bottom:1px solid var(--gl-line)}
.gl .cal-widget-title{font-size:20px;color:var(--gl-ink)}
.gl .cal-widget-sub{color:var(--gl-muted)}
.gl .cal-widget-icon{width:46px;height:46px;border-radius:12px;background:var(--gl-lime-soft)}
.gl .cal-widget-icon svg{stroke:var(--gl-brand)}
.gl .cal-duration-badge{border-radius:999px;background:var(--gl-lime-soft)}
.gl .cal-divider{background:var(--gl-line)}
.gl .cal-agenda-dot{background:var(--gl-teal)}
.gl .cal-book-btn{padding:17px 24px;border-radius:999px;background:var(--gl-brand);transition:background-color .2s ease,transform .2s ease}
.gl .cal-book-btn:hover{background:var(--gl-mid);transform:translateY(-2px)}

/* ── FOOTER (shared partial, re-skinned here only) ── */
.gl footer{padding:88px 0 40px;background:var(--gl-cream)}
.gl .footer-grid{grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:40px}
.gl .footer-brand-name{color:var(--gl-brand)}
.gl .footer-brand-name span{color:var(--gl-teal)}
.gl .footer-tagline,.gl .footer-media{color:var(--gl-muted)}
.gl .footer-reg{font-size:13px;font-weight:700;color:var(--gl-ink)}
.gl .footer-media a{color:var(--gl-brand);border-bottom-color:var(--gl-teal)}
.gl .footer-col-h{font-size:12px;letter-spacing:.14em;color:var(--gl-brand);opacity:1}
.gl .footer-links a{color:var(--gl-muted);overflow-wrap:anywhere}
.gl .footer-links a:hover{color:var(--gl-brand)}
.gl .footer-addr{color:var(--gl-muted)}
.gl .footer-bottom{border-top-color:var(--gl-line)}
.gl .footer-copy{color:var(--gl-muted)}
.gl .footer-social{border-color:var(--gl-line);border-radius:50%}
.gl .footer-social:hover{border-color:var(--gl-brand)}
.gl .footer-social svg{stroke:var(--gl-brand)}

/* ── SCROLL REVEAL (green-lime.js adds .gl-anim; without JS everything stays visible) ── */
.gl-anim .gl-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.gl-anim .gl-reveal.is-in{opacity:1;transform:none}

/* ── RESPONSIVE ── */
@media(max-width:1080px){
  .gl-hero-bottom{grid-template-columns:minmax(0,1fr)}
  .gl .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gl .footer-grid>div:first-child{grid-column:span 2}
}
@media(max-width:1024px){
  .gl .cal-inner,.gl .hcta-inner{grid-template-columns:1fr 1fr}
  .gl .test-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .gl .cal-inner,.gl .hcta-inner{grid-template-columns:minmax(0,1fr);gap:48px}
}
/* phones and small tablets: the open signboard hangs over the top of the hero, so the copy starts below it */
@media(max-width:768px){.gl .gl-hero .gl-hero-inner{padding-top:160px}}
@media(max-width:640px){
  .gl .cal-section,.gl .hcta-section,.gl .test-section{padding:76px 0}
  .gl .gl-hero .gl-hero-inner{padding-top:160px;padding-bottom:48px}
  .gl .gl-hero h1{font-size:min(8.4vw,46px)}
  .gl .gl-hero h1.gl-h1-long{font-size:min(7.2vw,32px)}
  .gl-hero-bottom{margin-top:36px}
  .gl .gl-hero-sub,.gl .gl-hero .v8-hero-sub{font-size:17px}
  .gl-stats{grid-template-columns:minmax(0,1fr);gap:8px}
  .gl-stat{display:flex;align-items:center;gap:16px;padding:16px 18px}
  .gl-stat-fig{flex:0 0 4.4em;font-size:24px}
  .gl-stat-label{margin-top:0}
  .gl .test-grid{grid-template-columns:minmax(0,1fr)}
  .gl .test-card{padding:28px 24px}
  .gl .cal-widget-header{padding:22px 20px}
  .gl .cal-widget-body{padding:24px 20px}
  .gl .footer-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .gl .footer-grid>div:first-child{grid-column:auto}
  .gl footer{padding:64px 0 28px}
}

/* ── REDUCED MOTION: no marquees, no reveal transforms ── */
@media(prefers-reduced-motion:reduce){
  .gl .v8-sheen-layer,.gl-band-track{animation:none}
  .gl-band{overflow-x:auto}
  .gl-arr,.gl .nav-cta,.gl .cal-book-btn,.gl .test-card{transition:none}
  .gl .nav-cta:hover,.gl .cal-book-btn:hover,.gl .test-card:hover{transform:none}
}