/* ==========================================================================
   Web Ventures — motion layer + bespoke widget styles
   Behaviour and structure only. Colour and type come from the Elementor kit
   globals and the widget controls, so the site stays editable.
   ========================================================================== */

/* ---------------------------------------------------------------- reveal */
.wv-js [data-ui-animate]{opacity:0}
/* horizontal reveals park off-axis before firing; clip stops that widening
   the document. `hidden` would break ScrollTrigger pinning. */
html{overflow-x:clip}

/* --------------------------------------------------------------- curtain */
.wv-curtain{position:fixed;inset:0;z-index:99990;background:var(--wv-ground,#161616);
  color:var(--wv-ink,#fff);display:flex;align-items:center;justify-content:center}
.wv-curtain-label{font-size:12px;letter-spacing:.34em;text-transform:uppercase;opacity:.8}
body.wv-loaded .wv-curtain{pointer-events:none}

/* --------------------------------------------------------- progress ring */
/* Back-to-top dial. It was a square with no fill, so on a dark page it read
   as absent; the reference draws a 44px circle that is always legible. */
.wv-progress{position:fixed;right:30px;bottom:30px;width:44px;height:44px;z-index:9000;
  padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  color:var(--wv-accent,#7CD4FD);
  opacity:0;transform:translateY(12px);
  transition:opacity .35s ease,transform .35s ease,background .35s ease}
.wv-progress:hover{background:rgba(255,255,255,.12)}
.wv-progress.is-visible{opacity:1;transform:none}
.wv-progress svg{width:100%;height:100%;transform:rotate(-90deg)}
.wv-progress circle{fill:none;stroke-width:2}
.wv-progress .wv-progress-track{stroke:currentColor;opacity:.22}
.wv-progress .wv-progress-path{stroke:currentColor}
.wv-progress-arrow{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:14px;line-height:1;color:#fff}
@media (max-width:640px){.wv-progress{display:none}}

/* ---------------------------------------------------------------- cursor */
.wv-cursor{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;
  background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:99991;
  transition:width .3s ease,height .3s ease,opacity .3s ease}
.wv-cursor.is-grown{width:64px;height:64px;opacity:.35}
@media (max-width:1024px){.wv-cursor{display:none}}

/* ----------------------------------------------------------- rolling text */
.wv-rolling{display:inline-flex;flex-direction:column;overflow:hidden;height:1em;line-height:1em;vertical-align:bottom}
.wv-rolling-block{display:block;white-space:pre}
.wv-rolling-letter{display:inline-block;transition:transform .5s cubic-bezier(.76,0,.24,1)}
a:hover .wv-rolling .wv-rolling-letter,.wv-rolling:hover .wv-rolling-letter{transform:translateY(-100%)}

/* -------------------------------------------------------------- magnetic */
.wv-magnetic-inner{transition:transform .35s cubic-bezier(.2,.8,.2,1)}

/* ================================================================ MARQUEE */
.wv-marquee{overflow:hidden;display:flex;width:100%}
.wv-marquee-track{display:flex;flex:0 0 auto;align-items:center;will-change:transform}
.wv-marquee-track>span{flex:0 0 auto;display:inline-flex;align-items:center}
.wv-marquee.is-ltr .wv-marquee-track{animation:wv-marq-rtl var(--wv-marq-speed,42s) linear infinite}
.wv-marquee.is-rtl .wv-marquee-track{animation:wv-marq-ltr var(--wv-marq-speed,42s) linear infinite}
.wv-marquee.pause-hover:hover .wv-marquee-track{animation-play-state:paused}
@keyframes wv-marq-rtl{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
@keyframes wv-marq-ltr{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(0,0,0)}}
.wv-marquee-item{display:inline-flex;align-items:center;margin:0;
  gap:var(--wv-marq-gap,26px);padding-right:var(--wv-marq-gap,26px)}
.wv-marquee-sep{opacity:.55}
.wv-marquee.is-stroke .wv-marquee-item{color:transparent;-webkit-text-stroke:1px var(--wv-stroke,#fff)}

/* ====================================================== PORTFOLIO TRACK
   Panels are a max-content flex row that GSAP drags sideways while the stage
   is pinned. Each panel is inset rather than gapped, so the outer edge of the
   first card sits half a gutter from the viewport edge, as on the reference. */
.wv-track-stage{position:relative;overflow:hidden}
.wv-track{display:flex;flex-wrap:nowrap;width:max-content;will-change:transform;
  --wv-panel-h:56vh;--wv-panel-min:400px;--wv-panel-max:560px}
.wv-track-item{flex:0 0 auto;position:relative;display:block}
.wv-track-media{position:relative;overflow:hidden;background:rgba(255,255,255,.04);
  height:clamp(var(--wv-panel-min),var(--wv-panel-h),var(--wv-panel-max))}
.wv-track-media img,.wv-track-media video{width:100%;height:100%;object-fit:cover;
  object-position:center;display:block;transition:transform 1.2s cubic-bezier(.76,0,.24,1)}
.wv-track-item:hover .wv-track-media img,
.wv-track-item:hover .wv-track-media video{transform:scale(1.05)}

/* the label + tag cluster sits in the card's bottom-left corner */
.wv-track-cont{position:absolute;bottom:30px;left:30px;z-index:3}
.wv-track-tags{overflow:hidden;margin-bottom:16px}
.wv-track-tag{width:max-content;display:block;padding:12px 20px;background:#fff;color:#0f0f0f;
  border-radius:10px;margin:5px 0;font-size:14px;text-transform:uppercase;line-height:1}
/* tags rise into view one after another on hover */
.wv-track-item .wv-track-tag{transform:translateY(50px);opacity:0;transition:all .4s}
.wv-track-item:hover .wv-track-tag{opacity:1;transform:translateY(0)}
.wv-track-item:hover .wv-track-tag:nth-of-type(2){transition-delay:.1s}
.wv-track-item:hover .wv-track-tag:nth-of-type(3){transition-delay:.2s}
.wv-track-item:hover .wv-track-tag:nth-of-type(4){transition-delay:.3s}

.wv-track-label{display:inline-flex;align-items:center;padding:7px 7px 7px 22px;
  text-transform:uppercase;font-size:16px;font-weight:500;line-height:1;
  background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px)}
.wv-track-label-text{white-space:nowrap}
.wv-track-arrow{width:38px;height:38px;flex:0 0 38px;margin-left:15px;display:grid;
  place-items:center;position:relative;overflow:hidden;
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.14)}
/* two stacked arrows: the incoming one drops in as the outgoing one leaves */
.wv-track-arrows{display:grid;place-items:center;width:16px;height:16px}
.wv-track-arrows svg{width:16px;height:16px;grid-area:1/1;
  transition:transform .45s cubic-bezier(.76,0,.24,1)}
.wv-track-arrows svg:first-child{transform:translateY(-40px)}
.wv-track-item:hover .wv-track-arrows svg:first-child{transform:translateY(0)}
.wv-track-item:hover .wv-track-arrows svg:last-child{transform:translateY(40px)}

/* the closing card */
.wv-track-end-box{display:flex;align-items:center;justify-content:center;text-align:center;
  height:clamp(var(--wv-panel-min),var(--wv-panel-h),var(--wv-panel-max));
  font-size:clamp(26px,2.9vw,46px);text-transform:uppercase;letter-spacing:-.02em;font-weight:500}

/* The reference still pins the track at 1024 with full-width panels; it only
   becomes a wrapped grid at 768, and a single column on phones. */
@media (max-width:768px){
  .wv-track{flex-wrap:wrap;width:auto;transform:none !important}
  .wv-track-item{width:50% !important;flex:0 0 50% !important;margin-bottom:30px}
  .wv-track-media,.wv-track-end-box{height:420px}
}
@media (max-width:576px){
  .wv-track-item{width:100% !important;flex:0 0 100% !important}
  .wv-track-media,.wv-track-end-box{height:360px}
}

/* ============================================================ AWARDS LIST
   Pill rows on a four-column grid. Hovering one row dims its siblings and
   floats a thumbnail that follows the cursor. */
.wv-awards{display:flex;flex-direction:column}
.wv-award{display:grid;grid-template-columns:120px 1fr 200px 40px;gap:24px;align-items:center;
  position:relative;border:1px solid currentColor;
  transition:opacity .4s cubic-bezier(.76,0,.24,1),background .4s cubic-bezier(.76,0,.24,1),border-color .4s}
.wv-award-year{line-height:1.2}
.wv-award-title{margin:0}
.wv-award-cat{line-height:1.2}
.wv-award-arrow{width:40px;height:40px;border-radius:50%;border:1px solid currentColor;
  display:grid;place-items:center;transition:all .4s cubic-bezier(.76,0,.24,1)}
.wv-award-arrow svg{width:15px;height:15px}
.wv-award:hover .wv-award-arrow{background:currentColor}
.wv-award:hover .wv-award-arrow svg{color:var(--wv-ground,#161616)}
/* Reference behaviour: a 210x250 plate that scales up from 0.4 as it fades
   in, tracking the pointer. The negative margin does the offsetting, so the
   pointer position is all that is written from script. */
.wv-award-thumb{
  position:absolute;top:0;left:0;width:210px;height:250px;object-fit:cover;
  margin:-150px 0 0 -150px;border-radius:10px;
  opacity:0;pointer-events:none;z-index:9;
  transform:translate(var(--wv-rx,0px),var(--wv-ry,0px)) scale(.4);
  transition:opacity .3s,transform .5s cubic-bezier(.215,.61,.355,1);
}
.wv-award:hover .wv-award-thumb{
  opacity:1;
  transform:translate(var(--wv-rx,0px),var(--wv-ry,0px)) scale(1);
}
@media (max-width:1024px){.wv-award-thumb{display:none}}
@media (max-width:820px){
  .wv-award{grid-template-columns:76px 1fr 40px;gap:14px}
  .wv-award-cat{display:none}
}

/* ========================================================= ROTATING BADGE */
.wv-badge{position:relative;display:inline-grid;place-items:center;vertical-align:top}
.wv-badge-ring{animation:wv-spin var(--wv-spin,22s) linear infinite}
.wv-badge-ring text{letter-spacing:.24em;text-transform:uppercase}
.wv-badge-center{position:absolute;inset:0;display:grid;place-items:center}
.wv-badge-center img{object-fit:contain}
@keyframes wv-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.wv-badge-ring{animation:none}}

/* =========================================================== TESTIMONIALS
   A sliding track rather than a cross-fade, so each portrait travels with its
   quote. Columns default to the reference's .78fr / 1.22fr split. */
.wv-testims{position:relative}
.wv-testim-viewport{position:relative;overflow:hidden}
.wv-testim-track{display:flex;transition:transform .8s cubic-bezier(.76,0,.24,1)}
.wv-testim-slide{flex:0 0 100%;display:grid;align-items:center;
  --wv-testim-photo:.78fr;--wv-testim-body:1.22fr;
  grid-template-columns:var(--wv-testim-photo) var(--wv-testim-body)}
.wv-testim-photo{overflow:hidden;aspect-ratio:4/5;background:rgba(255,255,255,.04)}
.wv-testim-photo img{width:100%;height:100%;object-fit:cover;display:block}
.wv-testim-mark{display:block;height:auto}
.wv-testim-quote{margin:0}
.wv-testim-who{display:flex;align-items:baseline;flex-wrap:wrap}
.wv-testim-name{font-weight:500}
.wv-testim-role{margin-left:10px}
.wv-testim-controls{display:flex;align-items:center;gap:14px}
.wv-testim-count{margin-left:auto;letter-spacing:.08em}
@media (max-width:900px){
  .wv-testim-slide{grid-template-columns:1fr;gap:26px}
}

/* round arrow buttons, shared by the testimonial and journal carousels */
.wv-nav-btn{display:grid;place-items:center;padding:0;border-radius:50%;background:none;
  border:1px solid currentColor;color:inherit;cursor:pointer;
  transition:background .35s cubic-bezier(.76,0,.24,1),color .35s cubic-bezier(.76,0,.24,1),border-color .35s}
.wv-nav-btn svg{width:17px;height:17px}
.wv-nav-btn[disabled]{opacity:.35;cursor:default}

/* ======================================================= JOURNAL CAROUSEL
   A clipped viewport with a transform-driven row, so the cards line up on the
   container edge exactly as they do on the reference. */
.wv-journal-viewport{overflow:hidden}
.wv-journal{display:flex;--wv-journal-per:3;--wv-journal-gap:30px;
  transition:transform .9s cubic-bezier(.76,0,.24,1);will-change:transform}
.wv-journal-item{display:block;
  flex:0 0 calc((100% - (var(--wv-journal-per) - 1) * var(--wv-journal-gap)) / var(--wv-journal-per))}
.wv-journal-media{overflow:hidden;background:rgba(255,255,255,.04);position:relative}
.wv-journal-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.76,0,.24,1)}
.wv-journal-item:hover .wv-journal-media img{transform:scale(1.05)}
.wv-journal-meta{display:flex;align-items:center;gap:10px;opacity:.7}
.wv-journal-meta span + span::before{content:"|";margin-right:10px;opacity:.7}
.wv-journal-title{margin:0;transition:color .35s}
.wv-journal-nav{display:flex;align-items:center;gap:10px}
.wv-journal-count{margin-left:16px;letter-spacing:.06em}
@media (max-width:1023px){.wv-journal{--wv-journal-per:2}}
@media (max-width:767px){.wv-journal{--wv-journal-per:1}}

/* ============================================================ SERVICE CARD
   An accent panel wipes up from beneath the card on hover and the text
   inverts, which is the reference's serv-style4 behaviour. */
.wv-serv{position:relative;overflow:hidden;z-index:2;display:flex;flex-direction:column;
  transition:color .4s cubic-bezier(.76,0,.24,1),border-color .4s cubic-bezier(.76,0,.24,1)}
.wv-serv::before{content:"";position:absolute;inset:0;z-index:-1;
  transform:translateY(101%);transition:transform .55s cubic-bezier(.76,0,.24,1)}
.wv-serv:hover::before{transform:translateY(0)}
.wv-serv-art img{height:100%;width:auto;object-fit:contain;display:block}
.wv-serv-num{display:block}
.wv-serv-title{margin:auto 0 18px;max-width:14ch}
.wv-serv .wv-serv-text{margin:0}
.wv-serv-text{transition:color .4s}
.wv-serv .wv-more{align-self:flex-start}

/* the small uppercase link with a round arrow chip */
.wv-more{display:inline-flex;align-items:center;font-size:14px;font-weight:500;
  text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;color:inherit}
.wv-more-chip{width:38px;height:38px;flex:0 0 38px;margin-left:15px;border-radius:50%;
  background:#fff;color:#161616;display:grid;place-items:center;position:relative;overflow:hidden;
  transition:background .4s cubic-bezier(.76,0,.24,1),color .4s cubic-bezier(.76,0,.24,1)}
.wv-more-arrows{display:grid;place-items:center;width:16px;height:16px}
.wv-more-arrows svg{width:16px;height:16px;grid-area:1/1;
  transition:transform .45s cubic-bezier(.76,0,.24,1)}
.wv-more-arrows svg:first-child{transform:translateY(-40px)}
.wv-more:hover .wv-more-arrows svg:first-child{transform:translateY(0)}
.wv-more:hover .wv-more-arrows svg:last-child{transform:translateY(40px)}
.wv-serv:hover .wv-more-chip{background:#111012;color:#fff}

/* =============================================================== STAT CARD */
.wv-stat{position:relative}
.wv-stat-value{margin:0}
.wv-stat-fix{display:inline}
.wv-stat-label{display:flex;align-items:center;text-transform:capitalize}
.wv-stat-label.has-dot::before{content:"";width:5px;height:5px;border-radius:50%;
  margin-right:15px;flex:0 0 5px;background:currentColor}

/* ============================================================ FEATURE STACK
   The wordmark pins itself mid-viewport while the scattered cards scroll past.
   Cards are placed by grid column, so the stagger is data, not magic numbers. */
.wv-stack{position:relative}
.wv-stack-head{text-align:center;position:relative;z-index:2}
.wv-stack .wv-stack-word{margin:0;line-height:1}
.wv-stack-row{display:grid;grid-template-columns:repeat(12,1fr);position:relative;z-index:4}
.wv-stack-cell{position:relative;z-index:4}
.wv-stack-card{position:relative;z-index:4;border:1px solid rgba(255,255,255,.05)}
.wv-stack-ico img{width:100%;height:auto;display:block}
.wv-stack-title{margin:0}
.wv-stack-card .wv-stack-text{margin:0}
@media (max-width:1024px){
  .wv-stack-row{grid-template-columns:1fr}
  .wv-stack-cell{grid-column:1 / -1 !important}
  .wv-stack-card{margin-top:0 !important;margin-bottom:24px !important}
  .wv-stack-title{margin-bottom:24px !important}
}

/* ================================================================ TEAM ROW */
.wv-team-row{display:grid;--wv-team-lead:.7fr;
  grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.wv-team-row.has-lead{grid-template-columns:var(--wv-team-lead)}
.wv-team-cell{overflow:hidden;aspect-ratio:3/4;background:rgba(255,255,255,.04)}
.wv-team-cell img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s cubic-bezier(.76,0,.24,1)}
.wv-team-cell:hover img{transform:scale(1.06)}
.wv-team-cell.is-deco{display:grid;place-items:center}
.wv-team-cell.is-deco svg{display:block}
@media (max-width:900px){
  .wv-team-row,.wv-team-row.has-lead{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .wv-team-cell.is-deco{display:none}
}

/* ============================================================ AVATAR STACK */
.wv-avatar-stack{display:flex;align-items:center}
.wv-avatars{display:flex}
.wv-avatars span{border-radius:50%;overflow:hidden;border:2px solid currentColor;display:block}
.wv-avatars span img{width:100%;height:100%;object-fit:cover;display:block}
.wv-avatar-count{line-height:1}

/* ============================================================== TAG LIST */
.wv-tags{display:flex;flex-wrap:wrap;gap:10px}
.wv-tag{display:inline-flex;align-items:center;padding:11px 22px;border:1px solid currentColor;
  font-size:14px;transition:background .35s ease,color .35s ease}
.wv-tag:hover{background:currentColor}
.wv-tag:hover span{color:var(--wv-ground,#161616)}

/* =========================================================== SKIN SWITCH */
.wv-skin{width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;
  background:none;color:inherit;cursor:pointer}
.wv-skin svg{width:20px;height:20px}
.wv-skin .wv-skin-sun{display:none}
body.wv-light .wv-skin .wv-skin-sun{display:block}
body.wv-light .wv-skin .wv-skin-moon{display:none}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .wv-marquee-track{animation:none !important}
  .wv-rolling-letter{transition:none}
  .wv-js [data-ui-animate]{opacity:1 !important;filter:none !important}
  .wv-curtain{display:none}
}

/* ==========================================================================
   SENSIBLE DEFAULTS
   A widget dropped in with no settings should already look right. These rules
   read the Elementor kit globals, so they follow the site palette rather than
   hard-coding anything — and Elementor's own control output is more specific
   (.elementor-<id> .elementor-element-<id> ...), so any panel setting wins.
   ========================================================================== */

/* type + colour come from the kit; fall back only if a kit is absent */
.wv-tag,
.wv-marquee-item,
.wv-track-label-text,
.wv-award-title,
.wv-award-year,
.wv-award-cat,
.wv-testim-quote,
.wv-testim-name,
.wv-testim-role,
.wv-journal-title,
.wv-journal-meta,
.wv-badge-ring text{
  font-family: var(--e-global-typography-primary-font-family, inherit);
}

/* --- tags ---------------------------------------------------------------- */
.wv-tags{ align-items:center }
.wv-tag{
  color: var(--e-global-color-text, #fff);
  border-color: rgba(255,255,255,.22);
  font-size:14px; line-height:1.2;
}
.wv-tag:hover{ background: var(--e-global-color-text, #fff); border-color: var(--e-global-color-text, #fff) }
.wv-tag:hover span{ color: var(--e-global-color-accent, #161616) }

/* --- marquee ------------------------------------------------------------- */
.wv-marquee-item{
  color: var(--e-global-color-text, #fff);
  font-size:clamp(22px,3vw,44px); line-height:1.15; letter-spacing:-.01em;
}
.wv-marquee-sep{ color: var(--e-global-color-primary, #7CD4FD); opacity:1 }

/* --- portfolio track -----------------------------------------------------
   The closing card is painted on the inner box, not the panel: the panel is
   750px wide and unrounded, so colouring it drew a second square card behind
   the rounded one. */
.wv-track-end-box{
  background: var(--e-global-color-primary, #7CD4FD);
  color: var(--e-global-color-accent, #111012);
}
.wv-track-end-text{ color:inherit }

/* --- awards -------------------------------------------------------------- */
.wv-award{ color: var(--e-global-color-text, #fff) }
.wv-award-title{ font-size:clamp(20px,2.2vw,34px); line-height:1.1; font-weight:500 }
.wv-award-year,.wv-award-cat{ color: var(--e-global-color-wvmuted, rgba(255,255,255,.62)) }
.wv-award-arrow{ border-color: rgba(255,255,255,.28) }

/* --- testimonials -------------------------------------------------------- */
.wv-testim-quote{
  color: var(--e-global-color-text, #fff);
  font-size:clamp(20px,2.4vw,38px); line-height:1.24; font-weight:400;
}
.wv-testim-name{ display:block; color: var(--e-global-color-text, #fff); font-weight:500 }
.wv-testim-role{ display:block; color: var(--e-global-color-wvmuted, rgba(255,255,255,.62)); font-size:14px }
.wv-testim-dot{ color: var(--e-global-color-text, #fff) }

/* --- journal ------------------------------------------------------------- */
.wv-journal-title{ color: var(--e-global-color-text, #fff); font-size:clamp(18px,1.6vw,24px); line-height:1.2; font-weight:500 }
.wv-journal-meta{ color: var(--e-global-color-wvmuted, rgba(255,255,255,.6)) }

/* --- rotating badge ------------------------------------------------------ */
.wv-badge-ring text{ fill: var(--e-global-color-text, #fff); font-size:12px }

/* --- skin switcher -------------------------------------------------------
   The theme styles bare <button> elements, so this needs matching specificity
   to reset appearance — otherwise the toggle inherits a theme button colour. */
/* The kit styles bare buttons as `.elementor-kit-<id> button` (0,2,1), which
   outranks a plain `button.wv-skin` (0,1,1) and would paint the toggle in the
   kit's button colour. Repeating the class lifts this to (0,3,1) so it wins on
   specificity rather than with !important. */
.elementor-widget-wv-skin-switcher button.wv-skin.wv-skin{
  background:transparent; border:0; box-shadow:none; -webkit-appearance:none; appearance:none;
  color: var(--e-global-color-text, #fff); line-height:1; padding:0;
}
.elementor-widget-wv-skin-switcher button.wv-skin.wv-skin:hover,
.elementor-widget-wv-skin-switcher button.wv-skin.wv-skin:focus{
  background:transparent; color: var(--e-global-color-primary, #7CD4FD);
}
/* same guard for the two other bare buttons we render */
.wv-testims button.wv-testim-dot.wv-testim-dot{ background:currentColor; padding:0; border:0 }
button.wv-progress.wv-progress{ padding:0; border:0 }
button.wv-progress{ -webkit-appearance:none; appearance:none; box-shadow:none }
button.wv-testim-dot{ -webkit-appearance:none; appearance:none; border-radius:0 }


/* ============================================================ ARROW BUTTON */
.wv-btn-wrap{display:flex}
.wv-btn{
  display:inline-flex; align-items:center; text-decoration:none;
  background:#fff; color:#111012; line-height:1;
  transition:background .35s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.wv-btn:hover{ transform:translateY(-2px) }
.wv-btn-label{
  font-family: var(--e-global-typography-primary-font-family, inherit);
  font-size:14px; letter-spacing:.02em; white-space:nowrap;
}
.wv-btn-chip{
  flex:0 0 auto; width:38px; height:38px; overflow:hidden;
  display:grid; place-items:center; background:#111012; color:#fff;
}
/* Two arrows sharing one cell: the incoming one waits above the chip and the
   outgoing one leaves below, so only ever one is in view. Stacking them in a
   column instead left both visible inside the taller chip. */
.wv-btn-arrows{ display:grid; place-items:center; width:16px; height:16px }
.wv-btn-arrows svg{
  display:block; width:16px; height:16px; grid-area:1/1;
  transition:transform .45s cubic-bezier(.76,0,.24,1);
}
.wv-btn-arrows svg:first-child{ transform:translateY(-40px) }
.wv-btn:hover .wv-btn-arrows svg:first-child{ transform:translateY(0) }
.wv-btn:hover .wv-btn-arrows svg:last-child{ transform:translateY(40px) }
@media (prefers-reduced-motion:reduce){
  .wv-btn-arrows svg{ transition:none }
  .wv-btn:hover{ transform:none }
}


/* ==========================================================================
   TEXT NORMALISATION
   The theme gives <p> default top/bottom margins, which stack on top of the
   spacing set in Elementor and push copy (and anything after it) off the
   intended baseline. Collapse the outer margins so container spacing is the
   single source of truth for vertical rhythm.
   ========================================================================== */
.elementor-widget-text-editor p:first-child{ margin-top:0 }
.elementor-widget-text-editor p:last-child{ margin-bottom:0 }
.elementor-widget-heading .elementor-heading-title{ margin:0 }

/* ============================================================== UTILITIES
   Small classes the Elementor widgets opt into from the panel, so a heading
   or a paragraph can pick up a house style without a bespoke widget. */

/* the dotted section label */
.wv-eyebrow .elementor-heading-title,
.wv-eyebrow{display:flex;align-items:center}
.wv-eyebrow .elementor-heading-title::before,
.wv-eyebrow.is-plain::before{content:"";width:5px;height:5px;border-radius:50%;
  margin-right:15px;flex:0 0 5px;background:currentColor}
.wv-eyebrow.is-center .elementor-heading-title{justify-content:center}

/* a light-weight opening word, as in "Meet our team." */
.wv-thin{font-weight:300}

/* the two floating shapes in the about band travel slower than the page */
.wv-shape{pointer-events:none;z-index:-1}
.wv-shape img{width:100%;height:auto;object-fit:contain}
@media (max-width:900px){.wv-shape{opacity:.45}}

/* a column that must keep its declared width while its siblings share the rest */
.wv-noshrink{flex-shrink:0}

/* ============================================================= SUBSCRIBE */
.wv-sub{display:flex;align-items:stretch}
.wv-sub-field{flex:1 1 auto;min-width:0;background:none;border:1px solid currentColor;
  color:inherit;font:inherit;outline-offset:2px}
.wv-sub-btn{display:inline-flex;align-items:center;flex:0 0 auto;border:0;cursor:pointer;
  transition:background .4s cubic-bezier(.76,0,.24,1)}
.wv-sub-label{white-space:nowrap}
.wv-sub-chip{display:grid;place-items:center;margin-left:15px;position:relative;overflow:hidden}
.wv-sub-arrows{display:grid;place-items:center;width:16px;height:16px}
.wv-sub-arrows svg{width:16px;height:16px;grid-area:1/1;
  transition:transform .45s cubic-bezier(.76,0,.24,1)}
.wv-sub-arrows svg:first-child{transform:translateY(-40px)}
.wv-sub-btn:hover .wv-sub-arrows svg:first-child{transform:translateY(0)}
.wv-sub-btn:hover .wv-sub-arrows svg:last-child{transform:translateY(40px)}
@media (max-width:600px){ .wv-sub{flex-direction:column} }

/* the dimmed opening word in a two-tone heading */
.wv-dim{opacity:.4}

/* the brand lockup dot */
.wv-logo-dot{display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--e-global-color-primary,#7CD4FD);margin-right:11px;vertical-align:middle}

/* ==========================================================================
   SMOOTH SCROLL PLUMBING
   Lenis needs these rules to work at all. Without them the browser keeps its
   own scroll-behavior:smooth, animating every position Lenis writes, so the
   page ignores the wheel and then lurches to catch up. It also needs the
   document height left to auto, or its scroll limit is short by a viewport.
   ========================================================================== */
html.lenis,
html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}
/* The kit stylesheet loads after this one and sets scroll-behavior:smooth on
   html, which animates every position Lenis writes. It has to be beaten. */
html:root{scroll-behavior:auto !important}

/* ==========================================================================
   MEDIA SIZING
   Elementor styles bare images with height:auto, which beats a single-class
   rule here — every framed image was therefore rendering at its intrinsic
   aspect instead of filling its frame (cropping badly, leaving dead space, or
   in the service cards spilling over the copy). Scoping through .wv-js on the
   root raises specificity enough to win without !important.
   ========================================================================== */
.wv-js .wv-serv .wv-serv-art{overflow:hidden}
/* max-width:none let the illustration's intrinsic width become the card's
   min-content, so the card could not shrink below ~330px and forced a
   horizontal scroll on small phones. It renders at ~106px wide, so capping it
   to the card changes nothing on desktop. */
.wv-js .wv-serv{min-width:0}
.wv-js .wv-serv .wv-serv-art img{height:100%;width:auto;max-width:100%;object-fit:contain}
.wv-js .wv-journal .wv-journal-media img{height:100%;width:100%;object-fit:cover}
.wv-js .wv-track .wv-track-media img,
.wv-js .wv-track .wv-track-media video{height:100%;width:100%;object-fit:cover}
.wv-js .wv-team-row .wv-team-cell img{height:100%;width:100%;object-fit:cover}
.wv-js .wv-testims .wv-testim-photo img{height:100%;width:100%;object-fit:cover}
.wv-js .wv-avatars span img{height:100%;width:100%;object-fit:cover}
.wv-js .wv-stack .wv-stack-ico img{width:100%;height:100%;object-fit:contain;object-position:left center}
.wv-js .wv-badge-center img{width:100%;height:100%;object-fit:contain}

/* ---------------------------------------------- feature stack copy colours */
.wv-stack-card.is-dark .wv-stack-text{color:rgba(255,255,255,.62)}
.wv-stack-card.is-light .wv-stack-text{color:#585858}
.wv-stack-card.is-accent .wv-stack-text{color:rgba(17,16,18,.7)}

/* ------------------------------------- the dimmed, underlined heading phrase */
.wv-dim-underline{
  opacity:.5;text-decoration:underline;text-underline-offset:.08em;
  text-decoration-thickness:from-font;
}

/* ==========================================================================
   HEADER CHROME
   The pieces of the reference header that Elementor's controls don't reach:
   the nav block's backdrop blur, the rounded nav items, and the hairline
   ring on the theme toggle.
   ========================================================================== */
.wv-js .elementor-location-header .wv-navblock{backdrop-filter:blur(12px)}
.wv-js .elementor-location-header .elementor-nav-menu a{border-radius:20px}
.wv-js .elementor-location-header .elementor-nav-menu a:hover{background:rgba(255,255,255,.08)}
.wv-js .elementor-location-header .wv-skin{
  border:0.8px solid rgba(255,255,255,.2);border-radius:50%;
}

/* ==========================================================================
   RADII AND CONTRAST FIXES
   The reference uses a different corner radius per component rather than one
   global value: 10px on block buttons, 5px on their arrow chips, 30px on
   cards and pills, 50% on round arrow buttons.
   ========================================================================== */

/* The hover tag chips are white; their label was inheriting the kit's muted
   link colour, so the chips read as empty white boxes. */
.wv-js .wv-track .wv-track-tag{color:#0f0f0f;border-radius:10px}

/* the translucent project label and its arrow chip */
.wv-js .wv-track .wv-track-label{border-radius:10px}
.wv-js .wv-track .wv-track-arrow{border-radius:5px}

/* ==========================================================================
   LABEL COLOUR INHERITANCE
   These labels are spans inside links, so they picked up the kit's link colour
   instead of their component's. On the service cards that meant a white label
   on the lime hover panel — invisible. Inheriting fixes every hover inversion.
   ========================================================================== */
.wv-js .wv-more,
.wv-js .wv-more-label,
.wv-js .wv-btn-label,
.wv-js .wv-track-label-text,
.wv-js .wv-sub-label,
.wv-js .wv-tag span{color:inherit}

/* the marquee separator, whatever mark it carries */
.wv-marquee-sep.is-shape{display:inline-flex;align-items:center;justify-content:center}
.wv-js .wv-marquee-sep.is-icon svg,
.wv-js .wv-marquee-sep.is-icon i{width:100%;height:100%;display:block;font-size:inherit}
.wv-js .wv-marquee-sep.is-sparkle svg{width:100%;height:100%;display:block}

/* the reference header's nav block carries a heavy backdrop blur */
.wv-js [data-elementor-type="header"] .e-con:has(> .elementor-widget-nav-menu){
  backdrop-filter:blur(96px);
}

/* The kit styles bare <button> elements: white background, square corners,
   #111012 text and 16px/24px padding. All four beat a single-class rule, which
   left the arrows flat, invisible (dark on dark) and pushed off-centre — the
   padding shrank a 50x48 button to a 2px-wide content box, so the 17px icon
   overflowed to one side. Reset all of it here. */
.wv-js .wv-testims .wv-nav-btn,
.wv-js .wv-journal-nav .wv-nav-btn{
  background:none;border-radius:50%;border-style:solid;border-width:1px;
  padding:0;color:inherit;line-height:1;
}
.wv-js .wv-testims .wv-nav-btn svg,
.wv-js .wv-journal-nav .wv-nav-btn svg{margin:0}

/* ==========================================================================
   CASCADE WINNERS
   Elementor zeroes the radius on every <img>, and the kit styles bare
   <button> as a white square. Both outrank a single-class rule, so the two
   pieces of floating chrome need to be restated more specifically.
   ========================================================================== */
.wv-js .wv-awards .wv-award-thumb{border-radius:10px}

.wv-js button.wv-progress.wv-progress{
  padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  /* the kit paints button text near-black, and the dial's ring is drawn with
     currentColor - so the progress arc came out invisible on the dark page */
  color:var(--e-global-color-primary,#7CD4FD);
}
.wv-js .wv-progress .wv-progress-track{stroke:rgba(255,255,255,.25)}
.wv-js .wv-progress .wv-progress-path{stroke:var(--e-global-color-primary,#7CD4FD)}
.wv-js .wv-progress .wv-progress-arrow{color:#fff}
.wv-js button.wv-progress.wv-progress:hover{background:rgba(255,255,255,.12)}

/* ==========================================================================
   EDITOR SAFETY
   Belt and braces for the Elementor canvas: even if the motion script has not
   run yet, revealed content must be visible so the page can be edited.
   ========================================================================== */
body.elementor-editor-active [data-ui-animate]{opacity:1 !important;filter:none !important}
body.elementor-editor-active .wv-curtain{display:none !important}

/* the marquee separator mark, sized from the panel */
.wv-js .wv-marquee-sep.is-shape svg{width:100%;height:100%;display:block}

/* the brand lockup must never break across lines in the header */
.wv-js [data-elementor-type="header"] .elementor-heading-title{white-space:nowrap}

/* The badge's circular label is laid out along a path and runs wider than the
   viewBox; SVG does not clip by default, so on phones it spilled past the
   viewport and dragged the document width out with it. Clip to the viewBox. */
.wv-js .wv-badge{max-width:100%;overflow:hidden}
.wv-js .wv-badge > svg{width:100%;height:100%;display:block;min-width:0;overflow:hidden}

/* The about band's floating shapes are decorative and deliberately sit outside
   the text column. On narrow screens the right-hand one reached past the
   viewport and stretched the document, so the band clips them. */
#about{overflow:hidden}
@media (max-width:900px){
  .wv-js .wv-shape{opacity:.45}
}

/* ==========================================================================
   Inner pages: intro, breadcrumbs, image band, listings, detail furniture.
   Everything here is scoped with .wv-js so it outranks the Elementor kit's
   single-class resets without resorting to !important.
   ========================================================================== */

/* --- page intro ---------------------------------------------------------- */
.wv-pintro{display:flex;flex-direction:column;gap:28px}
.wv-js .wv-pintro-eyebrow{
  display:inline-block;font-size:13px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--e-global-color-primary,#7CD4FD)}
.wv-js .wv-pintro-head{
  margin:0;line-height:1.02;letter-spacing:-.02em;font-weight:500;
  overflow-wrap:break-word}
.wv-js .wv-pintro-lead{margin:0;line-height:1.6;color:rgba(255,255,255,.62)}

/* --- breadcrumbs --------------------------------------------------------- */
.wv-js .wv-crumbs ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:0;padding:0;list-style:none}
.wv-js .wv-crumbs li{display:flex;align-items:center;gap:10px}
.wv-js .wv-crumbs{font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.wv-js .wv-crumbs a{color:inherit;text-decoration:none;transition:color .3s}
.wv-js .wv-crumbs a:hover{color:var(--e-global-color-primary,#7CD4FD)}
.wv-js .wv-crumbs [aria-current="page"]{color:#fff}
.wv-js .wv-crumbs-sep{font-style:normal;opacity:.4}

/* --- image band ---------------------------------------------------------- */
.wv-band{margin:0}
.wv-js .wv-band-frame{
  position:relative;overflow:hidden;width:100%;
  background:rgba(255,255,255,.04)}
.wv-js .wv-band-frame img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;will-change:transform}
.wv-js .wv-band-caption{
  margin:14px 0 0;font-size:13px;color:rgba(255,255,255,.5)}

/* --- project grid -------------------------------------------------------- */
.wv-pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px}
.wv-js .wv-pcard{min-width:0}
.wv-js .wv-pcard-link{
  display:flex;flex-direction:column;gap:22px;
  color:inherit;text-decoration:none}
.wv-js .wv-pcard-media{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:1.2;background:rgba(255,255,255,.04)}
.wv-js .wv-pcard-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.215,.61,.355,1)}
.wv-js .wv-pgrid.is-zoom .wv-pcard-link:hover .wv-pcard-media img{transform:scale(1.06)}
.wv-js .wv-pcard-body{display:flex;flex-direction:column;gap:8px}
.wv-js .wv-pcard-title{
  font-size:26px;font-weight:500;line-height:1.2;letter-spacing:-.01em;color:#fff;
  transition:color .3s}
.wv-js .wv-pcard-link:hover .wv-pcard-title{color:var(--e-global-color-primary,#7CD4FD)}
.wv-js .wv-pcard-meta{
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}

/* --- journal grid -------------------------------------------------------- */
.wv-jgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.wv-js .wv-jcard{min-width:0}
.wv-js .wv-jcard-link{
  display:flex;flex-direction:column;gap:18px;color:inherit;text-decoration:none}
.wv-js .wv-jcard-media{
  display:block;position:relative;overflow:hidden;border-radius:16px;
  aspect-ratio:1.05;background:rgba(255,255,255,.04)}
.wv-js .wv-jcard-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.215,.61,.355,1)}
.wv-js .wv-jcard-link:hover .wv-jcard-media img{transform:scale(1.05)}
.wv-js .wv-jcard-body{display:flex;flex-direction:column;gap:10px}
.wv-js .wv-jcard-meta{
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.45)}
.wv-js .wv-jcard-title{
  font-size:21px;font-weight:500;line-height:1.28;color:#fff;transition:color .3s}
.wv-js .wv-jcard-link:hover .wv-jcard-title{color:var(--e-global-color-primary,#7CD4FD)}
.wv-js .wv-jcard-text{font-size:15px;line-height:1.6;color:rgba(255,255,255,.6)}

/* --- project info table -------------------------------------------------- */
.wv-pinfo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin:0}
.wv-js .wv-pinfo-item{display:flex;flex-direction:column;gap:10px;min-width:0}
.wv-js .wv-pinfo.has-rule .wv-pinfo-item{
  border-top:1px solid rgba(255,255,255,.14);padding-top:18px}
.wv-js .wv-pinfo-label{
  margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.45)}
.wv-js .wv-pinfo-value{
  margin:0;font-size:17px;line-height:1.4;color:#fff;overflow-wrap:break-word}
.wv-js .wv-pinfo-value a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.wv-js .wv-pinfo-value a:hover{color:var(--e-global-color-primary,#7CD4FD)}

/* --- entry pager --------------------------------------------------------- */
.wv-pnav{
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  border-top:1px solid rgba(255,255,255,.14);padding-top:30px}
.wv-js .wv-pnav-side{
  display:flex;align-items:center;gap:18px;
  color:inherit;text-decoration:none;max-width:46%;min-width:0}
.wv-js .wv-pnav-side.is-empty{visibility:hidden}
.wv-js .wv-pnav-side.is-next{margin-left:auto;text-align:right}
.wv-js .wv-pnav-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.wv-js .wv-pnav-label{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.45)}
.wv-js .wv-pnav-title{
  font-size:20px;font-weight:500;line-height:1.25;color:#fff;
  overflow-wrap:break-word;transition:color .3s}
.wv-js .wv-pnav-side:hover .wv-pnav-title{color:var(--e-global-color-primary,#7CD4FD)}
.wv-js .wv-pnav-arrow{
  display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;
  border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  transition:background .35s,color .35s}
.wv-js .wv-pnav-arrow svg{width:18px;height:18px;display:block}
.wv-js .wv-pnav-arrow.is-back{transform:rotate(180deg)}
.wv-js .wv-pnav-side:hover .wv-pnav-arrow{
  background:var(--e-global-color-primary,#7CD4FD);color:var(--e-global-color-accent,#111012)}

/* an editor-only hint where a loop has nothing to show yet */
.wv-js .wv-empty,body.elementor-editor-active .wv-empty{
  margin:0;padding:22px 26px;border:1px dashed rgba(255,255,255,.25);
  border-radius:12px;color:rgba(255,255,255,.6);font-size:14px}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1024px){
  /* the stagger reads as broken once columns get narrow */
  .wv-js .wv-pgrid.is-masonry > *:nth-child(even){transform:none}
  .wv-js .wv-pinfo{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .wv-pintro{gap:20px}
  .wv-js .wv-pcard-title{font-size:22px}
  .wv-js .wv-pnav{flex-direction:column;align-items:flex-start;gap:26px}
  .wv-js .wv-pnav-side{max-width:100%;width:100%}
  .wv-js .wv-pnav-side.is-next{margin-left:0;text-align:left;flex-direction:row-reverse;justify-content:flex-end}
}
@media (max-width:576px){
  .wv-js .wv-pinfo{grid-template-columns:1fr}
  .wv-js .wv-pcard-link{gap:16px}
  .wv-js .wv-pnav-arrow{flex:0 0 40px;width:40px;height:40px}
}

/* ==========================================================================
   Elementor forms. Left unstyled they inherit the kit's white input and white
   button defaults, which on this dark page renders illegible fields and a
   white-on-white submit. Match the footer subscribe row instead, which is the
   site's established form language.
   ========================================================================== */

.wv-js .elementor-form .elementor-form-fields-wrapper{row-gap:20px}
.wv-js .elementor-form .elementor-field-group{margin-bottom:0}

/* labels: small, spaced, quiet — the field does the talking */
.wv-js .elementor-form .elementor-field-group > label{
  display:block;margin-bottom:9px;
  font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.wv-js .elementor-form .elementor-mark-required .elementor-field-label:after,
.wv-js .elementor-form .elementor-field-group > label .elementor-required{
  color:var(--e-global-color-primary,#7CD4FD)}

/* fields sit on the page rather than punching a white hole in it */
.wv-js .elementor-form .elementor-field-group input[type="text"],
.wv-js .elementor-form .elementor-field-group input[type="email"],
.wv-js .elementor-form .elementor-field-group input[type="tel"],
.wv-js .elementor-form .elementor-field-group input[type="url"],
.wv-js .elementor-form .elementor-field-group input[type="number"],
.wv-js .elementor-form .elementor-field-group textarea,
.wv-js .elementor-form .elementor-field-group select{
  width:100%;
  background:rgba(255,255,255,.04);
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  padding:15px 18px;
  font-family:inherit;
  font-size:15px;
  line-height:1.45;
  transition:border-color .3s,background .3s}
.wv-js .elementor-form .elementor-field-group textarea{min-height:150px;resize:vertical}
.wv-js .elementor-form .elementor-field-group input::placeholder,
.wv-js .elementor-form .elementor-field-group textarea::placeholder{
  color:rgba(255,255,255,.38)}
.wv-js .elementor-form .elementor-field-group input:focus,
.wv-js .elementor-form .elementor-field-group textarea:focus,
.wv-js .elementor-form .elementor-field-group select:focus{
  outline:none;
  background:rgba(255,255,255,.07);
  border-color:var(--e-global-color-primary,#7CD4FD)}

/* submit: the white pill used elsewhere, with the lime hover */
.wv-js .elementor-form .elementor-field-type-submit{margin-top:6px}
.wv-js .elementor-form button[type="submit"],
.wv-js .elementor-form .elementor-button[type="submit"]{
  width:auto;
  min-width:190px;
  padding:17px 30px;
  border:0;
  border-radius:10px;
  background:#fff;
  color:var(--e-global-color-accent,#111012);
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1;
  cursor:pointer;
  transition:background .35s,color .35s,transform .35s}
.wv-js .elementor-form button[type="submit"] .elementor-button-content-wrapper,
.wv-js .elementor-form button[type="submit"] .elementor-button-text{
  color:inherit}
.wv-js .elementor-form button[type="submit"]:hover{
  background:var(--e-global-color-primary,#7CD4FD);
  color:var(--e-global-color-accent,#111012)}

/* the messages Elementor prints after a submission */
.wv-js .elementor-message{font-size:14px;margin-top:12px}
.wv-js .elementor-message.elementor-message-success{color:var(--e-global-color-primary,#7CD4FD)}
.wv-js .elementor-message.elementor-message-danger{color:#ff8a7a}
.wv-js .elementor-form .elementor-field-group.elementor-error input,
.wv-js .elementor-form .elementor-field-group.elementor-error textarea{border-color:#ff8a7a}

@media (max-width:576px){
  .wv-js .elementor-form button[type="submit"]{width:100%}
}

/* ==========================================================================
   Service card hover: the kit colours every <a> at the same specificity as a
   plain .wv-more rule, so the "Know More" anchor kept its white and vanished
   against the lime wipe. Anchoring the inherit chain above the kit lets the
   card hover ink reach the label, and keeps that ink editable in the widget
   rather than hard-coded here.
   ========================================================================== */
.wv-js .wv-serv a.wv-more,
.wv-js .wv-serv a.wv-more .wv-more-label,
.wv-js .wv-serv .wv-serv-title{color:inherit}

/* ==========================================================================
   LIGHT SKIN
   The switcher toggles body.wv-light; this is what it toggles into. Values are
   taken from the reference light mode: white ground, #161616 ink, #585858 body
   copy, the header pill going solid dark, accent unchanged.

   Nearly every colour on the site is emitted by Elementor as per-element CSS
   (.elementor-element-xxxx ...), which outranks any sane selector written here.
   A skin has to overrule all of it, so this block uses !important, scoped
   entirely inside body.wv-light so the default dark site cannot be affected.
   ========================================================================== */
body.wv-light{
  --wv-bg:#ffffff; --wv-ink:#161616; --wv-soft:#585858;
  --wv-rule:rgba(0,0,0,.14); --wv-panel:#f4f4f2;
  background:var(--wv-bg) !important; color:var(--wv-ink) !important}

body.wv-light h1,body.wv-light h2,body.wv-light h3,
body.wv-light h4,body.wv-light h5,body.wv-light h6{color:var(--wv-ink) !important}
body.wv-light p,body.wv-light li,
body.wv-light .elementor-widget-text-editor{color:var(--wv-soft) !important}
body.wv-light .e-con,body.wv-light .e-con-inner{background-color:transparent !important}

/* header: the reference makes the pill solid dark in light mode, so the nav
   keeps its white type and the lockup stays legible */
body.wv-light [data-elementor-type="header"] .e-con:has(> .elementor-widget-nav-menu){
  background:#111012 !important}
body.wv-light [data-elementor-type="header"] .elementor-nav-menu a{color:#fff !important}
body.wv-light [data-elementor-type="header"] .elementor-heading-title{color:var(--wv-ink) !important}
body.wv-light .wv-skin{color:var(--wv-ink) !important;
  box-shadow:inset 0 0 0 1px var(--wv-rule) !important}

/* page intro, breadcrumbs */
body.wv-light .wv-pintro-head{color:var(--wv-ink) !important}
body.wv-light .wv-pintro-lead{color:var(--wv-soft) !important}
body.wv-light .wv-pintro-eyebrow{color:var(--wv-ink) !important}
body.wv-light .wv-crumbs{color:var(--wv-soft) !important}
body.wv-light .wv-crumbs [aria-current="page"]{color:var(--wv-ink) !important}

/* service cards */
body.wv-light .wv-serv{border-color:rgba(0,0,0,.16) !important;color:var(--wv-ink) !important}
body.wv-light .wv-serv .wv-serv-text,
body.wv-light .wv-serv .wv-serv-num{color:var(--wv-soft) !important}
body.wv-light .wv-serv .wv-more-chip,
body.wv-light .wv-serv:hover .wv-more-chip{background:#111012 !important;color:#fff !important}

/* the standalone more-link sits on the white ground */
body.wv-light .wv-more{color:var(--wv-ink) !important}
body.wv-light .wv-more-chip{background:#111012 !important;color:#fff !important}

/* stats */
body.wv-light .wv-stat{border-color:rgba(0,0,0,.16) !important}
body.wv-light .wv-stat-value{color:var(--wv-ink) !important}
body.wv-light .wv-stat-label{color:var(--wv-soft) !important}
body.wv-light .wv-stat-label::before,
body.wv-light .wv-stat-dot{background:rgba(0,0,0,.35) !important}

/* approach stack: the dark panels take the light ground panel tone, and the
   accent panel is left alone because it works on either skin */
body.wv-light .wv-stack-card.is-dark{background:var(--wv-panel) !important;color:var(--wv-ink) !important}
body.wv-light .wv-stack-card.is-light{background:#111012 !important;color:#fff !important}
body.wv-light .wv-stack-card.is-light .wv-stack-text{color:rgba(255,255,255,.72) !important}
body.wv-light .wv-stack-card.is-dark .wv-stack-text{color:var(--wv-soft) !important}
body.wv-light .wv-stack-head{color:var(--wv-ink) !important}

/* listings */
body.wv-light .wv-pcard-title,body.wv-light .wv-jcard-title{color:var(--wv-ink) !important}
body.wv-light .wv-pcard-meta,body.wv-light .wv-jcard-meta,
body.wv-light .wv-jcard-text{color:var(--wv-soft) !important}
body.wv-light .wv-pcard-media,body.wv-light .wv-jcard-media,
body.wv-light .wv-band-frame{background:rgba(0,0,0,.05) !important}
body.wv-light .wv-band-caption{color:var(--wv-soft) !important}

/* detail furniture */
body.wv-light .wv-pinfo-item{border-top-color:var(--wv-rule) !important}
body.wv-light .wv-pinfo-label{color:var(--wv-soft) !important}
body.wv-light .wv-pinfo-value{color:var(--wv-ink) !important}
body.wv-light .wv-pnav{border-color:var(--wv-rule) !important}
body.wv-light .wv-pnav-label{color:var(--wv-soft) !important}
body.wv-light .wv-pnav-title{color:var(--wv-ink) !important}
body.wv-light .wv-pnav-arrow{box-shadow:inset 0 0 0 1px rgba(0,0,0,.2) !important;color:var(--wv-ink) !important}

/* marquees, awards, testimonials */
body.wv-light .wv-marquee-item{color:var(--wv-ink) !important}
body.wv-light .wv-marquee.is-stroke{--wv-stroke:#161616}
body.wv-light .wv-marquee-sep{color:var(--wv-ink) !important}
body.wv-light .wv-award{border-color:var(--wv-rule) !important;color:var(--wv-ink) !important}
body.wv-light .wv-testim-quote,body.wv-light .wv-testim-name{color:var(--wv-ink) !important}
body.wv-light .wv-testim-role,body.wv-light .wv-testim-text{color:var(--wv-soft) !important}
body.wv-light .wv-nav-btn{color:var(--wv-ink) !important;border-color:rgba(0,0,0,.25) !important}

/* forms on a white ground */
body.wv-light .elementor-form .elementor-field-group > label{color:var(--wv-soft) !important}
body.wv-light .elementor-form .elementor-field-group input,
body.wv-light .elementor-form .elementor-field-group textarea,
body.wv-light .wv-sub-field{
  background:rgba(0,0,0,.03) !important;color:var(--wv-ink) !important;
  border-color:rgba(0,0,0,.18) !important}
body.wv-light .elementor-form .elementor-field-group input::placeholder,
body.wv-light .elementor-form .elementor-field-group textarea::placeholder,
body.wv-light .wv-sub-field::placeholder{color:rgba(0,0,0,.4) !important}
body.wv-light .elementor-form button[type="submit"],
body.wv-light .wv-sub-btn{background:#111012 !important;color:#fff !important}
body.wv-light .elementor-form button[type="submit"]:hover,
body.wv-light .wv-sub-btn:hover{
  background:var(--e-global-color-primary,#7CD4FD) !important;color:#111012 !important}
body.wv-light .wv-sub-chip{background:#fff !important;color:#111012 !important}

/* accordion */
body.wv-light .elementor-accordion .elementor-tab-title,
body.wv-light .elementor-accordion .elementor-tab-title a{color:var(--wv-ink) !important}
body.wv-light .elementor-accordion .elementor-tab-content{color:var(--wv-soft) !important}
body.wv-light .elementor-accordion .elementor-accordion-item{border-color:var(--wv-rule) !important}

/* footer and chrome */
body.wv-light [data-elementor-type="footer"]{background:var(--wv-panel) !important}
body.wv-light [data-elementor-type="footer"] .elementor-heading-title,
body.wv-light [data-elementor-type="footer"] h1,
body.wv-light [data-elementor-type="footer"] h2{color:var(--wv-ink) !important}
body.wv-light [data-elementor-type="footer"] a,
body.wv-light [data-elementor-type="footer"] p{color:var(--wv-soft) !important}
body.wv-light [data-elementor-type="footer"] a:hover{color:var(--wv-ink) !important}
body.wv-light .wv-curtain{background:#fff !important}
body.wv-light .wv-curtain-label{color:var(--wv-ink) !important}
body.wv-light button.wv-progress.wv-progress{
  background:rgba(0,0,0,.04) !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16) !important}
body.wv-light .wv-progress .wv-progress-track{stroke:rgba(0,0,0,.18) !important}
body.wv-light .wv-progress .wv-progress-arrow{color:var(--wv-ink) !important}

/* --- light skin, second pass -------------------------------------------
   Three things the first pass missed, all found by looking at the rendered
   page rather than by measuring the elements I had thought to list. */

/* hero tag pills were white type on a white border: invisible on the ground */
body.wv-light .wv-tag{border-color:rgba(0,0,0,.22) !important;color:var(--wv-ink) !important}
body.wv-light .wv-tag span{color:var(--wv-ink) !important}

/* the rotating badge sets its ring type with SVG fill, which `color` never
   reaches, so the whole wordmark disappeared */
body.wv-light .wv-badge text,
body.wv-light .wv-badge textPath{fill:var(--wv-ink) !important}
body.wv-light .wv-badge svg{color:var(--wv-ink) !important}
body.wv-light .wv-badge circle{stroke:rgba(0,0,0,.2) !important}

/* difference blending on a white dot rendered as a grey disc; ink is simpler */
body.wv-light .wv-cursor{mix-blend-mode:normal !important;background:var(--wv-ink) !important}
body.wv-light .wv-cursor-ring,
body.wv-light .wv-cursor-follow{
  mix-blend-mode:normal !important;
  border-color:rgba(0,0,0,.35) !important;background:transparent !important}

/* while here: the avatar stack and any bordered chip on the white ground */
body.wv-light .wv-avatars img{border-color:#fff !important}
body.wv-light .wv-avatar-count{
  background:var(--wv-panel) !important;color:var(--wv-ink) !important;
  border-color:rgba(0,0,0,.16) !important}

/* --- light skin, third pass --------------------------------------------
   Found by scanning every text-bearing element on every page rather than a
   hand-picked list. Mostly widgets whose ink is set per-element by Elementor
   and so never inherited the skin. */

/* any Elementor heading, whatever tag it was given */
body.wv-light .elementor-heading-title{color:var(--wv-ink) !important}

/* horizontal project track */
body.wv-light .wv-track-label-text,
body.wv-light .wv-track-title,
body.wv-light .wv-track-index{color:var(--wv-ink) !important}
body.wv-light .wv-track-media{background:rgba(0,0,0,.05) !important}

/* testimonials furniture */
body.wv-light .wv-testim-count,
body.wv-light .wv-testim-nav{color:var(--wv-soft) !important}

/* awards rows */
body.wv-light .wv-award-year,
body.wv-light .wv-award-cat{color:var(--wv-soft) !important}
body.wv-light .wv-award-name{color:var(--wv-ink) !important}

/* marquee items carry their type in a child span on some variants */
body.wv-light .wv-marquee-item span,
body.wv-light .wv-marquee-track span{color:var(--wv-ink) !important}

/* --- inverted surfaces keep their own ink -----------------------------
   These panels are deliberately dark or accent-filled in light mode, so the
   broad rules above must not repaint their contents. Declared last and at
   higher specificity so they win. */
body.wv-light .wv-stack-card.is-light,
body.wv-light .wv-stack-card.is-light .wv-stack-title,
body.wv-light .wv-stack-card.is-light .elementor-heading-title,
body.wv-light .wv-stack-card.is-light h2,
body.wv-light .wv-stack-card.is-light h3,
body.wv-light .wv-stack-card.is-light h4{color:#ffffff !important}
body.wv-light .wv-stack-card.is-light .wv-stack-text{color:rgba(255,255,255,.72) !important}

body.wv-light .wv-stack-card.is-accent,
body.wv-light .wv-stack-card.is-accent .wv-stack-title,
body.wv-light .wv-stack-card.is-accent .elementor-heading-title,
body.wv-light .wv-stack-card.is-accent h2,
body.wv-light .wv-stack-card.is-accent h3,
body.wv-light .wv-stack-card.is-accent h4{color:#111012 !important}
body.wv-light .wv-stack-card.is-accent .wv-stack-text{color:rgba(17,16,18,.72) !important}

body.wv-light .wv-track-end-box,
body.wv-light .wv-track-end-box .wv-track-end-text,
body.wv-light .wv-track-end-box .elementor-heading-title{color:#111012 !important}

/* the service card wipe is the accent, so hovered cards invert to dark ink */
body.wv-light .wv-serv:hover,
body.wv-light .wv-serv:hover .wv-serv-title,
body.wv-light .wv-serv:hover a.wv-more,
body.wv-light .wv-serv:hover a.wv-more .wv-more-label{color:#111012 !important}
body.wv-light .wv-serv:hover .wv-serv-text,
body.wv-light .wv-serv:hover .wv-serv-num{color:rgba(17,16,18,.72) !important}

/* --- light skin, fourth pass -------------------------------------------
   The homepage journal *carousel* is a different widget from the journal grid
   built for the listing page, and only the grid had been covered. Its meta line
   keeps its type in an unclassed span, so the span is named explicitly. */
body.wv-light .wv-journal-item{color:var(--wv-ink) !important}
body.wv-light .wv-journal-title{color:var(--wv-ink) !important}
body.wv-light .wv-journal-meta,
body.wv-light .wv-journal-meta span{color:var(--wv-soft) !important}
body.wv-light .wv-journal-media{background:rgba(0,0,0,.05) !important}
body.wv-light .wv-journal-count{color:var(--wv-soft) !important}

/* the track's translucent white name chip needs inverting on the light ground */
body.wv-light .wv-track-label{background:rgba(0,0,0,.06) !important}
body.wv-light .wv-track-label-text{color:var(--wv-ink) !important}

/* ==========================================================================
   Card icon contrast.

   The glyphs were drawn in the accent colour, and the service card's hover
   wipe is also the accent — so on hover the icon vanished into the panel it was
   sitting on. The approach card tinted with the accent had the same problem at
   rest. It was equally wrong in the previous accent colour; it just moved.

   Rather than maintain a light and a dark copy of every glyph, force each one
   to a flat silhouette and pick the side that contrasts with whatever is
   behind it. `brightness(0)` collapses any source colour to black; adding
   `invert(1)` makes it white. That makes the fix independent of the accent, so
   changing the accent again cannot reintroduce this.
   ========================================================================== */

.wv-js .wv-serv .wv-serv-art img,
.wv-js .wv-stack-card .wv-stack-ico img{
  filter:brightness(0) invert(1);
  transition:filter .4s cubic-bezier(.76,0,.24,1)}

/* the accent wipe rises on hover: the glyph goes dark to sit on it */
.wv-js .wv-serv:hover .wv-serv-art img{filter:brightness(0)}

/* the accent-tinted approach card is accent at rest, so its glyph is dark */
.wv-js .wv-stack-card.is-accent .wv-stack-ico img{filter:brightness(0)}

/* --- light skin --------------------------------------------------------
   On the white ground a white silhouette would disappear, so the resting
   state flips. The accent wipe is light in both skins, so hover stays dark. */
body.wv-light .wv-js .wv-serv .wv-serv-art img,
body.wv-light .wv-serv .wv-serv-art img,
body.wv-light .wv-serv:hover .wv-serv-art img{filter:brightness(0) !important}

body.wv-light .wv-stack-card .wv-stack-ico img{filter:brightness(0) !important}
body.wv-light .wv-stack-card.is-accent .wv-stack-ico img{filter:brightness(0) !important}
/* except the panel that inverts to dark in light mode */
body.wv-light .wv-stack-card.is-light .wv-stack-ico img{
  filter:brightness(0) invert(1) !important}

/* ==========================================================================
   Home hero backdrop.

   The hero carried only a 10%-opacity radial gradient, which on the #161616
   ground was invisible — the section read as empty. This gives it a diagonal
   hatch plus a corner glow, in the manner of the reference site.

   Keyed structurally rather than to the container's element id: Elementor does
   not render `_css_classes` on containers, and an element id changes if the
   container is ever rebuilt. The page id is the stable handle.

   `isolation` makes the hero its own stacking context, so the two pseudos can
   sit at z-index -1: above the container's own background, below its content.
   Nothing here animates, so there is no reduced-motion case to answer.
   ========================================================================== */

.wv-js .elementor-281233 > .e-con.e-parent:first-child,
.wv-js .elementor-element-8mphzjy{position:relative;isolation:isolate}

.wv-js .elementor-281233 > .e-con.e-parent:first-child::before,
.wv-js .elementor-element-8mphzjy::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:repeating-linear-gradient(45deg,
    rgba(255,255,255,.045) 0 1px, transparent 1px 9px);
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%, #000 35%, transparent 85%);
          mask-image:radial-gradient(130% 100% at 50% 0%, #000 35%, transparent 85%)}

.wv-js .elementor-281233 > .e-con.e-parent:first-child::after,
.wv-js .elementor-element-8mphzjy::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(80% 65% at 85% 0%, rgba(124,212,253,.26), transparent 68%)}

/* Narrow screens: widen the hatch so it cannot moire on high-DPI phones, and
   bring the glow inboard since there is no right-hand column to sit behind. */
@media (max-width:768px){
  .wv-js .elementor-281233 > .e-con.e-parent:first-child::before,
  .wv-js .elementor-element-8mphzjy::before{
    background-image:repeating-linear-gradient(45deg,
      rgba(255,255,255,.04) 0 1px, transparent 1px 13px)}
  .wv-js .elementor-281233 > .e-con.e-parent:first-child::after,
  .wv-js .elementor-element-8mphzjy::after{
    background:radial-gradient(95% 55% at 70% 0%, rgba(124,212,253,.22), transparent 70%)}
}