/* Clear View - Commercial tint section (staging). Scoped to #commercial; nav/before/after only style the standalone preview. */


#commercial{--cy:#3fe6f0;--mono:"JB Mono",ui-monospace,Menlo,monospace;--sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  position:relative;height:100vh;height:100svh;overflow:hidden;background:#07080a;color:#fff;font-family:var(--sans)}
#commercial .cm-stage{position:absolute;left:0;top:0;width:100vw;height:56.25vw;overflow:hidden}
/* DRAFT-SITE S1: hand-off veil (opacity driven by the entry progress in commercial.js) */
#commercial .cm-veil{position:absolute;inset:0;background:#050608;opacity:0;pointer-events:none}
#commercial .cm-img,#commercial .cm-cv,#commercial .cm-dbg{position:absolute;inset:0;width:100%;height:100%;display:block}
#commercial .cm-img{object-fit:fill}
#cm-s2{opacity:0}
#commercial .cm-cv{opacity:0;pointer-events:none}
#commercial .cm-dbg{pointer-events:none}
#cm-dbg polygon{fill:rgba(0,240,255,.10);stroke:#00f6ff;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#cm-dbg polygon.ground{fill:rgba(255,190,60,.12);stroke:#ffbe3c}
#cm-dbg .path{fill:none;stroke:#ff3df0;stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.85}
#cm-dbg .n{font:600 20px/1 monospace;fill:#fff;text-anchor:middle;paint-order:stroke;stroke:#000;stroke-width:4px}
#commercial.cm-masks .cm-copy,#commercial.cm-masks .cm-chip,#commercial.cm-masks .cm-hint,#commercial.cm-masks .cm-steps,#commercial.cm-masks .cm-vign,#commercial.cm-masks .cm-cv{visibility:hidden}
#commercial .cm-vign{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 48% 42% at 14% 86%,rgba(5,6,8,.62),rgba(5,6,8,0) 72%),radial-gradient(ellipse 46% 50% at 86% 80%,rgba(5,6,8,.6),rgba(5,6,8,0) 72%),linear-gradient(0deg,rgba(5,6,8,.82) 0,rgba(5,6,8,.42) 20%,rgba(5,6,8,0) 38%),linear-gradient(180deg,rgba(5,6,8,.5) 0,rgba(5,6,8,0) 14%)}

/* film chip (top right, during the wave) */
#commercial .cm-chip{position:absolute;left:var(--cm-panel-x,66vw);top:92px;z-index:2;display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;background:rgba(8,12,16,.42);border:1px solid rgba(120,230,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#bdf3ff;opacity:0;pointer-events:none}
.cm-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--cy);box-shadow:0 0 10px var(--cy)}
.cm-chip .bar{position:relative;display:block;width:90px;height:2px;background:rgba(255,255,255,.16);overflow:hidden;border-radius:2px}
.cm-chip .bar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#1aa9d6,#7ff0ff)}

/* copy */
/* landscape: copy lives in the dark panel right of the building (left/width set by layout()), vertically centred */
#commercial .cm-copy{position:absolute;left:var(--cm-panel-x,66vw);width:var(--cm-panel-w,30vw);top:50%;bottom:auto;opacity:0;pointer-events:none;will-change:transform,opacity}
/* DRAFT-SITE S1 (Devon, Nov 2): the copy sits on a frosted-glass panel matching the S1 price cards */
#commercial .cm-copy{box-sizing:border-box;padding:30px 32px 32px;border-radius:24px;
  background:linear-gradient(155deg,rgba(255,255,255,.12),rgba(255,255,255,.035) 42%,rgba(63,230,240,.05)),rgba(8,11,14,.36);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(63,230,240,.30);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 1px 0 rgba(255,255,255,.2) inset,0 0 32px rgba(63,230,240,.16),0 0 90px rgba(63,230,240,.07),0 30px 70px rgba(0,0,0,.45)}
#commercial .cm-copy.on{pointer-events:auto}
#commercial .cm-eyebrow{margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#ffd2a6;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.8)}
#commercial .cm-c1 .cm-eyebrow{color:#9fe4ff}
#commercial h2{margin:0;font-weight:800;font-size:clamp(32px,2.7vw,54px);line-height:.98;letter-spacing:-.045em;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.5)}
#commercial .cm-sub{margin:16px 0 0;font-size:clamp(15px,1.1vw,18px);line-height:1.4;font-weight:500;opacity:.88;max-width:30em;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.cm-bul{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:10px;max-width:100%}
.cm-bul li{display:flex;align-items:center;gap:10px;font-size:clamp(14px,1.02vw,17px);font-weight:600;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.cm-bul li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--cy);box-shadow:0 0 10px rgba(63,230,240,.7)}
.cm-cta-row{display:flex;align-items:center;gap:18px;margin-top:24px;flex-wrap:wrap}
.cm-cta{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;background:#fff;color:#0a0b0c !important;font-weight:800;font-size:16px;letter-spacing:-.01em;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.cm-cta::after{content:"→";font-weight:600}
.cm-tel{font-family:var(--mono);font-size:13px;letter-spacing:.12em;opacity:.92;text-shadow:0 1px 10px rgba(0,0,0,.7)}

/* step rail + hint */
#commercial .cm-steps{position:absolute;left:var(--cm-panel-x,66vw);bottom:44px;list-style:none;margin:0;padding:0;display:flex;gap:28px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.95}
.cm-steps li{display:flex;align-items:center;gap:10px;opacity:.42;text-shadow:0 1px 6px rgba(0,0,0,.8);transition:opacity .3s}
.cm-steps li i{width:16px;height:2px;background:currentColor;transition:width .3s}
.cm-steps li.on{opacity:1}.cm-steps li.on i{width:30px;background:var(--cy)}
#commercial .cm-hint{position:absolute;left:calc(var(--cm-panel-x,66vw) * .5);bottom:26px;transform:translateX(-50%);font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;opacity:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.cm-hint i{width:1px;height:26px;background:linear-gradient(#fff,transparent)}

/* portrait / mobile: the building sits in a band under the nav, the copy below it */
@media (max-aspect-ratio:1/1){
  #commercial .cm-copy,#commercial .cm-c0,#commercial .cm-c1{left:14px;right:14px;width:auto;top:auto;bottom:calc(96px + env(safe-area-inset-bottom));padding:22px 20px 22px;border-radius:22px}
  #commercial h2{font-size:clamp(28px,8.6vw,44px)}
  #commercial .cm-eyebrow{margin-bottom:16px}
  #commercial .cm-sub{font-size:16px;margin-top:14px}
  .cm-bul{grid-template-columns:1fr;gap:11px;width:auto;margin-top:18px}
  .cm-bul li{font-size:16px}
  .cm-cta-row{margin-top:30px}
  .cm-cta{padding:15px 26px;font-size:17px}
  #commercial .cm-chip{left:auto;right:18px;top:auto;bottom:calc(16px + env(safe-area-inset-bottom));padding:7px 11px;gap:8px;letter-spacing:.12em;font-size:9.5px}
  .cm-chip .bar{width:44px}
  #commercial .cm-steps{display:flex;top:auto;left:22px;right:22px;bottom:calc(24px + env(safe-area-inset-bottom));transform:none;justify-content:flex-start;gap:28px;font-size:11.5px;letter-spacing:.14em}
  .cm-steps li{flex-direction:column;align-items:flex-start;gap:6px;opacity:.5}
  .cm-steps li i,.cm-steps li.on i{width:22px}
  #commercial .cm-hint{display:none}
}