/* ==========================================================================
   Marketing-only visual/animation layer — loaded ONLY on the homepage.
   Restores richer elements from the original smartrise-live.html concept
   site that were left out of the first PHP port: animated hero shaft,
   IoT status card, floor indicator, automation "how it works" funnel,
   specialty-lift mini-shafts, and the trust strip. Deliberately kept
   separate from style.css (shared by admin/portal/wizard) so none of this
   can affect already-tested pages.
   ========================================================================== */

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ---------- Nav extras: Instagram/WhatsApp icons + floor readout ---------- */
/* M-09: visual size stays 34x34; an ::after hit-slop pad takes the actual
   touch target to >=44x44 (M-09). */
.icon-link{ position:relative; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:4px; color:var(--fog); border:1px solid var(--line-dark); transition:color .2s ease, border-color .2s ease; }
.icon-link::after{ content:''; position:absolute; inset:-5px; }
.icon-link:hover{ color:#fff; border-color:var(--orange); }
.icon-link svg{ width:16px; height:16px; }
.icon-link--dark{ color:var(--ink-soft); border-color:var(--line-light); }
.icon-link--dark:hover{ color:var(--orange-dark); border-color:var(--orange); }
.readout{ display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--teal-deep); border:1px solid var(--line-dark); border-radius:3px; }
.readout-label{ font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.62rem; letter-spacing:.1em; color:var(--fog); text-transform:uppercase; }
.readout-value{ font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.95rem; font-weight:600; color:var(--orange); text-shadow:0 0 8px rgba(246,152,16,.5); min-width:26px; text-align:center; transition:opacity .15s ease; }
@media (max-width:1024px){ .readout-label{ display:none; } }
@media (max-width:640px){ .readout{ display:none; } }

/* ---------- Hero CTAs / proof line ---------- */
.hero-ctas{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.hero-scrolldown{ font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.78rem; letter-spacing:.04em; color:var(--ink-soft); display:inline-flex; align-items:center; gap:8px; border-bottom:1px solid var(--line-light); padding-bottom:2px; transition:border-color .2s ease, color .2s ease; }
.hero-scrolldown:hover{ color:var(--orange-dark); border-color:var(--orange-dark); }
.hero-proof{ margin-top:40px; padding-top:22px; border-top:1px solid var(--line-light); font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.76rem; color:var(--ink-soft); }

/* ---------- Hero visual: animated shaft ---------- */
.hero-grid{ display:grid; grid-template-columns:1.05fr .85fr; gap:56px; align-items:center; }
.hero-visual{ position:relative; margin-bottom:76px; }
.shaft{ position:relative; height:400px; background:var(--teal); border-radius:var(--radius-md); border:1px solid var(--line-dark); overflow:hidden; box-shadow:var(--elev-3); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.shaft:hover{ transform:translateY(-4px); box-shadow:var(--elev-4); }
.shaft::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.5px); background-size:24px 24px; }
.shaft-floors{ position:absolute; inset:0; display:flex; flex-direction:column-reverse; }
.shaft-floor{ flex:1; border-top:1px dashed var(--line-dark); display:flex; align-items:center; padding:0 16px; }
.shaft-floor:first-child{ border-top:none; }
.shaft-floor span{ font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.68rem; color:var(--fog); letter-spacing:.08em; }
.shaft-cable{ position:absolute; top:0; left:50%; width:1px; height:100%; background:linear-gradient(to bottom, var(--orange), transparent 85%); opacity:.55; }
.shaft-cab{ position:absolute; left:50%; width:72px; height:52px; margin-left:-36px; background:linear-gradient(180deg,var(--teal-raised),var(--teal-deep)); border:1px solid var(--orange); border-radius:4px; box-shadow:0 0 24px rgba(246,152,16,.22); animation:cabRise 9s ease-in-out infinite; display:flex; align-items:center; justify-content:center; }
.shaft-cab::before, .shaft-cab::after{ content:''; position:absolute; inset:-6px; border:1px solid var(--orange); border-radius:8px; opacity:0; animation:cabPing 2.6s ease-out infinite; }
.shaft-cab::after{ animation-delay:1.3s; }
.shaft-cab img{ width:20px; height:auto; position:relative; z-index:1; filter:brightness(0) invert(1); opacity:.95; }
@keyframes cabRise{ 0%{ top:82%; } 45%{ top:14%; } 55%{ top:14%; } 100%{ top:82%; } }
@keyframes cabPing{ 0%{ opacity:.55; transform:scale(1); } 100%{ opacity:0; transform:scale(1.9); } }
@media (prefers-reduced-motion: reduce){ .shaft-cab{ animation:none; top:60%; } .shaft-cab::before, .shaft-cab::after{ animation:none; opacity:0; } }

/* ---------- Hero phone: mobile-app "call the lift" mockup ---------- */
/* Timed against the shaft's own 9s cabRise loop (rises 0%->45%) so the
   phone's tap fires just before the cab arrives -- tap, then response,
   same cadence every cycle, no JS needed to keep them in sync. */
.hero-phone{ position:absolute; top:34px; right:-14px; z-index:7; width:118px; background:#111; border-radius:20px; padding:8px 7px; box-shadow:0 14px 34px rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.08); }
.hero-phone-notch{ width:34px; height:5px; border-radius:3px; background:rgba(255,255,255,.25); margin:0 auto 7px; }
.hero-phone-screen{ background:linear-gradient(180deg,var(--teal-raised),var(--teal-deep)); border-radius:13px; padding:12px 10px 14px; display:flex; flex-direction:column; gap:10px; }
.hero-phone-app-top{ display:flex; align-items:center; gap:6px; }
.hero-phone-app-top span:last-child{ font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fog); }
.hero-phone-floor{ display:flex; align-items:baseline; justify-content:space-between; padding:8px 0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.hero-phone-floor-label{ font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fog); opacity:.8; }
.hero-phone-floor-value{ font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:1.15rem; font-weight:700; color:var(--orange); }
.hero-phone-call-btn{ position:relative; display:flex; align-items:center; justify-content:center; gap:0; width:100%; padding:9px 0; border-radius:8px; border:1px solid var(--orange); background:rgba(246,152,16,.12); color:#fff; font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; cursor:default; }
.hero-phone-call-ping{ position:absolute; inset:-1px; border-radius:8px; border:1px solid var(--orange); opacity:0; animation:phoneTap 9s ease-in-out infinite; }
@keyframes phoneTap{ 0%{ opacity:0; transform:scale(1); } 32%{ opacity:0; transform:scale(1); } 36%{ opacity:.7; transform:scale(1); } 44%{ opacity:0; transform:scale(1.12); } 100%{ opacity:0; transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .hero-phone-call-ping{ animation:none; opacity:0; } }
@media (max-width:520px){ .hero-phone{ display:none; } }

.doors{ position:absolute; inset:0; z-index:5; display:flex; pointer-events:none; }
.door{ flex:1; background:var(--teal); border:1px solid var(--line-dark); }
.door--l{ animation:doorL .9s cubic-bezier(.65,0,.35,1) forwards; animation-delay:.35s; }
.door--r{ animation:doorR .9s cubic-bezier(.65,0,.35,1) forwards; animation-delay:.35s; }
@keyframes doorL{ to{ transform:translateX(-101%); } }
@keyframes doorR{ to{ transform:translateX(101%); } }
@media (prefers-reduced-motion: reduce){ .doors{ display:none; } }

/* ---------- Live dot (nav readout + IoT card + automation eyebrow) ---------- */
.live-dot{ position:relative; width:8px; height:8px; border-radius:50%; background:#2ECC71; flex-shrink:0; display:inline-block; }
.live-dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid #2ECC71; animation:livePing 1.8s ease-out infinite; }
@keyframes livePing{ 0%{ opacity:.75; transform:scale(.6); } 100%{ opacity:0; transform:scale(2.3); } }
@media (prefers-reduced-motion: reduce){ .live-dot::after{ animation:none; opacity:0; } }

/* ---------- Floating IoT status card ---------- */
.iot-card{ position:absolute; left:20px; right:20px; bottom:-56px; z-index:6; background:#fff; border-radius:var(--radius-md); border:1px solid var(--line-light); box-shadow:var(--elev-3); padding:18px 20px; }
.iot-card-top{ display:flex; align-items:center; gap:9px; margin-bottom:16px; }
.iot-card-top span{ font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.iot-devices{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.iot-device{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.iot-device-icon{ position:relative; width:34px; height:34px; border-radius:8px; background:var(--orange-tint); color:var(--orange-dark); display:flex; align-items:center; justify-content:center; }
.iot-device-icon svg{ width:15px; height:15px; }
.iot-device-icon .dot{ position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:#2ECC71; border:2px solid #fff; }
.iot-device span{ font-size:.64rem; color:var(--ink-soft); font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; }
@media (max-width:520px){ .iot-devices{ grid-template-columns:repeat(2,1fr); row-gap:14px; } }
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  /* M-03: copy-first on mobile — the source order already puts the copy
     column before the visual, so no order override; the demo simply flows
     below the headline instead of above it (the old order:-1 inverted the
     poster hierarchy and pushed the H1 behind the CTA bar). */
  .hero-visual{ order:0; }
  .shaft{ height:320px; max-height:340px; }
  .iot-card{ left:12px; right:12px; padding:15px; bottom:-62px; }
}

/* ---------- Product section layout (commercial/residential/automation) ---------- */
.product-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.product-h2{ font-size:clamp(1.7rem,2.8vw,2.3rem); font-weight:700; line-height:1.2; color:var(--teal); }
.section--dark .product-h2{ color:#fff; }
.product-body{ margin-top:18px; font-size:1.02rem; max-width:520px; color:var(--ink-soft); }
.section--dark .product-body{ color:var(--fog); }
@media (max-width:900px){ .product-grid{ grid-template-columns:1fr; gap:40px; } }

/* ---------- Partner card enrichments (badge + title) ---------- */
.partner-badge{ display:inline-flex; align-items:center; gap:10px; align-self:flex-start; padding:8px 14px; border-radius:4px; background:var(--teal); color:#fff; font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
.section--dark .partner-badge{ background:var(--orange); color:#003841; } /* v1.202 S-01: teal ink on orange = 5.74:1 vs white's 2.23:1 */
.partner-title{ display:flex; align-items:center; gap:12px; }
.product-eyebrow{ margin-bottom:0; }

/* ---------- Automation "How it works" funnel ---------- */
.how-smart-wrap{ margin-top:80px; padding-top:64px; border-top:1px solid var(--line-dark); }
.how-smart-head{ text-align:center; max-width:520px; margin:0 auto; }
.how-smart-title{ font-size:clamp(1.35rem,2.3vw,1.7rem); font-weight:700; color:#fff; margin-top:12px; font-family:'Satoshi',sans-serif; }
/* M-10: one responsive h2 ramp sitewide — the h2-scoped variants below and
   the inline sizes stripped from index.php all resolve to this same scale
   (style.css carries the base h2 rule; marketing-apple.css mirrors it). */
h2.product-h2, h2.how-smart-title{ font-size:clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); }
.how-smart-sub{ font-size:.9rem; color:var(--fog); margin-top:10px; }

.how-icon-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(102px,1fr)); gap:28px 12px; max-width:620px; margin:48px auto 0; }
.how-icon-item{ display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; }
.how-icon-item span{ font-size:.66rem; color:var(--fog); font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; line-height:1.35; }

.how-connector-v{ width:1px; height:42px; background:var(--line-dark); position:relative; margin:8px auto 32px; }
.flow-dot-v{ position:absolute; left:-3px; top:0; width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px rgba(246,152,16,.7); opacity:0; animation:flowDotVertical 2.1s linear infinite; }
.flow-dot-v:nth-child(2){ animation-delay:.7s; }
.flow-dot-v:nth-child(3){ animation-delay:1.4s; }
@keyframes flowDotVertical{ 0%{ top:0; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ top:96%; opacity:0; } }

.how-smart{ display:flex; align-items:flex-start; justify-content:center; gap:0; max-width:860px; margin-left:auto; margin-right:auto; }
.how-stage{ flex:1; text-align:center; padding:0 14px; max-width:220px; }
.how-icon-group{ display:flex; justify-content:center; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.how-icon{ width:36px; height:36px; border-radius:8px; background:var(--teal-raised); border:1px solid var(--line-dark); color:var(--orange); display:flex; align-items:center; justify-content:center; }
.how-icon svg{ width:16px; height:16px; }
.how-icon-group.single .how-icon{ width:50px; height:50px; border-radius:50%; position:relative; }
.how-icon.hub{ background:var(--orange); color:#fff; border-color:transparent; }
.how-icon.hub::after{ content:''; position:absolute; inset:-6px; border:1px solid var(--orange); border-radius:50%; opacity:0; animation:cabPing 2.6s ease-out infinite; }
.how-stage h4{ font-family:'Satoshi',sans-serif; font-size:.98rem; font-weight:700; color:#fff; margin-bottom:6px; }
.how-stage p{ font-size:.84rem; color:var(--fog); }
.how-connector{ flex:0 0 56px; height:1px; background:var(--line-dark); position:relative; margin-top:18px; }
.flow-dot{ position:absolute; top:-3px; left:0; width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px rgba(246,152,16,.7); opacity:0; animation:flowDot 2.1s linear infinite; }
.flow-dot:nth-child(2){ animation-delay:.7s; }
.flow-dot:nth-child(3){ animation-delay:1.4s; }
@keyframes flowDot{ 0%{ left:0; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ left:96%; opacity:0; } }
@media (prefers-reduced-motion: reduce){ .flow-dot, .flow-dot-v{ animation:none; opacity:.6; } .how-icon.hub::after{ animation:none; opacity:0; } }
@media (max-width:720px){
  .how-smart{ flex-direction:column; align-items:center; gap:26px; }
  .how-connector{ width:1px; height:32px; flex:none; margin:0; }
  .flow-dot{ left:-3px; top:0; animation-name:flowDotVertical; }
  .how-icon-grid{ max-width:320px; gap:24px 10px; }
}

/* ---------- Specialty lifts: mini animated shafts ---------- */
.lift-types-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:52px; }
.lift-type-card{ text-align:center; }
.mini-shaft{ position:relative; height:104px; width:54px; margin:0 auto 20px; background:var(--teal); border-radius:6px; overflow:hidden; border:1px solid var(--line-light); box-shadow:var(--elev-3); }
.mini-track{ position:absolute; left:50%; top:0; width:1px; height:100%; background:linear-gradient(to bottom, var(--orange), transparent 85%); opacity:.55; }
.mini-car{ position:absolute; left:50%; width:34px; height:24px; margin-left:-17px; background:linear-gradient(180deg,var(--teal-raised),var(--teal-deep)); border:1px solid var(--orange); border-radius:3px; display:flex; align-items:center; justify-content:center; color:var(--orange); animation:miniRise 4.8s ease-in-out infinite; }
.mini-car svg{ width:14px; height:14px; }
@keyframes miniRise{ 0%{ top:76%; } 45%{ top:8%; } 55%{ top:8%; } 100%{ top:76%; } }
@media (prefers-reduced-motion: reduce){ .mini-car{ animation:none; top:42%; } }
.lift-type-card h3{ font-size:1rem; font-weight:700; color:var(--teal); margin-bottom:8px; }
.lift-type-card p{ font-size:.87rem; color:var(--ink-soft); }
@media (max-width:860px){ .lift-types-grid{ grid-template-columns:1fr 1fr; row-gap:38px; } }
@media (max-width:480px){ .lift-types-grid{ grid-template-columns:1fr; } }

/* ---------- Trust strip ---------- */
.trust{ padding:90px 0; background:#fff; }
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:16px; }
.trust-card{ text-align:left; }
.trust-card .icon-wrap{ width:44px; height:44px; border-radius:6px; background:var(--orange-tint); color:var(--orange-dark); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.trust-card .icon-wrap svg{ width:20px; height:20px; }
.trust-card h3{ font-size:1.05rem; font-weight:700; color:var(--teal); margin-bottom:8px; }
.trust-card p{ font-size:.9rem; color:var(--ink-soft); }
@media (max-width:800px){ .trust-grid{ grid-template-columns:1fr; } }

/* ---------- Floating Staff Login button ---------- */
.staff-login-fab{ position:fixed; left:20px; bottom:20px; z-index:150; display:flex; align-items:center; gap:8px; background:var(--teal); color:#fff; border:1px solid rgba(255,255,255,.15); border-radius:99px; padding:11px 16px 11px 13px; font-size:.82rem; font-weight:600; box-shadow:0 6px 20px rgba(0,20,24,.35); transition:background .2s ease, transform .15s ease; }
.staff-login-fab:hover{ background:var(--orange); transform:translateY(-2px); }
.staff-login-fab svg{ width:17px; height:17px; flex-shrink:0; }
@media (max-width:600px){ .staff-login-fab span{ display:none; } .staff-login-fab{ padding:12px; } }
/* M-04: on desktop the login pill itself collapses to its icon; the
   "Staff Login" label expands on hover/focus (CSS-only, no markup change).
   The Staff/Engineer toggle's collapse lives with its base rule below and
   applies at every width. */
@media (min-width:601px){
  .staff-login-fab span{ display:inline-block; max-width:0; opacity:0; overflow:hidden; white-space:nowrap; transition:max-width .25s var(--ease-out), opacity .2s ease; }
  .staff-login-fab{ padding:12px; }
  .staff-login-fab:hover, .staff-login-fab:focus-visible{ padding:11px 16px 11px 13px; }
  .staff-login-fab:hover span, .staff-login-fab:focus-visible span{ max-width:130px; opacity:1; }
}
/* ---------- Staff / Field Engineer toggle (sits above the login FAB) ---------- */
/* M-04: collapsed by default at every width — it's a preference, not a
   destination. Revealed by hover/focus on the login FAB, or when focus
   moves into the toggle itself (it stays keyboard-focusable while
   collapsed: opacity, not visibility). */
.staff-fab-toggle{ position:fixed; left:20px; bottom:66px; z-index:150; display:flex; background:rgba(0,38,44,.92); border:1px solid rgba(255,255,255,.15); border-radius:99px; padding:3px; gap:2px; backdrop-filter:blur(6px); opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease; }
.staff-fab-toggle:focus-within,
body:has(.staff-login-fab:hover) .staff-fab-toggle,
body:has(.staff-login-fab:focus-visible) .staff-fab-toggle{ opacity:1; transform:none; pointer-events:auto; }
.staff-fab-toggle-opt{ border:none; background:transparent; color:var(--fog); font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.62rem; letter-spacing:.04em; text-transform:uppercase; padding:6px 12px; border-radius:99px; cursor:pointer; transition:background .2s ease, color .2s ease; }
.staff-fab-toggle-opt.is-active{ background:var(--orange); color:var(--teal); } /* v1.217 brand: teal on orange 5.6:1 (white was 2.2:1) */
.staff-fab-toggle-opt:not(.is-active):hover{ color:#fff; }
/* M-01: on phones the fixed mobile CTA bar (~72px tall incl. safe-area)
   owns the bottom strip — lift both FABs above it so they never sit on the
   WhatsApp label. (Placed after both base rules so the override wins.) */
@media (max-width:640px){
  .staff-login-fab{ bottom:calc(78px + env(safe-area-inset-bottom,0px)); }
  .staff-fab-toggle{ bottom:calc(126px + env(safe-area-inset-bottom,0px)); }
}

/* ---------- COM-01: WhatsApp website widget ---------- */
.whatsapp-widget-fab{ position:fixed; right:20px; bottom:20px; z-index:150; display:flex; align-items:center; justify-content:center; width:56px; height:56px; background:#25D366; color:#fff; border-radius:50%; box-shadow:0 6px 20px rgba(0,0,0,.25); transition:transform .15s ease, box-shadow .2s ease; }
.whatsapp-widget-fab:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 8px 26px rgba(0,0,0,.32); }
@media (max-width:600px){ .whatsapp-widget-fab{ width:50px; height:50px; right:16px; bottom:16px; } .whatsapp-widget-fab svg{ width:24px; height:24px; } }

/* ---------- SwiftLifts "Build your own lift" CTA ---------- */
.build-lift-cta{ display:flex; align-items:center; gap:10px; margin-top:20px; padding:12px 16px; background:var(--orange-tint); border:1px solid var(--orange); border-radius:8px; color:var(--orange-ink); font-size:.86rem; font-weight:600; transition:background .2s ease, transform .15s ease; } /* v1.202 S-03: orange-dark on orange-tint = 2.6:1; orange-ink = 5.1:1 */
.build-lift-cta:hover{ background:var(--orange); color:#003841; transform:translateY(-1px); } /* v1.202 S-01: teal ink on the orange hover fill (5.74:1) */
.build-lift-cta span:nth-child(2){ flex:1; }
.build-lift-cta svg{ width:16px; height:16px; flex-shrink:0; }

/* ---------- Final CTA enrichments ---------- */
.pattern-bg{ position:absolute; inset:0; background-repeat:repeat; opacity:.05; pointer-events:none; }
.cta{ text-align:center; position:relative; }
.cta-contact{ margin-top:26px; font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.85rem; color:rgba(255,255,255,.85); }
.cta-contact a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.5); }

/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; margin-top:44px; align-items:start; }
.contact-card{ padding:32px; }
.contact-card .field:last-of-type{ margin-bottom:20px; }
.contact-success{ text-align:center; padding:20px 10px; }
.contact-success-icon{ width:56px; height:56px; border-radius:50%; background:var(--orange); color:#fff; font-size:1.6rem; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.contact-details{ display:flex; flex-direction:column; gap:26px; }
.contact-detail-item h3, .contact-detail-item h2{ font-size:.78rem; font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--orange-ink); margin-bottom:8px; font-weight:500; } /* v1.202 S-03+S-08: h2 (no h1→h3 skip) + text-safe amber ink */
.contact-detail-item address, .contact-detail-item a{ font-size:.94rem; color:var(--ink-soft); line-height:1.6; }
.contact-detail-item a:hover{ color:var(--orange-dark); }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } .contact-details{ order:-1; } }
@media (max-width:480px){ .contact-card{ padding:22px; } }

/* ---------- About page ---------- */
.about-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:start; margin-top:20px; }
.about-facts{ display:flex; flex-direction:column; gap:20px; background:var(--paper); border:1px solid var(--line-light); border-radius:8px; padding:26px; }
.about-fact h3{ font-size:.95rem; color:var(--teal); margin-bottom:6px; }
.about-fact p{ font-size:.88rem; color:var(--ink-soft); }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; gap:32px; } }

.about-partners{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.about-partner-card{ background:var(--teal-raised); border:1px solid var(--line-dark); border-radius:8px; padding:26px; text-align:center; }
.about-partner-card .logo-chip{ margin:0 auto 16px; }
.about-partner-card p{ font-size:.86rem; color:var(--fog); }
@media (max-width:760px){ .about-partners{ grid-template-columns:1fr; } }

/* ---------- Leadership spotlight ---------- */
.leader-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; margin-top:44px; }
.leader-card{ background:var(--paper); border:1px solid var(--line-light); border-radius:10px; padding:32px; text-align:center; transition:transform .25s ease, box-shadow .25s ease; }
.leader-card:hover{ transform:translateY(-4px); box-shadow:var(--elev-3); }
.leader-avatar{ position:relative; width:84px; height:84px; border-radius:50%; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--teal), var(--teal-deep)); }
.leader-avatar span{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:1.3rem; color:#fff; }
.leader-avatar--alt{ background:linear-gradient(135deg, var(--orange), var(--orange-dark)); }
.leader-avatar--alt span{ color:var(--teal); } /* v1.217 brand: teal initials on orange */
.leader-avatar::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--orange); opacity:0; animation:cabPing 3s ease-out infinite; }
.leader-avatar--alt::after{ border-color:var(--teal); }
@media (prefers-reduced-motion: reduce){ .leader-avatar::after{ animation:none; opacity:0; } }
.leader-card h3{ font-size:1.05rem; color:var(--teal); margin-bottom:2px; }
.leader-title{ font-size:.78rem; font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--orange-ink); margin-bottom:14px; } /* v1.203 S-03 debt: orange-dark = 2.72:1 on paper; orange-ink = 5.4:1 */
.leader-bio{ font-size:.9rem; color:var(--ink-soft); line-height:1.55; }
.leader-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:16px; }
.leader-tags span{ font-size:.7rem; font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; background:var(--orange-tint); color:var(--orange-ink); padding:5px 10px; border-radius:99px; } /* v1.203 S-03 debt: orange-dark = 2.3:1 on orange-tint; orange-ink = 5.1:1 */
@media (max-width:700px){ .leader-grid{ grid-template-columns:1fr; } }

/* ---------- Departments ---------- */
.dept-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.dept-card{ background:var(--teal-raised); border:1px solid var(--line-dark); border-radius:8px; padding:26px; transition:transform .2s ease; }
.dept-card:hover{ transform:translateY(-3px); }
.dept-icon{ width:38px; height:38px; border-radius:8px; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.dept-icon svg{ width:18px; height:18px; }
.dept-card h3{ font-size:.98rem; color:#fff; margin-bottom:6px; }
.dept-count{ font-size:.74rem; font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; color:var(--orange); margin-bottom:10px; }
.dept-count em{ font-style:normal; color:var(--fog); }
.dept-card p:last-child{ font-size:.85rem; color:var(--fog); }
@media (max-width:900px){ .dept-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .dept-grid{ grid-template-columns:1fr; } }

/* ---------- Vision & Mission ---------- */
.vision-mission-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.vm-card{ background:var(--paper); border:1px solid var(--line-light); border-radius:10px; padding:32px; }
@media (max-width:760px){ .vision-mission-grid{ grid-template-columns:1fr; } }

/* ---------- FAQ page ---------- */
.faq-list{ max-width:760px; }
.faq-item{ padding:26px 0; border-bottom:1px solid var(--line-light); }
.faq-item:first-child{ border-top:1px solid var(--line-light); }
.faq-item h2{ font-size:1.08rem; color:var(--teal); line-height:1.4; margin-bottom:10px; font-weight:700; }
.faq-item p{ font-size:.95rem; color:var(--ink-soft); line-height:1.7; }
@media (max-width:600px){ .faq-item h2{ font-size:1rem; } }

/* ---------- Projects page ---------- */
.proj-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.proj-filter{ font-size:.8rem; padding:7px 14px; border:1px solid var(--line-light); border-radius:99px; color:var(--ink-soft); transition:background .18s, color .18s, border-color .18s; }
.proj-filter:hover{ border-color:var(--orange); color:var(--orange-dark); }
.proj-filter.on{ background:var(--teal); color:#fff; border-color:var(--teal); }
.proj-empty{ padding:40px 0; color:var(--ink-soft); font-size:.95rem; }

/* ============ HERO — Variant 2: Full-Bleed Editorial (V33 §5) ============ */
.hero-v2{ position:relative; background:var(--teal-deep); padding:100px 24px 90px; overflow:hidden; text-align:center; }
.hero-v2::before{ content:''; position:absolute; top:-200px; left:50%; transform:translateX(-50%); width:900px; height:900px; border-radius:50%; background:radial-gradient(circle, rgba(246,152,16,.35), transparent 68%); filter:blur(10px); animation:heroV2GlowDrift 10s ease-in-out infinite; }
@keyframes heroV2GlowDrift{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-46%) translateY(30px); } }
.hero-v2::after{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px); background-size:26px 26px; opacity:.5; }
.hero-v2-inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; }
.hero-v2-inner .eyebrow{ color:var(--orange); display:inline-block; margin-bottom:18px; }
.hero-v2-inner h1{ font-family:'Satoshi',sans-serif; font-size:clamp(2.1rem,4.2vw,3.1rem); line-height:1.12; color:#fff; margin:0 0 20px; letter-spacing:-.015em; }
.hero-v2-inner h1 em{ font-style:normal; color:var(--orange); }
.hero-v2-inner .lede{ font-size:1.08rem; color:#c9d6d8; line-height:1.65; max-width:560px; margin:0 auto 34px; }
.hero-v2-ctas{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:50px; flex-wrap:wrap; }
.hero-v2-ghost{ background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.24); padding:13px 26px; border-radius:var(--radius-sm); font-weight:600; font-size:.92rem; text-decoration:none; transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); display:inline-block; }
.hero-v2-ghost:hover{ background:rgba(255,255,255,.12); border-color:var(--orange); }
.hero-v2-trust-strip{ display:flex; align-items:center; justify-content:center; gap:36px; flex-wrap:wrap; padding-top:28px; border-top:1px solid rgba(255,255,255,.1); font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.72rem; letter-spacing:.05em; color:#9FB4B8; text-transform:uppercase; }
.hero-v2-trust-strip span{ transition:color var(--dur-fast) ease; }
.hero-v2-trust-strip span:hover{ color:var(--orange); }
@media (max-width:640px){ .hero-v2{ padding:70px 20px 60px; } .hero-v2-trust-strip{ gap:18px; } }
@media (prefers-reduced-motion: reduce){ .hero-v2::before{ animation:none; } }

/* ============ HERO — Variant 3: Interactive Scale (V33 §5) ============ */
.hero-v3{ background:#fff; }
.hero-v3-grid{ display:grid; grid-template-columns:1fr .9fr; gap:60px; align-items:center; }
.hero-v3-scale-panel{ background:var(--paper); border:1px solid var(--line-light); border-radius:var(--radius-lg); padding:28px 30px; position:relative; box-shadow:var(--elev-1); }
.hero-v3-scale-title{ font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:18px; }
.hero-v3-scale-track{ position:relative; height:220px; margin:0 30px; }
.hero-v3-scale-bar{ position:absolute; left:50%; transform:translateX(-50%); width:6px; height:100%; background:linear-gradient(180deg,var(--orange),var(--teal)); border-radius:4px; }
.hero-v3-scale-tick{ position:absolute; left:50%; display:flex; align-items:center; gap:10px; cursor:pointer; }
.hero-v3-scale-tick--top{ top:0; }
.hero-v3-scale-tick--mid{ top:45%; }
.hero-v3-scale-tick--bottom{ top:92%; }
.hero-v3-dot{ width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--teal); transform:translateX(-50%); transition:transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.hero-v3-scale-tick:hover .hero-v3-dot{ transform:translateX(-50%) scale(1.3); border-color:var(--orange); }
.hero-v3-label{ position:absolute; left:22px; white-space:nowrap; font-size:.78rem; color:var(--ink-soft); opacity:0; transform:translateX(-6px); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); background:#fff; padding:4px 10px; border-radius:var(--radius-sm); box-shadow:var(--elev-2); pointer-events:none; }
.hero-v3-scale-tick:hover .hero-v3-label{ opacity:1; transform:translateX(0); }
.hero-v3-scale-caption{ display:flex; justify-content:space-between; margin-top:10px; font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.68rem; color:var(--ink-soft); text-transform:uppercase; }
@media (max-width:900px){ .hero-v3-grid{ grid-template-columns:1fr; } .hero-v3-scale-panel{ order:-1; } }

/* ============ HERO — Variant 4: Capability Tour (V34 Pass 1) ============ */
.hero-v4{ background:#fff; }
.hero-v4-grid{ display:grid; grid-template-columns:1.1fr .5fr; gap:56px; align-items:center; }
.hero-v4-phone-col{ position:relative; min-height:220px; display:flex; align-items:center; justify-content:center; }
.hero-v4-phone{ position:relative; width:150px; background:#111; border-radius:24px; padding:10px 8px; box-shadow:var(--elev-4); border:1px solid rgba(255,255,255,.08); }
@media (max-width:900px){ .hero-v4-grid{ grid-template-columns:1fr; } .hero-v4-phone-col{ order:-1; margin-bottom:24px; } }

.hero-v4-strip-wrap{ margin-top:56px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
.hero-v4-strip{ display:flex; gap:16px; min-width:min-content; }
.hero-v4-panel{ flex:0 0 148px; display:flex; flex-direction:column; align-items:center; gap:10px; background:var(--paper); border:1px solid var(--line-light); border-radius:var(--radius-md); padding:18px 12px; transition:border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.hero-v4-panel:hover, .hero-v4-panel:focus-visible{ border-color:var(--orange); transform:translateY(-2px); }
.hero-v4-panel:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.hero-v4-panel[aria-selected="true"]{ border-color:var(--orange); background:var(--orange-tint); }
.hero-v4-panel-label{ font-size:.76rem; font-weight:600; color:var(--teal); text-align:center; }
.hero-v4-panel-vignette{ width:56px; height:56px; border-radius:10px; background:var(--teal); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }

/* Elevator vignette: reuses the same cabRise keyframe already defined
   above for the default hero's shaft-cab, at a smaller scale. */
.hero-v4-cab{ position:absolute; left:50%; width:18px; height:14px; margin-left:-9px; background:var(--orange); border-radius:2px; animation:cabRise 6s ease-in-out infinite; }

/* Smart-home vignette: a bulb that pulses on/off. */
.hero-v4-bulb{ width:16px; height:16px; border-radius:50%; background:var(--orange); box-shadow:0 0 12px 2px rgba(246,152,16,.7); animation:heroV4BulbPulse 2.4s ease-in-out infinite; }
@keyframes heroV4BulbPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; box-shadow:0 0 4px 0 rgba(246,152,16,.3); } }

/* BMS/IoT vignette: a traveling pulse along a line, reusing this file's
   existing flow-dot travel technique used by the automation funnel. */
.hero-v4-pulse-line{ position:absolute; left:8px; right:8px; top:50%; height:2px; background:var(--line-dark); }
.hero-v4-pulse-line::after{ content:''; position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px rgba(246,152,16,.7); animation:heroV4PulseTravel 2.2s linear infinite; }
@keyframes heroV4PulseTravel{ 0%{ left:0; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:calc(100% - 8px); opacity:0; } }

/* Water vignette: a fill level that rises and falls. */
.hero-v4-vignette-tank{ align-items:flex-end; }
.hero-v4-tank-fill{ width:32px; height:60%; background:linear-gradient(180deg, var(--orange), var(--orange-dark)); border-radius:2px; animation:heroV4TankLevel 5s ease-in-out infinite; }
@keyframes heroV4TankLevel{ 0%,100%{ height:35%; } 50%{ height:80%; } }

/* Solar/Security/Ads vignette: a small ad-screen frame cycling between
   two flat color states, standing in for "rotating ads" at this scale. */
.hero-v4-screen-ad{ width:36px; height:24px; border-radius:3px; background:var(--orange); animation:heroV4ScreenCycle 4s steps(1) infinite; }
@keyframes heroV4ScreenCycle{ 0%,45%{ background:var(--orange); } 50%,95%{ background:var(--teal-raised); } 100%{ background:var(--orange); } }

/* Vignettes stay static (first frame only) until the strip has scrolled
   into view -- JS adds .hero-v4-strip--active via IntersectionObserver.
   This satisfies the spec's "lazy-activated, not loaded/animating until
   scrolled into view" load-budget requirement (V34 spec §11). */
.hero-v4-strip:not(.hero-v4-strip--active) .hero-v4-cab,
.hero-v4-strip:not(.hero-v4-strip--active) .hero-v4-bulb,
.hero-v4-strip:not(.hero-v4-strip--active) .hero-v4-pulse-line::after,
.hero-v4-strip:not(.hero-v4-strip--active) .hero-v4-tank-fill,
.hero-v4-strip:not(.hero-v4-strip--active) .hero-v4-screen-ad{ animation-play-state:paused; }

@media (prefers-reduced-motion: reduce){
  .hero-v4-cab, .hero-v4-bulb, .hero-v4-pulse-line::after, .hero-v4-tank-fill, .hero-v4-screen-ad{ animation:none; }
}
@media (max-width:640px){ .hero-v4-panel{ flex-basis:120px; padding:14px 10px; } .hero-v4-panel-vignette{ width:46px; height:46px; } }

/* ============ Smart Home Interactive Demo (V34 Pass 1) ============ */
.shd-wrap{ max-width:720px; margin:56px auto 0; text-align:center; }
.shd-room{ margin:0 auto 32px; max-width:420px; }
.shd-room svg{ width:100%; height:auto; }
.shd-controls{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-bottom:24px; }
.shd-hotspot{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 18px; border-radius:var(--radius-md); border:1px solid var(--line-dark); background:var(--teal-raised); color:var(--fog); min-width:96px; transition:border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.shd-hotspot svg{ width:22px; height:22px; }
.shd-hotspot span{ font-size:.74rem; font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; }
.shd-hotspot:hover, .shd-hotspot:focus-visible{ border-color:var(--orange); color:#fff; }
.shd-hotspot:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.shd-hotspot[aria-pressed="true"]{ border-color:var(--orange); background:var(--orange); color:#fff; }
.shd-scenes{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:20px; }
.shd-scene-btn{ padding:10px 20px; border-radius:99px; border:1px solid var(--orange); background:transparent; color:var(--orange); font-size:.82rem; font-weight:600; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.shd-scene-btn:hover, .shd-scene-btn:focus-visible{ background:var(--orange); color:#fff; }
.shd-scene-btn:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.shd-caption{ min-height:22px; font-size:.88rem; color:var(--fog); font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; }
.sr-only-caption{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:520px){ .shd-hotspot{ min-width:80px; padding:12px; } }

/* ============ Solar badges + New Services grid (V34 Pass 1) ============ */
.how-icon-badges{ display:flex; flex-direction:column; gap:3px; margin-top:2px; }
.how-icon-badge{ font-size:.56rem; font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; letter-spacing:.03em; text-transform:uppercase; background:var(--orange); color:#fff; padding:2px 6px; border-radius:99px; }

.new-services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:44px; }
.new-service-card{ background:var(--paper); border:1px solid var(--line-light); border-radius:var(--radius-md); padding:28px; transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.new-service-card:hover{ transform:translateY(-3px); box-shadow:var(--elev-2); }
.new-service-icon{ width:44px; height:44px; border-radius:8px; background:var(--orange-tint); color:var(--orange-dark); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.new-service-icon svg{ width:20px; height:20px; }
.new-service-card h3{ font-size:1.02rem; color:var(--teal); margin-bottom:8px; }
/* v1.217 brand: light card inside a dark section — beat .section--dark h3 {#fff} */
.section--dark .new-service-card h3{ color:var(--teal); }
.new-service-icon{ color:var(--orange-ink) !important; }
.new-service-card p{ font-size:.88rem; color:var(--ink-soft); }
@media (max-width:860px){ .new-services-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .new-services-grid{ grid-template-columns:1fr; } }

/* ============ One App Controls Everything (V34 Pass 1) ============ */
.oad-wrap{ display:flex; justify-content:center; margin-top:20px; }
.oad-phone{ width:220px; background:#111; border-radius:26px; padding:14px 12px; box-shadow:var(--elev-4); border:1px solid rgba(255,255,255,.08); }
.oad-tablist{ display:flex; gap:4px; margin:10px 0 14px; background:rgba(255,255,255,.06); border-radius:8px; padding:3px; }
.oad-tab{ flex:1; background:transparent; border:none; color:var(--fog); font-size:.66rem; font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; text-transform:uppercase; letter-spacing:.03em; padding:8px 4px; border-radius:6px; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.oad-tab[aria-selected="true"]{ background:var(--orange); color:#fff; }
.oad-tab:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.oad-panel{ background:linear-gradient(180deg,var(--teal-raised),var(--teal-deep)); border-radius:13px; padding:16px 12px; display:flex; flex-direction:column; gap:12px; align-items:center; min-height:120px; }
.oad-stat{ text-align:center; }
.oad-stat-value{ display:block; font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:1.6rem; font-weight:700; color:var(--orange); }
.oad-stat-label{ font-size:.62rem; color:var(--fog); text-transform:uppercase; letter-spacing:.05em; }
.oad-action-btn{ width:100%; padding:10px 0; border-radius:8px; border:1px solid var(--orange); background:rgba(246,152,16,.14); color:#fff; font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; transition:background var(--dur-fast) var(--ease-out); }
.oad-action-btn:hover, .oad-action-btn:focus-visible{ background:rgba(246,152,16,.28); }
.oad-action-btn:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.oad-action-btn--alert{ border-color:#e05252; background:rgba(224,82,82,.14); }
.oad-action-btn--alert:hover, .oad-action-btn--alert:focus-visible{ background:rgba(224,82,82,.28); }
.oad-action-btn--alert:focus-visible{ outline-color:#e05252; }
.oad-confirm{ font-size:.66rem; color:var(--fog); text-align:center; min-height:16px; }
.oad-ad-carousel{ width:100%; height:64px; border-radius:8px; overflow:hidden; position:relative; background:var(--teal-deep); }
.oad-ad-slide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.66rem; color:var(--fog); opacity:0; animation:oadAdCycle 6s ease-in-out infinite; }
.oad-ad-slide--active{ opacity:1; }
.oad-ad-slide:nth-child(2){ animation-delay:3s; }
@keyframes oadAdCycle{ 0%,45%{ opacity:1; } 50%,95%{ opacity:0; } 100%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .oad-ad-slide{ animation:none; }
  .oad-ad-slide--active{ opacity:1; }
}
.oad-toggle-row{ width:100%; display:flex; align-items:center; justify-content:space-between; }
.oad-toggle-row span{ font-size:.72rem; color:#fff; }
.oad-scenes{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.oad-scenes .shd-scene-btn{ padding:7px 12px; font-size:.68rem; }

/* ---------- CHAT-01: public live chat widget (assets/js/chat-widget.js) ----------
   Sits above .whatsapp-widget-fab in the same bottom-right corner (that fab is
   feature-flagged and may not be rendered at all -- this stacks correctly
   either way rather than depending on it being present). Open/close is a
   plain opacity+transform transition; the blanket prefers-reduced-motion
   rule in assets/css/style.css already zeroes every transition duration
   site-wide, so this needs no reduced-motion rule of its own. */
.chat-widget-launcher{
  position:fixed; right:20px; bottom:90px; z-index:151;
  width:56px; height:56px; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange); color:#fff; box-shadow:var(--elev-4);
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.chat-widget-launcher:hover{ transform:translateY(-2px) scale(1.05); background:var(--orange-dark); }
.chat-widget-launcher svg{ width:24px; height:24px; position:absolute; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.chat-widget-launcher-icon-close{ opacity:0; transform:scale(.6) rotate(-45deg); }
.chat-widget-launcher.is-open .chat-widget-launcher-icon-open{ opacity:0; transform:scale(.6) rotate(45deg); }
.chat-widget-launcher.is-open .chat-widget-launcher-icon-close{ opacity:1; transform:none; }
@media (max-width:600px){ .chat-widget-launcher{ width:50px; height:50px; right:16px; bottom:78px; } .chat-widget-launcher svg{ width:21px; height:21px; } }

.chat-widget-panel{
  position:fixed; right:20px; bottom:156px; z-index:150;
  width:min(340px, calc(100vw - 32px)); max-height:min(500px, calc(100vh - 190px));
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--elev-4); border:1px solid var(--line-light);
  opacity:0; transform:translateY(16px) scale(.97); pointer-events:none; visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
/* M-07 pattern (cf. .mobile-menu): with visibility:hidden the closed panel's
   controls leave the tab order entirely; the closed flip is delayed by the
   transition duration so the fade-out finishes first, and opening flips
   visibility immediately. */
.chat-widget-panel.is-open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s; }
@media (max-width:600px){ .chat-widget-panel{ right:16px; bottom:138px; } }

.chat-widget-header{ background:var(--teal); color:#fff; padding:16px 18px; }
.chat-widget-header strong{ display:block; font-family:'Satoshi',sans-serif; font-size:.98rem; }
.chat-widget-subhead{ display:block; font-size:.74rem; color:var(--fog); margin-top:2px; }

.chat-widget-body{ display:flex; flex-direction:column; flex:1; min-height:0; padding:14px 16px 16px; gap:10px; }
.chat-widget-messages{ flex:1; min-height:60px; max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding-right:2px; }
/* No messages yet = reserve no space at all (intake mode hugs the form). */
.chat-widget-messages:empty{ display:none; }

.chat-widget-msg{ max-width:86%; }
.chat-widget-msg-who{ font-size:.68rem; font-weight:600; margin-bottom:2px; }
.chat-widget-msg-body{ font-size:.86rem; line-height:1.45; padding:8px 11px; border-radius:10px; white-space:pre-wrap; word-break:break-word; }
.chat-widget-msg--visitor{ align-self:flex-end; text-align:right; }
.chat-widget-msg--visitor .chat-widget-msg-who{ color:var(--orange-dark); }
.chat-widget-msg--visitor .chat-widget-msg-body{ background:var(--orange-tint); color:var(--ink); border-bottom-right-radius:3px; }
.chat-widget-msg--staff{ align-self:flex-start; }
.chat-widget-msg--staff .chat-widget-msg-who{ color:var(--teal); }
.chat-widget-msg--staff .chat-widget-msg-body{ background:var(--paper); color:var(--ink); border:1px solid var(--line-light); border-bottom-left-radius:3px; }

.chat-widget-intake, .chat-widget-send{ display:flex; flex-direction:column; gap:8px; }
/* The [hidden] attribute must always win over these display:flex rules --
   without this the send bar leaks underneath the intake form (v1.109 fix). */
.chat-widget-intake[hidden], .chat-widget-send[hidden]{ display:none; }
.chat-widget-intake-hint{ font-size:.78rem; color:var(--ink-soft); margin-bottom:2px; }
.chat-widget-intake input, .chat-widget-intake textarea, .chat-widget-send textarea{
  width:100%; border:1px solid var(--line-light); border-radius:8px; padding:9px 11px;
  font:inherit; font-size:.86rem; color:var(--ink); background:var(--paper); resize:none;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.chat-widget-intake input:focus, .chat-widget-intake textarea:focus, .chat-widget-send textarea:focus{ outline:none; border-color:var(--orange); }
.chat-widget-intake .btn{ align-self:flex-start; margin-top:2px; }

/* M-08: the chat intake (and composer) use the same floating-label pattern
   as the contact form — .field--floating markup, generic label styles from
   the Item-17 block below. These chat-scoped rules win over
   marketing-apple.css's flat-field padding (file loads after this one) and
   size the composer so it stays a slim chat bar. */
.chat-widget-intake .field--floating, .chat-widget-send .field--floating{ position:relative; display:block; }
.chat-widget-send .field--floating{ flex:1; }
.chat-widget-intake .field--floating input, .chat-widget-intake .field--floating textarea,
.chat-widget-send .field--floating textarea{ padding:20px 13px 8px; }
.chat-widget-intake .field--floating textarea{ min-height:64px; }
.chat-widget-send .field--floating textarea{ min-height:38px; resize:none; }

.chat-widget-send{ flex-direction:row; align-items:flex-end; gap:8px; }
.chat-widget-send textarea{ flex:1; }
.chat-widget-send-btn{ flex-shrink:0; width:38px; height:38px; border-radius:8px; border:none; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; transition:background var(--dur-fast) var(--ease-out); }
.chat-widget-send-btn:hover{ background:var(--orange-dark); }
.chat-widget-send-btn svg{ width:17px; height:17px; }

.chat-widget-note{ font-size:.68rem; color:var(--ink-soft); text-align:center; margin-top:2px; }
.chat-widget-error{ font-size:.78rem; color:#c0392b; }
.chat-widget-closed-note{ font-size:.78rem; color:var(--ink-soft); text-align:center; font-style:italic; }

/* ---------- V35: "How we work — floor by floor" journey board ----------
   Replaces the removed one-app demo. Same visual language as the
   directory-board rows; each step is a "floor" with a mono floor number,
   plain-language copy, and a small proof chip / CTA on the right. */
.journey-board{ border:1px solid var(--line-light); border-radius:8px; overflow:hidden; background:#fff; box-shadow:var(--elev-3); margin-top:36px; }
.journey-row{ display:grid; grid-template-columns:64px 1fr auto; gap:22px; align-items:center; padding:22px 28px; border-top:1px solid var(--line-light); transition:background var(--dur-fast) var(--ease-out); }
.journey-row:first-child{ border-top:none; }
.journey-row:hover{ background:var(--orange-tint); }
.journey-floor{ font-weight:700; font-size:1.05rem; color:var(--orange-dark); background:var(--orange-tint); border:1px solid var(--orange); border-radius:8px; width:52px; height:52px; display:flex; align-items:center; justify-content:center; }
.journey-row--top .journey-floor{ background:var(--orange); color:var(--teal); }
.journey-floor{ color:var(--orange-ink); } /* v1.217 brand: 5.1:1 on the orange tint (was 2.6:1) */
.journey-row h3{ font-size:1.02rem; color:var(--teal); margin-bottom:4px; }
.journey-row p{ font-size:.9rem; color:var(--ink-soft); max-width:560px; }
.journey-cta{ font-size:.74rem; color:var(--ink-soft); text-align:right; }
.journey-row--top .journey-cta{ color:var(--orange-dark); font-weight:600; }
@media (max-width:720px){
  .journey-row{ grid-template-columns:52px 1fr; }
  .journey-cta{ grid-column:2; text-align:left; }
}

/* ---------- V35: clickable lift control panel (floor indicator upgrade) ----------
   The fixed scroll widget becomes an interactive lift: one button per
   [data-floor] section; clicking "calls the lift" to that floor (smooth
   scroll) and the car animates there via the existing observer in
   marketing.js. Buttons are generated by marketing.js from the sections,
   so no markup duplication. Desktop only (as before). */
.floor-indicator{ pointer-events:auto; background:#fff; border:1px solid var(--line-light); border-radius:10px; padding:10px 8px 8px; box-shadow:var(--elev-2); opacity:1; }
.floor-indicator-label{ margin:2px auto 8px; display:block; }
.floor-indicator-track{ margin-bottom:8px; }
.floor-indicator-buttons{ display:flex; flex-direction:column; gap:3px; }
.floor-indicator-btn{
  position:relative;
  font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.58rem; font-weight:600; letter-spacing:.04em;
  color:var(--ink-soft); background:var(--paper); border:1px solid var(--line-light);
  border-radius:5px; width:34px; height:22px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
/* M-09: 22px-tall rail button gets a >=44px hit area via hit-slop. */
.floor-indicator-btn::after{ content:''; position:absolute; inset:-11px; }
.floor-indicator-btn:hover{ background:var(--orange); border-color:var(--orange); color:#fff; transform:translateX(-2px); }
.floor-indicator-btn:focus-visible{ outline:2px solid var(--orange); outline-offset:1px; }
.floor-indicator-btn.is-current{ background:var(--teal); border-color:var(--teal); color:#fff; }
.floor-indicator-btn:active{ transform:scale(.92); }
@media (max-width:900px){ .floor-indicator{ display:none; } }
@media (prefers-reduced-motion: reduce){ .floor-indicator-btn{ transition:none; } }

/* ---------- V34 Phase 3: sticky mobile action bar ----------
   Small screens only — on desktop the nav CTA is always visible. Slides
   down out of view (marketing.js adds .is-hidden) while the final contact
   section is on screen so the two never compete. Sits above the WhatsApp
   widget's bottom offset so nothing overlaps. */
.mobile-cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:140;
  display:none; align-items:stretch; gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--line-light);
  box-shadow:0 -6px 20px rgba(0,20,24,.08);
  transform:translateY(0);
  transition:transform .3s var(--ease-cinematic), opacity .25s ease;
}
.mobile-cta-bar.is-hidden{ transform:translateY(110%); opacity:0; pointer-events:none; }
.mobile-cta-wa{
  display:inline-flex; align-items:center; gap:7px; padding:11px 16px;
  border-radius:4px; border:1px solid #25D366; color:#0B7A3F; /* v1.217: WhatsApp green darkened to 5.4:1 */
  font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.76rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out);
}
.mobile-cta-wa:hover{ background:#e8faf0; }
@media (max-width:640px){ .mobile-cta-bar{ display:flex; } }
@media (prefers-reduced-motion: reduce){ .mobile-cta-bar{ transition:none; } }

/* ==========================================================================
   Homepage refinement pass — logo, floor indicator, hover lifts, flow
   connectors, the IoT Gateway diagram, and animated-form components
   (items 1, 7, 8, 12, 13, 16, 17, 18). Reuses this file's existing tokens
   and flow-dot/how-connector visual language rather than inventing a new one.
   ========================================================================== */

/* ---------- Item 7: fixed scroll elevator indicator ---------- */
.floor-indicator{ position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:90; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; opacity:.85; }
.floor-indicator-track{ position:relative; width:3px; height:150px; border-radius:3px; background:var(--line-light); overflow:hidden; }
.floor-indicator-car{ position:absolute; left:50%; top:0; width:11px; height:11px; margin-left:-4px; border-radius:3px; background:var(--orange); box-shadow:0 0 8px rgba(246,152,16,.6); transition:top var(--dur-slow) var(--ease-cinematic); }
.floor-indicator-label{ font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; font-size:.66rem; font-weight:600; letter-spacing:.06em; color:var(--teal); background:#fff; border:1px solid var(--line-light); border-radius:99px; padding:2px 8px; min-width:20px; text-align:center; transition:opacity var(--dur-fast) var(--ease-cinematic); }
@media (max-width:900px){ .floor-indicator{ display:none; } }

/* ---------- Item 13: soft hover lifts (transform + shadow only) ---------- */
.hover-lift{ transition:transform var(--dur-base) var(--ease-cinematic), box-shadow var(--dur-base) var(--ease-cinematic); }
.hover-lift:hover{ transform:translateY(-4px); box-shadow:var(--elev-3); }
@media (prefers-reduced-motion: reduce){ .hover-lift:hover{ transform:none; } }

/* ---------- Item 18: cinematic flow connectors between sections ---------- */
.flow-connector{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 0; background:var(--paper); }
.section--dark + .flow-connector, .flow-connector + .section--dark{ background:var(--teal); }
.flow-connector-line{ width:1px; height:26px; background:var(--line-light); }
.flow-connector-arrow{ font-size:.85rem; color:var(--orange-dark); animation:flowArrowNudge 2.4s var(--ease-cinematic) infinite; }
@keyframes flowArrowNudge{ 0%,100%{ transform:translateY(0); opacity:.65; } 50%{ transform:translateY(5px); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .flow-connector-arrow{ animation:none; opacity:.8; } }

/* V34 Phase 1: the connector line draws itself downward once the connector
   scrolls into view (marketing.js's reveal observer adds .is-visible to
   .flow-connector, which also carries .reveal). */
.flow-connector .flow-connector-line{
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform .7s var(--ease-cinematic) .15s;
}
.flow-connector.is-visible .flow-connector-line{ transform:scaleY(1); }
@media (prefers-reduced-motion: reduce){ .flow-connector .flow-connector-line{ transition:none; transform:none; } }

/* ---------- V34 Phase 1: hero entrance sequence (default variant only) ----------
   Staggers the hero's text column up on first paint. Scoped to .hero —
   other sections reuse .hero-ctas further down the page. The h1 is
   excluded — it carries its own word-level rise (see motion.css /
   marketing.js). The blanket reduced-motion rule in style.css zeroes the
   durations, and `both` fill mode then snaps to the final state. */
.hero .eyebrow, .hero .lede, .hero .hero-ctas, .hero .hero-proof{
  animation:heroRise .7s var(--ease-cinematic) both;
}
.hero .lede{ animation-delay:.1s; }
.hero .hero-ctas{ animation-delay:.2s; }
.hero .hero-proof{ animation-delay:.32s; }
@keyframes heroRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- V34 Phase 1: feature-list checkmarks draw themselves in ----------
   All feature-list SVGs here are simple stroke paths; animating the dash
   offset as the enclosing .reveal fades in makes the ticks "draw". Scoped
   to .reveal ancestors so admin/portal uses of .feature-item are untouched. */
.reveal .feature-item svg path{ stroke-dasharray:30; stroke-dashoffset:30; transition:stroke-dashoffset .5s var(--ease-cinematic); }
.reveal.is-visible .feature-item svg path{ stroke-dashoffset:0; }
.reveal .feature-item:nth-child(2) svg path{ transition-delay:.06s; }
.reveal .feature-item:nth-child(3) svg path{ transition-delay:.12s; }
.reveal .feature-item:nth-child(4) svg path{ transition-delay:.18s; }
.reveal .feature-item:nth-child(5) svg path{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){ .reveal .feature-item svg path{ transition:none; stroke-dashoffset:0; } }

/* ---------- Item 12: Smartrise IoT Gateway motion diagram ---------- */
.iot-gateway-diagram{ display:flex; flex-direction:column; align-items:center; gap:0; padding:36px 20px; border-radius:var(--radius-lg); background:var(--paper); border:1px solid var(--line-light); }
.iot-gateway-node{ display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--teal); }
.iot-gateway-node svg{ width:26px; height:26px; }
.iot-gateway-node span{ font-size:.74rem; font-family:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace; color:var(--ink-soft); }
.iot-gateway-node--hub{ color:var(--orange-dark); }
.iot-gateway-node--hub span{ font-weight:700; color:var(--teal); }
.iot-gateway-connector{ margin:4px auto; }
.iot-gateway-node-group{ display:flex; gap:22px; }
.iot-gateway-node--small span{ font-size:.7rem; }
@media (max-width:520px){ .iot-gateway-node-group{ gap:14px; } }

/* ---------- Item 17: floating-label animated form (contact page) ---------- */
.contact-form-animated .field--floating{ position:relative; margin-bottom:22px; opacity:0; transform:translateY(10px); animation:fieldStagger .5s var(--ease-cinematic) forwards; }
.contact-form-animated .field--floating:nth-child(2){ animation-delay:.06s; }
.contact-form-animated .field--floating:nth-child(3){ animation-delay:.12s; }
.contact-form-animated .field--floating:nth-child(4){ animation-delay:.18s; }
.contact-form-animated .field--floating:nth-child(5){ animation-delay:.24s; }
.contact-form-animated button[type="submit"]{ opacity:0; transform:translateY(10px); animation:fieldStagger .5s var(--ease-cinematic) forwards; animation-delay:.3s; }
@keyframes fieldStagger{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .contact-form-animated .field--floating, .contact-form-animated button[type="submit"]{ animation:none; opacity:1; transform:none; } }

.field--floating input, .field--floating textarea{
  width:100%; border:1px solid var(--line-light); border-radius:6px; padding:20px 13px 8px;
  font:inherit; font-size:.94rem; background:#fff; color:var(--ink);
  transition:border-color var(--dur-base) var(--ease-cinematic), box-shadow var(--dur-base) var(--ease-cinematic);
}
.field--floating textarea{ min-height:110px; resize:vertical; }
.field--floating label{
  position:absolute; left:13px; top:19px; font-size:.94rem; color:var(--ink-soft);
  pointer-events:none; transform-origin:left top;
  transition:transform var(--dur-base) var(--ease-cinematic), color var(--dur-base) var(--ease-cinematic), top var(--dur-base) var(--ease-cinematic);
}
.field--floating input:focus, .field--floating textarea:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 4px rgba(246,152,16,.16); }
.field--floating input:focus ~ label,
.field--floating input:not(:placeholder-shown) ~ label,
.field--floating textarea:focus ~ label,
.field--floating textarea:not(:placeholder-shown) ~ label{
  top:7px; transform:scale(.74); color:var(--orange-dark); font-weight:600;
}

/* ---------- Item 17: success check animation ---------- */
.contact-success-icon--animated{ animation:successPop .5s var(--ease-cinematic) both; }
@keyframes successPop{ 0%{ transform:scale(.3); opacity:0; } 70%{ transform:scale(1.12); opacity:1; } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .contact-success-icon--animated{ animation:none; } }

/* ---------- Item 16: embedded, theme-styled Google Map ---------- */
.contact-map-embed{ margin-top:14px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line-light); box-shadow:var(--elev-1); }
.contact-map-embed iframe{ display:block; width:100%; height:220px; border:0; }
.contact-map-open-link{ display:inline-block; margin-top:8px; font-size:.85rem; color:var(--orange-dark); border-bottom:1px solid var(--orange); }

/* ==========================================================================
   v1.227 — homepage improvements (design: "Smartrise Homepage Improvements")
   ========================================================================== */

/* "Four more ways": heading on the left, a 2 x 2 of cards on the right
   (was 3 + 1 with a lone card). */
.new-services-layout{ display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:64px; align-items:start; }
.new-services-layout .new-services-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:0; }
@media (max-width:1024px){ .new-services-layout{ grid-template-columns:1fr; gap:36px; } }
@media (max-width:560px){ .new-services-layout .new-services-grid{ grid-template-columns:1fr; } }

/* Trust row: five across on wide screens (was 3 + 2), rule-topped columns. */
@media (min-width:1100px){
  .trust-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px; }
  .trust-grid .trust-card{ padding-top:18px; border-top:2px solid var(--line-light); }
  .trust-grid .trust-card:first-child{ border-top-color:var(--orange); }
  .trust-grid .trust-card .icon-wrap{ display:none; }
}
@media (min-width:801px) and (max-width:1099px){
  .trust-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trust-grid .trust-card:last-child{ grid-column:1 / -1; }
}

/* Projects: featured case study + cards. The old "Our work" cards
   (.work-grid / .work-card) had no styles at all — a published project
   showed as an unstyled stack with full-size photos. */
.projects-head{ margin-bottom:36px; }
.project-feature{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-radius:18px; overflow:hidden; background:var(--teal); color:#fff; }
.project-feature-photo{ min-height:360px; background:var(--teal-raised); display:flex; align-items:center; justify-content:center; }
.project-feature-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.project-feature-body{ padding:44px; display:flex; flex-direction:column; gap:16px; min-width:0; }
.project-feature-body h3{ margin:0; font-family:var(--font-display); font-size:clamp(1.5rem,2.2vw,1.9rem); line-height:1.15; color:#fff; text-wrap:balance; }
.project-feature-body p{ margin:0; font-size:1rem; line-height:1.6; color:#C9D6D8; }
.project-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.project-tag{ font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.25); color:#fff; }
.project-tag--status{ border-color:transparent; background:rgba(255,255,255,.14); }
.project-tag--in_progress{ background:var(--orange); color:var(--teal-deep); }
.project-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:6px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); }
.project-facts div{ display:flex; flex-direction:column-reverse; gap:2px; min-width:0; }
.project-facts dt{ font-size:.8rem; color:var(--fog); }
.project-facts dd{ margin:0; font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--orange); overflow-wrap:anywhere; }
.work-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:24px; margin-top:24px; }
.work-card{ display:flex; flex-direction:column; border:1px solid var(--line-light); border-radius:14px; overflow:hidden; background:#fff; }
.work-card-photo{ position:relative; aspect-ratio:16/10; max-height:260px; width:100%; background:#EEF2F3; display:flex; align-items:center; justify-content:center; }
.work-card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.work-card-noimg{ color:var(--ink-soft); opacity:.5; }
.work-card-noimg svg{ width:40px; height:40px; }
.work-status{ position:absolute; left:12px; top:12px; font-size:.7rem; font-weight:600; padding:4px 9px; border-radius:999px; background:#fff; color:var(--teal); }
.work-status--in_progress{ background:var(--orange); color:var(--teal-deep); }
.work-card-body{ padding:20px; display:flex; flex-direction:column; gap:8px; }
.work-card-body .work-type{ font-size:.7rem; letter-spacing:.04em; color:var(--orange-ink); text-transform:uppercase; }
.work-card-body h3{ margin:0; font-size:1.15rem; color:var(--teal); }
.work-card-body p{ margin:0; font-size:.92rem; line-height:1.55; color:var(--ink-soft); }
@media (max-width:900px){
  .project-feature{ grid-template-columns:1fr; }
  .project-feature-photo{ min-height:220px; }
  .project-feature-body{ padding:24px; }
  .work-grid{ grid-template-columns:1fr; }
}

/* Phone first screen: one bottom bar instead of three floating controls.
   The staff button lives in the footer ("Staff login"); the WhatsApp
   bubble and the chat bubble become tiles in the bar (the chat launcher
   reappears only as the panel's close button while the chat is open). */
.mobile-cta-tile{ display:none; }
@media (max-width:640px){
  .staff-login-fab, .staff-fab-toggle, .whatsapp-widget-fab{ display:none !important; }
  .chat-widget-launcher:not(.is-open){ display:none; }
  .nav-right > .btn--primary{ display:none; }
  .mobile-cta-bar{ display:grid; grid-template-columns:auto auto minmax(0,1fr); gap:8px; }
  .mobile-cta-bar .mobile-cta-wa, .mobile-cta-tile{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:58px; min-height:48px; padding:4px 8px; border-radius:12px; border:0; font:600 .68rem/1.1 var(--font-body, system-ui), sans-serif; letter-spacing:0; text-transform:none; cursor:pointer; }
  .mobile-cta-bar .mobile-cta-wa{ background:#E8F5EE; color:#0B6B37; }
  .mobile-cta-tile{ background:var(--orange-tint); color:var(--orange-ink); }
  .mobile-cta-tile[hidden]{ display:none; }
  .mobile-cta-bar .btn--primary{ border-radius:999px; }
  #hero .hero-trust{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  #hero .hero-trust span{ border-radius:10px; padding:10px; font-weight:600; align-items:flex-start; }
}

/* v1.246 REVIEWS-1/2 — customer comments + project story links */
.home-reviews { background: var(--paper); }
.home-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 28px; }
.home-review { margin: 0; background: #fff; border: 1px solid var(--line-light); border-radius: 14px; padding: 20px 22px; display: grid; gap: 14px; align-content: space-between; }
.home-review blockquote { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink); }
.home-review figcaption { display: grid; gap: 2px; font-size: .84rem; }
.home-review figcaption strong { color: var(--teal); }
.home-review figcaption span { color: var(--ink-soft); }
.home-reviews-note { margin: 16px 0 0; font-size: .8rem; color: var(--ink-soft); }
.project-story-link { color: inherit; text-decoration: none; }
.project-story-link:hover { color: var(--orange-ink); text-decoration: underline; }
.project-story-btn { margin-top: 14px; }