/* ============================================================
   SYSTEMS — the sections added in the repositioning
   ------------------------------------------------------------
   Everything here follows the rules already set in sections.css:
   ruled, not boxed; numbers in the margin column; near-square
   corners; the accent as a rule or a fill, never as a panel
   behind words.

   The one new idea is the case study. A project is not a card
   with a screenshot on it — it is a claim about capability, so
   it gets the width of the page, a stated system, the stack it
   runs on and a link to the thing itself.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   01 · POSITIONING — the block under the portal
   ════════════════════════════════════════════════════════════ */

/* The h1 sits in .creed (sections/portal.css). It is the page's
   only h1, and it is the positioning line rather than the brand
   name — the name is already the lockup above it. */
.portal__sub {
  max-width: 62ch;
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}

/* SOFTWARE × DIGITAL × BRANDING, set as a measure rather than a
   sentence. The × is a separator, not a character to read. */
.disciplines {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(.55rem, 1.4vw, .85rem);
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--rule-soft);
}
.disciplines__set {
  display: flex;
  /* Never wraps. The size below is solved so it cannot need to. */
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  /* In em, so the gaps scale with the type and the whole line stays a
     fixed multiple of the font-size. */
  gap: .5em;
  margin: 0;
  font-family: var(--font-display);
  /* Sized to fit on one line at any width rather than clamped to a rem
     floor that stops shrinking before the viewport does.

     Measured: the words run 18.89x the font-size, and the four .5em
     gaps add 2x more, so the line is 20.89x the font-size whatever
     that size is. The tightest case is a 320px phone, where --pad-x
     bottoms out at its 1.25rem floor and leaves a 280px container:
     280 / 20.89 = 13.4px, which is 4.19vw. 3.9vw takes it with room
     to spare, and the 1.85rem cap lands at 740px and holds from
     there up. */
  font-size: min(1.85rem, 3.9vw);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink);
}
.disciplines__set i {
  font-style: normal;
  font-weight: 400;
  color: var(--accent);
  transform: translateY(-.04em);
}
.disciplines__where { margin: 0; }

/* ════════════════════════════════════════════════════════════
   02 · WHAT WE BUILD
   ════════════════════════════════════════════════════════════ */
.build__grid {
  display: grid;
  grid-template-columns: var(--margin-col) repeat(2, 1fr);
  gap: 0;
  margin-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--rule);
}
.buildcard {
  grid-column: span 1;
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.2rem, 3vw, 2.6rem) clamp(2.4rem, 5vw, 3.6rem) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.buildcard:nth-child(odd)  { grid-column: 2; }
.buildcard:nth-child(even) { grid-column: 3; padding-left: clamp(1.2rem, 3vw, 2.6rem); border-left: 1px solid var(--rule-soft); }
.buildcard:nth-last-child(-n+2) { border-bottom: 0; }

.buildcard__no {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  color: var(--accent);
}
.buildcard__title {
  margin: .9rem 0 .55rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}
.buildcard__lead {
  max-width: 34ch;
  margin: 0 0 .85rem;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}
.buildcard__desc {
  max-width: 42ch;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--ink-2);
  /* One short sentence per card: two even lines, never a lone word
     left on the second. */
  text-wrap: balance;
}

/* ════════════════════════════════════════════════════════════
   02 · SELECTED WORK — case studies
   ------------------------------------------------------------
   Each project is shown as the thing that was built: a desktop
   capture of the product itself (a booking flow, an inventory
   page) with the same screen on a phone laid over its corner,
   and the client's mark small on the frame. The argument runs
   alongside: sector and place, the problem, what was built,
   then results and a quote once the client has supplied them.
   ════════════════════════════════════════════════════════════ */
.work__head {
  display: grid;
  grid-template-columns: var(--margin-col) 1.1fr .9fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: end;
}
.work__head .statement { grid-column: 2; max-width: 14ch; }
.work__head .lead      { grid-column: 3; }

.cases {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(3.5rem, 8vw, 6rem);
}

/* Each project is a card: a raised surface and a hairline, which is
   where depth comes from on this ground (see --shadow-card). */
.case {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(1.1rem, 3.2vw, 3rem);
  background: var(--ground-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
/* Alternate sides so five projects read as a sequence, not a list. */
.case:nth-child(even) .case__media { order: 2; }

/* ── The stack ──────────────────────────────────────────────
   js/stack.js adds .is-stacked. Each card then pins just under the
   nav, 14px lower than the one before so their top edges show as a
   deck, and the next card slides up over it. The script sets:
     --h  the card's height. A card taller than the screen pins by
          its bottom edge instead, so it is read in full before the
          next one covers it.
     --d  how deep in the stack the card is (0 on top, +1 for each
          card now over it). It sinks back and dims with depth.
   With no script, or under reduced motion, the cards stay a list. */
.cases.is-stacked {
  --stack-base: calc(var(--nav-top) + var(--nav-h) + 16px);
  --stack-peek: 14px;
}
.cases.is-stacked .case {
  position: sticky;
  top: min(calc(var(--stack-base) + var(--i, 0) * var(--stack-peek)),
           calc(100vh - var(--h, 0px) - 16px));
  top: min(calc(var(--stack-base) + var(--i, 0) * var(--stack-peek)),
           calc(100svh - var(--h, 0px) - 16px));
  transform-origin: 50% 0;
  /* 6% smaller for each card on top of it, floored so the back of a
     deep stack still reads as a card rather than a sliver. */
  scale: max(.78, calc(1 - .06 * var(--d, 0)));
}
.cases.is-stacked .case::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  border-radius: inherit;
  background: var(--ground);
  opacity: calc(min(var(--d, 0), 1) * .55);
  pointer-events: none;
}

/* ── The capture ───────────────────────────────────────────── */
.case__media {
  position: relative;
  margin: 0;
  /* Room for the phone to overhang the desktop frame. */
  padding: 0 9% 10% 0;
}
.case:nth-child(even) .case__media { padding: 0 0 10% 9%; }

.case__shot {
  position: relative;
  border-radius: var(--r-xl);
  background: #0D0D13;
  box-shadow: var(--shadow-card);
}
.case__screen {
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
}
.case__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .55rem .85rem .55rem clamp(7rem, 12vw, 9.5rem);
  background: #17171F;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.case__bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}
.case__bar em {
  margin-left: auto;
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.case__screen img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 0;
  background: #0D0D13;
}

/* The client's mark, small, on the frame's top-left corner. Client
   marks are drawn for a dark field, so the chip is dark on both
   grounds. */
.case__logo {
  position: absolute;
  top: -14px;
  left: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: .45rem .8rem;
  background: #0B0B10;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
}
.case__logo img {
  width: auto;
  height: calc(30px * var(--s, 1));
  max-height: 40px;
  object-fit: contain;
}
.case__logo--lockup { --s: 1.3; }
.case__logo--bold   { --s: .95; }

/* The same product on a phone, overhanging the frame's corner. */
.case__phone {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 23%;
  padding: 5px;
  background: #0B0B10;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  box-shadow: var(--shadow-lift);
}
.case:nth-child(even) .case__phone { right: auto; left: 0; }
.case__phone img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: 50% 0;
  border-radius: 17px;
  background: #0D0D13;
}

/* ── The argument ─────────────────────────────────────────── */
.case__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.case__no { color: var(--accent); }
.case__meta i { font-style: normal; color: var(--ink-dim); }

.case__name {
  margin-top: .8rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  line-height: 1.05;
  color: var(--ink);
}

.case__facts {
  display: grid;
  gap: 1.15rem;
  margin-top: clamp(1.3rem, 2.6vw, 1.8rem);
  padding-top: clamp(1.2rem, 2.4vw, 1.6rem);
  border-top: 1px solid var(--rule);
}
.case__facts dt {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.case__facts dd {
  max-width: 52ch;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.6;
  color: var(--ink-2);
}

/* Results — 2-3 numbers, figure over label. Rendered only once real
   numbers exist; see the commented block in each case study. */
.case__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1rem 1.5rem;
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
}
.case__result { display: flex; flex-direction: column-reverse; gap: .3rem; }
.case__result dd {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}
.case__result dt { font-size: .9rem; line-height: 1.45; color: var(--ink-2); }

/* Client quote — shown only once the client has written or approved it. */
.case__quote {
  margin: 1.6rem 0 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--accent);
}
.case__quote blockquote p {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink);
}
.case__quote figcaption {
  margin-top: .6rem;
  font-size: .9rem;
  color: var(--ink-3);
}
.case__quote figcaption strong { font-weight: 600; color: var(--ink-2); }

.case__link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--rule-strong);
  font-weight: 600;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.case__link b { font-weight: 400; color: var(--accent); }
.case__domain {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (hover: hover) {
  .case__link:hover { color: var(--accent-deep); border-color: var(--accent); }
}

.work__more {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.work__moreText {
  max-width: 56ch;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.6;
  color: var(--ink-2);
}

/* ════════════════════════════════════════════════════════════
   04 · BUILT FOR COMPLEXITY
   ════════════════════════════════════════════════════════════ */
.stackmap__head {
  display: grid;
  grid-template-columns: var(--margin-col) 1.1fr .9fr;
  gap: clamp(1.2rem, 3vw, 2.2rem) clamp(1.5rem, 5vw, 4rem);
}
/* A step under --fs-state: two sentences at the full display size
   were louder than the list of capabilities they introduce. */
.stackmap__head .statement {
  grid-column: 2 / -1;
  max-width: none;
  font-size: clamp(1.8rem, 4.3vw, 4rem);
}
.stackmap__head .lead      { grid-column: 3; }

/* Four columns divided by rules, read across as one system
   rather than four cards sitting next to each other. */
.stackmap__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--rule);
}
.capset {
  padding: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1rem, 2.2vw, 1.8rem) clamp(2rem, 4vw, 3rem) 0;
  border-right: 1px solid var(--rule-soft);
}
.capset:first-child { padding-left: 0; }
.capset:not(:first-child) { padding-left: clamp(1rem, 2.2vw, 1.8rem); }
.capset:last-child { border-right: 0; }

.capset__name {
  margin-bottom: 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.capset__list li {
  position: relative;
  padding: .42rem 0 .42rem .95rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink-2);
}
/* A tick in the accent rather than a bullet — it reads as an
   inventory of what is available, which is what it is. */
.capset__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .95em;
  width: 5px;
  height: 1px;
  background: var(--accent);
  opacity: .8;
}

/* ════════════════════════════════════════════════════════════
   06 · WHERE WE WORK
   ════════════════════════════════════════════════════════════ */
.industries__list {
  margin-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--rule);
}
.ind {
  display: grid;
  grid-template-columns: var(--margin-col) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .6fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.6rem, 3.5vw, 2.5rem) 0;
  border-bottom: 1px solid var(--rule-soft);
  transition: background-color var(--dur) var(--ease-out);
}
@media (hover: hover) { .ind:hover { background: var(--fill-soft); } }
.ind__name {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}
.ind__desc {
  grid-column: 3;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.ind__proof {
  grid-column: 4;
  margin: 0;
  text-align: right;
  color: var(--ink-dim);
}

/* ════════════════════════════════════════════════════════════
   07 · WHY — five, not four
   ════════════════════════════════════════════════════════════ */
.why__grid--five { grid-template-columns: repeat(5, 1fr); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   Deliberately not a stack of the desktop layout: the margin
   column collapses, the case study reorders so the argument
   precedes the evidence, and the rules that divided columns
   become rules that divide rows.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .stackmap__grid { grid-template-columns: repeat(2, 1fr); }
  .capset:nth-child(2) { border-right: 0; }
  .capset:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
  .why__grid--five { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .work__head,
  .stackmap__head {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .work__head .statement, .work__head .lead,
  .stackmap__head .statement, .stackmap__head .lead { grid-column: 1; max-width: 32ch; }

  .build__grid { grid-template-columns: 1fr; }
  .buildcard,
  .buildcard:nth-child(odd),
  .buildcard:nth-child(even) {
    grid-column: 1;
    padding: clamp(1.6rem, 5vw, 2.2rem) 0;
    border-left: 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .buildcard:last-child { border-bottom: 0; }

  /* The capture first — the work is the headline — then the argument. */
  .case { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .cases.is-stacked { --stack-peek: 10px; }
  .case:nth-child(even) .case__media { order: 0; }
  .case__media,
  .case:nth-child(even) .case__media { padding: 0 11% 13% 0; }
  .case__phone,
  .case:nth-child(even) .case__phone { width: 27%; left: auto; right: 0; }

  .ind {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .ind__name, .ind__desc, .ind__proof { grid-column: 1; text-align: left; }
  .ind__desc { max-width: 46ch; }
}

@media (max-width: 720px) {
  .why__grid--five { grid-template-columns: repeat(2, 1fr); }
  .work__more { flex-direction: column; align-items: flex-start; }

  /* Built for complexity: on a phone the four capability lists ran to
     24 stacked rows. The statement and its paragraph carry the point;
     the inventory stays for tablet and desktop. */
  .stackmap__grid { display: none; }

  .case__logo { height: 42px; top: -12px; left: 10px; padding: .35rem .6rem; }
  .case__logo img { height: calc(24px * var(--s, 1)); max-height: 32px; }
  .case__bar { padding-left: 6.2rem; }
  .case__bar em { font-size: .62rem; }
  .case__phone { border-radius: 16px; padding: 4px; }
  .case__phone img { border-radius: 12px; }
}

@media (max-width: 560px) {
  .stackmap__grid { grid-template-columns: 1fr; }
  .capset {
    padding: 1.4rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .capset:not(:first-child) { padding-left: 0; }
  .capset:last-child { border-bottom: 0; }
  .why__grid--five { grid-template-columns: 1fr; }
}