/* ============================================================
   Plan C Systems

   The mark is a bracket crossed by a marigold bar, so the bracket
   is the page's structural device: it opens every section, and it
   is the only ornament allowed. Everything else is grid, scale,
   and silence.
   ============================================================ */

:root {
  /* --- ground ---
     A cool bone rather than a warm cream: the studio sells
     engineering judgement, not craft-paper warmth. */
  --paper:    #F0F2EE;
  --paper-2:  #E4E8E0;
  --ink:      #08191F;
  --ink-2:    #102A32;
  --slate:    #45585E;
  --mint:     #CFE4DE;
  --mint-dim: #9FBDB6;

  /* Three weights of the accent, because one colour cannot serve both
     grounds: --marigold reads at 8.6:1 on ink, but only 1.9:1 on paper.
     So marks drawn on paper use --marigold-mark (3.3:1, clearing the 3:1
     bar for graphical objects) and accent text on paper uses
     --marigold-ink (5.4:1). */
  --marigold:      #E9A13B;
  --marigold-mark: #B8700F;
  --marigold-ink:  #8A5409;

  /* --- line ---
     Two weights only. Hairlines separate peers; the 2px bracket
     marks a beginning. */
  --hair:      rgba(8, 25, 31, 0.14);
  --hair-firm: rgba(8, 25, 31, 0.26);
  --hair-dark: rgba(207, 228, 222, 0.18);

  /* --- type ---
     A 1.25 scale, clamped where the step needs to breathe. */
  --t-xs:  0.8125rem;
  --t-sm:  0.9375rem;
  --t-md:  clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --t-lg:  1.1875rem;
  --t-xl:  clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --t-2xl: clamp(1.5rem, 1.32rem + 0.8vw, 2rem);
  --t-3xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --t-4xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);

  --sans:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --display: "Bricolage Grotesque", "Instrument Sans", sans-serif;

  /* --- space ---
     One scale. Section padding comes from --s9/--s10 only, so no two
     sections can quietly disagree about their rhythm. */
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 2.75rem;
  --s9:  clamp(3rem, 2.2rem + 3.4vw, 5rem);
  --s10: clamp(4rem, 2.6rem + 5.6vw, 7.5rem);

  --shell: min(1200px, 100% - 2.5rem);
  --gutter: max(0px, calc((100% - var(--shell)) / 2));
  --rail: clamp(9rem, 17vw, 13rem);
  --bar: 4.5rem;

  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 1rem);
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "wdth" 96;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }

::selection { background: var(--marigold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}
.band-dark :focus-visible,
.close :focus-visible,
.foot :focus-visible,
.skip:focus-visible { outline-color: var(--marigold); }

.skip {
  position: fixed; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: var(--s3) var(--s4); z-index: 60; text-decoration: none;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
  .topbar { backdrop-filter: saturate(1.4) blur(14px); }
}
/* The rule only appears once the page has moved under the bar, so a
   page at rest has no line it did not need. */
.topbar[data-scrolled] {
  border-bottom-color: var(--hair-firm);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
}

.topbar-inner {
  width: var(--shell);
  margin-inline: auto;
  min-height: var(--bar);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3.5vw, 2.75rem);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  margin-right: auto;
}
.wordmark svg { display: block; height: 28px; width: auto; }
.wordmark-type {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.015em;
}

.topnav {
  display: flex;
  gap: clamp(1rem, 2.2vw, 1.85rem);
  font-size: var(--t-sm);
}
.topnav a {
  text-decoration: none;
  color: var(--slate);
  padding: 0.35rem 0;
  position: relative;
  transition: color 0.2s var(--ease);
}
.topnav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--marigold-mark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.topnav a:hover { color: var(--ink); }
.topnav a:hover::after,
.topnav a:focus-visible::after { transform: scaleX(1); }
/* Set by nav.js for the section currently under the bar. */
.topnav a[aria-current="true"] { color: var(--ink); }
.topnav a[aria-current="true"]::after { transform: scaleX(1); }

.topbar-end {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.navtoggle {
  display: none;
  width: 2.5rem; height: 2.5rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--hair-firm);
  cursor: pointer;
  place-items: center;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.navtoggle:hover { border-color: var(--ink); background: var(--paper-2); }
.navtoggle-bars,
.navtoggle-bars::before,
.navtoggle-bars::after {
  display: block;
  width: 1rem; height: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease-out), opacity 0.2s var(--ease);
}
.navtoggle-bars { position: relative; }
.navtoggle-bars::before,
.navtoggle-bars::after { content: ""; position: absolute; left: 0; }
.navtoggle-bars::before { top: -5px; }
.navtoggle-bars::after  { top: 5px; }
.navtoggle[aria-expanded="true"] .navtoggle-bars { background: transparent; }
.navtoggle[aria-expanded="true"] .navtoggle-bars::before { transform: translateY(5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle-bars::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 860px) {
  .navtoggle { display: grid; }
  /* Qualified, not bare: .btn further down the sheet sets display, and at
     equal specificity it would win on source order. */
  .topbar-end .btn-cta { display: none; }

  /* The menu is a sheet under the bar, not a full-screen takeover: the
     page stays visible behind it so the visitor keeps their place. */
  .topnav {
    position: fixed;
    inset: var(--bar) 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hair-firm);
    padding: var(--s2) var(--gutter) var(--s5);
    font-size: var(--t-lg);
    transform: translateY(-0.5rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s var(--ease), transform 0.28s var(--ease-out), visibility 0.28s;
  }
  .topnav a {
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--hair);
    color: var(--ink);
  }
  .topnav a::after { display: none; }
  .topnav a[aria-current="true"] { color: var(--marigold-ink); }
  .topbar[data-menu-open] .topnav {
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .topbar[data-menu-open] { border-bottom-color: transparent; }
}

@media (max-width: 420px) {
  .wordmark-type { display: none; }
  .langpick select { padding: 0.45rem 1.7rem 0.45rem 0.6rem; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-md);
  line-height: 1.2;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
/* The hover is the bracket bar sliding out from under the button: the
   same marigold rule that crosses the mark. */
.btn:hover {
  background: var(--ink-2);
  box-shadow: -4px 4px 0 0 var(--marigold-mark);
}
.btn:active { box-shadow: -2px 2px 0 0 var(--marigold-mark); }

.btn-small { padding: 0.5rem 0.95rem; font-size: var(--t-sm); }

.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--hair-firm);
}
.btn-quiet:hover {
  background: transparent;
  border-color: var(--ink);
  box-shadow: -4px 4px 0 0 var(--marigold-mark);
}

/* ---------- hero ---------- */

.hero {
  width: var(--shell);
  margin-inline: auto;
  padding: var(--s10) 0 var(--s9);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}

.plan {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 92;
  font-size: clamp(2.5rem, 6.6vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.045em;
  display: flex;
  align-items: baseline;
  gap: 0.34em;
  width: fit-content;
}
.plan + .plan { margin-top: 0.2em; }

.plan-key { position: relative; display: inline-block; }

.plan-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.24em;
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--slate);
}

.plan-dead .plan-key { color: var(--slate); }
.plan-dead .plan-key::after {
  content: "";
  position: absolute;
  left: -0.03em;
  right: -0.03em;
  top: 0.45em;
  height: 0.05em;
  background: var(--slate);
}

.plan-live .plan-key {
  background-image: linear-gradient(var(--marigold-mark), var(--marigold-mark));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.07em;
  padding-bottom: 0.06em;
}
.plan-live .plan-body { color: var(--ink); }

@media (max-width: 560px) {
  .plan { flex-direction: column; gap: 0.08em; align-items: flex-start; }
  .plan + .plan { margin-top: 0.5em; }
  .plan-body { font-size: var(--t-sm); white-space: normal; }
}

.hero-note {
  max-width: 44ch;
  padding-bottom: 0.35rem;
  padding-left: var(--s5);
  border-left: 2px solid var(--marigold-mark);
}
.lede {
  font-family: var(--display);
  font-size: var(--t-xl);
  line-height: 1.35;
  letter-spacing: -0.018em;
}
.sub { margin-top: var(--s4); color: var(--slate); }

.hero-actions {
  margin-top: var(--s6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; align-items: start; }
  .hero-note { max-width: 56ch; }
}

/* ---------- bands ---------- */

.band {
  width: var(--shell);
  margin-inline: auto;
  border-top: 1px solid var(--hair);
  padding: var(--s9) 0;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}

.band-rail h2 {
  position: sticky;
  top: calc(var(--bar) + var(--s5));
  padding-left: 1.5rem;
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.band-rail h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.18em;
  width: 0.5rem;
  border: 2px solid var(--marigold-mark);
  border-right: 0;
}

.band-dark {
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  border-top: none;
  padding: var(--s10) var(--gutter);
  grid-template-columns: none;
  display: block;
}
.band-dark .band-rail h2 {
  position: relative;
  top: auto;
  color: var(--mint);
  margin-bottom: var(--s7);
  font-size: var(--t-xl);
}
.band-dark .band-rail h2::before { border-color: var(--marigold); }

@media (max-width: 860px) {
  .band { grid-template-columns: 1fr; gap: var(--s5); }
  /* relative, not static: the bracket is absolutely positioned against it. */
  .band-rail h2 { position: relative; top: auto; }
}

/* ---------- spec list ---------- */

.spec { margin: 0; }
.spec-row {
  display: grid;
  grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: var(--s6) 0;
  border-top: 1px solid var(--hair);
}
.spec-row:first-child { border-top: none; padding-top: 0; }
.spec-tight .spec-row { padding: var(--s5) 0; }

.spec dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-lg);
  letter-spacing: -0.015em;
  line-height: 1.25;
  align-self: start;
}
.spec dd { margin: 0; color: var(--slate); }
.spec dd p { max-width: 62ch; }

.tags {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  font-size: var(--t-xs);
  color: var(--slate);
}
.tags li {
  border: 1px solid var(--hair);
  padding: 0.2rem 0.6rem;
  background: var(--paper-2);
}

@media (max-width: 640px) {
  .spec-row { grid-template-columns: 1fr; gap: var(--s3); }
}

/* ---------- steps ----------
   Numbered because this genuinely is a sequence: each stage begins
   where the previous one ended. */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.steps li {
  counter-increment: step;
  border-top: 1px solid var(--hair-dark);
  padding-top: var(--s4);
}
.steps li::before {
  content: counter(step);
  display: block;
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--marigold);
  margin-bottom: var(--s4);
}
.steps h3 {
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--s3);
}
.steps p { color: var(--mint); max-width: 44ch; }

/* ---------- founding statement ---------- */

.statement {
  font-family: var(--display);
  font-size: var(--t-2xl);
  line-height: 1.22;
  letter-spacing: -0.025em;
  max-width: 22ch;
}
.statement-sub {
  margin-top: var(--s5);
  color: var(--slate);
  max-width: 60ch;
}

.offer {
  margin-top: var(--s7);
  background: var(--paper-2);
  border-left: 2px solid var(--marigold-mark);
  padding: var(--s5) var(--s6);
}
.offer h3 { font-size: var(--t-md); letter-spacing: -0.01em; }
.offer-list {
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
  max-width: 62ch;
}
.offer-list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-top: 1px solid var(--hair);
  color: var(--slate);
}
.offer-list li:first-child { border-top: none; padding-top: 0; }
.offer-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 0.65rem;
  height: 2px;
  background: var(--marigold-mark);
}
.offer-list li:first-child::before { top: 0.45em; }

/* ---------- the close ----------
   Contact and footer share one ink ground, so the page ends on the
   ask rather than trailing off into a hairline. */

.close {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s10) var(--gutter) var(--s9);
}
.close h2 {
  font-size: var(--t-4xl);
  letter-spacing: -0.035em;
  max-width: 15ch;
}
.close > p, .close-inner > p { max-width: 52ch; }
.close-inner > p:nth-of-type(1) { margin-top: var(--s5); color: var(--mint); }

.contact-mail { margin-top: var(--s7); }
.contact-mail a {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-3xl);
  letter-spacing: -0.03em;
  text-decoration: none;
  background-image: linear-gradient(var(--marigold), var(--marigold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 3px;
  padding-bottom: 0.06em;
  transition: background-size 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.contact-mail a:hover { background-size: 100% 100%; color: var(--ink); }

.contact-meta {
  margin-top: var(--s6);
  color: var(--mint-dim);
  font-size: var(--t-sm);
}

/* ---------- footer ---------- */

.foot {
  background: var(--ink);
  color: var(--mint-dim);
  padding: 0 var(--gutter) var(--s6);
  font-size: var(--t-xs);
}
.foot-inner {
  border-top: 1px solid var(--hair-dark);
  padding-top: var(--s5);
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
}

/* ---------- 404 ---------- */

.notfound {
  width: var(--shell);
  margin-inline: auto;
  padding: clamp(3.5rem, 12vh, 8rem) 0 var(--s10);
}
.notfound-code {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--marigold-ink);
  margin-bottom: var(--s5);
}
.notfound h1 {
  font-size: var(--t-4xl);
  letter-spacing: -0.035em;
  max-width: 16ch;
}
.notfound-body {
  margin-top: var(--s5);
  color: var(--slate);
  max-width: 52ch;
}
.notfound .hero-actions { margin-top: var(--s6); }

/* ---------- language picker ---------- */

.langpick { margin: 0; }
.langpick select {
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--slate);
  background: transparent;
  border: 1px solid var(--hair-firm);
  padding: 0.5rem 1.9rem 0.5rem 0.75rem;
  border-radius: 0;
  cursor: pointer;
  /* The native arrow varies too much between platforms to sit next to the
     square-cut buttons, so it is replaced with a drawn chevron. */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2345585E' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 10px 6px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.langpick select:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- motion ----------
   One orchestrated moment, and one quiet reveal:

   1. The hero runs on load from CSS alone — it is above the fold, and
      waiting on JavaScript would show a blank first paint. The two dead
      plans are struck out only after they have arrived, so the visitor
      reads each one before it is cancelled.
   2. Everything below the fold fades in once, on first sight. reveal.js
      adds .is-in; if the script never runs, .reveal is inert and the page
      renders fully visible.

   Both are switched off wholesale by the reduced-motion block below. */

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes draw-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes draw-underline {
  from { background-size: 0% 0.07em; }
  to   { background-size: 100% 0.07em; }
}

.hero .plan,
.hero-note > * { animation: rise 0.7s var(--ease-out) backwards; }
.hero .plan:nth-child(1) { animation-delay: 0.05s; }
.hero .plan:nth-child(2) { animation-delay: 0.16s; }
.hero .plan:nth-child(3) { animation-delay: 0.27s; }
.hero-note .lede { animation-delay: 0.34s; }
.hero-note .sub { animation-delay: 0.42s; }
.hero-note .hero-actions { animation-delay: 0.5s; }

.plan-dead .plan-key::after {
  transform-origin: left;
  animation: draw-x 0.45s var(--ease) backwards;
}
.hero .plan:nth-child(1) .plan-key::after { animation-delay: 0.62s; }
.hero .plan:nth-child(2) .plan-key::after { animation-delay: 0.76s; }
.plan-live .plan-key { animation: draw-underline 0.5s var(--ease-out) 0.96s backwards; }

.notfound > * { animation: rise 0.6s var(--ease-out) backwards; }
.notfound-code { animation-delay: 0.05s; }
.notfound h1 { animation-delay: 0.12s; }
.notfound-body { animation-delay: 0.2s; }
.notfound .hero-actions { animation-delay: 0.28s; }

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover { box-shadow: none; }
}