/* Change the main colours and font in :root below. */

:root {
  --blue:#173cce;
  --ink:#10244a;
  --orange:#ff6b35;
  --paper:#fff;
  --wash:#f2f5fc;
  --muted:#4d5d77;
  --line:#d9dfed;
  --width:1200px;
  --radius:5px;
  --font:Arial,Helvetica,sans-serif;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:1rem;
  line-height:1.7;
}

a {
  color:inherit;
  text-underline-offset:5px;
}

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

a,button {
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible,button:focus-visible {
  outline:3px solid var(--ink);
  outline-offset:5px;
  box-shadow:0 0 0 8px var(--paper);
}

.container {
  width:min(var(--width),calc(100% - 96px));
  margin-inline:auto;
}

.skip-link {
  position:absolute;
  top:-100px;
  left:20px;
  background:var(--ink);
  color:white;
  padding:12px;
  z-index:9;
}

.skip-link:focus {
  top:10px;
}

.site-header {
  border-bottom:1px solid var(--line);
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:112px;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-size:1.2rem;
  font-weight:700;
  line-height:1.2;
}

.brand-mark {
  flex-shrink:0;
  display:grid;
  place-items:center;
  background:var(--blue);
  color:white;
  width:43px;
  height:49px;
  border-radius:3px;
  font-family:Georgia,serif;
  font-size:2.4rem;
  line-height:1;
}

.brand-place {
  display:block;
  font-size:.75rem;
  letter-spacing:.22em;
  font-weight:400;
  margin-top:7px;
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:30px;
}

.site-header nav a {
  font-size:.9375rem;
  text-decoration:none;
  white-space:nowrap;
  padding-block:7px;
}

.site-header nav a[aria-current=page] {
  text-decoration:underline;
  text-decoration-color:var(--blue);
  text-decoration-thickness:2px;
}

.site-header nav .nav-contact {
  border:1px solid var(--ink);
  padding:9px 22px;
  border-radius:var(--radius);
}

.site-header nav a:hover,.text-link:hover {
  color:var(--blue);
}

.hero {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:64px;
  align-items:center;
  padding-block:80px 88px;
}

.eyebrow {
  color:var(--blue);
  font-size:.8125rem;
  font-weight:700;
  line-height:1.55;
  letter-spacing:.1em;
  margin:0 0 24px;
}

h1,h2,h3,p {
  margin-top:0;
}

h1 {
  overflow-wrap:break-word;
  font-size:clamp(3.25rem,5.6vw,5.15rem);
  line-height:1.05;
  letter-spacing:-.055em;
  font-weight:600;
  margin-bottom:30px;
}

h1 em {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  color:var(--blue);
  letter-spacing:-.05em;
}

h2 {
  font-size:clamp(2rem,3.2vw,3rem);
  line-height:1.15;
  letter-spacing:-.04em;
  font-weight:500;
}

h3 {
  font-size:1.45rem;
  line-height:1.25;
  letter-spacing:-.025em;
}

p {
  margin-bottom:20px;
}

.hero-description {
  font-size:1.3rem;
  line-height:1.5;
  max-width:450px;
}

.hero-copy>p:not(.eyebrow):not(.hero-description) {
  color:var(--muted);
  max-width:510px;
}

.actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  margin-top:30px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:15px 22px;
  border:1px solid transparent;
  border-radius:var(--radius);
  background:var(--orange);
  color:#162646;
  font-size:1rem;
  font-weight:700;
  text-decoration:none;
  line-height:1.4;
  transition:background .15s,transform .15s;
}

.button:hover {
  background:#ff875b;
  transform:translateY(-2px);
}

.button span {
  font-size:1.25rem;
}

.text-link {
  font-size:.9375rem;
}

.small-note {
  font-size:.8125rem;
  line-height:1.6;
  margin-top:22px;
}

.hero-copy,.hero-art {
  min-width:0;
}

.hero-art {
  background:var(--blue);
  color:#f7f3e8;
  min-height:530px;
  padding:28px;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  margin:0;
}

.art-kicker {
  font-size:.75rem;
  letter-spacing:.12em;
  line-height:1.5;
  margin-bottom:16px;
}

.art-title {
  font-family:Georgia,serif;
  font-size:3.5rem;
  line-height:1;
  letter-spacing:-.04em;
  margin:0;
}

.landmark-stage {
  position:relative;
  height:250px;
  margin-block:12px 20px;
  isolation:isolate;
}

.landmark-stage img {
  width:100%;
  height:100%;
  object-fit:contain;
  position:relative;
  z-index:1;
}

.art-sun {
  position:absolute;
  width:110px;
  height:110px;
  border-radius:50%;
  background:var(--orange);
  top:30px;
  right:calc(50% - 122px);
}

.art-caption {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #7389df;
  padding-top:18px;
  font-size:.6875rem;
  letter-spacing:.1em;
  line-height:1.6;
  margin:0;
}

.art-caption span:last-child {
  text-align:right;
}

.site-footer {
  background:var(--ink);
  color:white;
  padding:25px 0;
}

.footer-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:.875rem;
}

.footer-inner p {
  margin:0;
}

.footer-inner a {
  white-space:nowrap;
}

.learning-band {
  background:var(--wash);
  padding:65px 0 70px;
}

.section {
  padding-block:80px;
}

.section-heading {
  margin-bottom:45px;
}

.section-heading .eyebrow {
  margin-bottom:18px;
}

.section-heading h2 {
  margin-bottom:0;
}

.three-columns {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:35px;
}

.steps article,.principles article {
  border-top:1px solid var(--line);
  padding-top:24px;
}

.steps p,.principles p {
  color:var(--muted);
  margin-bottom:0;
}

.step-number {
  display:block;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.07em;
  color:var(--blue);
  margin-bottom:22px;
}

.heading-row {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:50px;
}

.heading-aside {
  max-width:345px;
  color:var(--muted);
  margin:0;
}

.themes {
  gap:0;
  border-block:1px solid var(--line);
}

.theme {
  padding:32px 30px 30px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.theme:first-child {
  padding-left:0;
}

.theme:last-child {
  padding-right:0;
}

.theme+.theme {
  border-left:1px solid var(--line);
}

.theme-index {
  font-size:2.7rem;
  font-family:Georgia,serif;
  font-style:italic;
  color:var(--blue);
  line-height:1;
  margin-bottom:30px;
}

.theme-subject {
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.035em;
  margin-bottom:16px;
  color:var(--muted);
}

.theme h3 {
  font-size:1.8rem;
}

.theme>p:not(.theme-subject) {
  color:var(--muted);
}

.theme-end {
  display:block;
  font-size:.8125rem;
  line-height:1.6;
  color:var(--blue);
  margin-top:auto;
  padding-top:12px;
}

.section-note {
  font-size:.875rem;
  color:var(--muted);
  margin:25px 0 0;
  max-width:800px;
}

.cta-section {
  background:var(--blue);
  color:white;
  padding:65px 0;
}

.cta-section .eyebrow {
  color:white;
  opacity:.9;
}

.cta-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:45px;
}

.cta-inner>div {
  max-width:680px;
}

.cta-inner h2 {
  font-size:clamp(1.9rem,3vw,2.8rem);
  margin-bottom:20px;
}

.cta-inner p:last-child {
  max-width:550px;
  margin-bottom:0;
  opacity:.9;
}

.button-light {
  background:white;
  color:var(--blue);
  white-space:nowrap;
}

.button-light:hover {
  background:#e8edff;
}

.page-hero {
  padding-block:65px 55px;
  border-bottom:1px solid var(--line);
}

.page-hero h1 {
  font-size:clamp(3rem,5vw,4.7rem);
  max-width:950px;
}

.page-intro {
  font-size:1.3rem;
  max-width:650px;
  margin-bottom:0;
  line-height:1.6;
  color:var(--muted);
}

.story-section {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:90px;
  padding-block:65px;
}

.story-label h2 {
  font-size:2.35rem;
}

.section-number {
  display:block;
  font-size:1rem;
  color:var(--blue);
  margin-bottom:22px;
}

.prose {
  max-width:660px;
}

.prose p {
  color:var(--muted);
}

.prose p:last-child {
  margin-bottom:0;
}

.prose .eyebrow {
  color:var(--blue);
}

.story-highlight {
  background:var(--blue);
  color:white;
  padding-block:65px;
}

.story-highlight .eyebrow {
  color:white;
}

.large-statement {
  font-size:clamp(2.1rem,4.4vw,3.65rem);
  line-height:1.2;
  letter-spacing:-.035em;
  margin:0;
}

.large-statement em {
  font-family:Georgia,serif;
  font-weight:400;
}

.last-story {
  border-top:1px solid var(--line);
  padding-bottom:85px;
}

.process-inline {
  display:flex;
  gap:0;
  flex-wrap:wrap;
  margin:30px 0;
}

.process-inline span {
  font-size:.9375rem;
  padding:9px 15px;
  border:1px solid var(--line);
  background:var(--wash);
  margin-right:8px;
  margin-bottom:8px;
  border-radius:var(--radius);
}

.founder-section {
  display:grid;
  grid-template-columns:.85fr 1.25fr;
  gap:85px;
  padding-top:70px;
}

.founder-panel {
  background:var(--blue);
  color:white;
  padding:38px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:430px;
  border-radius:var(--radius);
}

.founder-initials {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:8rem;
  line-height:1.1;
  letter-spacing:-.1em;
}

.founder-name {
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:8px;
}

.founder-panel p:last-child {
  font-size:.9375rem;
  margin:0;
}

.contact-section {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:75px;
  padding-block:65px;
}

.contact-card {
  background:var(--wash);
  padding:40px;
  border-radius:var(--radius);
  align-self:start;
}

.contact-card h2 {
  font-size:2rem;
}

.contact-card>p {
  color:var(--muted);
}

.contact-card .eyebrow {
  color:var(--blue);
  font-size:.75rem;
}

.email-address {
  font-size:clamp(1.05rem,1.55vw,1.4rem);
  color:var(--blue);
  overflow-wrap:anywhere;
}

.contact-note {
  font-size:.875rem;
  margin-bottom:0;
}

.copy-button {
  font:inherit;
  font-size:.875rem;
  background:none;
  border:0;
  text-decoration:underline;
  text-underline-offset:4px;
  cursor:pointer;
  padding:8px 0;
  color:var(--ink);
}

.copy-status {
  font-size:.875rem;
  margin:15px 0;
  line-height:1.5;
}

.copy-status:empty {
  display:none;
}

.contact-card .actions {
  margin-bottom:24px;
  gap:16px;
}

.contact-brief h2 {
  font-size:2.3rem;
}

.contact-brief>p:not(.eyebrow) {
  color:var(--muted);
}

.plain-list {
  margin:25px 0;
  padding-left:22px;
  color:var(--muted);
}

.plain-list li {
  padding-left:5px;
  margin-bottom:13px;
}

.plain-list li::marker {
  color:var(--orange);
}

.pilot-note {
  display:grid;
  grid-template-columns:210px 1fr;
  gap:35px;
  border-top:1px solid var(--line);
  padding-block:35px 65px;
}

.note-label {
  font-size:.75rem;
  letter-spacing:.08em;
  font-weight:700;
  color:var(--blue);
  padding-top:7px;
}

.pilot-note h2 {
  font-size:1.4rem;
  letter-spacing:-.02em;
}

.pilot-note p {
  color:var(--muted);
  font-size:.9375rem;
  max-width:800px;
  margin:0;
}

@media(max-width:1050px) {
  .hero {
    gap:35px;
  }
  .site-header nav {
    gap:20px;
  }
  .contact-section,.story-section,.founder-section {
    gap:40px;
  }
  .contact-card {
    padding:28px;
  }
  .theme {
    padding-inline:20px;
  }
  .theme h3 {
    font-size:1.6rem;
  }
  .heading-row {
    gap:30px;
  }
  .cta-inner {
    gap:30px;
  }
}

@media(max-width:760px) {
  .container {
    width:calc(100% - 40px);
  }
  .header-inner {
    padding-block:20px;
    min-height:0;
    align-items:flex-start;
    flex-direction:column;
    gap:20px;
  }
  .site-header nav {
    width:100%;
    justify-content:space-between;
    gap:10px;
  }
  .site-header nav a {
    font-size:.875rem;
  }
  .site-header nav .nav-contact {
    padding:6px 13px;
  }
  .hero {
    grid-template-columns:1fr;
    gap:35px;
    padding-block:42px 52px;
  }
  h1 {
    font-size:clamp(3.15rem,10.5vw,4.9rem);
  }
  .eyebrow {
    font-size:.75rem;
    max-width:330px;
    margin-bottom:22px;
  }
  .hero-description {
    font-size:1.2rem;
  }
  .hero-art {
    min-height:0;
    padding:26px;
  }
  .art-title {
    font-size:3.25rem;
  }
  .landmark-stage {
    height:245px;
  }
  .actions {
    gap:18px;
  }
  .button {
    min-height:50px;
  }
  .footer-inner {
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
}

@media(max-width:760px) {
  .learning-band {
    padding-block:45px;
  }
  .section {
    padding-block:50px;
  }
  .section-heading {
    margin-bottom:30px;
  }
  .three-columns {
    grid-template-columns:1fr;
    gap:28px;
  }
  .steps article,.principles article {
    padding-top:20px;
  }
  .step-number {
    margin-bottom:15px;
  }
  .heading-row {
    display:block;
  }
  .heading-aside {
    margin-top:25px;
    max-width:none;
  }
  .themes {
    gap:0;
  }
  .theme,.theme:first-child,.theme:last-child {
    padding:28px 0;
  }
  .theme+.theme {
    border-left:0;
    border-top:1px solid var(--line);
  }
  .theme h3 {
    font-size:1.7rem;
  }
  .theme-index {
    margin-bottom:20px;
  }
  .theme-end {
    padding-top:0;
  }
  .cta-section {
    padding-block:45px;
  }
  .cta-inner {
    flex-direction:column;
    align-items:flex-start;
    gap:25px;
  }
  .page-hero {
    padding-block:40px;
  }
  .page-hero h1 {
    font-size:clamp(2.75rem,10vw,4rem);
  }
  .page-intro {
    font-size:1.15rem;
  }
  .story-section {
    grid-template-columns:1fr;
    gap:15px;
    padding-block:40px;
  }
  .story-label h2 {
    font-size:2rem;
    margin-bottom:12px;
  }
  .section-number {
    margin-bottom:12px;
  }
  .story-highlight {
    padding-block:42px;
  }
  .large-statement {
    font-size:2.2rem;
  }
  .founder-section {
    grid-template-columns:1fr;
    gap:40px;
    padding-top:40px;
  }
  .founder-panel {
    min-height:330px;
    padding:30px;
  }
  .founder-initials {
    font-size:6rem;
  }
  .contact-section {
    grid-template-columns:1fr;
    gap:40px;
    padding-block:35px;
  }
  .contact-card {
    padding:26px 23px;
  }
  .contact-brief h2 {
    font-size:2rem;
  }
  .pilot-note {
    grid-template-columns:1fr;
    gap:15px;
    padding-block:25px 40px;
  }
  .contact-card .actions {
    align-items:flex-start;
    flex-direction:column;
  }
  .button-light {
    white-space:normal;
  }
}

@media(max-width:360px) {
  .container {
    width:calc(100% - 32px);
  }
  .site-header nav {
    gap:6px;
    flex-wrap:wrap;
  }
  .site-header nav .nav-contact {
    padding:5px 8px;
  }
  .contact-card {
    padding:22px 18px;
  }
  .page-hero h1 {
    font-size:2.3rem;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  * {
    transition:none!important;
  }
}

@media print {
  .site-header nav,.actions,.cta-section,.site-footer,.copy-button {
    display:none;
  }
  .container {
    width:100%;
  }
  body {
    font-size:11pt;
    color:black;
  }
  .hero,.page-hero,.section,.story-section {
    padding-block:20px;
  }
  .hero-art {
    display:none;
  }
  .hero {
    display:block;
  }
  h1 {
    font-size:36pt;
  }
  .theme,.steps article {
    break-inside:avoid;
  }
}

/* Five navigation links: keep tablet and narrow mobile widths usable. */
.site-header nav { flex-wrap:wrap; }
@media(max-width:1000px) and (min-width:761px) {
  .header-inner { flex-direction:column; align-items:flex-start; padding-block:22px; gap:18px; }
  .site-header nav { width:100%; justify-content:space-between; }
}
@media(max-width:480px) {
  .site-header nav { justify-content:flex-start; column-gap:18px; row-gap:5px; }
}
.offer-teaser { background:var(--ink); color:white; padding:38px 0; }
.offer-teaser-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.offer-teaser .eyebrow { color:#b6c7ff; margin-bottom:10px; }
.offer-teaser h2 { font-size:1.8rem; margin:0 0 10px; }
.offer-teaser p:last-child { margin:0; font-size:.94rem; color:#d1dcf1; }
@media(max-width:760px) {
  .offer-teaser-inner { flex-direction:column; align-items:flex-start; gap:22px; }
}
@media print { .offer-teaser { display:none; } }
