/* ============================================================
   TURINGS DESIGN — section system on top of site.css
   Every section is a two-faced layer: PLAY (warm studio, dark
   game-screens) / MECHANISM (cool paper schematic). Faces are
   scoped per-section via .layer-sec[data-face]; the fluid scenes
   live in dark .scene-stage panels so additive particles read.
   ============================================================ */

/* nav additions — scrim bar so scrolling content never overlaps the fixed nav */
.mark { mix-blend-mode: normal; top: 0; left: 0; align-items: center; gap: 20px; padding: 13px clamp(22px, 3.5vw, 40px); background: rgba(16, 12, 52, 0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 0 0 16px 0; }
.mark, .mark a, .mark .home { color: #f0ead8; }
.mark a { opacity: 0.7; }
.mark a:hover { opacity: 1; }
.nav-cta {
  position: fixed; top: var(--edge); right: var(--edge); z-index: 60;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #0c0a24; background: #f5c876; padding: 9px 16px; border-radius: 100px;
}
@media (max-width: 760px) { .nav-cta { display: none; } }

/* ---- section shell -------------------------------------- */
body { background: #100c34; }
.layer-sec {
  position: relative;
  padding: clamp(64px, 8vw, 124px) 0;
  background: radial-gradient(120% 90% at 50% 8%, #271e63 0%, #181150 52%, #100c34 100%);
  color: #f0ead8;
  --rule: rgba(240,234,216,0.14); --soft: rgba(240,234,216,0.6);
  transition: color .5s cubic-bezier(.7,0,.2,1);
  overflow: hidden;
}
/* mechanism = a blueprint overlay revealed by clip-path:
   circle(0) hidden · circle(175%) = full flip */
.pl-face { position: relative; z-index: 1; }
.mc-face {
  position: absolute; inset: 0; z-index: 6; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(44px, 8vh, 96px) clamp(20px, 4vw, 48px);
  background: var(--cool-paper); color: var(--cool-ink);
  --rule: var(--cool-rule); --soft: var(--cool-ink-soft);
  background-image:
    linear-gradient(to right, rgba(14,17,22,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,17,22,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  clip-path: circle(0 at 50% 50%); -webkit-clip-path: circle(0 at 50% 50%);
  transition: clip-path .55s cubic-bezier(.5,.1,.2,1);
  pointer-events: none;
}
.layer-sec[data-face="mechanism"] .mc-face { clip-path: circle(175% at 50% 50%); -webkit-clip-path: circle(175% at 50% 50%); transition: clip-path .75s cubic-bezier(.7,0,.2,1); }
.wrapc { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }

.flip-chip {
  position: absolute; top: 22px; right: clamp(20px, 4vw, 40px); z-index: 8;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #f0ead8; background: rgba(18,13,52,0.5); border: 1px solid rgba(240,234,216,0.3);
  padding: 7px 12px; cursor: pointer; transition: background-color .5s, color .5s, border-color .5s; backdrop-filter: blur(4px);
}
.layer-sec[data-face="mechanism"] .flip-chip { color: var(--cool-ink); background: var(--cool-paper); border-color: var(--cool-ink); }

/* ---- blueprint diagram language (engineering drawing) ---- */
.blueprint { width: 100%; max-width: 700px; height: auto; display: block; color: var(--cool-ink); }
.bp-line { stroke: var(--cool-ink); stroke-width: 1; fill: none; }
.bp-dash { stroke: var(--cool-ink); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
.bp-node { fill: var(--cool-paper); stroke: var(--cool-ink); stroke-width: 1.2; }
.bp-fill { fill: rgba(14,17,22,0.06); stroke: var(--cool-ink); stroke-width: 1; }
.bp-t { font-family: var(--mono); font-size: 10px; fill: var(--cool-ink); letter-spacing: 0.02em; }
.bp-ts { font-family: var(--mono); font-size: 8.5px; fill: var(--cool-ink-soft); letter-spacing: 0.12em; }
.bp-live { fill: #b0421f; }
.bp-livestroke { stroke: #b0421f; stroke-width: 1.4; fill: none; }
.bp-title { font-family: var(--mono); font-size: 9px; fill: var(--cool-ink-soft); letter-spacing: 0.16em; }

/* ---- section headers ------------------------------------ */
.sec-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--soft); margin: 0 0 16px; }
.sec-title { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 14px; font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0; }
.sec-title em { font-style: italic; color: #e9c489; }
.sec-sub { font-family: var(--body); font-size: 1.05rem; line-height: 1.6; color: var(--soft); max-width: 56ch; margin: 0 0 8px; }
.sec-head { margin-bottom: 48px; max-width: 760px; }

/* ---- dark game-screen stage that holds a fluid scene ---- */
.scene-stage { position: relative; background: radial-gradient(125% 95% at 50% 22%, #251c66 0%, #150f48 50%, #0b0826 100%); border: 1px solid rgba(240,234,216,0.08); border-radius: 16px; overflow: hidden; }
canvas.scene { display: block; width: 100%; height: 100%; }
.scene-tag { position: absolute; left: 12px; top: 10px; z-index: 2; font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(247,236,210,0.45); }

/* ---- HERO ----------------------------------------------- */
.hero-sec { position: relative; padding: 0; overflow: hidden; }
.hero-sec[data-face="play"] { background: radial-gradient(110% 80% at 64% 38%, #2c2270 0%, #1a1550 48%, #0f0b30 100%); }
.hero-sec .pl-face { position: relative; height: 100vh; height: 100dvh; min-height: 600px; }
.hero-sec .mc-face { padding-bottom: clamp(64px, 8vw, 120px); min-height: 70vh; }
.hero-sec canvas.scene { position: absolute; inset: 0; }
.hero-copy { position: absolute; left: clamp(24px, 6vw, 88px); bottom: clamp(40px, 9vh, 96px); z-index: 4; max-width: 70vw; }
.hero-pn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(247,236,210,0.55); margin: 0 0 18px; }
.hero-h1 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 7vw, 96px); line-height: 0.98; letter-spacing: -0.018em; color: #f7ecd2; margin: 0; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.hero-h1 em { font-style: italic; color: #fde3a8; }
.hero-stats { display: flex; gap: 26px; align-items: baseline; margin-top: 30px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,236,210,0.6); }
.hero-stats b { font-family: var(--display); font-size: 26px; letter-spacing: 0; color: #f7ecd2; display: block; margin-bottom: 2px; }
.hero-seq { position: absolute; right: clamp(20px,4vw,40px); top: 78px; z-index: 4; display: flex; gap: 6px; }
.hero-seq i { width: 6px; height: 6px; border-radius: 50%; background: rgba(247,236,210,0.22); }
.hero-scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 1px; height: 54px; background: linear-gradient(to bottom, rgba(247,236,210,.5), transparent); z-index: 4; }

/* ---- card grids ----------------------------------------- */
.grid { display: grid; gap: 18px; }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.card { background: rgba(255,255,255,0.05); border: 1px solid rgba(240,234,216,0.10); border-radius: 16px; padding: 16px; transition: background-color .5s, transform .35s var(--ease-out-back, cubic-bezier(.34,1.56,.64,1)); }
.layer-sec[data-face="mechanism"] .card { background: var(--cool-paper-deep); border-color: transparent; border-radius: 0; }
.card:hover { transform: translateY(-4px); }
.layer-sec[data-face="mechanism"] .card:hover { transform: none; }
.card .scene-stage { height: 150px; margin-bottom: 14px; }
.card h3 { font-family: var(--display); font-weight: 400; font-size: 1.25rem; line-height: 1.1; margin: 0 0 6px; }
.card .hook { font-family: var(--display); font-style: italic; font-size: 0.98rem; color: #e9c489; margin: 0 0 8px; }
.card .ceyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--soft); margin: 0 0 7px; }
.card p { font-family: var(--body); font-size: 0.9rem; line-height: 1.55; color: var(--soft); margin: 0; }

/* ---- MECHANISM register / schematic --------------------- */
.mech-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--soft); margin: 0 0 18px; }
.mrow { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--rule); font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.mrow:last-child { border-bottom: none; }
.mrow .pn { color: var(--cool-ink); font-weight: 500; }
.mrow .cl { color: var(--soft); }
.mrow .cl b { color: var(--cool-ink); font-weight: 500; }
.mech-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mcell { border: 1px dashed var(--rule); padding: 12px; }
.mcell .tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--cool-ink); margin: 0 0 6px; }
.mcell .cap { font-family: var(--mono); font-size: 10.5px; line-height: 1.5; color: var(--soft); margin: 0; }
.mech-loop { width: 100%; max-width: 620px; color: var(--cool-ink); display: block; }
.mech-statement { font-family: var(--mono); font-size: clamp(14px,1.6vw,19px); line-height: 1.5; color: var(--cool-ink); max-width: 60ch; margin: 0 0 20px; }

/* trace draw-in on flip to mechanism */

/* ---- process timeline ----------------------------------- */
.proc { position: relative; }
.proc-stage { height: 200px; margin-bottom: 36px; }
.proc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.proc-steps .n { font-family: var(--display); font-size: 28px; color: var(--soft); }
.proc-steps h3 { font-family: var(--display); font-weight: 400; font-size: 1.15rem; margin: 6px 0 6px; }
.proc-steps p { font-family: var(--body); font-size: 0.86rem; line-height: 1.5; color: var(--soft); margin: 0; }

/* ---- lab cards (scoped palettes already dark) ----------- */
.lab .card .scene-stage { height: 168px; }
.lab .platforms { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); margin-top: 10px; }

/* ---- thesis --------------------------------------------- */
.thesis-statement { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 3.2vw, 38px); line-height: 1.18; letter-spacing: -0.01em; max-width: 22ch; margin: 0; }
.thesis-statement em { font-style: italic; color: #e9c489; }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.pillar h4 { font-family: var(--display); font-weight: 400; font-size: 1.02rem; margin: 0 0 6px; }
.pillar p { font-family: var(--body); font-size: 0.84rem; line-height: 1.5; color: var(--soft); margin: 0; }

/* ---- founder / contact ---------------------------------- */
.founder-grid { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: center; }
.founder-vis { border-radius: 18px; max-width: 300px; }
.founder-vis .scene-stage { height: 100%; }
.founder-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; border-radius: 18px; border: 1px solid rgba(240,234,216,0.14); display: block; }
.founder-name { font-family: var(--display); font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 400; margin: 0 0 4px; }
.founder-role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); margin: 0 0 20px; }
.founder-bio { font-family: var(--body); line-height: 1.65; color: var(--soft); margin: 0 0 14px; max-width: 56ch; }
.rec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(28px,5vh,52px); }
.rec-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(240,234,216,0.12); border-radius: 18px; padding: 28px 26px 30px; display: flex; flex-direction: column; align-items: flex-start; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.rec-card:hover { transform: translateY(-4px); border-color: rgba(22,224,176,0.5); background: rgba(255,255,255,0.06); }
.rec-logo { height: 78px; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 20px; text-decoration: none; }
.rec-badge { height: 58px; width: auto; border-radius: 8px; display: block; }
.rec-flag { height: 46px; width: auto; display: block; }
.rec-wordmark { font-family: var(--mono); font-weight: 700; font-size: 24px; letter-spacing: 0.04em; color: #f0ead8; border: 2px solid #f0ead8; padding: 7px 12px; line-height: 1; }
.rec-name { font-family: var(--display); font-weight: 400; font-size: clamp(1.15rem,1.6vw,1.35rem); color: #f0ead8; margin: 0 0 8px; }
.rec-note { font-family: var(--body); font-size: 0.92rem; line-height: 1.55; color: var(--soft); margin: 0; }
@media (max-width: 880px) { .rec-grid { grid-template-columns: 1fr; } }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-stage { height: 220px; border-radius: 16px; margin-bottom: 22px; }
.field { width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--rule); background: rgba(255,255,255,0.06); color: #f0ead8; font-family: var(--body); font-size: 0.92rem; margin-bottom: 12px; outline: none; }
.field::placeholder { color: rgba(240,234,216,0.42); }
.field:focus { border-color: #e9c489; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkline { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--soft); margin: 4px 0 18px; display: flex; gap: 10px; align-items: center; }
.btn-send { font-family: var(--display); font-size: 1.1rem; color: #f0ead8; background: none; border: none; border-bottom: 1px solid #f0ead8; padding: 0 0 5px; cursor: pointer; }
.contact-meta { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); margin-top: 24px; line-height: 1.8; }

/* ---- footer --------------------------------------------- */
.foot { background: #0c0a24; color: rgba(247,236,210,0.7); padding: 56px 0 40px; text-align: center; }
.foot a { color: rgba(247,236,210,0.7); }
.foot .fmark { font-family: var(--display); font-size: 1.4rem; color: #f7ecd2; margin: 0 0 10px; }
.foot .flinks { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; margin: 14px 0; }
.foot .fcopy { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: rgba(247,236,210,0.4); margin-top: 14px; }

/* ---- responsive ----------------------------------------- */
@media (max-width: 900px) {
  .g-3, .mech-grid3, .proc-steps, .pillars { grid-template-columns: repeat(2, 1fr); }
  .founder-grid, .contact-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 860px) {
  .mark a:not(.home), .mark .sep { display: none; }
  .flip-chip { top: 16px; }
}
@media (max-width: 600px) {
  .g-3, .g-2, .mech-grid3, .proc-steps, .pillars { grid-template-columns: 1fr; }
  .hero-copy { max-width: 88vw; }
  .mrow { grid-template-columns: 110px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .layer-sec, .layer-sec.flipping-now * { transition-duration: 1ms !important; }
}