body{margin:0;background:#ffffff}
a{color:#17191c;text-decoration:none}a:hover{color:#17191c}
::placeholder{color:#a3a6af}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header + progress */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.prog{display:none;position:absolute;left:0;bottom:0;height:2px;width:100%;background:#17191c;transform-origin:0 50%;transform:scaleX(0)}
.nav-links{display:flex;gap:32px}

/* links + buttons */
.ul{background:linear-gradient(#17191c,#17191c) no-repeat 0 100%/0 1px;transition:background-size .45s cubic-bezier(.2,.7,.2,1)}
.ul:hover{background-size:100% 1px}
.btn{position:relative;overflow:hidden;isolation:isolate;transition:color .4s cubic-bezier(.2,.7,.2,1)}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:#17191c;transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.btn-ghost:hover{color:#ffffff}
.btn-ghost:hover::before{transform:scaleY(1)}
.arr{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
a:hover .arr,button:hover .arr{transform:translateX(5px)}

/* hero: word reveal + rotator */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.w>*{display:inline-block}
@keyframes up{from{transform:translateY(110%)}to{transform:translateY(0)}}
/* banner headline: each letter grows up from its baseline, words start together so the line ripples in (71three-style) */
.ch{display:inline-block;transform-origin:50% 100%;animation:chr .6s cubic-bezier(.23,1,.32,1) both;will-change:transform}
@keyframes chr{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* same letter ripple on the Why Seven365 heading, played when it scrolls into view */
.chs .wd{display:inline-block;white-space:nowrap}
.chs .ch2{display:inline-block;transform-origin:50% 100%;transform:scaleY(0)}
.chs.go .ch2{animation:chr .6s cubic-bezier(.23,1,.32,1) both}
.fade{animation:fadeup .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes fadeup{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
.rot{display:inline-block;height:1.4em;overflow:hidden;vertical-align:bottom}
.rot-in{display:flex;flex-direction:column;animation:rot 15s cubic-bezier(.7,0,.3,1) infinite}
.rot-in>span{display:block;height:1.4em;line-height:1.4em;white-space:nowrap}
@keyframes rot{0%,13%{transform:translateY(0)}16.66%,29.66%{transform:translateY(-1.4em)}33.33%,46.33%{transform:translateY(-2.8em)}50%,63%{transform:translateY(-4.2em)}66.66%,79.66%{transform:translateY(-5.6em)}83.33%,96.33%{transform:translateY(-7em)}100%{transform:translateY(-8.4em)}}

/* hero collage */
.collage{position:relative;min-height:560px}
.fl{position:absolute;animation:fadeup 1s cubic-bezier(.2,.7,.2,1) both,drift 7s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.f1{top:0;left:0;width:300px;animation-delay:.5s,1.5s}
.f2{top:96px;right:0;width:250px;animation-delay:.65s,2.3s}
.f3{bottom:72px;left:24px;width:300px;animation-delay:.8s,1.9s}
.f4{bottom:0;right:16px;width:320px;animation-delay:.95s,2.7s}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.8s cubic-bezier(.4,0,.2,1) 1.2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* marquee */
.mq{display:flex;width:max-content;animation:mq 40s linear infinite}
.mq-wrap:hover .mq{animation-play-state:paused}
.mq-rev{animation-direction:reverse;animation-duration:52s}
.mq-row{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.outline{color:#17191c;-webkit-text-stroke:0}
.dot{display:inline-block;width:.16em;height:.16em;border-radius:9999px;background:#EB261E;vertical-align:middle;margin:0 .5em}
@keyframes mq{to{transform:translateX(-50%)}}

/* cards */
.card{transition:translate .4s cubic-bezier(.23,1,.32,1),box-shadow .5s cubic-bezier(.2,.7,.2,1),background-color .5s}
@media (hover:hover) and (pointer:fine){
.card:hover{translate:0 -6px;background-color:#ffffff !important;box-shadow:rgba(4,23,43,.05) 0 0 0 1px,rgba(0,0,0,.1) 0 20px 25px -5px,rgba(0,0,0,.1) 0 8px 10px -6px}
.stag.in>.card:hover{transition:translate .4s cubic-bezier(.23,1,.32,1),box-shadow .5s cubic-bezier(.2,.7,.2,1),background-color .5s}
}
.card .ico{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .ico{transform:rotate(-8deg) scale(1.08)}

/* drag gallery */
.track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x proximity;user-select:none;-webkit-user-select:none;scrollbar-width:none;padding-bottom:8px}
/* app gallery: room above and below the cards inside the scroller so their frosted edge and drop shadow aren't cut off */
#apps .track{padding-top:40px;padding-bottom:72px;margin-top:-40px;margin-bottom:-72px;scroll-snap-type:none}
.track::-webkit-scrollbar{display:none}
.track>*{scroll-snap-align:start;flex:0 0 auto}
.bubble{position:absolute;top:0;left:0;pointer-events:none;z-index:5;transition:scale .3s cubic-bezier(.2,.7,.2,1)}
@media (pointer:fine){.drag{cursor:none}}
@media (pointer:coarse){.bubble{display:none}}

/* faq */
.faq summary{list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.faq details[open] .pm{transform:rotate(45deg)}
@media (min-width:900px){.faq-side{position:sticky;top:120px;align-self:flex-start}}
.faq details{will-change:transform,opacity}
.faq details[open] .ans{animation:fadeup .5s cubic-bezier(.2,.7,.2,1) both}

/* reveal on enter (IntersectionObserver adds .in — works in every browser and inside the canvas) */
/* hidden states apply only once the script has armed the observer (html.rv-on), so content never stays invisible */
.rv{transition:opacity 1s cubic-bezier(.23,1,.32,1),translate 1s cubic-bezier(.23,1,.32,1)}
.rv-on .rv:not(.in){opacity:0;translate:0 48px}
/* slider panels move in sideways already: never leave their copy waiting on the scroll-reveal observer */
.rv-on .hpin-panel .rv:not(.in){opacity:1;translate:none}
.sgrid>.rv:nth-child(2){transition-delay:100ms}
.sgrid>.rv:nth-child(3){transition-delay:200ms}
.sgrid>.rv:nth-child(4){transition-delay:300ms}
.stag>*{transition:opacity .9s cubic-bezier(.23,1,.32,1),translate .9s cubic-bezier(.23,1,.32,1),transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s cubic-bezier(.2,.7,.2,1),background-color .5s}
.rv-on .stag:not(.in)>*{opacity:0;translate:0 40px}
.stag>*:nth-child(2){transition-delay:80ms,80ms,0s,0s,0s}
.stag>*:nth-child(3){transition-delay:160ms,160ms,0s,0s,0s}
.stag>*:nth-child(4){transition-delay:240ms,240ms,0s,0s,0s}
.stag>*:nth-child(5){transition-delay:320ms,320ms,0s,0s,0s}
.stag>*:nth-child(6){transition-delay:400ms,400ms,0s,0s,0s}
.stag>*:nth-child(7){transition-delay:480ms,480ms,0s,0s,0s}
.mask{transition:clip-path 1.3s cubic-bezier(.77,0,.175,1)}
.rv-on .mask:not(.in){clip-path:inset(14% 10% 14% 10% round 24px)}
.mask>*{transition:scale 1.6s cubic-bezier(.23,1,.32,1)}
.rv-on .mask:not(.in)>*{scale:1.15}
.grow{transition:opacity 1.2s cubic-bezier(.23,1,.32,1),scale 1.2s cubic-bezier(.23,1,.32,1)}
.rv-on .grow:not(.in){opacity:.3;scale:.94}

/* scroll-linked motion (moves with the scrollbar where supported; static elsewhere) */
@supports (animation-timeline: view()){
.prog{display:block;animation:prog linear both;animation-timeline:scroll(root)}
@keyframes prog{to{transform:scaleX(1)}}
.hdr{animation:shrink linear both;animation-timeline:scroll(root);animation-range:0 240px}
@keyframes shrink{to{box-shadow:0 1px 0 #ececec}}
.card .ico{animation:icospin linear both;animation-timeline:view();animation-range:cover}
@keyframes icospin{from{rotate:-12deg}to{rotate:12deg}}
}

@media (max-width:960px){
.nav-links,.hide-sm{display:none}
.collage{min-height:0;display:flex;flex-direction:column;gap:16px;align-items:center;margin-top:40px}
.fl{position:static;width:100%;max-width:360px}
.f2,.f4{display:none}
}
@media (max-width:760px){.mock-side{display:none}}
.ul-l{background-image:linear-gradient(#ffffff,#ffffff)}
.btn-light::before{content:"";position:absolute;inset:0;z-index:-1;background:#ffffff;transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.btn-light:hover{color:#17191c !important}
.btn-light:hover::before{transform:scaleY(1)}
@media (min-width:640px){.h-nw{white-space:nowrap}}
/* cursor highlight: a 30px inverting disc that trails the pointer; grows on links, becomes a label bubble on [data-cc] */
.cc-dot,.cc-label{position:fixed;left:0;top:0;z-index:300;pointer-events:none;display:none;will-change:transform}
.cc-on .cc-dot{display:block}
.cc-on .cc-label{display:flex}
.cc-dot{margin:-30px 0 0 -30px;width:60px;height:60px;border-radius:9999px;background:#ffffff;mix-blend-mode:difference;transition:scale .35s cubic-bezier(.23,1,.32,1),opacity .2s ease,background-color .25s ease}
.cc-link .cc-dot{scale:1.5}
/* over text: the disc hides and only the letters inside a 60px circle around the pointer turn red (text-clipped radial gradient) */
.cc-text .cc-dot{opacity:0}
.cc-red-s .cc-dot{background:#EB261E;mix-blend-mode:screen}
.cc-red-m .cc-dot{background:#EB261E;mix-blend-mode:multiply}
@property --cc-r{syntax:'<length>';inherits:false;initial-value:0px}
.cc-hl{--cc-r:30px;transition:--cc-r .35s cubic-bezier(.23,1,.32,1)}
.cc-hl{background-image:radial-gradient(circle var(--cc-r) at var(--mx, -999px) var(--my, -999px), var(--cc-hc, #EB261E) 0 97%, var(--cc-c) 100%) !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent}
.cc-lab .cc-dot,.cc-hide .cc-dot{opacity:0}
.cc-label{margin:-43px 0 0 -43px;width:86px;height:86px;border-radius:9999px;background:#17191c;color:#ffffff;align-items:center;justify-content:center;font-size:13px;font-weight:500;letter-spacing:.02em;scale:.4;opacity:0;transition:scale .35s cubic-bezier(.23,1,.32,1),opacity .2s ease}
.cc-lab .cc-label{scale:1;opacity:1}
.cc-on [data-cc]{cursor:none}
.bubble{display:none !important}
/* solutions 01–03: pinned stage, vertical scroll drives a horizontal track */
@media (max-width:760px){
.hpin{height:auto !important}
.hpin-stage{position:static !important;height:auto !important;overflow:visible !important}
.hpin-track{width:100% !important;flex-direction:column;gap:0;transform:none !important}
/* phones: each Why Seven365 screen stacks as its own full-width block */
.hpin-panel{padding:64px 20px !important;gap:32px !important}
.hpin-panel.why-red{min-height:min(78vh,620px);padding:96px 20px !important}
.hpin-panel.why-red h2{font-size:clamp(40px,11vw,52px) !important}
.hpin-panel > *{transform:none !important}
.hpin .shat-sec{max-width:100% !important}
.hpin .shat-bot{height:auto !important;width:min(100%,300px) !important}
.hpin-panel > div[style*="margin-left: -4%"]{margin-left:0 !important}
.hpin-panel{flex:none !important}
.hpin-meta{display:none !important}
}
/* pinned applications: the stage stays put, scroll swaps image + copy */
.ap-layer{opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s}
.ap-layer.on{opacity:1;visibility:visible;transition:opacity .8s ease,visibility 0s}
.ap-img{scale:1.08;transition:scale 1.4s cubic-bezier(.23,1,.32,1)}
.ap-layer.on .ap-img{scale:1}
.ap-copy>*{opacity:0;translate:0 28px;transition:opacity .7s cubic-bezier(.23,1,.32,1),translate .7s cubic-bezier(.23,1,.32,1)}
.ap-layer.on .ap-copy>*{opacity:1;translate:0 0}
.ap-layer.on .ap-copy>*:nth-child(2){transition-delay:70ms}
.ap-layer.on .ap-copy>*:nth-child(3){transition-delay:140ms}
.ap-layer.on .ap-copy>*:nth-child(4){transition-delay:210ms}
.ap-step{color:rgba(255,255,255,.5);transition:color .3s ease}
.ap-step.on{color:#ffffff}
@media (max-width:760px){.ap-steps{display:none !important}}
/* stacked bands: full-bleed floors, hairline between, alternating 135deg stripe texture that lags the scroll */
.band{border-bottom:1px solid rgba(23,25,28,0.12)}
.band-stripe{position:relative;overflow:clip;isolation:isolate}
.stripes{position:absolute;left:0;right:0;top:-240px;bottom:-240px;z-index:-1;pointer-events:none;background-image:repeating-linear-gradient(135deg,rgba(23,25,28,0.045) 0 1px,transparent 1px 10px)}/* solutions section: liquid background, highlight, letter roll */
.liquid{transition:background-color .9s ease}
.liquid.lit{background-color:#0F131C !important}
/* solutions: copy eases to white with the red */
.liquid .rv :is(div, h2, h3, p, a, em), .liquid .hpin-meta span{transition:color .9s ease, background-color .9s ease}
.liquid.lit .rv :is(div, h2, h3, p, a, em), .liquid.lit .hpin-meta span{color:#ffffff !important}
.liquid.lit .hpin-meta > span:nth-child(2){background-color:rgba(255,255,255,.3) !important}
.liquid.lit .hpin-bar{background-color:#ffffff !important}
/* Why Seven365 intro screen: eases from white to brand red as the section scrolls in (copy charcoal → white, highlight red → charcoal) */
.why-red{background-color:transparent;transition:background-color .9s ease}
.liquid.lit .why-red{background-color:#EB261E;--cc-hc:#17191c}
.liquid .why-red .rv :is(div, h2, em){color:#17191c !important}
.liquid.lit .why-red .rv :is(div, h2, em){color:#ffffff !important}
/* Robotics screen stays white with charcoal copy even while the section is dark */
.pan-white{background-color:#ffffff}
.liquid.lit .pan-white .rv :is(div, h2, h3, p, a, em){color:#17191c !important}
.liquid.lit .pan-white .rv > div:first-child{color:#979799 !important}
.liquid.lit .hpin.on-white .hpin-meta span{color:#979799 !important}
.liquid.lit .hpin.on-white .hpin-meta > span:nth-child(2){background-color:rgba(23,25,28,.15) !important}
.liquid.lit .hpin.on-white .hpin-bar{background-color:#17191c !important}
.why-red .rv > div:first-child{opacity:.7}
/* applications: section eases to brand red, header copy eases to white, while it holds the middle of the screen */
.liquid-red{transition:background-color .9s ease}
.liquid-red.lit{background-color:#fafafb !important}
.liquid-red.lit .stripes{opacity:.6}
.hl{background:linear-gradient(#fbd3bd,#fbd3bd) no-repeat 0 88% / 0% 36%;padding:0 .06em;transition:background-size 1.1s cubic-bezier(.23,1,.32,1) .35s}
.rv.in .hl,html:not(.rv-on) .hl{background-size:100% 36%}
.roll{display:inline-flex;overflow:hidden;height:1.25em;line-height:1.25em;vertical-align:bottom}
.roll>span{display:inline-block;text-shadow:0 1.25em currentColor;transition:transform .45s cubic-bezier(.77,0,.175,1);transition-delay:calc(var(--i) * 22ms)}
@media (hover:hover) and (pointer:fine){a:hover .roll>span{transform:translateY(-1.25em)}}
a:focus-visible .roll>span{transform:translateY(-1.25em)}
@media (max-width:760px){.deco{display:none}}
.hero-img{background-image:url(../img/singapore-dusk.jpg)}
.banner-img{background-image:url(../img/banner.jpg)}
.shat-tiles>i{position:absolute;display:block;background-repeat:no-repeat;will-change:transform,opacity}
.shat-sec .shat-tiles>i{background-image:url(../img/security-art.webp)}
.shat-bot .shat-tiles>i{background-image:url(../img/robot-art.webp)}
.shat-hid .shat-tiles>i{background-image:url(../img/hid-art.webp)}
/* line artworks (security, robot): pieces of the drawing start scattered and fly together as the panel slides in */
.shat.sc img{opacity:0}
.shat:not(.sc) .shat-tiles{display:none}
.park-img{background-image:url(../img/park.webp)}
/* app gallery sits on the riverside park photo: header copy turns white, cards stay light */
#apps > .rv > div > div:first-child{color:rgba(255,255,255,.75) !important}
#apps > .rv h2{color:#ffffff}
#apps > .rv > p{color:rgba(255,255,255,.84) !important}
/* app cards: profile-card layout — frosted outer frame, soft gradient banner, overlapping app badge, white panel */
#apps .pcard{background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 24px 48px -16px rgba(0,0,0,.4)}
.pc-panel{background:rgba(255,255,255,.94)}
.pc-dl{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:12px;border:1px solid #e3e3e6;background:#ffffff;color:#17191c;font-size:13px;font-weight:500;white-space:nowrap;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.pc-dl-dark{background:#0F131C;border-color:#0F131C;color:#ffffff;box-shadow:0 8px 18px -6px rgba(15,19,28,.5)}
@media (hover:hover){.pc-dl:hover{transform:translateY(-1px)}}
/* platform mock: the property-management app flips between three pages (Dashboard → Work Orders → Visitor Mgmt) */
.pm-side{width:210px;flex:none;background:#fafafb;border-right:1px solid #ececec;padding:16px 10px;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;font-size:13px}
.pm-nav{padding:8px 10px;border-radius:8px;color:#4b4f58}
.pm-n1,.pm-n2,.pm-n3{animation:pmNav 12s infinite}
.pm-n2{animation-delay:4s}.pm-n3{animation-delay:8s}
@keyframes pmNav{0%,31%{background:rgba(235,38,30,.1);color:#EB261E;font-weight:500}34%,100%{background:transparent;color:#4b4f58;font-weight:400}}
.pm-main{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;background:#fbfbfc}
.pm-pg{position:absolute;inset:0;opacity:0;animation:pmPg 12s infinite;display:flex;flex-direction:column}
.pm-pg:nth-child(2){animation-delay:4s}.pm-pg:nth-child(3){animation-delay:8s}
@keyframes pmPg{0%{opacity:0;translate:0 14px}3%,30%{opacity:1;translate:0 0}33.3%,100%{opacity:0;translate:0 -10px}}
.pm-top{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-bottom:1px solid #ececec;background:#ffffff;font-size:12px}
.pm-bar{height:3px;margin:12px 20px 14px;border-radius:9999px;background:#f6e4e3;overflow:hidden}
.pm-bar>span{display:block;height:100%;width:100%;background:#EB261E;transform-origin:left;transform:scaleX(0)}
.pm-pg .pm-bar>span{animation:pmBar 12s infinite linear}
.pm-pg:nth-child(2) .pm-bar>span{animation-delay:4s}.pm-pg:nth-child(3) .pm-bar>span{animation-delay:8s}
@keyframes pmBar{0%{transform:scaleX(0)}33.3%,100%{transform:scaleX(1)}}
.pm-kpi{background:#ffffff;border:1px solid #ececec;border-radius:12px;padding:12px}
.pm-box{background:#ffffff;border:1px solid #ececec;border-radius:12px;padding:10px 14px}
.pm-tr{display:grid;gap:10px;align-items:center;padding:9px 0;border-top:1px solid #f0f0f2;font-size:12px}
.pm-tr>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-th{border-top:0;font-size:10px;letter-spacing:.06em;color:#8a8d96}
@media (max-width:760px){
.pm-side{display:none}
.pm > div{height:480px !important}
.pm-pg > div[style*="repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;padding:0 14px !important}
.pm-top,.pm-pg > div:nth-child(2){padding-left:14px !important;padding-right:14px !important}
.pm-bar{margin-left:14px;margin-right:14px}
.pm-box{margin-left:14px !important;margin-right:14px !important;padding:8px 12px}
/* work orders: issue + status only; visitors: visitor, unit, status */
.pm-main > .pm-pg:nth-child(2) .pm-tr{grid-template-columns:1fr auto !important}
.pm-main > .pm-pg:nth-child(2) .pm-tr > span:nth-child(1),.pm-main > .pm-pg:nth-child(2) .pm-tr > span:nth-child(3),.pm-main > .pm-pg:nth-child(2) .pm-tr > span:nth-child(4){display:none}
.pm-main > .pm-pg:nth-child(3) .pm-tr{grid-template-columns:1fr auto auto !important}
.pm-main > .pm-pg:nth-child(3) .pm-tr > span:nth-child(3),.pm-main > .pm-pg:nth-child(3) .pm-tr > span:nth-child(4){display:none}
}
@media (prefers-reduced-motion:reduce){.pm-pg:first-child{opacity:1}}
/* contact + footer: one dark rounded block */
.ft-lab{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ft-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:56px;padding-bottom:clamp(48px,6vw,80px);border-bottom:1px solid rgba(255,255,255,.12)}
.ft-top>.rv{flex:1 1 420px}
.ft-info{flex:0 1 560px;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px;align-content:start}
.ft-info dd{margin:14px 0 0;font-size:16px;line-height:1.5;color:#ffffff}
.ft-mid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;padding:48px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.ft-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;font-size:15px}
.ft a{color:#ffffff}
.ft-form{margin-top:14px;display:flex;align-items:center;gap:8px;height:58px;padding:0 6px 0 20px;border:1.5px solid rgba(255,255,255,.85);border-radius:9999px;box-sizing:border-box}
.ft-form input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;color:#ffffff;font:inherit;font-size:15px}
.ft-form input::placeholder{color:rgba(255,255,255,.55)}
.ft-form button{flex:none;width:44px;height:44px;border-radius:9999px;border:0;background:#ffffff;color:#0F131C;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.ft-form button:hover{transform:rotate(45deg)}}
.ft-form:focus-within{border-color:#ffffff;box-shadow:0 0 0 3px rgba(255,255,255,.15)}
.ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:24px;font-size:14px;color:rgba(255,255,255,.7)}
@media (max-width:960px){.ft-mid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ft-info,.ft-mid{grid-template-columns:1fr}.ft-bot{justify-content:flex-start}}
/* request-a-demo side drawer */
.dm-veil{position:fixed;inset:0;z-index:90;background:rgba(15,19,28,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.dm{position:fixed;top:0;right:0;z-index:91;width:min(480px,100vw);height:100vh;height:100dvh;max-height:100vh;box-sizing:border-box;background:#ffffff;color:#17191c;box-shadow:-24px 0 64px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:20px;overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .55s cubic-bezier(.23,1,.32,1),visibility 0s linear .55s}
html.dm-open .dm-veil{opacity:1;visibility:visible;transition:opacity .45s ease}
html.dm-open .dm{transform:translateX(0);visibility:visible;transition:transform .55s cubic-bezier(.23,1,.32,1)}
html.dm-open{overflow:hidden}
.dm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:28px 28px 0}
.dm-x{flex:none;width:44px;height:44px;border-radius:9999px;border:1px solid #e3e3e6;background:#ffffff;color:#17191c;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.dm-x:hover{transform:rotate(90deg)}}
.dm-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:4px 28px 32px}
.dm-f{display:grid;gap:6px;font-size:13px;color:#777b86}
.dm-f input,.dm-f select,.dm-f textarea{font:inherit;font-size:16px;color:#17191c;padding:12px 14px;border:1px solid #e3e3e6;border-radius:14px;background:#ffffff;box-sizing:border-box;width:100%;min-width:0}
.dm-f textarea{resize:vertical}
.dm-f input:focus,.dm-f select:focus,.dm-f textarea:focus{outline:0;border-color:#17191c;box-shadow:0 0 0 3px rgba(23,25,28,.08)}
.dm-f [aria-invalid="true"]{border-color:#EB261E}
.dm-err{margin:0;min-height:0;font-size:13px;color:#c41d16}
.dm-send{font:inherit;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:9999px;background:#0F131C;color:#ffffff;border:0;cursor:pointer}
@media (max-width:520px){.dm-form{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.dm,.dm-veil{transition:none}}
/* page-wide drifting wireframe polygons, behind all content */
.polys{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.55}
/* polygons sit behind everything: every section stacks above the canvas, white sections let it show through */
section{position:relative;z-index:1}
/* no italics anywhere: emphasised words stay regular */
em,i,cite,[style*="font-style: italic"]{font-style:normal !important}
/* Smart Security & Access Solutions: six-feature list */
.sec-list{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.sec-item{padding-top:12px;border-top:1px solid rgba(23,25,28,.14)}
.sec-t{font-size:15px;font-weight:500;line-height:1.3}
.sec-d{margin-top:4px;font-size:13px;line-height:1.45;opacity:.72}
.liquid.lit .sec-item{border-top-color:rgba(255,255,255,.2)}
@media (max-width:520px){.sec-list{grid-template-columns:1fr}}
/* How Seven365 improves operations: ten benefits, two columns */
.ops-list{flex:1 1 560px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;border-top:1px solid #ececec;align-self:start}
.ops-list>li{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid #ececec;font-size:20px;line-height:1.3}
/* Commercial Model: four cards with the engagement model as a red pill */
.cm{margin-top:clamp(32px,4vw,56px)}
.cm-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.cm-grid{margin-top:32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
/* same build as the Core Software Platforms cards: framed outer shell, white inner panel, badge, pill chips */
.cm-card{border-radius:30px;padding:8px;background:#ececee;box-shadow:inset 0 0 0 1px rgba(23,25,28,.06),0 20px 40px -24px rgba(15,19,28,.25);transition:translate .4s cubic-bezier(.23,1,.32,1),box-shadow .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.cm-card:hover{translate:0 -6px;box-shadow:inset 0 0 0 1px rgba(23,25,28,.08),0 28px 48px -20px rgba(15,19,28,.3)}}
.cm-panel{height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;border-radius:22px;padding:20px;background:#ffffff}
.cm-tr{display:flex;align-items:center;gap:8px;margin-top:18px}
.cm-t{margin:0;font-size:24px;font-weight:450;letter-spacing:-.01em;line-height:1.15;color:#17191c}
.cm-sub{margin-top:4px;font-size:15px;line-height:1.4;color:#8a8d96}
.cm-lab{margin-top:auto;padding-top:22px;font-size:14px;font-weight:500;color:#17191c}
.cm-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cm-pills .pc-dl{min-height:36px;cursor:default}
@media (max-width:1100px){.cm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cm-grid{grid-template-columns:1fr}.cm-tr{margin-top:14px}.cm-t{font-size:22px}}
@media (max-width:640px){.ops-list{grid-template-columns:1fr}.ops-list>li{font-size:18px}}
/* Robotics · Lift Solutions · Energy Efficiency: three icon cards */
.rle{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rle-col{position:relative;padding:20px 18px 18px;border-radius:18px;background:#f7f7f8;box-shadow:inset 0 0 0 1px rgba(23,25,28,.06);transition:translate .45s cubic-bezier(.23,1,.32,1),box-shadow .45s ease,background-color .45s ease}
@media (hover:hover){.rle-col:hover{translate:0 -4px;background:#ffffff;box-shadow:inset 0 0 0 1px rgba(235,38,30,.25),0 18px 36px -18px rgba(235,38,30,.35)}}
.rle-ic{width:44px;height:44px;border-radius:14px;background:#EB261E;color:#ffffff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -8px rgba(235,38,30,.7)}
.rle-t{margin-top:14px;font-size:16px;font-weight:500;line-height:1.25;color:#17191c}
.rle ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.rle li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.4;color:#4b4f58}
.rle li::before{content:"";flex:none;width:14px;height:14px;margin-top:2px;border-radius:9999px;background:rgba(235,38,30,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23EB261E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat}
@media (min-width:760px) and (max-width:1060px){.rle{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:759px){.rle{grid-template-columns:1fr}}
@media (max-width:1060px){.rle{gap:10px}.rle-col{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start;padding:16px}.rle-ic{grid-row:span 2}.rle-t{margin-top:2px}.rle ul,.rle-d{grid-column:2}}
/* desktop slider panels: keep art and copy side by side so nothing gets pushed out of the pinned stage */
@media (min-width:760px){.hpin-panel:not(.why-red){flex-wrap:nowrap !important}.hpin-panel:not(.why-red)>.rv{flex:1 1 0 !important;min-width:0}.hpin-panel:not(.why-red)>div:not(.rv){flex:0 1 40% !important}}
.liquid.lit .pan-white .rv .rle .rle-ic{color:#ffffff !important}
/* Robotics panel on brand red: white type, white cards, artwork switched to white lines */
.pan-red{background-color:#EB261E}
.pan-red .rv > div:first-child,.pan-red .rv > h3{color:#ffffff !important}
.pan-red .rv > div:first-child{opacity:.75}
.hpin-panel.pan-red .rle-col{background:#ffffff !important;box-shadow:0 18px 36px -18px rgba(60,0,0,.45) !important}
@media (hover:hover){.hpin-panel.pan-red .rle-col:hover{box-shadow:0 24px 44px -18px rgba(60,0,0,.6) !important}}
.pan-red .rv .rle :is(div,p){color:#17191c !important}
.pan-red .rv .rle .rle-ic{color:#ffffff !important}
.pan-red .shat img,.pan-red .shat-tiles>i{filter:brightness(0) invert(1)}
/* 03 Adaptive Environment Selection: picker mock that cycles through the six environments */
.env-pick{width:100%;max-width:520px;box-sizing:border-box;border-radius:24px;padding:18px;background:#161b26;color:#ffffff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.6)}
.env-bar{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.55)}
.env-dot{width:8px;height:8px;border-radius:9999px;background:rgba(255,255,255,.18)}
.env-q{margin-top:18px;font-size:15px;font-weight:500;color:#ffffff}
.env-grid{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.env-tile{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px 12px;border-radius:14px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:13px;font-weight:500;color:rgba(255,255,255,.85);animation:envpick 9s infinite;animation-delay:calc(var(--i) * 1.5s)}
.env-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#ffffff}
@keyframes envpick{0%,14%{background:#EB261E;box-shadow:inset 0 0 0 1px #EB261E,0 12px 24px -10px rgba(235,38,30,.7);color:#ffffff;transform:translateY(-2px)}17%,100%{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transform:none}}
.env-adapt{margin-top:14px;padding:14px;border-radius:14px;background:rgba(255,255,255,.04)}
.env-adapt-h{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.7)}
.env-spin{width:12px;height:12px;border-radius:9999px;border:2px solid rgba(255,255,255,.2);border-top-color:#EB261E;animation:envspin 1s linear infinite}
@keyframes envspin{to{transform:rotate(360deg)}}
.env-mods{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.env-mod{display:flex;flex-direction:column;gap:6px;font-size:12px;color:rgba(255,255,255,.75)}
.env-mod i{display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;position:relative}
.env-mod i::after{content:"";position:absolute;inset:0;background:#EB261E;transform-origin:left center;animation:envfill 1.5s cubic-bezier(.23,1,.32,1) infinite;animation-delay:calc(var(--i) * .12s)}
@keyframes envfill{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.env-tile,.env-spin,.env-mod i::after{animation:none}}
/* 04 Solar & Green Energy: dashboard mock with a sun-curve generation chart */
.sol-lead{margin:14px 0 0;max-width:560px;font-size:17px;line-height:1.5;color:#4b4f58}
.liquid.lit .pan-white .rv p.sol-lead{color:#4b4f58 !important}
.sol-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:#7ee2a8}
.sol-live span{width:7px;height:7px;border-radius:9999px;background:#3ccf7f;animation:sollive 1.6s ease-in-out infinite}
@keyframes sollive{50%{opacity:.3}}
.sol-top{margin-top:18px;display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sol-sun{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#EB261E;color:#ffffff;box-shadow:0 10px 22px -10px rgba(235,38,30,.8)}
.sol-sun svg{animation:solspin 14s linear infinite}
@keyframes solspin{to{transform:rotate(360deg)}}
.sol-k{font-size:12px;color:rgba(255,255,255,.6)}
.sol-v{margin-top:2px;font-size:26px;font-weight:500;letter-spacing:-.01em;color:#ffffff}
.sol-v small{font-size:13px;font-weight:400;color:rgba(255,255,255,.6)}
.sol-chart{margin-top:14px;height:120px;display:flex;align-items:flex-end;gap:6px;padding:12px 12px 0;border-radius:14px 14px 0 0;background:rgba(255,255,255,.04)}
.sol-b{flex:1;height:var(--h);border-radius:6px 6px 0 0;background:linear-gradient(180deg,#5fe39a,#1fa463);transform-origin:50% 100%;animation:solgrow 3.2s cubic-bezier(.23,1,.32,1) infinite;animation-delay:calc(var(--i) * .07s)}
@keyframes solgrow{0%{transform:scaleY(.15);opacity:.5}30%,85%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.15);opacity:.5}}
.sol-axis{display:flex;justify-content:space-between;padding:6px 12px 10px;border-radius:0 0 14px 14px;background:rgba(255,255,255,.04);font-size:11px;color:rgba(255,255,255,.45)}
.sol-stats{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sol-stat{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sol-sv{margin-top:2px;font-size:20px;font-weight:500;color:#ffffff}
.sol-note{margin-top:10px;font-size:11px;color:rgba(255,255,255,.4);text-align:right}
@media (prefers-reduced-motion:reduce){.sol-b,.sol-sun svg,.sol-live span{animation:none}}
@media (max-width:520px){.env-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rle-d{margin:8px 0 0;font-size:13.5px;line-height:1.45;color:#4b4f58}
.liquid.lit .pan-white .rv .rle .rle-d{color:#4b4f58 !important}
/* security cards on the dark panel */
.liquid.lit .hpin-panel:not(.pan-white) .rle-col{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.liquid.lit .hpin-panel:not(.pan-white) .rle-t{color:#ffffff}
.liquid.lit .hpin-panel:not(.pan-white) .rle-d{color:rgba(255,255,255,.68)}
@media (hover:hover){.liquid.lit .hpin-panel:not(.pan-white) .rle-col:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(235,38,30,.45),0 18px 36px -18px rgba(235,38,30,.5)}}
.img-commercial{background-image:url(../img/commercial.jpg)}
.img-industrial{background-image:url(../img/industrial.jpg)}
.img-residential{background-image:url(../img/residential.jpg)}
.img-public{background-image:url(../img/park-public.jpg)}
.img-institutional{background-image:url(../img/institutional.jpg)}
.img-hospitality{background-image:url(../img/hospitality.jpg)}
.img-healthcare{background-image:url(../img/healthcare.jpg)}
/* stat callouts pinned to buildings: .stage mirrors the photo's cover crop so % = photo coordinates */
.callouts{display:none;container-type:size}
@media (min-width:1280px){.callouts{display:block}}
.stage{position:absolute;left:50%;top:50%;width:max(100cqw, calc(100cqh * 1.7778));aspect-ratio:16 / 9;translate:-50% -50%}
.co{position:absolute;width:0;height:0}
.co-dot{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:9999px;background:#ffffff;box-shadow:0 0 0 4px rgba(255,255,255,.25);animation:co-pop .4s cubic-bezier(.23,1,.32,1) both;animation-delay:var(--d)}
.co-dot::after{content:"";position:absolute;inset:-6px;border-radius:9999px;border:1px solid rgba(255,255,255,.7);animation:co-ring 2.4s cubic-bezier(.23,1,.32,1) infinite;animation-delay:calc(var(--d) + .4s)}
.co-line{position:absolute;left:0;width:1px;height:var(--l);background:repeating-linear-gradient(to bottom,rgba(255,255,255,.85) 0 4px,transparent 4px 8px);animation:co-line .6s cubic-bezier(.23,1,.32,1) both;animation-delay:calc(var(--d) + .15s)}
.co-up .co-line{bottom:10px;transform-origin:50% 100%}
.co-down .co-line{top:10px;transform-origin:50% 0}
.co-card{position:absolute;white-space:nowrap;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#ffffff;box-shadow:0 8px 32px rgba(0,0,0,.18);animation:co-card .5s cubic-bezier(.23,1,.32,1) both;animation-delay:calc(var(--d) + .55s)}
.co-up .co-card{bottom:calc(var(--l) + 10px)}
.co-down .co-card{top:calc(var(--l) + 10px)}
.co-r .co-card{left:-1px}
.co-l .co-card{right:-1px}
@keyframes co-pop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes co-ring{from{opacity:.8;scale:1}to{opacity:0;scale:2.2}}
@keyframes co-line{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes co-card{from{opacity:0;translate:0 8px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
.kb{animation:kb 2.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes kb{from{scale:1.12}to{scale:1}}
.bob{animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 5px}}
/* main navigation: the floating pill is always on, from the top of the page down */
.mini{animation:fadeup .9s cubic-bezier(.2,.7,.2,1) .2s both}
/* intro: Seven365 logo draws itself on white, then flies into the navigation while the page fades up */
.intro{position:fixed;inset:0;z-index:200;background:#ffffff;display:flex;align-items:center;justify-content:center;transition:opacity .8s ease;animation:introSafe 0s linear 6s forwards}
@keyframes introSafe{to{opacity:0;visibility:hidden}}
.intro-logo{color:#17191c;transform-origin:0 0;transition:transform .85s cubic-bezier(.77,0,.175,1),color .85s ease}
.intro svg *{stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0}
html.intro .intro svg *{animation:introDraw .75s cubic-bezier(.65,0,.35,1) forwards,introFill .45s ease forwards;animation-delay:calc(var(--i) * 22ms),calc(700ms + var(--i) * 15ms)}
@keyframes introDraw{to{stroke-dashoffset:0}}
@keyframes introFill{to{fill-opacity:1}}
.intro.out{opacity:0;pointer-events:none}
html.intro{overflow:hidden}
html.intro #top *,html.intro #top{animation-play-state:paused !important}
html.intro .mini{animation:none;opacity:0}
html.intro-done .mini{animation:none;opacity:1;transition:opacity .6s ease}
html.intro-hand .mini>a:first-child{opacity:0}
@media (prefers-reduced-motion:reduce){.intro{display:none}}
@media (max-width:1100px){.mini .nav-links{display:none}}
/* frosted-glass navigation: clear over dark areas (white type), milky over light areas (charcoal type); script picks the tone from what is underneath */
.mini{background-color:rgba(255,255,255,.12);color:#ffffff;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 8px 32px rgba(0,0,0,.14);transition:background-color .4s ease,color .4s ease,box-shadow .4s ease}
.mini .nav-links a{color:inherit;background-image:linear-gradient(currentColor,currentColor)}
.mini .nav-cta{background:#0F131C;color:#ffffff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background-color .4s ease,color .4s ease}
.mini.nav-light{background-color:rgba(255,255,255,.55);color:#17191c;box-shadow:inset 0 0 0 1px rgba(23,25,28,.08),0 8px 32px rgba(0,0,0,.08)}
.mini.nav-light .nav-cta{box-shadow:none}
.mini.nav-deep{background-color:rgba(15,19,28,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 8px 32px rgba(0,0,0,.18)}
@media (max-width:960px){.banner{min-height:0 !important}.ph-label{display:none}}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none !important;transition:none !important}
.draw{stroke-dashoffset:0}
.co-dot::after{display:none}
}