/* ============================================================
   GETMORE – main.css (Greenbank Official Framer Theme)
   Colors · Fonts · Design Tokens · Base Layout
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,700;1,800;1,900&display=swap');

@font-face {
  font-family: "Montserrat Placeholder";
  src: local("Arial");
  ascent-override: 84.98%;
  descent-override: 22.04%;
  line-gap-override: 0.00%;
  size-adjust: 113.90%;
}

/* ─── Greenbank Design Tokens ───────────────────────────────── */
:root {
  /* Greenbank Signature Colors with Pure White Canvas */
  --gb-dark-green:     #004737;   /* Deep Emerald Forest Green */
  --gb-dark-green-90:  #004737E6; /* 90% opacity dark green */
  --gb-mint:           #56F09F;   /* Vibrant Electric Mint Accent */
  --gb-mint-light:     #D4FFE8;   /* Soft Mint Tint for tags/pills */
  --gb-cream:          #FFFFFF;   /* Pure White Background */
  --gb-cream-100:      #F7FAF8;   /* Light off-white section background */
  --gb-cream-200:      #E4EFEB;   /* Crisp subtle border tone */
  --gb-cream-300:      #CFE0D8;   /* Active border tone */
  --gb-white:          #FFFFFF;
  --gb-border-dark:    rgba(0, 71, 55, 0.12); /* 12% dark green border */

  /* Palette Mappings */
  --green-50:          #F0FDF7;
  --green-100:         var(--gb-mint-light);  /* #D4FFE8 */
  --green-200:         #B0FBD3;
  --green-300:         #80F7B8;
  --green-400:         var(--gb-mint);        /* #56F09F */
  --green-500:         #34D37A;
  --green-600:         #007A5E;
  --green-700:         #005C47;
  --green-800:         var(--gb-dark-green);  /* #004737 */
  --green-900:         #003327;

  /* Aliases */
  --primary:           var(--gb-dark-green);
  --primary-accent:    var(--gb-mint);
  --primary-light:     var(--gb-mint-light);
  --primary-bg:        var(--gb-mint-light);

  /* Dark Sections (Showcase, CTA, Footer) */
  --dark-bg:           #004737;   /* Pure Greenbank Forest */
  --dark-bg-card:      #00382C;   /* Slightly deeper card on dark */
  --dark-bg-border:    rgba(86, 240, 159, 0.25);

  /* Neutral Canvas */
  --cream:             #FFFFFF;   /* Pure White */
  --cream-100:         #F7FAF8;   /* Subtle alternate */
  --cream-200:         #E4EFEB;   /* Subtle border */
  --cream-300:         #CFE0D8;   /* Accent border */

  /* Neutrals */
  --neutral-50:        #FAFAFA;
  --neutral-100:       #F5F8F6;
  --neutral-200:       #E2ECE8;
  --neutral-300:       #C8D7D2;
  --neutral-400:       #8EA69F;
  --neutral-500:       #5C7871;
  --neutral-600:       #3A5952;
  --neutral-700:       #21423B;
  --neutral-800:       #10352D;
  --neutral-900:       #004737;   /* Headers use deep green */

  /* Status */
  --success:           #10B981;
  --warning:           #F59E0B;
  --error:             #EF4444;
  --accent:            var(--gb-mint);

  /* Typography */
  --font-heading:      "Montserrat", "Montserrat Placeholder", sans-serif;
  --font-body:         "Montserrat", "Montserrat Placeholder", sans-serif;
  --font:              "Montserrat", "Montserrat Placeholder", sans-serif;

  /* Spacing (8-pt scale) */
  --s1:  4px;  --s2:  8px;  --s3:  12px; --s4:  16px;
  --s5:  20px; --s6:  24px; --s8:  32px; --s10: 40px;
  --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px;

  /* Radii */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   18px;
  --r-lg:   28px;
  --r-xl:   36px;
  --r-full: 9999px;

  /* Shadows */
  --sh-xs:    0 1px 4px rgba(0, 71, 55, 0.04);
  --sh-sm:    0 2px 8px rgba(0, 71, 55, 0.06);
  --sh-md:    0 6px 20px rgba(0, 71, 55, 0.08);
  --sh-lg:    0 12px 36px rgba(0, 71, 55, 0.12);
  --sh-xl:    0 24px 60px rgba(0, 71, 55, 0.16);
  --sh-mint:  0 8px 30px rgba(86, 240, 159, 0.35);
  --sh-green: 0 8px 28px rgba(0, 71, 55, 0.25);
  --sh-card:  0 4px 24px rgba(0, 71, 55, 0.06);

  /* Transitions */
  --t-fast:   150ms ease-in-out;
  --t-base:   300ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-slow:   600ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-base:  1;
  --z-above: 10;
  --z-nav:   1000;
  --z-top:   9999;

  /* Layout */
  --max-w:    1200px;
  --nav-h:    80px;
}

/* ─── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body, input, textarea, select, button {
  font-family: "Montserrat", "Montserrat Placeholder", sans-serif;
}
body  {
  background-color: #ffffff;
  color: var(--neutral-900);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
button { font-family: var(--font-heading); cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.22;
  font-weight: 600;
  color: var(--gb-dark-green);
  letter-spacing: -0.015em;
}
p {
  color: #3B5850;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.005em;
}
input, textarea, select { font-family: inherit; }

/* ─── Layout Helpers ────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--s6);
}
@media (min-width: 1025px) { .container { padding-inline: var(--s10); } }

.section-py  { padding-block: var(--s20); }
.section-py-sm { padding-block: var(--s12); }
@media (max-width: 640px) {
  .section-py    { padding-block: var(--s12); }
  .section-py-sm { padding-block: var(--s10); }
}

/* ─── Typography Helpers ────────────────────────────────────── */
.text-display { font-family: var(--font-heading); font-size: clamp(2.25rem, 5.5vw, 3.875rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; color: var(--gb-dark-green); }
.text-h1      { font-family: var(--font-heading); font-size: clamp(1.875rem, 4vw, 2.75rem); font-weight: 600; letter-spacing: -0.02em; color: var(--gb-dark-green); }
.text-h2      { font-family: var(--font-heading); font-size: clamp(1.625rem, 3vw, 2.25rem); font-weight: 600; letter-spacing: -0.015em; color: var(--gb-dark-green); }
.text-h3      { font-family: var(--font-heading); font-size: clamp(1.125rem, 2vw, 1.4375rem); font-weight: 600; color: var(--gb-dark-green); }
.text-lg      { font-size: clamp(1rem, 1.5vw, 1.125rem); }
.text-sm      { font-size: 0.875rem; }
.text-xs      { font-size: 0.75rem; }

/* ─── Section Header (Greenbank style) ──────────────────────── */
.sec-tag {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--gb-mint-light); color: var(--gb-dark-green);
  font-family: var(--font-heading); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--r-full); margin-bottom: var(--s4);
  border: 1px solid rgba(0, 71, 55, 0.12);
}
.sec-tag.dark {
  background: rgba(86, 240, 159, 0.15); color: var(--gb-mint);
  border-color: rgba(86, 240, 159, 0.3);
}

.sec-title {
  font-family: var(--font-heading);
  font-size: clamp(1.875rem, 3.8vw, 2.625rem);
  font-weight: 600; letter-spacing: -0.02em; color: var(--gb-dark-green);
  margin-bottom: var(--s4); line-height: 1.2;
}
.sec-title.light { color: #fff; }
.sec-title .accent { color: var(--gb-mint); font-weight: inherit; }

.sec-sub { font-size: 1.0625rem; font-weight: 400; color: #4A635D; line-height: 1.7; max-width: 540px; }
.sec-sub.light { color: rgba(255, 255, 255, 0.82); }

.sec-header { text-align: center; margin-bottom: var(--s12); }
.sec-header .sec-sub { margin-inline: auto; }

/* ─── Colour Utilities ──────────────────────────────────────── */
.text-green  { color: var(--gb-mint); }
.text-dark   { color: var(--gb-dark-green); }
.text-white  { color: #fff; }
.text-muted  { color: var(--neutral-400); }
.bg-cream    { background: var(--gb-cream); }
.bg-cream-2  { background: var(--gb-cream-100); }
.bg-white    { background: #fff; }
.bg-dark     { background: var(--gb-dark-green); }
.bg-mint     { background: var(--gb-mint); }

/* ─── Scroll-to-top ─────────────────────────────────────────── */
#scroll-top-btn {
  position: fixed; bottom: var(--s6); right: var(--s6);
  width: 46px; height: 46px;
  background: var(--gb-dark-green); color: var(--gb-mint);
  border: 1.5px solid rgba(86, 240, 159, 0.3);
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-lg); z-index: var(--z-above);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base), background var(--t-fast);
  cursor: pointer;
}
#scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
#scroll-top-btn:hover   { background: var(--gb-mint); color: var(--gb-dark-green); transform: translateY(-2px); box-shadow: var(--sh-mint); }

/* ─── Accessibility ─────────────────────────────────────────── */
.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; }
@media (max-width: 640px)  { .hide-mobile { display: none !important; } }
@media (min-width: 641px)  { .show-mobile { display: none !important; } }
@media (max-width: 1024px) { .hide-tablet { display: none !important; } }