/* Black remains the base. Canvas adds Aurelia's soft shade and sculpted glass reflections. */
html,body{background:#000}
body .site-shell{background:#000}
.ready-guide{margin:15px 0 23px;border:1px solid rgba(var(--service-rgb),.28);border-radius:13px;background:linear-gradient(135deg,rgba(var(--service-rgb),.07),#0a0e12);overflow:hidden}
.ready-guide>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:13px 17px;cursor:pointer;font-size:14px;font-weight:500;color:#e9f1f8}
.ready-guide>summary::-webkit-details-marker{display:none}
.guide-chevron::before{content:'+';font-size:20px;font-weight:400;color:rgb(var(--service-rgb))}
.ready-guide[open] .guide-chevron::before{content:'−'}
.ready-guide-body{padding:0 17px 12px}
.prepared-script{font-size:15px;line-height:1.7;color:#d9e3ec;max-width:72ch}
.ready-guide-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;flex-wrap:wrap}
.ready-guide-actions .text-button{font-size:13px;color:rgb(var(--service-rgb));min-height:42px}
.ready-guide-actions small{font-size:11px;color:#a6b3bf}
html[lang=en] .ready-guide-actions small{display:none}
@media(max-width:600px){.ready-guide{margin:13px 0 18px}.ready-guide>summary{padding:12px 13px}.ready-guide-body{padding:0 13px 9px}.prepared-script{font-size:14px;line-height:1.65}}
body .main-stage{background:#000}
body .scene-shade{background:radial-gradient(ellipse at center,transparent 55%,#0002)}
body .site-header{background:#000;border-color:#c9dfed24}
body .world-atmosphere{opacity:0}
body .language-control select,body .mobile-navigation,body .mobile-navigation nav{background:#0c1219;border-color:#dce9f239}
body .aurelia-label{background:#0b1116be;border-color:#c4d6e642;backdrop-filter:blur(12px)}
body .aurelia-input-form{background:linear-gradient(115deg,#1b252c99,#0a0f14e8);border-color:#c9dfed66;box-shadow:inset 0 1px 0 #fff1,0 12px 38px #0003}
body .gold-button{background:linear-gradient(145deg,#e2efff15,#0a1018);border-color:rgba(var(--service-rgb),.55);box-shadow:inset 0 1px 0 #ffffff22,0 7px 22px #0003}
body .outline,body .guide-explain{background:#cedef00b;border-color:#caddeb58}
body[data-service][data-detail=true] .page-window{background:linear-gradient(140deg,#111214f5,#050506fa);border-color:#c8ddeb35;box-shadow:0 18px 48px #0004}
body .information-top{background:#c9d9ed03;border-color:#d2e5f21c}
body .info-card,body .service-item,body .offer-main,body .plan-choice,body .industry-choice{background:linear-gradient(135deg,#d9e7f508,#0a1118aa);border-color:#c3d9ee2b}
/* Each glass bubble has a separate, incomplete liquid-metal crescent. Its rotation
   is driven by the shared motion clock; the icon and label remain still. */
#bubble-links a.satellite-link{background:radial-gradient(ellipse at 29% 16%,#ffffff32,transparent 40%),radial-gradient(ellipse at 70% 90%,rgba(var(--service-rgb),.16),transparent 50%),linear-gradient(145deg,#151719e8,#030405f2 62%,#13171be8);border:1px solid #d7eafa45;box-shadow:inset 1px 1px 3px #e1f1ff42,inset -2px -3px 7px #000,0 7px 17px #0009;transform:translate(-50%,-50%)}
#bubble-links a.satellite-link::before{inset:-7px;border:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,#bacddd1c 20deg,#e6f1ffbd 49deg,#fcffff 80deg,rgba(var(--service-rgb),.8) 102deg,#bccfe362 130deg,transparent 161deg);mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2.4px));transform:rotate(var(--crescent-angle,-1.047rad));opacity:.76;pointer-events:none}
#bubble-links a.satellite-link::after{top:12%;left:22%;width:39%;height:15%;background:linear-gradient(#f5faff69,#ffffff00)}
#bubble-links a.satellite-link:hover,#bubble-links a.satellite-link:focus-visible{border-color:#eff6ff9c;box-shadow:inset 1px 1px 6px #eff6ff4f,0 0 22px rgba(var(--service-rgb),.14);transform:translate(-50%,-50%)}
#bubble-links a.satellite-link:hover::before,#bubble-links a.satellite-link:focus-visible::before,#bubble-links a.satellite-link[data-bridge-state=connecting]::before,#bubble-links a.satellite-link[data-bridge-state=connected]::before,#bubble-links a.satellite-link[data-bridge-state=speaking]::before{opacity:1}
#bubble-links a.satellite-link[aria-current=page]{border:1px solid rgba(var(--service-rgb),.72);box-shadow:inset 0 0 12px rgba(var(--service-rgb),.13),0 0 14px rgba(var(--service-rgb),.08)}
#bubble-links a.satellite-link:focus-visible{outline:2px solid #f5f8ff;outline-offset:10px}
#bubble-links a.satellite-link span.satellite-label{background:transparent!important;text-shadow:0 2px 6px #000}
.showcase-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 10px;flex-wrap:wrap}
.showcase-tools>span{font-size:10px;letter-spacing:2px;color:#adc1d0;text-transform:uppercase}
.showcase-tools .demo-segments{margin:0}
.showcase-tools button{min-height:38px}
.showcase-caption{font-size:11px;color:#aabac7;margin:9px 0 17px;line-height:1.5}
.website-concept{margin-inline:auto;max-width:100%;transition:max-width .6s cubic-bezier(.2,.7,.2,1),border-radius .6s;box-shadow:0 16px 38px #0005}
.website-concept[data-device=mobile]{max-width:300px;border-radius:26px;border-width:5px}
.website-concept[data-device=mobile] .concept-nav{flex-wrap:wrap;gap:14px}
.website-concept[data-device=mobile] .concept-nav b{font-size:14px}
.website-concept[data-device=mobile] .concept-nav button{font-size:11px;padding:5px 9px}
.website-concept[data-device=mobile] .concept-page{min-height:320px;padding:26px 20px}
.website-concept[data-device=mobile] .concept-page h2{font-size:30px;max-width:200px}
.website-concept[data-device=mobile] .concept-description{max-width:170px}
.website-concept[data-device=mobile] .concept-architecture{opacity:.4;right:-15px;bottom:10px;transform:scale(.7)}
.website-concept[data-device=mobile] .concept-service-list{grid-template-columns:1fr}
.campaign-creative{margin-inline:auto;transition:max-width .6s,min-height .6s,border-radius .6s;background-color:#0a0e13;overflow:hidden}
.campaign-creative[data-format=social]{max-width:370px;min-height:350px;border-radius:15px}
.campaign-creative[data-format=social] h2{font-size:clamp(25px,3.4vw,43px);position:relative;z-index:2}
.campaign-creative[data-format=social] .campaign-bottom{gap:16px;align-items:start;flex-direction:column}
.campaign-creative[data-format=ad]{max-width:100%;min-height:245px}
.campaign-creative[data-format=landing]{max-width:100%;min-height:290px;padding-top:54px;background:radial-gradient(ellipse at 87% 60%,#b64c5a33,transparent 53%),#f1ebe5;color:#1b2025;border-radius:12px}
.campaign-creative[data-format=landing]::before{content:'PRIME  /  Home    Services    Get in touch';position:absolute;left:0;right:0;top:0;border-bottom:1px solid #1b202525;padding:13px 20px;font:10px Arial;letter-spacing:.5px}
.campaign-creative[data-format=landing] .campaign-brand{display:none}
.campaign-creative[data-format=landing] h2,.campaign-creative[data-format=landing] .campaign-bottom span{color:#171c24}
.campaign-creative[data-format=landing] h2 em{color:#9e273e}
.campaign-creative[data-format=landing] .campaign-bottom b{padding:11px 16px;border-radius:4px;background:#202a34;color:white}
.campaign-creative[data-format=landing] .campaign-orb{opacity:.35}
.call-showcase{margin:18px 0 0;border:1px solid #a8d6fc40;background:radial-gradient(ellipse at 80% 0,rgba(var(--service-rgb),.08),transparent 70%),#0a1119;border-radius:14px;padding:16px 18px;overflow:hidden}
.call-showcase>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;color:#e6f0f7}
.call-showcase>summary::after{content:'+';color:var(--gold);font-size:20px}
.call-showcase[open]>summary::after{content:'−'}
.call-stage{padding:22px 3px 12px;display:grid;grid-template-columns:42px 1fr;gap:9px 15px;align-items:center;min-height:115px}
.call-stage-icon{display:grid;place-items:center;border:1px solid rgba(var(--service-rgb),.6);border-radius:50%;width:42px;height:42px;color:#cfe8ff}
.call-stage-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4}
.call-stage-copy small{font-size:9px;letter-spacing:1.5px;color:#93b4d0;display:block;margin-bottom:6px}
.call-stage-copy strong{font-size:18px;font-weight:400}
.call-wave{display:flex;align-items:center;justify-content:center;gap:4px;height:40px;grid-column:1/-1}
.call-wave i{display:block;width:3px;height:calc(6px + var(--level)*27px);border-radius:4px;background:rgb(var(--service-rgb));transform:scaleY(.15);transition:transform .3s}
.call-showcase[data-step=answering] .call-wave i{animation:call-wave .7s calc(var(--level)*-.9s) ease-in-out infinite alternate}
.call-showcase[data-playing=false] .call-wave i,body[data-motion=paused] .call-wave i{animation-play-state:paused}
.call-showcase[data-step=booked] .call-stage-icon{border-color:#8adbb4;color:#8adbb4;background:#8adbb415}
.call-showcase .showcase-caption{margin-bottom:0}
.call-showcase-controls{display:flex;align-items:center;gap:16px}
.call-showcase-controls button{min-height:38px;min-width:84px;font-size:12px}
.call-progress{height:2px;flex:1;background:#b5dfff1a}
.call-progress i{display:block;height:100%;width:var(--progress,0%);background:rgb(var(--service-rgb));box-shadow:0 0 9px rgba(var(--service-rgb),.4)}
@keyframes call-wave{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.film-frame{isolation:isolate;background:#080d14;overflow:hidden}
.film-frame::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 75% 48%,rgba(var(--service-rgb),.27),transparent 60%),linear-gradient(120deg,#071019,#171d25);z-index:-1}
.film-frame[data-film=ad]::before{background:linear-gradient(90deg,#050b11d9,#050b1122),url('./assets/northline-interior-r5.webp') center/cover}
.film-frame[data-film=promo]::before{background:linear-gradient(90deg,#070d13dd,#070d1344),url('./assets/northline-detail-r5.webp') center/cover}
.film-frame[data-playing=true]::before{animation:film-drift 18s ease-in-out infinite alternate}
.film-frame[data-film=product] .film-glass{opacity:1;right:0;top:4%;width:60%;height:90%}
.film-frame[data-film=product] .film-glass i{border:1px solid #d8eeff99;border-radius:50%;background:linear-gradient(145deg,#dceeff08,#112838a6 45%,#e6f9ff44);box-shadow:inset 4px 2px 15px #c9eeff20,12px 15px 30px #0004}
.film-frame[data-film=ad] .film-glass,.film-frame[data-film=promo] .film-glass{opacity:.1}
.film-copy{z-index:2;text-shadow:0 2px 18px #0009}
.film-topline,.film-footnote{z-index:2}
.film-sample-tabs{margin:8px 0 14px}
.film-sample-tabs button{min-height:40px}
.film-frame[data-format=portrait] .film-copy h2{font-size:clamp(22px,3vw,34px)}
.film-frame[data-format=portrait] .film-copy{padding-inline:12px}
@keyframes film-drift{from{transform:scale(1)}to{transform:scale(1.12) translateX(-1%)}}
body[data-motion=paused] .film-frame::before{animation-play-state:paused}
@media(max-width:1000px){body .main-stage{background:#000}.showcase-tools{gap:9px}.showcase-tools>span{font-size:9px}}
@media(max-width:600px){.call-showcase{padding:13px}.call-stage-copy strong{font-size:16px}.showcase-tools .demo-segments button{padding:8px 10px;font-size:11px}.campaign-creative[data-format=social]{min-height:315px}.film-sample-tabs button{font-size:12px}}
@media(prefers-reduced-motion:reduce){.website-concept,.campaign-creative{transition:none}.call-wave i,.film-frame::before{animation:none!important}}
.film-mat{--film-height:290px;height:var(--film-height)}
.film-frame[data-format=wide]{width:min(100%,calc(var(--film-height)*16/9));height:auto;aspect-ratio:16/9}
@media(max-width:1000px){
 body[data-page=demo] .information-body{padding:14px}
 .service-demo>.eyebrow{display:none}
 body[data-page=demo] .information-body .service-demo>.info-heading{font-size:25px!important;margin:0 0 10px;line-height:1.15}
 .service-demo>.info-lead{font-size:13px;line-height:1.5;margin-bottom:12px}
 .service-demo[data-demo-service=video]>.info-lead{display:none}
 .video-demo>.demo-segments{margin:7px 0;gap:6px}
 .video-demo>.demo-segments button{min-height:34px;font-size:11px;line-height:1.3;padding:7px 11px}
 .film-mat{--film-height:164px;margin-top:10px}
 .film-controls{margin:8px 0 12px;gap:9px}
 .film-controls button{min-height:36px;padding:7px 13px}
}
@media(max-width:600px) and (max-height:730px){.film-mat{--film-height:135px}}

/* A short phone viewport puts the shell beside the copy, with room to scroll
   below the fold when a keyboard or landscape screen cannot fit the controls. */
@media(min-width:560px) and (max-width:1000px) and (max-height:500px){
 body{overflow-y:auto}
 body .site-shell{min-height:390px;grid-template-rows:64px minmax(0,1fr) 44px 82px 26px}
 body[data-detail=true] .site-shell{min-height:490px}
 body .site-header{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:1fr;gap:14px;padding:5px 16px}
 .site-header .brand{grid-column:1;grid-row:1}.site-header .brand img{width:46px;height:46px}
 .site-header .brand>span{display:none!important}
 .site-header .desktop-navigation{grid-column:2;grid-row:1;gap:7px}
 .site-header .language-control{grid-column:3;grid-row:1}
 body .aurelia-label{display:none!important}
 .home-copy{left:41%;right:3%;top:50%;bottom:auto;width:auto;transform:translateY(-50%);text-align:left}
 .home-copy h1{font-size:32px;margin-bottom:5px;letter-spacing:-1px}
 .home-copy .eyebrow{font-size:8px;margin-bottom:4px}
 .home-copy .description{font-size:13px;margin:0;max-width:none}
 .home-copy .hero-actions{justify-content:flex-start;gap:14px;margin-top:9px;flex-wrap:nowrap}
 .home-copy .gold-button{min-width:140px;min-height:44px;font-size:14px;padding:9px 14px}
 .hero-call{min-height:44px;font-size:12px}
 .mobile-navigation>button{min-height:36px;padding-block:5px}
}