/* =========================================================================
   NORTHERNSKY — SHARED STYLESHEET
   =========================================================================
   This one file styles all pages (Home, About, Ecosystem, Contact, and
   the Privacy/Terms/Cookie policy pages).

   HOW THIS FILE IS ORGANIZED (use Ctrl/Cmd+F to jump to a section):
     1. Brand variables (colors, fonts) — EDIT COLORS HERE
     2. Reset & base styles
     3. Layout helpers (container, sections, buttons)
     4. Navbar
     5. Footer
     6. Home page
     7. About page
     8. Ecosystem page
     9. Contact page
     9b. "Get in Touch" popup modal
     9c. Cookie consent banner
     10. FAQ (details/summary) component
     10b. Legal pages (Privacy Policy, Terms, Cookie Policy)
     11. Responsive tweaks (tablet / mobile)

   TIP FOR NON-CODERS: colors, fonts, and spacing all come from the
   "variables" at the very top of this file. Change a value there and it
   updates everywhere on the site automatically.

   NOTE ON ANIMATION: this site is intentionally still. Nothing fades,
   slides, or moves on scroll. The only motion left is an instant color
   change when you hover a link or button (standard, not an "animation"),
   and the browser's own built-in expand/collapse on the FAQ accordion.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. BRAND VARIABLES
   These match the official NorthernSky brand guidelines.
   ------------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --color-primary: #0088b0;      /* Accent teal — links, buttons, highlights */
  --color-primary-dark: #006e8e; /* Slightly darker teal for hover states */
  --color-ink: #201e1d;          /* Main text color */
  --color-paper: #f3f2f2;        /* Main page background */
  --color-surface: #eae9e9;      /* Secondary section background */
  --color-navy: #0a2a4a;         /* Dark section background */
  --color-navy-deep: #071d34;    /* Slightly darker navy for footer base */
  --color-white: #ffffff;

  /* Text on dark navy sections */
  --color-ink-on-navy: #ffffff;
  --color-muted-on-navy: #c3d0dc;

  /* Muted text on light backgrounds */
  --color-muted: #5b5957;

  /* Fonts */
  --font-main: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing */
  --section-padding: 100px;
  --section-padding-mobile: 56px;
  --container-width: 1180px;

  /* Shape */
  --radius-pill: 999px;
  --radius-card: 20px;

  /* Card elevation — subtle, static (no animation) */
  --shadow-card: 0 1px 2px rgba(10, 42, 74, 0.04), 0 10px 30px rgba(10, 42, 74, 0.07);

  /* Instant, non-animated hover feedback only */
  --transition-fast: 0.15s ease;
}

/* -------------------------------------------------------------------------
   2. RESET & BASE STYLES
   ------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-main);
  background-color: var(--color-paper);
  color: var(--color-ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-main);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 16px;
}

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

button {
  font-family: var(--font-main);
}

/* -------------------------------------------------------------------------
   3. LAYOUT HELPERS
   ------------------------------------------------------------------------- */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* A "section" is a full-width horizontal band of content.
   Alternate section--paper / section--surface / section--navy to create
   visual separation WITHOUT borders or boxes, per brand guidelines. */
.section {
  padding: var(--section-padding) 0;
}

.section--paper {
  background-color: var(--color-paper);
}

.section--surface {
  background-color: var(--color-surface);
}

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

.section--navy h1,
.section--navy h2,
.section--navy h3 {
  color: var(--color-white);
}

.section--navy p {
  color: var(--color-muted-on-navy);
}

.section-heading {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-heading p {
  font-size: 1.125rem;
}

.eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
}

/* Buttons — fully rounded "pill" shape per brand guidelines */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

.btn-secondary {
  background-color: transparent;
  border-color: currentColor;
  color: var(--color-ink);
}

.btn-secondary:hover {
  background-color: var(--color-ink);
  color: var(--color-paper);
}

.section--navy .btn-secondary {
  color: var(--color-white);
}

.section--navy .btn-secondary:hover {
  background-color: var(--color-white);
  color: var(--color-navy);
}

.btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.text-link {
  font-weight: 700;
}

.text-link::after {
  content: " →";
  display: inline-block;
}

/* -------------------------------------------------------------------------
   4. NAVBAR
   A floating, fully-rounded "pill" bar with a soft shadow, matching
   NorthernSky Cloud's navigation style. The outer .navbar is transparent
   (it just reserves the sticky top strip and the gap around the pill);
   the pill itself — background, shadow, rounded corners — lives on
   .navbar-inner.
   ------------------------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: transparent;
  padding: 18px 20px 0;
}

/* A frosted / "sand glass" pill: translucent white with a background
   blur, so page content shows through softly as it scrolls underneath. */
.navbar-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 10px 14px 10px 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 20px;
  background-color: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(10, 42, 74, 0.06), 0 12px 28px rgba(10, 42, 74, 0.10);
}

/* The wordmark logo. images/logo.png is the real NorthernSky logo;
   swap that file for an updated one any time — the size here is
   controlled by the "height" below, not by the image file itself. */
.wordmark {
  display: inline-flex;
  align-items: center;
}

.wordmark img {
  height: 30px;
  width: auto;
  display: block;
}

/* Reversed (white) version for the dark navy footer — achieved with a
   CSS filter rather than a second image file. If you get a dedicated
   white logo file later, swap this filter out for that image instead. */
.wordmark-light img {
  height: 32px;
  filter: brightness(0) invert(1);
}

.nav-menu {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-link {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-ink);
  position: relative;
  padding: 4px 0;
}

.nav-link:hover {
  color: var(--color-primary);
}

/* The current page's link is marked with class="active" in the HTML */
/* Just a color change — no underline — marks the current page */
.nav-link.active {
  color: var(--color-primary);
}

/* "Get in Touch" pill button, pinned to the right end of the navbar */
.nav-cta {
  grid-column: 3;
  padding: 11px 24px;
  font-size: 0.92rem;
}

/* A second copy of the same button lives inside the mobile dropdown menu
   (see the HTML) so it's still reachable once the bar switches to just a
   logo + hamburger. Hidden on desktop; shown in the mobile media query. */
.nav-cta--menu {
  display: none;
}

/* Hamburger button — hidden on desktop, shown on mobile (see section 11) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-ink);
  border-radius: 2px;
}

/* Hamburger switches instantly to an "X" when the menu is open — no motion */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* -------------------------------------------------------------------------
   5. FOOTER
   A single-column layout (logo + link row, tagline, social + ventures,
   then a divider and a bottom credit bar) rather than the old four-column
   grid — matches the format used across the NorthernSky family of sites.
   ------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-navy-deep);
  color: var(--color-white);
  padding: 56px 0 0;
}

.footer-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Row 1: logo on the left, page + policy links on the right */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-brand .wordmark img {
  height: 26px;
}

.footer-links-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 28px;
}

.footer-links-row a {
  color: var(--color-muted-on-navy);
  font-size: 0.92rem;
  font-weight: 500;
}

.footer-links-row a:hover {
  color: var(--color-white);
}

/* Row 2: tagline + placeholder email */
.footer-tagline {
  color: var(--color-muted-on-navy);
  max-width: 340px;
  font-size: 0.95rem;
  margin-top: 28px;
  margin-bottom: 4px;
}

.footer-email {
  font-size: 0.9rem;
}

.footer-email a {
  color: var(--color-muted-on-navy);
  font-weight: 500;
}

.footer-email a:hover {
  color: var(--color-white);
}

/* Row 3: social icon(s) on the left, sibling-venture logos on the right */
.footer-mid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 28px;
}

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

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-white);
}

.footer-social a:hover {
  background-color: rgba(255, 255, 255, 0.16);
  color: var(--color-primary);
}

.footer-ventures {
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-ventures-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-muted-on-navy);
}

.footer-ventures a {
  display: inline-flex;
  align-items: center;
  opacity: 0.8;
}

.footer-ventures a:hover {
  opacity: 1;
}

.footer-ventures img {
  height: 18px;
  width: auto;
  display: block;
}

/* Divider + bottom credit bar */
.footer-divider {
  margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-bottom p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-muted-on-navy);
}

.footer-bottom a {
  color: var(--color-muted-on-navy);
}

.footer-bottom a:hover {
  color: var(--color-white);
}

.footer-bottom strong {
  color: var(--color-white);
  font-weight: 700;
}

/* Short "about us" paragraph shown above the copyright line. It's a
   child of .footer-bottom-inner (a flex row), and flex-basis: 100% is
   what pushes it onto its own line above the copyright/credit row
   instead of squeezing in beside them.
   Selector is written as ".footer-bottom .footer-about" (rather than
   just ".footer-about") purely so it reliably overrides the plainer
   ".footer-bottom p" rule above it — this footer only ever has one
   dark background, so there's no separate light/dark variant needed. */
.footer-bottom .footer-about {
  flex-basis: 100%;
  max-width: 1200px;
  margin: 0 auto 24px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-muted-on-navy);
  opacity: 0.7;
  text-align: justify;
}

/* -------------------------------------------------------------------------
   6. HOME PAGE
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 128px 0 var(--section-padding);
  text-align: center;
  overflow: hidden;
}

/* A quiet, static background glow behind the hero text — adds depth
   without any motion or external image assets. */
.hero::before {
  content: "";
  position: absolute;
  top: -220px;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0, 136, 176, 0.10) 0%, rgba(0, 136, 176, 0) 65%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 3.2rem;
  margin-bottom: 24px;
}

.hero-sub {
  font-size: 1.25rem;
  color: var(--color-ink);
  font-weight: 600;
  margin-bottom: 16px;
}

.hero-support {
  font-size: 1.05rem;
  color: var(--color-muted);
  max-width: 650px;
  margin: 0 auto 40px;
}

.vision-teaser {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.vision-teaser p {
  font-size: 1.1rem;
}

/* "What We Do" focus-area grid (Home page) */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.focus-card {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
}

.focus-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.focus-icon svg {
  width: 24px;
  height: 24px;
}

.focus-card h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.focus-card p {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin-bottom: 0;
}

/* Ecosystem preview grid (Home page) — compact cards, name + tagline + badge */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.preview-card {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  text-align: left;
  box-shadow: var(--shadow-card);
}

.preview-card h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.preview-card p {
  font-size: 0.92rem;
  color: var(--color-muted);
  margin-bottom: 16px;
}

.center-link {
  text-align: center;
}

.closing-statement {
  text-align: center;
}

.closing-statement h2 {
  font-size: 2.1rem;
  max-width: 780px;
  margin: 0 auto 16px;
}

.closing-statement .section-sub {
  max-width: 620px;
  margin: 0 auto 36px;
  font-size: 1.05rem;
}

/* -------------------------------------------------------------------------
   7. ABOUT PAGE
   ------------------------------------------------------------------------- */
.about-copy {
  max-width: 760px;
  margin: 0 auto;
}

.about-copy p {
  font-size: 1.1rem;
}

.approach-block {
  max-width: 760px;
  margin: 0 auto;
}

.approach-block p {
  font-size: 1.1rem;
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.model-card {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--shadow-card);
}

.model-card .model-step {
  display: inline-block;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.model-card h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.model-card p {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   8. ECOSYSTEM PAGE
   ------------------------------------------------------------------------- */
.ecosystem-intro {
  max-width: 700px;
  margin: 0 auto 24px;
  text-align: center;
}

.venture-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.venture-card {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: 44px;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 32px;
  align-items: start;
  box-shadow: var(--shadow-card);
}

.venture-card-head h3 {
  font-size: 1.6rem;
  margin-bottom: 12px;
}

.venture-tagline {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0;
  font-size: 1rem;
}

.venture-card-body p {
  font-size: 1.05rem;
  color: var(--color-ink);
}

/* Short scannable "what this venture does" list inside a venture card */
.venture-highlights {
  margin: 4px 0 20px;
  padding-left: 20px;
}

.venture-highlights li {
  list-style: disc;
  color: var(--color-muted);
  font-size: 1rem;
  margin-bottom: 8px;
}

/* -------------------------------------------------------------------------
   9. CONTACT PAGE
   ------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}

.contact-intro h1 {
  font-size: 2.4rem;
}

.contact-details {
  margin-top: 32px;
}

.contact-details h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: 10px;
}

.contact-details a {
  font-weight: 700;
  font-size: 1.05rem;
}

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

.contact-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink);
}

.contact-social a:hover {
  background-color: var(--color-ink);
  color: var(--color-paper);
}

/* The contact form is the one "boxed" component on the site — per
   brand guidelines, cards are reserved for forms and discrete listings. */
.contact-form {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: 40px;
  box-shadow: var(--shadow-card);
}

.form-group {
  margin-bottom: 22px;
}

.form-group label {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--color-surface);
  background-color: var(--color-paper);
  font-family: var(--font-main);
  font-size: 1rem;
  color: var(--color-ink);
  transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.form-group textarea {
  min-height: 140px;
  resize: vertical;
}

.form-note {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 4px;
}

.form-success {
  display: none;
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: 12px;
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-weight: 600;
}

.form-success.is-visible {
  display: block;
}

/* Cloudflare Turnstile widget ("Verify you are human" check box) */
.form-group--turnstile {
  margin-bottom: 18px;
}

.turnstile-error-message {
  display: none;
  font-size: 0.85rem;
  color: #c0392b;
  margin-top: 8px;
}

.turnstile-error-message.is-visible {
  display: block;
}

.form-error-message {
  display: none;
  font-size: 0.85rem;
  color: #c0392b;
  margin-top: 8px;
}

.form-error-message.is-visible {
  display: block;
}

/* Honeypot field — a spam trap, never meant to be seen or reached by a
   real visitor. Kept in the page's layout (not display:none) and still
   reachable by assistive tech's "read everything" mode, but visually and
   by tab order it's never in a real person's way. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   9b. "GET IN TOUCH" POPUP MODAL
   Every "Get in Touch" button across the site (in the navbar and the
   dark closing sections) opens this same quick-contact popup instead of
   navigating away. It appears/disappears instantly — no fade or slide,
   matching the rest of the site. See js/script.js for the open/close
   logic.
   ------------------------------------------------------------------------- */

/* While the modal is open, the page underneath can't scroll */
body.modal-open {
  overflow: hidden;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: rgba(10, 42, 74, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: 40px;
  box-shadow: var(--shadow-card);
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background-color: var(--color-ink);
  color: var(--color-white);
}

.modal-sub {
  color: var(--color-muted);
  margin-bottom: 24px;
}

/* -------------------------------------------------------------------------
   9c. COOKIE CONSENT BANNER
   A small card fixed to the bottom-left of the screen, shown once until
   the visitor picks Accept or Decline (remembered via localStorage — see
   js/script.js). Appears/disappears instantly, no animation.
   ------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 999;
  width: calc(100% - 48px);
  max-width: 380px;
  background-color: var(--color-white);
  border-left: 4px solid var(--color-primary);
  border-radius: 16px;
  padding: 22px 26px 22px 22px;
  box-shadow: var(--shadow-card);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner h3 {
  font-size: 1.05rem;
  margin: 0 0 10px;
  padding-right: 22px;
}

.cookie-banner p {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 0 0 18px;
}

.cookie-banner-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cookie-banner-close:hover {
  color: var(--color-ink);
}

.cookie-banner-actions {
  display: flex;
  gap: 12px;
}

.cookie-banner-actions .btn {
  flex: 1;
  padding: 11px 18px;
  font-size: 0.92rem;
}

/* -------------------------------------------------------------------------
   10. FAQ ACCORDION COMPONENT
   A question button plus an answer panel. Unlike the rest of the site,
   this one component DOES animate — the answer smoothly expands and
   collapses (rather than snapping open/closed) — because native HTML
   <details>/<summary> can only ever animate the opening half smoothly,
   not the closing half, so a small amount of JavaScript (see
   js/script.js) drives this instead. Used on the About page FAQ.
   ------------------------------------------------------------------------- */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background-color: var(--color-white);
  border-radius: 14px;
  padding: 0 24px;
  box-shadow: var(--shadow-card);
}

/* The question — a full-width button, styled to look like plain text */
.faq-question {
  display: block;
  width: 100%;
  background: none;
  border: none;
  margin: 0;
  text-align: left;
  font-family: var(--font-main);
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-ink);
  padding: 18px 40px 18px 0;
  position: relative;
}

/* Plus/minus indicator, drawn with two small CSS bars rather than an
   image or a font character — see .faq-icon below for how it animates. */
.faq-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}

.faq-icon .bar {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-primary);
  border-radius: 1px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-icon .bar-h {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.faq-icon .bar-v {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}

/* Opening: the vertical bar rotates 90° to lie flat on top of the
   horizontal one, turning the "+" into a "−" smoothly instead of the
   character just swapping instantly. */
.faq-item.is-open .faq-icon .bar-v {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* The answer smoothly grows/shrinks using a CSS grid trick (0fr → 1fr)
   instead of jumping between hidden and visible, and its text gently
   fades in/out at the same time for a softer reveal. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-item p {
  color: var(--color-muted);
  padding-bottom: 20px;
  margin: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.faq-item.is-open p {
  opacity: 1;
  transition: opacity 0.25s ease 0.1s;
}

/* Visitors who've asked their device for reduced motion still get an
   instant, non-animated toggle instead */
@media (prefers-reduced-motion: reduce) {
  .faq-answer,
  .faq-icon .bar,
  .faq-item p {
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   10b. LEGAL PAGES (Privacy Policy, Terms and Conditions, Cookie Policy)
   A plain, document-style layout (breadcrumb, navy numbered headings, one
   continuous column) matching the format used across the NorthernSky
   family of sites, rather than the boxed/sectioned look of the marketing
   pages.
   ------------------------------------------------------------------------- */
.legal-page {
  padding: 56px 0 var(--section-padding);
}

/* Everything — breadcrumb, title, date, notice, and body copy — shares
   this one narrow column so their left/right edges all line up. */
.legal-page-inner {
  max-width: 700px;
  margin: 0 auto;
}

/* BREADCRUMB — "Home / Page Name". Despite living in this section, it's
   used at the top of every page's header, not just the legal pages. */
/* Matches .legal-page-inner's own width exactly (700px, centered) so the
   breadcrumb lands in the same horizontal position on every page,
   regardless of how wide that page's own content wrapper is. Always
   left-aligned, even inside a centered hero section. */
.breadcrumb {
  max-width: 700px;
  margin: 0 auto 18px;
  font-size: 0.85rem;
  color: var(--color-muted);
  text-align: left;
}

/* On the Contact page the heading/copy below it is left-aligned (not
   centered like the About/Ecosystem hero, or boxed like the legal
   pages), so the breadcrumb needs to sit flush with that same left
   edge instead of centering itself in its own narrower column. */
.breadcrumb--flush {
  max-width: none;
  margin: 0 0 18px;
}

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

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

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

.legal-title {
  color: var(--color-navy);
  font-size: 2.4rem;
  margin-bottom: 10px;
}

.legal-updated {
  color: var(--color-muted);
  font-size: 0.92rem;
  margin-bottom: 32px;
}

.legal-notice {
  background-color: var(--color-surface);
  border-left: 3px solid var(--color-primary);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 40px;
}

.legal-notice p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}

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

.legal-content h2 {
  color: var(--color-navy);
  font-size: 1.3rem;
  margin-top: 36px;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p,
.legal-content li {
  color: var(--color-muted);
  font-size: 1.02rem;
}

.legal-content ul {
  margin-bottom: 16px;
  padding-left: 22px;
}

.legal-content li {
  list-style: disc;
  margin-bottom: 8px;
}

/* -------------------------------------------------------------------------
   11. RESPONSIVE TWEAKS
   ------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 960px) {
  :root {
    --section-padding: 72px;
  }

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

  .venture-card {
    grid-template-columns: 1fr;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }
}

/* Mobile */
@media (max-width: 700px) {
  :root {
    --section-padding: var(--section-padding-mobile);
  }

  .modal {
    padding: 28px 24px;
  }

  .cookie-banner {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    max-width: none;
  }

  .legal-title {
    font-size: 1.9rem;
  }

  .hero {
    padding-top: 80px;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .hero-sub {
    font-size: 1.05rem;
  }

  .closing-statement h2 {
    font-size: 1.6rem;
  }

  .preview-grid,
  .focus-grid,
  .model-grid {
    grid-template-columns: 1fr;
  }

  .venture-card {
    padding: 28px;
  }

  .footer-top {
    flex-direction: column;
  }

  .footer-links-row {
    justify-content: flex-start;
    gap: 10px 20px;
  }

  .footer-mid {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  /* On mobile the pill only needs to hold the logo and the hamburger —
     switch it from the 3-column grid to a simple space-between row. */
  .navbar-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 10px 14px 10px 20px;
  }

  /* The "Get in Touch" button moves into the dropdown menu instead of
     sitting in the main bar, so it doesn't crowd the hamburger. */
  .nav-cta {
    display: none;
  }

  /* Mobile navigation menu — opens/closes instantly, no slide animation.
     It's its own floating rounded panel, just below the pill. */
  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    /* Solid enough that whatever page content sits behind it (often a
       large, bold hero heading) never shows through and makes the menu
       links hard to read. The top navbar pill can stay more translucent
       since it floats over lighter backgrounds while scrolling; this
       dropdown opens directly over page content, so it needs to be
       reliably opaque regardless of what that content looks like. */
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(10, 42, 74, 0.06), 0 12px 28px rgba(10, 42, 74, 0.10);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 24px 20px;
  }

  .nav-menu.is-open {
    display: flex;
  }

  .nav-menu .nav-link {
    width: 100%;
    padding: 14px 0;
  }

  .nav-link.active {
    font-weight: 800;
  }

  /* This second "Get in Touch" button only exists inside the mobile
     dropdown (see the comment in the HTML) — full width, at the bottom. */
  .nav-cta--menu {
    display: block;
    text-align: center;
    margin-top: 8px;
  }
}