:root{
  color-scheme:light;
  --ink:#0a0a0a; --muted:#737373; --line:#e5e5e5; --tint:#f5f5f7; --card:#fff;
  --red:#c4161c; --red-d:#9f1015; --dark:#0a0a0a; --dark2:#171717; --gold:#e6a400;
  --heading:"General Sans",ui-sans-serif,system-ui,sans-serif; --body:"General Sans",ui-sans-serif,system-ui,sans-serif;
  --r:14px; --shadow:0 1px 2px rgba(10,10,10,.04),0 12px 32px -18px rgba(10,10,10,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:#fff;color:var(--ink);font:400 16px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,figure,dl,dd,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--heading);font-weight:500;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:clamp(42px,5.6vw,80px);line-height:1.03}
h2{font-size:clamp(32px,3.8vw,52px);line-height:1.08}
h3{font-size:21px;line-height:1.25;letter-spacing:-.02em}
.h3{font-size:clamp(24px,2.4vw,30px);margin-bottom:22px}
.h3~.h3{margin-top:44px}
.hl{color:var(--red)}
.muted{color:var(--muted)}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}
.center{text-align:center;display:grid;justify-items:center;gap:0}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--muted);margin-bottom:18px}
:focus-visible{outline:3px solid var(--red);outline-offset:4px;border-radius:4px}
.skip{position:fixed;top:-80px;left:16px;z-index:99;background:var(--red);color:#fff;padding:10px 16px;border-radius:8px}
.skip:focus{top:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 20px;border-radius:8px;border:1px solid transparent;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s}
.btn--sm{min-height:38px;padding:8px 14px;font-size:13px}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-d);transform:translateY(-1px)}
.btn--line{border-color:#e3e3e3;background:#fff}
.btn--line:hover{border-color:var(--ink)}
.btn--ghost{border-color:rgba(255,255,255,.3);color:#fff}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.center .btn,.sec>.wrap>.center{margin-top:36px}

/* navigation: a floating dark bar with dropdowns */
.nav{position:fixed;top:14px;left:0;right:0;z-index:50;pointer-events:none}
.nav__bar{pointer-events:auto;width:min(1180px,100% - 24px);margin:0 auto;display:flex;align-items:center;gap:20px;padding:8px 8px 8px 18px;border-radius:14px;background:rgba(10,10,10,.88);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);color:#fff;box-shadow:0 10px 40px -12px rgba(0,0,0,.45)}
.nav__brand img{height:48px;width:auto}
.nav__bar{padding-top:6px;padding-bottom:6px}
.nav__links{display:flex;align-items:center;gap:4px;margin:0 auto;font-size:14px;font-weight:500}
.nav__links>a,.dd__t{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:8px;color:rgba(255,255,255,.86)}
.nav__links>a:hover,.dd:hover .dd__t,.dd:focus-within .dd__t{background:rgba(255,255,255,.1);color:#fff}
.dd__t i{font-style:normal;font-size:11px;opacity:.7;transform:translateY(-2px)}
.dd{position:relative}
.dd__p{position:absolute;left:50%;top:100%;translate:-50% 0;min-width:300px;padding:10px;margin-top:10px;border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 24px 60px -20px rgba(0,0,0,.35),0 0 0 1px var(--line);display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s}
.dd__p::before{content:"";position:absolute;inset:-12px 0 auto;height:12px}
.dd:hover .dd__p,.dd:focus-within .dd__p{opacity:1;visibility:visible;transform:none}
.dd__p a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:14px}
.dd__p a:hover{background:var(--tint)}
.dd__p .ic{width:30px;height:30px;padding:6px;flex:none}
.dd__p--wide{grid-template-columns:1fr 1fr;width:min(760px,90vw);gap:6px 18px;padding:18px}
.dd__p--wide b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:2px 10px 8px}
.dd__cta{grid-column:1/-1;display:grid!important;gap:2px!important;margin-top:6px;padding:14px 16px!important;background:var(--tint);border-radius:10px}
.dd__cta b{font-size:14px!important;letter-spacing:0!important;text-transform:none!important;color:var(--red)!important;padding:0!important}
.dd__cta span{font-size:13px;color:var(--muted)}
.nav__r{display:flex;align-items:center;gap:14px}
.nav__tel{font-size:14px;font-weight:500;color:rgba(255,255,255,.86)}
.nav__menu{display:none;width:40px;height:38px;border:0;border-radius:8px;background:rgba(255,255,255,.1);flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.nav__menu i{width:16px;height:2px;background:#fff;border-radius:2px}
.menu{position:fixed;inset:0;z-index:45;background:var(--dark);color:#fff;padding:96px 24px 32px;display:flex;flex-direction:column;justify-content:space-between}
.menu[hidden]{display:none}
.menu nav{display:grid}
.menu nav a{font-family:var(--heading);font-size:30px;letter-spacing:-.03em;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.menu p{display:flex;gap:10px;flex-wrap:wrap}

/* hero */
.hero{position:relative;min-height:min(900px,100svh);padding:150px 0 0;color:#fff;background:var(--dark);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;animation:drift 24s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.07) translate(-1%,-1%)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.55) 55%,rgba(10,10,10,.25) 100%),linear-gradient(0deg,rgba(10,10,10,.9) 0%,transparent 35%)}
.hero__in{position:relative;z-index:1;max-width:1180px}
.hero h1{max-width:12.5ch}
.hero .hl{background:linear-gradient(90deg,#ff5a4f,#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent}
.badge{display:inline-flex;align-items:center;gap:9px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);font-size:12.5px;margin-bottom:26px}
.badge span{width:7px;height:7px;border-radius:50%;background:#ff5a4f;box-shadow:0 0 0 4px rgba(255,90,79,.18)}
.hero__lede{max-width:560px;margin-top:24px;font-size:17px;color:rgba(255,255,255,.82)}
.ticks--row{display:flex!important;flex-wrap:wrap;gap:8px 26px!important;margin-top:20px}
.hero .ticks li{font-size:13.5px;color:rgba(255,255,255,.82)}
.hero .ticks li::before{border-color:#ff8a7f}
.hero .ticks a{text-decoration:underline;text-underline-offset:3px}

/* quick form */
.qf{display:flex;flex-wrap:wrap;gap:8px;max-width:640px;margin-top:32px;padding:6px;border-radius:12px;background:#fff;box-shadow:var(--shadow)}
.qf input{flex:1 1 180px;min-width:0;height:48px;border:0;padding:0 14px;border-radius:8px;background:transparent;color:var(--ink);font-size:15px}
.qf input+input{border-left:1px solid var(--line);border-radius:0}
.qf input:focus{outline:none;background:var(--tint)}
.qf .btn{flex:0 0 auto}
.qf__msg{flex-basis:100%;min-height:0;font-size:13.5px;color:var(--red);padding:0 10px}
.qf__msg:empty{display:none}
.qf__alt{flex-basis:100%;font-size:13.5px;color:var(--muted);padding:2px 10px 4px}
.qf__alt a{color:var(--ink);font-weight:600}
.hero .qf__msg{color:var(--red)}

/* services ticker at the bottom of the hero */
.tick{position:relative;z-index:1;margin-top:64px;padding:22px 0 26px;border-top:1px solid rgba(255,255,255,.12);overflow:hidden}
.tick__l{width:min(1180px,100% - 48px);margin:0 auto 14px;font-size:11px;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.55)}
.tick__t{display:flex;gap:10px;width:max-content;animation:tick 60s linear infinite}
.tick:hover .tick__t{animation-play-state:paused}
.tick a{padding:8px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);font-size:13.5px;white-space:nowrap;color:rgba(255,255,255,.88)}
.tick a:hover{background:rgba(255,255,255,.16)}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:100px 0}
.sec--tint{background:var(--tint);background-image:radial-gradient(rgba(10,10,10,.07) 1px,transparent 1px);background-size:22px 22px}
.sec--top0{padding-top:0}
.split-h{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:48px}
.split-h p{color:var(--muted);font-size:16.5px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{padding:28px 24px}
.stat b{display:block;font:500 52px/1 var(--heading);letter-spacing:-.04em;color:var(--red);margin-bottom:18px}
.stat h3{font-size:17px;font-family:var(--body);font-weight:600;letter-spacing:0}
.stat p{font-size:14px;color:var(--muted);margin-top:4px}

/* service cards + tabs */
.tabs{display:flex;justify-content:center;gap:6px;margin:30px auto 34px;padding:5px;border-radius:12px;background:#fff;border:1px solid var(--line);width:max-content;max-width:100%}
.tabs button{border:0;background:none;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.tabs [aria-selected="true"]{background:var(--ink);color:#fff}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.svc{display:flex;flex-direction:column;gap:8px;padding:22px;transition:transform .2s,border-color .2s}
.svc:hover{transform:translateY(-3px);border-color:#d8cfc4}
.svc h3{margin-top:6px}
.svc p{font-size:14.5px;color:var(--muted);flex:1}
.ic{width:42px;height:42px;padding:9px;border-radius:10px;background:var(--tint);border:1px solid var(--line);fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.more{font-size:13.5px;font-weight:600;color:var(--red);margin-top:6px}
.no-js .svc-grid[hidden]{display:grid}

/* projects */
.prj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prj{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--dark2)}
.prj img,.prj__ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.prj__ph{background:linear-gradient(135deg,#2a2622,#0a0a0a)}
.prj>div{position:absolute;inset:auto 0 0;padding:48px 20px 18px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff}
.prj h3{font-size:22px}
.prj span{font-size:13px;color:rgba(255,255,255,.82)}
.prj:hover img{transform:scale(1.05)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.two .steps{grid-template-columns:1fr;margin-top:0;gap:10px}
.steps li{padding:24px 22px}
.steps i{display:block;font:600 12px var(--body);font-style:normal;color:var(--red);margin-bottom:14px}
.steps h3{font-size:19px}
.steps p{font-size:14.5px;color:var(--muted);margin-top:6px}
.two .steps li{padding:16px 18px}

/* reviews */
.gbadge{display:inline-flex;align-items:center;gap:14px;padding:12px 18px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);font-size:13px;line-height:1.35;justify-self:end}
.gbadge b{font:500 40px/1 var(--heading);letter-spacing:-.04em}
.gbadge--ph{margin-top:28px}
.stars{color:var(--gold);letter-spacing:2px;font-size:14px}
.q-grid{columns:3 300px;column-gap:16px}
.qt{break-inside:avoid;margin-bottom:16px;padding:24px}
.qt .stars{display:block;margin-bottom:10px}
.qt blockquote{font:500 18.5px/1.45 var(--heading);letter-spacing:-.015em}
.qt figcaption{margin-top:14px;font-size:13px;color:var(--muted);font-weight:500}

/* clients */
.cl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px}
.cl-grid--hub{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:0}
.cl{display:flex;flex-direction:column;gap:10px;padding:24px 22px;transition:transform .2s}
.cl:hover{transform:translateY(-3px)}
.cl p{font-size:14.5px;color:var(--muted);flex:1}

/* about / standards */
.about{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about>img,.rounded{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.about h2{margin-bottom:18px}
.about p{color:var(--muted)}
.stds{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0}
.stds li{padding:16px 18px;border-radius:12px;background:var(--tint);border:1px solid var(--line)}
.stds b{display:block;font:500 20px/1.1 var(--heading);color:var(--ink);margin-bottom:4px}
.stds span{font-size:13.5px;color:var(--muted)}

/* faq */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.faq details{border-top:1px solid var(--line);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font:500 19px/1.35 var(--heading);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-family:var(--body);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px;color:var(--muted);max-width:62ch}

/* inner page header */
.ph{padding:150px 0 72px;background:linear-gradient(180deg,var(--tint),#fff)}
.ph h1{font-size:clamp(38px,5vw,68px);max-width:16ch}
.ph__lede{max-width:640px;margin-top:22px;font-size:17.5px;color:var(--muted)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted);margin-bottom:26px}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.ticks{display:grid;gap:12px}
.ticks li{position:relative;padding-left:28px}
.ticks li::before{content:"";position:absolute;left:3px;top:.45em;width:12px;height:6px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.facts div{padding:10px 16px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.facts dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.facts dd{font-weight:600}
.gal{display:grid;gap:12px}
.gal img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);aspect-ratio:16/10}
.gal--2,.gal--3{grid-template-columns:2fr 1fr}
.gal--3 img:first-child{grid-row:span 2}
.gal--1 img{aspect-ratio:21/9}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags a{padding:8px 14px;border-radius:999px;border:1px solid var(--line);font-size:14px;background:#fff}
.tags a:hover{border-color:var(--ink)}
.tbl{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.tbl table{width:100%;border-collapse:collapse;font-size:14px;min-width:780px}
.tbl th,.tbl td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tbl td a{color:var(--red);font-weight:600}
.cf{display:grid;gap:14px;padding:28px}
.cf label{display:grid;gap:6px;font-size:14px;font-weight:600}
.cf input,.cf select,.cf textarea{border:1px solid var(--line);border-radius:8px;padding:11px 12px;font-size:15px;font-weight:400;background:#fff}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:2px solid var(--red);outline-offset:0;border-color:transparent}
.cf .qf__msg{padding:0}
.nap{display:grid;gap:14px;align-content:start}
.nap a{color:var(--red);font-weight:600}
.nap .gbadge{justify-self:start}

/* closing call to action */
.cta{background:var(--dark);color:#fff;padding:96px 0}
.cta__in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cta .eyebrow{color:rgba(255,255,255,.55)}
.cta .hl{color:#ff6a5f}
.cta__lede{margin-top:18px;color:rgba(255,255,255,.75);max-width:46ch}
.cta .qf{margin-top:0;max-width:none}

/* footer */
.ft{background:var(--dark);color:rgba(255,255,255,.72);padding:24px 0 30px;border-top:1px solid rgba(255,255,255,.08);font-size:14px}
.ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr 1fr;gap:36px;padding:48px 0 40px}
.ft b{display:block;color:#fff;font-weight:600;margin-bottom:12px}
.ft nav,.ft__nap{display:grid;gap:9px;align-content:start}
.ft a:hover{color:#fff}
.ft__brand img{height:54px;width:auto;margin-bottom:16px}
.ft__brand p{max-width:34ch}
.ft__g{display:inline-flex;gap:6px;align-items:center;margin-top:16px;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);color:#fff}
.ft__g b{display:inline;margin:0;color:var(--gold)}
.ft__g span{color:var(--gold)}
.ft__areas{padding:20px 0;border-top:1px solid rgba(255,255,255,.08);font-size:13px}
.ft__areas a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.2);text-underline-offset:3px}
.ft__base{display:flex;justify-content:space-between;gap:16px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-size:13px}

/* reveal */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:1080px){
  .nav__links,.nav__tel{display:none}
  .nav__menu{display:flex}
  .nav__bar{justify-content:space-between}
  .stats{grid-template-columns:1fr 1fr}
  .cl-grid{grid-template-columns:repeat(2,1fr)}
  .ft__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .sec{padding:72px 0}
  .split-h,.about,.faq,.two,.cta__in{grid-template-columns:1fr;gap:28px}
  .gbadge{justify-self:start}
  .prj-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .gal--2,.gal--3{grid-template-columns:1fr}.gal--3 img:first-child{grid-row:auto}
}
@media (max-width:560px){
  .wrap{width:calc(100% - 32px)}
  .hero{padding-top:120px}
  .qf{flex-direction:column}
  .qf input+input{border-left:0;border-top:1px solid var(--line)}
  .qf .btn{width:100%}
  .prj-grid,.cl-grid,.steps,.stds,.stats{grid-template-columns:1fr}
  .ft__grid{grid-template-columns:1fr}
  .ft__base{flex-direction:column}
  .tabs{width:100%}.tabs button{flex:1;padding:10px 8px;font-size:13px}
  .stat b{font-size:44px}
}
@media (prefers-reduced-motion:reduce){
  .hero__bg,.tick__t{animation:none}
  html{scroll-behavior:auto}
}

/* ===================================================== Remdal × Connect */
/* hero: copy on the left, an example project file on the right */
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(42px,5vw,74px)}
.js .up{opacity:0;transform:translateY(18px);animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
.js .up:nth-child(2){animation-delay:.08s}.js .up:nth-child(3){animation-delay:.16s}.js .up:nth-child(4){animation-delay:.24s}.js .up:nth-child(5){animation-delay:.32s}
@keyframes up{to{opacity:1;transform:none}}
.hp{position:relative;min-height:470px;display:grid;place-items:center}
.hp__photo{position:absolute;right:-6%;top:4%;width:78%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;opacity:.9;box-shadow:0 30px 80px -30px rgba(0,0,0,.7);animation:float 9s ease-in-out infinite alternate}
@keyframes float{to{transform:translateY(-10px)}}
.hp__card{position:relative;width:min(360px,100%);padding:18px;border-radius:16px;background:linear-gradient(140deg,rgba(40,36,33,.94),rgba(20,18,16,.97) 70%);border:1px solid rgba(255,255,255,.18);box-shadow:0 40px 80px -30px rgba(0,0,0,.8),inset 0 1px rgba(255,255,255,.08);color:#fff;margin-right:18%;opacity:0;transform:translateY(24px) scale(.98);animation:up 1s .35s cubic-bezier(.2,.7,.2,1) forwards}
.hp__top{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1);font-size:12px;font-weight:600}
.hp__top img{height:24px;width:auto}
.hp__top em{margin-left:auto;font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);padding:3px 8px;border:1px solid rgba(255,255,255,.18);border-radius:99px}
.hp__k{margin-top:18px;font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.55)}
.hp__h{font-size:25px;line-height:1.15;margin:6px 0 16px}
.hp__h .hl{background:linear-gradient(90deg,#ff5a4f,#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent}
.hp__log{display:grid;gap:6px}
.hp__log li{position:relative;display:grid;gap:1px;padding:9px 34px 9px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);opacity:0;transform:translateX(-8px);transition:opacity .45s,transform .45s,background .45s}
.hp__log li.on{opacity:1;transform:none}
.hp__log li.on:last-child{background:rgba(255,90,79,.1);border-color:rgba(255,90,79,.3)}
.hp__log span{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.hp__log b{font-size:13px;font-weight:500}
.hp__log i{position:absolute;right:11px;top:50%;translate:0 -50%;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px;background:#2f7d4f;color:#fff;transform:scale(0);transition:transform .35s .2s cubic-bezier(.3,1.6,.5,1)}
.hp__log li.on i{transform:scale(1)}
.hp__btn{margin-top:14px;padding:11px;border-radius:9px;background:var(--red);text-align:center;font-size:13px;font-weight:600}
.hp__chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.95);color:var(--ink);box-shadow:0 18px 40px -16px rgba(0,0,0,.5);font-size:12px;line-height:1.3;opacity:0;animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
.hp__chip b{font:500 30px/1 var(--heading)}
.hp__chip span{color:var(--muted)}
.hp__chip--a{right:-6%;top:-6%;animation-delay:1.2s}
.hp__chip--a span{color:var(--gold)}
.hp__chip--b{right:0;bottom:-3%;animation-delay:1.6s;font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:#2f9e5f;box-shadow:0 0 0 0 rgba(47,158,95,.5);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(47,158,95,0)}100%{box-shadow:0 0 0 0 rgba(47,158,95,0)}}

/* firms strip */
.firms{padding:34px 0;border-bottom:1px solid var(--line);overflow:hidden}
.firms__l{text-align:center;font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--muted);margin-bottom:18px}
.firms__t{display:flex;gap:56px;width:max-content;animation:tick 40s linear infinite}
.firms__t span{font:500 22px/1 var(--heading);letter-spacing:-.03em;color:#a59d93;white-space:nowrap}

/* our solutions: Remdal-style category panels that open on hover or focus */
.sol{display:flex;gap:14px;height:560px}
.sol__p{position:relative;flex:1;min-width:0;border-radius:18px;overflow:hidden;background:var(--dark);color:#fff;transition:flex .6s cubic-bezier(.2,.7,.2,1);cursor:default;outline-offset:4px}
.sol__p.is-open{flex:2.2}
.sol__p>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform 1.2s,opacity .6s}
.sol__p.is-open>img{opacity:.28;transform:scale(1.04)}
.sol__p::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.92),rgba(10,10,10,.2) 70%)}
.sol__in{position:absolute;inset:0;z-index:1;padding:30px;display:flex;flex-direction:column;justify-content:flex-end}
.sol__n{font-size:11px;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.6);text-transform:uppercase}
.sol__in h3{font-size:clamp(26px,2.6vw,36px);margin:6px 0 4px}
.sol__d{color:rgba(255,255,255,.75);font-size:15px}
.sol ul{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;margin-top:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s cubic-bezier(.2,.7,.2,1),opacity .4s,margin .6s}
.sol__p.is-open ul{max-height:420px;opacity:1;margin-top:20px}
.sol li a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;font-size:14px;color:rgba(255,255,255,.9)}
.sol li a:hover{background:rgba(255,255,255,.1)}
.sol .ic{width:30px;height:30px;padding:6px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);stroke:#fff;flex:none}

/* how it works: a flow diagram, lines carry light from the inputs to the outcomes */
.flow{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:20px;height:380px;margin-top:40px}
.flow__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow__lines path{fill:none;stroke:#d9cfc3;stroke-width:1.5;vector-effect:non-scaling-stroke}
.flow__lines path:nth-child(n){stroke-dasharray:6 10;animation:dash 1.6s linear infinite}
.flow__lines path:nth-child(n+4){stroke:#e9a19c}
@keyframes dash{to{stroke-dashoffset:-32}}
.flow__in,.flow__out{position:relative;z-index:1;display:grid;gap:14px}
.flow__in{justify-items:start;gap:72px}
.flow__out{justify-items:end;gap:22px}
.flow span{display:inline-block;padding:11px 16px;border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);font-size:14px;font-weight:500}
.flow__out span{border-color:#f1c9c6}
.flow__hub{position:relative;z-index:1;justify-self:center;width:170px;height:170px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;box-shadow:0 20px 60px -24px rgba(196,22,28,.45);animation:pulse-r 3s infinite}
@keyframes pulse-r{50%{box-shadow:0 20px 70px -14px rgba(196,22,28,.55)}}
.flow__hub img{width:110px;height:auto}
.flow+.steps{margin-top:36px}

@media (max-width:1080px){
  .hero__in{grid-template-columns:1fr}
  .hp{min-height:420px;margin-top:10px}
  .sol{flex-direction:column;height:auto}
  .sol__p{min-height:220px}.sol__p.is-open{min-height:560px}
}
@media (max-width:820px){
  .flow{grid-template-columns:1fr;height:auto;gap:18px}
  .flow__lines{display:none}
  .flow__in,.flow__out{justify-items:center;gap:8px;grid-auto-flow:row}
  .flow__hub{width:120px;height:120px}.flow__hub img{width:80px}
}
@media (max-width:560px){
  .hp{display:none}
  .sol ul{grid-template-columns:1fr}
  .sol__p.is-open{min-height:640px}
}
@media (prefers-reduced-motion:reduce){
  .up,.hp__card,.hp__chip{animation:none!important;opacity:1!important;transform:none!important}
  .hp__log li{opacity:1;transform:none}.hp__log i{transform:scale(1)}
  .flow__lines path,.firms__t,.hp__photo,.flow__hub{animation:none}
}

/* scroll film hero: the video frame follows the scroll, scenes cross-fade over it */
.film{position:relative;height:340vh;background:var(--dark);color:#fff}
.film__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.film__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.86) 0%,rgba(10,10,10,.55) 50%,rgba(10,10,10,.2) 100%),linear-gradient(0deg,rgba(10,10,10,.85) 0%,transparent 30%)}
.film__stage{position:relative;height:100%}
.film__s{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);max-width:640px;opacity:0;pointer-events:none}
.film__s--on{opacity:1;pointer-events:auto}
.film__s h1{font-size:clamp(42px,5vw,74px)}
.film__s h2{font-size:clamp(34px,4vw,58px)}
.film__s .hl{background:linear-gradient(90deg,#ff5a4f,#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent}
.film__s .eyebrow{color:rgba(255,255,255,.6)}
.film__lede{max-width:560px;margin-top:22px;font-size:17px;color:rgba(255,255,255,.82)}
.film .ticks li{font-size:13.5px;color:rgba(255,255,255,.82)}
.film .ticks li::before{border-color:#ff8a7f}
.film .ticks a{text-decoration:underline;text-underline-offset:3px}
.film__s--two{max-width:none;display:grid;grid-template-columns:1fr 360px;gap:60px;align-items:center}
.film__s--two .hp__card{opacity:1;transform:none;animation:none;margin:0}
.film__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12);z-index:2}
.film__bar i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left}
.film .tick{position:absolute;left:0;right:0;bottom:3px;margin:0;padding:16px 0;border-top:1px solid rgba(255,255,255,.1);background:linear-gradient(0deg,rgba(10,10,10,.6),transparent)}
.film--static{height:auto}.film--static .film__pin{position:relative;height:auto;min-height:100svh}
.film--static .film__s{position:relative;top:auto;transform:none;opacity:1;pointer-events:auto;padding:140px 0 40px}
.film--static .film__s:not(.film__s--on){display:none}
@media (max-width:1080px){.film__s--two{grid-template-columns:1fr}.film__s--two .hp__card{display:none}}
@media (max-width:560px){.film__s{top:46%}.film .tick{display:none}}

/* ===================================================== brand colours (the Mondrian squares in the logo) */
:root{--b-red:#c4161c;--b-yel:#e0b400;--b-blue:#1f4fd1;--s-red:#fdeceb;--s-yel:#fff6d6;--s-blue:#e8eefd;--s-ink:#efebe5}
.tile{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;flex:none}
.tile svg{width:22px;height:22px;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile--r{background:var(--s-red)}.tile--r svg{stroke:var(--b-red)}
.tile--y{background:var(--s-yel)}.tile--y svg{stroke:#a37f00}
.tile--b{background:var(--s-blue)}.tile--b svg{stroke:var(--b-blue)}
.svc .tile{margin-bottom:4px}
.sq{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:9px;vertical-align:-1px}
.sq--r{background:var(--b-red)}.sq--y{background:#f2c400}.sq--b{background:var(--b-blue)}
.center__lede{max-width:56ch;margin-top:16px;color:var(--muted)}

/* stats with a coloured top edge */
.stat{position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;inset:0 0 auto;height:4px}
.stat--r::before{background:var(--b-red)}.stat--y::before{background:#f2c400}.stat--b::before{background:var(--b-blue)}.stat--k::before{background:var(--ink)}
.stat--r b{color:var(--b-red)}.stat--y b{color:#b38d00}.stat--b b{color:var(--b-blue)}.stat--k b{color:var(--ink)}

/* service groups: two clean cards with photo header and an icon list */
.groups{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
.grp{overflow:hidden;padding:0}
.grp__head{position:relative;height:200px;color:#fff}
.grp__head img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.grp__head::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.88),rgba(10,10,10,.15))}
.grp__head>div{position:absolute;left:24px;right:24px;bottom:20px;z-index:1}
.grp__head .eyebrow{color:rgba(255,255,255,.7);margin-bottom:6px}
.grp__head h3{font-size:30px}
.grp__head p{font-size:14.5px;color:rgba(255,255,255,.8)}
.grp ul{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:16px}
.grp li a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;font-size:14.5px;font-weight:500;transition:background .2s}
.grp li a:hover{background:var(--tint)}
.grp li .tile{width:36px;height:36px;border-radius:10px}.grp li .tile svg{width:18px;height:18px}
.grp li em{margin-left:auto;font-style:normal;color:var(--muted);opacity:0;transition:opacity .2s,transform .2s;transform:translateX(-4px)}
.grp li a:hover em{opacity:1;transform:none}

/* feature cards with small interface illustrations, as on Art Vision Connect */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.feat{padding:18px 18px 26px}
.feat h3{margin:22px 6px 6px}
.feat>p{margin:0 6px;font-size:14.5px;color:var(--muted)}
.feat__ui{min-height:228px;padding:18px;border-radius:12px;background:var(--tint);border:1px solid var(--line);background-image:radial-gradient(rgba(10,10,10,.06) 1px,transparent 1px);background-size:16px 16px;display:grid;align-content:start;gap:8px}
.ui__k{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--muted);margin-bottom:4px}
.ui__row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:13px}
.ui__row b{font-weight:600}
.ui__row em{font-style:normal;color:var(--muted)}
.ui__row i{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;color:var(--b-red)}
.ui__row--on{border-color:#f0b5b2;box-shadow:0 0 0 3px var(--s-red)}
.av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:600;flex:none}
.av--r{background:var(--s-red);color:var(--b-red)}.av--y{background:var(--s-yel);color:#8a6c00}.av--b{background:var(--s-blue);color:var(--b-blue)}
.ui__line{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:8px;background:#fff;border:1px solid var(--line);font-size:12.5px}
.ui__line i{margin-left:auto;width:54px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--s-ink),#e4ded5)}
.ui__tot{display:flex;justify-content:space-between;padding:10px 12px;border-radius:8px;background:var(--ink);color:#fff;font-size:12.5px;margin-top:2px}
.ui__tot b{color:#ffd54d;font-weight:600}
.ui__tl{display:grid;gap:0;position:relative;padding-left:4px}
.ui__tl li{position:relative;display:flex;justify-content:space-between;padding:9px 0 9px 26px;font-size:13px}
.ui__tl li::before{content:"";position:absolute;left:0;top:13px;width:12px;height:12px;border-radius:50%;border:2px solid #cfc7bc;background:#fff}
.ui__tl li::after{content:"";position:absolute;left:6px;top:27px;bottom:-11px;width:2px;background:#e2dbd1}
.ui__tl li:last-child::after{display:none}
.ui__tl li.done::before{border-color:var(--b-blue);background:var(--b-blue);box-shadow:inset 0 0 0 2px #fff}
.ui__tl li:last-child::before{border-color:var(--b-red)}
.ui__tl span{color:var(--muted);font-size:12px}
.ui__tl b{font-weight:600}

/* clients, standards, flow nodes */
.cl .tile{margin-bottom:6px}
.stds li{position:relative;overflow:hidden;background:#fff}
.stds li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.std--r::before{background:var(--b-red)}.std--y::before{background:#f2c400}.std--b::before{background:var(--b-blue)}.std--k::before{background:var(--ink)}
.flow__out span{border-color:var(--line);color:var(--ink)}
.flow__lines path:nth-child(n+4){stroke:#c9c0b4}
.steps li:nth-child(1) i{color:var(--b-red)}.steps li:nth-child(2) i{color:#b38d00}.steps li:nth-child(3) i{color:var(--b-blue)}.steps li:nth-child(4) i{color:var(--ink)}

@media (max-width:1080px){.feats{grid-template-columns:1fr 1fr}.groups{grid-template-columns:1fr}}
@media (max-width:640px){.feats,.grp ul{grid-template-columns:1fr}}

/* closing form */
.cta{background:var(--tint);background-image:radial-gradient(rgba(10,10,10,.07) 1px,transparent 1px);background-size:22px 22px;color:var(--ink);padding:100px 0}
.cta__box{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(10,10,10,.35)}
.cta__l{padding:44px;background:var(--dark);color:#fff;display:flex;flex-direction:column}
.cta__l .eyebrow{color:rgba(255,255,255,.55)}
.cta__l .hl{color:#ff6a5f}
.cta__lede{margin-top:16px;color:rgba(255,255,255,.75)}
.cta__steps{display:grid;gap:10px;margin:28px 0}
.cta__steps li{display:grid;grid-template-columns:auto 1fr;gap:0 12px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.cta__steps .sq{grid-row:span 2;margin:6px 0 0}
.cta__steps b{font-size:14px}
.cta__steps span{font-size:13.5px;color:rgba(255,255,255,.7)}
.cta__alt{margin-top:auto;font-size:14px;color:rgba(255,255,255,.7)}
.cta__alt a{color:#fff;font-weight:600}
.cf--cta{grid-template-columns:1fr 1fr;gap:16px;padding:44px;border:0;box-shadow:none;align-content:start}
.cf--cta .full{grid-column:1/-1}
.cf label small{font-weight:400;color:var(--muted);margin-left:6px}
.cf input,.cf select,.cf textarea{min-height:48px;background:var(--tint);border-color:var(--line);transition:background .2s,border-color .2s}
.cf input:focus,.cf select:focus,.cf textarea:focus{background:#fff}
.cf textarea{resize:vertical}
.cf__note{font-size:12.5px;color:var(--muted);text-align:center}
.cf .btn{min-height:52px;font-size:15px}
@media (max-width:900px){.cta__box{grid-template-columns:1fr}.cta__l,.cf--cta{padding:28px}}
@media (max-width:560px){.cf--cta{grid-template-columns:1fr}}

/* ===================================================== Connect-style home blocks */
/* proof: a scrolling row of number cards */
.proof .split-h{margin-bottom:40px}
.proof__row{display:flex;gap:14px;overflow-x:auto;padding:4px max(24px,calc((100vw - 1180px) / 2)) 24px;scroll-snap-type:x mandatory;scrollbar-width:none}
.proof__row::-webkit-scrollbar{display:none}
.pf{flex:0 0 250px;padding:26px 24px;scroll-snap-align:start;position:relative;overflow:hidden}
.pf::before{content:"";position:absolute;inset:0 0 auto;height:4px}
.pf--r::before{background:var(--b-red)}.pf--y::before{background:#f2c400}.pf--b::before{background:var(--b-blue)}.pf--k::before{background:var(--ink)}
.pf b{display:block;font:500 54px/1 var(--heading);letter-spacing:-.04em;margin-bottom:20px}
.pf--r b{color:var(--b-red)}.pf--y b{color:#b38d00}.pf--b b{color:var(--b-blue)}
.pf h3{font:600 16px/1.3 var(--body);letter-spacing:0}
.pf p{font-size:14px;color:var(--muted);margin-top:4px}

/* cases: job types on the left, an example on the right */
.cases__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:48px}
.cases__head h2{max-width:15ch}
.cases__body{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start}
.cases__tabs{display:grid;gap:0}
.cases__tabs button{text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:14px 2px;font-size:15px;color:var(--muted);cursor:pointer;transition:color .2s}
.cases__tabs button:hover{color:var(--ink)}
.cases__tabs [aria-selected="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.cases__p{min-height:360px;padding:36px;border-radius:18px;background:radial-gradient(ellipse at 85% 10%,#fde3e0,transparent 55%),radial-gradient(ellipse at 10% 95%,#e3eafd,transparent 55%),var(--tint);border:1px solid var(--line)}
.cases__p h3{font-size:26px}
.cases__p>p{color:var(--muted);margin-top:10px;max-width:56ch}
.chips{display:grid;gap:12px;margin-top:30px;justify-items:start}
.chip{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);font-size:14px;opacity:0;transform:translateY(10px);animation:up .6s cubic-bezier(.2,.7,.2,1) forwards}
.chip--1{margin-left:36px;animation-delay:.25s}.chip--2{margin-left:72px;animation-delay:.5s}
.chip__i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px;flex:none}
.chip--0 .chip__i{background:var(--s-red);color:var(--b-red)}.chip--1 .chip__i{background:var(--s-yel);color:#8a6c00}.chip--2 .chip__i{background:#e3f4ea;color:#2f7d4f}

/* brain: any request on the left, what happens next on the right */
.brain__map{position:relative;display:grid;grid-template-columns:300px 1fr 300px;align-items:center;min-height:440px}
.brain__lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.brain__lines path{fill:none;stroke:#d8cfc4;stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-dasharray:5 9;animation:dash 1.8s linear infinite}
.brain__lines path.o{stroke:#e2a7a3}
.brain__col{position:relative;z-index:1;display:grid;gap:12px;justify-items:start}
.brain__col--out{justify-items:end}
.brain__col .ui__k{margin-bottom:6px}
.bchip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);font-size:13.5px;white-space:nowrap}
.bchip .sq{margin:0}
.bchip--out i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--b-blue);color:#fff;font-style:normal;font-size:10px}
.brain__hub{position:relative;z-index:1;justify-self:center;display:grid;justify-items:center;gap:10px;padding:26px 28px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 70px -30px rgba(196,22,28,.45)}
.brain__hub b{font:500 16px var(--heading)}

/* three steps band */
.s3{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.s3__in{display:grid;grid-template-columns:repeat(3,1fr)}
.s3__in>div{padding:44px 32px 44px 0;display:grid;gap:8px;align-content:start}
.s3__in>div+div{padding-left:32px;border-left:1px solid var(--line)}
.s3 .sq{width:12px;height:12px;margin:0 0 8px}
.s3 h3{font-size:24px}
.s3 p{color:var(--muted);font-size:15px}

/* project board */
.board{border-radius:18px;background:var(--dark);color:#fff;overflow:hidden;box-shadow:0 40px 90px -40px rgba(10,10,10,.6)}
.board__bar{display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12.5px;color:rgba(255,255,255,.7)}
.board__bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.board__bar i:nth-child(1){background:#ff5f57}.board__bar i:nth-child(2){background:#febc2e}.board__bar i:nth-child(3){background:#28c840}
.board__bar span{margin-left:10px}
.board__bar em{margin-left:auto;font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border:1px solid rgba(255,255,255,.2);border-radius:99px}
.board__cols{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:12px;padding:18px;overflow-x:auto}
.bcol{display:grid;gap:8px;align-content:start}
.bcol__h{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.75);margin-bottom:4px}
.bcol__h em{margin-left:auto;font-style:normal;font-size:11px;color:rgba(255,255,255,.45)}
.dot2{width:8px;height:8px;border-radius:50%}
.dot2--r{background:#ff5a4f}.dot2--y{background:#f2c400}.dot2--b{background:#5b84ff}.dot2--k{background:#d8d2c8}.dot2--g{background:#3cc47c}
.bcard{display:grid;gap:3px;padding:12px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:12.5px;transition:background .2s}
.bcard b{font-weight:600;font-size:13.5px}
.bcard span{color:rgba(255,255,255,.6)}
a.bcard:hover{background:rgba(255,255,255,.12)}
.bcol:nth-child(5) .bcard{border-color:rgba(255,90,79,.5);box-shadow:0 0 0 3px rgba(255,90,79,.12)}

/* we handle it */
.handle__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;width:100%;text-align:left}
.hcard{padding:22px}
.hcard h3{font-size:18px}
.hcard p{font-size:14px;color:var(--muted);margin-top:6px}
.sec.handle{background-image:radial-gradient(rgba(10,10,10,.06) 1px,transparent 1px);background-size:22px 22px}

/* all services list */
.ex{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px}
.ex__g h3{font-size:22px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.ex ul{display:grid}
.ex li a{display:flex;align-items:center;gap:14px;padding:12px 6px;border-bottom:1px solid var(--line);transition:background .2s}
.ex li a:hover{background:#fff}
.ex .tile{width:38px;height:38px;border-radius:10px}.ex .tile svg{width:19px;height:19px}
.ex b{display:block;font-weight:600;font-size:15px}
.ex small{display:block;font-size:13.5px;color:var(--muted)}

@media (max-width:1000px){
  .cases__body{grid-template-columns:1fr}
  .cases__tabs{display:flex;overflow-x:auto;gap:4px}.cases__tabs button{white-space:nowrap;padding:10px 12px}
  .brain__map{grid-template-columns:1fr;gap:20px}.brain__lines{display:none}.brain__col,.brain__col--out{justify-items:center}
  .handle__grid{grid-template-columns:1fr 1fr}
  .ex{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cases__head{flex-direction:column;align-items:flex-start}
  .s3__in{grid-template-columns:1fr}.s3__in>div,.s3__in>div+div{padding:26px 0;border-left:0;border-top:1px solid var(--line)}
  .handle__grid{grid-template-columns:1fr}
  .chip--1,.chip--2{margin-left:0}
  .cases__p{padding:24px}
}

/* ===================================================== one accent colour: ink, warm greys and Art Vision red only */
:root{--b-yel:var(--ink);--b-blue:var(--ink);--s-yel:#f1eee9;--s-blue:#f1eee9;--s-red:#f1eee9}
.film__s .hl,.hero .hl,.hp__h .hl{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#ff5f57}
.cta__l .hl{color:#ff5f57}
.tile,.tile--r,.tile--y,.tile--b{background:#f1eee9}
.tile svg,.tile--r svg,.tile--y svg,.tile--b svg{stroke:var(--ink)}
.svc:hover .tile,.ex li a:hover .tile,.grp li a:hover .tile{background:var(--red)}
.svc:hover .tile svg,.ex li a:hover .tile svg,.grp li a:hover .tile svg{stroke:#fff}
.stat::before,.pf::before{display:none}
.stat b,.stat--r b,.stat--y b,.stat--b b,.stat--k b,.pf b{color:var(--red)}
.std--r::before,.std--y::before,.std--b::before,.std--k::before{background:var(--red)}
.stds b{color:var(--ink)}
.sq,.sq--r,.sq--y,.sq--b{background:var(--red);border-radius:50%;width:8px;height:8px}
.steps li i,.steps li:nth-child(n) i{color:var(--red)}
.av,.av--r,.av--y,.av--b{background:#f1eee9;color:var(--ink)}
.ui__row--on{border-color:#e9b4b0;box-shadow:0 0 0 3px #fbecea}
.ui__tot b{color:#ff8a83}
.ui__tl li.done::before{border-color:var(--ink);background:var(--ink)}
.chip__i,.chip--0 .chip__i,.chip--1 .chip__i,.chip--2 .chip__i{background:#f1eee9;color:var(--ink)}
.chip--2 .chip__i{background:var(--red);color:#fff}
.cases__p{background:var(--card);box-shadow:var(--shadow)}
.sec--tint .cases__p{background:#fff}
.dd__p .ic{background:#f1eee9;border:0;stroke:var(--ink)}
.ft__g b,.ft__g span,.stars,.qt .stars,.gbadge .stars{color:var(--ink)}
.qt .stars,.gbadge .stars{color:var(--red)}
.sec--tint{background-image:none}

/* ===================================================== Frontdesk-inspired home blocks */
/* results: big number, real quote, link to the project */
.stories .split-h{margin-bottom:36px}
.stories__row{display:flex;gap:16px;overflow-x:auto;padding:4px max(24px,calc((100vw - 1180px) / 2)) 26px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.story{flex:0 0 340px;scroll-snap-align:start;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.story img{width:100%;aspect-ratio:16/9;object-fit:cover}
.story__b{display:flex;flex-direction:column;gap:6px;padding:22px 22px 24px;flex:1}
.story__n{font:500 44px/1 var(--heading);letter-spacing:-.04em;color:var(--red)}
.story__w{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.story blockquote{font:500 17px/1.45 var(--heading);letter-spacing:-.01em;margin-top:8px;flex:1}
.story__by{font-size:13.5px;color:var(--muted)}
.story__a{margin-top:8px;font-size:13.5px;font-weight:600;color:var(--ink)}
.story__a:hover{color:var(--red)}
.story--g{background:var(--dark);color:#fff;border-color:var(--dark)}
.story--g .story__n{color:#fff}
.story--g .story__w,.story--g .story__by{color:rgba(255,255,255,.6)}

/* the Art Vision way: six cards, each with a small live example */
.way__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wcard{display:flex;flex-direction:column;padding:24px 24px 18px}
.wcard h3{font-size:21px}
.wcard>p{font-size:14.5px;color:var(--muted);margin-top:8px}
.old{display:flex;gap:8px;align-items:baseline;margin-top:12px!important;font-size:13px!important}
.old span{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:#f1eee9;color:var(--muted)}
.old{text-decoration:line-through;text-decoration-color:rgba(106,100,94,.5)}
.old span{text-decoration:none}
.demo{position:relative;margin-top:18px;padding:16px;border-radius:12px;background:var(--tint);border:1px solid var(--line);display:grid;gap:8px;align-content:start;min-height:190px}
.demo::after{content:"Example";position:absolute;right:10px;top:-9px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--muted)}
.demo__in{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 6px 6px 12px;border-radius:9px;background:#fff;border:1px solid var(--line);font-size:13px}
.demo__in em{font-style:normal;font-size:12px;font-weight:600;padding:6px 10px;border-radius:7px;background:var(--red);color:#fff}
.demo__k{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--muted)}
.demo__l{display:flex;align-items:center;gap:10px;font-size:13.5px;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s}
.demo__l i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px;background:var(--ink);color:#fff;flex:none}
.demo__l--w i{background:#fff;color:var(--red);border:1px solid #e9b4b0}
.run .demo__l{opacity:1;transform:none}
.run .demo__l:nth-of-type(2){transition-delay:.35s}.run .demo__l:nth-of-type(3){transition-delay:.7s}.run .demo__l:nth-of-type(4){transition-delay:1.05s}.run .demo__l:nth-of-type(5){transition-delay:1.4s}
.demo__tl{display:grid}
.demo__tl li{position:relative;display:flex;justify-content:space-between;padding:8px 0 8px 24px;font-size:13.5px}
.demo__tl li::before{content:"";position:absolute;left:0;top:12px;width:11px;height:11px;border-radius:50%;border:2px solid #cfc7bc;background:#fff}
.demo__tl li::after{content:"";position:absolute;left:5px;top:25px;bottom:-9px;width:2px;background:#e2dbd1}
.demo__tl li:last-child::after{display:none}
.demo__tl li.d::before{background:var(--ink);border-color:var(--ink)}
.demo__tl li:last-child::before{border-color:var(--red)}
.demo__tl span{color:var(--muted);font-size:12.5px}
.demo__note{padding:14px;border-radius:10px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--red);display:grid;gap:6px}
.demo__note b{font:500 18px/1.2 var(--heading)}
.demo__note p:last-child{font-size:13px;color:var(--muted)}

/* who we work for: tabs, each with a three-step flow */
.who__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:30px auto 30px;padding:5px;border-radius:12px;background:var(--tint);border:1px solid var(--line);width:max-content;max-width:100%}
.who__tabs button{border:0;background:none;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.who__tabs [aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.who__p{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:40px;border-radius:20px;background:var(--dark);color:#fff}
.who__p h3{font-size:30px}
.who__p p{color:rgba(255,255,255,.75);margin:12px 0 18px}
.who__p .more{color:#ff7a72}
.who__flow{display:grid;gap:10px;counter-reset:f}
.who__flow li{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:15px;opacity:0;transform:translateX(12px);animation:slidein .5s cubic-bezier(.2,.7,.2,1) forwards}
.who__flow li:nth-child(2){animation-delay:.15s}.who__flow li:nth-child(3){animation-delay:.3s}
.who__flow span{font-size:12px;font-weight:600;color:#ff7a72}
@keyframes slidein{to{opacity:1;transform:none}}

/* what we paint: six photo tiles */
.paint__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ptile{position:relative;display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--dark2)}
.ptile img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.ptile span{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;align-items:flex-end;padding:44px 20px 18px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font:500 21px/1.2 var(--heading);letter-spacing:-.02em}
.ptile em{font-style:normal;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);font-size:15px;transition:background .2s}
.ptile:hover img{transform:scale(1.05)}
.ptile:hover em{background:var(--red)}

@media (max-width:1000px){.way__grid,.paint__grid{grid-template-columns:1fr 1fr}.who__p{grid-template-columns:1fr;padding:28px}}
@media (max-width:620px){.way__grid,.paint__grid{grid-template-columns:1fr}.story{flex-basis:84vw}.who__tabs{width:100%}.who__tabs button{flex:1 1 auto}}
@media (prefers-reduced-motion:reduce){.demo__l{opacity:1;transform:none}.who__flow li{animation:none;opacity:1;transform:none}}
.who__p[hidden],.cases__p[hidden]{display:none}
.stories__row{scroll-padding-inline:max(24px,calc((100vw - 1180px) / 2))}

/* ===================================================== Frontdesk templates */
/* hero: the video simply plays behind the headline */
.hv{position:relative;min-height:min(860px,100svh);display:flex;align-items:center;background:var(--dark);color:#fff;overflow:hidden}
.hv__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hv__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.85) 0%,rgba(10,10,10,.55) 50%,rgba(10,10,10,.15) 100%),linear-gradient(0deg,rgba(10,10,10,.55),transparent 40%)}
.hv__in{position:relative;z-index:1;padding:140px 0 90px}
.hv h1{font-size:clamp(44px,5.6vw,84px);max-width:13ch;line-height:1.02}
.hv .hl{color:#fff;opacity:.62}
.hv__lede{max-width:540px;margin-top:24px;font-size:18px;color:rgba(255,255,255,.82)}
.qf--pill{max-width:660px;margin-top:34px;border-radius:14px;background:rgba(255,255,255,.96)}
.hv__trust{margin-top:22px;font-size:14px;color:rgba(255,255,255,.75)}
.hv__trust .stars{color:#fff}
.hv__trust a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* references: wide story cards with a big number over the photo */
.refs__h{max-width:20ch;margin-bottom:44px}
.car{position:relative}
.car__t{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;margin:0 -24px;padding:0 24px 8px}
.car__t::-webkit-scrollbar{display:none}
.ref{flex:0 0 min(1020px,88%);scroll-snap-align:start;display:grid;grid-template-columns:1.15fr 1fr;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);min-height:400px}
.ref__img{position:relative}
.ref__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ref__img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 55%)}
.ref__n{position:absolute;left:28px;bottom:24px;z-index:1;color:#fff;display:grid}
.ref__n b{font:500 64px/1 var(--heading);letter-spacing:-.04em}
.ref__n span{font-size:15px;opacity:.85}
.ref__t{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:44px}
.ref__k{font-size:11.5px;font-weight:600;letter-spacing:.16em;color:var(--muted)}
.ref blockquote{font:500 clamp(20px,1.8vw,25px)/1.4 var(--heading);letter-spacing:-.02em}
.ref__by{font-size:14px;color:var(--muted)}
.ref .btn{align-self:flex-start;margin-top:6px}
.car__nav{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:26px}
.car__all{font-size:14px;font-weight:600}
.car__all:hover{color:var(--red)}
.car__dots{display:flex;gap:6px}
.car__dots i{width:8px;height:8px;border-radius:50%;background:#e3e3e3;transition:width .3s,background .3s}
.car__dots i.on{width:24px;border-radius:4px;background:var(--ink)}
.car__btns{display:flex;gap:8px}
.car__b{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:16px;cursor:pointer}
.car__b:hover{border-color:var(--ink)}

/* clients: Frontdesk-style list on the left, a soft panel on the right */
.clients .split-h>div{display:grid;gap:18px;justify-items:start}
.cl2{display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:start}
.cl2__tabs{display:grid}
.cl2__tabs button{text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:16px 2px;font-size:16px;color:var(--muted);cursor:pointer}
.cl2__tabs button:hover{color:var(--ink)}
.cl2__tabs [aria-selected="true"]{color:var(--ink);font-weight:600;border-bottom:2px solid var(--ink)}
.cl2__p{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);min-height:380px;animation:fade .5s ease}
.cl2__p[hidden]{display:none}
.cl2__txt{padding:40px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.cl2__txt h3{font-size:30px}
.cl2__txt p{color:var(--muted)}
.cl2__p img{width:100%;height:100%;object-fit:cover}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* process: four numbered steps on a line */
.proc{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px}
.proc::before{content:"";position:absolute;left:0;right:0;top:21px;height:1px;background:var(--line)}
.proc li{position:relative}
.proc i{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);font:600 13px var(--body);font-style:normal;color:var(--red);margin-bottom:20px;box-shadow:var(--shadow)}
.proc h3{font-size:22px}
.proc p{color:var(--muted);font-size:15px;margin-top:8px}

@media (max-width:1000px){.ref{grid-template-columns:1fr}.ref__img{min-height:260px}.cl2{grid-template-columns:1fr}.cl2__tabs{display:flex;overflow-x:auto}.cl2__tabs button{white-space:nowrap;padding:12px 14px}.cl2__p{grid-template-columns:1fr}.cl2__p img{height:240px}.proc{grid-template-columns:1fr 1fr}.proc::before{display:none}}
@media (max-width:560px){.ref{flex-basis:92%}.ref__t,.cl2__txt{padding:24px}.proc{grid-template-columns:1fr}.car__dots{display:none}}

/* ---------- inner pages: split header with a real photo ---------- */
.ph{padding:132px 0 64px;background:var(--tint)}
.ph__in{display:grid;gap:56px;align-items:center}
.ph--img .ph__in{grid-template-columns:1.05fr .95fr}
.ph__txt{min-width:0}
.ph h1{font-size:clamp(38px,4.6vw,64px);max-width:15ch;margin-bottom:20px}
.ph__lede{font-size:18px;color:var(--muted);max-width:56ch;margin-bottom:28px}
.ph__img{border-radius:20px;overflow:hidden;aspect-ratio:5/4;box-shadow:0 40px 80px -40px rgba(10,10,10,.45)}
.ph__img img{width:100%;height:100%;object-fit:cover}
.ph .crumbs{margin-bottom:22px}
.acts{display:flex;flex-wrap:wrap;gap:10px}

/* what's included: heading left, checklist right */
.inc{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.inc .h3{margin-bottom:12px}
.inc__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.inc__list li{display:flex;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);font-weight:500}
.inc__list i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font:700 12px/22px var(--body);text-align:center;font-style:normal;margin-top:2px}
.inc .tags{margin-top:22px}

/* clients hub: photo rows */
.crows{display:grid;gap:16px}
.crow{display:grid;grid-template-columns:340px 1fr;gap:36px;align-items:center;padding:14px;border-radius:20px;background:#fff;border:1px solid var(--line);transition:box-shadow .2s,transform .2s}
.crow:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.crow img{width:100%;height:210px;object-fit:cover;border-radius:12px}
.crow h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:8px}
.crow p{color:var(--muted);max-width:60ch;margin-bottom:14px}
.more{color:var(--red);font-weight:600;font-size:15px}

/* project pages */
.sec--top0{padding-top:0}
.ph+.sec--top0{padding-top:40px;background:linear-gradient(var(--tint) 50%,#fff 50%)}
.gal2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.gal2 img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px}
.bigq{margin:0 auto;max-width:860px;text-align:center}
.bigq blockquote{margin:0 0 20px;font:500 clamp(24px,2.8vw,36px)/1.3 var(--heading);letter-spacing:-.02em}
.bigq figcaption{color:var(--muted);font-size:15px}
.ph .facts{margin-top:4px}

/* areas */
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.area{position:relative;display:grid;gap:4px;padding:22px 24px;border-radius:14px;background:#fff;border:1px solid var(--line);transition:border-color .2s,transform .2s}
.area:hover{border-color:var(--ink);transform:translateY(-2px)}
.area b{font:600 20px/1.2 var(--heading)}
.area span{color:var(--muted);font-size:14px}
.area em{position:absolute;right:22px;top:50%;translate:0 -50%;font-style:normal;color:var(--red);font-size:20px}

/* contact page */
.cta--page{padding-top:0;background:#fff}
.ph:not(.ph--img){padding-bottom:48px;background:#fff}

/* ---------- Art Vision Connect block ---------- */
.avc{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:56px;border-radius:24px;background:var(--dark);color:#fff;overflow:hidden;position:relative}
.avc::before{content:"";position:absolute;inset:auto -10% -60% 40%;height:120%;background:radial-gradient(closest-side,rgba(196,22,28,.35),transparent);pointer-events:none}
.avc>*{position:relative}
.avc__badge{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:13px;font-weight:600;margin-bottom:22px}
.avc__badge img{display:block}
.avc h2{font-size:clamp(30px,3.4vw,46px);line-height:1.08;margin-bottom:18px}
.avc .hl{color:#ff6a6f}
.avc__t>p:not(.avc__badge){color:rgba(255,255,255,.72);font-size:16.5px;max-width:52ch;margin-bottom:22px}
.avc__ticks{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:10px}
.avc__ticks li{display:flex;gap:10px;align-items:center;font-weight:500}
.avc__ticks li::before{content:"✓";flex:none;width:20px;height:20px;border-radius:50%;background:var(--red);font-size:11px;font-weight:700;display:grid;place-items:center}
.avc .btn--ghost{color:#fff;border-color:rgba(255,255,255,.25);background:transparent}
.avc .btn--ghost:hover{border-color:#fff}
.avc__ui{display:grid;gap:14px}
.avc__mail,.avc__panel{border-radius:16px;padding:22px;font-size:15px}
.avc__mail{background:#fff;color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.avc__from{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px}
.avc__from span{width:30px;height:30px;border-radius:50%;background:#ebebeb;display:grid;place-items:center;font-size:11px;font-weight:700}
.avc__mail mark{background:rgba(196,22,28,.12);color:var(--ink);padding:1px 3px;border-radius:4px}
.avc__panel{background:var(--dark2);border:1px solid rgba(255,255,255,.1);margin-left:36px}
.avc__k{font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.5);font-weight:600;margin-bottom:12px}
.avc__f{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px}
.avc__f span{color:rgba(255,255,255,.55)}
.avc__go{margin-top:16px;display:inline-block;padding:9px 16px;border-radius:10px;background:var(--red);font-weight:600;font-size:14px}
.avc--slim{grid-template-columns:1fr;padding:44px 48px}
.avc--slim .avc__t>p{margin-bottom:24px}

@media (max-width:1000px){
  .ph--img .ph__in,.inc,.avc{grid-template-columns:1fr;gap:36px}
  .ph__img{aspect-ratio:16/10}
  .crow{grid-template-columns:1fr;gap:18px}
  .crow div{padding:0 10px 10px}
  .avc{padding:36px}
  .avc__panel{margin-left:0}
}
@media (max-width:560px){
  .ph{padding:112px 0 48px}
  .inc__list{grid-template-columns:1fr}
  .avc{padding:26px 22px}
  .crow img{height:190px}
}

/* two plain sections in a row share one gap */
.sec:not(.sec--tint):not(.cta)+.sec:not(.sec--tint):not(.cta){padding-top:0}
.gal2 img:only-child{aspect-ratio:21/8}
.refs{overflow-x:clip}

/* =================================================================== v4: Frontdesk-style structure */
/* announcement bar */
.ann{position:relative;z-index:60;display:flex;align-items:center;justify-content:center;gap:14px;min-height:40px;padding:6px 52px;background:#0a0a0a;color:rgba(255,255,255,.82);font-size:13px;text-align:center}
.ann p{margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.ann b{color:#fff}
.ann__tag{padding:2px 8px;border-radius:999px;background:rgba(196,22,28,.22);color:#ff7a7f;font-size:10.5px;font-weight:700;letter-spacing:.12em}
.ann__go{padding:5px 12px;border-radius:999px;background:var(--red);color:#fff;font-weight:600;font-size:12.5px;white-space:nowrap}
.ann__go:hover{background:var(--red-d)}
.ann__x{position:absolute;right:14px;top:50%;translate:0 -50%;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.6);font-size:20px;line-height:1;cursor:pointer}
.ann__x:hover{color:#fff;background:rgba(255,255,255,.08)}
body.no-ann .ann{display:none}

/* nav: transparent over the home video, a dark pill once you scroll */
.nav{top:calc(var(--annh,40px) + 12px);transition:top .35s ease}
body.no-ann .nav,.nav.is-scrolled{top:12px}
.nav__bar{transition:background .35s,box-shadow .35s,width .45s cubic-bezier(.2,.7,.2,1),padding .35s,border-color .35s;border:1px solid transparent}
.nav.is-scrolled .nav__bar{width:min(1120px,100% - 24px);border-color:rgba(255,255,255,.08)}
.home .nav:not(.is-scrolled) .nav__bar{width:min(1320px,100% - 32px);background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav__links>a,.dd__t{border-radius:8px}

/* dark dropdowns */
.dd__p{background:#171717;color:#fff;box-shadow:0 24px 60px -16px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.dd__p a{color:rgba(255,255,255,.86)}
.dd__p a:hover{background:rgba(255,255,255,.06)}
.dd__p b{color:rgba(255,255,255,.5)}
.dd__p .ic{color:#ff6a6f}
.dd__cta{background:rgba(196,22,28,.14)!important}
.dd__cta b{color:#ff7a7f!important}
.dd__cta span{color:rgba(255,255,255,.65)}
.dd__p--cases{min-width:380px;padding:10px}
.dd__case{display:flex!important;align-items:center;gap:12px;padding:8px!important;border-radius:10px}
.dd__case img{width:64px;height:44px;object-fit:cover;border-radius:7px;flex:none}
.dd__case span{display:grid;line-height:1.3}
.dd__case b{color:#fff!important;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;padding:0}
.dd__case small{color:rgba(255,255,255,.55);font-size:12.5px}
.dd__all{margin-top:4px;padding:10px 12px!important;border-top:1px solid rgba(255,255,255,.08);color:#ff7a7f!important;font-weight:600;font-size:14px}

/* hero: full-bleed city video */
.fxh{position:relative;min-height:calc(100svh - 40px);display:flex;flex-direction:column;justify-content:flex-end;background:#0a0a0a;color:#fff;overflow:hidden}
.fxh__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fxh__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.5) 48%,rgba(10,10,10,.12) 100%),linear-gradient(0deg,rgba(10,10,10,.85) 0%,transparent 38%)}
.fxh__in{position:relative;z-index:1;padding:128px 0 40px;width:min(1320px,100% - 64px)}
.fxh__k{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:13px;font-weight:500;color:rgba(255,255,255,.85);margin-bottom:26px;backdrop-filter:blur(8px)}
.dot{width:8px;height:8px;border-radius:50%;background:#ff3b41;box-shadow:0 0 0 0 rgba(255,59,65,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(255,59,65,0)}100%{box-shadow:0 0 0 0 rgba(255,59,65,0)}}
.fxh h1{font-size:clamp(44px,min(6vw,10.5vh),88px);line-height:1;max-width:13.5ch;letter-spacing:-.035em}
.fxh .hl{color:#ff4d53}
.fxh__lede{max-width:560px;margin:22px 0 26px;font-size:18.5px;color:rgba(255,255,255,.82)}
.fxh .qf--pill{max-width:640px}
.fxh__trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:14px;color:rgba(255,255,255,.75)}
.fxh__trust>*+*::before{content:"·";margin-right:22px;color:rgba(255,255,255,.35)}
.fxh__trust a:hover{color:#fff}
.stars{color:#ffb400;letter-spacing:1px}
.fxh__pause{position:absolute;right:28px;bottom:118px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);color:#fff;font-size:11px;cursor:pointer;backdrop-filter:blur(6px)}
.fxh__pause:hover{background:rgba(0,0,0,.45)}

/* marquee of communities */
.mq{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.12);padding:18px 0 22px;background:rgba(10,10,10,.35);backdrop-filter:blur(6px)}
.mq__k{text-align:center;font-size:10.5px;font-weight:600;letter-spacing:.2em;color:rgba(255,255,255,.5);margin-bottom:12px}
.mq__t{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq__t>div{display:flex;flex:none;align-items:center;gap:26px;padding-right:26px;animation:mq 70s linear infinite}
.mq__t a{font:500 22px/1 var(--heading);letter-spacing:-.01em;color:rgba(255,255,255,.78);white-space:nowrap}
.mq__t a:hover{color:#fff}
.mq__t i{font-style:normal;color:var(--red);font-size:12px}
.mq:hover .mq__t>div{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-100%)}}

/* film card with messages */
.reel{padding-top:90px}
.reel__card{position:relative;aspect-ratio:16/8.2;border-radius:28px;overflow:hidden;background:#111;box-shadow:0 60px 120px -50px rgba(10,10,10,.6);transform:scale(var(--s,1));transform-origin:50% 0;will-change:transform}
.reel__card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel__card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,rgba(0,0,0,.35))}
.reel__mark{position:absolute;left:28px;bottom:24px;z-index:1;opacity:.9}
.reel__msgs{position:absolute;right:5%;top:16%;z-index:1;display:grid;gap:14px;width:min(380px,44%)}
.bub{margin:0;padding:14px 18px;border-radius:18px;font-size:15px;line-height:1.45;box-shadow:0 20px 40px -18px rgba(0,0,0,.5);opacity:0;transform:translateY(12px) scale(.98);transition:opacity .5s,transform .5s}
.bub b{display:block;font-size:12px;font-weight:600;opacity:.65;margin-bottom:3px}
.bub--in{background:rgba(255,255,255,.95);color:var(--ink);border-bottom-left-radius:6px;margin-right:36px}
.bub--out{background:var(--red);color:#fff;border-bottom-right-radius:6px;margin-left:36px}
.run .bub--in{opacity:1;transform:none;transition-delay:.3s}
.run .bub--out{opacity:1;transform:none;transition-delay:1.5s}
.acts--c{justify-content:center;margin-top:34px}

/* numbers */
.nums{background:var(--dark);color:#fff}
.nums__h{text-align:center;margin-bottom:56px}
.nums__h .eyebrow{color:rgba(255,255,255,.5)}
.nums .hl{color:#ff4d53}
.nums__g{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.1);border-left:1px solid rgba(255,255,255,.1)}
.num{padding:38px 32px 34px;border-right:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.num__v{font:500 clamp(54px,6vw,84px)/1 var(--heading);letter-spacing:-.04em;color:#ff4d53;margin-bottom:18px}
.num__v b{font-weight:500;color:#fff}
.num h3{font-size:17px;margin-bottom:6px}
.num p:last-child{color:rgba(255,255,255,.58);font-size:14.5px;margin:0}
.nums__src{text-align:center;margin-top:26px;font-size:12.5px;color:rgba(255,255,255,.42)}

/* segmented tabs: what we paint */
.tabs2{display:flex;width:fit-content;max-width:100%;overflow-x:auto;margin:0 auto 46px;padding:5px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);scrollbar-width:none}
.tabs2 button{flex:none;padding:10px 20px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:500 14.5px var(--body);cursor:pointer;position:relative}
.tabs2 button[aria-selected=true]{color:var(--ink);background:var(--tint)}
.tabs2 button[aria-selected=true]::after{content:"";position:absolute;left:20px;right:20px;bottom:4px;height:2px;border-radius:2px;background:var(--red)}
.wk__panels{margin-top:44px}
.wk__p{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;padding:18px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(10,10,10,.45);animation:fade .5s ease}
.wk__p[hidden]{display:none}
.wk__txt{padding:28px 22px 22px 26px}
.wk__txt h3{font-size:clamp(24px,2.4vw,32px);margin-bottom:12px}
.wk__txt>p{color:var(--muted);margin-bottom:20px}
.wk__txt ul{list-style:none;margin:0;padding:0}
.wk__txt li a{display:flex;align-items:center;gap:12px;padding:13px 2px;border-top:1px solid var(--line);font-weight:500}
.wk__txt li a:hover{color:var(--red)}
.wk__txt .ic{width:22px;height:22px;color:var(--red);flex:none}
.wk__txt em{margin-left:auto;font-style:normal;color:var(--muted)}
.wk__pics{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:12px;min-height:460px}
.wk__pics img{width:100%;height:100%;object-fit:cover;border-radius:16px}
.wk__pics img:first-child{grid-row:1/3}

/* three cards with small live examples */
.way__h{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:end;margin-bottom:56px}
.way__h h2{max-width:16ch}
.way__k{font-weight:600;margin-bottom:8px}
.way__h p:last-child{color:var(--muted)}
.way__g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wcard{display:flex;flex-direction:column;padding:28px 28px 22px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.wcard h3{font-size:22px;margin-bottom:10px}
.wcard>p{color:var(--muted);font-size:15px}
.wcard__tag{align-self:flex-start;margin:4px 0 22px;padding:4px 10px;border-radius:999px;background:var(--tint);font-size:12px;font-weight:600;color:var(--ink)!important}
.ui{margin-top:auto;padding:18px;border-radius:16px;background:var(--tint);border:1px solid var(--line);min-height:206px}
.ui__k{font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--muted);margin-bottom:14px}
.ui ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ui__list li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:#fff;font-size:14px;font-weight:500;opacity:.35;transition:opacity .4s}
.ui__list li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid #d4d4d4;transition:background .3s,border-color .3s}
.run .ui__list li{opacity:1}
.run .ui__list li::before{background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--red)}
.ui__bars li{display:grid;gap:5px;font-size:13.5px;font-weight:500}
.ui__bars i{display:block;height:8px;border-radius:8px;background:#e8e8e8;overflow:hidden}
.ui__bars i::after{content:"";display:block;height:100%;width:0;border-radius:8px;background:var(--red);transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.run .ui__bars i::after{width:var(--w)}
.ui__ok{margin:14px 0 0;font-size:13.5px;font-weight:600;color:var(--red);opacity:0;transition:opacity .5s 1.6s}
.run .ui__ok{opacity:1}
.ui__log li{display:flex;gap:12px;align-items:baseline;padding:8px 12px;border-radius:10px;background:#fff;font-size:14px;opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .4s}
.ui__log b{flex:none;width:38px;font-size:11.5px;letter-spacing:.06em;color:var(--red);text-transform:uppercase}
.run .ui__log li{opacity:1;transform:none}
.run .ui__list li:nth-child(2),.run .ui__log li:nth-child(2),.run .ui__bars li:nth-child(2) i::after{transition-delay:.35s}
.run .ui__list li:nth-child(3),.run .ui__log li:nth-child(3),.run .ui__bars li:nth-child(3) i::after{transition-delay:.7s}
.run .ui__list li:nth-child(4),.run .ui__log li:nth-child(4),.run .ui__bars li:nth-child(4) i::after{transition-delay:1.05s}
.run .ui__list li:nth-child(2)::before{transition-delay:.35s}.run .ui__list li:nth-child(3)::before{transition-delay:.7s}.run .ui__list li:nth-child(4)::before{transition-delay:1.05s}

/* clients: link inside the panel */
.cl2__txt .more{margin-top:6px}

/* hub: every request becomes one project file */
.hub__d{display:grid;grid-template-columns:230px 1fr 210px 1fr 250px;align-items:center;margin-top:56px}
.hub__k{font-size:10.5px;font-weight:600;letter-spacing:.18em;color:var(--muted);margin-bottom:12px}
.hub__l{list-style:none;margin:0;padding:0;display:grid;gap:20px;height:320px;align-content:center}
.hub__l li{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px 0 6px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);font-size:14px;font-weight:500;white-space:nowrap}
.hub__l span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--tint);font-size:13px;flex:none}
.hub__l li.hub__avc{border-color:rgba(196,22,28,.45);box-shadow:0 0 0 4px rgba(196,22,28,.08)}
.hub__avc span{background:var(--red);color:#fff}
.hub__l--r span{background:var(--red);color:#fff;font-size:12px}
.hub__w{width:100%;height:320px;overflow:visible}
.hub__w path{fill:none;stroke:#d9d9d9;stroke-width:1.5;stroke-dasharray:5 7;vector-effect:non-scaling-stroke}
.run .hub__w path{stroke:#eba3a6;animation:flow 1.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-24}}
.hub__c{display:grid;justify-items:center;gap:6px;padding:28px 20px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(10,10,10,.45),0 0 0 8px rgba(196,22,28,.05);text-align:center}
.hub__c img{margin-bottom:8px}
.hub__c b{font:600 17px var(--heading)}
.hub__c span{font-size:13px;color:var(--muted)}
.run .hub__c{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 30px 60px -30px rgba(10,10,10,.45),0 0 0 14px rgba(196,22,28,.07)}}
.hub__avcnote{display:flex;align-items:center;gap:18px;max-width:900px;margin:56px auto 0;padding:16px 18px 16px 22px;border-radius:18px;background:var(--tint);border:1px solid var(--line)}
.hub__avcnote p{margin:0;font-size:15px;color:var(--muted)}
.hub__avcnote b{color:var(--ink)}
.hub__avcnote .btn{flex:none}

/* featured case study */
.case{background:var(--tint)}
.case__in{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.case__img{position:relative;aspect-ratio:5/4;border-radius:26px;overflow:hidden;box-shadow:0 50px 100px -50px rgba(10,10,10,.6)}
.case__img img{width:100%;height:100%;object-fit:cover}
.case__badge{position:absolute;left:20px;top:20px;padding:6px 12px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:700;letter-spacing:.14em}
.case__t h2{font-size:clamp(32px,3.6vw,50px);margin-bottom:22px}
.case__t blockquote{margin:0 0 8px;font:500 21px/1.4 var(--heading);letter-spacing:-.01em}
.case__by{color:var(--muted);font-size:14px;margin-bottom:28px}
.case__s{display:flex;gap:40px;margin:0 0 30px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.case__s dt{font:500 46px/1 var(--heading);letter-spacing:-.03em;color:var(--red)}
.case__s dd{margin:6px 0 0;font-size:13px;color:var(--muted)}

/* trust */
.trust__g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.trust__g article{border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.trust__g img{width:100%;aspect-ratio:4/3;object-fit:cover}
.trust__g h3{font-size:21px;margin:22px 24px 8px}
.trust__g p{color:var(--muted);font-size:15px;margin:0 24px 26px}

/* pricing-style offer */
.price__g{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:960px;margin:52px auto 0}
.pcard{display:flex;flex-direction:column;padding:36px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.pcard__k{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--muted)}
.pcard__v{font:500 clamp(44px,4.6vw,60px)/1 var(--heading);letter-spacing:-.035em;margin:14px 0 10px}
.pcard__d{color:var(--muted);margin-bottom:22px}
.pcard ul{list-style:none;margin:0 0 30px;padding:22px 0 0;border-top:1px solid var(--line);display:grid;gap:12px}
.pcard li{display:flex;gap:10px;font-size:15px}
.pcard li::before{content:"✓";color:var(--red);font-weight:700}
.pcard .btn{margin-top:auto;justify-content:center}
.pcard--dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.pcard--dark .pcard__k,.pcard--dark .pcard__d{color:rgba(255,255,255,.6)}
.pcard--dark ul{border-color:rgba(255,255,255,.12)}
.pcard--dark li::before{color:#ff4d53}
.btn--ghost{color:#fff;border:1px solid rgba(255,255,255,.28);background:transparent}
.btn--ghost:hover{border-color:#fff}

/* footer with the mountain video and a big wordmark */
.ft--fx{position:relative;overflow:hidden;background:#0a0a0a;padding:0 0 26px;border:0}
.ft__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.ft__shade{position:absolute;inset:0;background:linear-gradient(180deg,#0a0a0a 0%,rgba(13,12,11,.88) 45%,rgba(13,12,11,.45) 100%)}
.ft--fx>.wrap,.ft__word{position:relative;z-index:1}
.ft__top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding:90px 0 54px;border-bottom:1px solid rgba(255,255,255,.1)}
.ft__top h2{color:#fff;font-size:clamp(32px,4vw,56px);margin-bottom:10px}
.ft__top .hl{color:#ff4d53}
.ft__top p{margin:0;color:rgba(255,255,255,.65)}
.ft--fx .ft__grid{grid-template-columns:repeat(4,1fr) 1.1fr}
.ft__word{margin:30px 0 0;text-align:center;font:600 clamp(84px,17.5vw,280px)/.82 var(--heading);letter-spacing:-.055em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.28);background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.04));-webkit-background-clip:text;background-clip:text;white-space:nowrap;user-select:none}
.ft--fx .ft__base{margin-top:22px}

/* case study pages */
.csh{position:relative;min-height:min(820px,88svh);display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:#111;overflow:hidden}
.csh__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.csh__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.45) 50%,rgba(10,10,10,.25) 100%)}
.csh__in,.csh>.wrap{position:relative;z-index:1}
.csh__in{padding:200px 0 36px}
.csh .crumbs,.csh .crumbs a,.csh .crumbs [aria-current]{color:rgba(255,255,255,.75)}
.csh .eyebrow{color:rgba(255,255,255,.65)}
.csh h1{font-size:clamp(48px,7vw,104px);line-height:.98;letter-spacing:-.04em;margin-bottom:16px}
.csh__lede{max-width:620px;font-size:18px;color:rgba(255,255,255,.8);margin:0}
.csh__s{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 40px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.csh__s div{padding:22px 26px}
.csh__s div+div{border-left:1px solid rgba(255,255,255,.12)}
.csh__s b{font:500 46px/1.05 var(--heading);letter-spacing:-.03em}
.csh__s b.sm{font-size:20px;line-height:1.3;display:block;padding-top:12px}
.csh__s dd{margin:6px 0 0;font-size:13px;color:rgba(255,255,255,.6)}
.cs3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.cs3__k{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--red);margin-bottom:14px}
.cs3 .h3{font-size:24px;margin-bottom:14px}
.cs3 p{color:var(--muted)}
.inc__list--1{grid-template-columns:1fr}
.inc__list--1 li{padding:10px 0}
.case-q{background:var(--tint)}
.bigq__m{display:block;font:600 120px/.6 var(--heading);color:var(--red);margin-bottom:10px}
.nextc{display:grid;grid-template-columns:1.1fr 1fr;border-radius:26px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.nextc:hover{transform:translateY(-3px);box-shadow:0 40px 80px -40px rgba(10,10,10,.45)}
.nextc img{width:100%;height:100%;min-height:340px;object-fit:cover}
.nextc div{display:flex;flex-direction:column;justify-content:center;padding:44px}
.nextc h2{font-size:clamp(30px,3.2vw,44px);margin-bottom:6px}
.nextc p{color:var(--muted)}

@media (max-width:1080px){
  .hub__d{grid-template-columns:1fr;gap:18px;justify-items:center}
  .hub__w{display:none}
  .hub__l{height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .hub__k{text-align:center}
  .ft--fx .ft__grid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:1000px){
  .nums__g{grid-template-columns:1fr 1fr}
  .wk__p,.way__h,.case__in,.nextc{grid-template-columns:1fr;gap:28px}
  .wk__pics{min-height:340px}
  .way__g,.trust__g,.cs3{grid-template-columns:1fr}
  .price__g{grid-template-columns:1fr}
  .reel__card{aspect-ratio:4/5}
  .reel__msgs{left:5%;right:5%;top:auto;bottom:80px;width:auto}
  .csh__s{grid-template-columns:1fr 1fr}
  .csh__s div:nth-child(3){border-left:0}
  .csh__s div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
  .ft__top{flex-direction:column;align-items:flex-start}
  .hub__avcnote{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .ann{font-size:12px;padding:8px 40px 8px 14px}
  .ann__tag{display:none}
  .fxh__in{width:calc(100% - 32px);padding-top:140px}
  .fxh__trust>*+*::before{display:none}
  .fxh__trust{flex-direction:column;gap:4px}
  .fxh__pause{bottom:auto;top:130px;right:16px}
  .nums__g{grid-template-columns:1fr}
  .num{padding:28px 22px}
  .mq__t a{font-size:18px}
  .case__s{gap:22px}
  .ft--fx .ft__grid{grid-template-columns:1fr 1fr}
  .pcard{padding:26px}
}
@media (prefers-reduced-motion:reduce){
  .mq__t>div{animation:none}
  .dot,.run .hub__c,.run .hub__w path{animation:none}
  .bub,.ui__list li,.ui__log li{opacity:1;transform:none}
}
.reel__card{clip-path:inset(0 round 28px)}
.wk__txt .ic{fill:none;stroke:var(--red);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;background:none}
.ft--fx .ft__g{color:#fff;background:rgba(255,255,255,.06)}
.ft--fx .ft__g b{color:#fff;font-size:18px}
.ft--fx .ft__g span{color:#ffb400}
.ft__word{-webkit-text-stroke:0;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.03));-webkit-background-clip:text;background-clip:text}

/* =================================================================== v5: Frontdesk modules */
/* auto-rotating tabs */
.at{background:linear-gradient(180deg,#f5f5f7,#fff)}
.at__tabs{display:flex;width:fit-content;max-width:100%;margin:0 auto 40px;padding:6px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);overflow-x:auto;scrollbar-width:none}
.at__tabs button{position:relative;flex:none;min-width:150px;padding:11px 22px 14px;border:0;background:transparent;border-radius:11px;color:var(--muted);font:500 14.5px var(--body);cursor:pointer}
.at__tabs button[aria-selected=true]{color:var(--ink);background:#fff;box-shadow:0 2px 10px -4px rgba(10,10,10,.25)}
.at__tabs i{position:absolute;left:18px;right:18px;bottom:6px;height:2px;border-radius:2px;background:#ececec;overflow:hidden}
.at__tabs i::after{content:"";position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left}
.at__tabs [aria-selected=true] i::after{transform:scaleX(1)}
.at.is-auto .at__tabs [aria-selected=true] i::after{animation:prog var(--dur,8s) linear forwards;transform:scaleX(0)}
@keyframes prog{to{transform:scaleX(1)}}
.at__p[hidden],.vt__p[hidden]{display:none}
.at__p .center h2{font-size:clamp(34px,4.4vw,58px)}
.at__stage{margin-top:44px;padding:16px;border-radius:30px;background:rgba(255,255,255,.7);border:1px solid var(--line);box-shadow:0 50px 100px -60px rgba(10,10,10,.5)}
.at__in{position:relative;min-height:400px;border-radius:20px;background:#fafafa;background-image:radial-gradient(rgba(10,10,10,.08) 1px,transparent 1px);background-size:20px 20px;display:grid;place-items:center;padding:36px;overflow:hidden}
.at__in::before{content:"";position:absolute;width:60%;height:60%;left:20%;bottom:-20%;background:radial-gradient(closest-side,rgba(196,22,28,.12),transparent);pointer-events:none}
/* tab 1: channel tiles light up in turn */
.chg{position:relative;display:grid;grid-template-columns:repeat(3,150px);gap:18px}
.chg__t{display:grid;justify-items:center;gap:8px;padding:30px 10px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px -20px rgba(10,10,10,.3);transition:transform .4s,box-shadow .4s,border-color .4s}
.chg__t span{font-size:24px;color:#a3a3a3;transition:color .4s}
.chg__t b{font-size:13px;font-weight:500;color:var(--muted)}
.chg__t.on{transform:translateY(-4px) scale(1.03);border-color:rgba(196,22,28,.35);box-shadow:0 20px 40px -18px rgba(196,22,28,.45)}
.chg__t.on span{color:var(--red)}
.chg__t--avc b{color:var(--ink)}
/* tab 2: project board */
.kb{position:relative;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-self:stretch}
.kb__c{border-radius:16px;background:#f3f3f4;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:340px}
.kb__h{font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 2px}
.kb__l{display:grid;gap:10px}
.kb__sk{display:block;height:58px;border-radius:12px;background:linear-gradient(90deg,#ececec,#f6f6f6,#ececec);background-size:200% 100%;animation:sk 1.6s linear infinite}
.kb__l:not(:empty)~.kb__sk:nth-last-child(-n+2){display:none}
@keyframes sk{to{background-position:-200% 0}}
.kb__card{display:flex;gap:10px;padding:12px;border-radius:12px;background:#fff;box-shadow:0 8px 20px -14px rgba(10,10,10,.4);animation:pop .45s cubic-bezier(.2,.8,.2,1)}
.kb__card b{display:block;font-size:13.5px}
.kb__card p{margin:0;font-size:12.5px;color:var(--muted)}
.kb__card em{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:999px;background:var(--tint);font-style:normal;font-size:11px;color:var(--ink)}
.kb__av{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(196,22,28,.1);color:var(--red);font-size:12px;font-weight:700}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}}
/* tab 3: project flow */
.pflow{position:relative;display:grid;justify-items:center;gap:20px;width:100%;max-width:760px}
.fl{position:relative;width:260px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -18px rgba(10,10,10,.4);opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s}
.pflow>.fl+.fl::before,.fl__br::before{content:"";position:absolute;left:50%;top:-21px;width:1.5px;height:20px;background:#d4d4d4}
.fl__tag{position:absolute;top:-9px;left:14px;padding:1px 7px;border-radius:999px;background:#e8f6ec;color:#1d7a3e;font-size:9.5px;font-weight:700;letter-spacing:.1em}
.fl__h{display:flex;align-items:center;gap:9px;margin:0;font-size:14px;font-weight:600}
.fl__h span{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--tint);color:var(--red);font-size:12px}
.fl__s{margin:6px 0 0;font-size:12px;color:var(--muted)}
.fl code{padding:1px 6px;border-radius:5px;background:var(--tint);font:500 11px var(--body);color:var(--ink)}
.fl__ok{display:inline-block;margin:8px 0 0;padding:3px 9px;border-radius:999px;background:#e8f6ec;color:#1d7a3e;font-size:11px;font-weight:600}
.fl__ok--b{background:#fbeaea;color:var(--red)}
.fl__br{position:relative;display:flex;justify-content:space-between;width:min(560px,100%);border-top:1.5px solid #d4d4d4;padding-top:10px;opacity:0;transition:opacity .45s}
.fl__br span{padding:2px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:11.5px;color:var(--muted);margin-top:-22px}
.fl__two{display:flex;justify-content:space-between;width:min(660px,100%);gap:20px}
.fl__two .fl{width:240px}
.run .fl,.run .fl__br{opacity:1;transform:none}
.run .pflow>:nth-child(2){transition-delay:.35s}.run .pflow>:nth-child(3){transition-delay:.7s}.run .pflow>:nth-child(4){transition-delay:1.05s}
.run .fl__two .fl:first-child{transition-delay:1.35s}.run .fl__two .fl:last-child{transition-delay:1.6s}

/* six cards */
.six__g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.six{display:flex;flex-direction:column;border-radius:22px;background:#fff;border:1px solid var(--line);overflow:hidden}
.six h3{margin:28px 28px 10px;font-size:21px}
.six>p{margin:0 28px;color:var(--muted);font-size:15px}
.six__old{display:flex;align-items:baseline;gap:8px;margin:14px 28px 22px!important;font-size:13px!important}
.six__old span{flex:none;padding:2px 7px;border-radius:6px;background:var(--tint);color:var(--ink);font-size:11px;font-weight:600}
.six__old s{color:#a3a3a3}
.six__ui{margin-top:auto;padding:22px;background:#fafafa;background-image:radial-gradient(rgba(10,10,10,.07) 1px,transparent 1px);background-size:18px 18px;border-top:1px solid var(--line);min-height:250px;display:flex;flex-direction:column;justify-content:center}
.ui2{border-radius:14px}
.url{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:6px 6px 6px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:13.5px}
.url em{flex:1;font-style:normal;white-space:nowrap;overflow:hidden}
.url em::after{content:"";display:inline-block;width:1.5px;height:14px;margin-left:1px;background:var(--ink);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.url b{padding:7px 10px;border-radius:9px;background:var(--red);color:#fff;font-size:12px;white-space:nowrap}
.tick5{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tick5 li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#a3a3a3;transition:color .3s}
.tick5 li::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid #d4d4d4;flex:none;transition:all .3s}
.run .tick5 li{color:var(--ink)}
.run .tick5 li::before{border-color:var(--red);background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/11px no-repeat}
.run .tick5 li:nth-child(1),.run .tick5 li:nth-child(1)::before{transition-delay:1.6s}.run .tick5 li:nth-child(2),.run .tick5 li:nth-child(2)::before{transition-delay:2s}
.run .tick5 li:nth-child(3),.run .tick5 li:nth-child(3)::before{transition-delay:2.4s}.run .tick5 li:nth-child(4),.run .tick5 li:nth-child(4)::before{transition-delay:2.8s}
.ui2__ok{margin:12px 0 0;font-size:13px;font-weight:600;color:#1d7a3e;opacity:0;transition:opacity .4s 3.2s}
.run .ui2__ok{opacity:1}
.sim{padding:16px;background:#fff;border:1px solid var(--line)}
.sim__k{margin:0 0 12px;font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--muted)}
.sim__k b{font:500 26px var(--heading);letter-spacing:-.02em;color:var(--ink);margin-right:6px}
.sim__g{display:grid;grid-template-columns:repeat(13,1fr);gap:4px}
.sim__g i{aspect-ratio:1.6;border-radius:3px;background:#efefef;transition:background .25s}
.sim__g i.on{background:var(--red)}
.sim__g i.fl{background:#e6a400}
.sim__s{display:grid;grid-template-columns:repeat(3,1fr);margin:14px 0 0;gap:8px}
.sim__s dt{font:500 20px var(--heading)}
.sim__s dd{margin:0;font-size:11.5px;color:var(--muted)}
.mem__p{display:flex;justify-content:space-between;gap:6px}
.mem__p span{flex:1;text-align:center;padding:7px 4px;border-radius:9px;background:#fff;border:1px solid var(--line);font-size:12px}
.mem__p span.on{border-color:var(--red);color:var(--red)}
.mem__w{display:block;width:100%;height:56px}
.mem__w path{fill:none;stroke:#d4d4d4;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1.2s}
.run .mem__w path{stroke-dashoffset:0;stroke:#eba3a6}
.mem__b{padding:14px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.mem__b p{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:14px;font-weight:600}
.mem__b i{width:8px;height:8px;border-radius:50%;background:#2fb35a;box-shadow:0 0 0 4px rgba(47,179,90,.15)}
.mem__b span{font-size:12.5px;color:var(--muted)}
.chart svg{display:block;width:100%;height:84px;margin-bottom:10px}
.chart__l{fill:none;stroke:var(--red);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.8s ease}
.chart__a{opacity:0;transition:opacity 1s 1s}
.run .chart__l{stroke-dashoffset:0}.run .chart__a{opacity:1}
.lg{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lg li{display:flex;gap:8px;align-items:baseline;padding:8px 10px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:12.5px;opacity:0;transform:translateY(6px);transition:all .4s}
.lg b{flex:none;padding:1px 7px;border-radius:5px;background:#e8f6ec;color:#1d7a3e;font-size:10.5px}
.lg b.y{background:#fdf3d8;color:#8a6100}.lg b.r{background:#fbeaea;color:var(--red)}
.run .lg li{opacity:1;transform:none}.run .lg li:nth-child(1){transition-delay:1.2s}.run .lg li:nth-child(2){transition-delay:1.6s}.run .lg li:nth-child(3){transition-delay:2s}
.tl ul{list-style:none;margin:0;padding:0 0 0 6px;display:grid;gap:12px;position:relative}
.tl ul::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:1.5px;background:#dcdcdc}
.tl li{display:flex;gap:14px;align-items:center;opacity:.35;transition:opacity .4s}
.tl li span{position:relative;z-index:1;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #d4d4d4;flex:none;transition:all .4s}
.tl li p{flex:1;margin:0;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:500}
.tl small{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.run .tl li{opacity:1}.run .tl li span{background:var(--red);border-color:var(--red)}
.run .tl li:nth-child(2),.run .tl li:nth-child(2) span{transition-delay:.6s}.run .tl li:nth-child(3),.run .tl li:nth-child(3) span{transition-delay:1.2s}
.log__k{margin:0 0 10px;font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--muted)}
.log ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:12.5px}
.log li{display:flex;gap:12px;opacity:0;transition:opacity .35s}
.log time{flex:none;font:500 11.5px ui-monospace,Menlo,monospace;color:#a3a3a3}
.run .log li{opacity:1}.run .log li:nth-child(2){transition-delay:.6s}.run .log li:nth-child(3){transition-delay:1.2s}.run .log li:nth-child(4){transition-delay:1.8s}

/* vertical tabs with notifications */
.vt__h{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:44px}
.vt__h h2{max-width:15ch}
.vt{display:grid;grid-template-columns:240px 1fr;gap:44px;align-items:start}
.vt__tabs{display:grid}
.vt__tabs button{position:relative;text-align:left;padding:15px 0;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--muted);font:500 16px var(--body);cursor:pointer}
.vt__tabs button[aria-selected=true]{color:var(--ink)}
.vt__tabs i{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left}
.vt__tabs [aria-selected=true] i{transform:scaleX(1)}
.vt.is-auto .vt__tabs [aria-selected=true] i{animation:prog var(--dur,7s) linear forwards;transform:scaleX(0);background:var(--red)}
.vt__p{position:relative;min-height:400px;padding:40px;border-radius:24px;background:linear-gradient(135deg,#fafafa 0%,#f6f6f7 60%,#fbeeee 100%);overflow:hidden;animation:fade .4s ease}
.vt__p::after{content:"";position:absolute;right:-10%;top:-20%;width:50%;height:80%;background:radial-gradient(closest-side,rgba(196,22,28,.1),transparent);pointer-events:none}
.vt__p h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:8px}
.vt__p>p{max-width:56ch;color:var(--muted);font-size:15px}
.note{list-style:none;margin:30px 0 22px auto;padding:0;display:grid;gap:10px;max-width:440px}
.note li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.92);box-shadow:0 14px 30px -20px rgba(10,10,10,.45);font-size:14px;animation:pop .5s cubic-bezier(.2,.8,.2,1) both}
.note li:nth-child(2){animation-delay:.9s;margin-left:-18px}.note li:nth-child(3){animation-delay:1.8s;margin-left:14px}
.note__i{flex:none;display:grid;place-items:center;min-width:28px;height:28px;border-radius:8px;background:var(--tint);color:var(--red);font-size:13px}
.note__i img{width:40px;height:auto}
.vt__p .more{position:relative;z-index:1}

/* hub: dots travel along the lines */
.hub__w circle{fill:var(--red);opacity:.8}
.hub__cw{display:grid;justify-items:center;gap:12px}
.hub__cw p{margin:0;font-size:13px;color:var(--muted)}
.hub__c{width:180px;height:180px;place-items:center;align-content:center;padding:0;border-radius:40px}

/* Art Vision Connect board */
.cb__badge{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600;margin-bottom:22px}
.sch{margin-top:56px}
.sch__top{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.sn{padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.sn__h{display:flex;align-items:center;gap:9px;margin:0 0 8px;font-weight:600;font-size:14.5px}
.sn__h span{width:22px;height:22px;border-radius:7px;background:var(--ink)}
.sn--y .sn__h span{background:#e6a400}.sn--r .sn__h span{background:var(--red)}
.sn__h em{margin-left:auto;padding:2px 8px;border-radius:6px;background:var(--tint);font-style:normal;font-size:11px;font-weight:500;color:var(--muted)}
.sn ul{list-style:none;margin:0;padding:0}
.sn li{padding:6px 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.sn__m{margin:6px 0 0;font-size:11.5px;color:#a3a3a3}
.sch__w{display:block;width:100%;height:110px}
.sch__w path{fill:none;stroke:#d4d4d4;stroke-width:1.5;vector-effect:non-scaling-stroke}
.sch__w .d1{fill:#0a0a0a}.sch__w .d2{fill:var(--red)}.sch__w .d3{fill:#e6a400}
.sch__gate{display:flex;align-items:center;gap:8px;width:fit-content;margin:0 auto 22px;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);font-size:13.5px;color:var(--muted)}
.sch__gate b{color:var(--ink)}
.pb{border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(10,10,10,.5);overflow:hidden}
.pb__h{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line)}
.pb__h p{display:flex;align-items:center;gap:10px;margin:0;font-size:14px}
.pb__h small{color:#a3a3a3;font-size:12px}
.pb__logo{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:12px}
.pb__w{color:var(--muted);font-size:12.5px!important}
.pb__w .av{margin-right:-14px;border:2px solid #fff}
.pb__w .av:last-of-type{margin-right:4px}
.av{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f0f0f0;font-size:11px;font-weight:700;color:var(--ink);flex:none}
.av--r{background:var(--red);color:#fff}.av--y{background:#e6a400;color:#fff}
.pb__t{position:relative;overflow-x:auto}
.pb table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:720px}
.pb th{text-align:left;padding:12px 20px;font-size:11.5px;font-weight:500;color:var(--muted);background:#fafafa}
.pb td{padding:14px 20px;border-top:1px solid var(--line);vertical-align:middle}
.pb td:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.pb td:first-child .av{grid-row:1/3}
.pb td small{color:var(--muted);font-size:12px}
.ch{padding:3px 9px;border-radius:999px;background:var(--tint);font-size:12px;white-space:nowrap}
.st{padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600}
.st--urgent{background:#fbeaea;color:var(--red)}.st--scheduled{background:#e8f6ec;color:#1d7a3e}.st--quoted{background:#fdf3d8;color:#8a6100}
.nx{padding:5px 10px;border-radius:8px;border:1px solid var(--line);font-size:12.5px;white-space:nowrap}
.cur{position:absolute;padding:3px 9px;border-radius:999px 999px 999px 2px;font-size:11.5px;font-weight:600;color:#fff;pointer-events:none;box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.cur::before{content:"";position:absolute;left:-9px;top:-11px;border:6px solid transparent;border-top-color:inherit;border-left-color:currentColor;transform:rotate(-15deg)}
.cur--a{background:var(--red);animation:curA 9s ease-in-out infinite}
.cur--b{background:var(--ink);animation:curB 11s ease-in-out infinite}
@keyframes curA{0%,100%{left:58%;top:62%}30%{left:44%;top:40%}60%{left:72%;top:78%}}
@keyframes curB{0%,100%{left:30%;top:80%}40%{left:52%;top:58%}70%{left:84%;top:40%}}

/* story cards: play button */
.ref__play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:78px;height:78px;border-radius:50%;border:0;background:var(--red);color:#fff;font-size:22px;padding-left:5px;cursor:pointer;box-shadow:0 0 0 10px rgba(196,22,28,.25);transition:transform .2s}
.ref__play:hover{transform:scale(1.07)}
.vmod{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(10,10,10,.82);padding:24px}
.vmod video{width:min(1100px,100%);max-height:80vh;border-radius:18px;background:#000}
.vmod button{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;font-size:22px;cursor:pointer}

@media (max-width:1000px){
  .six__g{grid-template-columns:1fr 1fr}
  .vt{grid-template-columns:1fr;gap:20px}
  .vt__tabs{display:flex;overflow-x:auto;gap:18px;scrollbar-width:none}
  .vt__tabs button{flex:none;white-space:nowrap}
  .vt__h{flex-direction:column;align-items:flex-start}
  .sch__top{grid-template-columns:1fr}
  .sch__w{display:none}
  .sch__gate{margin-top:20px}
  .chg{grid-template-columns:repeat(3,1fr)}
  .kb{grid-template-columns:1fr 1fr}.kb__c:last-child{display:none}
}
@media (max-width:640px){
  .six__g{grid-template-columns:1fr}
  .at__tabs button{min-width:0;padding:10px 14px 14px}
  .at__in{padding:18px;min-height:340px}
  .chg{grid-template-columns:repeat(2,1fr);gap:10px}
  .chg__t{padding:20px 8px}
  .fl,.fl__two .fl{width:100%}
  .fl__two{flex-direction:column}
  .vt__p{padding:26px 20px}
  .note li{margin-left:0!important}
}
@media (prefers-reduced-motion:reduce){
  .cur,.kb__sk{animation:none}
  .note li{animation:none}
}
.sim__g{grid-template-columns:repeat(13,minmax(0,1fr))}
.sim__g i{width:auto;min-width:0;height:auto;margin:0;padding:0}

/* =================================================================== v6: stories like Frontdesk, client panels with film */
.refs__w{width:min(1440px,100% - 64px)}
.refs__h{font-size:clamp(36px,4.6vw,64px);max-width:18ch;margin-bottom:52px;letter-spacing:-.03em}
.car__t{gap:24px;margin:0;padding:0 0 10px;scroll-padding-inline:0}
.ref{flex:0 0 min(1150px,86%);grid-template-columns:1.5fr 1fr;min-height:430px;border-radius:24px;border:1px solid #e5e5e5;box-shadow:0 30px 60px -45px rgba(10,10,10,.45)}
.ref__img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.18) 45%,transparent 70%)}
.ref__img img{width:100%;height:100%;object-fit:cover}
.ref__n{left:34px;bottom:30px;gap:4px}
.ref__n b{font:500 clamp(54px,5.4vw,78px)/.95 var(--heading);letter-spacing:-.04em;color:#fff}
.ref__n span{font-size:16px;color:rgba(255,255,255,.88);max-width:30ch}
.ref__t{background:#fafafa;padding:48px 44px;gap:22px}
.ref__k{align-self:flex-end;font-size:12.5px;letter-spacing:.24em;color:#737373}
.ref blockquote{margin:0;font:400 clamp(21px,1.8vw,26px)/1.4 var(--body);letter-spacing:-.01em;color:var(--ink)}
.ref blockquote span{color:#eba3a6;font-family:var(--heading)}
.ref__by{font-size:14.5px;color:var(--ink)!important;font-weight:500}
.ref__go{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;background:var(--red);color:#fff;font-size:14.5px;font-weight:600;box-shadow:0 10px 24px -12px rgba(196,22,28,.7);transition:background .2s,transform .2s}
.ref__go:hover{background:var(--red-d);transform:translateY(-1px)}
.car__nav{margin-top:34px}
.car__all{font-size:16px;font-weight:500;display:inline-flex;gap:8px}
.car__dots{gap:8px;align-items:center}
.car__dots i{width:8px;height:8px;border-radius:999px;background:#d4d4d4;transition:width .3s,background .3s}
.car__dots i.on{width:26px;background:var(--ink)}
.car__b{width:44px;height:44px;font-size:22px;line-height:1;color:var(--ink)}
.car__b:hover{border-color:var(--ink)}

.vt__p{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:stretch;padding:32px}
.vt__txt{display:flex;flex-direction:column;justify-content:center;gap:8px;position:relative;z-index:1}
.vt__txt .more{margin-top:12px}
.vt__media{position:relative;min-height:340px;border-radius:18px;overflow:hidden;background:#171717;box-shadow:0 30px 60px -36px rgba(10,10,10,.6)}
.vt__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vt__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.55),transparent 55%)}
.vt__media .note{position:absolute;z-index:1;left:18px;right:18px;bottom:16px;margin:0;max-width:none}
.vt__media .note li{background:rgba(255,255,255,.95)}
.vt__media .note li:nth-child(2){margin-left:22px}.vt__media .note li:nth-child(3){margin-left:8px}
@media (max-width:1000px){.vt__p{grid-template-columns:1fr}.vt__media{min-height:320px}.ref{grid-template-columns:1fr;flex-basis:88%}.ref__img{min-height:300px}.refs__w{width:calc(100% - 32px)}}
@media (max-width:560px){.ref{flex-basis:92%}.ref__t{padding:26px}.vt__p{padding:18px}.vt__media .note li{font-size:12.5px;padding:10px 12px}.vt__media .note li:nth-child(n){margin-left:0}}

/* =================================================================== v7: Frontdesk design system, Art Vision red */
:root{--ink:#0a0a0a;--muted:#737373;--line:#e5e5e5;--tint:#f5f5f7;--card:#fafafa;--red:#c4161c;--red-d:#a3121a;--red-l:#e5383e;--glow:rgba(196,22,28,.08)}
body{font:400 16px/1.6 var(--body);color:var(--ink);letter-spacing:0}
h1,h2,h3,h4{font-family:var(--heading);font-weight:400;letter-spacing:-.025em;color:inherit}
h1{line-height:1.04;letter-spacing:-.03em}
h2{font-size:clamp(36px,4vw,60px);line-height:1}
h3{letter-spacing:-.015em}
.hl{color:var(--red)}
.eyebrow,.hub__k,.ui__k,.sim__k,.log__k,.mq__k,.pcard__k,.cs3__k{font-weight:500;letter-spacing:.18em;color:var(--muted)}
.center__lede,.split-h p,.way__h p:last-child,.wcard>p,.six>p,.vt__p>p,.vt__txt p{color:var(--muted)}

/* buttons: identical to Frontdesk's, red instead of blue */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:10px 20px;border-radius:999px;font:600 14px/1 var(--body);letter-spacing:0;border:0;transition:transform .15s,box-shadow .2s,filter .2s;white-space:nowrap}
.btn--red{color:#fff;background:linear-gradient(180deg,var(--red-l) 0%,var(--red) 55%,var(--red-d) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px var(--red-d),0 8px 20px -8px rgba(196,22,28,.7)}
.btn--red:hover{filter:brightness(1.06);transform:translateY(-1px);background:linear-gradient(180deg,var(--red-l) 0%,var(--red) 55%,var(--red-d) 100%)}
.btn--line{height:42px;color:var(--ink);background:#fff;border:1px solid #e3e3e3;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,23,42,.06)}
.btn--line:hover{border-color:#cfcfcf;background:#fafafa}
.btn--ghost{height:40px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.btn--sm{height:32px;padding:6px 16px;font-size:14px}
.nav .btn--red{color:var(--ink);background:#fff;box-shadow:none;height:32px;padding:6px 16px}
.nav .btn--red:hover{background:#f2f2f2;filter:none}
.ref__go{height:40px;padding:10px 20px;font:600 14px/1 var(--body);border-radius:999px;color:#fff;background:linear-gradient(180deg,var(--red-l) 0%,var(--red) 55%,var(--red-d) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px var(--red-d),0 8px 20px -8px rgba(196,22,28,.7)}
.ann__go{background:linear-gradient(180deg,var(--red-l),var(--red) 55%,var(--red-d));box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px var(--red-d)}

/* nav */
.nav__links{font-size:14px;font-weight:400}
.nav__links>a,.dd__t{color:rgba(255,255,255,.85)}
.nav__links>a:hover,.dd__t:hover{color:#fff}
.nav__bar{background:rgba(10,10,10,.86);border-radius:999px;padding:6px 6px 6px 18px}
.nav__tel{font-weight:400;color:rgba(255,255,255,.85)}

/* section backgrounds: white, or #f5f5f7 with a soft red glow at the top */
.sec--tint,.at,.case,.cb,.case-q{background:#f5f5f7;background-image:radial-gradient(circle at 50% 8%,var(--glow),transparent 544px)}
.sec{padding:112px 0}
.wrap{width:min(1216px,100% - 64px)}

/* cards */
.six,.wcard,.trust__g article,.pcard,.sn,.crow,.area{border-radius:16px;border:1px solid var(--line);box-shadow:none}
.six h3,.wcard h3{font-size:22px;font-weight:400;letter-spacing:-.015em;line-height:1.37}
.six__old span{font-size:10.5px;font-weight:600;background:#f3f3f3;color:var(--muted);border-radius:4px;padding:2px 6px}
.six__old s{color:#a3a3a3}
.six__ui{background:#fafafa;background-image:radial-gradient(rgba(10,10,10,.07) 1px,transparent 1px);background-size:16px 16px}

/* stories, measured from Frontdesk */
.refs{background:#fff}
.refs__w{width:calc(100% - 64px);max-width:none}
.refs__h{font-size:60px;font-weight:400;letter-spacing:-1.5px;line-height:.95;max-width:none;margin-bottom:64px}
.refs__h .hl{color:var(--ink)}
.ref{flex:0 0 min(1150px,86%);min-height:431px;grid-template-columns:690px 1fr;border-radius:24px;border:0;background:#fafafa;box-shadow:0 0 0 1px #e8e8e8}
.ref__n{left:32px;bottom:32px;gap:6px}
.ref__n b{font:500 60px/1 var(--heading);letter-spacing:-1.2px}
.ref__n span{font-size:16px;color:rgba(255,255,255,.8)}
.ref__img::after{background:linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.08) 45%,transparent 65%)}
.ref__t{background:#fafafa;padding:40px;gap:0;justify-content:space-between}
.ref__k{font-size:14px;font-weight:500;letter-spacing:2.52px;color:#737373;text-align:right;align-self:stretch}
.ref blockquote{font:500 26px/1.35 var(--body);letter-spacing:-.26px;margin:auto 0 16px}
.ref blockquote span{color:#c7c7c7;font-family:var(--body)}
.ref__by{font-size:14px;font-weight:500;margin:0 0 28px}
.car__all{font-size:18px;font-weight:400}
.car__b{background:#fff;border:1px solid #e3e3e3;font-size:20px}
@media (max-width:1100px){.ref{grid-template-columns:1.3fr 1fr}.refs__h{font-size:44px}}
@media (max-width:1000px){.ref{grid-template-columns:1fr}.refs__w{width:calc(100% - 32px)}.ref blockquote{font-size:21px}}

/* numbers band, Frontdesk weights */
.num__v{font-weight:500;letter-spacing:-.03em}
.nums{background:#0a0a0a}

/* client panels: gradient and stacked notifications, no film */
.vt__p{grid-template-columns:1fr;background:#f5f5f7;background-image:radial-gradient(circle at 85% 20%,rgba(196,22,28,.09),transparent 380px),radial-gradient(circle at 10% 90%,rgba(196,22,28,.05),transparent 300px);border-radius:20px;padding:40px 40px 32px;min-height:420px}
.vt__p .note{margin:40px 0 18px auto;max-width:460px}
.vt__tabs button{font-size:16px;font-weight:400}
.vt__tabs i{background:var(--ink)}

/* footer socials */
.ft__soc{display:flex;gap:10px}
.ft__soc a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8)}
.ft__soc a:hover{color:#fff;border-color:#fff}
.ft__soc svg{width:15px;height:15px;fill:currentColor}
.ref__n b span{font:inherit;color:inherit;letter-spacing:inherit;max-width:none}
.ft .ft__base .ft__soc{display:flex;flex-direction:row;gap:10px;align-items:center}.ft .ft__base .ft__soc a{padding:0;margin:0}.ft--fx .ft__base{align-items:center}

/* =================================================================== v8: Frontdesk 1:1 home */
/* hero */
.fxh h1{font-size:clamp(46px,5.4vw,82px);font-weight:400;letter-spacing:-.03em;line-height:1.04;max-width:12.5ch;color:#fff}
.fxh__lede{font-size:18px;color:rgba(255,255,255,.82);max-width:540px;margin:22px 0 30px}
.qf--fd{display:flex;align-items:center;gap:0;max-width:560px;padding:6px 6px 6px 14px;border-radius:12px;background:#fff;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.qf--fd .qf__ic{width:18px;height:18px;flex:none;fill:none;stroke:#a3a3a3;stroke-width:1.8;margin-right:6px}
.qf--fd input{height:46px;font-size:15px;color:var(--ink);padding:0 10px}
.qf--fd input+input{border-left:1px solid #ececec}
.btn--fd{flex:none;height:46px;padding:12px 16px;border:0;border-radius:6px;color:#fff;font:600 14px var(--body);cursor:pointer;background:linear-gradient(180deg,var(--red-l),var(--red) 55%,var(--red-d));box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.btn--fd:hover{filter:brightness(1.06)}
.fxh__trust{display:block;margin-top:18px;font-size:14px;color:rgba(255,255,255,.75)}
.fxh__trust::before{display:none}
.fxh__in{padding-bottom:30px}
.fxh__pause{bottom:120px}
/* logo strip under the hero */
.lg{position:relative;z-index:1;padding:20px 0 28px}
.lg__k{text-align:center;font-size:11px;font-weight:500;letter-spacing:.24em;color:rgba(255,255,255,.6);margin-bottom:18px}
.lg__t{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lg__t>div{display:flex;flex:none;align-items:center;gap:64px;padding-right:64px;animation:mq 45s linear infinite}
.lg__i{height:28px;width:auto;opacity:.82;filter:brightness(0) invert(1)}
img.lg__i[src*="stratawest"]{height:40px}
img.lg__i[src*="604"],img.lg__i[src*="frasercampbell"]{height:34px}
.lg__i.lg__i--txt{height:auto;filter:none;font:600 17px var(--body);letter-spacing:-.01em;color:rgba(255,255,255,.82);white-space:nowrap}
.mq{display:none}

/* stories: firm logo top right, as Frontdesk shows the client's logo */
.ref__top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.ref__k{text-align:left;align-self:auto;font-size:12.5px;letter-spacing:.2em}
.ref__logo{height:26px;width:auto;max-width:150px;object-fit:contain;filter:brightness(0);opacity:.72}
img.ref__logo[src*="stratawest"]{height:38px}
.ref__logo--txt{height:auto;filter:none;font:600 14px var(--body);color:#525252;white-space:nowrap}
.ref__s{margin:auto 0 16px;font:500 24px/1.38 var(--body);letter-spacing:-.24px;color:var(--ink)}
.refs .acts--c{margin-top:44px}

/* tabs: tiles with service icons */
.chg__t .ic{width:28px;height:28px;fill:none;stroke:#a3a3a3;stroke-width:1.6;transition:stroke .4s}
.chg__t.on .ic{stroke:var(--red)}
.chg__t b{color:var(--ink)}

/* one painting company: footnote */
.vt__h h2{max-width:17ch}
.vt__foot{margin:28px 0 0;max-width:620px;color:var(--muted);font-size:15px}
.vt__foot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* built for trust */
.trust2__in{display:grid;grid-template-columns:.8fr 1.6fr;gap:48px;align-items:start}
.trust2 h2{font-size:clamp(32px,3vw,36px);margin-bottom:22px}
.trust2__g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tcard{position:relative;min-height:260px;padding:24px 24px 64px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.tcard h3{font-size:18px;font-weight:500;letter-spacing:-.01em;margin-bottom:10px}
.tcard p{font-size:14.5px;color:var(--muted);margin:0}
.tcard__i{position:absolute;right:22px;bottom:22px;width:30px;height:30px;fill:none;stroke:#bdbdbd;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* pricing: three plans, the middle one highlighted */
.price{background:#fff;background-image:radial-gradient(circle at 50% 0,var(--glow),transparent 520px)}
.price__g{grid-template-columns:repeat(3,1fr);max-width:1100px;gap:16px}
.pcard{position:relative;padding:32px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.pcard__v{font-size:44px;font-weight:500;letter-spacing:-.03em}
.pcard--hot{border:1.5px solid var(--red);box-shadow:0 30px 60px -40px rgba(196,22,28,.55)}
.pcard__tag{position:absolute;top:-13px;left:50%;translate:-50% 0;margin:0;padding:4px 12px;border-radius:999px;background:var(--red);color:#fff;font-size:12px;font-weight:600}
.pcard .btn{width:100%}

/* FAQ: centred, one column */
.faqx .faq{grid-template-columns:1fr;max-width:820px;margin:0 auto;gap:28px}
.faqx .faq>div:first-child{text-align:center}
.faqx .eyebrow{display:none}
.faqx details{border-bottom:1px solid var(--line)}
.faqx summary{padding:22px 0;font-size:17px;font-weight:500}

@media (max-width:1000px){.trust2__in{grid-template-columns:1fr}.price__g,.trust2__g{grid-template-columns:1fr}}
@media (max-width:640px){.qf--fd{flex-wrap:wrap;padding:8px}.qf--fd input{flex:1 1 100%}.qf--fd input+input{border-left:0;border-top:1px solid #ececec}.btn--fd{width:100%;margin-top:6px}.qf--fd .qf__ic{display:none}.lg__t>div{gap:40px}}
.fxh h1{font-size:clamp(44px,min(5vw,9vh),76px);max-width:16.5ch}
.fxh__in{padding-top:118px}
.ref__k{text-transform:uppercase}
.chg__t .ic{width:30px;height:30px;padding:0;background:none;border:0;border-radius:0;color:#a3a3a3;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.chg__t.on .ic{color:var(--red);stroke:var(--red)}

/* story thumbnails move slowly, like a paused film still */
.ref__img{overflow:hidden}
.ref__img img{transform-origin:60% 55%;animation:kb 18s ease-in-out infinite alternate;will-change:transform}
.ref:nth-child(3n+2) .ref__img img{transform-origin:30% 45%;animation-duration:21s}
.ref:nth-child(3n) .ref__img img{transform-origin:75% 35%;animation-duration:24s}
@keyframes kb{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}}
.ref__img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 30%)}
.ref__n{z-index:2}
.ref__n b{font-size:64px;letter-spacing:-1.6px}
@media (prefers-reduced-motion:reduce){.ref__img img{animation:none}}
.ref__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ref--film .ref__img{background:#0a0a0a}
.ref--film .ref__img::after{background:linear-gradient(0deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.1) 45%,transparent 65%)}
.ref__play{z-index:3;width:80px;height:80px;font-size:22px;padding-left:5px;background:linear-gradient(180deg,var(--red-l),var(--red) 55%,var(--red-d));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px var(--red-d),0 14px 30px -10px rgba(196,22,28,.8)}
.ref__logo--avc{display:inline-flex;align-items:center;gap:8px;height:auto;filter:none;font:600 14px var(--body);color:var(--ink);opacity:1}
.ref__logo--avc img{filter:none}
.cfilm{position:relative;max-width:1100px;margin:52px auto 0;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#0a0a0a;box-shadow:0 0 0 1px #e5e5e5,0 50px 100px -50px rgba(10,10,10,.5)}
.cfilm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cfilm::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 40%);pointer-events:none}
.cfilm__k{position:absolute;left:24px;bottom:20px;z-index:2;display:flex;align-items:center;gap:10px;margin:0;color:#fff;font-size:15px;font-weight:500}
.cfilm__k img{filter:brightness(0) invert(1)}

/* project board, as Frontdesk's CRM tab: cards glide between columns */
.kb2{position:relative;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-self:stretch}
.kb2__c{display:flex;flex-direction:column;gap:10px;min-height:400px;padding:14px;border-radius:16px;background:rgba(243,243,244,.85);border:1px solid #ececec}
.kb2__h{display:flex;align-items:center;gap:8px;margin:0 0 2px;font-size:13px;font-weight:500;color:var(--muted)}
.kb2__h span{min-width:20px;padding:1px 6px;border-radius:999px;background:#fff;border:1px solid #e5e5e5;font-size:11.5px;text-align:center;color:var(--ink)}
.kb2__l{display:flex;flex-direction:column;gap:10px}
.kb2__card{display:flex;gap:10px;padding:12px;border-radius:12px;background:#fff;border:1px solid #ececec;box-shadow:0 1px 2px rgba(10,10,10,.04);transition:box-shadow .3s,border-color .3s}
.kb2__card.mv{border-color:rgba(196,22,28,.45);box-shadow:0 18px 36px -16px rgba(196,22,28,.45),0 0 0 3px rgba(196,22,28,.08);z-index:2;position:relative}
.kb2__card b{display:block;font-size:13.5px;font-weight:500}
.kb2__card p{margin:0;font-size:12.5px;color:var(--muted)}
.kb2__av{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f3f3f4;color:var(--ink);font-size:11px;font-weight:600}
.kb2__card.mv .kb2__av{background:rgba(196,22,28,.1);color:var(--red)}
.kb2__tags{display:flex;gap:6px;margin-top:8px!important}
.kb2__tags em{padding:2px 7px;border-radius:5px;background:#f3f3f4;font-style:normal;font-size:11px;color:#525252}
.kb2__sk{display:block;height:64px;border-radius:12px;background:linear-gradient(90deg,#ececec,#f6f6f6,#ececec);background-size:200% 100%;animation:sk 1.6s linear infinite;opacity:.8}
.kb2__l:not(:empty)~.kb2__sk{display:none}
@media (max-width:1000px){.kb2{grid-template-columns:1fr 1fr}.kb2__c:last-child{display:none}}

/* =================================================================== v9: Frontdesk navigation, brain and Connect sections */
.nav__links{gap:2px}
.nav__links>a,.dd__t{padding:8px 11px;font-size:14px;white-space:nowrap}
.nav__login{font-size:14px;color:rgba(255,255,255,.85);padding:6px 10px;border-radius:999px}
.nav__login:hover{color:#fff}
.nav__tel{display:none}
.dd__p{padding:8px;border-radius:12px;min-width:0;background:#171717;box-shadow:0 24px 60px -16px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);margin-top:12px}
.dd__p a{display:block;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:400;color:rgba(255,255,255,.86);white-space:nowrap}
.dd__p a:hover{background:rgba(255,255,255,.06);color:#fff}
.dd__p--list{min-width:230px;translate:0 0;left:0;display:grid;gap:0}
.dd__p--cols{display:grid;grid-auto-flow:column;gap:0 18px;padding:18px 14px 10px;translate:0 0;left:auto;right:0}
.dd__p--cols>div{display:grid;align-content:start;gap:0}
.dd__p--cols b{display:block;padding:4px 12px 10px;font-size:11px;font-weight:500;letter-spacing:.18em;color:rgba(255,255,255,.45)}
.dd__p--cols .dd__all{grid-column:1/-1;grid-row:2;margin-top:10px;padding:14px 12px 6px;border-top:1px solid rgba(255,255,255,.08);border-radius:0;color:#fff;font-weight:500}
.dd__p--svc{left:50%;right:auto;translate:-50% 0}
.dd__p--svc a{padding:6px 12px;font-size:13.5px}
.dd__p--cases3{min-width:640px}

/* brain */
.hub .acts--c{margin-top:28px}
.hub__k--r{text-align:right}
.hub__c{width:200px;height:200px;border-radius:44px;background:#fff;box-shadow:0 30px 60px -30px rgba(10,10,10,.35),0 0 0 1px #ececec,0 0 0 10px rgba(196,22,28,.04)}
.hub__w circle{fill:var(--red)}
.hub__w path{stroke:#e2e2e2}
.run .hub__w path{stroke:#f0b9bb}
.hub3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:72px 0 0}
.hub3__i{padding-top:22px;border-top:1px solid var(--line)}
.hub3__n{margin:0 0 14px;font-size:13px;font-weight:500;color:var(--red);letter-spacing:.06em}
.hub3__i h3{font-size:24px;margin-bottom:10px}
.hub3__i p:last-child{color:var(--muted);font-size:15.5px;margin:0}
.hub3+.acts--c{margin-top:56px}

/* Connect: records joined up, one approval layer, a live board */
.sch__mid{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:30px;align-items:center;margin:-6px 0 26px}
.sch__gw{display:grid;justify-items:center;gap:10px}
.sch__one{margin:0;font-size:10.5px;font-weight:500;letter-spacing:.2em;color:var(--muted)}
.sch__gate{margin:0}
.sn{position:relative}
.sn__up{position:absolute;top:-10px;right:14px;padding:2px 8px;border-radius:999px;background:#e8f6ec;color:#1d7a3e;font-size:11px;font-weight:600;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.sn.is-up .sn__up{opacity:1;transform:none}
.sn.is-up{border-color:rgba(47,179,90,.45);box-shadow:0 0 0 4px rgba(47,179,90,.08)}
.sn--k .sn__h span{background:#525252}.sn--g .sn__h span{background:#2fb35a}
.pb__h small{margin-left:4px}
.pb__f{display:flex;justify-content:space-between;gap:16px;padding:12px 20px;border-top:1px solid var(--line);background:#fafafa;font-size:12.5px;color:var(--muted)}
.pb__f b{color:var(--ink)}
.pb__logo{background:#fff;border:1px solid var(--line)}
.st--new{background:#eef2ff;color:#4338ca}
.cur--c{background:#2fb35a;animation:curC 10s ease-in-out infinite}
@keyframes curC{0%,100%{left:72%;top:30%}35%{left:40%;top:70%}70%{left:60%;top:52%}}
.cbf__g{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:64px}
.cbf{padding-top:20px;border-top:1px solid #dcdcdc}
.cbf h3{font-size:17px;font-weight:500;margin-bottom:8px}
.cbf p{font-size:14.5px;color:var(--muted);margin:0}

/* Connect films carousel */
.refs--films{background:#fff;padding-top:96px}
.refs--films .ref__img img{animation:none}

@media (max-width:1180px){.nav__links>a,.dd__t{padding:8px 8px;font-size:13.5px}}
@media (max-width:1080px){.hub3,.cbf__g{grid-template-columns:1fr 1fr}.sch__mid{grid-template-columns:1fr}.hub__k--r{text-align:center}}
@media (max-width:640px){.hub3,.cbf__g{grid-template-columns:1fr}}
.dd__p--cols{grid-auto-flow:row;grid-template-columns:repeat(2,auto)}
.dd__p--cases3{grid-template-columns:repeat(3,auto);min-width:0}
.dd__p--cols .dd__all{grid-row:auto}
.dd__p--cols b{white-space:nowrap}
.refs--films .ref__img::after{background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 32%,transparent 62%)}

/* =================================================================== v10: product page (/connect/), Frontdesk's product-page layout */
.pp{padding:150px 0 90px;background:#f5f5f7;background-image:radial-gradient(circle at 70% 0,rgba(196,22,28,.07),transparent 560px)}
.pp__in{max-width:860px}
.pp .crumbs{margin-bottom:22px}
.pp__tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:5px 12px;border-radius:999px;background:#fff;border:1px solid #e3e3e3;font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--ink)}
.pp h1{font-size:clamp(42px,4.6vw,60px);margin-bottom:18px}
.pp__lede{max-width:600px;font-size:18px;color:var(--muted);margin-bottom:30px}
.pp__k{display:inline-block;margin:0 0 16px;padding:4px 12px;border-radius:999px;background:#fff;border:1px solid #e5e5e5;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--muted)}
.pp__k--r{background:#fdecec;border-color:#f7d4d5;color:var(--red)}
.pp__prob h2{font-size:clamp(28px,3vw,40px);max-width:24ch;margin-bottom:28px}
.pp__x{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:14px}
.pp__x li{display:flex;align-items:center;gap:12px;padding:20px;border-radius:14px;background:#fdf6f6;border:1px solid #f7dcdc;font-size:15px}
.pp__x span{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;font-size:13px;line-height:1}
.pp__g{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:1100px;margin:48px auto 0}
.pp__g article{padding:26px 28px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.pp__g h3{font-size:18px;font-weight:500;margin-bottom:8px}
.pp__g p{margin:0;font-size:15px;color:var(--muted)}
.pp__end{background:#fff}
.pp__end h2{font-size:clamp(34px,4vw,52px)}
@media (max-width:760px){.pp__x,.pp__g{grid-template-columns:1fr}.pp{padding:120px 0 64px}}
.reel__card::after{background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 35%)}
.reel__mark{display:flex;align-items:center;gap:10px;color:#fff;font-size:14px;font-weight:500}
.reel__mark img{filter:none}
.reel__play{left:auto;top:auto;right:28px;bottom:24px;translate:0 0;width:64px;height:64px;font-size:18px}

/* =================================================================== v11: guides, laid out like Frontdesk's blog */
.gh{padding-bottom:64px}
.gh h1{font-size:clamp(40px,4.4vw,56px);margin-bottom:14px}
.gl{padding-top:56px}
.gl__k{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--muted)}
.gchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.gchip{padding:7px 14px;border-radius:999px;border:1px solid #e3e3e3;background:#fff;font:600 11.5px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.gchip:hover{border-color:#cfcfcf}
.gchip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.gsearch{display:flex;align-items:center;gap:10px;max-width:560px;margin:0 auto 44px;padding:6px 6px 6px 18px;border-radius:14px;background:#fff;border:1px solid #e3e3e3;box-shadow:0 10px 30px -20px rgba(10,10,10,.3)}
.gsearch span{color:#a3a3a3;font-size:18px}
.gsearch input{flex:1;height:42px;border:0;outline:none;font:400 15px var(--body);background:transparent}
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gcard{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.gcard:hover{transform:translateY(-3px);box-shadow:0 30px 60px -36px rgba(10,10,10,.35)}
.gcard[hidden]{display:none}
.gcard__img{display:block;aspect-ratio:16/10;overflow:hidden;background:#f3f3f4}
.gcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gcard:hover .gcard__img img{transform:scale(1.04)}
.gcard__b{display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px;flex:1}
.gcard__cat{align-self:flex-start;padding:3px 10px;border-radius:999px;background:#fdecec;color:var(--red);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.gcard b{font:500 19px/1.3 var(--heading);letter-spacing:-.01em}
.gcard__x{color:var(--muted);font-size:14.5px}
.gcard__f{display:flex;justify-content:space-between;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.gcard__go{color:var(--ink);font-weight:600}
.gnone{text-align:center;color:var(--muted)}
/* article */
.ga{padding-bottom:0}
.ga__head{max-width:900px}
.ga h1{font-size:clamp(34px,3.8vw,52px);line-height:1.08;margin-bottom:16px}
.ga__meta{color:var(--muted);font-size:14px;margin:0 0 36px}
.ga__hero{margin-bottom:-120px;position:relative;z-index:1}
.ga__hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:24px;box-shadow:0 40px 80px -50px rgba(10,10,10,.5)}
.ga__body{padding-top:180px}
.ga__grid{display:grid;grid-template-columns:minmax(0,720px) 300px;gap:64px;justify-content:space-between;align-items:start}
.ga__art{font-size:17.5px;line-height:1.75;color:#262626}
.ga__art h2{font-size:28px;margin:44px 0 14px;scroll-margin-top:110px}
.ga__art p{margin:0 0 18px}
.ga__art ul,.ga__art ol{margin:0 0 22px;padding-left:22px}
.ga__art li{margin-bottom:10px}
.ga__art li::marker{color:var(--red)}
.ga__art a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.ga__key{padding:24px 26px;margin-bottom:32px;border-radius:16px;background:#f5f5f7;border:1px solid var(--line)}
.ga__key ul{margin:0;padding-left:20px;font-size:16px}
.ga__key li{margin-bottom:6px}
.ga__kk{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--muted)}
.ga__note{margin-top:40px!important;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.ga__side{position:sticky;top:100px;display:grid;gap:16px}
.ga__toc{display:grid;gap:2px;padding:20px;border-radius:16px;border:1px solid var(--line)}
.ga__toc a{padding:6px 0;font-size:14px;color:var(--muted)}
.ga__toc a:hover{color:var(--ink)}
.ga__cta{display:grid;gap:14px;padding:22px;border-radius:16px;background:#0a0a0a;color:#fff}
.ga__cta .ga__kk{color:rgba(255,255,255,.5);margin:0}
.ga__cta b{font:500 19px/1.3 var(--heading)}
@media (max-width:1000px){.ggrid{grid-template-columns:1fr 1fr}.ga__grid{grid-template-columns:1fr}.ga__side{position:static}.ga__hero{margin-bottom:-60px}.ga__body{padding-top:110px}}
@media (max-width:640px){.ggrid{grid-template-columns:1fr}.ga__art{font-size:16.5px}.ga__hero img{aspect-ratio:16/10}}
.ga__art ul{list-style:disc}.ga__art ol{list-style:decimal}.ga__art li{display:list-item}

/* logos: FirstService is not shown, and the strip carries a no-endorsement note */
img[src*="pm-firstservice"]{display:none!important}
.lg::after{content:"Logos belong to their owners and identify the managers of communities we have painted. No endorsement is implied.";display:block;margin-top:14px;padding:0 16px;text-align:center;font-size:11px;color:rgba(255,255,255,.5)}