/* =========================================================================
   G.I.M.S. Solution NV — v2 "Living Current"
   Layered on top of gims.css (van-livery palette, Archivo, curved geometry).
   Theme: green energy & nature. The logo leaves become the life of the page:
   cool air drifts out of the hero, current runs along the swooshes, leaves
   ride the breeze. Motion grammar:
     - touch  = spring (overshoot), short
     - reveal = long exponential ease-out, a different gesture per section
     - ambient = slow, low-contrast, never behind body text
   Everything here switches off under prefers-reduced-motion.
   ========================================================================= */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  --e-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --air:#a9e08f;
}

/* ---------- scroll progress: the van band, growing ---------- */
.v2-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:95;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--leaf) 0 72%,var(--lime) 72% 100%)}
@supports (animation-timeline: scroll()){
  .v2-progress{animation:v2grow linear both;animation-timeline:scroll(root)}
  @keyframes v2grow{to{transform:scaleX(1)}}
}

/* ---------- header: settles smaller once you scroll ---------- */
@media(min-width:981px){
  .nav{transition:height .5s var(--e-out)}
  header.solid .nav{height:64px}
  header.solid .logo-mark{transform:scale(.9)}
}
.logo-mark{transition:transform .6s var(--spring)}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.06)}
header.solid .logo:hover .logo-mark{transform:rotate(-8deg) scale(.96)}
.nav-links a.is-active::after{transform:scaleX(1)}
header.solid .nav-links a.is-active{color:var(--leaf-dk)}
.nav-links a::after{transition:transform .45s var(--e-out)}

/* language switch: a pill that slides to the active language */
.lang{position:relative;isolation:isolate}
.lang .lang-ind{position:absolute;top:3px;left:0;height:calc(100% - 6px);width:0;border-radius:var(--pill);z-index:-1;
  background:var(--leaf);transition:transform .55s var(--spring),width .55s var(--spring),background .3s}
header.solid .lang .lang-ind{background:var(--deep)}
html.v2 .lang button[aria-pressed="true"]{background:transparent}
.lang button{position:relative;transition:color .3s}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{position:relative;isolation:isolate;overflow:hidden;-webkit-tap-highlight-color:transparent;
  transition:transform .45s var(--spring),box-shadow .45s var(--e-out),background-color .25s,border-color .25s,color .25s}
.btn:active{transform:scale(.96)!important;transition-duration:.12s}

/* primary — the van-band green; a band of sunlight crosses it on hover */
.btn-primary::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 28%,rgba(255,255,240,.65) 47%,rgba(179,211,53,.55) 54%,transparent 72%);
  transform:translateX(-135%);transition:transform .95s var(--e-out)}
.btn-primary:hover::before{transform:translateX(135%)}
.btn-primary:hover{background:var(--leaf-br);transform:translateY(-3px);box-shadow:0 20px 34px -14px rgba(46,122,42,.85)}

/* energy pulse on the two calls that matter most */
.hero-cta .btn-primary,#areas .card .btn-primary{animation:v2pulse 3.2s var(--e-out) 2.4s infinite}
.hero-cta .btn-primary:hover,#areas .card .btn-primary:hover{animation:none}
@keyframes v2pulse{
  0%{box-shadow:0 12px 24px -12px rgba(46,122,42,.75),0 0 0 0 rgba(127,208,104,.55)}
  60%,100%{box-shadow:0 12px 24px -12px rgba(46,122,42,.75),0 0 0 16px rgba(127,208,104,0)}
}

/* ghost (on navy) — current runs around the edge */
.btn-ghost::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--a),transparent 0 60%,var(--leaf-lt) 78%,var(--lime) 88%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .3s}
.btn-ghost:hover{transform:translateY(-2px);border-color:transparent}
.btn-ghost:hover::after{opacity:1;animation:v2current 1.7s linear infinite}
@keyframes v2current{to{--a:360deg}}

/* outline (on paper) — leaf-soft fills in from the left */
.btn-outline::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--leaf-soft);
  clip-path:inset(0 100% 0 0 round 999px);transition:clip-path .6s var(--e-out)}
.btn-outline:hover::before{clip-path:inset(0 0 0 0 round 999px)}
.btn-outline:hover{transform:translateY(-2px)}

/* charging state while the quote form sends */
.btn.is-loading{cursor:progress;opacity:1!important;
  background-image:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.45) 50%,transparent 75%);
  background-size:220% 100%;animation:v2charge 1.1s linear infinite}
@keyframes v2charge{from{background-position:120% 0}to{background-position:-120% 0}}

/* tap ripple */
.v2-rip{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;background:currentColor;opacity:.25;
  transform:scale(0);animation:v2rip .7s var(--e-out) forwards}
@keyframes v2rip{to{transform:scale(1);opacity:0}}

/* =========================================================================
   HERO — cool air out, current along the swooshes, leaves on the breeze
   ========================================================================= */
.hero{isolation:isolate}
.v2-scene{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.v2-scene svg{position:absolute;inset:0;width:100%;height:100%}
.v2-aurora{position:absolute;inset:-20%;
  background:
    radial-gradient(38% 42% at 78% 22%,rgba(179,211,53,.17),transparent 70%),
    radial-gradient(40% 46% at 18% 78%,rgba(88,185,71,.16),transparent 70%),
    radial-gradient(30% 34% at 52% 48%,rgba(169,224,143,.07),transparent 70%);
  animation:v2aurora 22s ease-in-out infinite alternate}
@keyframes v2aurora{
  0%{transform:translate3d(0,0,0) rotate(0)}
  50%{transform:translate3d(-3%,2%,0) rotate(4deg)}
  100%{transform:translate3d(3%,-2%,0) rotate(-3deg)}
}
.v2-lay{transform:translate3d(calc(var(--px,0) * var(--dx,0px)),calc(var(--sy,0) * var(--dy,0px)),0);transition:transform .25s linear}
/* current: bright dashes running along the logo swooshes */
.v2-flow{fill:none;stroke-linecap:round;stroke-dasharray:90 1400;animation:v2flow var(--t,6s) linear var(--dl,0s) infinite}
.v2-flow.leaf{stroke:var(--leaf-br);stroke-width:2.5;opacity:.75}
.v2-flow.lime{stroke:var(--lime);stroke-width:2;opacity:.7}
@keyframes v2flow{from{stroke-dashoffset:1490}to{stroke-dashoffset:0}}
/* cool air: long sine ribbons sliding sideways, like the airflow from a split unit */
.v2-air{fill:none;stroke:var(--air);stroke-linecap:round;animation:v2air var(--t,14s) linear infinite}
@keyframes v2air{to{transform:translateX(-720px)}}
/* the sun, breathing */
.v2-sun{transform-box:fill-box;transform-origin:center;animation:v2breathe 8s ease-in-out infinite}
@keyframes v2breathe{50%{transform:scale(1.08);opacity:.8}}
/* leaves on the breeze (logo leaf shape) */
.v2-leaf{position:absolute;left:0;top:var(--y);width:var(--z,18px);height:var(--z,18px);opacity:0;z-index:1;pointer-events:none;
  animation:v2drift var(--t,16s) linear var(--dl,0s) infinite}
.v2-leaf svg{width:100%;height:100%;display:block;animation:v2flutter 1.9s ease-in-out infinite alternate}
@keyframes v2drift{
  0%{transform:translate(-50px,0) rotate(0);opacity:0}
  8%{opacity:.9}
  50%{transform:translate(52vw,70px) rotate(250deg)}
  92%{opacity:.75}
  100%{transform:translate(108vw,150px) rotate(520deg);opacity:0}
}
@keyframes v2flutter{to{transform:rotateX(58deg) rotateZ(16deg)}}

/* hero entrance (runs as the leaf-turn sheets leave) */
html.v2 .hero .v2w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
html.v2 .hero .v2w>span{display:inline-block;transform:translateY(112%) rotate(5deg);transform-origin:0 100%;
  transition:transform 1.15s var(--e-out) calc(var(--i) * 70ms + 80ms)}
html.v2 .hero.go .v2w>span{transform:none}
/* the lime underline is drawn after the words land */
html.v2 .hero h1 em{text-decoration:none;
  background:linear-gradient(var(--lime),var(--lime)) 0 92%/0 .085em no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size 1s var(--e-out) .85s}
html.v2 .hero.go h1 em{background-size:100% .085em}
html.v2 .hero .hero-tag,html.v2 .hero .lede,html.v2 .hero .hero-cta,html.v2 .hero .hero-trades li{
  opacity:0;transform:translateY(16px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
html.v2 .hero .hero-tag{transform:translateX(-18px);letter-spacing:.32em;transition:opacity .9s var(--e-out),transform .9s var(--e-out),letter-spacing 1.2s var(--e-out)}
html.v2 .hero.go .hero-tag{opacity:1;transform:none;letter-spacing:.19em}
html.v2 .hero.go .lede{opacity:1;transform:none;transition-delay:.5s}
html.v2 .hero.go .hero-cta{opacity:1;transform:none;transition-delay:.65s}
html.v2 .hero.go .hero-trades li{opacity:1;transform:none;transition-delay:calc(.8s + var(--i) * 80ms)}
.hero-trades li::before{transition:transform .5s var(--spring)}
html.v2 .hero.go .hero-trades li::before{animation:v2seed .7s var(--spring) calc(1s + var(--i) * 80ms) backwards}
@keyframes v2seed{from{transform:scale(0)}}
.hero-trades li:hover::before{transform:scale(1.5)}
/* photos: main frame opens like a leaf unfurling, inset springs in */
html.v2 .hero-photos .main{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--e-out) .25s,transform .6s var(--e-out)}
html.v2 .hero-photos .main img{transform:scale(1.18);transition:transform 1.8s var(--e-out) .25s}
html.v2 .hero.go .hero-photos .main{clip-path:inset(0 0 0 0)}
html.v2 .hero.go .hero-photos .main img{transform:none}
html.v2 .hero-photos .inset{opacity:0;transform:translateY(40px) scale(.85) rotate(4deg);transition:opacity .8s var(--e-out) .9s,transform 1s var(--spring) .9s}
html.v2 .hero.go .hero-photos .inset{opacity:1;transform:none}
html.v2 .hero-photos figcaption{opacity:0;transform:translateY(-12px);transition:opacity .6s var(--e-out) 1.2s,transform .7s var(--spring) 1.2s}
html.v2 .hero.go .hero-photos figcaption{opacity:1;transform:none}
html.v2 .hero-photos .note{opacity:0;transition:opacity .9s var(--e-out) 1.35s}
html.v2 .hero.go .hero-photos .note{opacity:1}
/* pointer depth on the photo stack */
.hero-photos{perspective:1200px}
.hero-photos .main{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--e-out)}
.hero-photos .inset{translate:calc(var(--px,0) * -14px) calc(var(--py,0) * -10px)}

/* =========================================================================
   VAN BAND — current runs through the dots, the lime seam draws itself
   ========================================================================= */
.vanband li::before{animation:v2dot 2.8s ease-in-out infinite;animation-delay:calc(var(--i,0) * .35s)}
@keyframes v2dot{0%,70%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(38,50,65,0)}35%{transform:scale(1.6);box-shadow:0 0 0 5px rgba(38,50,65,.12)}}
.vanband .vb-contact a{border-bottom:0;background:linear-gradient(var(--deep),var(--deep)) 0 100%/0 2px no-repeat;
  transition:background-size .5s var(--e-out)}
.vanband .vb-contact a:hover{background-size:100% 2px}
.vanband .vb-contact a svg{transition:transform .5s var(--spring)}
.vanband .vb-contact a:hover svg{transform:rotate(-12deg) scale(1.15)}
html.v2 .vb-bot .line{stroke-dasharray:1600;stroke-dashoffset:1600;transition:stroke-dashoffset 2.2s var(--e-out)}
html.v2 .vanband.on .vb-bot .line{stroke-dashoffset:0}

/* =========================================================================
   REVEALS — one gesture per section, replacing the generic fade-up
   ========================================================================= */
html.v2 .rv{opacity:0;transform:none;transition:none}
html.v2 .rv.in{opacity:1;animation:v2rise .95s var(--e-out) var(--d,0ms) backwards}
@keyframes v2rise{from{opacity:0;transform:translateY(26px)}}
/* section headings: words rise out of a mask */
.v2h{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.v2h>span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--e-out) calc(var(--i) * 45ms + var(--d,0ms))}
.rv.in .v2h>span{transform:none}
html.v2 .sec-head.rv.in,html.v2 .rv.in:has(> h2){animation-name:v2fade}
@keyframes v2fade{from{opacity:0}}

/* services: cards sprout from below, out of focus */
html.v2 .svc-grid > .card.rv.in{animation-name:v2sprout;animation-duration:1s}
@keyframes v2sprout{from{opacity:0;transform:translateY(36px) scale(.94);filter:blur(6px)}}
/* mosaic: tiles unfurl from the bottom edge, photo settles in */
html.v2 .mosaic .tile.rv.in{animation-name:v2unfurl;animation-duration:1.15s}
@keyframes v2unfurl{from{clip-path:inset(100% 0 0 0);opacity:1}to{clip-path:inset(0 0 0 0)}}
html.v2 .mosaic .tile.rv.in img{animation:v2settle 1.6s var(--e-out) var(--d,0ms) backwards}
@keyframes v2settle{from{transform:scale(1.3)}}
/* projects: lift up and tip forward */
html.v2 .proj.rv.in{animation-name:v2tip}
@keyframes v2tip{from{opacity:0;transform:perspective(900px) translateY(40px) rotateX(14deg)}}
/* quote + contact: slide in from opposite sides */
html.v2 .q-grid > .rv.in:first-child{animation-name:v2left}
html.v2 form.qf.rv.in{animation-name:v2right;animation-duration:1.1s}
@keyframes v2left{from{opacity:0;transform:translateX(-40px)}}
@keyframes v2right{from{opacity:0;transform:translateX(50px) rotate(1.5deg)}}

/* =========================================================================
   SERVICES — tilt, glare, living icons
   ========================================================================= */
.svc-grid > .card,.proj{position:relative;
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .55s var(--e-out),box-shadow .5s var(--e-out),border-color .3s}
.svc-grid > .card:hover,.proj:hover{--ty:-6px;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty))}
.svc-grid > .card::after,.proj::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(179,211,53,.16),transparent 45%);transition:opacity .35s;z-index:3}
.svc-grid > .card:hover::after,.proj:hover::after{opacity:1}
.card .ico{transition:transform .6s var(--spring),box-shadow .4s}
.card:hover .ico{transform:rotate(-8deg) scale(1.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3),0 10px 22px -10px var(--acc)}
.card .ico svg .b{transition:opacity .4s}
.card:hover .ico svg .b{opacity:.75}
.card ul li::before{transition:transform .45s var(--spring)}
.card:hover ul li::before{transform:scale(1.35)}
.card:hover ul li:nth-child(2)::before{transition-delay:.05s}
.card:hover ul li:nth-child(3)::before{transition-delay:.1s}
.card:hover ul li:nth-child(4)::before{transition-delay:.15s}
.svc-grid .card h3{background:linear-gradient(var(--acc),var(--acc)) 0 100%/0 2px no-repeat;padding-bottom:3px;display:inline;
  transition:background-size .7s var(--e-out)}
.svc-grid .card:hover h3{background-size:100% 2px}
.svc-grid .card h3 + p{margin-top:9px}
/* the specialty card keeps a slow ring of current going round it */
.card.featured::before{content:'';position:absolute;inset:-1.5px;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--a),transparent 0 55%,var(--lime) 75%,var(--leaf) 85%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:v2current 6s linear infinite}
.card.featured .tag{animation:v2tag 4s ease-in-out infinite}
@keyframes v2tag{0%,100%{transform:none}50%{transform:translateY(-2px)}}

/* =========================================================================
   ON SITE — photo mosaic
   ========================================================================= */
.mosaic .tile img{transition:transform 1.1s var(--e-out),filter .6s}
.mosaic a.tile:hover img{transform:scale(1.08)}
.mosaic a.tile:not(.ba-tile):hover img{filter:saturate(1.15)}
.mosaic figcaption{transition:padding .5s var(--e-out)}
.mosaic a.tile:hover figcaption{padding-bottom:20px}
.mosaic figcaption .k{transition:transform .5s var(--spring)}
.mosaic a.tile:hover figcaption .k{transform:translateY(-3px) rotate(-2deg)}
/* before & after: hover leans into the "after" half */
.mosaic .ba-tile{transition:grid-template-columns .8s var(--e-out)}
.mosaic .ba-tile:hover{grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr)}
.mosaic .ba-tile:hover img{transform:none}
.mosaic .ba-tag{transition:transform .5s var(--spring)}
.mosaic .ba-tile:hover .ba-tag-after{transform:scale(1.12)}

/* =========================================================================
   PROCESS — power runs from step to step
   ========================================================================= */
html.v2 .step::before{transform:scale(0);transition:transform .7s var(--spring) var(--d,0ms),background .5s var(--d,0ms),color .5s var(--d,0ms)}
html.v2 .step.in::before{transform:none;background:var(--leaf);color:var(--deep)}
html.v2 .step::after{border-top-style:solid;border-top-color:var(--leaf);clip-path:inset(0 100% 0 0);
  transition:clip-path 1s var(--e-out) calc(var(--d,0ms) + 250ms)}
html.v2 .step.in::after{clip-path:inset(0 0 0 0)}
.step h3{transition:color .3s}
.step:hover h3{color:var(--leaf-dk)}
.step:hover::before{transform:scale(1.12) rotate(-6deg)!important;transition-delay:0s!important}

/* =========================================================================
   PROJECTS
   ========================================================================= */
.proj-top.photo span{transition:transform .5s var(--spring)}
.proj:hover .proj-top.photo span{transform:translateY(-2px) rotate(-2deg)}
.proj-meta b{font-variant-numeric:tabular-nums}
.proj-top.photo img{transition:transform 1s var(--e-out)}
.proj:hover .proj-top.photo img{transform:scale(1.08)}

/* =========================================================================
   COVERAGE — the place names arrive like a wave across the island
   ========================================================================= */
html.v2 .areas span{opacity:0;transform:translateY(12px) scale(.9)}
html.v2 .rv.in .areas span{opacity:1;transform:none;
  transition:opacity .6s var(--e-out) calc(var(--i) * 40ms + 200ms),transform .6s var(--spring) calc(var(--i) * 40ms + 200ms),
             border-color .2s,color .2s,background .2s}
html.v2 .rv.in .areas span:hover{transform:translateY(-3px);transition-delay:0s}
.areas span{display:inline-flex;align-items:center;gap:0}
.areas span::before{content:'';width:0;height:7px;border-radius:50%;background:var(--leaf);transition:width .35s var(--spring),margin .35s var(--spring)}
.areas span:hover::before{width:7px;margin-right:7px}

/* =========================================================================
   QUOTE FORM
   ========================================================================= */
.field label{transition:color .25s,transform .35s var(--spring);transform-origin:0 50%}
.field:focus-within label{color:var(--leaf-dk);transform:translateX(3px)}
.field input,.field select,.field textarea{transition:border-color .25s,box-shadow .45s var(--e-out),background .25s}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 5px var(--leaf-soft),0 10px 22px -16px rgba(46,122,42,.6)}
.form-msg.ok,.form-msg.err{animation:v2pop .6s var(--spring)}
.form-msg.err{animation:v2shake .45s}
@keyframes v2pop{from{opacity:0;transform:translateY(8px) scale(.97)}}
@keyframes v2shake{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
html.v2 .ci{opacity:0;transform:translateX(-18px)}
html.v2 .rv.in .ci{opacity:1;transform:none;transition:opacity .7s var(--e-out) calc(var(--i) * 90ms + 250ms),transform .7s var(--e-out) calc(var(--i) * 90ms + 250ms)}
.ci .ico{transition:transform .55s var(--spring),background .3s,border-color .3s}
.ci:hover .ico{transform:rotate(-10deg) scale(1.1);background:var(--leaf-soft);border-color:var(--leaf)}

/* =========================================================================
   FOOTER
   ========================================================================= */
footer ul a{background:linear-gradient(var(--leaf-lt),var(--leaf-lt)) 0 100%/0 1px no-repeat;transition:background-size .5s var(--e-out),color .25s}
footer ul a:hover{background-size:100% 1px}

/* =========================================================================
   GALLERY
   ========================================================================= */
.filters{position:relative;isolation:isolate}
.filters button{position:relative;overflow:hidden;transition:color .3s,border-color .3s,background-color .3s,transform .45s var(--spring)}
.filters button:hover{transform:translateY(-2px)}
.filters button[aria-pressed="true"]{transform:none}
.shot{transition:transform .55s var(--e-out),box-shadow .5s var(--e-out),border-color .3s}
html.v2 .shot.v2-in{animation:v2sprout .85s var(--e-out) var(--d,0ms) backwards}
.lb.open{animation:v2fade .35s var(--e-out)}
.lb.open .lb-fig{animation:v2zoom .55s var(--spring)}
@keyframes v2zoom{from{opacity:0;transform:scale(.94) translateY(16px)}}
.lb-btn,.lb-close{transition:background .2s,border-color .2s,color .2s,transform .45s var(--spring)}
.lb-btn:hover{transform:translateY(-50%) scale(1.1)}
.lb-close:hover{transform:rotate(90deg)}

/* =========================================================================
   REDUCED MOTION — everything visible, nothing moving
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .v2-scene .v2-air,.v2-scene .v2-flow,.v2-leaf,.v2-aurora,.v2-sun{animation:none!important}
  .v2-leaf,.v2-flow{display:none}
  html.v2 .rv,html.v2 .ci,html.v2 .areas span,
  html.v2 .hero .hero-tag,html.v2 .hero .lede,html.v2 .hero .hero-cta,html.v2 .hero .hero-trades li,
  html.v2 .hero-photos .inset,html.v2 .hero-photos figcaption,html.v2 .hero-photos .note{opacity:1!important;transform:none!important}
  html.v2 .hero-photos .main{clip-path:none!important}
  html.v2 .hero .v2w>span,.v2h>span,html.v2 .step::before{transform:none!important}
  html.v2 .step::after{clip-path:none!important}
  html.v2 .hero h1 em{background-size:100% .085em}
  html.v2 .vb-bot .line{stroke-dashoffset:0}
}

/* ripple containment for the small toggles */
.lang button,.filters button{overflow:hidden;isolation:isolate}