/* MAIA scroll craft | 2026-11-08 AEST. Load after /all-trades/site.css.
   Scoped enhancement. Content stays readable when JavaScript is unavailable. */
html.sc-page {
  --bg: #06080B;
  --surface: #0A0D12;
  --surface-2: #0A0D12;
  --ink: #FFFFFF;
  --ink-soft: #B8CBD0;
  --accent: #22B8C4;
  --accent-ink: #06080B;
  --accent-hover: #22B8C4;
  --sc-cyan: #22B8C4;
  --sc-ease: cubic-bezier(.16, 1, .3, 1);
  background: #06080B;
  scrollbar-color: #22B8C4 #06080B;
}
.sc-page body { background: radial-gradient(60vmax 45vmax at 88% 8%, rgb(34 184 196 / .07), transparent 62%), radial-gradient(55vmax 45vmax at 6% 70%, rgb(34 184 196 / .05), transparent 62%), #06080B; background-attachment: fixed; }
.sc-page :is(.jobcard, .sms__bubble, .slot-ph, .form) { background: #0A0D12; }
.sc-page :is(.phone__screen, .sms__screen, .jobcard--back) { background: #06080B; }
.sc-page .bar { background: rgb(6 8 11 / .96); }
.sc-page ::selection { color: #06080B; background: #22B8C4; }
.sc-page :focus-visible { outline: 2px solid #22B8C4; outline-offset: 5px; }
.sc-page :is(h2, [data-sting]) { text-wrap: balance; }

/* One bounded horizontal journey. Wheel and touch events are never captured. */
.sc-page .sc-track { position: relative; }
.sc-page .sc-track.sc-native { padding: 0; overflow: visible; }
.sc-page .sc-native > .track__pin {
  position: relative;
  padding: calc(var(--bar, 60px) + 1rem) 0 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.sc-page .sc-native .track__rail {
  position: relative; display: flex; gap: clamp(1rem, 3vw, 3rem);
  width: 100%; max-width: none; margin: 0;
  padding: 1rem var(--gutter, 4vw) 1.25rem;
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: #22B8C4 #06080B;
  overscroll-behavior-x: contain;
}
.sc-page .sc-native .stage {
  flex: 0 0 min(84vw, 560px); width: min(84vw, 560px);
  min-height: 440px; scroll-snap-align: center;
}
.sc-page .sc-track.sc-pinned { height: var(--sc-track-height); }
.sc-page .sc-pinned > .track__pin {
  position: sticky; top: 0; height: 100svh;
  overflow: clip;
}
.sc-page .sc-pinned .track__rail {
  overflow: visible; width: max-content; flex: 1; min-height: 0;
  transform: translate3d(var(--sc-x, 0px), 0, 0);
  scroll-snap-type: none;
}
.sc-page .sc-pinned .stage {
  width: clamp(400px, 42vw, 620px); flex-basis: clamp(400px, 42vw, 620px);
  min-height: 0;
}
.sc-page .sc-pinned .stage__vis, .sc-page .sc-pinned .sms__screen { min-height: 0; }
/* Phones and small tablets: same scroll-locked track, cards sized to the screen. */
@media (max-width: 959px) {
  .sc-page .sc-pinned .stage { width: min(84vw, 420px); flex-basis: min(84vw, 420px); min-height: 0; }
  .sc-page .sc-pinned .track__rail { align-items: stretch; padding-bottom: 1rem; }
}
.sc-page .sc-pinned .track__rail.sc-moving { will-change: transform; }
.sc-page .sc-laser {
  position: relative; flex: none; height: 26px;
  margin: .1rem var(--gutter, 4vw) 0;
  pointer-events: none;
}

/* Original text nodes are split, never rewritten or copied for screen readers. */
/* Founder 8 Nov (master prompt): cut reveal. Each letter rises out of a slot and untwists into place. */
.sc-word { display: inline-block; color: #FFFFFF; white-space: nowrap; overflow: clip; overflow-clip-margin: .12em; padding-bottom: .06em; margin-bottom: -.06em; vertical-align: top; }
.sc-word--cyan { color: #22B8C4; }
.sc-ch { display: inline-block; }
.sc-page.sc-fx .sc-ch {
  transform: translateY(calc((1 - var(--c, 1)) * 105%)) rotateX(calc((1 - var(--c, 1)) * -80deg)) rotateZ(calc((1 - var(--c, 1)) * 9deg));
  transform-origin: 50% 100%;
  opacity: calc(.15 + var(--c, 1) * .85);
  filter: blur(calc((1 - var(--c, 1)) * 3px));
}
.sc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Existing value lists become one deliberate, layered vertical sequence. */
.sc-page .sc-stack {
  position: relative; display: block; isolation: isolate;
  max-width: 100%; padding-bottom: clamp(2rem, 7vh, 5rem);
}
.sc-page .sc-stack > .sc-stack-card {
  position: sticky; top: calc(var(--bar, 60px) + 18px + var(--sc-index) * 16px);
  z-index: var(--sc-layer); margin: 0 0 clamp(2rem, 8vh, 5rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  min-height: clamp(220px, 34vh, 340px);
  border: 1px solid var(--cyan-edge, #06636C); border-radius: var(--radius, 14px);
  transform-origin: center top;
  scale: var(--sc-depth, 1);
  /* Legacy rise must not dim readable content while a card is sticky. */
  opacity: 1 !important;
}
.sc-page .sc-stack .word__w { font-size: clamp(3rem, 9vw, 7rem); }

/* A masked one-pixel highlight, not a light wash over the copy. */
.sc-border { position: relative; }
.sc-border > .sc-specular {
  position: absolute; inset: 0; z-index: 5; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: radial-gradient(240px circle at var(--sc-pointer-x, 50%) var(--sc-pointer-y, 40%), #22B8C4, rgb(34 184 196 / .12) 55%, transparent 75%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity 180ms var(--sc-ease);
}
@media (hover: hover) and (pointer: fine) {
  .sc-border:hover > .sc-specular, .sc-border:focus-within > .sc-specular { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
  .sc-border.sc-inview > .sc-specular { opacity: .9; }
}
.sc-page .sc-magnetic {
  position: relative; translate: var(--sc-mx, 0px) var(--sc-my, 0px);
  transition: translate 220ms var(--sc-ease), box-shadow 220ms var(--sc-ease);
}
.sc-page .sc-magnetic:is(:hover, :focus-visible) {
  box-shadow: 0 7px 24px -8px rgb(34 184 196 / .65);
}
.sc-page.sc-static .sc-stack > .sc-stack-card { position: relative; top: auto; scale: none; }
.sc-page:not(.sc-fx) .sc-magnetic { translate: none; }
@media (max-height: 699px) {
  .sc-page .sc-stack > .sc-stack-card { position: relative; top: auto; scale: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-page .sc-stack > .sc-stack-card { position: relative; top: auto; scale: none; }
  .sc-page .sc-specular { transition: none; }
}
/* Founder pass 8 Nov: laser line and all four cards fit one laptop screen (768 to 900 px high).
   No manual scrollbar on desktop; phones keep the swipe rail with smaller cards. */
.sc-page .sc-track .stage h3 { font-size: clamp(1.12rem, 1.6vw, 1.5rem); }
.sc-page .sc-track .stage__vis { margin-top: .6rem; }
.sc-page .sc-track .sms { min-height: 0; height: 92%; }
.sc-page .sc-track .sms__screen { min-height: 0; }
.sc-page .sc-track .sms__bubble { font-size: .95rem; }
.sc-page .sc-native > .track__pin { padding-top: calc(var(--bar, 60px) + .75rem); gap: .6rem; }
.sc-page .sc-native .track__rail { padding-top: .6rem; }
.sc-page .sc-native .stage { flex-basis: min(82vw, 400px); width: min(82vw, 400px); min-height: 370px; }
.sc-page .sc-native .stage__vis { min-height: 230px; }
.sc-page .sc-native .stage--call .phone { width: 118px; font-size: 11px; }
.sc-page .sc-native .jobs, .sc-page .sc-native .form { width: min(100%, 300px); }
.sc-page .sc-track .track__head h2 { font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
@media (min-width: 960px) {
  .sc-page .sc-native .track__rail { scrollbar-width: none; }
  .sc-page .sc-native .track__rail::-webkit-scrollbar { display: none; }
  .sc-page .sc-pinned .track__rail { align-items: flex-start; padding-bottom: 1rem; }
  .sc-page .sc-pinned .stage {
    /* landscape glass monitors: words on the left, the screen on the right */
    width: clamp(560px, 58vw, 920px); flex-basis: clamp(560px, 58vw, 920px);
    height: min(100%, 480px); min-height: 0;
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(1rem, 2vw, 2rem);
    padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 2vw, 1.6rem) 0;
  }
  .sc-page .sc-pinned .stage__head { align-self: center; padding-bottom: 1.2rem; }
  .sc-page .sc-pinned .stage h3 { font-size: clamp(1.3rem, 2.1vw, 2rem); padding-right: 0; }
  .sc-page .sc-pinned .stage__job { font-size: clamp(1rem, 1.2vw, 1.15rem); margin-top: .6rem; }
  .sc-page .sc-pinned .stage__qual { font-size: .92rem; margin-top: .5rem; }
  .sc-page .sc-pinned .stage__vis { margin-top: 0; height: 100%; }
  .sc-page .sc-pinned .tag { top: .9rem; right: .9rem; }
  .sc-page .sc-pinned .stage--call .phone { width: min(150px, 20vh); font-size: 12px; }
  .sc-page .sc-pinned .sms { width: min(84%, 300px); }
  .sc-page .sc-pinned .form { width: min(100%, 320px); padding: .7rem; }
  .sc-page .sc-pinned .form__row { font-size: .9rem; padding: .22rem 0; }
  .sc-page .sc-pinned .slot-ph { aspect-ratio: 3 / 2; }
  .sc-page .sc-pinned .jobs { width: min(100%, 320px); }
  .sc-page .sc-pinned .jobcard__job { font-size: 1.15rem; }
  .sc-page .sc-pinned .stage--card .stage__vis { padding-bottom: 1rem; }
}
/* Founder 8 Nov: short laptop windows (browser zoom on) still pin, with tighter cards. */
@media (min-width: 960px) and (max-height: 640px) {
  .sc-page .sc-native > .track__pin { padding-top: calc(var(--bar, 60px) + .4rem); gap: .35rem; }
  .sc-page .sc-track .track__head h2 { font-size: 1.25rem; }
  .sc-page .sc-track .track__note { font-size: .8rem; }
  .sc-page .sc-native .track__rail { padding-top: .4rem; }
  .sc-page .sc-pinned .track__rail { padding-bottom: .6rem; }
  .sc-page .sc-pinned .stage { padding: .7rem .8rem 0; width: clamp(520px, 56vw, 780px); flex-basis: clamp(520px, 56vw, 780px); }
  .sc-page .sc-pinned .stage__head { padding-bottom: .6rem; }
  .sc-page .sc-track .stage h3 { font-size: 1.1rem; padding-right: 0; }
  .sc-page .sc-track .tag { top: .65rem; font-size: .64rem; }
  .sc-page .sc-track .stage__job { font-size: .86rem; margin-top: .2rem; }
  .sc-page .sc-track .stage__qual { font-size: .76rem; }
  .sc-page .sc-track .stage__vis { margin-top: .3rem; }
  .sc-page .sc-pinned .stage--call .phone { width: min(110px, 21vh); font-size: 10px; }
  .sc-page .sc-track .sms__bubble { font-size: .8rem; padding: .5rem .65rem; }
  .sc-page .sc-track .sms__screen { padding: .5rem; }
  .sc-page .sc-pinned .form { padding: .45rem .6rem; }
  .sc-page .sc-pinned .form__row { font-size: .78rem; padding: .1rem 0; }
  .sc-page .sc-pinned .form__photos { margin-top: .3rem; }
  .sc-page .sc-pinned .slot-ph { aspect-ratio: 5 / 2; }
  .sc-page .sc-pinned .form__send { margin-top: .3rem; padding: .15rem; font-size: .8rem; }
  .sc-page .sc-pinned .jobs { padding-top: 1.8rem; }
  .sc-page .sc-pinned .jobcard { padding: .55rem .7rem; }
  .sc-page .sc-pinned .jobcard--back { font-size: .8rem; padding: .3rem .7rem 1.8rem; }
  .sc-page .sc-pinned .jobcard__job { font-size: 1rem; margin-top: .3rem; }
  .sc-page .sc-pinned .reply { margin-top: .45rem; padding: .25rem .8rem; font-size: .85rem; }
  .sc-page .sc-pinned .stage--card .stage__vis { padding-bottom: .5rem; }
}
@media print {
  .sc-page .sc-track.sc-pinned { height: auto; }
  .sc-page .sc-pinned > .track__pin { position: relative; height: auto; overflow: visible; }
  .sc-page .sc-native .track__rail { display: block; width: auto; overflow: visible; transform: none; }
  .sc-page .sc-native .stage { width: auto; break-inside: avoid; }
  .sc-page .sc-stack > .sc-stack-card { position: relative; top: auto; scale: none; }
  .sc-ch { transform: none !important; opacity: 1 !important; filter: none !important; }
  .sc-laser, .sc-specular { display: none; }
}