/* ============================================================
   CreteWorx homepage — composed scenes. Motion utilities at the end.
   ============================================================ */

/* ---------- Intro + page curtain ---------- */
.intro { position: fixed; inset: 0; z-index: 400; pointer-events: none; animation: introAuto .6s cubic-bezier(.22,1,.36,1) 4s forwards; background: var(--ink-900); color: #fff; display: grid; place-content: center; gap: 1.25rem; text-align: center; }
.intro-done .intro { display: none; }
@keyframes introAuto { to { opacity: 0; visibility: hidden; transform: translateY(-100%); } }
.intro__mark { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -.03em; line-height: 1; display: flex; gap: .05em; justify-content: center; }
.intro__mark span:last-child { color: var(--orange-500); }
.intro__bar { width: min(60vw, 320px); height: 2px; background: rgba(255,255,255,.15); margin-inline: auto; overflow: hidden; }
.intro__bar i { display: block; height: 100%; background: var(--orange-500); transform: scaleX(0); transform-origin: left; }
.intro__meta { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 2rem; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: var(--stone-400); }
.curtain { position: fixed; inset: 0; z-index: 390; pointer-events: none; background: var(--orange-500); display: none; transform: scaleY(0); transform-origin: bottom; }
.curtain__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--ink-900); font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.03em; opacity: 0; }

/* ---------- Scroll rail (architectural progress) ---------- */
.rail { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 120; display: none; gap: .75rem; align-items: stretch; mix-blend-mode: difference; color: #fff; padding-right: .9rem; }
@media (min-width: 1280px) { .rail { display: flex; } }
.rail__track { width: 1px; background: rgba(255,255,255,.35); position: relative; order: 2; }
.rail__track i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--orange-500); transform: scaleY(0); transform-origin: top; }
.rail__list { display: grid; align-content: space-between; order: 1; text-align: right; }
.rail__list a { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .2rem 0; font-size: .55rem; letter-spacing: .16em; }
/* label is hidden by default so it can never sit over page content; the tick always shows */
.rail__list a .mono { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .45s var(--ease-out), opacity .3s; }
.rail__list a::after { content: ""; width: 10px; height: 1px; background: currentColor; opacity: .55; transition: width .35s var(--ease-out), opacity .3s; flex: none; }
.rail:hover a .mono { max-width: 12rem; opacity: 1; }
.rail__list a.is-active::after { width: 22px; opacity: 1; background: var(--orange-500); }

/* ---------- SCENE 1 · hero ---------- */
.hero { position: sticky; top: 0; z-index: 0; min-height: 100svh; display: grid; align-items: end; color: #fff; background: var(--ink-900); overflow: clip; isolation: isolate; }
.sheet { position: relative; z-index: 1; background: var(--paper-50); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture, .hero__media img { display: block; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 55% 60%; transform: scale(1.06); }
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; }
.hero__gl.is-ready { opacity: 1; }
.hero-gl-ready .hero__media img { visibility: hidden; }
.hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,17,19,.55) 0%, rgba(15,17,19,.05) 32%, rgba(15,17,19,.15) 55%, rgba(15,17,19,.95) 100%); }
.hero__dims { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero__dims [data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero__inner { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; padding: calc(var(--header-h) + 1.5rem) 0 5.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .hero__inner { padding-bottom: 2.75rem; } }
.hero__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.hero__eyebrow { color: #ffb066; margin: 0; }
.hero__coords { color: rgba(255,255,255,.82); display: none; font-variant-numeric: tabular-nums; }
@media (min-width: 700px) { .hero__coords { display: inline; } }
.hero__statement { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.35rem, 8.2vw, 9rem); line-height: .92; letter-spacing: -.04em; display: grid; max-width: none; text-shadow: 0 2px 40px rgba(0,0,0,.35); }
.hero__line { display: block; }
.hero__line--o { color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.85); }
@media (max-width: 700px) { .hero__line--o { -webkit-text-stroke-width: 1.2px; } }
.hero__statement .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .02em .1em 0; margin-bottom: -.1em; }
.hero__statement .w > span { display: inline-block; animation: wordUp 1.1s var(--ease-out) both; animation-delay: calc(.25s + var(--i) * 80ms); }
.hero__title { font-size: clamp(1.15rem, .9rem + 1.1vw, 1.7rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: rgba(255,255,255,.9); max-width: 34ch; animation: rise 1s var(--ease-out) both; animation-delay: .9s; }
.hero__bottom { display: grid; gap: 1.5rem; align-items: end; animation: rise 1s var(--ease-out) both; animation-delay: 1.05s; }
@media (min-width: 900px) { .hero__bottom { grid-template-columns: 1fr auto; } }
.hero__rot { display: flex; align-items: baseline; gap: 1rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem); letter-spacing: -.02em; color: #fff; }
.hero__rot .mono { color: rgba(255,255,255,.6); }
.rot { display: inline-block; overflow: hidden; vertical-align: bottom; height: 1.15em; line-height: 1.15em; min-width: 9ch; }
.rot > span { display: inline-block; color: #ffb066; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__scroll { position: absolute; left: var(--gutter); bottom: 1.1rem; display: none; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); }
@media (min-width: 1024px) { .hero__scroll { display: flex; } }
.hero__scroll::before { content: ""; width: 3rem; height: 1px; background: linear-gradient(90deg, var(--orange-500), transparent); animation: scrollHintX 2.2s ease-in-out infinite; transform-origin: left; }
@keyframes scrollHintX { 0%, 100% { transform: scaleX(.4); opacity: .5; } 50% { transform: scaleX(1); opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes wordUp { from { transform: translateY(112%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll::before { animation: none; } .hero__media img { transform: none; } .hero__title, .hero__bottom, .hero__statement .w > span { animation: none; } }

/* ---------- SCENE 2 · proof ---------- */
.proof { background: var(--ink-900); color: var(--dark-fg); border-bottom: 1px solid var(--dark-line); }
.proof__row { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; padding: 2rem 0 2.5rem; }
@media (min-width: 900px) { .proof__row { grid-template-columns: repeat(5, auto); justify-content: space-between; } }
.proof__row li { display: grid; gap: .35rem; }
.proof__row b { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4.2vw, 4rem); line-height: 1; letter-spacing: -.035em; color: #fff; font-variant-numeric: tabular-nums; }
.proof__row .mono { color: var(--stone-400); font-size: .65rem; }

/* ---------- Kinetic type bands ---------- */

/* ---------- SCENE 3 · services explorer ---------- */
.svc { position: relative; padding-block: var(--section); background: var(--paper-50); overflow: clip; isolation: isolate; }
.svc__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at var(--x, 70%) var(--y, 40%), rgba(245,116,0,.14), transparent 70%); transition: background-position .6s; }
.explorer { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .explorer { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; align-items: start; } }
.explorer__list { border-top: 1px solid var(--line-strong); }
.explorer__item { border-bottom: 1px solid var(--line); }
.explorer__link { display: grid; gap: .3rem; padding: 1rem 0; position: relative; }
.explorer__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); line-height: 1; letter-spacing: -.025em; color: var(--stone-400); transition: color .4s, transform .5s var(--ease-out); transform-origin: left; display: inline-block; }
.explorer__item.is-active .explorer__name { color: var(--fg); transform: translateX(.5rem); }
.explorer__item:hover .explorer__name { color: var(--fg); }
.explorer__meta { display: flex; gap: 1.25rem; color: var(--fg-3); font-size: .65rem; }
.explorer__item.is-active .explorer__meta .mono:first-child { color: var(--accent-text); }
.explorer__detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.explorer__detail > div { overflow: hidden; }
.explorer__item.is-active .explorer__detail { grid-template-rows: 1fr; }
.explorer__summary { color: var(--fg-2); font-size: .95rem; margin: .25rem 0 1rem .5rem; max-width: 50ch; }
.explorer__detail .text-link { margin: 0 0 1.5rem .5rem; display: inline-block; }
.explorer__mobile-img { margin: 0 0 1rem .5rem; }
.explorer__mobile-img img { aspect-ratio: 16/10; object-fit: cover; width: 100%; border-radius: var(--radius); }
@media (min-width: 1024px) { .explorer__mobile-img { display: none; } }
.explorer__stage { display: none; position: sticky; top: calc(var(--header-h) + 1rem); aspect-ratio: 4 / 3.6; border-radius: var(--radius); overflow: hidden; background: var(--ink-800); transform: perspective(1400px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .6s var(--ease-out); }
@media (min-width: 1024px) { .explorer__stage { display: block; } }
.explorer__big { position: absolute; z-index: 3; right: 1rem; top: .25rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 7vw, 7rem); line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55); pointer-events: none; }
.explorer__frame { position: absolute; inset: 0; opacity: 0; }
.explorer__frame.is-active { opacity: 1; }
.explorer__frame picture, .explorer__frame img { display: block; width: 100%; height: 100%; }
.explorer__frame img { object-fit: cover; }
.explorer__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem 1.5rem; color: #fff; background: linear-gradient(180deg, transparent, rgba(15,17,19,.85)); display: flex; justify-content: space-between; align-items: end; gap: 1rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.explorer__caption span:last-child { color: #ffb066; }

/* ---------- SCENE 4 · work (static grid) ---------- */
.projects { background: var(--stone-100); overflow: clip; border-radius: 2rem 2rem 0 0; margin-top: -2rem; position: relative; z-index: 2; padding-block: var(--section); }
.work { display: grid; gap: 1.5rem 1.25rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .work { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .work { grid-template-columns: repeat(3, 1fr); } .work__item:first-child { grid-column: span 2; } .work__item:first-child .work__img { aspect-ratio: 16 / 9; } }
.work__link { display: grid; gap: .8rem; }
.work__img { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--stone-300); }
.work__img picture, .work__img img { display: block; width: 100%; height: 100%; } .work__img img { object-fit: cover; transition: transform 1s var(--ease-out); }
.work__link:hover .work__img img { transform: scale(1.04); }
.work__cap { display: grid; grid-template-columns: auto 1fr; gap: .1rem .9rem; align-items: baseline; font-size: .875rem; color: var(--fg-2); }
.work__cap .mono { color: var(--accent-text); grid-row: span 2; }
.work__cap strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--fg); }
.work__all { margin-top: 2.5rem; text-align: center; }

/* ---------- SCENE 5 · underneath (3D) ---------- */
.under { background: var(--ink-900); color: var(--dark-fg); position: relative; padding-block: var(--section); border-radius: 2rem 2rem 0 0; margin-top: -2rem; z-index: 3; }
.under::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 64px 64px; }
.under__inner { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; position: relative; display: grid; gap: 2.5rem; }
.under__title { font-size: clamp(2.2rem, 1.2rem + 3.8vw, 4.8rem); line-height: .95; letter-spacing: -.04em; text-align: center; max-width: 14ch; margin-inline: auto; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.7); background-image: linear-gradient(90deg, #fff 0%, #fff calc(var(--fill, 0%) - 6%), rgba(255,255,255,0) calc(var(--fill, 0%) + 6%)); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; }
.under__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .under__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 4rem; align-items: start; } }
.process__figure { position: sticky; top: calc(var(--header-h) + 1rem); margin: 0; }
@media (max-width: 1023px) { .process__figure { position: relative; top: auto; } }
.process__hud { display: flex; justify-content: space-between; color: var(--stone-400); padding: 0 .25rem .75rem; }
.process__hud [data-step-pct] { color: #ffb066; font-variant-numeric: tabular-nums; }
.slab3d { position: relative; aspect-ratio: 5 / 4; border: 1px solid var(--dark-line); border-radius: var(--radius); background: radial-gradient(60% 50% at 50% 60%, rgba(245,116,0,.12), transparent 70%); overflow: hidden; }
.slab3d canvas { width: 100% !important; height: 100% !important; display: block; }
.slab3d:not(.is-ready) { display: none; }
.slab3d.is-ready + .xsection { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.xsection { width: 100%; height: auto; display: block; }
.xsection text { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; fill: #c2c5c8; }
.xsection .lbl-active { fill: #ffb066; }
.xsection .layer { opacity: .18; transition: opacity .6s var(--ease-out); }
.xsection .layer.is-on { opacity: 1; }
.xsection .lbl { opacity: .35; transition: opacity .4s; }
.xsection .lbl.is-on { opacity: 1; }
.process__figcap { margin-top: 1rem; font-size: .8125rem; color: var(--stone-400); text-align: center; }
.process__steps { display: grid; }
.process__step { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--dark-line); opacity: .4; transition: opacity .4s, transform .5s var(--ease-out); cursor: pointer; border-radius: var(--radius); }
.process__step:hover, .process__step:focus-visible { opacity: .85; outline: none; }
.process__step:focus-visible h3 { text-decoration: underline; text-decoration-color: #ffb066; text-underline-offset: .2em; }
.process__step.is-active { opacity: 1; transform: translateX(.5rem); }
.process__step .mono { color: var(--stone-400); padding-top: .35rem; }
.process__step.is-active .mono { color: #ffb066; }
.process__step h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.process__step p { color: var(--dark-fg-2); font-size: .9375rem; max-width: 46ch; }
.process__step a { color: #ffb066; border-bottom: 1px solid rgba(255,176,102,.4); }

/* ---------- SCENE 6 · transformation (three static steps) ---------- */
.transform { background: var(--ink-900); color: #fff; position: relative; padding-block: var(--section); }
.stages { display: grid; gap: 2rem 1.5rem; margin-top: 2.5rem; counter-reset: stage; }
@media (min-width: 760px) { .stages { grid-template-columns: repeat(3, 1fr); } }
.stage { display: grid; gap: .5rem; align-content: start; }
.stage__img { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--ink-800); margin-bottom: .6rem; }
.stage__img picture, .stage__img img { display: block; width: 100%; height: 100%; } .stage__img img { object-fit: cover; }
.stage__n { color: #ffb066; }
.stage__t { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); letter-spacing: -.025em; }
.stage__p { color: rgba(255,255,255,.8); font-size: .95rem; max-width: 42ch; }

/* ---------- SCENE 7 · craft (split: copy left, crew photo right) ---------- */
.craft { position: relative; background: var(--ink-800); color: #fff; overflow: clip; isolation: isolate; }
.craft__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.craft__media picture, .craft__media img { display: block; width: 100%; height: 100%; } .craft__media img { object-fit: cover; }
.craft__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 55%, var(--ink-800) 100%); }
.craft__inner { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; padding: clamp(2.5rem, 6vw, 5rem) 0 var(--section); display: grid; gap: 1.1rem; }
@media (min-width: 1024px) {
  .craft { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
  .craft__media { position: absolute; inset: 0 0 0 50%; aspect-ratio: auto; height: 100%; }
  .craft__media > div { height: 112%; margin-top: -6%; }
  .craft__shade { background: linear-gradient(90deg, var(--ink-800) 0%, rgba(27,31,35,.45) 12%, rgba(27,31,35,.08) 40%, rgba(27,31,35,0) 100%); }
  .craft__inner { grid-column: 1; width: auto; margin: 0; padding: var(--section) 3rem var(--section) max(var(--gutter), calc((100vw - var(--container)) / 2)); align-content: center; }
}
.craft__title { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.6rem); line-height: 1; letter-spacing: -.03em; max-width: 18ch; text-wrap: balance; }
.craft__lede { color: rgba(255,255,255,.78); font-size: 1rem; line-height: 1.6; max-width: 54ch; }
.craft__points { display: grid; margin-top: .5rem; border-top: 1px solid rgba(255,255,255,.2); }
.craft__points li { padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.14); display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; }
.craft__points h3 { font-size: 1.05rem; }
.craft__points p { font-size: .88rem; margin-top: .15rem; color: rgba(255,255,255,.72); }
.craft__points .mono { color: #ffb066; padding-top: .25rem; }
.craft__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }

/* ---------- SCENE 7b · texture explorer ---------- */
.tex { background: var(--stone-100); padding-block: var(--section); }
.tex__grid { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .tex__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 3rem; align-items: start; } }
.tex__list { display: grid; border-top: 1px solid var(--line-strong); }
.tex__btn { width: 100%; display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 1rem; text-align: left; padding: 1rem 0; border-bottom: 1px solid var(--line); transition: padding-left .35s var(--ease-out); }
.tex__btn .mono { color: var(--fg-3); grid-row: span 2; padding-top: .3rem; }
.tex__btn strong { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.01em; }
.tex__btn > span:last-child { color: var(--fg-2); font-size: .9rem; }
.tex__btn.is-active { padding-left: .5rem; }
.tex__btn.is-active .mono { color: var(--accent-text); }
.tex__stage { position: relative; aspect-ratio: 16 / 11; border-radius: var(--radius); overflow: hidden; background: var(--ink-800); cursor: none; }
@media (pointer: coarse) { .tex__stage { cursor: default; } }
.tex__frame { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease-out); }
.tex__frame.is-active { opacity: 1; }
.tex__frame picture, .tex__frame img { display: block; width: 100%; height: 100%; }
.tex__frame img { object-fit: cover; }
.tex__lens { position: absolute; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.2); background-image: var(--lens-img); background-size: var(--lens-size, 300%); background-position: var(--lens-pos, 50% 50%); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s var(--ease-out); pointer-events: none; }
.tex__lens.is-on { opacity: 1; transform: scale(1); }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .tex__lens { display: none; } }
.tex__label { position: absolute; left: 1.25rem; bottom: 1.25rem; padding: .5rem .8rem; background: rgba(15,17,19,.7); color: #ffb066; border-radius: 2px; backdrop-filter: blur(6px); }

/* ---------- SCENE 8 · colorado (stacked rows) ---------- */
.colorado { background: var(--paper-50); position: relative; padding-block: var(--section); overflow: clip; }
.colorado__topo { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: repeating-radial-gradient(ellipse 60% 40% at 80% 30%, transparent 0 22px, rgba(15,17,19,.06) 22px 23px); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
.colorado__head { margin-bottom: 1rem; }
.cond { display: grid; border-top: 1px solid var(--line-strong); }
.cond__row { display: grid; grid-template-columns: 3rem 1fr; grid-template-areas: "n t" "n i" "n p" "n l"; gap: .5rem 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); position: relative; transition: background-color .3s; }
@media (min-width: 900px) { .cond__row { grid-template-columns: 4rem 1.1fr 5rem 1.6fr auto; grid-template-areas: "n t i p l"; align-items: center; gap: 2rem; padding: 2rem 0; } }
.cond__row:hover { background: rgba(255,255,255,.6); }
.cond__n { grid-area: n; color: var(--accent-text); padding-top: .3rem; }
.cond__t { grid-area: t; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); letter-spacing: -.02em; }
.cond__icon { grid-area: i; width: 3rem; height: 3rem; color: var(--accent-text); }
.cond__icon svg { width: 100%; height: 100%; }
.cond__icon .rays { transform-origin: 50% 50%; animation: spin 24s linear infinite; }
.cond__icon .wave { stroke-dasharray: 120; stroke-dashoffset: 0; animation: flow 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flow { to { stroke-dashoffset: -240; } }
@media (prefers-reduced-motion: reduce) { .cond__icon .rays, .cond__icon .wave { animation: none; } }
.cond__p { grid-area: p; color: var(--fg-2); font-size: .95rem; }
.cond__link { grid-area: l; font-weight: 600; color: var(--accent-text); display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.cond__link::before { content: ""; position: absolute; inset: 0; }

/* ---------- resources (strip, not cards) ---------- */
.resources { background: var(--paper-50); padding-block: var(--section); border-top: 1px solid var(--line); }
.post-strip { display: grid; border-top: 1px solid var(--line-strong); }
.post { display: grid; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .post { grid-template-columns: 220px 1fr; gap: 2rem; align-items: center; } }
.post__img { display: block; aspect-ratio: 16/10; overflow: hidden; border-radius: var(--radius); background: var(--stone-200); }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.post:hover .post__img img { transform: scale(1.04); }
.post__meta { display: flex; gap: 1.25rem; color: var(--fg-3); font-size: .65rem; margin-bottom: .4rem; }
.post h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing: -.02em; }
.post h3 a:hover { color: var(--accent-text); }
.post p { font-size: .95rem; color: var(--fg-2); margin-top: .4rem; }
.resources__all { text-align: center; margin-top: 2rem; }

/* ---------- SCENE 10 · quote ---------- */
.quote { background: var(--ink-900); color: var(--dark-fg); padding-block: var(--section); position: relative; }
.quote__inner { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; display: grid; gap: 3rem; }
@media (min-width: 1024px) { .quote__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 5rem; align-items: start; } }
.quote__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
.quote__title { font-size: clamp(2.4rem, 1.2rem + 3.2vw, 4.4rem); letter-spacing: -.035em; line-height: .98; }
.quote__aside .lede { margin: 1.25rem 0 2rem; color: var(--dark-fg-2); }
.quote__contact { display: grid; gap: 1rem; border-top: 1px solid var(--dark-line); padding-top: 1.5rem; }
.quote__contact li { display: grid; gap: .2rem; }
.quote__contact .mono { color: var(--stone-400); }
.quote__contact a { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: #fff; }
.quote__contact a:hover { color: #ffb066; }
.quote__card { background: var(--ink-800); border: 1px solid var(--dark-line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem); }
.quote .field label { color: var(--dark-fg-2); }
.quote .field input, .quote .field select, .quote .field textarea { background: var(--ink-900); color: #fff; border-color: rgba(255,255,255,.2); }
.quote .quote-form__note { color: var(--stone-400); }
.quote .quote-form__note a { color: #ffb066; }

/* ---------- shared motion utilities ---------- */
.js [data-clip] > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-out); }
.js [data-clip].is-in > * { clip-path: inset(0 0 0 0); }
.js [data-clip] img { transform: scale(1.12); transition: transform 1.4s var(--ease-out); }
.js [data-clip].is-in img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .js [data-clip] > * { clip-path: none; } .js [data-clip] img { transform: none; } }
.sw { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .02em .08em 0; margin-bottom: -.08em; }
.sw > span { display: inline-block; will-change: transform; }
.split-static .sw > span { transform: none !important; }
.cursor { position: fixed; left: 0; top: 0; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--orange-500); color: #fff; display: grid; place-items: center; font-family: var(--font-mono); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; pointer-events: none; z-index: 150; opacity: 0; scale: .3; transition: opacity .25s, scale .35s var(--ease-out); }
.cursor.is-on { opacity: 1; scale: 1; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor { display: none; } }

/* under: phase arrows under the figure */
.process__nav { display: flex; align-items: center; gap: .6rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }
.process__nav-btn, .reel-nav__btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--dark-line); border-radius: var(--radius); color: inherit; transition: background-color .25s, color .25s, border-color .25s, opacity .25s; }
.process__nav-btn:hover, .reel-nav__btn:hover { background: var(--orange-500); color: var(--ink-900); border-color: var(--orange-500); }
.process__nav-btn:disabled, .reel-nav__btn:disabled { opacity: .3; pointer-events: none; }
.process__nav-count { color: #ffb066; font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: center; }
.process__nav-hint { flex-basis: 100%; text-align: center; color: var(--stone-400); font-size: .58rem; margin-top: .25rem; }
/* work reel: arrows beside the counter; the reel itself scrolls natively */
.reel-nav { display: flex; gap: .5rem; justify-content: center; }
.projects .reel-nav__btn { border-color: var(--line-strong); }
.projects__inner { align-items: center; }
@media (min-width: 1024px) { .projects__inner { grid-template-columns: clamp(15rem, 22vw, 20rem) minmax(0, 1fr); gap: 2.5rem; width: auto; margin: 0 0 0 max(var(--gutter), calc((100vw - var(--container)) / 2)); } .projects__side { width: auto; margin: 0; text-align: left; justify-items: start; } .projects .reel-nav { justify-content: start; } .reel { --reel-pad: 0px; padding-right: var(--gutter); } .reel__item { flex-basis: min(46vw, 720px); } .reel__img { height: min(62vh, 640px); aspect-ratio: auto; } }