/* ==========================================================================
   NECOS. Ntinda Entrepreneurs Co-operative Society Limited
   Global stylesheet.

   Structure of this file:
     1.  Design tokens (colour, type, spacing)
     2.  Reset and base elements
     3.  Layout primitives (shell, section, grid, rules)
     4.  Typography scale
     5.  Buttons and links
     6.  Header / navigation
     7.  Footer
     8.  Photo stages (image placeholders)
     9.  Cards
     10. Expandable (accordion) components
     11. Page-specific blocks
     12. Forms
     13. Responsive adjustments

   Design rules that must not drift:
     - Only the palette in §1 is permitted. No other colours.
     - Vertical rhythm is built on 8px increments.
     - No gradients, no glassmorphism, no drop shadows, no bounce easing.
     - Green is an accent only: active states, underlines, key numbers, focus.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* --- Palette (exact hex, nothing else) --- */
  --navy:        #0C2749;   /* Primary navy, body text, structure */
  --navy-hover:  #081B33;   /* Navy darkened for button hover only */
  --green:       #9ED193;   /* Accent green, sparing use */
  --near-black:  #191919;   /* Headings and highest-contrast text */
  --grey:        #C6C5C4;   /* Light grey, dividers on dark, muted marks */
  --white:       #FFFFFF;
  --page-bg:     #F7F8F9;   /* Soft page background */
  --card-bg:     #FFFFFF;
  --hairline:    #E8E9EA;   /* Very subtle border */
  --stage-bg:    #F0F1F2;   /* Photo placeholder fill */

  /* --- Typography --- */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Spacing: everything is a multiple of 8px --- */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;
  --s8: 64px;
  --s10: 80px;
  --s12: 96px;

  /* Section rhythm: 80px desktop, reduced to 48px on small screens (§13) */
  --section-pad: var(--s10);

  /* --- Layout --- */
  --shell: 1120px;         /* Maximum content width */
  --gutter: 24px;          /* Side margin on mobile is raised to 20px minimum */
  --radius: 12px;          /* Card radius ceiling is 16px; 12px is the default */
  --radius-lg: 12px;       /* Header and footer, curved like the boxes */
  --radius-sm: 8px;        /* Buttons */

  /* --- Motion: calm, no overshoot --- */
  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur: 280ms;
}


/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--navy);
  font-family: var(--font-text);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  /* Optical smoothing keeps the light weights from looking brittle */
  -webkit-font-smoothing: antialiased;
}

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

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Skip link, visible only when focused */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: var(--white);
  padding: var(--s2) var(--s3);
  font-family: var(--font-display);
  font-weight: 600;
}
.skip-link:focus { left: 0; }


/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

/* Centred content shell, capped at 1120px */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A section is a chapter: generous air above and below */
.section {
  padding-block: var(--section-pad);
}

/* A section that sits on white rather than the soft page background */
.section--white { background: var(--white); }

/* A section on navy, used sparingly for the closing invitation */
.section--navy {
  background: var(--navy);
  color: var(--white);
}
.section--navy .section-title,
.section--navy h2,
.section--navy h3 { color: var(--white); }
.section--navy p { color: var(--white); }

/* A section on the accent green. Navy on green measures 8.56:1, so the type
   stays as readable here as it is anywhere else on the site. This is what
   carries the second brand colour across the pages. */
.section--green {
  background: var(--green);
  color: var(--navy);
}
.section--green .section-title,
.section--green h2,
.section--green h3,
.section--green .statement-large,
.section--green .org__name { color: var(--navy); }
.section--green p,
.section--green li,
.section--green .lead { color: var(--navy); }

/* Inside a green band the supporting rules flip to navy so they stay visible */
.section--green .chapter {
  color: var(--navy);
  border-top-color: var(--navy);
}
.section--green .feature-list li { border-bottom-color: rgba(12, 39, 73, 0.2); }
.section--green .feature-list li::before { background: var(--navy); }
.section--green .card,
.section--green .tool,
.section--green .accordion__item { border-color: rgba(12, 39, 73, 0.2); }
.section--green .stage { border-color: rgba(12, 39, 73, 0.2); }
.section--green .link-underline { border-bottom-color: var(--navy); }
.section--green .org__motto { color: var(--navy); opacity: 0.85; }

/* Hairline rule, the structural device used instead of shadows */
.rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

/* Two-column layout that stacks on mobile */
.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s8);
  align-items: stretch;
}

/* Three-column layout */
.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}

/* Four-column row, used for the trust signals */
.cols-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  align-items: stretch;
}

/* A grid item's automatic minimum size is its content, so a photograph with a
   large intrinsic width can force its column wider than its share and spill
   over the column beside it. Setting the minimum to zero keeps every column
   to the track the grid gave it, and the picture scales down to fit. */
.cols-2 > *,
.cols-3 > *,
.cols-4 > *,
.section-head--split > *,
.accordion__split > * { min-width: 0; }

/* The frame never grows past its column, and the picture never past its frame */
.stage { min-width: 0; max-width: 100%; }
.stage img { max-width: 100%; }

/* Constrains long prose to a comfortable measure */
.measure { max-width: 62ch; }
.measure-wide { max-width: 72ch; }


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--near-black);
  margin: 0;
  text-wrap: balance;
}

/* Hero headline: 48 to 56px, weight 700, tight tracking */
.h-hero {
  font-size: clamp(38px, 5.2vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
}

/* Section titles: 32 to 36px, weight 600 */
.section-title {
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* Product titles: 22 to 24px, weight 600 */
.product-title {
  font-size: clamp(21px, 2vw, 24px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Sub-headings inside long content */
.sub-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--near-black);
  margin: 0 0 var(--s2);
}

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(19px, 2.1vw, 22px);
  line-height: 1.55;
  color: var(--navy);
}

/* Small labels and meta: 14px, weight 500 */
.label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--s2);
}

/* An eyebrow label. Plain type, no leading rule. */
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--s3);
}

/* Key numbers and stats, large and calm.
   The green sits under the number as a rule rather than in the glyphs
   themselves: #9ED193 on white measures 1.75:1, far below the 4.5:1 needed
   for readable text. On navy the green is 8.56:1 and is used directly. */
.stat {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
  display: inline-block;
  padding-bottom: var(--s1);
  border-bottom: 3px solid var(--green);
  margin-bottom: var(--s1);
}
.section--navy .stat { color: var(--green); border-bottom-color: var(--white); }

/* Muted supporting text */
.muted { color: var(--navy); opacity: 0.72; }

/* Plain feature lists, set as quiet rows rather than bullet clutter */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.feature-list li {
  position: relative;
  padding: var(--s1) 0 var(--s1) var(--s3);
  border-bottom: 1px solid var(--hairline);
  font-size: 17px;
}
.feature-list li:last-child { border-bottom: 0; }
/* A small green tick-mark rule instead of a bullet */
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 10px;
  height: 2px;
  background: var(--green);
}


/* ==========================================================================
   5. BUTTONS AND LINKS
   ========================================================================== */

a { color: var(--navy); }

/* Links inside prose keep a navy underline. A green one would sit at 1.75:1
   against white and effectively disappear, leaving the link indistinguishable
   from the navy body text around it. Green underlines are reserved for the
   standalone accent links below, where they decorate rather than inform. */
.section a:not(.btn):not(.card-link):not(.nav__link):not(.footer a) {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Primary button: solid navy, white text, 8px radius */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 16px 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  /* 150ms so the press feels mechanical rather than springy */
  transition: background-color 150ms var(--ease),
              border-color 150ms var(--ease),
              transform 150ms var(--ease);
}
/* Hover and touch: the navy darkens one step and the button takes a very
   small step forward. It returns the moment the pointer leaves. */
.btn:hover { background: var(--navy-hover); border-color: var(--navy-hover); transform: scale(1.02); }
.btn:active { background: var(--navy-hover); border-color: var(--navy-hover); transform: scale(0.99); }

/* Secondary button: outlined navy */
.btn--outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--outline:hover { background: var(--navy); color: var(--white); }

/* On navy sections the outline button inverts */
.section--navy .btn {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}
.section--navy .btn:hover { background: var(--green); border-color: var(--green); color: var(--navy); }

/* Secondary text link with a green underline */
.link-underline {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--green);
  transition: border-color var(--dur) var(--ease);
}
.link-underline:hover { border-bottom-color: var(--navy); }

/* Focus: a solid ring on every interactive element. Navy is used on light
   surfaces (14.98:1) and green on dark ones (8.56:1); the green ring is not
   used on white because it would only reach 1.75:1. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}

.section--navy a:focus-visible,
.section--navy button:focus-visible,
.footer a:focus-visible,
.skip-link:focus-visible {
  outline-color: var(--green);
}


/* ==========================================================================
   6. HEADER AND NAVIGATION
   ========================================================================== */

/* The bar carries the brand the way the guidelines cover does: the lockup in
   green on navy, with the brand pattern behind it as a quiet texture. It is
   curved at its lower corners so it reads as the same family of shapes as the
   cards below it, and closed by a green rule that answers the one on the
   footer. */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding-bottom: 12px;
  transition: transform 300ms var(--ease);
}

/* The brand band, cut from the pattern and laid along the lower edge exactly
   as the guidelines use it on the email signature. It doubles as the rule
   that closes the bar. */
.header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background-image: url("../img/necos-band.svg");
  background-repeat: repeat-x;
  background-size: auto 100%;
  pointer-events: none;
}

/* Retracts out of the way on the way down the page and comes straight back
   the moment the reader scrolls up. */
.header--hidden { transform: translateY(-100%); }

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 88px;
  padding-block: var(--s2);
}

/* The navigation is pushed right, and the language switch and menu button sit
   after it. Both stay in the bar at every width. */
.header__controls {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
}

/* --- Logo lockup: monogram + wordmark ---
   Clear space equal to the monogram height is reserved around the lockup
   by the padding on .logo and the header's min-height. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  padding: var(--s1) 0;
}
.logo__mark {
  width: 38px;
  height: auto;
  flex: none;
  /* The mark fades in once on load and is then completely still */
  animation: logo-in 400ms var(--ease) both;
}

@keyframes logo-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.logo__text { display: flex; flex-direction: column; }
.logo__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--navy);
}
.logo__tag {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--navy);
  opacity: 0.7;
  margin-top: 5px;
}

/* Light lockup for dark backgrounds (footer) */
.logo--light .logo__name,
.logo--light .logo__tag { color: var(--white); }
.logo--light .logo__tag { opacity: 0.78; }

/* --- Navigation --- */
.nav { display: flex; align-items: center; gap: var(--s4); margin-left: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  padding: var(--s1) 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease);
  white-space: nowrap;
}
.nav__link:hover { border-bottom-color: var(--grey); }

/* Active page: green underline, an accent and an active state */
.nav__link[aria-current="page"] {
  font-weight: 600;
  border-bottom-color: var(--green);
}

/* Mobile menu toggle, hidden on desktop */
.nav__toggle {
  display: none;
  align-items: center;
  gap: var(--s1);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}
.nav__toggle-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 16px;
}
.nav__toggle-bars span {
  display: block;
  height: 2px;
  background: var(--navy);
  border-radius: 1px;
}

/* --- Language switch, English | Luganda ---
   Two real buttons reading as one control. The active language is marked
   with aria-pressed and shown with weight plus a green underline, so the
   state does not rely on colour alone. */
.lang {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  flex: none;
}

.lang__btn {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--s1) 2px;
  cursor: pointer;
  transition: border-color 150ms var(--ease);
  white-space: nowrap;
}
.lang__btn:hover { border-bottom-color: var(--grey); }

.lang__btn[aria-pressed="true"] {
  font-weight: 700;
  border-bottom-color: var(--green);
}

.lang__sep {
  color: var(--navy);
  opacity: 0.35;
  font-size: 14px;
  line-height: 1;
}


/* ==========================================================================
   7. FOOTER
   ========================================================================== */

/* Curved at its upper corners, mirroring the header. The green rule along
   the top edge is the accent that ties the two ends of the page together. */
.footer {
  position: relative;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding-block: calc(var(--s10) + 12px) var(--s6);
  margin-top: var(--s6);
  font-size: 16px;
}

/* The same band, reversed, along the top edge of the footer */
.footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 12px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background-image: url("../img/necos-band-light.svg");
  background-repeat: repeat-x;
  background-size: auto 100%;
  pointer-events: none;
}
.footer > .shell { position: relative; z-index: 1; }

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s8);
  padding-bottom: var(--s6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.footer__intro { max-width: 34ch; margin-top: var(--s3); opacity: 0.82; }

.footer h2 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 var(--s3);
  opacity: 0.7;
}

.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: var(--s2); }
.footer__list a,
.footer a {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.footer__list a:hover,
.footer a:hover { border-bottom-color: var(--green); }

.footer__branch { margin-bottom: var(--s3); line-height: 1.5; }
.footer__branch strong {
  font-family: var(--font-display);
  font-weight: 600;
  display: block;
}
.footer__branch span { opacity: 0.82; font-size: 15px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  justify-content: space-between;
  padding-top: var(--s5);
  font-size: 15px;
  opacity: 0.82;
}

/* The registration number is a trust marker, set in green */
.footer__reg strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--green);
}


/* ==========================================================================
   8. PHOTO STAGES
   Every image area is an aspect-ratio placeholder. The label inside states
   the intended alt text, so photography can be dropped in with no reflow.
   ========================================================================== */

.stage {
  background: var(--stage-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  transition: transform 200ms var(--ease),
              border-color 200ms var(--ease),
              outline-color 200ms var(--ease);
  outline: 2px solid transparent;
  outline-offset: 3px;
}

/* A barely there lift and a soft green ring, so a photo area answers the
   pointer without becoming a moving part. */
.stage:hover {
  transform: scale(1.01);
  border-color: var(--green);
  outline-color: var(--green);
}

/* A photograph fills its frame exactly, so swapping one for another can
   never shift the layout. */
.stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The label only exists while a picture is still to be supplied, so the
   padding lives on it rather than on the frame. */
.stage .stage__label { padding: var(--s3); }

/* A picture that was made for a wide band sits centred at a readable size
   rather than stretching the full width of the shell. */
.stage--set {
  max-width: 760px;
  margin-inline: auto;
}

.stage__label {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--navy);
  opacity: 0.62;
  text-align: center;
  max-width: 42ch;
  margin: 0;
}

/* Aspect ratios */
.stage--16x9 { aspect-ratio: 16 / 9; }
.stage--4x3  { aspect-ratio: 4 / 3; }
.stage--1x1  { aspect-ratio: 1 / 1; }

/* A hero stage runs full-bleed and squares off its outer corners */
.stage--hero { border-radius: var(--radius); }

/* Portrait stages are circular-free: square, restrained */
.stage--portrait { border-radius: var(--radius); }


/* ==========================================================================
   9. CARDS
   Thin 1px border, 12px radius, no shadow. Ever.
   ========================================================================== */

.card {
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s4);
}

/* Product snapshot card that links to a product page */
.card-link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s3);
  text-decoration: none;
  color: var(--navy);
  transition: border-color 200ms var(--ease),
              transform 200ms var(--ease);
}

/* The green accent line at the left edge. It spans the straight part of the
   edge only, so it never fights the 12px corner radius. */
.card-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--radius);
  bottom: var(--radius);
  width: 2px;
  background: var(--green);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity 200ms var(--ease),
              transform 200ms var(--ease);
}

/* Pointer devices: the line appears and the card lifts 2px. No shadow. */
@media (hover: hover) {
  .card-link:hover { border-color: var(--navy); transform: translateY(-2px); }
  .card-link:hover::before { opacity: 1; transform: scaleX(1); }
}

/* Touch devices: a shorter lift while pressed, and the green line is held
   for a moment after the finger leaves before it fades back out. */
@media (hover: none) {
  .card-link { transition: border-color 200ms var(--ease) 180ms, transform 160ms var(--ease) 180ms; }
  .card-link::before { transition: opacity 200ms var(--ease) 180ms, transform 200ms var(--ease) 180ms; }

  .card-link:active {
    border-color: var(--navy);
    transform: translateY(-1px);
    transition-delay: 0s;
  }
  .card-link:active::before { opacity: 1; transform: scaleX(1); transition-delay: 0s; }
}

.card-link .stage { border: 0; border-radius: var(--radius-sm); }

/* The card is already answering the pointer, so the stage inside it stays
   still rather than adding a second movement. */
.card-link .stage:hover {
  transform: none;
  border-color: transparent;
  outline-color: transparent;
}

.card-link__body { padding: 0 var(--s1) var(--s1); }
.card-link__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--near-black);
  margin: 0 0 var(--s2);
}
.card-link__text {
  font-size: 17px;
  margin: 0 0 var(--s3);
  color: var(--navy);
  opacity: 0.85;
}
/* The "read on" cue, underlined in green */
.card-link__cue {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  border-bottom: 2px solid var(--green);
  padding-bottom: 3px;
}

/* Trust signal cell, a quiet fact, separated by a hairline */
.trust {
  border-top: 3px solid var(--green);
  padding-top: var(--s3);
  height: 100%;
}
.section--green .trust { border-top-color: var(--navy); }

/* Four short headings of different lengths look tidier when the browser is
   told to balance them and never to break a word in half. */
.trust__value,
.statement__title,
.card-link__title {
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: normal;
}
.trust__value {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--near-black);
  margin: 0 0 var(--s1);
  line-height: 1.3;
}
.trust__note {
  font-size: 15px;
  margin: 0;
  color: var(--navy);
  opacity: 0.75;
}

/* Branch card */
.branch-card { display: flex; flex-direction: column; gap: var(--s2); height: 100%; }
.branch-card__name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--green);
}
.branch-card__address {
  font-size: 17px;
  line-height: 1.55;
  margin: var(--s1) 0 0;
}
.branch-card__tel {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  margin-top: auto;
  padding-top: var(--s2);
}

/* Leadership person */
.person__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--near-black);
  margin: var(--s2) 0 2px;
}
.person__role {
  font-size: 15px;
  color: var(--navy);
  opacity: 0.75;
  margin: 0;
}


/* ==========================================================================
   10. EXPANDABLE (ACCORDION) COMPONENTS
   Progressive enhancement: panels are open in the markup so the content is
   readable with no CSS and no JavaScript. The .js class (set by an inline
   script in <head>) is what collapses them.
   ========================================================================== */

.accordion {
  border-top: 1px solid var(--hairline);
}

.accordion__item {
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-bottom: var(--s2);
}

.accordion__heading { margin: 0; }

/* The trigger row */
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  padding: var(--s4);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  color: var(--near-black);
}

.accordion__title {
  font-size: clamp(21px, 2vw, 24px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Plus / minus indicator, drawn from two rules. The vertical stroke fades
   out on expand, a slow, quiet change of state with no rotation jitter. */
.accordion__icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  transition: border-color var(--dur) var(--ease);
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--navy);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.accordion__icon::before {
  width: 12px; height: 2px;
  transform: translate(-50%, -50%);
}
.accordion__icon::after {
  width: 2px; height: 12px;
  transform: translate(-50%, -50%);
}
.accordion__trigger:hover .accordion__icon { border-color: var(--navy); }

/* Expanded state: the vertical stroke rotates away, leaving a minus */
.accordion__trigger[aria-expanded="true"] .accordion__icon {
  border-color: var(--green);
  background: var(--green);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* The panel. Collapsed only when JavaScript is available.
   The height is measured and set by site.js, which then hands control back
   to `auto` once the panel is open so it reflows with the viewport.
   `visibility` keeps a collapsed panel out of the tab order and out of the
   accessibility tree; it is delayed on close so the fade can finish. */
.accordion__panel { overflow: hidden; }

.html-js .accordion__panel {
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: height var(--dur) var(--ease),
              opacity var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}

.html-js .accordion__panel[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: height var(--dur) var(--ease),
              opacity var(--dur) var(--ease),
              visibility 0s;
}

.accordion__panel-inner {
  padding: 0 var(--s4) var(--s4);
}

/* Inside an expanded product, the description sits above the feature list */
.accordion__desc {
  font-size: 17px;
  margin: 0 0 var(--s3);
  max-width: 68ch;
}

/* Two-column split for description + features on wide screens */
.accordion__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6);
  align-items: start;
}


/* ==========================================================================
   11. PAGE BLOCKS
   ========================================================================== */

/* --- Hero --- */
.hero {
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  padding-top: var(--s12);
  padding-bottom: var(--s10);
}
.hero__inner { max-width: 780px; }
.hero__text { margin: var(--s4) 0 var(--s6); max-width: 56ch; }
.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-wrap: wrap;
}
/* The hero photo stage sits below the statement, full shell width */
.hero__stage { margin-top: var(--s10); }

/* --- Page header for interior pages --- */
.page-head {
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--s10) var(--s8);
}
.page-head__title {
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.page-head__intro {
  margin-top: var(--s4);
  max-width: 58ch;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
}

/* --- Vision / Mission pair --- */
/* The two statements are a matched pair, so they sit in cards of equal
   height with the green rule across the top of each. */
.statement {
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--green);
  border-radius: var(--radius);
  padding: var(--s5);
  height: 100%;
}

.statement__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--hairline);
}
.statement__body {
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.45;
  color: var(--near-black);
  font-family: var(--font-text);
  margin: 0;
}

/* A single very large statement, used for the vision on the About page */
.statement-large {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.8vw, 40px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--near-black);
  max-width: 20ch;
  margin: 0;
}

/* --- Section head: title with optional supporting text alongside --- */
.section-head { margin-bottom: var(--s8); }
.section-head--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s8);
  align-items: end;
}
.section-head__text { margin: 0; max-width: 52ch; }

/* --- Numbered chapter marker ---
   Navy type sitting under a short green rule. The rule carries the accent;
   the numeral stays legible. --- */
.chapter {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--navy);
  display: inline-block;
  border-top: 2px solid var(--green);
  padding-top: var(--s1);
  margin-bottom: var(--s2);
}

/* --- Land type table (Real Estate) --- */
.land-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.land-table caption {
  text-align: left;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: var(--s3);
}
.land-table th,
.land-table td {
  padding: var(--s3) var(--s3) var(--s3) 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  font-size: 17px;
}
.land-table th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--navy);
  border-bottom: 2px solid var(--navy);
}
.land-table td:first-child {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--near-black);
  width: 30%;
}
/* Prices are key numbers: navy for legibility, with the green carried by
   the chapter rule above the section. */
.land-table .price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--navy);
  white-space: nowrap;
}

/* --- Member organisation block --- */
.org__mark {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin: 0 0 var(--s1);
}
.org__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--near-black);
  margin: 0 0 var(--s1);
}
.org__motto {
  font-size: 17px;
  font-style: italic;
  color: var(--navy);
  opacity: 0.8;
  margin: 0 0 var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--hairline);
}

/* --- Closing CTA band --- */
.cta__title {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.018em;
  max-width: 20ch;
  color: var(--white);
}
.cta__text { margin: var(--s3) 0 var(--s6); max-width: 50ch; opacity: 0.86; }

/* --- Related page links at the foot of a chapter --- */
.related {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline);
  margin-top: var(--s8);
}
.related__label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.7;
}


/* ==========================================================================
   11b. INTERACTIVE TOOLS
   The savings planner, the loan finder, the branch picker and the expand all
   control. Each is built from the same materials as the rest of the site:
   a hairline border, a 12px radius, no shadow, green used only to mark state.
   ========================================================================== */

/* A tool sits in a bordered panel, the same weight as a card */
.tool {
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s4);
}

.tool__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--near-black);
  margin: 0 0 var(--s1);
}

.tool__note {
  font-size: 15px;
  color: var(--navy);
  opacity: 0.75;
  margin: var(--s3) 0 0;
}

/* --- Savings planner --- */
.planner__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-top: var(--s3);
}

/* The three figures the planner works out */
.planner__result {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
}

.planner__figure { border-top: 2px solid var(--green); padding-top: var(--s2); }

.planner__amount {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy);
  display: block;
  line-height: 1.2;
}

.planner__period {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  opacity: 0.75;
  display: block;
  margin-top: 4px;
}

/* --- Filter and picker chips --- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-bottom: var(--s5);
}

.chip {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  cursor: pointer;
  transition: border-color 150ms var(--ease),
              background-color 150ms var(--ease),
              color 150ms var(--ease);
}
.chip:hover { border-color: var(--navy); }

/* The chosen filter is filled navy, so the state does not rest on colour
   alone but on a clear figure and ground reversal. */
.chip[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  font-weight: 600;
}

.chip__count {
  font-weight: 500;
  opacity: 0.65;
  margin-left: 6px;
}

/* Products hidden by a filter */
.is-filtered-out { display: none; }

/* Message shown when a filter matches nothing */
.filter__empty {
  font-size: 17px;
  padding: var(--s4) 0;
  margin: 0;
}

/* --- Expand all control --- */
.accordion__controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--s2);
}

.text-btn {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--green);
  padding: 4px 0;
  cursor: pointer;
  transition: border-color 150ms var(--ease);
}
.text-btn:hover { border-bottom-color: var(--navy); }

/* --- Branch picker --- */
/* The chosen branch card is marked with a navy edge, not a colour wash */
.branch-card { transition: border-color 200ms var(--ease); }
.card.is-selected { border-color: var(--navy); }
.card.is-selected .branch-card__name { border-bottom-color: var(--navy); }


/* ==========================================================================
   12. FORMS
   ========================================================================== */

.form { display: grid; gap: var(--s4); }

.field { display: flex; flex-direction: column; gap: var(--s1); }

.field label {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy);
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-text);
  font-size: 17px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 14px var(--s2);
  width: 100%;
  transition: border-color var(--dur) var(--ease);
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--grey); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--navy); }

.field textarea { resize: vertical; min-height: 144px; }

.field__hint {
  font-size: 14px;
  color: var(--navy);
  opacity: 0.7;
}


/* ==========================================================================
   13. RESPONSIVE
   Mobile-first refinements. The base rules above assume the wide layout;
   these collapse it down. Side margins never fall below 20px.
   ========================================================================== */

@media (max-width: 960px) {
  .cols-2,
  .cols-3,
  .section-head--split,
  .accordion__split { grid-template-columns: 1fr; gap: var(--s6); }

  .cols-4 { grid-template-columns: repeat(2, 1fr); gap: var(--s5); }

  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--s6); }
}

/* The primary nav carries seven items, so it folds into a disclosure panel
   earlier than the content grids do, before it can crowd the logo. */
@media (max-width: 1080px) {
  .nav__toggle { display: inline-flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: var(--s3) 0 var(--s4);
    z-index: 2;

    /* slides down out of the bar, and is genuinely hidden in between so it
       stays out of the tab order */
    display: block;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: transform 280ms var(--ease),
                opacity 280ms var(--ease),
                visibility 0s linear 280ms;
  }
  .nav[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 280ms var(--ease),
                opacity 280ms var(--ease),
                visibility 0s;
  }

  /* reversed out of the navy panel */
  /* reversed out of the navy panel. The language switch is not in here; it
     stays in the bar so a phone can reach it without opening the menu. */
  .nav .nav__link { color: var(--white); }
  .nav .nav__link[aria-current="page"] { border-bottom-color: var(--green); }
  .nav a:focus-visible { outline-color: var(--green); }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .nav__link {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 17px;
  }
  .nav__link[aria-current="page"] { border-bottom-color: var(--green); }

  /* The navigation is out of flow here, so the controls take the right edge
     themselves. The language switch stays in the header bar, reachable on a
     phone without opening the menu first. */
  .header__controls { margin-left: auto; }
  .header__inner { position: static; }
}

/* Below this width the bar has to carry the logo, the language switch and the
   menu button together, so the descriptor line under NECOS is dropped and the
   menu button becomes its icon alone. Its accessible name is on the button. */
@media (max-width: 620px) {
  .logo__tag { display: none; }
  .logo { gap: 10px; }

  .nav__toggle-text { display: none; }

  .header__controls { gap: var(--s2); }
  .lang__sep { font-size: 13px; }
  .header__inner { gap: var(--s2); min-height: 72px; }

  /* Thumb sized targets: both controls are at least 44px in both directions */
  .lang__btn {
    font-size: 13px;
    padding: 14px 4px;
    min-height: 44px;
  }
  .nav__toggle {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
}

@media (max-width: 720px) {
  :root {
    --section-pad: var(--s6);   /* 48px top and bottom on mobile */
    --gutter: 20px;             /* Minimum 20px side margin */
  }

  body { font-size: 17px; }

  .cols-4 { grid-template-columns: 1fr; gap: var(--s4); }

  .footer__top { grid-template-columns: 1fr; gap: var(--s6); }
  .footer { padding-block: var(--s8) var(--s5); }

  .hero { padding-top: var(--s8); padding-bottom: var(--s6); }
  .hero__stage { margin-top: var(--s6); }
  .hero__actions { gap: var(--s3); }
  .hero__actions .btn { width: 100%; justify-content: center; }

  .page-head { padding-block: var(--s6) var(--s5); }

  .accordion__trigger { padding: var(--s3); gap: var(--s2); }
  .accordion__panel-inner { padding: 0 var(--s3) var(--s3); }

  .card,
  .card-link { padding: var(--s3); }

  /* The tools stack rather than squeeze */
  .tool { padding: var(--s3); }
  .planner__fields { grid-template-columns: 1fr; gap: var(--s2); }
  .planner__result { grid-template-columns: 1fr; gap: var(--s3); }
  .chips { gap: var(--s1); margin-bottom: var(--s4); }
  /* 44px minimum, so a filter is comfortable to hit with a thumb */
  .chip { font-size: 14px; padding: 14px 16px; min-height: 44px; }

  /* Land table reflows into stacked rows on small screens */
  .land-table thead { display: none; }
  .land-table tr {
    display: block;
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--hairline);
  }
  .land-table td {
    display: block;
    border: 0;
    padding: 0 0 var(--s1);
    width: auto !important;
  }
  .land-table td:first-child { font-size: 19px; }

  .related { gap: var(--s2) var(--s4); }
}

/* Print: strip furniture, keep the words */
@media print {
  .header, .footer, .nav, .stage, .skip-link { display: none !important; }
  body { background: var(--white); font-size: 12pt; }
  .html-js .accordion__panel { height: auto !important; opacity: 1 !important; visibility: visible !important; }
}