/* ============================================================
   Streamline Construction App showcase (/construction-app/).
   Variant A, "The Drawing Office": the page is drawn like the
   control schematic of a machine that already runs.
   Loads AFTER the base stylesheet; page classes are ca- scoped.
   No new fonts, no inline styles; motion on transform, opacity,
   and stroke-dashoffset only. Created by Alex Villarroel.
   ============================================================ */

/* ---- Hero: the drawing office ---- */
.ca-hero { position:relative; overflow:hidden; background:var(--navy-2); min-height:calc(100vh - 68px); min-height:calc(100svh - 68px); display:flex; flex-direction:column; }
.ca-hero-grid {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:linear-gradient(rgba(199,206,219,0.075) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(199,206,219,0.075) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(110% 100% at 78% 42%, #000 30%, transparent 78%);
  mask-image:radial-gradient(110% 100% at 78% 42%, #000 30%, transparent 78%);
}
.ca-super {
  position:absolute; z-index:2; right:-3%; top:4%; pointer-events:none; user-select:none;
  font-family:var(--display); font-weight:700; font-size:clamp(340px, 44vw, 660px); line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--border-blue); opacity:.5;
}
.ca-hero-inner {
  flex:1; width:100%; max-width:var(--maxw); margin:0 auto; padding:96px var(--gutter) 72px;
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:28px; align-items:center;
}
.ca-hero-content { position:relative; z-index:4; }
.ca-hero-fig { position:relative; z-index:3; min-width:0; display:flex; align-items:center; }
.ca-hero-flow { width:132%; max-width:none; height:auto; aspect-ratio:840/620; opacity:.85; }
.ca-pill { letter-spacing:.14em; }
.ca-hero .kicker { margin:26px 0 0; }
.ca-hero h1 { font-family:var(--display); font-weight:700; font-size:clamp(3rem, 6.5vw, 78px); line-height:.98; letter-spacing:-0.02em; color:#FFFFFF; margin:18px 0 0; }
.ca-hero h1 .accent { color:var(--blue-text); }
.ca-hero .ca-lead { font-size:17px; line-height:1.62; color:var(--text); max-width:540px; margin:24px 0 0; }
.ca-hero-cta { display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
.ca-hero-micro { margin-top:40px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--chrome); text-transform:uppercase; }
.ca-titleblock { position:relative; z-index:4; border-top:1px solid var(--border-soft); }
.ca-titleblock .wrap { padding:13px var(--gutter); display:flex; flex-wrap:wrap; gap:4px 14px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--faint); text-transform:uppercase; }
.ca-titleblock .tb-sep { color:var(--border-blue); }

/* ---- Lifecycle strip ---- */
.ca-strip { border-bottom:1px solid var(--border-soft); background:var(--navy); }
.ca-strip .wrap { padding:18px var(--gutter); display:flex; flex-wrap:wrap; gap:10px 22px; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#8b97b4; }
.ca-strip .mid { color:var(--blue-text); }

/* ---- Shared page bits ---- */
.ca-intro { max-width:480px; }
.ca-closing { margin:30px 0 0; font-size:16px; line-height:1.6; color:var(--text); border-left:2px solid var(--blue); padding-left:16px; max-width:760px; }
.ca-band { background:var(--navy-2); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }

/* ---- 01 / The problem ---- */
.ca-prob-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ca-arch-tag { display:inline-block; margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--steel); text-transform:uppercase; border:1px dashed var(--border-blue); border-radius:6px; padding:5px 10px; }
.ca-arch h3 { margin:20px 0 10px; }
.ca-arch p:last-child { margin-bottom:0; }

/* ---- 02 / The Flowline ---- */
.ca-flow-wrap {
  margin:44px 0 30px; padding:30px; border:1px solid var(--border-soft); border-radius:14px; background-color:var(--navy-2);
  background-image:linear-gradient(rgba(199,206,219,0.03) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(199,206,219,0.03) 1px, transparent 1px);
  background-size:29px 29px;
}
.ca-flow-svg, .ca-portal-svg { width:100%; height:auto; display:block; }

/* schematic vocabulary (all SVG styling class-based) */
.ca-node { fill:var(--surface); stroke:var(--border-blue); stroke-width:1.5; }
.ca-node-paid { stroke:var(--blue-text); }
.ca-line { fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; }
.ca-bus { fill:none; stroke:var(--blue); stroke-width:2.5; stroke-linecap:round; }
.ca-tapline, .ca-tapbox { fill:none; stroke:var(--steel); stroke-width:1.25; stroke-dasharray:5 6; }
.ca-junction { fill:var(--blue-text); stroke:none; }
.ca-fl-tag { font-family:var(--mono); font-size:10px; letter-spacing:.14em; fill:var(--faint); }
.ca-fl-lbl { font-family:var(--mono); font-size:13px; letter-spacing:.12em; fill:var(--text); text-anchor:middle; }
.ca-fl-lbl-paid { fill:var(--blue-text); }
.ca-tap-lbl { font-family:var(--mono); font-size:10px; letter-spacing:.1em; fill:var(--steel); text-anchor:middle; }
.ca-bus-lbl { font-family:var(--mono); font-size:10px; letter-spacing:.18em; fill:var(--faint); }
.ca-pulse { fill:none; stroke:var(--blue-text); stroke-width:2.5; stroke-linecap:round; opacity:0; }

/* mobile flowline: real semantic list (sr-only on wide screens) */
.ca-flow-mobile { position:relative; }
.ca-flow-list { list-style:none; margin:0; padding:0; position:relative; }
.ca-flow-list::before { content:""; position:absolute; left:19px; top:14px; bottom:14px; width:2px; border-radius:1px; background:var(--blue); }
.ca-flow-item { position:relative; margin:0 0 16px 48px; background:var(--surface); border:1px solid var(--border-blue); border-radius:6px; padding:12px 14px; }
.ca-flow-item:last-child { margin-bottom:0; }
.ca-flow-item::before { content:""; position:absolute; left:-33px; top:50%; margin-top:-4px; width:8px; height:8px; border-radius:50%; background:var(--blue-text); }
.ca-flow-item::after { content:""; position:absolute; left:-27px; top:50%; margin-top:-1px; width:27px; height:2px; background:var(--blue); }
.ca-flow-item-paid { border-color:var(--blue-text); }
.ca-fi-tag { display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--faint); margin-bottom:4px; }
.ca-fi-name { font-family:var(--mono); font-size:14px; letter-spacing:.12em; color:var(--text); }
.ca-flow-item-paid .ca-fi-name { color:var(--blue-text); }
.ca-fi-aux { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ca-fi-aux span { font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--steel); border:1px dashed var(--border-blue); border-radius:6px; padding:4px 8px; }
.ca-flow-dot { position:absolute; left:16px; top:14px; height:calc(100% - 28px); width:8px; pointer-events:none; opacity:0; }
.ca-flow-dot::after { content:""; position:absolute; bottom:0; left:0; width:8px; height:8px; border-radius:50%; background:var(--blue-text); }
@media (min-width:761px) {
  .ca-flow-list { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .ca-flow-dot { display:none; }
}
@media (max-width:760px) {
  .ca-flow-svg { display:none; }
  .ca-flow-wrap { padding:20px 18px; }
}

/* ---- 02 / spec-plate capability cards ---- */
.ca-plate { border-top:2px solid var(--blue); }
.ca-plate-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--faint); }
.ca-plate-pins { color:var(--border-blue); letter-spacing:.3em; }

/* ---- 03 / screens (real captures, full-size zoom links) ---- */
.ca-scr-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ca-scr { margin:0; }
.ca-scr-frame { position:relative; aspect-ratio:1600/862; background:var(--surface); border:1px solid var(--border-blue); border-radius:10px; overflow:hidden; }
.ca-scr-frame-split { aspect-ratio:2160/1102; }
.ca-scr-zoom { position:absolute; inset:0; display:flex; cursor:zoom-in; }
.ca-scr-zoom:focus-visible { outline:2px solid var(--blue-text); outline-offset:-2px; }
.ca-scr-zoom picture { display:block; flex:1 1 0; min-width:0; }
.ca-scr-zoom picture + picture { border-left:1px solid var(--border-blue); }
.ca-scr-img { display:block; width:100%; height:100%; object-fit:cover; transition:filter .18s ease; }
.ca-scr-zoom:hover .ca-scr-img { filter:brightness(1.08); }
.ca-scr-cap { margin-top:10px; font-size:12.5px; line-height:1.55; color:var(--muted); }
.ca-scr-id { display:block; margin-bottom:2px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--blue-text); }
.ca-scr-note { margin:18px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.06em; line-height:1.6; color:var(--steel); }

/* ---- 04 / portals ---- */
.ca-portal-wrap { margin:40px 0 26px; }
.ca-portal-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ca-portal-grid h3 { margin-top:0; }

/* ---- 05 / the paper trail: schedule of records ---- */
.ca-sched { margin-top:8px; }
.ca-sched-head { display:flex; align-items:center; gap:16px; padding-bottom:14px; border-bottom:1px solid var(--border-soft); font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--faint); text-transform:uppercase; }
.ca-sched-list { list-style:none; margin:0; padding:0; }
.ca-sched-row { display:grid; grid-template-columns:minmax(200px,290px) auto 1fr; gap:4px 16px; align-items:baseline; padding:14px 0; border-bottom:1px dashed var(--border-soft); }
.ca-sched-term { font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; color:var(--blue-text); }
.ca-sched-sep { font-family:var(--mono); font-size:12px; color:var(--steel); }
.ca-sched-line { font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; line-height:1.6; color:var(--muted); }

/* ---- 06 / the document engine: doc-type band ---- */
.ca-docband { margin:40px 0 0; padding:20px 0; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); display:flex; flex-wrap:wrap; gap:10px 20px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#8b97b4; }
.ca-docband .mid { color:var(--blue-text); }

/* ---- 07 / the AI layer: the tap on the bus ---- */
.ca-ai-body { font-size:15.5px; line-height:1.68; color:var(--muted); max-width:820px; margin:0; }
.ca-ai-wrap { margin:44px 0 34px; }
.ca-ai-svg { width:100%; height:auto; display:block; }
.ca-node-ai { stroke:var(--blue-text); stroke-dasharray:6 5; }
.ca-ai-lbl { fill:var(--blue-text); font-size:15px; letter-spacing:.3em; }
.ca-term { border:1px solid var(--border-blue); border-radius:14px; background:var(--navy-2); padding:26px 30px; }
.ca-term-head { display:flex; align-items:center; gap:16px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--border-soft); font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--faint); text-transform:uppercase; }
.ca-term-line { margin:0; padding:7px 0; font-family:var(--mono); font-size:13px; letter-spacing:.04em; line-height:1.6; color:var(--text); }
.ca-term-ps { color:var(--blue-text); margin-right:12px; }
.ca-term-line .ca-cursor { margin-left:10px; vertical-align:text-bottom; }

/* ---- break band: on the phone ---- */
.ca-phone { border-bottom:1px solid var(--border-soft); background:var(--navy); }
.ca-phone .wrap { padding:40px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:22px 40px; flex-wrap:wrap; }
.ca-phone-lines { max-width:620px; }
.ca-phone-line { margin:0; font-size:16.5px; line-height:1.6; color:var(--text); }
.ca-phone-line + .ca-phone-line { margin-top:6px; font-size:15px; color:var(--muted); }
.ca-phone-chips { display:flex; flex-wrap:wrap; gap:10px; }
.ca-phone-chips span { font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--steel); text-transform:uppercase; border:1px dashed var(--border-blue); border-radius:6px; padding:6px 12px; }

/* ---- 08 / commissioning readout ---- */
.ca-readout { border:1px solid var(--border-blue); border-radius:14px; background:var(--surface); padding:34px; }
.ca-rd-head { display:flex; align-items:center; gap:16px; padding-bottom:16px; margin-bottom:28px; border-bottom:1px solid var(--border-soft); font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--faint); text-transform:uppercase; }
.ca-rd-lead { flex:1; min-width:24px; height:0; border-bottom:2px dotted var(--border-blue); align-self:center; }
.ca-rd-grid { display:grid; grid-template-columns:1fr 1fr; }
.ca-ledger { min-width:0; }
.ca-rd-grid .ca-ledger:first-child { padding-right:34px; }
.ca-rd-grid .ca-ledger + .ca-ledger { border-left:1px solid var(--border-soft); padding-left:34px; }
.ca-rd-label { display:flex; align-items:center; gap:10px; margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; }
.ca-rd-run { color:var(--blue-text); }
.ca-rd-build { color:var(--chrome); }
.ca-dot { width:7px; height:7px; border-radius:50%; background:var(--blue-text); flex:none; }
.ca-dot-hollow { background:transparent; border:1px solid var(--chrome); }
.ca-cursor { display:inline-block; width:9px; height:15px; background:var(--chrome); flex:none; }
.ca-ledger h3 { font-family:var(--display); font-weight:700; font-size:21px; color:#FFFFFF; margin:18px 0 10px; }
.ca-rd-copy { font-size:14.5px; line-height:1.62; color:var(--muted); margin:0; }

/* ---- Straight answers ---- */
.ca-qa { border-top:1px solid var(--border-soft); margin-top:26px; }
.ca-qa-row { display:grid; grid-template-columns:220px 1fr; gap:16px 28px; padding:24px 0; border-bottom:1px solid var(--border-soft); }
.ca-qa-q { font-family:var(--mono); font-size:13px; letter-spacing:.16em; color:var(--blue-text); padding-top:2px; }
.ca-qa-a { margin:0; font-size:15px; line-height:1.62; color:var(--muted); max-width:660px; }

/* ---- CTA moment ---- */
.ca-cta { background:radial-gradient(120% 120% at 50% 0%, var(--surface-hi) 0%, var(--navy) 60%); border-top:1px solid var(--border-soft); }
.ca-cta-inner { max-width:880px; margin:0 auto; padding:96px var(--gutter); text-align:center; }
.ca-cta .brandlogo { width:min(380px, 74%); height:auto; margin:0 auto 34px; filter:drop-shadow(0 10px 30px rgba(0,0,0,0.45)); }
.ca-cta h2 { font-family:var(--display); font-weight:700; font-size:42px; line-height:1.06; letter-spacing:-0.02em; color:#FFFFFF; margin:0 0 18px; }
.ca-lines { font-size:17px; line-height:1.6; color:var(--muted); max-width:600px; margin:0 auto 42px; }
.ca-ladder { display:grid; gap:26px; max-width:520px; margin:0 auto; }
.ca-rung-note { margin:10px auto 0; font-size:13px; line-height:1.55; color:var(--faint); max-width:420px; }

/* ---- Motion (all gated; JS-off and reduced-motion both render
        everything visible and fully drawn) ---- */
@keyframes ca-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes ca-pulse {
  0% { stroke-dashoffset:100; opacity:0; }
  6% { opacity:.9; }
  94% { opacity:.9; }
  100% { stroke-dashoffset:0; opacity:0; }
}
@keyframes ca-fade { from { opacity:0; } to { opacity:1; } }
@keyframes ca-led { 0%, 100% { opacity:1; } 50% { opacity:.22; } }
@keyframes ca-blink { from { opacity:1; } to { opacity:0; } }
@keyframes ca-rail {
  0% { transform:translateY(-100%); opacity:0; }
  8% { opacity:1; }
  92% { opacity:1; }
  100% { transform:translateY(0); opacity:0; }
}

@media (prefers-reduced-motion: no-preference) {
  .ca-pill .led { animation:ca-led 2.4s ease-in-out infinite; }
  .ca-rd-run .ca-dot { animation:ca-led 2.4s ease-in-out infinite; }
  .ca-cursor { animation:ca-blink 1.1s steps(2, jump-none) infinite; }

  /* hero schematic: line-draw on load (~1.6s), then looping pulses */
  .ca-hero-flow .draw { stroke-dasharray:1; animation:ca-draw .7s cubic-bezier(.55,0,.35,1) both; }
  .ca-hero-flow .hd2 { animation-delay:.16s; }
  .ca-hero-flow .hd3 { animation-delay:.32s; }
  .ca-hero-flow .hd4 { animation-delay:.5s; }
  .ca-hero-flow .hd5 { animation-delay:.68s; }
  .ca-hero-flow .hd6 { animation-delay:.84s; }
  .ca-hero-flow .hd7 { animation-delay:1s; }
  .ca-hero-flow .hlbl { animation:ca-fade .6s ease 1.15s both; }
  .ca-hero-flow .ca-pulse { stroke-dasharray:3 97; animation:ca-pulse 3.5s linear infinite both; }
  .ca-hero-flow .hp1 { animation-delay:2.1s; }
  .ca-hero-flow .hp2 { animation-delay:3.85s; }

  /* section schematics: draw on reveal (JS-gated, once) */
  body.js .ca-io .draw { stroke-dasharray:1; stroke-dashoffset:1; }
  body.js .ca-io .lbl, body.js .ca-io .ca-tap { opacity:0; }
  body.js .ca-io.in-view .draw { animation:ca-draw .8s cubic-bezier(.55,0,.35,1) both; }
  body.js .ca-io.in-view .d2 { animation-delay:.18s; }
  body.js .ca-io.in-view .d3 { animation-delay:.36s; }
  body.js .ca-io.in-view .d4 { animation-delay:.54s; }
  body.js .ca-io.in-view .d5 { animation-delay:.7s; }
  body.js .ca-io.in-view .lbl { animation:ca-fade .5s ease .85s both; }
  body.js .ca-io.in-view .ca-tap { animation:ca-fade .6s ease 1s both; }
  .ca-flow-svg .ca-pulse, .ca-portal-svg .ca-pulse, .ca-ai-svg .ca-pulse { stroke-dasharray:3 97; animation:ca-pulse 3.5s linear infinite both; }
  .ca-flow-svg .p2 { animation-delay:1.75s; }
  .ca-flow-svg .p3 { animation-delay:.9s; }
  .ca-portal-svg .pp2 { animation-delay:1.6s; }
  .ca-ai-svg .ap2 { animation-delay:1.75s; }
  body.js .ca-io:not(.in-view) .ca-pulse { animation-play-state:paused; }

  /* scroll reveals (JS-gated; JS-off renders everything visible) */
  body.js .reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
  body.js .reveal.in-view { opacity:1; transform:none; }
  body.js .reveal.rd2 { transition-delay:.07s; }
  body.js .reveal.rd3 { transition-delay:.14s; }
  body.js .reveal.rd4 { transition-delay:.21s; }
}
@media (prefers-reduced-motion: no-preference) and (max-width:760px) {
  .ca-flow-dot { animation:ca-rail 6s linear 1s infinite both; }
}

/* ---- Responsive ---- */
@media (max-width:1100px) {
  .ca-hero-flow { width:118%; }
}
@media (max-width:980px) {
  .ca-hero-inner { grid-template-columns:1fr; }
  .ca-hero-fig { display:none; }
  .ca-super { font-size:clamp(240px, 58vw, 430px); top:auto; bottom:6%; right:-8%; }
  .ca-scr-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:860px) {
  .ca-rd-grid { grid-template-columns:1fr; }
  .ca-rd-grid .ca-ledger:first-child { padding-right:0; padding-bottom:28px; }
  .ca-rd-grid .ca-ledger + .ca-ledger { border-left:0; padding-left:0; border-top:1px solid var(--border-soft); padding-top:28px; }
}
@media (max-width:760px) {
  .ca-hero-inner { padding:80px var(--gutter) 64px; }
  .ca-prob-grid { grid-template-columns:1fr; }
  .ca-portal-grid { grid-template-columns:1fr; }
  .ca-qa-row { grid-template-columns:1fr; gap:8px; }
  .ca-readout { padding:24px; }
  .ca-sched-row { grid-template-columns:1fr; }
  .ca-sched-sep { display:none; }
  .ca-term { padding:20px 18px; }
  .ca-cta-inner { padding:72px var(--gutter); }
  .ca-cta h2 { font-size:clamp(1.9rem, 8vw, 2.6rem); }
}
@media (max-width:620px) {
  .ca-scr-grid { grid-template-columns:1fr; }
}