/* GNS Website Shell: brand stylesheet
   Palette + type per capabilities/brand-studio/brand-kit.md, templates/gns-document-shell.md
   and the deck shell (deck-build/deck.template.html) for the navy register.

   NOTE FOR THE DEVELOPER: the bright signal colors (#E8382C / #F7A81E / #26C24B) are reserved
   for a literal stoplight photograph ONLY. Every other red/gold/green on this site uses the
   WG trio below. The copy says "yellow"; the paint is WG Gold. That is intentional. */

:root {
  /* light register */
  --brand:        #0067A6;  /* GNS Blue */
  --brand-deep:   #0B3357;  /* GNS Navy, from the logo */
  --brand-bright: #2C79B0;
  --wg-green:     #00A049;
  --wg-gold:      #FBC331;
  --wg-red:       #C06E60;
  --ink:          #1B2A38;
  --muted:        #5A6B7B;
  --rule:         #DCE6EF;
  --paper:        #FFFFFF;
  --tint:         #E8F1F8;  /* GNS Pale Blue */
  /* dark register, from the deck shell */
  --navy-0:       #03111F;
  --navy-1:       #0B3357;
  --navy-2:       #071F35;
  --ink-light:    #F1F6FB;
  --ink-dim:      #9FBAD3;
  --blue-soft:    #6FA8D6;

  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1180px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.14; margin: 0 0 .55em; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 4.6vw, 3.75rem); }
h2 { font-size: clamp(1.8rem, 3.1vw, 2.5rem); }
h3 { font-size: 1.22rem; font-weight: 600; letter-spacing: -.005em; }
p  { margin: 0 0 1.15em; }
a  { color: var(--brand); }
strong { font-weight: 700; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }

/* NOTE FOR THE DEVELOPER: `.narrow` constrains the MEASURE, not the container.
   Every section keeps the same 1180px wrap and therefore the same left edge, and
   only the text column inside it is capped for readability. Do not put the
   max-width back on the wrap itself: that centres each narrow section
   independently and gives the page a ragged left margin that changes on every
   section. `.centered` opts a block back into centring (the closing CTAs). */
.wrap.narrow { max-width: var(--wrap); }
.wrap.narrow > * { max-width: 820px; }
.wrap.narrow.centered > * { margin-left: auto; margin-right: auto; }

/* Two-column band for sections with enough copy to earn the full width.
   Default: section label and heading left, body right. `.media` flips the
   ratio for a text-plus-image band. Both collapse to one column on mobile. */
.split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.split.media { grid-template-columns: 1.15fr .85fr; align-items: center; }
.split > * > :last-child { margin-bottom: 0; }

/* ---------------- header ---------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav .wrap { display: flex; align-items: center; gap: 30px; height: 86px; }
.nav .logo { display: block; height: 52px; width: auto; }
.nav ul { list-style: none; display: flex; gap: 30px; margin: 0 0 0 auto; padding: 0; }
.nav a.navlink { font-family: var(--font-display); font-size: .95rem; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: -.005em; }
.nav a.navlink:hover, .nav a.navlink[aria-current] { color: var(--brand); }

/* the GNS surface signature: three dots, top right, WG trio. Same as the cockpit and portals. */
.dots3 { display: flex; gap: 9px; margin-left: 6px; }
.dots3 i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.dots3 i:nth-child(1) { background: var(--wg-red); }
.dots3 i:nth-child(2) { background: var(--wg-gold); }
.dots3 i:nth-child(3) { background: var(--wg-green); }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: .97rem;
  padding: 15px 28px; border-radius: 9px; text-decoration: none; border: 2px solid var(--brand);
  background: var(--brand); color: #fff; transition: background .15s, border-color .15s, transform .15s;
  letter-spacing: -.005em;
}
.btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--brand); }
.btn.ghost:hover { background: var(--tint); color: var(--brand-deep); }
.btn.light { background: #fff; color: var(--navy-1); border-color: #fff; }
.btn.light:hover { background: var(--wg-gold); border-color: var(--wg-gold); color: var(--ink); }
.btn.onnavy { background: transparent; color: var(--ink-light); border-color: var(--blue-soft); }
.btn.onnavy:hover { background: var(--blue-soft); color: var(--navy-0); border-color: var(--blue-soft); }

/* ---------------- sections ---------------- */
section { padding: 96px 0; border-bottom: 1px solid var(--rule); }
section.tinted { background: var(--tint); }
section.deep {
  background: linear-gradient(160deg, var(--navy-1) 0%, var(--navy-0) 100%);
  color: var(--ink-light); border-bottom: none;
}
section.deep h2 { color: #fff; }
section.deep p { color: var(--ink-dim); }
section.deep .lede { color: var(--blue-soft); }
section.deep strong { color: #fff; }
.eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: .76rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 16px;
}
section.deep .eyebrow { color: var(--wg-gold); }
.lede { font-size: 1.24rem; color: var(--muted); line-height: 1.6; }

/* ---------------- hero ---------------- */
.hero {
  position: relative; overflow: hidden; border-bottom: none;
  /* auto 100% rather than cover: keeps the whole head in frame, ears included, so it
     reads as an elephant instantly instead of an abstract crop. */
  background: var(--navy-0) url("hero-elephant.png") right center / auto 100% no-repeat;
  color: var(--ink-light);
}
.hero:before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, var(--navy-0) 0%, var(--navy-0) 30%, rgba(3,17,31,.86) 46%, rgba(3,17,31,0) 66%);
}
.hero .wrap { position: relative; z-index: 1; padding-top: 118px; padding-bottom: 118px; min-height: 560px; display: flex; flex-direction: column; justify-content: center; }
.hero h1 { color: #fff; max-width: 19ch; text-wrap: balance; }
.hero .lede { color: var(--ink-dim); max-width: 46ch; }
.hero .payoff { font-family: var(--font-display); font-weight: 700; font-size: 1.42rem; color: var(--wg-gold); margin: 6px 0 0; letter-spacing: -.01em; }
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* inner-page hero: no elephant, lighter */
.hero.plain { background: linear-gradient(160deg, var(--navy-1) 0%, var(--navy-0) 100%); }
.hero.plain:before { display: none; }
.hero.plain h1 { max-width: 22ch; }

/* ---------------- image placeholders ---------------- */
.ph {
  border: 2px dashed var(--brand-bright); background: var(--tint); border-radius: 14px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-display); font-weight: 600; color: var(--brand);
  padding: 30px; min-height: 260px; font-size: .95rem;
}
.ph small { display: block; font-family: var(--font-body); font-weight: 400; color: var(--muted); margin-top: 8px; font-size: .85rem; }
.ph.video { min-height: 230px; }
.ph.wide { min-height: 200px; }

/* ---------------- the stoplight ----------------
   The only literal red/amber/green on the site. See the note in index.html. */
.stoplight { display: flex; justify-content: center; align-items: center; }
.stoplight img { max-height: 520px; width: auto; filter: drop-shadow(0 18px 34px rgba(11,51,87,.22)); }

/* ---------------- the signs ---------------- */
.signs { list-style: none; margin: 28px 0 0; padding: 0; }
.signs li { padding: 13px 0 13px 32px; position: relative; border-top: 1px solid var(--rule); font-size: 1.06rem; }
.signs li:before { content: ""; position: absolute; left: 4px; top: 24px; width: 10px; height: 10px; border-radius: 50%; background: var(--wg-red); }

/* ---------------- the invoice (navy) ---------------- */
.invoice { border-top: 2px solid var(--blue-soft); margin-top: 38px; }
.row {
  display: grid; grid-template-columns: 1fr auto; gap: 18px 40px;
  padding: 26px 0; border-bottom: 1px solid rgba(159,186,211,.22); align-items: baseline;
}
.row .label { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: #fff; letter-spacing: -.01em; }
.row .desc { color: var(--ink-dim); font-size: 1.02rem; margin-top: 6px; max-width: 56ch; }
.row .fig { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--wg-gold); white-space: nowrap; text-align: right; letter-spacing: -.02em; }
.row .fig .per { display: block; font-size: .78rem; font-weight: 400; color: var(--ink-dim); letter-spacing: 0; }
.row.noinvoice .fig { color: var(--wg-red); }
.fineprint { font-size: .92rem; color: var(--ink-dim); font-style: italic; margin-top: 24px; }

/* ---------------- cards ---------------- */
.cards { display: grid; gap: 26px; margin-top: 40px; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.card {
  background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 32px;
  border-top: 5px solid var(--brand); box-shadow: 0 2px 16px rgba(11,51,87,.05);
}
.card h3 { color: var(--brand-deep); }
.card p:last-child { margin-bottom: 0; }
.card .meta { font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }

/* ---------------- the two questions ---------------- */
.questions { margin: 30px 0; padding: 30px 34px; background: var(--tint); border-left: 6px solid var(--brand); border-radius: 0 12px 12px 0; }
.questions p { font-family: var(--font-display); font-weight: 600; font-size: 1.38rem; color: var(--brand-deep); margin: 0 0 10px; letter-spacing: -.01em; }
.questions p:last-child { margin-bottom: 0; }

/* ---------------- genius map ---------------- */
.legend { display: flex; gap: 30px; flex-wrap: wrap; margin: 20px 0 32px; font-size: 1rem; }
.legend span { display: flex; align-items: center; gap: 10px; }
.dot { width: 15px; height: 15px; border-radius: 50%; display: inline-block; }
.dot.g { background: var(--wg-green); }
.dot.y { background: var(--wg-gold); }
.dot.r { background: var(--wg-red); }

/* The Genius Map is the real rendered deliverable, dropped in as an image. */
.mapfig { margin: 28px 0 38px; padding: 0; background: #fff; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 22px rgba(11,51,87,.10); }
.mapfig img { display: block; width: 100%; height: auto; }
.reveal { font-style: italic; color: var(--muted); font-size: 1.06rem; margin-top: 10px; }

/* ---------------- faq ---------------- */
.faq { border-top: 1px solid var(--rule); margin-top: 34px; }
.faq details { border-bottom: 1px solid var(--rule); padding: 22px 0; }
.faq summary { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--brand-deep); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:before { content: "+"; color: var(--brand); font-weight: 700; margin-right: 14px; }
.faq details[open] summary:before { content: "\2212"; }
.faq p { margin: 16px 0 0; color: var(--muted); }

/* ---------------- quotes ---------------- */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 36px; }
.quote { background: #fff; border: 1px solid var(--rule); border-left: 5px solid var(--wg-gold); border-radius: 0 12px 12px 0; padding: 30px 32px; box-shadow: 0 2px 16px rgba(11,51,87,.05); }
.quote p { font-size: 1.04rem; }
.quote cite { font-family: var(--font-display); font-weight: 600; font-style: normal; font-size: .9rem; color: var(--brand-deep); }

.midcta { text-align: center; margin-top: 44px; }

/* ---------------- footer ---------------- */
footer { background: var(--navy-0); color: #fff; padding: 68px 0 36px; }
footer a { color: var(--blue-soft); text-decoration: none; }
footer a:hover { color: #fff; }
footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 44px; }
footer .logo { height: 54px; width: auto; display: block; margin-bottom: 18px; filter: brightness(0) invert(1); opacity: .92; }
footer h4 { font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-dim); }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 10px; font-size: .96rem; }
.corepurpose { margin-top: 52px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.16); text-align: center; }
.corepurpose .tag { font-family: var(--font-display); font-weight: 700; font-size: 1.04rem; color: #fff; display: block; }
.corepurpose .con { font-size: .93rem; color: var(--blue-soft); margin-top: 10px; display: block; }

/* ---------------- shell banner ---------------- */
.shellbar {
  background: var(--wg-gold); color: var(--ink); font-family: var(--font-display); font-weight: 600;
  font-size: .84rem; text-align: center; padding: 10px 20px; letter-spacing: -.005em;
}

@media (max-width: 980px) {
  .cards.three { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  body { font-size: 17px; }
  .cards.three, .cards.two, .quotes, footer .cols { grid-template-columns: 1fr; }
  .nav ul { display: none; }
  .nav .wrap { height: 74px; }
  .nav .logo { height: 44px; }
  section { padding: 64px 0; }
  .hero { background-position: 72% center; }
  .hero:before { background: linear-gradient(180deg, rgba(3,17,31,.94) 0%, rgba(3,17,31,.86) 60%, rgba(3,17,31,.94) 100%); }
  .hero .wrap { padding-top: 76px; padding-bottom: 76px; min-height: 0; }
  .hero h1, .hero .lede { max-width: none; }
  .row { grid-template-columns: 1fr; }
  .row .fig { text-align: left; }
  .split, .split.media { grid-template-columns: 1fr; gap: 32px; }
}