/* ===================================================================
   Capital Growth Consulting
   One stylesheet for the whole site.

   How this file is organised:
     1.  Colours, fonts and other values used everywhere
     2.  Base / reset
     3.  Shared pieces (page width, buttons, small labels)
     4.  Header and navigation
     5.  Hero
     6.  Results You Can Measure
     7.  How Work Moves Forward
     8.  The Clouds We Work In
     9.  Services
     10. Talk Through Your Challenge (contact)
     11. Footer
     12. Smaller screens

   Change a colour once in section 1 and it updates everywhere.
   =================================================================== */


/* ===================================================================
   1. Colours, fonts and shared values
   =================================================================== */
:root {
  /* Greens, darkest first */
  --green-dark:    #14341C;   /* dark bands, footer, button hover */
  --green:         #214C2D;   /* the main brand green */
  --green-mid:     #27663A;   /* small labels, link hover */
  --green-light:   #3E8A55;   /* phase 3 marker */
  --green-lighter: #5AA470;   /* phase 4 marker */

  /* Accent */
  --amber:       #E9A13B;     /* the statistics, the + icons */
  --amber-alt:   #E89B38;     /* "MOST ASKED FOR", "Proud partners of" */

  /* Text */
  --ink:         #1C221D;     /* headings */
  --body:        #3D4640;     /* body copy */
  --muted:       #5F6B62;     /* supporting copy */
  --muted-light: #8A948B;     /* "Prefer email?" */

  /* Lines, borders and tints */
  --rule:        rgba(20, 34, 28, .14);
  --rule-strong: rgba(20, 34, 28, .3);
  --border:      #DDE3DD;
  --tint:        #F2F4F0;     /* service card background */
  --tint-warm:   #F5F7F3;     /* alternating phase rows */
  --step-circle: #DFE9E0;     /* the 1-2-3 circles */
  --error:       #A3341F;

  /* Fonts. Loaded from Google Fonts in the page head. */
  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-body:    Archivo, system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* The site never gets wider than this, matching the approved designs */
  --page: 1080px;
}


/* ===================================================================
   2. Base
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Browsers add their own margins above and below headings and paragraphs.
   They are cleared here so every gap on the page is one we chose, and the
   spacing matches the approved designs rather than drifting by ~12px per
   block. Where a gap is wanted it is set explicitly further down. */
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #FFFFFF;
  font-family: var(--font-body);
  color: var(--body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--green-mid); }
a:hover { color: var(--green); }

/* Anything focused by keyboard gets a clear ring. */
:focus-visible {
  outline: 2px solid var(--green-mid);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Visible to screen readers, invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Skip link, for people navigating by keyboard. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--green);
  color: #FFFFFF;
  padding: 12px 20px;
  font: 600 14px/1 var(--font-body);
  text-decoration: none;
}
.skip-link:focus { left: 0; color: #FFFFFF; }


/* ===================================================================
   3. Shared pieces
   =================================================================== */

/* Caps the content at 1080px and centres it. Sections that need a
   full-width background wrap their content in one of these. */
.wrap {
  max-width: var(--page);
  margin: 0 auto;
  width: 100%;
}

/* The small uppercase mono labels, e.g. "Salesforce implementation partner" */
.eyebrow {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-mid);
}

/* Filled pill button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 16px 30px;
  background: var(--green);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  font: 600 14px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}
.btn:hover { background: var(--green-dark); color: #FFFFFF; }

/* Outlined pill button */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: transparent;
  font: 600 13px/1 var(--font-body);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-outline:hover { border-color: var(--green); color: var(--green); }

/* Section headings used by the two-column sections */
.section-title {
  margin: 0 0 26px;
  font: 700 clamp(32px, 5vw, 48px)/1.02 var(--font-display);
  letter-spacing: -.035em;
  color: var(--ink);
  text-wrap: pretty;
}


/* ===================================================================
   4. Header and navigation
   =================================================================== */
.site-header {
  border-bottom: 1px solid rgba(20, 34, 28, .12);
  background: #FFFFFF;
  position: relative;
  z-index: 30;
}

.site-header .wrap {
  height: 68px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ----- The CGC mark and company name ----- */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.brand__mark {
  width: 34px;
  height: 34px;
  flex: none;
  background: var(--green);
  color: #FFFFFF;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 12px/1 var(--font-display);
  letter-spacing: .02em;
}

.brand__name {
  font: 400 11px/1.3 var(--font-body);
  color: rgba(20, 34, 28, .55);
}

/* ----- Desktop navigation ----- */
.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font: 500 13px/1 var(--font-body);
  color: var(--ink);
}

.nav__link {
  color: var(--ink);
  text-decoration: none;
  transition: color .15s;
}
.nav__link:hover { color: var(--green-mid); }

/* The Expertise dropdown */
.nav__dropdown { position: relative; }

.nav__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 24px 0;
  background: none;
  border: none;
  font: 500 13px/1 var(--font-body);
  color: var(--ink);
  cursor: pointer;
  transition: color .15s;
}
.nav__toggle:hover { color: var(--green-mid); }
.nav__toggle svg { transition: transform .16s ease; }
.nav__dropdown.is-open .nav__toggle svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px 22px;
  background: var(--green-dark);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(20, 34, 28, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 20;
}
.nav__dropdown.is-open .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__menu a {
  font: 400 14px/1 var(--font-body);
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: color .15s;
}
.nav__menu a:hover { color: #FFFFFF; }

.nav__cta {
  padding: 10px 18px;
  background: var(--green);
  color: #FFFFFF;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s;
}
.nav__cta:hover { background: var(--green-dark); color: #FFFFFF; }

/* ----- Hamburger, hidden until the screen is narrow ----- */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  position: relative;
  width: 18px;
  height: 2px;
  background: var(--ink);
  transition: background .15s;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--ink);
  transition: transform .18s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

/* Hamburger turns into a cross when the menu is open */
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }


/* ===================================================================
   5. Hero
   =================================================================== */
.hero .wrap { padding: 72px 40px 64px; }

.hero__eyebrow { display: block; margin-bottom: 26px; }

.hero h1 {
  margin: 0 0 26px;
  font: 700 clamp(40px, 7vw, 74px)/.98 var(--font-display);
  letter-spacing: -.04em;
  color: var(--ink);
  max-width: 840px;
  text-wrap: pretty;
}

.hero__intro {
  margin: 0 0 40px;
  font: 400 clamp(16px, 2vw, 18px)/1.5 var(--font-body);
  color: var(--body);
  max-width: 560px;
  text-wrap: pretty;
}


/* ===================================================================
   6. Results You Can Measure
   =================================================================== */
.results { background: var(--green-dark); }
.results .wrap { padding: 40px 60px 44px; }

.results h2 {
  margin: 0 0 30px;
  text-align: center;
  font: 700 clamp(22px, 3.4vw, 26px)/1.1 var(--font-display);
  letter-spacing: -.025em;
  color: #FFFFFF;
}

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

.results__item {
  padding: 0 26px;
  text-align: center;
}
/* Dividing lines between the three, matching the design */
.results__item + .results__item { border-left: 1px solid rgba(255, 255, 255, .16); }

.results__figure {
  font: 700 clamp(30px, 4.4vw, 40px)/1 var(--font-display);
  letter-spacing: -.04em;
  color: var(--amber);
  margin-bottom: 8px;
}

.results__label {
  font: 700 15px/1.3 var(--font-display);
  letter-spacing: -.02em;
  color: #FFFFFF;
  margin-bottom: 8px;
  text-wrap: pretty;
}

.results__note {
  font: 400 13px/1.55 var(--font-body);
  color: rgba(255, 255, 255, .7);
  text-wrap: pretty;
}


/* ===================================================================
   7. How Work Moves Forward
   =================================================================== */
.how .wrap,
.clouds .wrap {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 48px;
  padding: 64px 48px 72px;
}

.how__text p,
.clouds__text p {
  margin: 0 0 22px;
  font: 400 17px/1.6 var(--font-body);
  color: var(--body);
  max-width: 400px;
  text-wrap: pretty;
}
.how__text p:last-of-type { margin-bottom: 36px; }
.clouds__text p:last-of-type { margin-bottom: 0; }

.phases__label { display: block; margin-bottom: 14px; }

.phases {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 10px;
  background: #FFFFFF;
}

.phase {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: start;
  padding: 22px 24px 24px;
  border-left: 3px solid var(--green);
  background: var(--tint-warm);
}
/* Alternating white rows, and a lighter green marker as you go down */
.phase:nth-of-type(2) { background: #FFFFFF; border-left-color: var(--green-mid); }
.phase:nth-of-type(3) { border-left-color: var(--green-light); }
.phase:nth-of-type(4) { background: #FFFFFF; border-left-color: var(--green-lighter); }

.phase__num {
  font: 700 34px/1 var(--font-display);
  letter-spacing: -.03em;
  color: var(--green);
}
.phase:nth-of-type(2) .phase__num { color: var(--green-mid); }
.phase:nth-of-type(3) .phase__num { color: var(--green-light); }
.phase:nth-of-type(4) .phase__num { color: var(--green-lighter); }

.phase__title {
  font: 700 19px/1.2 var(--font-display);
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 7px;
}

.phase__text {
  font: 400 14px/1.55 var(--font-body);
  color: var(--muted);
  text-wrap: pretty;
}

.phase-arrow {
  display: flex;
  justify-content: center;
}


/* ===================================================================
   8. The Clouds We Work In
   =================================================================== */

/* The constellation deliberately reaches past the box it sits in, so its
   edges fall out of sight rather than being cut off mid-artwork. This
   stops that overhang from widening the page and creating a sideways
   scrollbar. "clip" rather than "hidden" because hidden would turn the
   section into a scroll container and break anchor links into it. */
.clouds { overflow-x: clip; }

/* The constellation sits inside a fixed-proportion box so the orbs
   can be positioned as percentages and stay put at any width. */
.clouds__diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 780 / 700;
  container-type: inline-size;
}

/* Larger than the box it sits in, and offset by the matching amount, so
   the extra drawing area falls outside the visible section. 1120/780 and
   980/700 give the size; -60/780 and -60/700 give the offset. Because
   both are derived from the same viewBox, the scale is unchanged and
   nothing moves - the artwork simply is not cut off any more. */
.clouds__constellation {
  position: absolute;
  left: -7.692%;
  top: -8.571%;
  width: 143.59%;
  height: 140%;
}

/* ----- The four orbs -----
   Two behaviours, depending on the device:

   - On a big screen with a mouse, hovering an orb expands it and reveals
     its description inside, exactly as the approved design does.
   - On a phone or any touchscreen, where hover does not exist, the orbs
     stay put and tapping one opens a panel below the diagram.

   The switch is further down, in section 12. */
/* The orb is always built at its FULL open size and scaled down to
   .659 when closed (.659 x 44% = the same 29% it has always rested at).
   Opening animates that one number back to 1.

   Two problems disappear as a result:

   - With transform-origin at the centre, an orb grows outward from its
     own middle. Nothing needs pinning inside the box, so the Nonprofit
     orb no longer slides left as it opens.
   - The text is laid out once, at the open size, and never again. Its
     width, font size and line breaks are fixed, so it cannot re-wrap or
     drift part-way through - the whole orb and its contents scale as
     one piece. */
.orb {
  position: absolute;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(10px, 1.4cqw);
  text-align: center;
  cursor: pointer;
  transform: scale(.659);
  transform-origin: 50% 50%;
  z-index: 3;
  background:
    radial-gradient(ellipse 42% 28% at 30% 14%, rgba(255,255,255,.5), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 35% 29%, #3D8250 0%, #256E38 26%, #214C2D 52%, #14341C 80%, #0A1D10 100%);
  box-shadow: 0 24px 44px -18px rgba(12, 35, 19, .5);
  /* Only the transform animates now, which is what keeps the centre
     fixed and the text still. */
  transition: transform .32s cubic-bezier(.4, 0, .2, 1),
              box-shadow .2s ease;
}

/* Each orb is placed so its CENTRE sits exactly on its constellation
   node, using the full 44% size. Half of 44 is 22 across; the vertical
   half is 24.51, because the box is 780 wide by 700 tall so a circle
   that is 44% wide is 49.03% tall. Scaling from the centre then keeps
   that point fixed in both states. */
.orb--sales     { left:  3.0%; top:  1.9%; }
.orb--service   { left: 50.4%; top: -3.1%; }
.orb--financial { left: 20.3%; top: 48.3%; }
.orb--nonprofit { left: 62.6%; top: 47.6%; }

/* Sized for the open state and left alone thereafter. The 85% width and
   the font size below are what the text is measured against once, so the
   line breaks are decided once and never revisited. */
.orb__name {
  width: 85%;
  font: 700 clamp(19.7px, 4.7cqw, 34.9px)/1.15 var(--font-display);
  color: #FFFFFF;
  letter-spacing: -.02em;
}

/* The description and link that sit inside an expanded orb.
   Hidden until the orb opens. */
.orb__details {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: min(8px, 1.2cqw);
  margin-top: min(2px, .3cqw);
  width: 85%;
}

.orb__desc {
  font: 400 clamp(11px, 2.75cqw, 20px)/1.35 var(--font-body);
  color: rgba(255, 255, 255, .82);
  text-wrap: pretty;
}

.orb__link {
  font: 600 clamp(11px, 2.8cqw, 20px)/1 var(--font-body);
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.orb__link:hover { color: var(--amber); }

.orb__plus { line-height: 0; }

/* ----- The panel that opens underneath, on touchscreens only ----- */
.cloud-panel {
  position: relative;
  margin-top: 26px;
  border-radius: 10px;
  padding: 24px 52px 26px 26px;
  background: linear-gradient(135deg, #214C2D 0%, #14341C 100%);
  box-shadow: 0 10px 28px -12px rgba(12, 35, 19, .5);
}
.cloud-panel[hidden] { display: none; }

.cloud-panel__title {
  margin: 0 0 8px;
  font: 700 20px/1.2 var(--font-display);
  letter-spacing: -.02em;
  color: #FFFFFF;
}

.cloud-panel__text {
  margin: 0 0 16px;
  font: 400 15px/1.5 var(--font-body);
  color: rgba(255, 255, 255, .82);
  text-wrap: pretty;
}

.cloud-panel__link {
  font: 600 14px/1 var(--font-body);
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cloud-panel__link:hover { color: var(--amber); }

.cloud-panel__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .1);
  border: none;
  border-radius: 50%;
  color: #FFFFFF;
  cursor: pointer;
  transition: background .15s;
}
.cloud-panel__close:hover { background: rgba(255, 255, 255, .22); }


/* ===================================================================
   9. Services
   =================================================================== */
.services .wrap { padding: 44px 40px 40px; }

.services__head { margin-bottom: 34px; }
.services__head .eyebrow { display: block; margin-bottom: 14px; }

.services__head h2 {
  margin: 0;
  font: 700 clamp(26px, 4.2vw, 36px)/1.08 var(--font-display);
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: pretty;
}

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

.service-card {
  border: 1px solid rgba(20, 34, 28, .16);
  background: var(--tint);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
}

.service-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.service-card__title {
  margin: 0;
  font: 700 21px/1.15 var(--font-display);
  color: var(--ink);
}

.service-card__flag {
  font: 500 9.5px/1 var(--font-mono);
  color: var(--amber-alt);
  white-space: nowrap;
}

.service-card__text {
  font: 400 13.5px/1.5 var(--font-body);
  color: var(--muted);
  margin-bottom: 22px;
  flex-grow: 1;
}

.service-card__price {
  font: 700 30px/1 var(--font-display);
  color: var(--green);
  margin-bottom: 4px;
}
.service-card__per {
  font: 500 14px/1 var(--font-body);
  color: var(--muted);
}
.service-card__vat {
  font: 500 12px/1 var(--font-body);
  color: var(--muted);
}

.service-card__terms {
  font: 500 10px/1 var(--font-mono);
  color: var(--muted);
  margin-bottom: 20px;
}

.service-card__list {
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
  font: 400 12.5px/1.7 var(--font-body);
  color: var(--body);
  border-top: 1px solid var(--rule);
}

/* The middle card is dark */
.service-card--feature {
  border-color: var(--green);
  background: var(--green-dark);
  color: #FFFFFF;
}
.service-card--feature .service-card__title { color: #FFFFFF; }
.service-card--feature .service-card__text  { color: rgba(255, 255, 255, .7); }
.service-card--feature .service-card__price { color: #FFFFFF; }
.service-card--feature .service-card__per,
.service-card--feature .service-card__vat,
.service-card--feature .service-card__terms { color: rgba(255, 255, 255, .55); }
.service-card--feature .service-card__list {
  color: rgba(255, 255, 255, .8);
  border-top-color: rgba(255, 255, 255, .2);
}

/* The wide "Project rescue" row underneath */
.service-wide {
  border: 1px solid rgba(20, 34, 28, .16);
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.service-wide__title {
  margin: 0 0 5px;
  font: 600 15px/1.3 var(--font-body);
  color: var(--ink);
}

.service-wide__text {
  margin: 0;
  font: 400 13px/1.5 var(--font-body);
  color: var(--muted);
}


/* ===================================================================
   10. Talk Through Your Challenge (the contact section)
   =================================================================== */
.contact { background: linear-gradient(180deg, #F3F6F1 0%, #EDF2EC 100%); }
.contact .wrap { padding: 64px 60px 72px; }

.contact h2 {
  margin: 0 0 16px;
  text-align: center;
  font: 700 clamp(28px, 4.4vw, 40px)/1.1 var(--font-display);
  letter-spacing: -.025em;
  color: var(--ink);
}

.contact__intro {
  margin: 0 auto 54px;
  max-width: 480px;
  text-align: center;
  font: 400 16px/1.5 var(--font-body);
  color: var(--muted);
  text-wrap: pretty;
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  align-items: start;
}

.contact__aside { padding-top: 6px; }

.aside__title {
  font: 700 19px/1.2 var(--font-body);
  color: var(--ink);
  margin-bottom: 22px;
}

.steps {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.steps li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font: 400 15.5px/1.4 var(--font-body);
  color: var(--body);
}

.steps__num {
  flex: none;
  width: 23px;
  height: 23px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--step-circle);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 11.5px/1 var(--font-body);
}

.aside__email {
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}

.aside__email-label {
  font: 400 13.5px/1 var(--font-body);
  color: var(--muted-light);
  margin-bottom: 18px;
}

.aside__email-row {
  display: flex;
  gap: 13px;
  align-items: center;
}

.aside__email-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 34, 28, .12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aside__email-row a {
  font: 400 16px/1 var(--font-body);
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.aside__email-row a:hover { color: var(--green); text-decoration: underline; }

/* ----- The form card ----- */
.form-card {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(20, 34, 28, .07);
  padding: 34px 36px 38px;
}

.field { margin-bottom: 20px; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.field-row .field { margin-bottom: 0; }

.field label {
  display: block;
  font: 500 13.5px/1 var(--font-body);
  color: var(--body);
  margin-bottom: 9px;
}

.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 13px;
  height: 42px;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
}

.field textarea {
  height: 118px;
  padding: 12px 13px;
  line-height: 1.4;
  resize: vertical;
}

.field input:focus,
.field textarea:focus { border-color: var(--green); }

/* Red border only once the person has typed something invalid,
   so an untouched empty form does not shout at them. */
.field input:not(:placeholder-shown):invalid,
.field textarea:not(:placeholder-shown):invalid { border-color: var(--error); }

.field--message { margin-bottom: 22px; }

.consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 26px;
}

.consent input {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--green);
  cursor: pointer;
}

.consent label {
  font: 400 14px/1.35 var(--font-body);
  color: var(--body);
}
.consent a { color: var(--green); text-decoration: underline; }

.form-card .btn {
  width: 100%;
  height: 58px;
  padding: 0;
  font-size: 15.5px;
}
.form-card .btn:disabled { opacity: .65; cursor: default; }

.form-status {
  margin-top: 18px;
  font: 400 14.5px/1.5 var(--font-body);
  text-align: center;
}
.form-status:empty { margin-top: 0; }
.form-status--ok    { color: var(--green); }
.form-status--error { color: var(--error); }

/* A field real people never see. Bots fill it in, which tells us
   the submission is spam. */
.honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}


/* ===================================================================
   11. Footer
   =================================================================== */
.site-footer { background: var(--green-dark); color: #FFFFFF; }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 48px 48px 46px;
}

.footer__heading {
  font: 700 15px/1 var(--font-body);
  color: #FFFFFF;
  margin-bottom: 20px;
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
  font: 400 14.5px/1 var(--font-body);
}

.footer__list a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color .15s;
}
.footer__list a:hover { color: #FFFFFF; }

/* Rule 1. Full bleed across the container - deliberately no side padding,
   so it runs wider than the 48px-inset blocks above and below it. */
.footer__rule {
  height: 1px;
  background: rgba(255, 255, 255, .12);
}

.footer__partners { padding: 34px 48px 44px; }

.footer__partners-label {
  font: 600 12px/1 var(--font-body);
  letter-spacing: .06em;
  color: var(--amber-alt);
  margin-bottom: 38px;
}

.partner-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.partner-logos li {
  height: 78px;
  flex: 1;
  /* min-width:0 lets a logo shrink below its own natural width instead
     of forcing the row wider than the page. */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-logos img {
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(1.15) opacity(.78);
  transition: filter .25s ease;
}
.partner-logos img:hover { filter: none; }

/* Each logo is a slightly different height in the approved design */
.partner-logos img[data-h="60"] { max-height: 60px; }
.partner-logos img[data-h="78"] { max-height: 78px; }
.partner-logos img[data-h="48"] { max-height: 48px; }
.partner-logos img[data-h="68"] { max-height: 68px; }

/* The legal bar. Per the footer build spec it is the last child of the
   footer and carries the second divider as its OWN top border, rather
   than there being a separate rule element. 18 + 12 + 18 + 1px = 49px. */
.footer__legal {
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 18px 48px;
  font: 400 12px/1 var(--font-body);
  color: rgba(255, 255, 255, .4);
}
.footer__legal a { color: rgba(255, 255, 255, .6); }
.footer__legal a:hover { color: #FFFFFF; }


/* ===================================================================
   11b. Inner pages

   Everything below is used by the nine pages other than Home. They all
   share the same shapes: a dark green hero, then alternating white and
   tinted sections holding either a card grid or a two-column split.
   =================================================================== */

/* Anchored sections (e.g. /services/#cloud-launch) stop just clear of
   the top of the window rather than flush against it. */
[id] { scroll-margin-top: 24px; }

/* "Start a conversation" jumps here. A NEGATIVE value scrolls slightly
   further than the section's own top, skipping its 64px of top padding
   so the heading lands at the top of the window instead of below a band
   of empty green. Purely a scroll position - it changes no spacing,
   size or layout anywhere on the page. */
#contact { scroll-margin-top: -64px; }

/* ----- The dark hero at the top of every inner page ----- */
.page-hero { background: var(--green-dark); }
.page-hero .wrap { padding: 88px 48px 84px; }

.page-hero h1 {
  margin: 0 0 26px;
  font: 700 clamp(36px, 5.8vw, 60px)/1.02 var(--font-display);
  letter-spacing: -.035em;
  color: #FFFFFF;
  max-width: 900px;
  text-wrap: pretty;
}

.page-hero p {
  margin: 0 0 18px;
  max-width: 880px;
  font: 400 17px/1.7 var(--font-body);
  color: rgba(255, 255, 255, .8);
  text-wrap: pretty;
}
.page-hero p:last-of-type { margin-bottom: 36px; }

/* Amber button, used on the dark hero where green would disappear */
.btn-amber {
  padding: 15px 32px;
  background: var(--amber-alt);
  color: var(--green-dark);
  font-size: 15px;
}
.btn-amber:hover { background: #F0AC52; color: var(--green-dark); }

/* ----- Generic content section ----- */
.section { background: #FFFFFF; }
.section--tint { background: var(--tint-warm); }
.section .wrap { padding: 84px 48px 88px; }

.section > .wrap > h2,
.section__title {
  margin: 0 0 14px;
  font: 700 clamp(28px, 4.4vw, 44px)/1.05 var(--font-display);
  letter-spacing: -.035em;
  color: var(--ink);
  text-wrap: pretty;
}

.section__intro {
  margin: 0 0 52px;
  max-width: 700px;
  font: 400 17px/1.7 var(--font-body);
  color: var(--muted);
  text-wrap: pretty;
}

/* ----- Two-column card grid ----- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.card {
  background: var(--tint-warm);
  border: 1px solid rgba(20, 34, 28, .1);
  padding: 34px;
  display: flex;
  flex-direction: column;
}
.section--tint .card { background: #FFFFFF; }

.card__icon { margin-bottom: 22px; line-height: 0; }

.card h3 {
  margin: 0 0 16px;
  font: 700 23px/1.2 var(--font-display);
  letter-spacing: -.025em;
  color: var(--ink);
}

.card p {
  margin: 0;
  font: 400 15.5px/1.68 var(--font-body);
  color: var(--muted);
  text-wrap: pretty;
}
.card p + p { margin-top: 14px; }

/* A partner card carries its logo on a dark tile, since most of the
   logos are dark-on-transparent and would vanish otherwise. */
.card__logo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: var(--green-dark);
  padding: 14px 18px;
  border-radius: 4px;
  margin-bottom: 22px;
}
.card__logo img { max-height: 34px; width: auto; }

/* ----- Two-column split: words one side, something else the other ----- */
.split .wrap {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 56px;
  align-items: center;
  padding: 84px 48px 80px;
}
/* align-items:center so the video sits level with the middle of the text
   beside it. The text column is much taller than a 16:9 video, so
   aligning to the top left the video stranded high in the section. */
.split--even .wrap { grid-template-columns: 1fr 1.15fr; align-items: center; }

.split h2 {
  margin: 0;
  font: 700 clamp(30px, 4.8vw, 46px)/1.05 var(--font-display);
  letter-spacing: -.035em;
  color: var(--ink);
  text-wrap: pretty;
}

.split p {
  margin: 18px 0 0;
  font: 400 16.5px/1.7 var(--font-body);
  color: var(--muted);
  text-wrap: pretty;
}

/* ----- Three-column feature list ----- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  row-gap: 52px;
  margin-top: 56px;
}

.feature h3,
.feature h4 {
  margin: 0 0 10px;
  font: 700 20px/1.25 var(--font-display);
  letter-spacing: -.02em;
  color: var(--ink);
}
/* A feature nested inside a card sits one level down, so it is an h4
   and set slightly smaller. */
.card .feature h4 { font-size: 17px; }

.feature p {
  margin: 0;
  font: 400 15px/1.65 var(--font-body);
  color: var(--muted);
  text-wrap: pretty;
}

/* ----- The Impact Framework: six points arranged either side of
        "Your Organisation" in the middle ----- */
.framework {
  display: grid;
  grid-template-columns: 1fr 300px 1fr;
  column-gap: 44px;
  row-gap: 46px;
  align-items: start;
  margin-top: 52px;
}

.framework__centre {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  text-align: center;
  color: #FFFFFF;
  background:
    radial-gradient(ellipse 42% 28% at 30% 14%, rgba(255,255,255,.45), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 35% 29%, #3D8250 0%, #256E38 26%, #214C2D 52%, #14341C 80%, #0A1D10 100%);
  box-shadow: 0 24px 44px -18px rgba(12, 35, 19, .5);
  font: 700 26px/1.15 var(--font-display);
  letter-spacing: -.02em;
}

.framework__item:nth-of-type(1) { grid-area: 1 / 1; }
.framework__item:nth-of-type(2) { grid-area: 2 / 1; }
.framework__item:nth-of-type(3) { grid-area: 3 / 1; }
.framework__item:nth-of-type(4) { grid-area: 1 / 3; }
.framework__item:nth-of-type(5) { grid-area: 2 / 3; }
.framework__item:nth-of-type(6) { grid-area: 3 / 3; }

.framework__item h3 {
  margin: 0 0 10px;
  font: 700 20px/1.25 var(--font-display);
  letter-spacing: -.02em;
  color: var(--ink);
}

.framework__item p {
  margin: 0;
  font: 400 15px/1.65 var(--font-body);
  color: var(--muted);
  text-wrap: pretty;
}

/* ----- Numbered list, used for the phases on How We Work ----- */
.stage {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 32px;
  padding: 38px 0;
  border-top: 1px solid var(--rule);
}
.stage:last-child { border-bottom: 1px solid var(--rule); }

.stage__num {
  font: 700 46px/1 var(--font-display);
  letter-spacing: -.04em;
  color: var(--green);
}

.stage h3 {
  margin: 0 0 12px;
  font: 700 26px/1.15 var(--font-display);
  letter-spacing: -.025em;
  color: var(--ink);
}

.stage p {
  margin: 0 0 20px;
  font: 400 16px/1.7 var(--font-body);
  color: var(--muted);
  max-width: 720px;
  text-wrap: pretty;
}

.stage__outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stage__outcomes li {
  font: 500 13px/1 var(--font-body);
  color: var(--green);
  background: var(--step-circle);
  padding: 9px 14px;
  border-radius: 999px;
}

.stage__label {
  display: block;
  margin-bottom: 12px;
}

/* ----- Demo video -----
   preload="none" means not a byte of the video is fetched until
   someone presses play, so it costs the page nothing to include. */
.video-frame {
  background: #0E1A12;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 14px 34px -18px rgba(12, 35, 19, .55);
}

.video-frame video {
  width: 100%;
  /* height:auto is what makes aspect-ratio work. The <video> tag carries
     height="720", which the browser treats as a real CSS height, and
     aspect-ratio is ignored whenever BOTH dimensions are already fixed.
     Freeing the height lets the 16:9 ratio below decide it instead. */
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  background: #0E1A12;
  object-fit: cover;
}

.video-caption {
  margin: 14px 0 0;
  font: 400 13.5px/1.6 var(--font-body);
  color: var(--muted);
}

/* ----- Prose, for the privacy notice ----- */
.prose { max-width: 760px; }
.prose h2 {
  margin: 44px 0 14px;
  font: 700 24px/1.25 var(--font-display);
  letter-spacing: -.025em;
  color: var(--ink);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  margin: 28px 0 10px;
  font: 700 18px/1.3 var(--font-display);
  color: var(--ink);
}
.prose p,
.prose li {
  font: 400 16px/1.75 var(--font-body);
  color: var(--body);
  text-wrap: pretty;
}
.prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose__updated {
  font: 500 13px/1 var(--font-mono);
  color: var(--muted);
  margin-bottom: 34px;
}


/* ===================================================================
   12. Smaller screens

   Two steps down from the full 1080px design:
     - below 900px the two-column sections stack
     - below 700px the constellation becomes a 2x2 grid of orbs
     - below 640px the menu becomes a hamburger and grids go single file
   =================================================================== */

@media (max-width: 900px) {
  /* Two-column sections become one column, text first */
  .how .wrap,
  .clouds .wrap {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 52px 32px 56px;
  }
  .how__text p,
  .clouds__text p { max-width: none; }

  .contact .wrap { padding: 52px 32px 60px; }
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .contact__intro { margin-bottom: 38px; }

  /* Inner pages: everything goes to one column */
  .page-hero .wrap { padding: 64px 32px 60px; }
  .section .wrap  { padding: 60px 32px 64px; }
  .split .wrap,
  .split--even .wrap { grid-template-columns: 1fr; gap: 34px; padding: 60px 32px 64px; }
  .card-grid    { grid-template-columns: 1fr; gap: 20px; }
  .feature-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; margin-top: 44px; }
  .section__intro { margin-bottom: 38px; }

  /* The framework loses its centre circle and becomes two columns */
  .framework { grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 34px; margin-top: 40px; }
  .framework__centre {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: auto;
    border-radius: 10px;
    padding: 22px;
    font-size: 22px;
    order: -1;
  }
  .framework__item:nth-of-type(n) { grid-area: auto; }
  .stage { grid-template-columns: 64px 1fr; gap: 22px; padding: 30px 0; }
  .stage__num { font-size: 34px; }

  .hero .wrap     { padding: 56px 32px 48px; }
  .results .wrap  { padding: 36px 32px 40px; }
  .services .wrap { padding: 40px 32px 36px; }

  /* Three service cards become one column */
  .services__grid { grid-template-columns: 1fr; }

  .service-wide { flex-direction: column; align-items: flex-start; gap: 18px; }

  .footer__cols     { padding: 40px 32px 38px; gap: 32px; }
  .footer__partners { padding: 30px 32px 36px; }
  .footer__legal    { padding: 18px 32px; }

  /* Partner logos wrap rather than squashing */
  .partner-logos { flex-wrap: wrap; justify-content: center; gap: 20px 34px; }
  .partner-logos li { flex: 0 0 auto; height: 60px; }
  .partner-logos img[data-h="78"] { max-height: 60px; }
  .partner-logos img[data-h="68"] { max-height: 54px; }
  .partner-logos img[data-h="60"] { max-height: 48px; }
  .partner-logos img[data-h="48"] { max-height: 40px; }
}

/* ---------------------------------------------------------------
   Big screen WITH a mouse: the approved hover behaviour.

   Hovering an orb grows it from 29% to 44% and reveals the
   description inside. The left/top values below are recalculated so
   the bigger circle stays centred on the same constellation node it
   sat on when closed - that is why they are not simply the closed
   values minus a bit.

   "hover: hover" keeps this off touchscreens, including large ones
   like a tablet, where hovering is impossible and the orbs would
   otherwise be dead. Those get the tap-for-panel behaviour instead.
   --------------------------------------------------------------- */
@media (hover: hover) and (min-width: 701px) {
  /* One value changes, and the orb grows from its own centre. No
     left/top/width to keep in step, and nothing for the text to react
     to, so it cannot shift. */
  .orb:hover,
  .orb:focus-within {
    transform: scale(1);
    z-index: 6;
    box-shadow: 0 26px 50px -16px rgba(12, 35, 19, .68);
  }

  .orb:hover  .orb__details,
  .orb:focus-within .orb__details { display: flex; }

  .orb:hover  .orb__plus,
  .orb:focus-within .orb__plus { display: none; }

  /* The panel below is a touchscreen fallback - never shown here. */
  .cloud-panel { display: none !important; }
}

/* Touchscreens and small windows: orbs are inert-looking but tappable,
   and the panel below does the work. */
@media not all and (hover: hover), (max-width: 700px) {
  .orb { cursor: pointer; }
  .orb:hover { box-shadow: 0 26px 50px -16px rgba(12, 35, 19, .68); }
}

@media (max-width: 700px) {
  /* The constellation is too cramped to read on a phone, so the four
     orbs become a simple 2x2 grid. Same orbs, same behaviour. */
  .clouds__diagram {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    container-type: normal;
  }
  .clouds__constellation { display: none; }

  .orb {
    position: static;
    width: 100%;
    padding: 0 12%;
    gap: 8px;
    box-shadow: 0 14px 26px -14px rgba(12, 35, 19, .5);
    /* No scaling here - these orbs never expand, they open a panel
       below instead, so they are drawn at their true size. */
    transform: none;
  }
  .orb__name { width: 100%; font-size: clamp(14px, 4.2vw, 19px); }
  .orb__details { width: 100%; }
}

@media (max-width: 640px) {
  /* Hamburger takes over */
  .nav-toggle { display: flex; }

  .site-header .wrap { padding: 0 20px; }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
    background: #FFFFFF;
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 12px 24px -12px rgba(20, 34, 28, .2);
    font-size: 15px;
  }
  .nav.is-open { display: flex; }

  .nav > .nav__link,
  .nav__toggle {
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 15px;
    width: 100%;
    justify-content: space-between;
  }

  /* On a phone the dropdown is a plain expanding list, not a floating card */
  .nav__dropdown { position: static; }
  .nav__menu {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    box-shadow: none;
    border-radius: 6px;
    margin: 10px 0 4px;
    padding: 16px 18px;
  }
  .nav__dropdown.is-open .nav__menu { display: flex; }

  .nav__cta {
    margin-top: 16px;
    text-align: center;
    padding: 14px 18px;
  }

  .hero .wrap     { padding: 44px 20px 40px; }
  .results .wrap  { padding: 32px 20px 34px; }
  .how .wrap,
  .clouds .wrap   { padding: 44px 20px 48px; }
  .services .wrap { padding: 34px 20px 32px; }
  .contact .wrap  { padding: 44px 20px 52px; }

  /* The three statistics stack, with lines between rather than beside */
  .results__grid { grid-template-columns: 1fr; gap: 26px; }
  .results__item { padding: 0; }
  .results__item + .results__item {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding-top: 26px;
  }

  .phase { grid-template-columns: 46px 1fr; gap: 14px; padding: 18px 16px 20px; }
  .phase__num { font-size: 26px; }

  /* Inner pages on a phone */
  .page-hero .wrap { padding: 48px 20px 46px; }
  .section .wrap   { padding: 46px 20px 48px; }
  .split .wrap,
  .split--even .wrap { padding: 46px 20px 48px; }
  .card { padding: 26px 22px; }
  .feature-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .framework { grid-template-columns: 1fr; row-gap: 28px; }
  .stage { grid-template-columns: 1fr; gap: 8px; }
  .stage__num { font-size: 30px; }
  .prose h2 { margin-top: 34px; }

  .form-card { padding: 26px 22px 30px; }

  .footer__cols     { grid-template-columns: 1fr; gap: 30px; padding: 36px 20px 34px; }
  .footer__partners { padding: 28px 20px 30px; }
  /* The legal line wraps onto two lines here, so it needs leading */
  .footer__legal    { padding: 16px 20px; line-height: 1.5; }
}

@media (max-width: 460px) {
  /* First and last name stop sitting side by side */
  .field-row { grid-template-columns: 1fr; gap: 20px; }
  .field-row .field { margin-bottom: 0; }
}


/* Respect the system setting for people who prefer less movement */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}