:root{
  --blue:#003d88;--deep:#002b63;--orange:#FCBB72;--orange-ink:#b4610f;--ink:#0b1f3f;--muted:#52607a;
  --paper:#f4f7fb;--card:#ffffff;--rule:#d9e1ec;--tint:#e8eef7;
  --good:#1f7a4d;--bad:#b42318;
  --on-blue:#ffffff;--soft:rgba(255,255,255,.84);--line:rgba(255,255,255,.18);
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Actor',system-ui,'Segoe UI',Arial,sans-serif;font-size:17px;line-height:1.55}
.serif{font-family:'Source Serif 4',Georgia,serif}
.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.wrap{max-width:1280px;margin:0 auto;padding-inline:clamp(16px,5vw,64px)}
a{color:inherit}
.btn{display:inline-block;background:var(--orange);color:var(--ink);text-decoration:none;font-weight:600;padding:15px 26px;border-radius:4px 18px 4px 4px;border:0;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:#ffd29c}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.note{background:var(--ink);color:#fff;text-align:center;font-size:13px;padding:7px 16px}

/* header: floating bar (stays blue: the logo is white) */
header{position:sticky;top:12px;z-index:50;padding-inline:clamp(12px,3vw,40px);margin-top:12px;pointer-events:none}
header .bar{pointer-events:auto;max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px;padding:0 10px 0 22px;
  background:rgba(0,61,136,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;border-radius:14px 30px 14px 14px;
  box-shadow:0 10px 30px rgba(0,30,70,.18);transition:height .3s,box-shadow .3s,background .3s}
header.scrolled .bar{height:60px;box-shadow:0 14px 34px rgba(0,30,70,.28);background:rgba(0,48,110,.92)}
header img{height:44px;width:auto;transition:height .3s}
header.scrolled img{height:36px}
nav{display:flex;align-items:center;gap:6px}
nav a{text-decoration:none;letter-spacing:.02em;font-size:16px}
nav a:not(.btn){position:relative;padding:9px 14px;border-radius:999px;color:rgba(255,255,255,.88);transition:background .2s,color .2s}
nav a:not(.btn):hover{background:rgba(255,255,255,.12);color:#fff}
nav a.active{color:#fff}
nav a.active::after{content:"";position:absolute;left:50%;bottom:3px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--orange)}
nav .btn{padding:11px 20px;margin-left:10px;border-radius:10px 20px 10px 10px}
.menu-toggle{display:none;font:inherit;background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:10px;width:44px;height:44px;cursor:pointer}
@media (max-width:860px){
  nav a:not(.btn){display:none}
  .menu-toggle{display:grid;place-items:center}
  header.open nav{position:absolute;top:calc(100% + 8px);left:clamp(12px,3vw,40px);right:clamp(12px,3vw,40px);flex-direction:column;align-items:stretch;background:var(--blue);border-radius:14px;padding:10px;box-shadow:0 14px 34px rgba(0,30,70,.28)}
  header.open nav a:not(.btn){display:block}
  header.open nav .btn{margin:6px 0 0;text-align:center}
  header .bar{position:relative}
}
.hero .wrap{padding-top:clamp(28px,4vw,56px)}

/* ---------- HERO (light) ---------- */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,580px);gap:clamp(32px,4vw,56px);align-items:center;padding-block:clamp(40px,6vw,80px)}
.hero .left{display:grid;gap:24px}
.eyebrow{color:var(--blue)}
.hero h1{margin:0;font-weight:400;font-size:clamp(42px,4.8vw,66px);line-height:1.04;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.hero h1 em{font-style:italic;font-weight:600;color:var(--blue);background:linear-gradient(transparent 68%,rgba(252,187,114,.75) 68%,rgba(252,187,114,.75) 92%,transparent 92%);padding:0 .08em}
.hero .lead{margin:0;font-size:clamp(17px,1.5vw,20px);color:#34425a;max-width:540px}
.ctas{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.ghost{text-decoration:none;color:var(--blue);border-bottom:1px solid rgba(0,61,136,.4);padding:6px 2px}

.wall{position:relative}
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.tile{position:relative;aspect-ratio:1/1.02;background:var(--card);border:1px solid var(--rule);border-radius:3px 12px 3px 3px;padding:8px 8px 6px;display:flex;flex-direction:column;gap:2px;overflow:hidden;cursor:pointer;opacity:.62;transition:opacity .5s,border-color .3s;font:inherit;text-align:left;color:inherit}
.tile:hover{opacity:1;border-color:var(--blue)}
.tile .d{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .v{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:clamp(14px,1.6vw,20px);line-height:1.1;color:var(--blue)}
.tile svg{margin-top:auto;width:100%;height:34%}
.tile.away{opacity:0!important}
.feature{position:absolute;left:9%;right:9%;top:6%;background:var(--card);border-radius:4px 32px 4px 4px;padding:clamp(16px,2.2vw,26px);display:grid;gap:12px;box-shadow:0 30px 60px rgba(11,31,63,.22),0 0 0 8px rgba(252,187,114,.35);transform-origin:0 0;z-index:2}
.feature .top{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px}
.feature .k{font-size:clamp(17px,1.7vw,21px);color:var(--ink);line-height:1.25}
.feature .big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.feature .big b{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:clamp(46px,5.4vw,72px);line-height:1;color:var(--blue)}
.feature .big span{font-size:18px;color:#34425a}
.feature .chart{height:70px}
.feature .chart svg{width:100%;height:100%;overflow:visible}
.feature .act{display:flex;gap:10px;align-items:center;background:#fff4e6;border-radius:4px 14px 4px 4px;padding:10px 14px;font-size:15px}
.feature .act i{width:10px;height:10px;border-radius:50%;background:#e0892f;flex-shrink:0}
.feature .act.ok{background:#e8f4ee}.feature .act.ok i{background:var(--good)}
.feature-inner{display:grid;gap:12px}
.cap{justify-content:flex-end!important;margin:10px 0 0;color:var(--muted);text-transform:none;letter-spacing:0;font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cap button{font:inherit;background:none;border:0;color:var(--blue);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.promises{border-top:1px solid var(--rule);background:var(--card)}
.promises .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-block:28px}
.promises p{margin:6px 0 0;color:#34425a}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.promises .wrap{grid-template-columns:1fr;gap:18px}.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.tile:nth-child(n+17){display:none}.feature{left:4%;right:4%;top:10%}}

/* ---------- BLOCKS (blue) ---------- */
.blocks{background-color:var(--blue);color:#fff;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:24px 24px}
.blocks .wrap{padding-block:clamp(48px,7vw,88px);display:grid;gap:32px}
.b-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.b-head h2{margin:10px 0 0;font-weight:400;font-size:clamp(34px,4.2vw,56px);line-height:1.05}
.b-head h2 em{color:var(--orange)}
.b-head p{margin:0;max-width:470px;color:var(--soft)}
.b-head .eyebrow{color:var(--orange)}
.b-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:40px;align-items:start}
.panel{border:1.5px solid rgba(255,255,255,.35);border-radius:4px 28px 4px 4px;background:rgba(0,25,60,.45);padding:24px;display:grid;gap:18px}
.panel h3{margin:0;font-weight:600;font-size:24px;line-height:1.15}
.step{color:var(--orange)}
.q{display:grid;gap:8px}
.q p{margin:0;font-size:16px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts button,.presets button{font:inherit;font-size:14px;cursor:pointer;padding:8px 14px;border-radius:4px 12px 4px 4px;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff}
.opts button[aria-pressed="true"],.presets button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.or{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.6)}
.or::before,.or::after{content:"";flex:1;border-top:1px solid rgba(255,255,255,.2)}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.list{display:grid;gap:8px}
.blk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;text-align:left;font:inherit;color:#fff;background:transparent;border:1.5px dashed rgba(255,255,255,.35);border-radius:3px 16px 3px 3px;padding:10px 14px;cursor:pointer;transition:background .3s,border-color .3s}
.blk .n{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:30px;line-height:1;color:rgba(255,255,255,.4);width:24px;text-align:center}
.blk b{display:block;font-family:'Source Serif 4',Georgia,serif;font-size:19px;font-weight:600}
.blk small{display:block;color:rgba(255,255,255,.7);font-size:13.5px;line-height:1.35}
.sw{width:40px;height:22px;border-radius:11px;background:rgba(255,255,255,.2);position:relative;transition:background .3s}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .3s}
.blk[aria-pressed="true"]{border:1.5px solid rgba(255,255,255,.85);background:rgba(252,187,114,.10)}
.blk[aria-pressed="true"] .n{color:var(--orange)}
.blk[aria-pressed="true"] .sw{background:var(--orange)}
.blk[aria-pressed="true"] .sw::after{transform:translateX(18px)}

.stage{display:grid;justify-items:center;gap:12px;padding:10px 0 4px}
#bricks{width:100%;max-width:500px;height:auto;overflow:visible;filter:drop-shadow(0 18px 24px rgba(0,10,30,.35))}
.part{cursor:pointer}
.part:hover{filter:brightness(1.08)}
.ghost rect{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.4);stroke-dasharray:5 4}
.ghost:hover rect{stroke:#FCBB72}
.drop{animation:drop .5s cubic-bezier(.3,1.35,.5,1) both}
@keyframes drop{from{transform:translateY(-70px);opacity:0}}
.stage-cap{margin:0;color:var(--soft);text-align:center;min-height:1.6em}
.stage-cap b{color:var(--orange);font-weight:400}
.mini{position:relative;width:30px;height:18px;margin-top:6px;border-radius:2px;background:var(--c);box-shadow:inset 0 -4px 0 var(--lo)}
.mini::before,.mini::after{content:"";position:absolute;top:-5px;width:9px;height:5px;border-radius:1.5px 1.5px 0 0;background:var(--c)}
.mini::before{left:4px}.mini::after{right:4px}
/* (old dashboard styles, unused) */
.dash{background:#fff;color:var(--ink);border-radius:6px 28px 6px 6px;overflow:hidden;box-shadow:0 30px 60px rgba(0,15,40,.35)}
.dash-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:var(--tint);border-bottom:1px solid var(--rule);flex-wrap:wrap}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#c3cddc}
.tool{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.tool span{padding:3px 9px;border-radius:3px 9px 3px 3px;border:1px solid var(--rule);background:#fff}
.tool span.pick{background:var(--blue);color:#fff;border-color:var(--blue)}
.dash-body{padding:18px;display:grid;gap:14px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kpi{border:1px solid var(--rule);border-radius:3px 12px 3px 3px;padding:10px 12px;display:grid;gap:4px;min-height:78px}
.kpi .kn{font-size:12.5px;color:var(--muted);line-height:1.25}
.kpi .kv{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:24px;line-height:1.05;color:var(--blue);font-variant-numeric:tabular-nums}
.kpi .kv.err{color:var(--bad);font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:500}
.ph{display:block;height:9px;border-radius:4px;background:#e3e9f2}
.charts{display:grid;grid-template-columns:1.6fr 1fr;gap:10px}
.chartbox{border:1px solid var(--rule);border-radius:3px 12px 3px 3px;padding:10px 12px;height:150px;display:flex;flex-direction:column;gap:6px;position:relative}
.chartbox .t{font-size:12.5px;color:var(--muted)}
.chartbox svg{flex:1;width:100%}
.chartbox.empty{border-style:dashed;align-items:center;justify-content:center;color:#8a96aa;font-size:13px}
.line{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.4s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.barr{transform-origin:bottom;transform-box:fill-box;animation:grow .9s ease both}
@keyframes grow{from{transform:scaleY(0)}}
.dash-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--muted)}
.users{display:flex;align-items:center;gap:8px}
.av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;background:var(--blue);position:relative}
.av::after{content:"";position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;background:var(--good);border:2px solid #fff}
.stamp{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:3px 10px 3px 3px;background:#e8f4ee;color:var(--good);font-weight:600}
.stamp.off{background:#f3f4f6;color:#8a96aa;font-weight:400}
.tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;color:var(--orange-ink);background:#fff4e6;border-radius:2px;padding:1px 5px;margin-right:6px}
.layer{animation:fadein .5s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}}
.result{display:grid;gap:10px;margin-top:18px}
.result h3{margin:0;font-weight:600;font-size:28px}
.result p{margin:0;color:var(--soft)}
.result ul{margin:0;padding-left:20px;display:grid;gap:4px;columns:2}
.domain-line{border-top:1px solid rgba(255,255,255,.2);padding-top:18px;color:var(--soft);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.domain-line b{color:#fff;font-weight:400}
@media (max-width:1020px){.b-body{grid-template-columns:1fr}}
@media (max-width:560px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.charts{grid-template-columns:1fr}.result ul{columns:1}}

/* ---- v4: varied KPI tiles ---- */
.tile .viz{margin-top:auto;height:40%;display:block}
.tile .viz svg{width:100%;height:100%;display:block}
.tile.t-round .viz,.tile.t-grid .viz{flex:1;height:auto;min-height:0;margin-top:4px}
.feature .chart{height:92px}
.feature .chart svg{width:100%;height:100%;overflow:visible;display:block}
.fbody{display:grid;gap:10px}
.fbody.side{grid-template-columns:1fr 130px;align-items:center}
.fbody.side .chart{height:96px}
/* ---- v4: blocks section, one screen ---- */
.blocks .wrap{padding-block:clamp(36px,5vw,56px);gap:24px}
.b-head h2{font-size:clamp(32px,3.6vw,48px)}
.b-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,290px);gap:clamp(24px,3vw,44px);align-items:start}
.quiz{display:grid;gap:12px}
.step{color:var(--orange)}
.quiz .q{display:grid;gap:6px}
.quiz .q p{margin:0;font-size:15px;line-height:1.35}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opts button,.presets button{font:inherit;font-size:13.5px;cursor:pointer;padding:6px 12px;border-radius:3px 10px 3px 3px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff}
.opts button[aria-pressed="true"],.presets button[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--blue)}
.presets{display:flex;flex-wrap:wrap;gap:6px}
.fig{display:grid;gap:18px;justify-items:center}
#fourteen{width:100%;max-width:400px;height:auto;overflow:visible}
.seg{cursor:pointer}
.seg polygon,.seg rect,.seg path{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.45);stroke-width:1.2;stroke-dasharray:5 4;transition:fill .35s,stroke .2s}
.seg text{font-family:'IBM Plex Mono',monospace;font-size:11px;fill:rgba(255,255,255,.55);pointer-events:none}
.seg.on polygon,.seg.on rect,.seg.on path{fill:#fff;stroke:#fff;stroke-dasharray:none}
.seg.on text{fill:var(--blue);font-weight:500}
.seg:hover polygon,.seg:hover rect,.seg:hover path{stroke:var(--orange);stroke-width:2}
.seg.pop polygon,.seg.pop rect,.seg.pop path{animation:pop .9s ease}
@keyframes pop{0%{fill:#FCBB72;stroke:#FCBB72}100%{fill:#fff}}
.legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.lg{display:flex;gap:8px;align-items:flex-start;text-align:left;font:inherit;color:#fff;background:transparent;border:1px dashed rgba(255,255,255,.4);border-radius:3px 10px 3px 3px;padding:7px 10px;cursor:pointer}
.lg .ln{font-family:'IBM Plex Mono',monospace;font-size:11px;padding-top:2px;opacity:.7}
.lg b{display:block;font-weight:600;font-size:14px;line-height:1.2}
.lg small{display:block;font-size:12px;opacity:.72;line-height:1.3}
.lg[aria-pressed="true"]{background:#fff;color:var(--blue);border:1px solid #fff}
.result{display:grid;gap:10px;margin:0;border-left:1px solid rgba(255,255,255,.2);padding-left:clamp(20px,2.4vw,32px)}
.result h3{margin:0;font-weight:600;font-size:26px;line-height:1.15}
.result p{margin:0;color:var(--soft);font-size:15.5px}
.result ul{margin:0;padding-left:18px;display:grid;gap:4px;columns:1;font-size:15px}
.result .cap14{color:var(--orange);font-size:14.5px}
.result .btn{justify-self:start;margin-top:4px;padding:12px 20px}
@media (max-width:1100px){.b-grid{grid-template-columns:1fr 1fr}.fig{grid-column:1/-1;grid-row:1}.result{border-left:0;padding-left:0}}
@media (max-width:680px){.b-grid{grid-template-columns:1fr}.legend{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- v5: building + questions ---- */
.b-head{display:block}
.bg2{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.quiz{gap:16px}
.quiz .q p{font-size:16px}
.quiz .btn{justify-self:start;margin-top:10px;padding:12px 22px}
.bldg{display:flex;flex-direction:column;max-width:640px;width:100%;justify-self:end}
.roof2{height:16px;border:1.5px solid rgba(255,255,255,.6);border-bottom:none;border-radius:0 26px 0 0}
.floors2{display:flex;flex-direction:column}
.floor2{height:62px;margin-top:-1.5px;display:flex;align-items:center;gap:18px;padding:0 20px;border:1.5px dashed rgba(255,255,255,.4);background:transparent;color:#fff;font:inherit;text-align:left;cursor:pointer;transition:background .35s,border-color .35s}
.floor2 .lv{font-family:'IBM Plex Mono',monospace;font-size:12px;border:1px solid currentColor;padding:3px 6px;border-radius:2px;color:rgba(255,255,255,.55)}
.floor2 .nm{flex:1;font-family:'Source Serif 4',Georgia,serif;font-size:22px;color:rgba(255,255,255,.7);transition:color .35s}
.win{display:flex;gap:8px}
.win i{width:18px;height:26px;border-radius:2px 8px 2px 2px;border:1px solid rgba(255,255,255,.35);transition:background .4s,box-shadow .4s,border-color .4s}
.floor2[aria-pressed="true"]{border:1.5px solid rgba(255,255,255,.9);background:rgba(252,187,114,.08)}
.floor2[aria-pressed="true"] .lv{color:var(--orange)}
.floor2[aria-pressed="true"] .nm{color:#fff}
.floor2[aria-pressed="true"] .win i{background:var(--orange);border-color:var(--orange);box-shadow:0 0 14px rgba(252,187,114,.65)}
.floor2:hover{border-color:var(--orange)}
.ground2{height:30px;border-top:2px solid #fff;margin-top:-1px;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 1.5px,transparent 1.5px 12px)}
@media (max-width:900px){.bg2{grid-template-columns:1fr}.bldg{justify-self:stretch}}
@media (max-width:560px){.win{display:none}.floor2 .nm{font-size:19px}}

/* ---- v6: building + crane + selection summary ---- */
.bg3{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr) minmax(0,310px);gap:clamp(24px,3.5vw,52px);align-items:start}
.site{--c:rgba(255,255,255,.45);position:relative;display:flex;gap:14px;padding-top:58px;max-width:600px;width:100%;justify-self:center}
.site.crane-on{--c:#FCBB72}
.crane{position:relative;flex:none;width:58px;margin-top:-58px;border:0;border-left:2px solid var(--c);border-right:2px solid var(--c);cursor:pointer;font:inherit;color:#fff;
  background:repeating-linear-gradient(45deg,transparent 0 16px,var(--c) 16px 17.5px),repeating-linear-gradient(-45deg,transparent 0 16px,var(--c) 16px 17.5px);
  display:flex;align-items:center;justify-content:center;transition:border-color .35s;opacity:.9}
.crane span{writing-mode:vertical-rl;transform:rotate(180deg);background:var(--blue);padding:12px 5px;font-family:'Source Serif 4',Georgia,serif;font-size:19px;color:rgba(255,255,255,.75);border:1px dashed rgba(255,255,255,.45);border-radius:2px}
.crane[aria-pressed="true"] span{background:#FCBB72;color:var(--ink);border:1px solid #FCBB72}
.crane:hover span{border-color:#FCBB72}
.jib{position:absolute;left:-26px;top:0;width:78%;height:14px;border-top:2px solid var(--c);border-bottom:2px solid var(--c);
  background:repeating-linear-gradient(60deg,transparent 0 12px,var(--c) 12px 13.5px);pointer-events:none}
.jib::before{content:"";position:absolute;left:0;top:-2px;width:22px;height:24px;background:var(--c);border-radius:2px}
.hook{position:absolute;left:62%;top:14px;width:2px;height:40px;background:var(--c);pointer-events:none}
.hook::after{content:"";position:absolute;left:-6px;bottom:-6px;width:14px;height:10px;border:2px solid var(--c);border-top:0;border-radius:0 0 8px 8px}
.bldg3{flex:1;display:flex;flex-direction:column;min-width:0}
.floor2 .lv{min-width:30px;text-align:center}
.result{display:grid;gap:10px;border-left:1px solid rgba(255,255,255,.2);padding-left:clamp(20px,2.4vw,32px)}
.result h3{margin:0;font-weight:600;font-size:26px;line-height:1.15}
.result p{margin:0;color:var(--soft);font-size:15.5px}
.result ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:15px}
.result .btn{justify-self:start;margin-top:6px;padding:12px 20px;white-space:nowrap}
@media (max-width:1120px){.bg3{grid-template-columns:1fr 1fr}.site{grid-column:1/-1;grid-row:1}}
@media (max-width:700px){.bg3{grid-template-columns:1fr}.result{border-left:0;padding-left:0}.crane{width:46px}.crane span{font-size:16px}}

/* ---- case studies (light) ---- */
.cases .wrap{padding-block:clamp(40px,5vw,64px);display:grid;gap:24px}
.c-head h2{margin:8px 0 0;font-weight:400;font-size:clamp(32px,3.6vw,48px);line-height:1.05;color:var(--ink)}
.c-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.c-list{display:grid;gap:4px;border-left:1px solid var(--rule)}
.c-item{display:grid;gap:2px;text-align:left;font:inherit;color:var(--ink);background:transparent;border:0;border-left:3px solid transparent;margin-left:-2px;padding:10px 14px;cursor:pointer;border-radius:0 8px 8px 0}
.c-item .mono{font-size:11px;color:var(--muted)}
.c-item b{font-weight:400;font-size:16.5px;line-height:1.3}
.c-item:hover{background:var(--tint)}
.c-item[aria-selected="true"]{border-left-color:var(--blue);background:#fff}
.c-item[aria-selected="true"] b{color:var(--blue);font-weight:600}
.c-card{background:#fff;border:1px solid var(--rule);border-radius:4px 32px 4px 4px;padding:clamp(20px,2.4vw,28px);display:grid;gap:18px;box-shadow:0 20px 40px rgba(11,31,63,.07)}
.c-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start}
@media (max-width:640px){.c-top{grid-template-columns:1fr}}
.c-ind{color:var(--blue)}
.c-top h3{margin:6px 0 0;font-weight:600;font-size:clamp(24px,2.4vw,32px);line-height:1.15;color:var(--ink)}
.c-result{display:grid;gap:2px;border:1.5px dashed #e0892f;background:#fff8ef;border-radius:3px 14px 3px 3px;padding:10px 16px;min-width:200px}
.c-result b{font-family:'Source Serif 4',Georgia,serif;font-size:30px;line-height:1.1;color:#b4610f}
.c-result span{font-size:13px;color:#8a5a22}
.c-story{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid var(--rule);padding-top:20px}
.c-story .mono{color:var(--muted);font-size:11px}
.c-story p{margin:8px 0 0;font-size:16px;line-height:1.5;color:#26334a}
.c-story div:last-child p{color:var(--ink)}
.c-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;border-top:1px solid var(--rule);padding-top:16px}
.c-floors{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.c-floors .mono{font-size:11px;color:var(--muted);margin-right:4px}
.fl{font-size:12.5px;padding:3px 8px;border:1px dashed #b9c5d6;border-radius:2px 8px 2px 2px;color:#8a96aa}
.fl.on{border:1px solid var(--blue);background:var(--blue);color:#fff}
.c-tags{display:flex;flex-wrap:wrap;gap:6px}
.c-tags span{font-size:12.5px;padding:3px 9px;background:var(--tint);border-radius:2px 8px 2px 2px;color:#34425a}
@media (max-width:900px){.c-grid{grid-template-columns:1fr}.c-list{grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);overflow-x:auto;border-left:0;border-bottom:1px solid var(--rule);padding-bottom:6px}.c-item{border-left:0;border-bottom:3px solid transparent;margin:0;border-radius:6px 6px 0 0}.c-item[aria-selected="true"]{border-bottom-color:var(--blue)}.c-story{grid-template-columns:1fr;gap:14px}}

/* ---- case studies v2: project x floor matrix ---- */
.c-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.c-hint{margin:0;color:var(--muted);font-size:14.5px;max-width:340px}
.c-grid2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.matrix{background:#fff;border:1px solid var(--rule);border-radius:4px 24px 4px 4px;overflow:hidden}
.mx-head,.mx-row{display:grid;grid-template-columns:minmax(0,1fr) repeat(6,56px);align-items:center}
.mx-head{border-bottom:1px solid var(--rule);background:var(--tint)}
.mx-head .mx-p{padding:10px 16px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mx-f{font:inherit;font-size:11.5px;line-height:1.2;color:#34425a;background:transparent;border:0;border-left:1px solid var(--rule);padding:8px 2px;cursor:pointer;display:grid;justify-items:center;gap:1px}
.mx-f .mono{font-size:10px;color:var(--muted);letter-spacing:.04em}
.mx-f:hover{background:#dbe4f1}
.mx-f[aria-pressed="true"]{background:var(--blue);color:#fff}
.mx-f[aria-pressed="true"] .mono{color:var(--orange)}
.mx-row{width:100%;font:inherit;color:var(--ink);text-align:left;background:transparent;border:0;border-bottom:1px solid #edf1f6;cursor:pointer;padding:0;border-left:3px solid transparent;transition:opacity .25s,background .2s}
.mx-row:last-child{border-bottom:0}
.mx-row .mx-p{display:grid;padding:6px 13px}
.mx-row .mx-p .mono{font-size:10px;color:var(--muted);letter-spacing:.08em}
.mx-row .mx-p b{font-weight:400;font-size:15px;line-height:1.25}
.mx-row:hover{background:#f6f8fc}
.mx-row[aria-pressed="true"]{border-left-color:var(--blue);background:#f0f4fa}
.mx-row[aria-pressed="true"] .mx-p b{color:var(--blue);font-weight:600}
.mx-row.dim{opacity:.3}
.dot{justify-self:center;width:14px;height:14px;border-radius:50%;border:1.5px solid #cfd8e6}
.dot.on{background:var(--blue);border-color:var(--blue)}
.dot.col{box-shadow:0 0 0 5px rgba(252,187,114,.35)}
.dot.on.col{background:#e0892f;border-color:#e0892f}
.c-card2{background:#fff;border:1px solid var(--rule);border-radius:4px 32px 4px 4px;padding:clamp(20px,2.4vw,28px);display:grid;gap:14px;box-shadow:0 20px 40px rgba(11,31,63,.07)}
.c-card2 h3{margin:-6px 0 2px;font-weight:600;font-size:clamp(22px,2.2vw,28px);line-height:1.15;color:var(--ink)}
.c-card2 .st .mono{color:var(--muted);font-size:11px}
.c-card2 .st p{margin:4px 0 0;font-size:15.5px;line-height:1.5;color:#26334a}
.c-card2 .tools{margin:0;font-size:14px;color:#34425a;border-top:1px solid var(--rule);padding-top:12px}
.c-card2 .tools .mono{font-size:11px;color:var(--muted);margin-right:6px}
@media (max-width:980px){.c-grid2{grid-template-columns:1fr}}
@media (max-width:600px){.mx-head,.mx-row{grid-template-columns:minmax(0,1fr) repeat(6,34px)}.mx-f{font-size:0}.mx-f .mono{font-size:10px}}

/* ---- about (blue) ---- */
.about{background:var(--blue);color:#fff;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:24px 24px}
.about .wrap{padding-block:clamp(48px,6vw,80px)}
.ab-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.ab-photo{margin:0}
.ph-photo{aspect-ratio:4/5;border:1.5px dashed var(--orange);border-radius:4px 40px 4px 4px;background:rgba(252,187,114,.08);display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;color:var(--orange)}
.ph-photo small{color:rgba(255,255,255,.6);font-size:13px}
.ab-body{display:grid;gap:16px}
.ab-body .eyebrow{color:var(--orange)}
.ab-body h2{margin:0;font-weight:400;font-size:clamp(30px,3.4vw,46px);line-height:1.08}
.ab-body h2 em{color:var(--orange)}
.ab-name{margin:0;font-size:18px}
.ab-bio{margin:0;max-width:640px;color:var(--soft)}
.phx{border:1px dashed var(--orange);background:rgba(252,187,114,.12);color:#ffd7a8;padding:1px 8px;border-radius:3px 8px 3px 3px}
.ab-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;border-top:1px solid rgba(255,255,255,.2);padding-top:18px;margin-top:4px}
.ab-how .mono{color:var(--orange);font-size:11px}
.ab-how p{margin:6px 0 0;font-size:15.5px;line-height:1.5;color:var(--soft)}
.ab-foot{display:grid;gap:8px;border-top:1px solid rgba(255,255,255,.2);padding-top:14px}
.ab-foot p{margin:0;font-size:15px;color:var(--soft)}
.ab-foot .mono{color:rgba(255,255,255,.6);font-size:11px;margin-right:8px}
@media (max-width:900px){.ab-grid{grid-template-columns:1fr}.ab-photo{max-width:280px}.ab-how{grid-template-columns:1fr;gap:12px}}

/* ---- tools strip (moving) ---- */
.tools{background:#fff;border-bottom:1px solid var(--rule)}
.tools-row{display:flex;align-items:center;gap:0;padding-block:0}
.tools-label{flex:none;color:var(--muted);font-size:11px;padding:24px 28px 24px 0;background:#fff;position:relative;z-index:1;border-right:1px solid var(--rule);margin-right:4px}
.marquee{flex:1;min-width:0;overflow:hidden;display:flex;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{list-style:none;margin:0;padding:0 22px 0 0;display:flex;align-items:center;gap:44px;flex:none;animation:slide 55s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-100%)}}
.t-item{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:16px;color:#34425a;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.t-item:first-child{margin-left:22px}
.t-item:hover{filter:none;opacity:1}
.t-word span{font-weight:600;letter-spacing:.01em}

/* ---- FAQ (light) ---- */
.faq{background:#fff;border-top:1px solid var(--rule)}
.faq .wrap{padding-block:clamp(48px,6vw,80px);display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.fq-head h2{margin:8px 0 0;font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1.08;color:var(--ink)}
.fq-list{display:grid;border-top:1px solid var(--rule)}
.fq{border-bottom:1px solid var(--rule)}
.fq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 4px;font-size:18px;color:var(--ink)}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";font-family:'IBM Plex Mono',monospace;font-size:22px;color:var(--blue);transition:transform .25s}
.fq[open] summary::after{transform:rotate(45deg)}
.fq[open] summary{color:var(--blue)}
.fq p{margin:0 4px 20px;max-width:640px;color:#34425a;font-size:16px;line-height:1.6}
.phl{border:1px dashed #e0892f;background:#fff8ef;color:#8a5a22;padding:1px 8px;border-radius:3px 8px 3px 3px}
.phx{border:1px dashed var(--orange);background:rgba(252,187,114,.12);color:#ffd7a8;padding:1px 8px;border-radius:3px 8px 3px 3px}
@media (max-width:860px){.faq .wrap{grid-template-columns:1fr}}
/* ---- final CTA (blue) ---- */
.cta{background:var(--blue);color:#fff;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:24px 24px}
.cta .wrap{padding-block:clamp(56px,8vw,96px)}
.cta h2{margin:0;font-weight:400;font-size:clamp(34px,4.6vw,62px);line-height:1.06;max-width:900px;text-wrap:balance}
.cta h2 em{color:var(--orange)}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.cta-mail{color:var(--soft);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);padding:4px 1px}.cta-mail:hover{color:#fff}
/* ---- footer ---- */
.site-foot{background:var(--deep);color:rgba(255,255,255,.75);font-size:15px}
.site-foot .wrap{padding-block:40px 24px;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:32px}
.sf-brand img{height:44px;width:auto}
.sf-brand p{margin:10px 0 0;max-width:300px}
.sf-col{display:grid;gap:8px;align-content:start;justify-items:start}
.sf-col .mono{color:var(--orange);font-size:11px;margin-bottom:4px}
.sf-col a{text-decoration:none}
.sf-col a:hover{color:#fff;text-decoration:underline}
.site-foot .sf-bottom{display:flex;padding-block:16px 24px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.55)}
@media (max-width:700px){.site-foot .wrap{grid-template-columns:1fr}}

/* ---- full-story cases ---- */
.fs{display:inline-block;margin-left:8px;font-style:normal;font-weight:500;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#b4610f;background:#fff4e6;border-radius:2px 8px 2px 2px;padding:2px 7px;vertical-align:2px}
.journey{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.journey::before{content:"";position:absolute;left:15px;top:14px;bottom:14px;width:2px;background:var(--tint)}
.journey li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:7px 0;position:relative}
.jn{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-size:11px;position:relative;z-index:1}
.journey b{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:16.5px;color:var(--ink)}
.journey p{margin:2px 0 0;font-size:14.5px;line-height:1.5;color:#34425a}
.c-card2 .st.end{background:#f0f4fa;border-radius:3px 14px 3px 3px;padding:12px 14px}
.c-card2 .st.end p{color:var(--ink)}

.stepper{display:flex;flex-wrap:wrap;gap:0;position:relative;margin-top:2px}
.sp{flex:1;min-width:44px;font:inherit;font-family:'IBM Plex Mono',monospace;font-size:12px;padding:9px 4px;background:#fff;border:1px solid var(--rule);margin-left:-1px;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.sp:first-child{margin-left:0;border-radius:4px 0 0 4px}.sp:last-child{border-radius:0 14px 4px 0}
.sp.done{background:var(--tint);color:var(--blue)}
.sp[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:#fff;position:relative;z-index:1}
.stg{min-height:150px;display:grid;align-content:start;gap:8px;padding:4px 2px}
.stg .mono{font-size:11px;color:var(--blue)}
.stg p{margin:0;font-size:17px;line-height:1.55;color:var(--ink)}
.stg.edge{background:#f0f4fa;border-radius:3px 14px 3px 3px;padding:14px 16px}
.st-nav{display:flex;justify-content:space-between}
.sn{font:inherit;font-size:14.5px;background:none;border:0;color:var(--blue);cursor:pointer;padding:6px 0}
.sn.next{font-weight:600}
.sn:disabled{opacity:.3;cursor:default}
section[id]{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){.track{animation:none}.track[aria-hidden]{display:none}.marquee{overflow-x:auto}}
@media (max-width:640px){.tools-label{padding:18px 14px 18px 0;font-size:10px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
footer{background:var(--deep);color:rgba(255,255,255,.6);font-size:13px}
footer .wrap{padding-block:24px}

/* ---- contact form ---- */
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(28px,5vw,72px);align-items:start}
.ct-intro{display:grid;gap:18px}
.ct-intro .eyebrow{color:var(--orange)}
.cta .ct-intro h2{font-size:clamp(32px,3.8vw,52px)}
.ct-intro p{margin:0;color:var(--soft);max-width:460px}
.ct-direct{display:flex;flex-wrap:wrap;gap:22px}
.ct-direct a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px}
.ct-direct a:hover{color:var(--orange);border-color:var(--orange)}
.ct-form{background:#fff;color:var(--ink);border-radius:4px 32px 4px 4px;padding:clamp(20px,2.6vw,32px);display:grid;gap:14px;box-shadow:0 24px 48px rgba(0,15,40,.3)}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ct-form label{display:grid;gap:6px;font-size:14px;color:#34425a}
.ct-form .opt{color:var(--muted);font-size:13px}
.ct-form input,.ct-form textarea{font:inherit;font-size:16px;color:var(--ink);border:1px solid #c9d3e2;border-radius:4px 10px 4px 4px;padding:11px 12px;background:#fbfcfe;width:100%}
.ct-form textarea{resize:vertical;min-height:120px}
.ct-form input:focus,.ct-form textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.ct-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.ct-form .btn:disabled{opacity:.6;cursor:wait}
.ct-status{margin:0;font-size:14.5px}
.ct-status.ok{color:#1f7a4d}.ct-status.err{color:#b42318}
.ct-status a{color:inherit}
@media (max-width:900px){.ct-grid{grid-template-columns:1fr}}
@media (max-width:520px){.ct-row{grid-template-columns:1fr}}