/* ============================================================
   FRAME V2 — sections (part 1)
   Problem word-fill · exploded stack · protocol marquee ·
   pillars.
   ============================================================ */

/* ---------------- PROBLEM — scrub word fill ---------------- */
.problem .wrap { max-width: 1180px; }
.problem__statement {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.4rem, 6.4vw, 6rem); line-height: .9; letter-spacing: -.035em;
  margin: clamp(28px, 4vw, 52px) 0 0; color: var(--frame-ironworks);
}
.problem__statement .w { color: rgba(17,20,24,.16); transition: color .25s linear; }
.problem__statement .w.is-lit { color: var(--frame-ironworks); }
.problem__statement .w.is-lit.hl { color: var(--frame-deepwater); }
html.no-js .problem__statement .w, html.no-motion .problem__statement .w { color: var(--frame-ironworks); }
html.no-js .problem__statement .w.hl, html.no-motion .problem__statement .w.hl { color: var(--frame-deepwater); }

.problem__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px); margin-top: clamp(44px, 6vw, 88px);
  border-top: 1px solid rgba(17,20,24,.12); padding-top: clamp(28px, 4vw, 52px);
}
.problem__cols p { margin: 0; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.65; color: var(--frame-forge); }
.problem__cols strong { color: var(--frame-ironworks); }
@media (max-width: 760px) { .problem__cols { grid-template-columns: 1fr; } }

/* ---------------- STACK — the architecture is the mark ---------------- */
.stack { background: var(--ink-950); }
.stack__pin { height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: clip; position: relative; }
.stack__head { text-align: center; display: grid; gap: 18px; justify-items: center; padding-top: calc(var(--nav-h) + 10px); }
.stack__stage { flex: 1; min-height: 0; display: grid; place-items: center; position: relative; padding-bottom: clamp(30px, 5.5vh, 70px); }

/* the mark — a square stage holding four overlaid chevron layers */
.mark {
  position: relative;
  width: clamp(300px, 31vw, 410px);
  aspect-ratio: 41 / 32;
}

/* each layer is a full-size SVG; stacked, they reassemble the mark exactly */
.mk { position: absolute; inset: 0; will-change: transform; }
.mk svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mk path { transition: none; }

/* depth ramp — light at the top, deep brand-blue at the base.
   stacked hard drop-shadows give each thin chevron a solid extruded edge */
.mk--3 path { fill: #DCE8F4; }
.mk--2 path { fill: #7FB0D8; }
.mk--1 path { fill: #3F82B6; }
.mk--0 path { fill: var(--frame-deepwater); }

.mk--3 { filter:
  drop-shadow(0 1px 0 #93a8bd) drop-shadow(0 2px 0 #93a8bd) drop-shadow(0 3px 0 #93a8bd)
  drop-shadow(0 4px 0 #7f93a8) drop-shadow(0 12px 16px rgba(0,0,0,.45)); }
.mk--2 { filter:
  drop-shadow(0 1px 0 #356f9c) drop-shadow(0 2px 0 #356f9c) drop-shadow(0 3px 0 #356f9c)
  drop-shadow(0 4px 0 #2c5e85) drop-shadow(0 12px 16px rgba(0,0,0,.45)); }
.mk--1 { filter:
  drop-shadow(0 1px 0 #1e547f) drop-shadow(0 2px 0 #1e547f) drop-shadow(0 3px 0 #1e547f)
  drop-shadow(0 4px 0 #18435f) drop-shadow(0 12px 16px rgba(0,0,0,.45)); }
.mk--0 { filter:
  drop-shadow(0 1px 0 #0a3358) drop-shadow(0 2px 0 #0a3358) drop-shadow(0 3px 0 #0a3358)
  drop-shadow(0 4px 0 #07253f) drop-shadow(0 14px 18px rgba(0,0,0,.5)); }

/* the two core layers carry FRAME's signal-blue glow once disintegrated */
.mark.is-open .mk--2, .mark.is-open .mk--1 { filter:
  drop-shadow(0 1px 0 #2c5e85) drop-shadow(0 2px 0 #2c5e85) drop-shadow(0 3px 0 #2c5e85)
  drop-shadow(0 4px 0 #24506f) drop-shadow(0 0 22px rgba(99,157,205,.6)) drop-shadow(0 12px 18px rgba(0,0,0,.45)); }

/* center identity — the full FRAME lockup, sitting in the middle */
.mcore {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 6; display: grid; justify-items: center; gap: 9px; opacity: 0; pointer-events: none; text-align: center;
}
.mcore::before {
  content: ""; position: absolute; inset: -26px -44px; z-index: -1;
  background: radial-gradient(58% 62% at 50% 44%, rgba(7,10,13,.82), rgba(7,10,13,.55) 55%, rgba(7,10,13,0) 100%);
}
.mcore__logo {
  width: clamp(150px, 17vw, 208px); display: block;
  filter: drop-shadow(0 0 22px rgba(99,157,205,.85)) drop-shadow(0 1px 9px rgba(7,10,13,.9));
}
.mcore__logo svg { width: 100%; height: auto; display: block; }
.mcore__logo svg path { fill: #fff; }
.mcore__lab {
  margin-top: 5px; font-family: var(--font-condensed); font-weight: 600; font-size: 12px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--frame-conduit);
}
.mcore__meta {
  font-family: var(--font-condensed); font-weight: 500; font-size: clamp(12px, 1.25vw, 14px);
  letter-spacing: .02em; color: var(--frame-coldroll);
}

/* annotation callouts */
.mlab {
  position: absolute; display: flex; align-items: center; gap: 14px;
  width: max-content; opacity: 0; z-index: 4; will-change: opacity, transform; pointer-events: none;
}
.mlab__rule { width: clamp(36px, 5vw, 88px); height: 1px; background: var(--line-3); position: relative; flex: none; }
.mlab__rule::after { content: ""; position: absolute; top: -2.5px; width: 6px; height: 6px; background: var(--frame-conduit); }
/* top → upper-right, rule on the LEFT of the text (points back to the mark);
   bottom (money layer) → left, rule on the right of the text (toward the mark) */
.mlab--top .mlab__rule::after { left: -3px; }
.mlab--bot .mlab__rule::after { right: -3px; }
.mlab__lab { font-family: var(--font-condensed); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--frame-galvanized); margin-bottom: 5px; }
.mlab__lab--accent { color: var(--frame-conduit); }
.mlab__name { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(1.15rem, 1.9vw, 1.7rem); line-height: 1; color: var(--frame-clearspan); }
.mlab__meta { font-family: var(--font-condensed); font-size: 13px; letter-spacing: .06em; color: var(--frame-galvanized); margin-top: 6px; }
.mlab--top { top: -6%; left: calc(100% + 60px); }
.mlab--bot { bottom: -6%; right: calc(100% + 60px); flex-direction: row; text-align: right; }
.mlab--bot .mlab__txt { order: -1; }

.stack__foot {
  position: relative; z-index: 8;
  text-align: center; padding-bottom: 30px; max-width: 60ch; margin: 0 auto;
  font-family: var(--font-condensed); font-weight: 600; font-size: 13px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--frame-foundry);
}
.stack__foot::before {
  content: ""; position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
  width: 100vw; height: calc(100% + 22px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,10,13,0), rgba(7,10,13,.86) 42%, var(--ink-950) 100%);
}
.stack__foot b { color: var(--frame-conduit); font-weight: 600; }

@media (max-height: 760px) and (min-width: 881px) {
  .mark { width: clamp(260px, 24vw, 330px); }
  .stack__head .h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
  .stack__head { gap: 10px; padding-top: calc(var(--nav-h) - 4px); }
  .mlab__name { font-size: 1.05rem; }
  .mlab__meta { font-size: 12px; }
}
/* clean static mobile layout (desktop disintegration hidden ≤880) */
.stack__mobile { display: none; }
@media (max-width: 880px) {
  .stack__pin { height: auto; }
  .stack__stage, .stack__foot { display: none; }
  .stack__mobile { display: grid; gap: clamp(18px, 4vw, 28px); padding: clamp(20px, 5vw, 40px) var(--gutter) 0; justify-items: center; }
  .smark { width: clamp(120px, 34vw, 160px); aspect-ratio: 41 / 32; filter: drop-shadow(0 14px 30px rgba(15,76,129,.45)); }
  .smark svg { width: 100%; height: 100%; display: block; }
  .smark .sl3 { fill: #DCE8F4; } .smark .sl2 { fill: #7FB0D8; } .smark .sl1 { fill: #3F82B6; } .smark .sl0 { fill: var(--frame-deepwater); }
  .slayers { width: 100%; max-width: 460px; display: grid; gap: 12px; }
  .slayer { position: relative; border: 1px solid var(--line-2); background: var(--ink-900); padding: 18px 20px; }
  .slayer--frame { background: linear-gradient(180deg, var(--frame-deepwater), var(--frame-ballast)); border-color: var(--frame-conduit); box-shadow: 0 0 0 1px rgba(99,157,205,.3), 0 16px 40px rgba(15,76,129,.4); }
  .slayer__logo { display: block; width: 116px; margin-bottom: 12px; }
  .slayer__logo svg { width: 100%; height: auto; display: block; }
  .slayer__logo svg path { fill: #fff; }
  .slayer__lab { font-family: var(--font-condensed); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--frame-galvanized); }
  .slayer--frame .slayer__lab { color: var(--frame-conduit); }
  .slayer__name { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: -.01em; line-height: 1; font-size: 1.5rem; color: var(--frame-clearspan); margin-top: 6px; }
  .slayer__meta { font-family: var(--font-condensed); font-size: 14px; letter-spacing: .04em; color: var(--frame-galvanized); margin-top: 8px; }
  .slayer--frame .slayer__meta { color: var(--frame-coldroll); }
}

/* ---------------- PROTOCOL — velocity marquee + pillars ---------------- */
.proto { overflow: clip; }
.proto__marquee { white-space: nowrap; will-change: transform; padding: clamp(8px, 1vw, 16px) 0; }
.proto__marquee span {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(4rem, 11vw, 12rem); line-height: 1; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(243,244,245,.32);
  padding-right: .6em; display: inline-block;
}
.proto__marquee span.solid { color: var(--frame-conduit); -webkit-text-stroke: 0; }

.pillars {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line-1); border-right: 0; margin-top: clamp(48px, 6vw, 96px);
}
.pillar {
  position: relative; padding: clamp(28px, 3vw, 48px); border-right: 1px solid var(--line-1);
  display: flex; flex-direction: column; gap: 18px; min-height: clamp(300px, 30vw, 420px);
  overflow: hidden; isolation: isolate; background: var(--ink-950);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: background .4s var(--ease-standard);
}
.pillar:last-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
.pillar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink-800);
  transform: translateY(101%); transition: transform .45s var(--ease-standard);
}
.pillar:hover::before { transform: translateY(0); }
.pillar__num {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 4vw, 4rem);
  line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(99,157,205,.5);
  transition: color .35s var(--ease-standard);
}
.pillar:hover .pillar__num { color: var(--frame-conduit); -webkit-text-stroke: 1px var(--frame-conduit); }
.pillar h3 { margin-top: auto; }
.pillar p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--frame-galvanized); }
.pillar__ico { position: absolute; top: clamp(28px, 3vw, 48px); right: clamp(28px, 3vw, 48px); color: var(--frame-foundry); transition: color .35s, transform .35s var(--ease-standard); }
.pillar__ico .material-symbols-sharp { font-size: 26px; }
.pillar:hover .pillar__ico { color: var(--frame-conduit); transform: translateY(-3px); }
@media (max-width: 880px) { .pillars { grid-template-columns: 1fr; border-right: 1px solid var(--line-1); border-bottom: 0; } .pillar { border-right: 0; border-bottom: 1px solid var(--line-1); min-height: 0; } }

/* ---------------- 3.0 PROTOCOL — light-surface colour fix ---------------- */
/* bold runs in a lead default to a near-white colour (built for dark sections);
   on a light surface they vanish into the background — re-tint dark. */
.section--light .lead strong { color: var(--frame-ironworks); }