/* Same renderer and content; only the visual system changes between templates. */
:is(.vx-nimbus,.vx-lumen){font-size:18px}
:is(.vx-nimbus,.vx-lumen) .vx-wrap{width:min(1180px,calc(100% - 96px))}
:is(.vx-nimbus,.vx-lumen) h1{font-size:clamp(42px,4.5vw,72px);line-height:1.07;letter-spacing:-.035em}
:is(.vx-nimbus,.vx-lumen) h2{font-size:clamp(30px,3vw,46px);line-height:1.17}
:is(.vx-nimbus,.vx-lumen) h3{font-size:24px}
:is(.vx-nimbus,.vx-lumen) .vx-nav{width:min(1370px,100%);height:96px;padding-inline:clamp(24px,5vw,80px);border:0}
:is(.vx-nimbus,.vx-lumen) .vx-brand img{width:105px;height:70px}
:is(.vx-nimbus,.vx-lumen) .vx-sticky-header{background:var(--vx-surface)}
:is(.vx-nimbus,.vx-lumen) .vx-nav nav{font-size:18px}
:is(.vx-nimbus,.vx-lumen) .vx-copy p{font-size:18px;line-height:1.8}
:is(.vx-nimbus,.vx-lumen) .vx-footer-main{padding-block:75px}
:is(.vx-nimbus,.vx-lumen) .vx-footer-main>h2{font-size:36px}
:is(.vx-nimbus,.vx-lumen) .vx-footer-columns{margin-top:40px;gap:30px}
:is(.vx-nimbus,.vx-lumen) .vx-footer-columns h3{font-size:20px}
:is(.vx-nimbus,.vx-lumen) .vx-footer-columns :is(p,a){font-size:18px}
:is(.vx-nimbus,.vx-lumen) .vx-footer-bottom{font-size:16px}
:is(.vx-nimbus,.vx-lumen) .vx-project-meta{padding:22px 0 18px}
:is(.vx-nimbus,.vx-lumen) .vx-project-meta small{font-size:16px}
:is(.vx-nimbus,.vx-lumen) .vx-project-meta strong{font-size:23px}
:is(.vx-nimbus,.vx-lumen) .vx-project-meta .vx-arrow{width:24px;height:24px}
:is(.vx-nimbus,.vx-lumen) .vx-feature-photo img{height:100%;top:0;object-fit:cover}

/* Nimbus: inset rounded surfaces, circular portrait, soft alternating cards. */
.vertex-site.vx-nimbus .vx-hero{margin:20px 32px 0;padding:0 0 30px;color:var(--vx-on-color)}
.vertex-site.vx-nimbus .vx-hero::before{inset:0 0 30px;height:auto;border-radius:64px;background:var(--vx-primary)}
.vx-nimbus .vx-sticky-header+.vx-hero::after,.vertex-site.vx-nimbus:not(.vx-demo) .vx-sticky-header+.vx-hero::after{inset:40px 10% 0;height:auto;border-radius:56px;background:var(--vx-soft)}
.vertex-site.vx-nimbus .vx-hero-inner{grid-template-columns:1.12fr 1fr;gap:80px;padding:76px 0 82px;align-items:center}
.vertex-site.vx-nimbus .vx-hero-copy{padding:0}
.vertex-site.vx-nimbus .vx-hero-copy p{font-size:21px;line-height:1.65;max-width:450px;margin-top:24px}
.vx-nimbus .vx-portrait{width:100%;height:auto;aspect-ratio:1;max-width:440px;justify-self:end;border-radius:50%;border:10px solid var(--vx-primary);outline:1px solid var(--vx-soft);outline-offset:10px;object-fit:cover;box-shadow:none}
.vx-nimbus .vx-button{border-radius:100px;padding-left:25px}
.vx-nimbus .vx-about{grid-template-columns:.95fr 1.05fr;gap:90px;padding-block:100px 50px}
.vx-nimbus .vx-story-image{height:430px;border-radius:28px;box-shadow:none}
.vx-nimbus .vx-projects{padding-block:45px 55px}
.vx-nimbus .vx-section-head{margin-bottom:34px}
.vx-nimbus .vx-project-grid{gap:32px}
.vx-nimbus .vx-project-media{border-radius:26px}
.vx-nimbus .vx-project img,.vx-nimbus .vx-project .vx-empty{height:320px}
.vx-nimbus .vx-project-meta{padding-inline:8px;border:0}
.vx-nimbus .vx-feature{padding:35px 32px 60px}
.vx-nimbus .vx-feature::before{display:none}
.vx-nimbus .vx-feature-photo{width:100%;height:530px;border-radius:56px}
.vx-nimbus .vx-services{display:grid;grid-template-columns:.65fr 1.35fr;gap:55px;padding-block:50px 100px;align-items:start}
.vx-nimbus .vx-services>h2{position:sticky;top:140px}
.vx-nimbus .vx-service-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0;gap:22px}
.vx-nimbus .vx-service{padding:32px;min-height:240px;border:2px solid var(--vx-soft);border-radius:26px;background:var(--vx-surface)}
.vx-nimbus .vx-service:nth-child(4n+1),.vx-nimbus .vx-service:nth-child(4n+4){background:var(--vx-soft)}
.vx-nimbus .vx-service:hover{background:color-mix(in srgb,var(--vx-soft) 60%,var(--vx-surface));transform:translateY(-5px)}
.vx-nimbus .vx-service-icon{width:35px;height:35px;margin-bottom:25px}
.vx-nimbus .vx-service p{font-size:17px;margin-top:14px;color:color-mix(in srgb,var(--vx-text) 80%,var(--vx-surface))}
.vx-nimbus .vx-contact{margin:0 32px 75px;padding:65px max(40px,calc((100% - 1180px)/2 - 32px));border-radius:56px;grid-template-columns:1.1fr 1fr;gap:80px;min-height:0;overflow:hidden;align-items:center}
.vx-nimbus .vx-contact-copy{width:auto;margin:0;padding:0}
.vx-nimbus .vx-contact-photo{height:370px;min-height:0}
.vx-nimbus .vx-contact-photo img{border-radius:26px}
.vx-nimbus .vx-contact-photo::before{inset:15px -20px -15px 20px;width:auto;height:auto;border:1px solid var(--vx-soft);border-radius:50%;background:none}
.vx-nimbus .vx-footer{margin-inline:32px;border-radius:56px 56px 0 0;overflow:hidden}
.vx-nimbus .vx-footer-main{width:min(1180px,calc(100% - 80px))}

/* Lumen: immersive photography, strong editorial contrast and offset shapes. */
.vertex-site.vx-lumen .vx-hero{padding:0;min-height:620px;background:var(--vx-dark);isolation:isolate;overflow:hidden}
.vertex-site.vx-lumen .vx-hero::before{inset:0;height:auto;z-index:1;background:linear-gradient(90deg,color-mix(in srgb,var(--vx-dark) 90%,transparent) 0%,color-mix(in srgb,var(--vx-dark) 70%,transparent) 38%,color-mix(in srgb,var(--vx-dark) 8%,transparent) 85%);pointer-events:none}
.vertex-site.vx-lumen .vx-hero::after{display:none}
.vertex-site.vx-lumen .vx-hero-inner{display:block;position:static;padding:105px 0 115px}
.vertex-site.vx-lumen .vx-hero-copy{position:relative;z-index:2;max-width:560px;padding:0}
.vertex-site.vx-lumen .vx-hero-copy p{font-size:21px;line-height:1.7;max-width:440px}
.vx-lumen .vx-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 35%;box-shadow:none;animation:vx-lumen-zoom 1.3s cubic-bezier(.22,1,.36,1) both}
.vx-lumen .vx-button{border-radius:12px}
.vx-lumen .vx-about{position:relative;grid-template-columns:1fr 1fr;gap:90px;padding:100px 0 75px}
.vx-lumen .vx-about::before{content:'';position:absolute;inset:-12px 0 auto;height:13px;background:var(--vx-surface);border-radius:5px 5px 0 0}
.vx-lumen .vx-story-image{height:390px;border-radius:12px;box-shadow:18px 18px 0 var(--vx-soft)}
.vx-lumen .vx-copy h2{color:var(--vx-primary-ink,var(--vx-primary))}
.vx-lumen .vx-projects{padding:45px 0 85px}
.vx-lumen .vx-project-grid{grid-template-columns:1.15fr 1fr;gap:34px 28px}
.vx-lumen .vx-project-media{border-radius:12px}
.vx-lumen .vx-project img,.vx-lumen .vx-project .vx-empty{height:350px}
.vx-lumen .vx-project:nth-child(even){padding-top:75px}
.vx-lumen .vx-project-meta{border-color:var(--vx-soft)}
.vx-lumen .vx-feature{padding:0;overflow:hidden}
.vx-lumen .vx-feature::before{display:none}
.vx-lumen .vx-feature-photo{width:100%;height:550px}
.vx-lumen .vx-services{position:relative;width:100%;padding:85px max(48px,calc((100% - 1180px)/2));background:var(--vx-primary);color:var(--vx-on-color)}
.vx-lumen .vx-services::before{content:'';position:absolute;top:-12px;left:calc((100% - min(1180px,100% - 96px))/2);width:min(1180px,calc(100% - 96px));height:13px;background:var(--vx-primary);border-radius:5px 5px 0 0}
.vx-lumen .vx-services>h2{max-width:700px;margin:auto;text-align:center}
.vx-lumen .vx-service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:45px}
.vx-lumen .vx-service{min-height:235px;padding:30px;border:0;border-radius:10px;background:var(--vx-surface);color:var(--vx-text)}
.vx-lumen .vx-service h3{color:var(--vx-primary-ink,var(--vx-primary))}
.vx-lumen .vx-service-icon{width:32px;height:32px;margin-bottom:22px}
.vx-lumen .vx-service p{font-size:17px;line-height:1.65;margin-top:14px}
.vx-lumen .vx-service:hover{background:var(--vx-soft);transform:translateY(-5px)}
.vx-lumen .vx-contact{position:relative;margin-top:70px;padding:85px max(48px,calc((100% - 1180px)/2));grid-template-columns:1.1fr 1fr;gap:90px;align-items:center;min-height:0}
.vx-lumen .vx-contact::before{content:'';position:absolute;left:calc((100% - min(1180px,100% - 96px))/2);top:-12px;height:13px;width:min(1180px,calc(100% - 96px));background:var(--vx-primary);border-radius:5px 5px 0 0}
.vx-lumen .vx-contact-copy{width:auto;margin:0;padding:0}
.vx-lumen .vx-contact-copy h2{color:var(--vx-on-color)}
.vx-lumen .vx-contact-photo{min-height:0;height:360px;isolation:isolate}
.vx-lumen .vx-contact-photo img{border-radius:12px}
.vx-lumen .vx-contact-photo::before{inset:25px 20px -20px -25px;width:auto;height:auto;background:var(--vx-soft);border-radius:12px;transform:rotate(-8deg);z-index:-1}
@keyframes vx-lumen-zoom{from{opacity:.5;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
@container(max-width:1000px){
 :is(.vx-nimbus,.vx-lumen) .vx-wrap{width:calc(100% - 64px)}
 :is(.vx-nimbus,.vx-lumen) .vx-about{gap:45px}
 .vertex-site.vx-nimbus .vx-hero-inner{gap:45px}.vertex-site.vx-nimbus .vx-hero{margin-inline:20px}.vx-nimbus .vx-services{gap:30px;grid-template-columns:.7fr 1.3fr}.vx-nimbus .vx-service{padding:24px}.vx-nimbus .vx-contact{gap:40px;padding:50px 35px}.vx-nimbus .vx-footer{margin-inline:20px}
 .vx-lumen .vx-contact{gap:45px;padding:60px 32px}.vx-lumen .vx-services{padding-inline:32px}
}
@container(max-width:900px){:is(.vx-nimbus,.vx-lumen) .vx-nav{height:84px;padding-inline:24px}:is(.vx-nimbus,.vx-lumen) .vx-brand img{width:90px;height:60px}}
@container(max-width:700px){
 :is(.vx-nimbus,.vx-lumen) .vx-wrap{width:calc(100% - 40px)}
 :is(.vx-nimbus,.vx-lumen) h1{font-size:40px}:is(.vx-nimbus,.vx-lumen) h2{font-size:30px}:is(.vx-nimbus,.vx-lumen) h3{font-size:23px}
 :is(.vx-nimbus,.vx-lumen) .vx-about{grid-template-columns:1fr;gap:36px;padding-block:60px 35px}
 :is(.vx-nimbus,.vx-lumen) .vx-story-image{height:300px}
 :is(.vx-nimbus,.vx-lumen) .vx-project-grid{grid-template-columns:1fr;gap:28px}
 :is(.vx-nimbus,.vx-lumen) .vx-project img{height:240px}
 :is(.vx-nimbus,.vx-lumen) .vx-project-meta{padding:18px 0}
 :is(.vx-nimbus,.vx-lumen) .vx-project-meta strong{font-size:20px}
 :is(.vx-nimbus,.vx-lumen) .vx-footer-columns{grid-template-columns:1fr 1fr;gap:28px 20px}
 :is(.vx-nimbus,.vx-lumen) .vx-footer-columns :is(p,a){font-size:16px}
 :is(.vx-nimbus,.vx-lumen) .vx-footer-main{padding-block:45px}
 :is(.vx-nimbus,.vx-lumen) .vx-footer-main>h2{font-size:28px}
 .vertex-site.vx-nimbus .vx-hero{margin:12px 12px 0;padding-bottom:20px}.vertex-site.vx-nimbus .vx-hero::before{bottom:20px;border-radius:32px}.vx-nimbus .vx-sticky-header+.vx-hero::after{border-radius:30px}
 .vertex-site.vx-nimbus .vx-hero-inner{grid-template-columns:1fr;gap:44px;padding:40px 8px 55px}
 .vertex-site.vx-nimbus .vx-hero-copy p{font-size:18px}.vx-nimbus .vx-portrait{width:90%;max-width:300px;justify-self:center;outline-offset:6px;border-width:6px}
 .vx-nimbus .vx-story-image{border-radius:22px}.vx-nimbus .vx-projects{padding-block:30px}
 .vx-nimbus .vx-feature{padding:20px 12px 40px}.vx-nimbus .vx-feature-photo{height:280px;border-radius:30px}
 .vx-nimbus .vx-services{display:block;padding:20px 0 50px}.vx-nimbus .vx-services>h2{position:static}.vx-nimbus .vx-service-grid{grid-template-columns:1fr;margin-top:28px;gap:16px}.vx-nimbus .vx-service{min-height:0;padding:26px}
 .vx-nimbus .vx-contact{margin:0 12px 40px;padding:34px 24px;grid-template-columns:1fr;gap:34px;border-radius:32px}.vx-nimbus .vx-contact-photo{height:280px}.vx-nimbus .vx-contact-photo::before{display:block;right:-10px;left:10px}
 .vx-nimbus .vx-footer{margin-inline:12px;border-radius:32px 32px 0 0}.vx-nimbus .vx-footer-main{width:calc(100% - 40px)}
 .vertex-site.vx-lumen .vx-hero{min-height:590px}.vertex-site.vx-lumen .vx-hero-inner{padding-block:80px 100px}.vertex-site.vx-lumen .vx-hero-copy{max-width:100%}.vertex-site.vx-lumen .vx-hero-copy p{font-size:18px}.vx-lumen .vx-portrait{object-position:60% center}.vertex-site.vx-lumen .vx-hero::before{background:color-mix(in srgb,var(--vx-dark) 68%,transparent)}
 .vx-lumen .vx-story-image{width:calc(100% - 12px);box-shadow:12px 12px 0 var(--vx-soft)}
 .vx-lumen .vx-projects{padding-block:30px 45px}.vx-lumen .vx-project:nth-child(even){padding-top:0}.vx-lumen .vx-feature-photo{height:300px}
 .vx-lumen .vx-services{width:100%;padding:50px 20px}.vx-lumen .vx-service-grid{grid-template-columns:1fr;margin-top:30px;gap:16px}.vx-lumen .vx-service{min-height:0;padding:26px}.vx-lumen .vx-services>h2{text-align:left}
 .vx-lumen .vx-contact{margin-top:45px;padding:45px 24px;grid-template-columns:1fr;gap:42px}.vx-lumen .vx-contact-photo{height:300px;margin-left:12px}.vx-lumen .vx-contact-photo::before{display:block;left:-15px}
}
@media(prefers-reduced-motion:reduce){:is(.vx-nimbus,.vx-lumen) *{animation:none!important;transition:none!important}}

.vx-nimbus .vx-portrait{animation-name:vx-appear}

/* Lumen's editorial introduction: split copy above a playful photo collage. */
.vx-lumen .vx-about{grid-template-columns:.8fr 1.2fr;gap:56px 90px;align-items:start;padding-block:95px 90px}
.vx-lumen .vx-about>h2{color:var(--vx-primary-ink,var(--vx-primary));max-width:420px}
.vx-lumen .vx-about .vx-copy p{margin-top:0}
.vx-lumen .vx-story-collage{grid-column:1/-1;position:relative;isolation:isolate;min-height:420px;padding-bottom:45px}
.vx-lumen .vx-story-collage::before{content:'';position:absolute;left:53%;top:33%;width:27%;height:64%;background:var(--vx-soft);border-radius:14px;transform:rotate(-16deg);z-index:-1}
.vx-lumen .vx-collage-main{width:65%;height:400px;overflow:hidden;border-radius:14px}
.vx-lumen .vx-collage-main>img,.vx-lumen .vx-collage-main>.vx-empty{width:100%;height:100%;object-fit:cover}
.vx-lumen .vx-collage-small{position:absolute;right:3%;top:24px;width:28%;height:290px;border-radius:14px;transform:rotate(8deg);overflow:hidden;box-shadow:0 14px 35px color-mix(in srgb,var(--vx-dark) 12%,transparent);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.vx-lumen .vx-collage-small .vx-story-image{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
@media(hover:hover){.vx-lumen .vx-story-collage:hover .vx-collage-small{transform:translateY(-8px) rotate(5deg)}}
@container(max-width:1000px){.vx-lumen .vx-about{gap:40px}.vx-lumen .vx-collage-main{height:340px}.vx-lumen .vx-story-collage{min-height:380px}.vx-lumen .vx-collage-small{height:235px}}
@container(max-width:700px){
 .vx-lumen .vx-about{grid-template-columns:1fr;gap:26px;padding-block:55px 45px}
 .vx-lumen .vx-story-collage{margin-top:14px;min-height:300px;padding-bottom:70px}
 .vx-lumen .vx-collage-main{width:82%;height:225px;border-radius:10px}
 .vx-lumen .vx-collage-small{width:40%;height:155px;top:115px;right:2%;border-radius:10px}
 .vx-lumen .vx-story-collage::before{left:42%;top:37%;width:43%;height:54%;border-radius:10px}
}

/* Empty media uses the same geometry as actual photos in every template. */
.vertex-site:not(.vx-demo) .vx-contact-photo>.vx-empty{position:absolute;inset:0;width:100%;height:100%;min-height:0}
.vertex-site:not(.vx-demo) .vx-empty{background:color-mix(in srgb,var(--vx-primary) 7%,#f5f5f3);color:#596364;box-shadow:none;border:1px solid color-mix(in srgb,var(--vx-primary) 13%,transparent)}
.vertex-site .vx-empty>span{padding:20px;font:400 16px/1.4 var(--vx-font-body)}
.vx-nimbus .vx-contact-photo>.vx-empty{border-radius:26px}
.vx-lumen .vx-contact-photo>.vx-empty{border-radius:12px}
.vertex-site.vx-lumen.vx-no-photos .vx-hero{background:var(--vx-primary)}
.vertex-site.vx-lumen.vx-no-photos .vx-hero::before{background:none}
.vx-lumen.vx-no-photos .vx-portrait.vx-empty{background:transparent;border:0;color:inherit;place-items:end;padding:35px;opacity:.6}
/* Footer always sits on the dark color, independently of a light custom primary. */
.vertex-site:not(.vx-demo) .vx-footer{color:#ffffff}

/* Photo heroes use white text on a fixed dark overlay, independent of the palette. */
.vertex-site.vx-lumen:not(.vx-no-photos) .vx-hero{color:#fff}
.vertex-site.vx-lumen:not(.vx-no-photos) .vx-hero::before{background:linear-gradient(90deg,rgba(15,22,28,.84) 0%,rgba(15,22,28,.76) 48%,rgba(15,22,28,.18) 100%)}
@container(max-width:700px){.vertex-site.vx-lumen:not(.vx-no-photos) .vx-hero::before{background:rgba(15,22,28,.76)}}
.vertex-site .vx-footer,.vertex-site .vx-lightbox{color:var(--vx-on-dark,#fff)}
.vertex-site:not(.vx-demo) .vx-footer{color:var(--vx-on-dark,#fff)}
.vertex-site .vx-service p{color:var(--vx-muted)}

.vx-contact-demo{margin-top:24px;padding:24px;border-radius:14px;background:var(--vx-surface);color:var(--vx-text)}
.vertex-site .vx-contact-demo h3{font-size:22px;line-height:1.3}.vertex-site .vx-contact-demo p{font-size:16px;line-height:1.6;margin:12px 0}
.vx-contact-demo fieldset{display:grid;gap:12px;border:0;padding:12px 0;margin:0}.vx-contact-demo label{display:grid;gap:6px;font-size:14px}
.vx-contact-demo input,.vx-contact-demo textarea{width:100%;box-sizing:border-box;border:1px solid #aebec7;border-radius:8px;background:#fff;padding:10px 12px;color:#586c78;font:400 16px var(--vx-font-body);opacity:1}
.vx-contact-demo button{justify-self:start;border:0;border-radius:8px;background:#e2eaf0;padding:10px 16px;color:#385367;font:700 15px var(--vx-font-body)}.vx-contact-demo small{font-size:13px;line-height:1.5;display:block}
#vx-contact-example{scroll-margin-top:180px}

/* The contact card has its own light surface; do not inherit inverse section text. */
.vertex-site .vx-contact .vx-contact-demo{background:#fff;color:#242b30}
.vertex-site .vx-contact .vx-contact-demo :is(h3,p,label,fieldset){color:#242b30;opacity:1}
.vertex-site .vx-contact .vx-contact-demo h3{margin:0 0 16px}
.vertex-site .vx-contact .vx-contact-demo fieldset{padding:0}
.vertex-site .vx-contact .vx-contact-demo :is(input,textarea){background:#fff;color:#242b30;-webkit-text-fill-color:#242b30;opacity:1}
.vertex-site .vx-contact .vx-contact-demo :is(input,textarea)::placeholder{color:#5c6870;-webkit-text-fill-color:#5c6870;opacity:1}
.vertex-site .vx-contact .vx-contact-demo button{background:#243746;color:#fff;-webkit-text-fill-color:#fff;opacity:1}

/* Text-only company identity: a deliberate wordmark, independent of body copy. */
.vertex-site .vx-nav{gap:24px}
.vertex-site .vx-brand{min-width:0;flex:0 1 auto;text-decoration:none}
.vertex-site .vx-brand .vx-wordmark{
 display:block;max-width:340px;font-family:"Vertex Archivo",Arial,sans-serif;
 font-weight:800;font-size:clamp(23px,2.2cqw,30px);line-height:1.08;
 letter-spacing:-.045em;color:var(--vx-primary-ink,var(--vx-primary));
 overflow-wrap:anywhere;text-wrap:balance;
}
@container(max-width:900px){
 .vertex-site .vx-brand .vx-wordmark{max-width:min(340px,65cqw);font-size:24px}
}
@container(max-width:400px){
 .vertex-site .vx-brand .vx-wordmark{font-size:21px}
}