/* Bob In Space — Orbit template, retuned to a desert-night palette: violet-black sky, parchment type, saffron ember accent. */
@font-face {
  font-family: Geist;
  src: url("fonts/geist-normal-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Geist;
  src: url("fonts/geist-normal-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-normal-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* ── Brand parameters (per-site) ── */
:root {
  --color-surface: #0c0a13;
  --color-surface-alt: #17121f;
  --color-text: #f1e9da;
  --color-muted: #b9ad9c;
  --color-accent: #eaa63f;
  --color-on-accent: #170f04;
  --color-border: #3b3247;
  --font-heading: Geist, Arial, sans-serif;
  --font-body: Geist, Arial, sans-serif;
  --font-mono: "Geist Mono", monospace;
}
/* ── end Brand parameters ── */
* {
  box-sizing: border-box;
}
html {
  scroll-padding-top: 90px;
  /* Reserve the scrollbar's width at all times. The lightbox hides the page's overflow
     while it is open, which would otherwise take the bar away and shift the whole page
     sideways behind the dialog. */
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
}
button {
  color: inherit;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.02;
}
button {
  background: none;
}
::selection {
  color: var(--color-on-accent);
  background: var(--color-accent);
}
[hidden] {
  display: none !important;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: 12px;
  z-index: 10;
}
.skip-link:focus {
  top: 12px;
}
.container {
  max-width: 1600px;
  margin: auto;
  padding-inline: clamp(24px, 4vw, 72px);
}
.site-header {
  position: relative;
  z-index: 5;
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  font-weight: 600;
  font-size: 27px;
  letter-spacing: -1.5px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand__mark {
  width: 29px;
  height: 29px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  position: relative;
  transform: rotate(-35deg);
}
.brand__mark:after {
  content: "";
  position: absolute;
  inset: 8px -6px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.nav {
  display: flex;
  gap: 36px;
  align-items: center;
}
.nav a {
  font-size: 13px;
}
.nav a:hover {
  color: var(--color-accent);
}
.nav-toggle {
  display: none;
  border: 1px solid var(--color-border);
  padding: 9px 14px;
}
.eyebrow {
  font: 11px/1.6 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.status {
  display: flex;
  align-items: center;
  gap: 9px;
}
.status:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.hero {
  position: relative;
  min-height: 780px;
  overflow: hidden;
  isolation: isolate;
}
.hero__art {
  position: absolute;
  inset: 0 0 0 31%;
  z-index: -1;
  pointer-events: none;
}
.hero__canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.hero__fallback {
  position: absolute;
  inset: 20% 12% 17% 24%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 25% 30%,
    #626052,
    #242821 45%,
    #0c100c 68%
  );
  box-shadow: inset -5px -1px 9px #b88a56, 24px 4px 70px #a9552422;
  z-index: -1;
}
.hero__inner {
  padding-top: 48px;
  padding-bottom: 30px;
}
.hero__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-muted);
}
.hero__copy {
  position: relative;
  padding: 84px 0 110px;
  max-width: 770px;
}
.hero__title {
  font-size: clamp(64px, 8.8vw, 142px);
  letter-spacing: -0.075em;
  line-height: 0.92;
}
.hero__title span {
  display: block;
}
.hero__title .outline {
  letter-spacing: -0.015em;
  word-spacing: 0.1em;
  /* Shadows outline the filled glyph silhouette; unlike text-stroke they do
     not expose overlapping internal contours in the self-hosted font. */
  color: var(--color-surface);
  text-shadow: 1px 0 var(--color-text), -1px 0 var(--color-text),
    0 1px var(--color-text), 0 -1px var(--color-text);
}
.hero__lead {
  max-width: 350px;
  margin-top: 34px;
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.7;
}
.hero__actions {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-top: 30px;
}
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  padding: 13px 20px;
  border: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 600;
}
.button--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}
.button:hover {
  border-color: var(--color-text);
}
.text-link {
  font-size: 12px;
  border-bottom: 1px solid var(--color-muted);
  padding: 10px 0;
}
.hero__annotation {
  position: absolute;
  right: 5%;
  top: 50%;
  font: 10px/1.8 var(--font-mono);
  color: var(--color-muted);
  text-align: right;
}
.hero__annotation:before {
  content: "";
  height: 1px;
  width: 65px;
  background: var(--color-muted);
  display: block;
  margin: 0 0 8px auto;
}
.hero__bottom {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
}
.hero__coordinates {
  display: flex;
  gap: 48px;
  font: 10px/1.8 var(--font-mono);
  color: var(--color-muted);
}
.hero__coordinates strong {
  display: block;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 400;
}
.motion-control {
  border: 1px solid var(--color-border);
  padding: 10px 14px;
  font: 10px var(--font-mono);
  min-height: 40px;
}
.section {
  padding-block: 100px;
}
.section__heading {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
  margin-bottom: 52px;
}
.section__heading h2 {
  font-size: clamp(40px, 5vw, 76px);
  letter-spacing: -0.055em;
  max-width: 780px;
}
.section__heading p {
  color: var(--color-muted);
  max-width: 420px;
  margin-top: 24px;
}
.mission {
  border-top: 1px solid var(--color-border);
}
.mission__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}
.mission__stages {
  display: grid;
  align-content: start;
}
.mission__stage {
  padding: 24px 0;
  display: flex;
  align-items: center;
  gap: 20px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-size: 22px;
  opacity: 1;
  color: var(--color-muted);
}
.mission__stage span {
  font: 11px var(--font-mono);
  color: var(--color-muted);
}
.mission__stage b {
  font-weight: 400;
  margin-left: auto;
}
.mission__stage[aria-pressed="true"] {
  opacity: 1;
  color: var(--color-accent);
}
.mission__panel {
  border: 1px solid var(--color-border);
  padding: 40px;
  background: var(--color-surface-alt);
  min-height: 310px;
  position: relative;
}
.mission__diagram {
  height: 100px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}
.mission__diagram:before {
  content: "";
  width: 250px;
  height: 140px;
  position: absolute;
  left: 10%;
  top: 20px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  transform: rotate(-20deg);
}
.mission__diagram:after {
  content: "✦";
  font-size: 35px;
  position: absolute;
  top: 0;
  left: 55%;
  color: var(--color-accent);
}
.mission__panel h3 {
  font-size: 28px;
  margin-bottom: 16px;
  letter-spacing: -0.035em;
}
.mission__panel p {
  font-size: 14px;
  color: var(--color-muted);
  max-width: 430px;
}
.mission__metric {
  margin-top: 24px;
  font: 11px var(--font-mono);
  color: var(--color-accent);
}
.possibilities {
  background: var(--color-text);
  color: var(--color-surface);
}
.possibilities .eyebrow {
  color: var(--color-surface);
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.card {
  padding-top: 22px;
  border-top: 1px solid #aaa99e;
}
.card__number {
  font: 11px var(--font-mono);
}
.card h3 {
  font-size: 30px;
  margin: 45px 0 18px;
  letter-spacing: -0.04em;
}
.card p {
  font-size: 14px;
  max-width: 320px;
  color: #515147;
}
.launch {
  text-align: center;
  padding-block: 120px;
}
.launch h2 {
  font-size: clamp(55px, 8vw, 116px);
  letter-spacing: -0.065em;
  max-width: 1000px;
  margin: 26px auto 32px;
}
.launch__status {
  min-height: 30px;
  font: 12px var(--font-mono);
  margin-top: 24px;
  color: var(--color-accent);
}
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: 28px;
}
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
}
.site-footer p {
  font: 10px var(--font-mono);
  color: var(--color-muted);
}
.site-footer a {
  font-size: 12px;
}
.js-only {
  display: none;
}
.js .js-only {
  display: inline-flex;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  a,
  button {
    transition: color 0.2s, background 0.2s, border-color 0.2s, opacity 0.2s;
  }
  .hero__copy {
    animation: arrive 0.8s both;
  }
  @keyframes arrive {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}
@media (min-width: 1700px) {
  .hero__art {
    inset-inline-start: 40%;
  }
}
@media (max-width: 900px) {
  .site-header__inner {
    height: 82px;
  }
  .nav {
    gap: 22px;
  }
  .hero__copy {
    padding-top: 75px;
    max-width: 620px;
  }
  .hero__art {
    inset: 70px -20% 130px 25%;
    opacity: 0.8;
  }
  .hero__annotation {
    display: none;
  }
  .hero__title {
    font-size: 100px;
  }
  .section__heading {
    grid-template-columns: 1fr;
  }
  .mission__layout {
    gap: 30px;
  }
  .section {
    padding-block: 75px;
  }
}
@media (max-width: 600px) {
  .site-header__inner {
    height: 76px;
  }
  .brand {
    font-size: 24px;
  }
  .js .nav-toggle {
    display: block;
  }
  .nav {
    gap: 14px;
  }
  .nav a {
    font-size: 11px;
  }
  .js .nav {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    padding: 24px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
  }
  .js .nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .js .nav a {
    padding: 10px;
    font-size: 16px;
  }
  .hero {
    min-height: auto;
  }
  .hero__inner {
    padding-top: 26px;
  }
  .hero__meta > .eyebrow {
    display: none;
  }
  .hero__copy {
    padding: 52px 0 330px;
  }
  .hero__title {
    font-size: clamp(58px, 13.5vw, 82px);
    letter-spacing: -0.07em;
  }
  .hero__lead {
    max-width: 290px;
    font-size: 14px;
    margin-top: 24px;
  }
  .hero__actions {
    gap: 20px;
  }
  .hero__art {
    inset: 290px -20% 95px -8%;
    opacity: 1;
  }
  .hero__coordinates {
    gap: 22px;
  }
  .hero__coordinates div:last-child {
    display: none;
  }
  .hero__bottom {
    align-items: center;
  }
  .motion-control {
    max-width: 130px;
  }
  .section {
    padding-block: 65px;
  }
  .section__heading {
    gap: 20px;
    margin-bottom: 32px;
  }
  .section__heading h2 {
    font-size: 44px;
  }
  .mission__layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .mission__panel {
    padding: 28px;
  }
  .cards {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .card h3 {
    margin-top: 24px;
  }
  .launch {
    padding-block: 80px;
  }
  .site-footer__inner {
    align-items: start;
    flex-direction: column;
  }
  .site-footer p {
    max-width: 230px;
  }
  .button {
    gap: 25px;
  }
}

h1,
h2,
h3 {
  overflow-wrap: anywhere;
}

/* Cinematic art direction — the generated image is the main stage. */
body {
  background: #080a0b;
}
.site-header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border-bottom: 0;
  background: linear-gradient(#050708bf, transparent);
}
.site-header__inner {
  height: 96px;
  border-bottom: 1px solid #ffffff30;
}
.hero {
  min-height: 900px;
  height: 100svh;
  max-height: 1200px;
  background: #080a0b;
}
.hero__art {
  inset: -3%;
  z-index: -2;
  opacity: 1;
}
.hero__art .art-image {
  object-position: 100% 50%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      #050708d9 0%,
      #0507089c 29%,
      #05070822 62%,
      #05070805
    ),
    linear-gradient(
      0deg,
      #080a0bf5,
      transparent 28%,
      transparent 78%,
      #080a0b50
    );
}
.hero__inner {
  height: 100%;
  padding-top: 138px;
  padding-bottom: 28px;
  display: flex;
  flex-direction: column;
}
.hero__meta {
  color: #e0e2dd;
}
.hero__copy {
  padding: 0;
  margin-top: auto;
  margin-bottom: auto;
  max-width: 900px;
}
.hero__title {
  font-size: clamp(72px, 8.9vw, 144px);
  line-height: 0.94;
  letter-spacing: -0.065em;
  font-weight: 600;
  max-width: 850px;
  text-shadow: 0 2px 30px #0008;
}
.hero__title > span:last-child {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.01em;
  letter-spacing: -0.075em;
}
.hero__lead {
  color: #e4e5dd;
  margin-top: 32px;
  max-width: 310px;
  line-height: 1.65;
}
.hero__actions {
  margin-top: 28px;
}
.hero__bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  border-top: 1px solid #ffffff4a;
  padding-top: 12px;
}
.hero__coordinates {
  display: none;
}
.hero__scroll {
  position: absolute;
  right: 6%;
  bottom: 155px;
  display: flex;
  align-items: center;
  gap: 30px;
  color: #f6f6ee;
  padding: 22px 28px;
  border: 1px solid #ffffff68;
  background: #080a0b82;
  backdrop-filter: blur(12px);
}
.hero__scroll > span:last-child {
  font-size: 33px;
  font-weight: 400;
}
.motion-control {
  border-color: #ffffff59;
  background: #080a0bb3;
  color: #f6f6ef;
}
.orbital-manifesto {
  padding-block: 110px 90px;
  position: relative;
}
.orbital-manifesto > p {
  font-size: clamp(36px, 4.7vw, 72px);
  line-height: 1.14;
  letter-spacing: -0.045em;
  max-width: 1030px;
  margin: 35px 0;
  color: #ebece4;
}
.orbital-manifesto em {
  font-family: Georgia, serif;
  font-weight: 400;
  color: var(--color-accent);
}
.manifesto__axis {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--color-accent);
  font: 20px var(--font-mono);
}
.manifesto__axis span {
  display: block;
  height: 1px;
  background: #3b3931;
  flex: 1;
}
.mission__panel {
  padding: 0;
  overflow: hidden;
  background: #141713;
  border-color: #43483b;
}
.mission__panel h3,
.mission__panel > p,
.mission__metric {
  margin-inline: 32px;
}
.mission__panel h3 {
  margin-top: 26px;
}
.mission__panel > p {
  margin-top: 16px;
  margin-bottom: 0;
}
.mission__metric {
  margin-bottom: 30px;
}
.mission__visual {
  height: 270px;
  overflow: hidden;
  border-bottom: 1px solid #ffffff30;
}
.mission__visual picture {
  width: 100%;
  height: 100%;
  display: block;
}
.mission__visual .art-image {
  object-position: 82% 45%;
  transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scale(var(--detail-scale, 1.05));
}
.mission__stage {
  transition: padding 0.5s, color 0.4s;
  border-color: #454a3d;
}
.mission__stage[aria-pressed="true"] {
  padding-left: 20px;
}
.possibilities {
  background: #eae8de;
}
.card {
  position: relative;
  min-height: 230px;
}
.card:after {
  content: "↗";
  position: absolute;
  top: 12px;
  right: 2px;
  font-size: 23px;
}
.launch {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: none;
  background: #0c110e;
  padding-block: 115px;
}
.launch:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 100%, #99633b36, transparent 66%);
}
@media (min-width: 1700px) {
  .hero__art {
    inset: -3%;
  }
}
@media (max-width: 900px) {
  .hero__title {
    font-size: 100px;
  }
  .hero__art {
    inset: -3%;
    opacity: 1;
  }
  .hero__copy {
    padding: 0;
    max-width: 730px;
  }
  .hero__scroll {
    bottom: 140px;
    right: 5%;
    padding: 15px 20px;
  }
  .hero__scrim {
    background: linear-gradient(90deg, #050708d9, #05070870 52%, #05070820),
      linear-gradient(0deg, #080a0bf5, transparent 50%);
  }
  .mission__layout {
    grid-template-columns: 0.8fr 1.2fr;
  }
}
@media (max-width: 600px) {
  .site-header__inner {
    height: 76px;
  }
  .hero {
    height: 100svh;
    min-height: 800px;
    max-height: 1000px;
  }
  .hero__inner {
    padding-top: 110px;
    padding-bottom: 22px;
  }
  .hero__meta > .eyebrow.status {
    display: flex;
    font-size: 9px;
  }
  .hero__copy {
    padding: 0;
    margin-top: 85px;
    margin-bottom: auto;
  }
  .hero__title {
    font-size: clamp(56px, 13.3vw, 80px);
    letter-spacing: -0.06em;
  }
  .hero__title > span:last-child {
    font-size: 0.94em;
    letter-spacing: -0.07em;
  }
  .hero__lead {
    max-width: 260px;
    font-size: 14px;
    margin-top: 24px;
  }
  .hero__actions {
    gap: 17px;
    flex-wrap: wrap;
  }
  .hero__art {
    inset: -2% -15% -2% -15%;
  }
  .hero__art .art-image {
    object-position: 100% 50%;
  }
  .hero__scrim {
    background: linear-gradient(
        180deg,
        #06090be8 0%,
        #06090bbd 33%,
        #06090b12 67%,
        #06090be6 96%
      ),
      linear-gradient(90deg, #06090b40, transparent);
  }
  .hero__scroll {
    right: 24px;
    bottom: 100px;
    padding: 12px 16px;
    gap: 18px;
  }
  .hero__scroll .eyebrow {
    font-size: 9px;
  }
  .hero__scroll > span:last-child {
    font-size: 25px;
  }
  .hero__bottom {
    gap: 10px;
    grid-template-columns: 1fr auto;
  }
  .hero__bottom .scene-choices {
    gap: 14px;
  }
  .hero__bottom .scene-choices button {
    font-size: 9px;
  }
  .motion-control {
    font-size: 8px;
    padding: 9px;
    max-width: 106px;
  }
  .orbital-manifesto {
    padding-block: 65px 40px;
  }
  .orbital-manifesto > p {
    font-size: 37px;
    margin-top: 25px;
  }
  .mission__layout {
    grid-template-columns: 1fr;
  }
  .mission__visual {
    height: 220px;
  }
  .mission__panel h3,
  .mission__panel > p,
  .mission__metric {
    margin-inline: 24px;
  }
  .launch {
    padding-block: 80px;
  }
}


/* Inner pages reuse the family's palette and typography without changing its home composition. */
.site-header--inner {
  position: relative;
  background: var(--color-surface);
}
.page-intro {
  padding-block: clamp(64px, 8vw, 120px) 56px;
}
.page-intro__title {
  max-width: 1050px;
  margin-block: 24px;
  font-size: clamp(42px, 6vw, 86px);
  line-height: 1.05;
  letter-spacing: -0.05em;
}
.page-intro__lead {
  max-width: 720px;
  color: var(--color-muted);
  font-size: 18px;
}
.service-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-block: 24px 80px;
}
.service-card {
  padding-block: 24px;
  border-top: 1px solid var(--color-border);
}
.service-card__title {
  margin-block: 24px 16px;
  font-size: 32px;
  letter-spacing: -0.04em;
}
.service-card__summary {
  margin-bottom: 16px;
  font-weight: 600;
}
.service-card__copy,
.project-step__copy,
.contact-details__note {
  color: var(--color-muted);
}
.project-section {
  padding-block: 64px;
  border-top: 1px solid var(--color-border);
}
.project-section__title {
  max-width: 760px;
  margin-bottom: 32px;
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.04em;
}
.project-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding: 0;
  margin: 0 0 40px;
  list-style: none;
}
.project-step__title {
  margin-bottom: 16px;
  font-size: 24px;
}
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  padding-block: 24px 80px;
}
.contact-details {
  display: grid;
  align-content: start;
  gap: 20px;
}
.contact-details__title,
.enquiry-guide__title {
  font-size: 30px;
  line-height: 1.2;
}
.contact-details__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.enquiry-guide {
  padding: 32px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}
.enquiry-guide__list {
  margin-block: 24px;
  padding-left: 24px;
}
.enquiry-guide__item {
  margin-bottom: 16px;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.nav__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
}
@media (max-width: 700px) {
  .service-list,
  .project-steps,
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .page-intro__lead {
    font-size: 16px;
  }
  .enquiry-guide {
    padding: 24px;
  }
}

/* ── Gallery ─────────────────────────────────────────────────────────────── */
/* A plain grid of links in the page's own px scale: the same 32px columns as the
   services and the process steps, so the pictures read as one more band of the
   composition rather than a widget dropped into it. */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-block: 24px 80px;
}
.gallery__item {
  margin: 0;
}
/* The link wraps the whole picture, so it has to be a block: an inline link keeps the
   space a text line reserves under its letters, which would make the frame taller than
   the photograph inside it. */
.gallery__link {
  display: block;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.gallery__image {
  display: block;
  width: 100%;
  /* The height attribute on the element is a definite height, and a definite height beats
     `aspect-ratio`: without `height: auto` the picture is drawn at its full pixel height in
     a third-of-a-row column, three times taller than the frame it is meant to fill. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Only when the script is running does a click open the picture, so only then does the
   pointer promise it. */
.js .gallery__link {
  cursor: zoom-in;
}
/* This fixture paints no caption — the page carries its own mono annotations — but a
   site built on this template can add one without touching the stylesheet. */
.gallery__caption {
  padding: 8px 0;
  font-size: 14px;
  color: var(--color-muted);
}
/* A gallery holding one picture runs the full row instead of sitting in a third of it.
   At 4:3 a full-width photograph would be nearly a screen tall, so it takes the wide
   ratio instead. */
.gallery--single .gallery__item {
  grid-column: 1 / -1;
}
.gallery--single .gallery__image {
  aspect-ratio: 12 / 5;
}
@media (max-width: 768px) {
  .gallery {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ── Lightbox ────────────────────────────────────────────────────────────── */
/* main.js builds this dialog the first time a visitor opens a gallery picture. The
   photograph is the content and the darkened page behind it is the frame; every control
   is a visible word set in the page's own mono, so no icon font is needed. */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  border: 0;
  /* The dialog paints the dark ground itself as well as on its ::backdrop: a browser
     that does not paint ::backdrop would otherwise show the page straight through, and
     an accessibility checker cannot see a backdrop at all. */
  background: rgba(8, 8, 7, 0.94);
  color: var(--color-text);
  overflow: hidden;
}
.lightbox::backdrop {
  background: rgba(8, 8, 7, 0.94);
}
.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  margin: 0;
  /* The picture keeps clear of the chrome around it: the close button above, and the
     counter with the previous/next pair below. */
  padding: 80px 24px 120px;
}
.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  min-height: 0; /* lets the picture shrink so the caption always fits under it */
  object-fit: contain;
}
.lightbox__caption {
  flex: 0 0 auto;
  max-width: 60ch;
  text-align: center;
  font-size: 14px;
  color: var(--color-muted);
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: fixed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 13px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font: 12px/1.6 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  border-color: var(--color-accent);
}
.lightbox__close:focus-visible,
.lightbox__prev:focus-visible,
.lightbox__next:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.lightbox__close {
  top: 16px;
  right: 16px;
}
.lightbox__prev,
.lightbox__next {
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__prev {
  left: 16px;
}
.lightbox__next {
  right: 16px;
}
.lightbox__count {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  font: 12px/1.6 var(--font-mono);
  color: var(--color-muted);
}
@media (min-width: 769px) {
  .lightbox__figure {
    /* The side column is as wide as the labels this template actually paints: the words
       are set in uppercase mono with tracking, which is wider than a sentence-case label
       of the same length. */
    padding-inline: 208px;
  }
}
@media (max-width: 768px) {
  /* On a phone there is no room beside the photograph, so the pair moves under it, side
     by side, and the counter rises above them. 16px apart rather than 8: two 48px targets
     at the project's minimum gap read as one control. */
  .lightbox__prev,
  .lightbox__next {
    top: auto;
    bottom: 16px;
    transform: none;
  }
  .lightbox__prev {
    left: auto;
    right: 50%;
    margin-right: 8px;
  }
  .lightbox__next {
    right: auto;
    left: 50%;
    margin-left: 8px;
  }
  .lightbox__count {
    bottom: 80px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] {
    animation: lightbox-in 0.2s both;
  }
  @keyframes lightbox-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
/* The only thing holding the page still behind the open dialog — the script deliberately
   scrolls nothing itself. It is paired with the stable scrollbar gutter in the reset, so
   the page does not shift sideways as the bar goes. */
html.lightbox-open {
  overflow: hidden;
}

/* ── Price cards ─────────────────────────────────────────────────────────── */
/* The same hairline-topped column the services use, so a price reads as one more item in
   the same inventory. These exist for a business that publishes its prices; one that does
   not drops the section rather than filling it with something else. */
.plan-section {
  padding-block: 64px;
  border-top: 1px solid var(--color-border);
}
.plan-section__title {
  max-width: 760px;
  margin-block: 24px 32px;
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.04em;
}
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.plan {
  display: flex;
  flex-direction: column;
  padding-block: 24px;
  border-top: 1px solid var(--color-border);
}
/* The highlight is an accent edge, never a fill: this accent is a light orange that
   cannot carry body text, and the badge below states the same thing in words so the
   highlight never rests on colour alone. */
.plan--featured {
  border-top: 2px solid var(--color-accent);
}
.plan__badge {
  align-self: flex-start;
  font: 11px/1.6 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}
.plan__name {
  margin-block: 24px 16px;
  font-size: 32px;
  letter-spacing: -0.04em;
}
.plan__price {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  /* 600 is a weight the page already loads for its service summaries; a third weight here
     would cost the visitor another font file for one line. */
  font-weight: 600;
  font-size: clamp(32px, 3vw, 44px);
  letter-spacing: -0.04em;
  /* A price is a phrase as often as it is a number, and at this size one long word in a
     narrow column widens the whole document rather than wrapping. */
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* The prefix and the period read as one phrase with the figure, and are kept from
   breaking inside themselves so a narrow card wraps "/ project" as a unit instead of
   stranding the slash at the end of the line above. */
.plan__prefix,
.plan__period {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-muted);
}
.plan__list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: 14px;
}
.plan__item {
  padding-block: 12px;
  border-top: 1px solid var(--color-border);
}
/* Pinned to the bottom so the three actions share one line across cards whose lists are
   of unequal length. */
.plan__action {
  margin-top: auto;
}
@media (max-width: 768px) {
  .plan-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ── Build additions: Bob In Space ── */
/* The photograph's hill sits centre and the galactic core right of centre, so the crop
   keeps both instead of the template's right-edge anchor. */
.hero__art .art-image {
  object-position: 58% 62%;
}
.hero {
  background: var(--color-surface);
}
.hero__title {
  color: var(--color-text);
}
.hero__title > span:last-child {
  color: var(--color-accent);
}
.sigil {
  display: block;
  width: min(220px, 50vw);
  height: auto;
  color: var(--color-accent);
  opacity: 0.85;
  margin-bottom: 8px;
}
.release {
  display: grid;
  gap: 8px;
}
.release__meta {
  margin: 0;
  font: 12px/1.6 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.tracklist {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  counter-reset: track;
}
.tracklist__item {
  counter-increment: track;
  display: flex;
  gap: 12px;
}
.tracklist__item:before {
  content: counter(track, decimal-leading-zero);
  font-family: var(--font-mono);
  color: var(--color-accent);
}
.listen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 24px;
}
.launch .listen {
  justify-content: center;
}
@media (max-width: 600px) {
  .hero__art .art-image {
    object-position: 55% 60%;
  }
}
/* ── Demo Banner ─────────────────────────────────────── */
.demo-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1a1426;
  color: #fff;
  text-align: center;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  z-index: 9999;
  border-top: 2px solid var(--color-accent);
}
.demo-banner a { color: var(--color-accent); text-decoration: underline; }
/* Keeps the footer readable above the fixed banner. */
body { padding-bottom: 96px; }
/* The three-word wordmark and the two-word title line need a little less size on the
   narrowest phones, or the wordmark wraps and squeezes the menu button. */
.brand,
.nav-toggle {
  white-space: nowrap;
}
@media (max-width: 380px) {
  .brand {
    font-size: 15px;
    gap: 10px;
  }
  .hero__title {
    font-size: 48px;
  }
}
/* The header's tight tracking runs the words together at footer size. */
.site-footer .brand {
  letter-spacing: 0;
}