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

/* Archivo — display/title face, loaded via the Google Fonts <link> on each page.
   Body stays Inter. */

:root {
  --ink:     #0D1F1F;
  --bg:      #F2F6F6;
  --surface: #FFFFFF;
  --pale:    #E8EEEE;
  --stroke:  #D0DCDC;
  --moss:    #124B4B;
  --teal:    #1A6B5A;
  --mid:     #4A7C70;
  --muted:   #6B8F8A;
  --body:    #5C6C6B;   /* body text on light backgrounds */
  --accent:  #67F0BA;
  --serif:   'Archivo', 'Inter', system-ui, sans-serif;
  --sans:    'Inter', system-ui, sans-serif;
  /* "Under the sea" depth — moss brightening at top-centre, easing toward ink at the edges.
     Dimmer than a flat ink vignette: ink only reaches full strength past the visible corner. */
  --hero-depth: radial-gradient(150% 150% at 22% 18%, var(--moss) 30%, var(--ink) 98%);
}

html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--sans);
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  /* clip (not hidden) so no horizontal scroll container is created — kills the
     stray sideways scroll without disabling vertical scroll or sticky behaviour */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* ─── CONTENT CONTAINER ───────────────────────────────────
   One shared wrapper that caps and centers inner content site-wide.
   Full-bleed section backgrounds stay on the section element; only the
   inner content is wrapped in .container, so backgrounds still span edge
   to edge. The cap engages once the viewport exceeds the container; below
   that the content is fluid (the clamp gutter only narrows on small screens). */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 64px);
}

/* ─── TYPE SYSTEM ─────────────────────────────────────────
   Single source of truth for headings. Titles use Archivo
   (--serif); body text uses Inter (--sans). Sizes are fluid
   via clamp(<mobile-min>, <fluid>, <desktop-max>) so they
   cover mobile → desktop in one rule.

     Tier        Mobile     Desktop   Use
     .display    1.8rem  →  2.8rem    Large centered statements
     h1          1.85rem →  3rem      Hero / page titles
     h2          1.6rem  →  2.2rem    Section titles
     h3          1.15rem →  1.25rem   Secondary section titles
     h4 / label  0.72rem (fixed)      Eyebrow subtitles, all caps

   Colour is contextual — set by each component, not here.      */
h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h1       { font-size: clamp(1.85rem, 1.05rem + 3.4vw, 3rem);  line-height: 1.1; }
h2       { font-size: clamp(1.6rem, 1.25rem + 1.55vw, 2.2rem); line-height: 1.18; }
h3       { font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.25rem); line-height: 1.25; letter-spacing: -0.01em; }
.display,
.manifesto h2 { font-size: clamp(1.8rem, 1.1rem + 3vw, 2.8rem); line-height: 1.15; }
h2 em, h3 em, .display em { font-style: italic; font-weight: 400; }
/* Hero titles (h1) render uniformly — no italic/colour emphasis */
h1 em { font-style: normal; font-weight: inherit; color: inherit; }

/* H4 — eyebrow / subtitle: very small, all caps, wide tracking.
   Applied to <h4> and the eyebrow label classes used site-wide. */
h4,
.section-label,
.page-hero-label,
.tool-hero-label,
.hero-eyebrow,
.sector-card-tag,
.gen-label {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
}

/* HERO TAG — pill label above a hero title, on dark backgrounds (no fill) */
.hero-tag {
  display: inline-flex; align-self: flex-start; align-items: center;
  padding: 0.45rem 0.95rem; margin-bottom: 1.4rem;
  border-radius: 999px; border: 1.5px solid rgba(103,240,186,0.5);
  color: var(--accent); font-size: 0.95rem; font-weight: 400; line-height: 1;
}

/* TOP BAR */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 101;
  height: 42px;
  display: flex; align-items: center;
  padding: 0;
  background: transparent;
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.35s ease, transform 0.4s ease;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.top-bar.hidden { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.top-bar-inner { display: flex; justify-content: flex-end; align-items: center; height: 100%; }
.top-bar-link {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color 0.2s;
}
.top-bar-link:hover { color: rgba(255,255,255,0.65); }

/* Log in temporarily hidden — markup + JS are kept in place; delete this block to
   restore the top bar and its "Log in" link. The top bar holds only that link, so
   we hide the whole bar and pull the nav up to the top edge. */
.top-bar { display: none; }
nav:not(.scrolled) { top: 0; padding-top: 2.25rem; }

/* NAV */
nav {
  position: fixed; top: 42px; left: 0; right: 0; z-index: 100;
  padding: 1.25rem 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    top 0s,
    opacity 0.4s ease,
    transform 0.45s ease,
    padding 0.4s ease,
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
nav.hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
/* Sticky state — floating frosted-glass pill */
nav.scrolled {
  top: 0.65rem; left: 1.5rem; right: 1.5rem;   /* side float; absorbed by centring once past 1280 */
  max-width: 1280px; margin-inline: auto;   /* same cap + centring as .container */
  padding: 0.6rem clamp(24px, 5vw, 64px);   /* same gutter as .container so the logo + CTA line up with site content */
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 12px 34px rgba(18,75,75,0.14);
}
.logo { display:flex; align-items:center; text-decoration:none; }
.logo img { height:18px; width:auto; display:block; }
/* Nav inner content is capped + centred by .container, matching the page content
   gutter (nav itself carries no horizontal padding). In the scrolled state the pill
   is already capped, so the inner fills it and the pill's own padding insets it. */
.nav-inner { display:flex; justify-content:space-between; align-items:center; width:100%; }
nav.scrolled .nav-inner { max-width:none; padding-inline:0; }

/* ─── RESPONSIVE ─────────────────────────────────────── */
/* Tablet: ≤ 1024px */
@media (max-width: 1024px) {
  .top-bar { padding: 0; height: 38px; }
  .manifesto { margin: 2rem 0 5rem; padding: 6rem 2rem; }
  nav { padding:1.25rem 0; top: 38px; }
  nav.scrolled { top: 0.55rem; }   /* inherits the base inset + gutter for consistent margins/alignment */
  .nav-links { gap:1.5rem; }
  section { padding:6rem 0; }
  .page-hero { padding:9rem 0 5rem; }

  /* Two-col → single-col */
  .hero { grid-template-columns:1fr; max-height:none; min-height:auto; padding-top:5rem; }
  .hero-right { min-height:340px; }
  .what-grid { grid-template-columns:1fr; gap:3rem; }
  .proof { grid-template-columns:1fr; gap:4rem; }
  .theory { grid-template-columns:1fr; gap:3rem; }
  .contact { grid-template-columns:1fr; gap:3rem; }

  /* Three-col → two-col */
  .sectors-grid { grid-template-columns:repeat(2,1fr); }
  .reasons { grid-template-columns:repeat(2,1fr); }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .argument-grid { grid-template-columns:1fr; }
  .argument-point { border-right:none; border-bottom:1px solid var(--stroke); }
  .argument-point:last-child { border-bottom:none; }

  /* Four-col → two-col */
  .advisors-grid { grid-template-columns:repeat(2,1fr); }
  .gen-grid { grid-template-columns:1fr; gap:1px; }

  /* Level body */
  .level-item.open .level-body { grid-template-columns:1fr; gap:1rem; }

  /* Framework theory blocks */
  .theory-block { grid-template-columns:1fr; min-height:auto; }
  .theory-block.flip { direction:ltr; }
  .coord-block { grid-template-columns:1fr; }
  .coord-text { padding:4rem 2rem; }
  .coord-visual { min-height:300px; }

  /* Use cases */
  .usecase-grid { grid-template-columns:1fr; }
  .usecase-body { grid-template-columns:1fr; }
  .usecase-col { border-right:none; border-bottom:1px solid var(--stroke); }
  .usecase-col:last-child { border-bottom:none; }
  .screenshot-pair { grid-template-columns:1fr; }

  /* Sectors layout */
  .sectors-layout { grid-template-columns:1fr; gap:3rem; }

  /* Footer */
  footer { padding: 3.5rem 0 2rem; }
  .footer-top { gap: 2.5rem 3rem; }
  .footer-cols { gap: 2.5rem; }

  /* Closing band photo — on touch devices `background-attachment: fixed` is either
     ignored or sizes the image to the viewport, leaving the photo cropped to an
     extreme zoom. Pin it to the element instead so it reads normally. */
  .manifesto--fixed {
    background-attachment: scroll;
    background-position: center;
  }
}

/* ─── HAMBURGER BUTTON (hidden on desktop) ─────────────── */
.hamburger-btn {
  display: none;
  background: none; border: none; cursor: pointer;
  /* Larger tap target — comfortable to hit on touch (min ~48px square) */
  padding: 0.85rem 0.75rem; margin: -0.85rem -0.4rem;
  min-height: 48px; min-width: 48px;
  align-items: center;
  color: #fff;
  z-index: 102;
}
.hamburger-btn span {
  display: block; width: 22px; height: 2px;
  background: currentColor; border-radius: 4px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.hamburger-btn span + span { margin-top: 5px; }

/* ─── FULL-SCREEN NAV OVERLAY ───────────────────────────── */
.nav-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--moss);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 4rem 2rem;   /* links + CTA centre vertically; 2rem left gutter */
  overflow-y: auto;
  /* swipe down to open, swipe back up to close */
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.42s;
}
.nav-overlay.open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}
.nav-overlay-close {
  position: absolute; top: 1.4rem; right: 1.5rem;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.6); padding: 0.5rem;
  line-height: 1;
}
.nav-overlay-close svg { display: block; }
.nav-overlay-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  width: 100%;
}
.nav-overlay-links li { width: 100%; }
.nav-overlay-links li a {
  display: block; width: 100%;
  padding: 0.85rem 0;
  font-family: var(--serif); font-size: 1.9rem; font-weight: 400;
  color: rgba(255,255,255,0.8); text-decoration: none;
  letter-spacing: -0.01em; text-align: left;
  transition: color 0.2s;
}
.nav-overlay-links li a:hover,
.nav-overlay-links li a.active { color: var(--accent); }
/* Request a demo — CTA after the page links; leads to the contact form */
.nav-overlay-cta {
  display: inline-block; margin-top: 1.8rem;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600;
  color: var(--moss); background: var(--accent);
  padding: 0.85rem 2rem; border-radius: 999px;
  text-decoration: none; letter-spacing: 0.02em;
  transition: background 0.2s ease;
}
.nav-overlay-cta:hover { background: oklch(90% 0.14 168); }
.nav-overlay-logo {
  position: absolute; top: 1.6rem; left: 2rem;
}
/* language selector pinned to the bottom of the menu, left-aligned */
.nav-overlay-lang {
  appearance: none; -webkit-appearance: none;
  position: absolute; left: 2rem; bottom: 2.5rem;   /* pinned to the bottom; links + CTA stay centred */
  background-color: rgba(255,255,255,0.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 13px;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 4px;
  color: #fff; font-family: var(--sans); font-size: 1rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.65rem 2.6rem 0.65rem 1.1rem; cursor: pointer;
}
.nav-overlay-lang option { color: #0D1F1F; }

/* Mobile: ≤ 640px — everything single column, no exceptions */
@media (max-width: 640px) {
  .top-bar { display: none; }
  nav { padding:1rem 0; top: 0; }
  nav.scrolled { top: 0.6rem; left: 0.75rem; right: 0.75rem; padding: 0.5rem 0.6rem 0.5rem 1.1rem; }
  .nav-links { display:none !important; }
  .nav-cta { display: none !important; }
  .nav-lang { display: none !important; }
  .hamburger-btn { display: flex; flex-direction: column; justify-content: center; }
  section { padding:4rem 0; }
  .page-hero { padding:7rem 0 3.5rem; }

  /* Hero */
  .hero { grid-template-columns:1fr; }
  .hero-left { padding:3rem 1.2rem 2rem; }
  .hero-right { min-height:260px; padding:2rem 1.2rem; }

  /* Force all grids to single column */
  .what-grid,
  .sectors-grid,
  .sectors-list-grid,
  .reasons,
  .team-grid,
  .advisors-grid,
  .gen-grid,
  .usecase-grid,
  .usecase-body,
  .screenshot-pair,
  .theory,
  .contact,
  .proof,
  .coord-block,
  .theory-block,
  .theory-block.flip { grid-template-columns:1fr !important; direction:ltr; }

  /* Remove all side borders that become visual artifacts in single col */
  .argument-point,
  .reason,
  .usecase-col,
  .gen-col { border-right:none !important; border-bottom:1px solid var(--stroke); }
  .argument-point:last-child,
  .reason:last-child,
  .usecase-col:last-child,
  .gen-col:last-child { border-bottom:none; }

  /* Spacing */
  .proof { gap:3rem; padding:4rem 1.2rem; }
  .proof-stat-num { font-size:2.2rem; }
  .coord-text { padding:3rem 1.2rem; }
  .coord-visual { min-height:220px; padding:2rem 1.2rem; }
  .usecase-head { padding:2rem 1.2rem; }
  .usecase-col { padding:2rem 1.2rem; border-right:none; border-bottom:1px solid var(--stroke); }
  .usecase-body-card { padding:1.5rem 1.2rem; }

  /* Levels */
  .levels { padding:4rem 1.2rem; }
  .level-header { padding:1.2rem 1rem; gap:1rem; }
  .level-body { padding:0 1rem 1.5rem 3.5rem; }
  .level-item.open .level-body { grid-template-columns:1fr !important; }

  /* Manifesto */
  .manifesto { margin: 1.5rem 0 4rem; padding: 4rem 1.5rem; }
  .manifesto-actions { flex-direction:column; align-items:center; }

  .sectors-layout { grid-template-columns:1fr !important; gap:2.5rem; }
  /* Footer mobile */
  footer { padding: 3rem 0 1.75rem; }
  .footer-top { flex-direction: column; gap: 2.5rem; padding-bottom: 2.5rem; }
  .footer-brand { max-width: none; width: 100%; }
  .footer-tagline { max-width: none; }
  .footer-cols { gap: 2.25rem; width: 100%; }
  .footer-col { min-width: 8rem; }
  .footer-aside { width: 100%; }
  .footer-lang-select { width: 100%; }
  .footer-bottom { flex-wrap: wrap; gap: 1rem; }
  .screenshot-body { min-height:180px; }
}
.nav-links { display: flex; gap: 2.5rem; list-style: none; margin-left: auto; }
.nav-links a {
  font-size: 0.82rem; font-weight: 500; color: rgba(255,255,255,0.55);
  text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase;
  transition: color 0.2s;
}
.nav-links a:hover { color: rgba(255,255,255,0.9); }
.nav-links a.active { color: var(--accent); }
nav.scrolled .nav-links a { color: var(--ink); opacity: 0.45; }
nav.scrolled .nav-links a:hover { color: var(--ink); opacity: 1; }
nav.scrolled .nav-links a.active { color: var(--moss); opacity: 1; }
nav.scrolled .hamburger-btn { color: var(--ink); }
.nav-cta {
  font-size: 0.82rem; font-weight: 600; color: var(--moss);
  background: var(--accent); padding: 0.6rem 1.5rem; border-radius: 4px;
  text-decoration: none; letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.15s;
}
/* In the hero (non-sticky) state the CTA is hidden so the nav links justify
   right; it only appears once the nav collapses into the sticky pill. */
.nav-cta { display: none; }
.nav-cta:hover { background: oklch(90% 0.14 168); transform: translateY(-1px); }
nav.scrolled .nav-cta { display: inline-block; color: var(--moss); background: var(--accent); border-radius: 999px; }
nav.scrolled .nav-cta:hover { background: oklch(90% 0.14 168); }

/* language selector in the main nav — compact "EN" control; adapts to both nav
   states (light over the hero, dark on the frosted pill once scrolled). */
.nav-cta { margin-left: 2rem; }
.nav-lang {
  appearance: none; -webkit-appearance: none;
  margin-left: 1.6rem;
  background-color: rgba(255,255,255,0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 10px;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 4px;
  color: rgba(255,255,255,0.7); font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.38rem 1.5rem 0.38rem 0.65rem; cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.nav-lang:hover { border-color: rgba(255,255,255,0.4); background-color: rgba(255,255,255,0.1); }
.nav-lang:focus-visible { outline: none; border-color: var(--accent); }
.nav-lang option { color: #0D1F1F; }
/* scrolled pill — dark text + dark chevron on the frosted white pill */
nav.scrolled .nav-lang {
  color: var(--ink); border-color: rgba(13,31,31,0.18); background-color: rgba(13,31,31,0.04);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230D1F1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
nav.scrolled .nav-lang:hover { border-color: rgba(13,31,31,0.4); background-color: rgba(13,31,31,0.07); }

/* PAGE HERO */
.page-hero {
  padding: 11rem 0 6rem;
  background: var(--hero-depth);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 60%;
  background: linear-gradient(135deg, transparent 40%, rgba(103,240,186,0.06) 100%);
  pointer-events: none;
}
.page-hero .page-hero-label,
.page-hero-label {
  color: var(--accent); margin-bottom: 1.4rem;
}
.page-hero h1 {
  color: var(--surface); max-width: 700px; margin-bottom: 1.4rem;
}
.page-hero p {
  font-size: 1.18rem; line-height: 1.55; color: #fff;
  max-width: 540px; font-weight: 300;
}

/* SECTIONS — full-bleed background + vertical rhythm; horizontal gutter is the
   .container's job now, so inner content of every section is wrapped in one. */
section { padding: 8rem 0; }
.section-label {
  color: var(--mid);
  margin-bottom: 1rem;
}

/* BUTTONS */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--moss); color: var(--surface); padding: 0.85rem 2rem;
  border-radius: 4px; text-decoration: none; font-size: 0.9rem;
  font-weight: 600; letter-spacing: 0.01em;
  transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: var(--teal); transform: translateY(-1px); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--moss); text-decoration: none; font-size: 0.9rem;
  font-weight: 500; border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px; opacity: 0.7; transition: opacity 0.2s;
}
.btn-ghost:hover { opacity: 1; }
.btn-light {
  display: inline-flex; align-items: center;
  background: var(--surface); color: var(--moss); padding: 0.9rem 2.2rem;
  border-radius: 4px; text-decoration: none; font-size: 0.9rem;
  font-weight: 600; transition: background 0.2s, transform 0.15s;
}
.btn-light:hover { background: var(--bg); transform: translateY(-1px); }
.btn-glass {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.28);
  color: var(--surface); padding: 0.9rem 2.2rem;
  border-radius: 4px; text-decoration: none; font-size: 0.9rem;
  font-weight: 600; letter-spacing: 0.01em;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.btn-glass:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-1px);
}
.btn-outline-light {
  display: inline-flex; align-items: center;
  border: 1.5px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.65);
  padding: 0.9rem 2.2rem; border-radius: 4px; text-decoration: none;
  font-size: 0.9rem; font-weight: 500; transition: all 0.2s;
}
.btn-outline-light:hover { border-color: rgba(255,255,255,0.6); color: var(--surface); }

/* IMAGE CARD — slide-down overlay reveal. Shared by Focus Sectors (home) and the About team. */
.sector-card { position:relative; overflow:hidden; border-radius:4px; background:var(--moss); aspect-ratio:5/4; cursor:default; }
.sector-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.sector-card-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:url(#duotone-minnow); transition:transform 0.6s cubic-bezier(0.25,0,0.35,1); }
.sector-card:hover .sector-card-img, .sector-card:focus-within .sector-card-img { transform:scale(1.04); }
/* default light scrim — keeps the white title legible over the image */
.sector-card::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(13,31,31,0.55) 0%, rgba(13,31,31,0.12) 38%, transparent 65%); }
/* hover/focus dark panel — slides down from the top to cover the card */
.sector-card-overlay { position:absolute; inset:0; z-index:2; pointer-events:none; background:rgba(18,75,75,0.7); backdrop-filter:blur(6px) saturate(1.1); -webkit-backdrop-filter:blur(6px) saturate(1.1); transform:translateY(-100%); transition:transform 0.38s ease; }
.sector-card:hover .sector-card-overlay, .sector-card:focus-within .sector-card-overlay { transform:translateY(0); }
/* full-card container: title pinned bottom-left, description pinned top-left */
.sector-card-body { position:absolute; inset:0; padding:2rem; z-index:3; display:flex; flex-direction:column-reverse; justify-content:space-between; }
.sector-card-tag { color:rgba(103,240,186,0.6); margin-bottom:0.6rem; }
.sector-card-name { color:#fff; margin:0; transition:color 0.3s ease; }
.sector-card:hover .sector-card-name, .sector-card:focus-within .sector-card-name { color:#67F0BA; }
.sector-card-line { font-size:1rem; line-height:1.5; color:#fff; font-weight:400; margin:0; opacity:0; transform:translateY(8px); transition:opacity 0.3s ease 0.12s, transform 0.3s ease 0.12s; }
.sector-card:hover .sector-card-line, .sector-card:focus-within .sector-card-line { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce) { .sector-card-img, .sector-card-overlay, .sector-card-name, .sector-card-line { transition:none; } }
/* Home sectors on mobile: no hover, so reveal the panel, read name → description,
   and let the card grow to its content instead of clipping it to a 5/4 box.
   Placed after the base rules so it wins on source order (media queries add no specificity). */
@media (max-width: 640px) {
  .sectors-grid .sector-card { aspect-ratio:auto; }
  .sectors-grid .sector-card-overlay { transform:translateY(0); }
  .sectors-grid .sector-card-body { position:relative; flex-direction:column; justify-content:flex-start; gap:0.6rem; padding:1.75rem 1.5rem; min-height:220px; }
  .sectors-grid .sector-card-line { opacity:1; transform:none; }
}
.btn-ghost-light {
  display: inline-flex; align-items: center;
  background: transparent; color: var(--surface);
  border: 1px solid rgba(255,255,255,0.7);
  padding: 0.9rem 2.2rem; border-radius: 4px; text-decoration: none;
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em;
  transition: background 0.2s, border-color 0.2s;
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* MANIFESTO — contained closing block with image background */
.manifesto {
  position: relative; isolation: isolate;
  margin: 2rem 0 6rem;
  border-radius: 4px; overflow: hidden;
  text-align: center; padding: 8rem 4rem;
  background: var(--moss);
}
/* Closing-band photo — pin it to the viewport so content scrolls over it (desktop).
   Mobile browsers ignore fixed attachment and render it static — accepted fallback.
   A fixed background stays clipped to the rounded card; a position:fixed <img> would not. */
.manifesto--fixed {
  background-size: cover;
  background-position: center 40%;
  background-attachment: fixed;
}
.manifesto--index     { background-image: url("../img/closing-index.jpg"); }
.manifesto--framework { background-image: url("../img/closing-framework.jpg"); }
.manifesto--tool      { background-image: url("../img/closing-tool.jpg"); }
/* very slight green wash — imagery stays full-colour */
.manifesto::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(18,75,75,0.20);
}
/* localized scrim behind the text only — video edges stay bright */
.manifesto::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 58% 62% at 50% 50%, rgba(13,31,31,0.55) 0%, rgba(13,31,31,0) 72%);
}
.manifesto-inner { position: relative; z-index: 2; }
.manifesto h2 {
  color: var(--surface); max-width: 740px; margin: 0 auto 1.6rem;
  text-shadow: 0 2px 18px rgba(0,0,0,0.4);
}
.manifesto h2 em { font-style: normal; font-weight: inherit; color: inherit; }
.manifesto-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* SCREENSHOT PLACEHOLDER */
.screenshot-placeholder {
  background: var(--surface); border: 1px solid var(--stroke);
  border-radius: 4px; overflow: hidden; position: relative;
}
.screenshot-bar {
  background: var(--pale); border-bottom: 1px solid var(--stroke);
  padding: 0.7rem 1rem; display: flex; align-items: center; gap: 0.5rem;
}
.screenshot-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.screenshot-body {
  min-height: 260px; display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}
.screenshot-body img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.screenshot-hint {
  font-size: 0.78rem; color: var(--muted); text-align: center; font-weight: 300;
}

/* FOOTER */
footer {
  background: var(--ink); border-top: 1px solid rgba(255,255,255,0.06);
  padding: 4.5rem 0 2.5rem;
}
.footer-inner { display: flex; flex-direction: column; width: 100%; }

/* top region: brand · link columns · language */
.footer-top {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-start; gap: 3rem 4rem; padding-bottom: 3rem;
}
.footer-brand { max-width: 280px; }
.footer-logo { display: inline-block; text-decoration: none; }
.footer-logo img { height: 26px; width: auto; display: block; }
.footer-tagline {
  margin: 1.3rem 0 0; font-size: 0.92rem; line-height: 1.55;
  color: rgba(255,255,255,0.55); max-width: 260px;
}

.footer-cols { display: flex; flex-wrap: wrap; gap: 3.5rem; }
.footer-col-title {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); opacity: 0.85; margin: 0 0 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.footer-col li { line-height: 1.25; }
.footer-col a, .footer-static {
  font-size: 0.92rem; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.2s;
}
.footer-col a:hover { color: #fff; }
/* contact rows: leading icon + value */
.footer-contact-item { display: flex; align-items: center; gap: 0.6rem; }
.footer-ico { flex: 0 0 auto; color: var(--accent); opacity: 0.9; }

/* language selector */
.footer-aside { display: flex; flex-direction: column; gap: 1.1rem; }
.footer-lang-select {
  appearance: none; -webkit-appearance: none;
  background-color: rgba(255,255,255,0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 11px;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 4px;
  color: rgba(255,255,255,0.85); font-family: var(--sans); font-size: 0.88rem;
  padding: 0.55rem 2.3rem 0.55rem 0.9rem; cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.footer-lang-select:hover { border-color: rgba(255,255,255,0.4); background-color: rgba(255,255,255,0.1); }
.footer-lang-select:focus-visible { outline: none; border-color: var(--accent); }
.footer-lang-select option { color: #0D1F1F; }

/* bottom region: copyright + social */
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-note { font-size: 0.78rem; color: rgba(255,255,255,0.35); margin: 0; }
.footer-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
  transition: color 0.2s, background 0.2s;
}
.footer-social:hover { color: var(--accent); background: rgba(103,240,186,0.12); }

/* SCROLL ANIMATIONS */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* FADE UP HERO */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.fu  { animation: fadeUp 0.8s ease both; }
.fu1 { animation: fadeUp 0.8s 0.1s ease both; }
.fu2 { animation: fadeUp 0.8s 0.22s ease both; }
.fu3 { animation: fadeUp 0.8s 0.34s ease both; }