html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--vie-charcoal);color:var(--text-on-dark);overflow-x:hidden}
a{color:var(--link)}a:hover{color:var(--link-hover)}
.wrap{max-width:var(--content-max);margin:0 auto;padding-inline:var(--gutter)}
.row-gap{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.sec{padding:clamp(52px,6vw,84px) 0;position:relative}
.dark{background:var(--vie-charcoal)}.deep{background:var(--vie-charcoal-deep)}
.light{background:var(--surface-light);color:var(--text-on-light)}.light-alt{background:var(--surface-light-alt);color:var(--text-on-light)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap;margin-bottom:32px}
.body{margin:0;font-size:17px;line-height:1.65;color:var(--text-on-light-muted);text-wrap:pretty}
.rv{opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.marquee-track{animation:none!important}.hero-device{animation:none!important}}

/* header */
.hdr{position:sticky;top:0;z-index:200;background:var(--vie-charcoal);box-shadow:var(--shadow-header);transition:box-shadow var(--dur-base)}
.hdr.is-scrolled{box-shadow:0 1px 0 var(--border-on-dark),0 10px 30px rgba(0,0,0,.25)}
.util{background:var(--vie-charcoal-deep);font-size:12px;color:var(--vie-silver);overflow:hidden;max-height:40px;transition:max-height var(--dur-base) var(--ease-out)}
.is-scrolled .util{max-height:0}
.util-in{display:flex;justify-content:space-between;gap:24px;padding-block:9px}
.util-tag{letter-spacing:.08em;color:var(--vie-grey)}
.util-links{display:flex;gap:24px}.util-links a{color:var(--vie-silver)}.util-links a:hover{color:var(--vie-green)}
.bar{display:flex;align-items:center;gap:clamp(16px,3vw,48px);height:88px;transition:height var(--dur-base) var(--ease-out)}
.is-scrolled .bar{height:68px}
.bar-logo{flex:none}
.nav{display:flex;gap:clamp(14px,2.2vw,34px);flex:1;height:100%}
.nav-btn{all:unset;cursor:pointer;display:flex;align-items:center;gap:6px;height:100%;font-size:13px;font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;color:#fff;border-bottom:3px solid transparent;box-sizing:border-box;padding-top:3px;transition:color var(--dur-fast),border-color var(--dur-fast)}
.nav-btn:hover,.nav-btn.on{color:var(--vie-green);border-bottom-color:var(--vie-green)}
.nav-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.caret{font-size:10px;transition:transform var(--dur-base)}.nav-btn.on .caret{transform:rotate(180deg)}
.bar-cta{display:flex;align-items:center;gap:20px;flex:none}
.bar-phone{display:flex;flex-direction:column;line-height:1.2;color:#fff;font-weight:800;font-size:17px;letter-spacing:.02em}
.bar-phone span{font-size:10px;font-weight:700;letter-spacing:var(--tracking-caps);color:var(--vie-green);text-transform:uppercase}
.bar-phone:hover{color:var(--vie-green)}
.burger{display:none!important}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--vie-charcoal-deep);border-top:3px solid var(--vie-green);box-shadow:var(--shadow-lift);padding:40px 0 44px;animation:megaIn var(--dur-base) var(--ease-out)}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}}
.mega-grid{display:grid;grid-template-columns:240px minmax(0,1fr) 260px;gap:48px}
.mega-intro p{color:var(--vie-silver);font-size:15px;margin:0 0 16px}
.mega-title{font-size:26px;font-weight:800;text-transform:uppercase;line-height:1.1;margin:10px 0 12px;color:#fff}
.mega-cols{display:grid;gap:32px}
.mega-h{font-size:12px;font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;color:#fff;padding-bottom:10px;border-bottom:1px solid var(--border-on-dark);margin-bottom:4px}
.mega-link{display:flex;justify-content:space-between;color:var(--vie-silver);font-size:15px;padding:9px 0;border-bottom:1px solid var(--border-on-dark);transition:color var(--dur-fast),padding var(--dur-base) var(--ease-out)}
.mega-link:hover{color:var(--vie-green);padding-left:6px}
.mega-feature{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--vie-charcoal-tint)}
.mega-feature img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform var(--dur-slow) var(--ease-out)}
.mega-feature:hover img{transform:scale(1.04)}
.mega-feature-txt{position:absolute;left:0;right:0;bottom:0;padding:18px;background:var(--vie-charcoal-deep);display:flex;flex-direction:column;gap:6px;color:#fff;font-size:14px;line-height:1.45;border-top:3px solid var(--vie-green)}
.drawer{position:absolute;left:0;right:0;top:100%;background:var(--vie-charcoal-deep);max-height:calc(100vh - 70px);overflow:auto;border-top:3px solid var(--vie-green);padding:8px var(--gutter) 24px}
.drawer-h{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;width:100%;padding:16px 0;font-weight:800;text-transform:uppercase;letter-spacing:var(--tracking-label);font-size:14px;color:#fff;border-bottom:1px solid var(--border-on-dark)}
.drawer-items{display:flex;flex-direction:column;padding:6px 0 12px}.drawer-items a{color:var(--vie-silver);padding:8px 0}
.drawer-cta{display:flex;flex-direction:column;gap:10px;margin-top:20px}

/* hero — header(~128) + usp(~44) + hero fit one viewport */
.hero{position:relative;background:var(--vie-charcoal);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);height:calc(100svh - 88px - 46px);min-height:500px;max-height:820px;overflow:hidden}
.hero-left{position:relative;display:flex;align-items:center;overflow:hidden}
.hero-wm{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2.4vh,26px);padding:clamp(24px,4vh,56px) clamp(64px,7vw,110px) clamp(24px,4vh,56px) max(var(--gutter),calc((100vw - var(--content-max))/2 + var(--gutter)));max-width:880px}
.hero-kicker{font-size:14px;font-weight:600;letter-spacing:var(--tracking-caps);color:var(--vie-silver)}.hero-kicker span{color:var(--vie-green)}
.hero-h1{margin:0;font-size:clamp(52px,min(8vw,14vh),132px);line-height:.94;color:#fff}
.hero-lead{margin:0;font-size:clamp(16px,2.2vh,20px);font-weight:300;line-height:1.55;color:var(--vie-silver);max-width:520px;text-wrap:pretty}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.hero-sub{font-size:14px;color:var(--vie-silver)}.hero-sub a{font-weight:700;white-space:nowrap}
@media (max-height:800px){.hero-kicker{font-size:12px}.hero-h1{font-size:clamp(44px,min(7vw,12vh),110px)}}
.hero-right{position:relative;overflow:hidden;background:var(--vie-charcoal-tint)}
.hero-right img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center}
.hero-cap{position:absolute;right:0;bottom:0;background:var(--vie-charcoal-deep);color:var(--vie-silver);font-size:11px;font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;padding:9px 14px}
.hero-device{position:absolute;left:calc(55% - 70px);bottom:-50px;width:clamp(180px,17vw,250px);pointer-events:none;z-index:2;animation:drift 12s var(--ease-in-out) infinite alternate}
@keyframes drift{to{transform:translate(10px,-10px) rotate(-3deg)}}

/* service panels */
.sp-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:clamp(32px,5vw,72px);align-items:start}
.sp-side{display:flex;flex-direction:column;gap:24px;position:sticky;top:110px}
.sp-photo{margin:8px 0 0;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--vie-charcoal-tint)}
.sp-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.sp-photo figcaption{position:absolute;left:0;bottom:0;background:var(--vie-charcoal-deep);color:#fff;font-size:11px;font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;padding:8px 12px;border-top:3px solid var(--vie-green)}
.sp-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.st{position:relative;display:flex;align-items:center;gap:18px;padding:20px 22px;min-height:112px;background:var(--vie-charcoal-deep);color:#fff;transition:background var(--dur-base)}
.st::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--vie-green);transition:width var(--dur-slow) var(--ease-out)}
.st:hover{background:var(--vie-charcoal-tint);color:#fff}.st:hover::before{width:100%}
.st img{flex:none;transition:transform var(--dur-base) var(--ease-out)}.st:hover img{transform:translateY(-3px)}
.st-txt{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.st-t{font-size:16px;font-weight:800;text-transform:uppercase;line-height:1.2;letter-spacing:.01em}
.st-d{font-size:14px;line-height:1.5;color:var(--vie-silver)}
.st-arr{flex:none;color:var(--vie-green);font-size:18px;transition:transform var(--dur-base) var(--ease-out)}.st:hover .st-arr{transform:translateX(5px)}
.st.wide{grid-column:span 2;padding:26px 28px;border-top:3px solid var(--vie-green)}.st.wide::before{display:none}
.st.wide .st-t{font-size:clamp(22px,2vw,28px)}
.st-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:13px;color:#fff}
.st-links span{display:inline-flex;align-items:center;gap:8px}.st-links span::before{content:"";width:6px;height:6px;background:var(--vie-green)}
.st.on-light{background:var(--vie-white);color:var(--vie-charcoal)}
.st.on-light:hover{background:var(--vie-white);color:var(--vie-charcoal);box-shadow:var(--shadow-card)}
.st.on-light .st-d{color:var(--vie-slate)}.st.on-light .st-links{color:var(--vie-charcoal)}.st.on-light .st-arr{color:var(--vie-charcoal)}
.st.wide.on-light{background:var(--vie-charcoal);color:#fff}.st.wide.on-light:hover{background:var(--vie-charcoal-tint);color:#fff}.st.wide.on-light .st-d{color:var(--vie-silver)}.st.wide.on-light .st-links{color:#fff}.st.wide.on-light .st-arr{color:var(--vie-green)}

/* carousel */
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,24vw,300px);gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:max(var(--gutter),calc((100vw - var(--content-max))/2 + var(--gutter)));scroll-padding-inline:max(var(--gutter),calc((100vw - var(--content-max))/2 + var(--gutter)));scrollbar-width:none}
.car-track::-webkit-scrollbar,.blog-scroll::-webkit-scrollbar{display:none}
.car-item{scroll-snap-align:start;display:grid}
.car-item.wide{grid-column:span 2}
.car-nav{display:flex;gap:8px;margin-left:8px}

/* usp */
.usp{background:var(--vie-green);color:var(--vie-white)}
.usp-in{display:flex;justify-content:space-between;gap:12px 28px;padding-block:13px;overflow-x:auto;scrollbar-width:none}
.usp-i{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;white-space:nowrap}
.usp-tick{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:var(--vie-white);color:var(--vie-green);font-size:11px;border-radius:2px}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
.about-photo{position:relative;aspect-ratio:5/4}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block}
.about-stamp{position:absolute;right:-32px;bottom:-32px;background:var(--vie-green);color:var(--vie-white);padding:22px 30px 24px;display:flex;align-items:flex-end;gap:16px;box-shadow:var(--shadow-lift)}
.about-stamp b{font-size:clamp(88px,9vw,128px);font-weight:800;line-height:.8;letter-spacing:-.04em}.about-stamp span{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;line-height:1.2;padding-bottom:4px}
.about-copy{display:flex;flex-direction:column;gap:18px}.about-copy .row-gap{margin-top:8px}

/* services */
.svc-grid{display:grid;gap:2px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.svc-grid>.rv{display:grid}
.span2{grid-column:span 2}
.life-card{display:flex;flex-direction:column;gap:24px;height:100%;padding:32px 28px;background:var(--vie-charcoal-tint);color:#fff;border-top:3px solid var(--vie-green);position:relative;overflow:hidden}
.life-top{display:flex;gap:18px;align-items:center}
.life-t{font-size:26px;font-weight:800;text-transform:uppercase;line-height:1.1;margin-top:6px}
.life-list{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:auto}
.life-list span{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid var(--border-on-dark);font-size:14px;color:var(--vie-silver);transition:color var(--dur-fast)}
.life-list i{font-style:normal;transition:transform var(--dur-base) var(--ease-out)}
.life-list span:hover{color:var(--vie-green)}.life-list span:hover i{transform:translateX(4px)}
.fin-feature{grid-column:span 2;grid-row:span 2}
.fin-feat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);height:100%;background:var(--vie-charcoal);color:#fff;border-top:3px solid var(--vie-green);overflow:hidden}
.fin-feat img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;transition:transform var(--dur-slow) var(--ease-out)}
.fin-feat:hover img{transform:scale(1.04)}
.fin-feat-body{display:flex;flex-direction:column;gap:14px;padding:32px 28px}
.fin-feat-t{font-size:clamp(28px,2.6vw,38px);font-weight:800;text-transform:uppercase;line-height:1.05}
.fin-feat-body p{margin:0;color:var(--vie-silver);font-size:15px}
.fin-feat-links{display:flex;flex-direction:column;border-top:1px solid var(--border-on-dark)}
.fin-feat-links span{font-size:14px;color:var(--vie-silver);padding:9px 0;border-bottom:1px solid var(--border-on-dark)}
.explore{margin-top:auto;font-size:12px;font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--vie-green)}
.explore i{font-style:normal;display:inline-block;transition:transform var(--dur-base) var(--ease-out)}.fin-feat:hover .explore i{transform:translateX(6px)}

/* clients */
.clients{background:var(--vie-charcoal);padding:44px 0;border-top:1px solid var(--border-on-dark);border-bottom:1px solid var(--border-on-dark)}
.clients-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px 40px;flex-wrap:wrap;margin-bottom:28px}
.clients-head p{margin:0;color:var(--vie-silver);font-size:15px}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:2px;width:max-content;animation:scroll 50s linear infinite}
.marquee.slow .marquee-track{animation-duration:90s;gap:20px}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.logo-tile{width:200px;height:96px;display:flex;align-items:center;justify-content:center;background:var(--vie-charcoal-tint);color:var(--vie-grey);font-size:11px;font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;flex:none;transition:color var(--dur-fast)}
.logo-tile:hover{color:#fff}

/* why */
.why-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,88px);align-items:start}
.why-photo{position:sticky;top:110px;aspect-ratio:4/5}
.why-photo>img:first-child{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.why-device{position:absolute;right:-18%;bottom:-8%;width:62%;pointer-events:none}
.why-cap{position:absolute;left:0;bottom:0;background:var(--vie-charcoal);color:#fff;padding:14px 18px;display:flex;flex-direction:column;font-size:13px;border-top:3px solid var(--vie-green)}
.why-cap b{text-transform:uppercase;letter-spacing:.06em}.why-cap span{color:var(--vie-silver)}
.why-list{display:grid;grid-template-columns:1fr 1fr;margin-top:40px;border-top:1px solid var(--border-on-light)}
.why-i{padding:26px 28px 26px 0;border-bottom:1px solid var(--border-on-light)}
.why-i:nth-child(even){padding-left:28px;padding-right:0;border-left:1px solid var(--border-on-light)}
.why-big{font-size:clamp(32px,3vw,42px);font-weight:800;text-transform:uppercase;line-height:1;color:var(--vie-charcoal)}
.why-t{font-size:15px;font-weight:700;margin-top:12px}.why-d{font-size:15px;color:var(--vie-slate);margin-top:4px}

/* testimonials */
.tst .sec-head{margin-bottom:40px}
.g-score{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--vie-silver);line-height:1.4}.g-score b{color:#fff;text-transform:uppercase;letter-spacing:.08em}
.g-stars{color:var(--vie-green);font-size:20px;letter-spacing:3px}
.team-card{width:260px;flex:none;display:flex}.team-card>div{width:100%}.team-card>div>div:last-child{flex:1}.team-card>div>div:last-child>div:first-child{font-size:17px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.team-card>div>div:last-child>div:nth-child(2){min-height:calc(14px * 1.65 * 2);line-height:1.65}.team-card>div>div:last-child>div:nth-child(3){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.marquee.team .marquee-track{gap:16px;animation-duration:80s}
.tst-card{width:400px;flex:none;padding:32px;background:var(--vie-charcoal-tint);border-top:3px solid var(--vie-green)}

/* faq */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,88px);align-items:start}
.faq-side{display:flex;flex-direction:column;gap:28px;position:sticky;top:110px}
.faq-list{border-top:1px solid var(--border-on-dark)}
.faq-i{border-bottom:1px solid var(--border-on-dark);position:relative}
.faq-i::before{content:"";position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--vie-green);transition:width var(--dur-slow) var(--ease-out)}
.faq-i.on::before{width:100%}
.faq-q{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-size:18px;font-weight:700;color:#fff}
.faq-q:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.faq-plus{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border-on-dark);border-radius:2px;font-size:20px;font-weight:400;transition:transform var(--dur-base) var(--ease-out),background var(--dur-fast)}
.faq-i.on .faq-plus{transform:rotate(45deg);background:var(--vie-green);border-color:var(--vie-green);color:var(--vie-white)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-base) var(--ease-out)}
.faq-i.on .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}.faq-a p{margin:0 56px 24px 0;color:var(--vie-silver);text-wrap:pretty}

/* locations */
.loc-tabs{overflow-x:auto;margin-bottom:28px}
.loc-panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2px;animation:megaIn var(--dur-slow) var(--ease-out)}
.loc-info{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:var(--vie-charcoal-deep)}
.loc-photo{position:relative;min-height:420px;background:var(--vie-charcoal-tint)}
.loc-photo img,.loc-photo image-slot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.loc-tag{position:absolute;left:16px;top:16px}
.loc-body{display:flex;flex-direction:column;gap:14px;padding:32px 28px}
.loc-name{font-size:28px;font-weight:800;text-transform:uppercase;line-height:1.1}
.loc-blurb{margin:0;color:var(--vie-silver);font-size:15px}
.loc-dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:6px 0 10px;font-size:15px}
.loc-dl dt{font-size:11px;font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--vie-grey);padding-top:3px}
.loc-dl dd{margin:0;color:#fff}.loc-dl a{font-weight:700}
.loc-map{position:relative;min-height:420px;background:var(--vie-charcoal-tint)}
.loc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05)}

/* blog */
.blog-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,calc((var(--content-max) - 2*48px - 48px)/3));gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(var(--gutter),calc((100vw - var(--content-max))/2 + var(--gutter))) 12px;scroll-padding-inline:max(var(--gutter),calc((100vw - var(--content-max))/2 + var(--gutter)));scrollbar-width:none}
.post{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--surface-light);border:1px solid var(--border-on-light);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);position:relative}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.post::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--vie-green);z-index:2;transition:width var(--dur-slow) var(--ease-out)}
.post:hover::before{width:100%}
.post-img{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-light-alt)}
.post-img img,.post-img image-slot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;transition:transform var(--dur-slow) var(--ease-out)}
.post:hover .post-img img{transform:scale(1.04)}
.post-body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px;flex:1}
.post-meta{display:flex;justify-content:space-between;width:100%;font-size:12px;color:var(--vie-slate)}
.post-t{margin:0;font-size:21px;font-weight:800;text-transform:uppercase;line-height:1.15}
.post-t a{color:var(--vie-charcoal)}.post-t a:hover{color:var(--vie-green-hover)}
.post-body p{margin:0 0 8px;color:var(--vie-slate);font-size:15px;flex:1}

/* closing cta */
.cta{--text-accent:var(--vie-white);--text-on-light:var(--vie-white);--text-on-light-muted:var(--vie-white);position:relative;overflow:hidden;background:var(--vie-green);color:var(--vie-white);padding:clamp(52px,6vw,84px) 0}
.cta-device{position:absolute;left:-8%;bottom:-30%;width:min(60vw,720px);opacity:.18;mix-blend-mode:multiply;pointer-events:none}
.cta-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,88px);align-items:start}
.cta-copy{display:flex;flex-direction:column;gap:40px}
.cta-contacts{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.4)}
.cta-c{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.4);color:var(--vie-white);align-items:baseline}
.cta-c span{font-size:11px;font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--vie-white)}
.cta-c b{font-size:18px;font-weight:700}
a.cta-c:hover b{text-decoration:underline}
.cta-form{--text-accent:var(--vie-green);--text-on-light:var(--vie-charcoal);--text-on-light-muted:var(--vie-slate);background:var(--surface-light);color:var(--text-on-light);padding:clamp(24px,3vw,40px);border-top:4px solid var(--vie-charcoal);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow-lift)}
.form-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.form-t{font-size:24px;font-weight:800;text-transform:uppercase}
.form-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-2>*{min-width:0}.cta-form input,.cta-form select,.cta-form textarea{width:100%;min-width:0}
.cta-done{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:40px 0}
.cta-tick{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--vie-green);color:var(--vie-white);font-size:28px;border-radius:2px}
.cta-done-t{font-size:28px;font-weight:800;text-transform:uppercase}.cta-done p{margin:0;color:var(--vie-slate)}

/* footer */
.ftr{background:var(--vie-charcoal-deep);color:var(--vie-silver);padding-bottom:96px}
.ftr{border-top:1px solid var(--border-on-dark)}
.ftr-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:clamp(40px,5vw,72px);padding-block:56px 40px}
.ftr-brand{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.ftr-brand p{margin:0;font-size:14px;line-height:1.65}
.ftr-contact{display:flex;flex-direction:column;gap:4px;font-size:14px}.ftr-contact a{font-size:22px;font-weight:800;color:#fff}.ftr-contact a:hover{color:var(--vie-green)}
.ftr-social{display:flex;flex-wrap:wrap;gap:8px}
.ftr-social a{height:34px;padding:0 12px;display:inline-flex;align-items:center;border:1px solid var(--border-on-dark);border-radius:var(--radius-button);color:#fff;font-size:11px;font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.ftr-social a:hover{background:var(--vie-green);border-color:var(--vie-green);color:var(--vie-white)}
.ftr-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px}
.ftr-cols>div{display:flex;flex-direction:column;gap:9px}
.ftr-cols .vie-eyebrow{margin-bottom:6px}
.ftr-cols a{color:var(--vie-silver);font-size:13px;line-height:1.4}.ftr-cols a:hover{color:var(--vie-green)}
.ftr-legal{border-top:1px solid var(--border-on-dark);padding-block:28px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;font-size:12px;line-height:1.7;color:var(--vie-grey)}
.ftr-legal p{margin:0;max-width:120ch}
.ftr-base{border-top:1px solid var(--border-on-dark);padding-block:22px;display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap;font-size:12px}
.ftr-links{display:flex;gap:8px 20px;flex-wrap:wrap}.ftr-links a{color:var(--vie-silver)}.ftr-links a:hover{color:var(--vie-green)}
.ftr-5x5{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--vie-grey);font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase}

/* sticky cta */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--vie-charcoal-deep);border-top:3px solid var(--vie-green);box-shadow:0 -10px 30px rgba(0,0,0,.3);transform:translateY(110%);transition:transform var(--dur-slow) var(--ease-out)}
.sticky-cta.on{transform:none}
.sticky-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.sticky-txt{display:flex;flex-direction:column;line-height:1.35}.sticky-txt b{text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:#fff}.sticky-txt span{font-size:13px;color:var(--vie-silver)}
.sticky-btns{display:flex;align-items:center;gap:12px}

@media (max-width:1180px){
.util-tag{display:none}.util-in{justify-content:flex-end}
.bar-phone{display:none}
.mega-grid{grid-template-columns:200px minmax(0,1fr)}.mega-feature{display:none}
.ftr-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
.loc-panel{grid-template-columns:1fr}
}
@media (max-width:1100px){
.sp-grid{grid-template-columns:1fr}.sp-side{position:relative;top:0}.sp-photo{display:none}
.nav{display:none}.burger{display:inline-flex!important}.bar{justify-content:space-between}
.form-2{grid-template-columns:1fr}
}
@media (max-width:900px){
.bar-cta>a,.bar-cta>button:not(.burger){display:none}
.hero-grid,.about-grid,.why-grid,.faq-grid,.cta-grid,.ftr-main{grid-template-columns:1fr}
.hero{grid-template-columns:1fr;height:auto;max-height:none}.hero-right{height:260px}.hero-device{left:auto;right:-30px;bottom:200px;width:180px}.hero-copy{padding-inline:var(--gutter)}.about-stamp{right:12px;bottom:-24px}
.why-photo,.faq-side{position:relative;top:0}.why-photo{max-width:440px}
.about-stamp{right:12px;bottom:-20px}
.sticky-txt{display:none}.sticky-in{justify-content:center}
.usp-in{justify-content:flex-start}
}
@media (max-width:620px){
.sp-tiles{grid-template-columns:1fr}.st.wide{grid-column:auto}.hero-btns>a{flex:1 1 100%}
.car-item.wide{grid-column:span 1}.fin-feat{grid-template-columns:1fr}.fin-feat img{aspect-ratio:4/3;height:auto}
.why-list,.form-2{grid-template-columns:1fr}
.why-i:nth-child(even){padding-left:0;border-left:0}
.loc-info{grid-template-columns:1fr}.loc-photo{min-height:240px}.loc-map{min-height:300px}
.ftr-cols{grid-template-columns:1fr 1fr}
.tst-card{width:300px}
.sticky-btns>a:first-child,.sticky-btns>a:nth-child(2){display:none}
.cta-c{grid-template-columns:1fr;gap:4px}
.ftr-5x5{margin-left:0}
}

/* 5X5 import fix (28/09/26): the DS Button sets display inline, which beat the design's own
   max-width:900 rule, so the Book button stayed visible and pushed the burger off-screen at 390px. */
@media (max-width:900px){.bar-cta>button:not(.burger),.bar-cta>a{display:none!important}}
/* Same cause: the design's max-width:620 rule hiding the sticky phone and quote buttons was also beaten by the inline display. */
@media (max-width:620px){.sticky-btns>a:first-child,.sticky-btns>a:nth-child(2){display:none!important}}
/* The why-device bleed (right:-18%) widened the mobile layout viewport by 43px at 390, and body overflow-x:hidden
   does not stop that on mobile browsers. overflow-x:clip keeps the bleed to the section edge without breaking sticky. */
@media (max-width:900px){.why{overflow-x:clip}}

/* 5X5 feedback round 1 (28/09/26) */
/* header phone: label removed, number sits on the nav's line (nav-btn is 100% height with a 3px top pad and 3px bottom border) */
.bar-phone{flex-direction:row;align-items:center;align-self:stretch;box-sizing:border-box;padding-top:3px;border-bottom:3px solid transparent;font-size:15px;letter-spacing:var(--tracking-label);line-height:1}
/* footer trust row: Google Reviews badge + accreditations feed */
.ftr-trust{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px 48px;align-items:center;padding-block:32px;border-top:1px solid var(--border-on-dark)}
.ftr-google{display:flex;align-items:center;justify-content:center;background:var(--vie-white);border-radius:var(--radius-md);padding:6px 14px;transition:transform var(--dur-base) var(--ease-out)}
.ftr-google:hover{transform:translateY(-2px)}
.ftr-google img{display:block;width:190px;height:auto}
.ftr-accred{display:flex;flex-direction:column;gap:14px;min-width:0}
.marquee.accred .marquee-track{gap:12px;animation-duration:45s}
.accred-tile{width:170px;height:72px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-on-dark);border-radius:var(--radius-sm);color:var(--vie-grey);font-size:10px;font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;text-align:center;padding:0 12px}
/* Design by Five by Five, per the agency credit, in Vie's palette */
.ftr-5x5{text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;color:var(--vie-grey);gap:12px}
.ftr-5x5-mark{width:18px;height:22px;flex:none;background:var(--vie-grey);-webkit-mask:url(../assets/brand/5x5-icon.png) center/contain no-repeat;mask:url(../assets/brand/5x5-icon.png) center/contain no-repeat;transition:background var(--dur-fast)}
.ftr-5x5:hover{color:var(--vie-silver)}.ftr-5x5:hover .ftr-5x5-mark{background:var(--vie-green)}
@media (max-width:620px){.ftr-trust{grid-template-columns:minmax(0,1fr)}.ftr-google{justify-self:start}}
/* Why choose Vie: the six points were a 2x3 list 900px tall beside a 550px photo, so the right side scrolled past it.
   Now 3x2 with tighter padding, sized to sit within the photo's height. */
@media (min-width:621px){
.why-list{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px}
.why-i,.why-i:nth-child(even){padding:22px 22px 22px 0;border-left:0}
.why-i:not(:nth-child(3n+1)){padding-left:22px;border-left:1px solid var(--border-on-light)}
.why-t{margin-top:10px}
}
@media (min-width:621px){
.why-big{font-size:clamp(26px,2.3vw,32px)}
.why-d{font-size:14px}
}
/* the photo now stretches to the content column instead of a sticky 4:5 crop, so the panel reads as one block */
@media (min-width:901px){
.why-grid{align-items:stretch}
.why-photo{position:relative;top:auto;aspect-ratio:auto;height:100%;min-height:520px}
}
@media (min-width:621px){.why-big{font-size:clamp(24px,2vw,28px);white-space:nowrap}}
@media (min-width:901px){.sec.why{padding-block:64px}.why .row-gap{margin-top:24px!important}}
@media (max-width:1180px){.why-big{white-space:normal}}
/* Who we work with: real client logos, all rendered at one height and one tone (white) so mixed colour logos sit evenly on charcoal */
.clients .logo-tile{width:auto;padding:0 44px}
.clients .logo-tile img{display:block;height:40px;width:auto;max-width:none;filter:brightness(0) invert(1);opacity:.62;transition:opacity var(--dur-fast)}
.clients .logo-tile:hover img{opacity:1}
@media (max-width:620px){.clients .logo-tile{height:80px;padding:0 28px}.clients .logo-tile img{height:32px}}

/* 5X5 feedback round 2 (28/09/26) */
/* Text on dark backgrounds is white or green only. The DS reads --text-on-dark-muted for leads, card copy and hints on dark. */
:root{--text-on-dark-muted:var(--vie-white)}
.util,.util-tag,.util-links a,.mega-intro p,.mega-link,.drawer-items a,.hero-kicker,.hero-lead,.hero-sub,.st-d,.clients-head p,.g-score,
.faq-a p,.loc-blurb,.loc-dl dt,.ftr,.ftr-cols a,.ftr-legal,.ftr-links a,.ftr-5x5,.accred-tile,.sticky-txt span,.st.wide.on-light .st-d{color:var(--vie-white)}
.ftr-5x5-mark{background:var(--vie-white)}
.clients .logo-tile img{opacity:1}
.clients .logo-tile:hover img{opacity:.85}
/* DS components that hard-code silver on a dark surface (Toast) */
.hdr [style*="color: var(--vie-silver)"],main .deep [style*="color: var(--vie-silver)"],[class*="toast"] [style*="color: var(--vie-silver)"],#root>div[style*="position: fixed"] [style*="color: var(--vie-silver)"]{color:var(--vie-white)!important}
/* Insurance and finance service cards are all white now, including the wide Life & Income and Home Loans cards */
.st.wide.on-light,.st.wide.on-light:hover{background:var(--vie-white);color:var(--vie-charcoal)}
.st.wide.on-light:hover{box-shadow:var(--shadow-card)}
.st.wide.on-light .st-d{color:var(--vie-slate)}.st.wide.on-light .st-links{color:var(--vie-charcoal)}.st.wide.on-light .st-arr{color:var(--vie-charcoal)}
/* stop scroll anchoring reacting to the header resize (belt and braces with the JS hysteresis) */
.hdr{overflow-anchor:none}
/* the office panel is dark inside a light section, so its name inherited charcoal (invisible) */
.loc-body{color:var(--vie-white)}
/* Header bounce, root cause: the sticky header sat in the page flow and lost ~58px when it shrank, so the page shifted under
   the reader (and with one threshold, flipped back and forth). Now it is fixed and main reserves the full expanded height,
   so shrinking changes nothing in the flow. */
.hdr{position:fixed;left:0;right:0;top:0}
main{padding-top:88px}

/* 5X5 feedback round 3 (28/09/26) */
/* nav sub-pages (First Home Buyers under Home Loans etc.) sit indented under their parent service */
.mega-link.mega-sub{padding-left:16px;font-size:14px;position:relative}
.mega-link.mega-sub::before{content:"";position:absolute;left:2px;top:50%;width:8px;height:1px;background:var(--vie-green)}
.mega-link.mega-sub:hover{padding-left:22px}
.drawer-items a.drawer-sub{padding-left:16px;font-size:14px}
/* social: real icons, square buttons */
.ftr-social a{width:40px;height:40px;padding:0;justify-content:center}
.ftr-social svg{display:block}
/* accreditations: four logos, one height, white, evenly spaced */
.accred-row{display:flex;flex-wrap:wrap;align-items:center;gap:20px 44px}
.ftr-trust .accred-tile{width:auto;height:auto;border:0;padding:0}
.accred-tile img{display:block;height:48px;width:auto;filter:brightness(0) invert(1)}
.accred-tile img[src$="mfaa.png"]{height:44px}
/* sticky CTA on mobile: all three CTAs visible (call, quote, book) instead of book only; dismiss tucks into the corner */
@media (max-width:620px){
.sticky-in{padding-block:10px;padding-right:44px;position:relative}
.sticky-btns{display:grid;grid-template-columns:auto 1fr 1fr;gap:6px;width:100%}
.sticky-btns>a:first-child,.sticky-btns>a:nth-child(2){display:inline-flex!important}
.sticky-btns>a,.sticky-btns>button:not([aria-label="Dismiss"]){min-width:0;padding-inline:8px!important;font-size:10px!important;letter-spacing:.08em!important;justify-content:center;white-space:nowrap}
.sticky-btns>button[aria-label="Dismiss"]{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:30px!important;height:30px!important}
}
@media (max-width:620px){
.sticky-btns{grid-template-columns:1fr 1fr;grid-template-areas:"book book" "call quote"}
.sticky-btns>a:first-child{grid-area:call}.sticky-btns>a:nth-child(2){grid-area:quote}.sticky-btns>button:nth-child(3){grid-area:book}
.sticky-btns>a,.sticky-btns>button:not([aria-label="Dismiss"]){font-size:11px!important;height:40px}
}
@media (max-width:620px){
.sticky-btns{align-items:stretch}
.sticky-btns>a,.sticky-btns>button:not([aria-label="Dismiss"]){height:40px!important;min-height:40px;margin:0!important;box-sizing:border-box}
.ftr{padding-bottom:130px}
}

/* 5X5 feedback round 4 (28/09/26) */
/* Service cards: one stretched link to the service page; sub-page links sit above it and are separately clickable */
.st{cursor:pointer}
.st .st-main{color:inherit;text-decoration:none}
.st .st-main::after{content:"";position:absolute;inset:0;z-index:1}
.st .st-main:focus-visible{outline:none}.st:has(.st-main:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.st .st-links{position:relative;z-index:2}
.st .st-links a{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-weight:600;transition:color var(--dur-fast)}
.st .st-links a::before{content:"";width:6px;height:6px;background:var(--vie-green);flex:none}
.st .st-links a:hover{color:var(--vie-green-hover);text-decoration:underline;text-underline-offset:3px}
.st:not(.wide) .st-links{margin-top:6px;font-size:13px}
/* USP bar: the probe measures the one-line width; marquee mode scrolls instead of clipping */
.usp{position:relative;overflow:hidden}
.usp-probe{position:absolute;left:0;right:0;visibility:hidden;pointer-events:none;overflow:hidden}
.usp-marquee{mask-image:none}
.usp-marquee .marquee-track{gap:40px;padding-block:13px;padding-left:40px}
/* Locations: Directions is the same size as the Book button above it */
.loc-btns{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;justify-items:stretch}
.loc-btns>*{width:100%!important;justify-content:center;box-sizing:border-box}
.loc-dl dd a{color:var(--vie-white);font-weight:400;text-decoration:underline;text-decoration-color:var(--vie-green);text-underline-offset:3px}
.loc-dl dd a:hover{color:var(--vie-green)}
/* reviews link + addresses as links */
a.g-score{text-decoration:none}a.g-score:hover b{color:var(--vie-green)}
.ftr-contact .ftr-addr{font-size:14px;font-weight:400;color:var(--vie-white)}.ftr-contact .ftr-addr:hover{color:var(--vie-green)}
/* Footer sitemap: brand block becomes a row across the top so the six link columns get the full width and labels
   sit on one line (they were wrapping to 2 to 3 lines in ~110px columns) */
@media (min-width:1101px){
.ftr-main{grid-template-columns:minmax(0,1fr);gap:40px}
.ftr-brand{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px 56px}
.ftr-brand p{max-width:62ch}
.ftr-brand .ftr-social{grid-column:3;grid-row:1 / span 2;align-self:center}
.ftr-brand .ftr-contact{grid-column:2}
.ftr-brand>:first-child{grid-row:1 / span 2}
.ftr-cols{grid-template-columns:repeat(6,auto);justify-content:space-between;gap:28px}
.ftr-cols a{white-space:nowrap}
}
/* Hero, round 4: full-bleed photo + gradient, smaller two-line H1 */
.hero.hero-bleed{display:block;grid-template-columns:none}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(38,36,34,.94) 0%,rgba(38,36,34,.86) 32%,rgba(38,36,34,.45) 58%,rgba(38,36,34,0) 80%)}
.hero-bleed .hero-left{position:relative;z-index:1;height:100%;overflow:visible}
.hero-bleed .hero-copy{max-width:760px}
.hero-bleed .hero-h1{font-size:clamp(48px,min(6.2vw,10vh),88px);line-height:.98}
.hero-h1>span{display:block}
.hero-accent{color:var(--vie-green)}
@media (max-width:900px){
.hero.hero-bleed{height:auto;min-height:0}
.hero-bg{object-position:65% center}
.hero-shade{background:linear-gradient(180deg,rgba(38,36,34,.55) 0%,rgba(38,36,34,.88) 45%,rgba(38,36,34,.95) 100%)}
.hero-bleed .hero-copy{padding-block:56px 48px}
}

/* 5X5 feedback round 5 (28/09/26) */
/* mega menu feature: image fills a fixed-size card (identical in every dropdown), green label centred in a bar beneath */
.mega-feature{aspect-ratio:auto;height:340px;display:flex;flex-direction:column}
.mega-feature img{flex:1 1 auto;min-height:0;height:auto}
.mega-feature-txt{position:static;flex:none;justify-content:center;align-items:center;text-align:center;padding:16px 12px}
/* who we work with: centred eyebrow, no sub text */
.clients-head{justify-content:center;text-align:center}
/* footer: every sub-page listed, indented under its parent */
.ftr-cols a.ftr-sub{padding-left:12px;font-size:12px;position:relative}
.ftr-cols a.ftr-sub::before{content:"";position:absolute;left:0;top:50%;width:6px;height:1px;background:var(--vie-green)}
/* footer brand row: phone + address sit on top of the social icons */
@media (min-width:1101px){
.ftr-brand .ftr-contact{grid-column:3;grid-row:1;align-self:end;text-align:right;align-items:flex-end}
.ftr-brand .ftr-social{grid-column:3;grid-row:2;align-self:start;justify-content:flex-end}
.ftr-brand p{grid-column:2;grid-row:1 / span 2;align-self:center}
}
/* trust row: centred, with a divider between the Google badge and the accreditations */
.ftr-trust{grid-template-columns:auto auto;justify-content:center;column-gap:0}
.ftr-google{margin-right:48px}
.ftr-accred{padding-left:48px;border-left:1px solid var(--border-on-dark);align-items:center;text-align:center}
.accred-row{justify-content:center}
@media (max-width:620px){
.ftr-trust{grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:28px}
.ftr-google{margin-right:0;justify-self:center}
.ftr-accred{padding-left:0;border-left:0;padding-top:28px;border-top:1px solid var(--border-on-dark);width:100%}
}
@media (min-width:1101px){.ftr-cols a.ftr-sub{white-space:normal;max-width:220px}}
/* mega feature image area 260x300 (was 288) so the scaffolding shot shows both workers head to boots; images are
   pre-cropped to this 13:15 shape, so they are shown centred rather than at the old 20% offset */
.mega-feature{height:352px}
.mega-feature img{object-position:center center}

/* Hero composition, round 6: advisors cut-out in front of the full-colour device, client photo boxes around them.
   The office photo stays as the backdrop but is shaded deeper on the right so the composition reads cleanly. */
.hero-bleed .hero-shade{background:linear-gradient(90deg,rgba(38,36,34,.95) 0%,rgba(38,36,34,.9) 38%,rgba(38,36,34,.78) 62%,rgba(38,36,34,.72) 100%)}
.hero-art{position:absolute;z-index:1;top:0;bottom:0;right:max(var(--gutter),calc((100vw - var(--content-max))/2 + var(--gutter)));width:min(46%,600px);pointer-events:none}
.hero-art-device{position:absolute;left:50%;top:50%;height:112%;width:auto;transform:translate(-50%,-47%);opacity:.95;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
.hero-art-people{position:absolute;left:50%;bottom:0;height:92%;width:auto;transform:translateX(-50%);filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.hero-pic{position:absolute;margin:0;width:clamp(120px,11vw,170px);aspect-ratio:4/3;overflow:hidden;border-top:3px solid var(--vie-green);box-shadow:var(--shadow-lift);background:var(--vie-charcoal-tint)}
.hero-pic img{width:100%;height:100%;object-fit:cover;display:block}
.hero-pic-1{left:-4%;top:12%}
.hero-pic-2{right:-6%;top:34%}
.hero-pic-3{left:2%;bottom:14%}
@media (prefers-reduced-motion:no-preference){.hero-pic{animation:heroPic 900ms var(--ease-out) both}.hero-pic-2{animation-delay:120ms}.hero-pic-3{animation-delay:240ms}}
@keyframes heroPic{from{opacity:0;transform:translateY(12px)}}
@media (max-width:1100px){.hero-art{width:44%}.hero-pic-2{right:-2%}}
@media (max-width:900px){
.hero.hero-bleed{display:flex;flex-direction:column}
.hero-art{position:relative;right:auto;width:100%;height:440px;margin-top:-8px}
.hero-art-device{height:100%}
.hero-art-people{height:96%}
.hero-pic{width:128px}
.hero-pic-1{left:var(--gutter);top:6%}.hero-pic-2{right:var(--gutter);top:30%}.hero-pic-3{left:calc(var(--gutter) + 8px);bottom:10%}
}
.hero-bleed .hero-left{z-index:2}
@media (min-width:901px) and (max-width:1240px){
.hero-art{width:40%}
.hero-art-device{height:100%}
.hero-art-people{height:86%}
.hero-pic{width:clamp(104px,10vw,140px)}
.hero-pic-1{left:-2%;top:10%}.hero-pic-2{right:-4%;top:36%}.hero-pic-3{left:4%;bottom:10%}
.hero-bleed .hero-copy{max-width:58vw}
}
@media (max-width:900px){
.hero-pic{width:108px}
.hero-pic-1{left:var(--gutter);top:44%}
.hero-pic-2{right:var(--gutter);top:64%}
.hero-pic-3{display:none}
}
@media (min-width:901px) and (max-width:1240px){.hero-pic-1{left:-8%;top:36%}.hero-pic-2{right:-6%;top:52%}.hero-pic-3{left:0;bottom:6%}}

/* Hero composition, round 7: smaller so the device is seen in full, load-in animation, floating photo cards,
   and a glossy light that sweeps along the device's strands on a loop */
.hero-art-logo{position:absolute;left:50%;top:50%;height:88%;aspect-ratio:902/1163;transform:translate(-50%,-50%)}
.hero-art-logo .hero-art-device{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;transform:none}
/* gloss: a soft white band masked to the logo's own shape, travelling diagonally down the strands */
.hero-art-gloss{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url(../assets/logo/vie-device.png) center/100% 100% no-repeat;mask:url(../assets/logo/vie-device.png) center/100% 100% no-repeat;
  background:linear-gradient(115deg,transparent 0%,transparent 40%,rgba(255,255,255,.0) 42%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 58%,transparent 60%,transparent 100%);
  background-size:100% 300%;background-position:0 100%;mix-blend-mode:screen;opacity:.9}
.hero-art-people{height:80%}
.hero-pic{animation:none}
.hero-pic-in{width:100%;height:100%}
.hero-pic-in img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:no-preference){
  .hero-art-logo{animation:heroLogoIn 1100ms var(--ease-out) both}
  .hero-art-people{animation:heroPeopleIn 1000ms 250ms var(--ease-out) both}
  .hero-pic{animation:heroPicIn 800ms var(--ease-out) both}
  .hero-pic-1{animation-delay:650ms}.hero-pic-2{animation-delay:800ms}.hero-pic-3{animation-delay:950ms}
  /* float runs on the inner box (its own transform), so it never fights the load-in on the figure */
  .hero-pic-1 .hero-pic-in{animation:heroFloatA 7s 1.5s ease-in-out infinite alternate}
  .hero-pic-2 .hero-pic-in{animation:heroFloatB 8.5s 1.7s ease-in-out infinite alternate}
  .hero-pic-3 .hero-pic-in{animation:heroFloatC 7.8s 1.9s ease-in-out infinite alternate}
  .hero-art-gloss{animation:heroGloss 5.5s 1.4s cubic-bezier(.45,0,.35,1) infinite}
}
@keyframes heroLogoIn{from{opacity:0;transform:translate(-50%,-46%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes heroPeopleIn{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes heroPicIn{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes heroFloatA{0%{transform:translate(0,0) rotate(-1.5deg)}50%{transform:translate(6px,-10px) rotate(.5deg)}100%{transform:translate(-4px,6px) rotate(-.5deg)}}
@keyframes heroFloatB{0%{transform:translate(0,0) rotate(1.5deg)}50%{transform:translate(-8px,8px) rotate(-.5deg)}100%{transform:translate(4px,-8px) rotate(1deg)}}
@keyframes heroFloatC{0%{transform:translate(0,0) rotate(-.5deg)}50%{transform:translate(8px,6px) rotate(1.2deg)}100%{transform:translate(-6px,-8px) rotate(-1deg)}}
@keyframes heroGloss{0%{background-position:0 100%}55%{background-position:0 0}100%{background-position:0 0}}
@media (min-width:901px) and (max-width:1240px){.hero-art-logo{height:80%}.hero-art-people{height:76%}}
@media (max-width:900px){.hero-art-logo{height:94%}.hero-art-people{height:90%}}
.hero-art-gloss{background:linear-gradient(115deg,transparent 0%,transparent 42%,rgba(255,255,255,0) 44%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 56%,transparent 58%,transparent 100%);background-size:100% 300%}
/* Float moves the whole card (border, shadow, image) and is gentler. It animates the individual translate/rotate
   properties on the figure, which compose with the load-in's transform instead of overriding it. */
@media (prefers-reduced-motion:no-preference){
  .hero-pic .hero-pic-in{animation:none!important;transform:none!important}
  .hero-pic-1{animation:heroPicIn 800ms 650ms var(--ease-out) both,heroDriftA 8s 1.5s ease-in-out infinite alternate}
  .hero-pic-2{animation:heroPicIn 800ms 800ms var(--ease-out) both,heroDriftB 9.5s 1.7s ease-in-out infinite alternate}
  .hero-pic-3{animation:heroPicIn 800ms 950ms var(--ease-out) both,heroDriftC 8.8s 1.9s ease-in-out infinite alternate}
}
@keyframes heroDriftA{0%{translate:0 0;rotate:-.6deg}50%{translate:3px -5px;rotate:.2deg}100%{translate:-2px 3px;rotate:-.3deg}}
@keyframes heroDriftB{0%{translate:0 0;rotate:.6deg}50%{translate:-4px 4px;rotate:-.2deg}100%{translate:2px -4px;rotate:.4deg}}
@keyframes heroDriftC{0%{translate:0 0;rotate:-.2deg}50%{translate:4px 3px;rotate:.5deg}100%{translate:-3px -4px;rotate:-.4deg}}
/* Gloss, round 9: the band is now a separate stripe that starts fully off the logo (left), sweeps across and ends
   fully off it (right), then waits off-logo until the loop restarts, so it never sits parked on the device.
   (The old version moved a background vertically while its band ran nearly vertical, so it never left the logo.) */
.hero-art-gloss{background:none!important;animation:none!important;overflow:hidden;opacity:1}
.hero-art-gloss::before{content:"";position:absolute;top:-50%;left:0;width:45%;height:200%;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-160%) rotate(20deg);opacity:0}
@media (prefers-reduced-motion:no-preference){.hero-art-gloss::before{animation:heroSheen 6s 1.4s cubic-bezier(.45,0,.35,1) infinite}}
@keyframes heroSheen{
  0%{transform:translateX(-160%) rotate(20deg);opacity:1}
  55%{transform:translateX(330%) rotate(20deg);opacity:1}
  56%,100%{transform:translateX(330%) rotate(20deg);opacity:0}}
/* about stamp count-up: fixed-width tabular digits so the stamp never resizes mid-count */
.count-up{display:inline-block;text-align:right;font-variant-numeric:tabular-nums}
/* the stamp's `.about-stamp span` label rule (15px caps) was also catching the count-up digits; restore the big figure */
.about-stamp b>span{font:inherit;letter-spacing:inherit;text-transform:none;line-height:inherit;padding:0;margin:0}
/* keyword H1: three controlled lines, sized so the longest ("& INSURANCE BROKERS") fits the copy column */
.hero-bleed .hero-h1.hero-h1-kw{font-size:clamp(34px,min(4.4vw,7.4vh),62px);line-height:1.02;letter-spacing:-.005em}
.hero-h1-kw>span{display:block;white-space:nowrap}
@media (max-width:420px){.hero-h1-kw>span{white-space:normal}}
/* keyword H1 fit: size to the space left of the advisors, and keep all photo cards off the headline's side */
.hero-bleed .hero-h1.hero-h1-kw{font-size:clamp(32px,3.75vw,50px)}
@media (min-width:901px){
  .hero-pic-1{left:auto;right:-7%;top:5%}
  .hero-pic-2{right:-9%;top:46%}
  .hero-pic-3{left:6%;bottom:9%}
}
@media (min-width:901px) and (max-width:1240px){
  .hero-pic-1{left:auto;right:-5%;top:4%}
  .hero-pic-2{right:-7%;top:50%}
  .hero-pic-3{left:10%;bottom:6%}
}
/* mobile: keep the three designed lines (no orphaned "BROKERS"/"BRISBANE") by scaling with the viewport */
@media (max-width:620px){.hero-bleed .hero-h1.hero-h1-kw{font-size:min(32px,6.5vw)}.hero-h1-kw>span{white-space:nowrap}}
.hero-kicker.hero-kicker-green{color:var(--vie-green)}
/* top-right card hovers over the logo's right edge. The logo is centred and its width is tied to the hero HEIGHT
   (88% tall x 902/1163 = 68.25% of height, so its half-width is 34.1cqh), so the card is anchored to that edge in
   container-height units and overlaps it by a fixed amount at every desktop width. */
.hero-art{container-type:size}
@media (min-width:1241px){.hero-pic-1{right:auto;left:calc(50% + 34.1cqh - 88px)}}
@media (min-width:901px) and (max-width:1240px){.hero-pic-1{right:auto;left:calc(50% + 31cqh - 72px)}}
@media (min-width:901px) and (max-width:1240px){.hero-pic-1{left:min(calc(50% + 31cqh - 72px),calc(100% + var(--gutter) - 16px - clamp(104px,10vw,140px)))}}
@media (min-width:1241px){.hero-pic-1{top:21%}}
@media (min-width:901px) and (max-width:1240px){.hero-pic-1{top:17%}}
@media (min-width:901px) and (max-width:1100px){.hero-pic-1{top:4%}}
/* nudged up and right (Wayde), still offset from the farm card below so their edges don't line up */
@media (min-width:1241px){.hero-pic-1{top:14%;left:calc(50% + 34.1cqh - 62px)}}
@media (min-width:1101px) and (max-width:1240px){.hero-pic-1{top:12%;left:min(calc(50% + 31cqh - 52px),calc(100% + var(--gutter) - 16px - clamp(104px,10vw,140px)))}}
/* Family and farm cards share one anchor (the logo's right edge, capped at the screen edge) so the family card always
   sits exactly 32px further left than the farm card below it: staggered, never inline, at any width. */
@media (min-width:1241px){
  .hero-pic-1{left:min(calc(50% + 34.1cqh - 62px),calc(100% + var(--gutter) - 16px - clamp(120px,11vw,170px) - 32px));right:auto}
  .hero-pic-2{left:min(calc(50% + 34.1cqh - 30px),calc(100% + var(--gutter) - 16px - clamp(120px,11vw,170px)));right:auto}
}
@media (min-width:1101px) and (max-width:1240px){
  .hero-pic-1{left:min(calc(50% + 31cqh - 52px),calc(100% + var(--gutter) - 16px - clamp(104px,10vw,140px) - 32px));right:auto}
  .hero-pic-2{left:min(calc(50% + 31cqh - 20px),calc(100% + var(--gutter) - 16px - clamp(104px,10vw,140px)));right:auto}
}
/* screen cap = the art box's real distance to the viewport edge (its right offset), not just the gutter */
.hero-art{--edge:max(var(--gutter),calc((100vw - var(--content-max))/2 + var(--gutter)))}
@media (min-width:1241px){
  .hero-pic-1{left:min(calc(50% + 34.1cqh - 62px),calc(100% + var(--edge) - 24px - clamp(120px,11vw,170px) - 32px))}
  .hero-pic-2{left:min(calc(50% + 34.1cqh - 30px),calc(100% + var(--edge) - 24px - clamp(120px,11vw,170px)))}
}
@media (min-width:1101px) and (max-width:1240px){
  .hero-pic-1{top:16%;left:min(calc(50% + 31cqh - 52px),calc(100% + var(--edge) - 24px - clamp(104px,10vw,140px) - 32px))}
  .hero-pic-2{left:min(calc(50% + 31cqh - 20px),calc(100% + var(--edge) - 24px - clamp(104px,10vw,140px)))}
}
@media (min-width:1101px) and (max-width:1240px){.hero-pic-1{top:9%}}
@media (min-width:901px) and (max-width:1100px){
  .hero-pic-1{top:4%;right:auto;left:min(calc(50% + 31cqh - 52px),calc(100% + var(--edge) - 24px - clamp(104px,10vw,140px) - 32px))}
  .hero-pic-2{right:auto;left:min(calc(50% + 31cqh - 20px),calc(100% + var(--edge) - 24px - clamp(104px,10vw,140px)))}
}
/* farm card nudged down and right (Wayde); family card unchanged, so the stagger widens */
@media (min-width:1241px){.hero-pic-2{top:53%;left:min(calc(50% + 34.1cqh - 4px),calc(100% + var(--edge) - 24px - clamp(120px,11vw,170px)))}}
@media (min-width:1101px) and (max-width:1240px){.hero-pic-2{top:56%;left:min(calc(50% + 31cqh + 4px),calc(100% + var(--edge) - 24px - clamp(104px,10vw,140px)))}}
@media (min-width:901px) and (max-width:1100px){.hero-pic-2{top:56%;left:min(calc(50% + 31cqh + 4px),calc(100% + var(--edge) - 24px - clamp(104px,10vw,140px)))}}

/* 5X5 28/09/26: empty image-slot captions inherit Open Sans rather than the widget's system-ui */
image-slot{font-family:var(--font-sans)}

/* 5X5 28/09/26 (Wayde): blog cards rounded and about 12% shorter (16:9 image, tighter body, excerpt clamped to 3 lines) */
.post{border-radius:var(--radius-lg);overflow:hidden}
.post-img{aspect-ratio:16/9}
.post-body{gap:10px;padding:20px 22px 22px}
.post-body p{margin:0 0 4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}

/* 5X5 28/09/26 (Wayde): Vie wordmark (Brand Guidelines p.7-8) sits behind the legal text. Tone-on-tone, spanning the
   content width, its top aligned with the first line of text and the rest cropped by the block's bottom edge.
   White legal text on the mark's charcoal tint is about 8.4:1. Bleeds 15% past the right edge on phones so V, I and E read, and centres vertically there. */
.ftr-legal{position:relative;overflow:hidden}
.ftr-legal>*:not(.ftr-wordmark){position:relative}
.ftr-wordmark{position:absolute;top:28px;left:var(--gutter);right:var(--gutter);pointer-events:none}
.ftr-wordmark svg{display:block;width:100%;height:auto;fill:var(--vie-charcoal-tint)}
@media (max-width:620px){.ftr-wordmark{right:auto;width:calc((100% - 2 * var(--gutter)) * 1.15);top:50%;transform:translateY(-50%)}} /* the legal block is tall on phones, so the mark sits mid-block */