/* ============================================================
WAVEFORM ENTERTAINMENT, site styles
Brand: black #050505 · stage #101317 · graphite #1B2026 · amber #FF9200
off-white #F5F4F0 · grey #A7ADB4
============================================================ */
:root{--wf-black:#050505;--wf-stage:#101317;--wf-graph:#1B2026;--wf-amber:#FF9200;--wf-white:#F5F4F0;--wf-grey:#A7ADB4}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body,body.ast-plain-container,#content,.site-content,.ast-container{background:var(--wf-black);color:var(--wf-white)}
body{font-family:'Inter',sans-serif;overflow-x:hidden}
::selection{background:var(--wf-amber);color:var(--wf-black)}
.wf-amber{color:var(--wf-amber)}
.wf-italic{font-style:italic}
.wf-dim{opacity:.6}
h1,h2,h3,h4,.elementor-heading-title{font-family:'Space Grotesk',sans-serif;margin:0}
a{transition:color .3s}
/* ---------- HEADER (Astra header builder), v2, 2026-09-18 ----------
Rebuilt to the client reference: a defined bar rather than a transparent
overlay, charcoal gradient with a warm bloom behind the logo, amber hairlines
top and bottom, a flare centred on the bottom edge, and chamfered amber facets
at both ends. The facets are one background-image pair on ::before (SVG, so the
geometry is exact); ::after is the bottom flare. The bar is opaque at the top of
the page now, so the homepage hero photo starts below it, deliberate. */
#masthead,.ast-theme-transparent-header #masthead{position:fixed!important;top:0;left:0;right:0;z-index:999;background:transparent!important;border:0!important}
.admin-bar #masthead{top:32px}
#masthead .ast-container{max-width:1600px;padding-left:64px;padding-right:64px}
.ast-primary-header-bar,.ast-above-header-bar,.ast-mobile-header-wrap .ast-primary-header-bar{
position:relative;isolation:isolate;border:0!important;
background-color:#0b0d10!important;
background-image:radial-gradient(120% 200% at 14% -40%,rgba(255,146,0,.09) 0%,rgba(255,146,0,0) 55%),linear-gradient(180deg,#15181d 0%,#0c0e11 46%,#060708 100%)!important;
box-shadow:inset 0 1px 0 rgba(255,146,0,.5),inset 0 -1px 0 rgba(255,146,0,.3),0 22px 44px -30px rgba(0,0,0,.95);
transition:min-height .3s,box-shadow .3s}
body.wf-scrolled .ast-primary-header-bar{box-shadow:inset 0 1px 0 rgba(255,146,0,.5),inset 0 -1px 0 rgba(255,146,0,.38),0 24px 46px -26px rgba(0,0,0,1)}
body.wf-scrolled #masthead .ast-primary-header-bar,body.wf-scrolled #masthead .ast-primary-header-bar .site-primary-header-wrap{min-height:72px!important}
/* chamfered ends. Two things matter here: the SVGs carry an explicit
width/height (without one the intrinsic size defaults to 300x150, the strokes
scale to well under a pixel and the facet renders as a smudge), and the facet
is 76px wide so it stays inside the 64px container gutter rather than sitting
behind the logo. */
/* z-index 0, NOT -1: the bar sets isolation:isolate and a negative-z pseudo
ends up painted behind the bar's own background, so the facets vanished. The
header content is lifted to z-index 1 below so nothing is covered. */
/* Left facet removed 2026-09-20 at the client's request: it sat in the 64px
gutter directly beside the logo and read as a competing graphic. Only the
right-hand layer remains, so this is a SINGLE background layer now. */
.ast-primary-header-bar::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-repeat:no-repeat;background-position:right center;background-size:76px 100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='96' viewBox='0 0 76 96' preserveAspectRatio='none'%3E%3Cpath d='M76 0H30L76 96Z' fill='%23000' fill-opacity='.6'/%3E%3Cpath d='M30 0H0L46 96H76Z' fill='%23F5F4F0' fill-opacity='.07'/%3E%3Cpath d='M0 0 46 96' stroke='%23FF9200' stroke-opacity='.3' stroke-width='1.5'/%3E%3Cpath d='M30 0 76 96' stroke='%23FFA633' stroke-opacity='.95' stroke-width='2.2'/%3E%3C/svg%3E")}
/* flare centred on the bottom edge */
.ast-primary-header-bar::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:4px;z-index:-1;pointer-events:none;
background:radial-gradient(46% 100% at 50% 0%,rgba(255,196,120,.95) 0%,rgba(255,146,0,.45) 26%,rgba(255,146,0,0) 100%)}
/* Astra paints an opaque #050505 on .site-primary-header-wrap, which sat on top
of the bar's gradient AND the facets. It has to be transparent for any of the
bar treatment to be visible; z-index 1 keeps the header content above them. */
.ast-primary-header-bar > .site-primary-header-wrap,.ast-primary-header-bar > .ast-builder-grid-row,.ast-primary-header-bar .site-primary-header-wrap{background:transparent!important;background-color:transparent!important;position:relative;z-index:1}
/* the facets are sized for a 64px desktop gutter; on a phone bar they would eat
40% of the width, so they scale down with the breakpoints */
@media(max-width:1240px){.ast-primary-header-bar::before{background-size:44px 100%}}
@media(max-width:1024px){.ast-primary-header-bar::before{background-size:44px 100%}}
@media(max-width:767px){.ast-primary-header-bar::before{background-size:36px 100%}}
/* logo (HTML element, also reused in footer), unchanged artwork, media 121 */
.wf-logo{display:inline-flex;align-items:center;gap:16px;text-decoration:none!important;line-height:1}
/* header logo = whole logo (media 121); bar is 96px at top, 72px scrolled */
.wf-logo-img{height:80px;width:auto;display:block;flex-shrink:0;transition:height .3s}
body.wf-scrolled .wf-logo-img{height:58px}
.wf-logo-mark{width:36px;height:36px;border:1px solid var(--wf-amber);transform:rotate(45deg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wf-logo-mark i{display:block;width:13px;height:12px;transform:rotate(-45deg);
background:linear-gradient(var(--wf-amber),var(--wf-amber)) 0 100%/2px 4px no-repeat,
linear-gradient(var(--wf-amber),var(--wf-amber)) 25% 100%/2px 6px no-repeat,
linear-gradient(var(--wf-amber),var(--wf-amber)) 50% 100%/2px 8px no-repeat,
linear-gradient(var(--wf-amber),var(--wf-amber)) 75% 100%/2px 10px no-repeat,
linear-gradient(var(--wf-amber),var(--wf-amber)) 100% 100%/2px 12px no-repeat}
.wf-logo-text{display:flex;flex-direction:column;gap:5px}
.wf-logo-text b{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--wf-white)}
.wf-logo-text small{font-size:9px;letter-spacing:.35em;text-transform:uppercase;color:var(--wf-grey);font-weight:500}
.wf-logo-lg .wf-logo-text b{font-size:24px;text-transform:uppercase}
/* footer logo = whole logo incl. baked-in tagline, so no separate .wf-hash line */
.wf-logo-full{display:block;line-height:0;text-decoration:none!important}
.wf-logo-full img{width:160px;max-width:100%;height:auto;display:block}
/* wf-logo-lock: the header and footer marks link to the homepage and should not
be casually saved or dragged. THIS IS A DETERRENT ONLY. The browser has to
fetch the file to render it, so it stays in the network panel, the cache and
at its own URL; nothing here makes it unobtainable. The and the browser offers link options
rather than 'Save image as'. The link itself still works, because the click
passes to the anchor. */
.wf-logo img,.wf-logo-full img{
pointer-events:none;
-webkit-user-drag:none;user-drag:none;
-webkit-user-select:none;user-select:none;
-webkit-touch-callout:none}
.ast-header-html-1 .ast-builder-html-element{line-height:1}
/* desktop menu, logo far left, nav centred (header builder slot `primary_center`),
CTA far right. Astra's centre layout is `1fr auto 1fr`, so the side columns need
a min-width or the logo collapses to nothing before the mobile header takes
over. Top-level links are full row height so the dropdown can hang off
`top:100%` instead of off the 13px text box. */
.ast-primary-header-bar .site-header-primary-section-left,
.ast-primary-header-bar .site-header-primary-section-right{min-width:max-content;flex:0 0 auto}
.ast-primary-header-bar .site-header-primary-section-center{min-width:0}
.ast-builder-menu-1,.ast-builder-menu-1 .ast-main-header-bar-alignment,.ast-builder-menu-1 .main-navigation{width:100%;align-self:stretch}
.ast-builder-menu-1 .ast-main-header-bar-alignment,.ast-builder-menu-1 .main-navigation{display:flex;align-items:stretch;justify-content:center}
/* The stays 13px tall unless it is given a height: its parent is a WRAPPING
flex container with align-content:center, so align-self:stretch only stretches
it to the flex LINE, which is content-height. Full-height links are what let the
dropdown hang off top:100% instead of off the 13px text box. */
.ast-builder-menu-1 .main-navigation{flex-wrap:nowrap;align-content:stretch}
.ast-builder-menu-1 .main-header-menu{display:flex!important;height:100%!important;align-self:stretch!important;align-items:stretch;justify-content:center;flex-wrap:nowrap;width:100%}
.ast-builder-menu-1 .main-header-menu>.menu-item{display:flex;align-items:stretch}
.ast-builder-menu-1 .main-header-menu>.menu-item>.menu-link,.ast-builder-menu-1 .main-header-menu .menu-link{display:flex;align-items:center;white-space:nowrap;color:var(--wf-white)!important;font-family:'Inter',sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:0 18px!important;background:transparent!important;position:relative;transition:color .25s}
.ast-builder-menu-1 .main-header-menu>.menu-item>.menu-link::after{content:'';position:absolute;left:18px;right:18px;bottom:calc(50% - 17px);height:2px;background:var(--wf-amber);border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .3s}
.ast-builder-menu-1 .main-header-menu>.menu-item:hover>.menu-link{color:var(--wf-amber)!important}
.ast-builder-menu-1 .main-header-menu>.menu-item:hover>.menu-link::after{transform:scaleX(1)}
.ast-builder-menu-1 .main-header-menu>.current-menu-item>.menu-link,.ast-builder-menu-1 .main-header-menu>.current-menu-ancestor>.menu-link,.ast-builder-menu-1 .main-header-menu>.current-menu-parent>.menu-link,.ast-builder-menu-1 .main-header-menu>.current_page_item>.menu-link{color:var(--wf-amber)!important}
.ast-builder-menu-1 .main-header-menu>.current-menu-item>.menu-link::after,.ast-builder-menu-1 .main-header-menu>.current-menu-ancestor>.menu-link::after,.ast-builder-menu-1 .main-header-menu>.current-menu-parent>.menu-link::after,.ast-builder-menu-1 .main-header-menu>.current_page_item>.menu-link::after{transform:scaleX(1)}
/* hairline rules: after the logo and before the CTA */
.ast-primary-header-bar .site-header-primary-section-left{position:relative;padding-right:38px}
.ast-header-button-1{position:relative;padding-left:38px}
.ast-primary-header-bar .site-header-primary-section-left::after,.ast-header-button-1::before{content:'';position:absolute;top:50%;transform:translateY(-50%);width:1px;height:42px;pointer-events:none;
background:linear-gradient(180deg,rgba(167,173,180,0) 0%,rgba(167,173,180,.4) 50%,rgba(167,173,180,0) 100%)}
.ast-primary-header-bar .site-header-primary-section-left::after{right:0}
.ast-header-button-1::before{left:0}
/* the nav has to give ground before the sides do, or the logo gets squeezed out */
@media(max-width:1400px){
.ast-builder-menu-1 .main-header-menu>.menu-item>.menu-link{padding:0 13px!important;letter-spacing:.1em}
.ast-builder-menu-1 .main-header-menu>.menu-item>.menu-link::after{left:13px;right:13px}
}
@media(max-width:1240px){
#masthead .ast-container{padding-left:32px;padding-right:32px}
.ast-builder-menu-1 .main-header-menu>.menu-item>.menu-link{padding:0 9px!important;font-size:12px;letter-spacing:.06em}
.ast-builder-menu-1 .main-header-menu>.menu-item>.menu-link::after{left:9px;right:9px}
.ast-primary-header-bar .site-header-primary-section-left{padding-right:22px}
.ast-header-button-1{padding-left:22px}
.ast-header-button-1 .ast-custom-button{padding:14px 20px!important;letter-spacing:.1em!important}
}
/* header button, amber gradient pill with an arrow and a soft glow */
.ast-header-button-1 .ast-custom-button,.ast-builder-button-wrap .ast-custom-button{display:inline-flex!important;align-items:center;gap:12px;background:linear-gradient(180deg,#FFB24D 0%,#FF9200 100%)!important;color:var(--wf-black)!important;border:0!important;border-radius:9px!important;padding:16px 28px!important;font-family:'Inter',sans-serif!important;font-weight:800!important;font-size:12px!important;letter-spacing:.16em!important;text-transform:uppercase!important;line-height:1!important;white-space:nowrap;box-shadow:0 10px 26px -10px rgba(255,146,0,.65),inset 0 1px 0 rgba(255,255,255,.4);transition:filter .3s,box-shadow .3s,transform .3s}
.ast-header-button-1 .ast-custom-button::after,.ast-builder-button-wrap .ast-custom-button::after{content:'';flex:0 0 auto;width:17px;height:17px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='m13.5 6.5 6 5.5-6 5.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='m13.5 6.5 6 5.5-6 5.5'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .25s}
.ast-header-button-1 .ast-custom-button:hover,.ast-builder-button-wrap .ast-custom-button:hover{background:linear-gradient(180deg,#FFC266 0%,#FFA326 100%)!important;color:var(--wf-black)!important;filter:brightness(1.06);box-shadow:0 14px 30px -10px rgba(255,146,0,.8),inset 0 1px 0 rgba(255,255,255,.5);transform:translateY(-1px)}
.ast-header-button-1 .ast-custom-button:hover::after{transform:translateX(3px)}
/* mobile trigger + off-canvas */
.ast-mobile-menu-trigger-minimal,.ast-button-wrap .menu-toggle,.ast-button-wrap .menu-toggle:hover,.ast-button-wrap .menu-toggle:focus{color:var(--wf-amber)!important;background:transparent!important;border:0!important;box-shadow:none!important}
.ast-mobile-popup-drawer .ast-mobile-popup-inner{background:var(--wf-black)!important;color:var(--wf-white)}
.ast-mobile-popup-drawer .ast-mobile-popup-header{border-bottom:1px solid var(--wf-graph)}
.ast-mobile-popup-drawer .menu-toggle-close{color:var(--wf-amber)!important}
.ast-mobile-popup-content .main-header-menu .menu-item .menu-link,.ast-mobile-popup-content .menu-link{color:var(--wf-white)!important;font-family:'Inter',sans-serif;font-weight:700;font-size:13px;letter-spacing:.25em;text-transform:uppercase;border-color:var(--wf-graph)!important;padding:18px 24px!important;background:transparent!important}
.ast-mobile-popup-content .menu-item:hover>.menu-link{color:var(--wf-amber)!important}
.ast-mobile-popup-content .ast-builder-button-wrap{padding:24px}
.ast-mobile-popup-content .ast-custom-button{display:block;text-align:center}
.ast-mobile-header-content{background:var(--wf-black)!important}
/* ---------- SHARED ELEMENTOR PIECES ---------- */
.wf-tag{display:flex;align-items:center;gap:16px;font-family:'Inter',sans-serif;font-weight:700;font-size:10px;line-height:1;letter-spacing:.4em;text-transform:uppercase;color:var(--wf-amber)}
.wf-tag em{font-style:normal;font-size:12px;letter-spacing:0}
.wf-tag i{display:block;width:40px;height:1px;background:var(--wf-amber);flex-shrink:0}
.wf-tag-c{justify-content:center}
.wf-cat{display:block;font-family:'Inter',sans-serif;font-weight:700;font-size:10px;line-height:1;letter-spacing:.3em;text-transform:uppercase;color:var(--wf-amber)}
.wf-feat h3,.wf-feat h4{display:flex;align-items:center;font-family:'Inter',sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--wf-white);margin:0 0 12px}
.wf-feat h3 i,.wf-feat h4 i{display:block;width:24px;height:1px;background:var(--wf-amber);margin-right:12px}
.wf-feat p{margin:0;font-size:12px;line-height:1.7;color:var(--wf-grey)}
.wf-linkline,.wf-linkline-c{display:inline-flex;align-items:center;gap:16px;text-decoration:none!important;font-family:'Inter',sans-serif;font-weight:700;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--wf-white)}
.wf-linkline i{display:block;width:48px;height:1px;background:var(--wf-amber);transition:width .5s}
.wf-linkline:hover i{width:80px}
.wf-linkline-c{gap:32px;letter-spacing:.4em;width:100%;justify-content:center}
.wf-linkline-c i{display:block;width:96px;height:1px;background:var(--wf-graph);transition:background .5s}
.wf-linkline-c:hover{color:var(--wf-amber)}
.wf-linkline-c:hover i{background:var(--wf-amber)}
.wf-pill{display:inline-block;background:rgba(5,5,5,.8);border:1px solid rgba(255,146,0,.3);padding:8px 16px;font-family:'Inter',sans-serif;font-weight:700;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--wf-amber);white-space:nowrap}
.wf-hash{margin:0;font-family:'Inter',sans-serif;font-weight:700;font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-style:italic;color:var(--wf-amber);opacity:.7}
.elementor-widget-button .elementor-button{transition:background .3s,color .3s,border-color .3s}
.elementor-widget-button .elementor-button-icon svg{width:1.2em;height:1.2em;fill:currentColor}
.wf-wa .elementor-button-icon{order:-1}
.wf-wa .elementor-button-content-wrapper{gap:12px}
.wf-wa .elementor-button-icon svg{width:1.5em;height:1.5em}
/* ---------- HERO ---------- */
.wf-hero::after{content:'ALIVE';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26vw;line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(245,244,240,.07);pointer-events:none;z-index:0;white-space:nowrap}
.wf-hero>.e-con-inner{position:relative;z-index:2}
@media(max-width:767px){.wf-hero{background-size:cover!important;background-position:center top!important}}
/* ---------- TRUSTED / CAPABILITIES ---------- */
.wf-logos{opacity:.5}
.wf-caps .elementor-icon-list-items{justify-content:space-between}
@media(max-width:767px){.wf-caps .elementor-icon-list-items{justify-content:center}}
/* ---------- ABOUT ---------- */
.wf-about::before{content:'01';position:absolute;left:-80px;top:50%;transform:translateY(-50%);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18vw;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(245,244,240,.06);pointer-events:none;z-index:0;background:none!important}
.wf-about>.e-con-inner{position:relative;z-index:1}
.wf-portrait img{aspect-ratio:4/5;object-fit:cover;width:100%}
/* ---------- SERVICES CARDS ---------- */
.wf-card .wf-card-img{inset:0;margin:0;height:100%}
.wf-card .wf-card-img>*,.wf-card .wf-card-img img{height:100%;width:100%}
.wf-card .wf-card-img img{object-fit:cover;opacity:.5;transition:transform .7s,opacity .7s,filter .7s}
.wf-card:hover .wf-card-img img{transform:scale(1.1);opacity:.7}
.wf-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,#050505 0%,rgba(5,5,5,.2) 50%,rgba(5,5,5,0) 100%);z-index:1;pointer-events:none}
.wf-card-body{position:relative;z-index:2}
.wf-card-desc{opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s}
.wf-card:hover .wf-card-desc{opacity:1;transform:none}
.wf-card-body::after{content:'';display:block;width:48px;height:1px;background:var(--wf-amber);margin-top:32px;transition:width .7s}
.wf-card:hover .wf-card-body::after{width:100%}
/* The whole homepage service card is the link: the container renders as
(html_tag) and Elementor prints the href from its own link setting, so there is
no overlay or JS involved. The inner 'Explore Service' is a - a nested
would be unnested by the browser and break the card. */
a.wf-card,a.wf-card:hover,a.wf-card:focus{display:flex;text-decoration:none!important;color:inherit!important;cursor:pointer}
a.wf-card:focus-visible{outline:2px solid var(--wf-amber);outline-offset:4px}
/* the arrow used to grow on its own :hover; drive it from the card now */
.wf-card .wf-svc-link i{transition:width .5s}
.wf-card:hover .wf-svc-link i{width:80px}
.wf-card:hover .wf-svc-link{color:var(--wf-amber)}
/* ---------- WORK ---------- */
.wf-proj{transition:border-color .5s;cursor:pointer}
.wf-proj-lg{aspect-ratio:16/9}
.wf-proj::before{transition:opacity .5s,background .5s}
.wf-proj-body{opacity:0;transform:translateY(32px);transition:opacity .5s,transform .5s}
.wf-proj:hover .wf-proj-body{opacity:1;transform:none}
.wf-proj .elementor-widget-icon .elementor-icon{transition:background .3s,color .3s}
@media(max-width:767px){.wf-proj-lg{aspect-ratio:4/3}}
@media(hover:none){.wf-proj-body,.wf-card-desc{opacity:1;transform:none}}
/* ---------- REVIEWS / STATS ---------- */
.wf-testi .elementor-testimonial-meta{border-top:1px solid var(--wf-graph);padding-top:24px;margin-top:40px}
.wf-testi .elementor-testimonial-content{margin-bottom:0}
.wf-testi .elementor-testimonial-image img{width:44px;height:44px;object-fit:cover}
.wf-stats .elementor-counter{text-align:left}
.wf-stats .elementor-counter-number-wrapper{justify-content:flex-start}
.wf-stats .elementor-counter-title{text-align:left;margin-top:8px}
/* ---------- WHY ---------- */
.wf-why::after{content:'05';position:absolute;right:-64px;bottom:-64px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16vw;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(245,244,240,.06);pointer-events:none;z-index:0}
.wf-why>.e-con-inner{position:relative;z-index:1}
.wf-why .elementor-icon-box-icon .elementor-icon{border-color:var(--wf-graph)!important;transition:border-color .5s}
.wf-why .elementor-widget-icon-box:hover .elementor-icon{border-color:var(--wf-amber)!important}
/* ---------- BOOKING / FORM (Contact Form 7) ---------- */
.wf-checks .elementor-icon-list-icon{width:40px;height:40px;border:1px solid rgba(255,146,0,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wf-checks .elementor-icon-list-icon svg,.wf-checks .elementor-icon-list-icon i{margin:0}
.wf-checks b{color:var(--wf-amber)}
.wf-form .wpcf7 form{display:block;margin:0}
.wf-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
.wf-form label{display:block;font-family:'Inter',sans-serif;font-weight:700;font-size:10px;line-height:1;letter-spacing:.25em;text-transform:uppercase;color:var(--wf-grey);margin:0}
.wf-form .wpcf7-form-control-wrap{display:block;margin-top:12px}
.wf-form input:not([type=submit]),.wf-form select,.wf-form textarea{width:100%;background:var(--wf-stage);border:1px solid var(--wf-graph);color:var(--wf-white);font-family:'Inter',sans-serif;font-weight:400;font-size:14px;line-height:1.4;padding:16px 20px;border-radius:0;outline:0;box-shadow:none;transition:border-color .3s;-webkit-appearance:none;appearance:none;color-scheme:dark;margin:0}
.wf-form select{background-image:linear-gradient(45deg,transparent 50%,var(--wf-amber) 50%),linear-gradient(135deg,var(--wf-amber) 50%,transparent 50%);background-position:calc(100% - 24px) 50%,calc(100% - 19px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:48px}
.wf-form textarea{min-height:130px;resize:none}
.wf-form ::placeholder{color:rgba(167,173,180,.5)}
.wf-form input:focus,.wf-form select:focus,.wf-form textarea:focus{border-color:var(--wf-amber)}
.wf-form input[type=submit]{width:100%;background:var(--wf-amber);color:var(--wf-black);border:0;border-radius:0;font-family:'Inter',sans-serif;font-weight:900;font-size:13px;line-height:1;letter-spacing:.2em;text-transform:uppercase;padding:22px;margin-top:32px;cursor:pointer;transition:background .3s}
.wf-form input[type=submit]:hover{background:var(--wf-white)}
.wf-form .wf-form-note{margin:20px 0 0;text-align:center;font-family:'Inter',sans-serif;font-weight:700;font-size:10px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--wf-grey);opacity:.6}
.wf-form .wpcf7-spinner{display:block;margin:12px auto 0}
.wf-form .wpcf7-response-output{border:1px solid var(--wf-amber)!important;color:var(--wf-white);margin:24px 0 0!important;padding:12px 16px!important;font-size:13px}
.wf-form .wpcf7-not-valid-tip{color:var(--wf-amber);font-size:11px;margin-top:6px}
@media(max-width:640px){.wf-form-grid{grid-template-columns:1fr}}
/* ---------- FAQ ---------- */
.wf-faq .elementor-accordion .elementor-accordion-item{border-left:0!important;border-right:0!important;border-bottom:0!important}
.wf-faq .elementor-accordion .elementor-accordion-item:last-child{border-bottom:1px solid var(--wf-graph)!important}
.wf-faq .elementor-accordion .elementor-tab-title{display:flex;align-items:center;justify-content:space-between;gap:24px}
.wf-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon{width:auto;flex-shrink:0}
.wf-faq .elementor-accordion .elementor-tab-content{max-width:672px;border-top:0!important}
.wf-faq .elementor-accordion .elementor-tab-content p{margin:0}
.wf-faq .elementor-accordion-icon svg{transition:transform .3s}
.wf-faq .elementor-active .elementor-accordion-icon svg{transform:rotate(90deg)}
/* ---------- BEHIND ---------- */
.wf-behind .elementor-widget-image img{aspect-ratio:1/1;object-fit:cover;width:100%;border:1px solid var(--wf-graph);background:var(--wf-stage)}
.wf-behind .elementor-widget-image{margin:0}
/* ---------- CTA ---------- */
.wf-cta .wf-signal{opacity:.1;pointer-events:none}
.wf-cta .wf-signal .elementor-icon{color:var(--wf-black)}
.wf-cta .elementor-widget-button .elementor-button{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
/* ---------- FOOTER ---------- */
.wf-footer .elementor-icon-list-item a,.wf-footer .elementor-icon-list-text{color:var(--wf-grey);transition:color .3s}
.wf-footer .elementor-icon-list-item:hover .elementor-icon-list-text{color:var(--wf-amber)}
.wf-legal{opacity:.6}
.wf-legal .elementor-icon-list-item:hover .elementor-icon-list-text{color:var(--wf-white)}
.elementor-social-icon{background:transparent!important}
.elementor-social-icon svg{fill:currentColor}
/* ---------- MOBILE STICKY QUOTE BAR (output by sandbox PHP) ---------- */
.wf-sticky-cta{display:none}
@media(max-width:767px){
.wf-sticky-cta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:998;background:var(--wf-black);border-top:1px solid var(--wf-graph);padding:14px 20px;gap:12px;align-items:center}
.wf-sticky-cta .wa{width:52px;height:52px;border:1px solid var(--wf-amber);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--wf-amber);flex-shrink:0}
.wf-sticky-cta .wa svg{width:22px;height:22px;fill:currentColor}
.wf-sticky-cta .q{flex:1;background:var(--wf-amber);color:var(--wf-black);text-align:center;padding:17px 12px;font-family:'Inter',sans-serif;font-weight:900;font-size:12px;line-height:1;letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
body.home{padding-bottom:82px}
#masthead .ast-container{padding-left:24px;padding-right:24px}
.wf-logo-img{height:52px}
body.wf-scrolled .wf-logo-img{height:44px}
.wf-logo-full img{width:170px}
}
@media(max-width:1024px){#masthead .ast-container{padding-left:40px;padding-right:40px}}
/* ---------- ULTRA-WIDE (2400px+) ---------- */
@media(min-width:2400px){
html{font-size:18px}
.wf-hero::after{font-size:22vw}
.wf-about::before{font-size:14vw;left:-40px}
}
/* mobile hamburger / close icon colour */
.ast-header-break-point .menu-toggle,.ast-header-break-point .menu-toggle:hover,.ast-header-break-point .menu-toggle:focus,.ast-builder-menu-toggle-icon,.ast-mobile-menu-trigger-minimal,.ast-mobile-menu-trigger-fill,.ast-mobile-menu-trigger-outline{color:#FF9200!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.menu-toggle svg,.ast-mobile-svg,.ast-builder-menu-toggle-icon svg,.ast-mobile-popup-drawer .menu-toggle-close svg{fill:#FF9200!important;color:#FF9200!important}
.ast-mobile-popup-drawer .ast-mobile-popup-inner .menu-toggle-close{color:#FF9200!important}
/* capabilities strip wrapping */
.wf-caps .elementor-icon-list-items.elementor-inline-items{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 40px;margin:0}
.wf-caps .elementor-inline-items .elementor-icon-list-item{margin:0!important;padding:0!important;line-height:1.4}
@media(max-width:767px){.wf-caps .elementor-icon-list-items.elementor-inline-items{justify-content:center;gap:12px 28px}}
.wf-reviews .elementor-star-rating{font-size:14px;letter-spacing:4px;color:#FF9200}
/* mobile drawer surfaces */
.ast-mobile-popup-drawer .ast-mobile-popup-inner,.ast-mobile-popup-drawer .ast-mobile-popup-content,.ast-mobile-popup-drawer .ast-mobile-popup-header,.ast-mobile-popup-content .main-navigation,.ast-mobile-popup-content .main-header-menu,.ast-mobile-popup-content .ast-builder-menu-mobile,.ast-mobile-popup-content .ast-builder-menu-mobile .main-header-menu,.ast-mobile-popup-content .menu-item,.ast-mobile-popup-content .sub-menu,.ast-mobile-header-content .main-header-menu{background:#050505!important;color:#F5F4F0}
.ast-mobile-popup-content .main-header-menu .menu-item .menu-link{color:#F5F4F0!important}
/* ---------- HERO PHOTO PANEL (right 55%, fades into black, same composition at every desktop width) ---------- */
.wf-hero .wf-hero-img{top:0;right:0;height:100%;margin:0;pointer-events:none}
.wf-hero .wf-hero-img>*,.wf-hero .wf-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center top}
.wf-hero .wf-hero-img::after{content:'';position:absolute;inset:0;background:
radial-gradient(70% 60% at 68% 42%,rgba(255,146,0,.22) 0%,rgba(255,146,0,0) 70%),
linear-gradient(90deg,#050505 0%,rgba(5,5,5,.55) 18%,rgba(5,5,5,.12) 42%,rgba(5,5,5,0) 60%),
linear-gradient(0deg,#050505 0%,rgba(5,5,5,.35) 14%,rgba(5,5,5,0) 32%),
linear-gradient(180deg,rgba(5,5,5,.45) 0%,rgba(5,5,5,0) 22%)}
.wf-hero .wf-hero-img img{filter:brightness(1.08) contrast(1.06) saturate(1.12)}
/* tablet: the headline runs across the photo rather than beside it, so the
right-hand falloff gets a floor instead of dropping to .1 */
@media(max-width:1024px){.wf-hero .wf-hero-img::after{background:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.68) 40%,rgba(5,5,5,.42) 100%),linear-gradient(0deg,#050505 0%,rgba(5,5,5,.12) 45%,rgba(5,5,5,.68) 100%)}}
@media(max-width:767px){
/* phones: the headline and paragraph sit directly on the photo, so this is a
good deal heavier than the desktop treatment, the copy has to stay readable */
.wf-hero .wf-hero-img::after{background:linear-gradient(0deg,#050505 0%,rgba(5,5,5,.72) 40%,rgba(5,5,5,.82) 100%),rgba(5,5,5,.55)}
.wf-hero .wf-amber{text-shadow:0 0 16px rgba(255,146,0,.65),0 0 48px rgba(255,146,0,.35)}
}
/* no hover on touch devices: show images in colour, reveal card copy */
@media(hover:none),(max-width:1024px){
.wf-portrait img,.wf-card-img img,.wf-ab-story-img img,.wf-sv-img img,.wf-behind .elementor-widget-image img{filter:none!important}
.wf-card-img img{opacity:.75}
}
/* ---------- SHARED FOOTER (Elementor template rendered by Astra footer builder) ---------- */
.site-footer,.ast-footer-row,.site-footer .ast-builder-grid-row,.site-footer .ast-builder-grid-row-container,.site-footer .ast-builder-html-element{background:#050505!important;padding:0!important;margin:0!important;border:0!important}
.site-footer .ast-builder-grid-row-container-inner,.site-footer .ast-container{max-width:none!important;padding:0!important;width:100%!important}
.site-footer .ast-builder-grid-row{display:block!important}
.site-footer .ast-builder-footer-grid-columns{grid-template-columns:1fr!important}
/* ---------- INNER PAGE HERO ---------- */
.wf-page-hero{background:#050505}
/* ---------- DESKTOP FIRST SCREEN: header + hero + trusted strip + capabilities ribbon = one viewport.
--H is the hero height; every measurement is a proportion of it, calibrated on the 770px-tall reference
(kicker gap 48, headline 130, headline gap 60, row padding 40, bottom padding 80). ---------- */
@media(min-width:1025px){
.wf-hero{--H:calc(100vh - var(--wf-strips,176px));min-height:0!important;height:var(--H);padding:0!important;justify-content:flex-end}
.wf-hero > .e-con-inner{padding:calc(105px + var(--H)*0.08) 64px calc(var(--H)*0.104 - 60px)!important;height:100%;justify-content:flex-end}
.admin-bar .wf-hero{--H:calc(100vh - var(--wf-strips,176px) - 32px)}
.wf-hero > .e-con-inner > .elementor-widget-html{margin:0 0 calc(var(--H)*0.05)!important}
.wf-hero > .e-con-inner > .elementor-widget-heading{margin:0 0 calc(var(--H)*0.06)!important}
.wf-hero h1.elementor-heading-title{font-size:min(130px,calc(var(--H)*0.16))!important;margin:0!important}
.wf-hero .elementor-widget-text-editor{font-size:clamp(15px,calc(var(--H)*0.0235),18px)!important;line-height:1.6!important}
@media(min-width:1025px){.wf-hero .elementor-widget-text-editor{width:520px!important;max-width:520px!important;--container-widget-width:520px!important}}
.wf-hero .wf-hero-img{height:100%}
.wf-hero .wf-hero-img img{object-fit:cover!important;object-position:center 45%!important}
}
@media(min-width:2400px){.wf-hero h1.elementor-heading-title{font-size:min(170px,calc(var(--H)*0.16))!important}}
/* logo strip: keep the five names on one row on smaller desktops */
@media(min-width:1025px) and (max-width:1500px){.wf-logos{gap:24px 32px!important}.wf-logos .elementor-heading-title{font-size:15px!important}}
/* wf-hero-fit: hero grows instead of clipping its top under the fixed header */
@media(min-width:1025px){.wf-hero{height:auto!important;min-height:calc(100vh - 152px)!important}}
/* wf-marquee: slow seamless ticker for the trusted-by names */
.wf-logos .wf-marquee{width:100%;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.wf-marquee-track{display:flex;width:max-content;animation:wf-marq 32s linear infinite;will-change:transform}
.wf-marquee:hover .wf-marquee-track,.wf-marquee:focus-within .wf-marquee-track{animation-play-state:paused}
.wf-marquee-set{display:flex;align-items:center;gap:56px;padding-right:56px;flex:0 0 auto}
.wf-marquee-set span{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:var(--wf-white);white-space:nowrap}
@keyframes wf-marq{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
@media(min-width:1025px) and (max-width:1500px){.wf-marquee-set{gap:32px;padding-right:32px}.wf-marquee-set span{font-size:15px}}
@media(max-width:767px){.wf-marquee-set{gap:32px;padding-right:32px}.wf-marquee-set span{font-size:15px}}
@media(prefers-reduced-motion:reduce){.wf-marquee-track{animation:none}}
/* wf-strips-compact: slim the trusted bar + ribbon so the first screen has real headroom */
@media(min-width:1025px){
.wf-trusted{padding-top:0!important;padding-bottom:0!important}
.wf-trusted>.e-con-inner{padding-top:26px!important;padding-bottom:26px!important}
.wf-caps{padding-top:0!important;padding-bottom:0!important}
.wf-caps>.e-con-inner{padding-top:22px!important;padding-bottom:22px!important}
}
/* wf-type-refine: typography-only polish (no layout, colour, image or spacing-structure changes) */
.wf-hero h1.elementor-heading-title{line-height:.88!important;letter-spacing:-.025em!important}
.wf-hero .elementor-widget-text-editor{line-height:1.68!important;letter-spacing:.01em!important}
.wf-tag{font-size:11px!important;font-weight:600!important;letter-spacing:.24em!important}
.main-header-menu .menu-link{font-weight:600!important;letter-spacing:.1em!important}
.ast-header-button-1 .ast-custom-button,.ast-builder-button-wrap .ast-custom-button{font-weight:700!important;letter-spacing:.1em!important}
.wf-hero .elementor-button{letter-spacing:.1em!important;font-weight:700!important}
.wf-hero .wf-wa.elementor-button,.wf-hero .wf-wa .elementor-button{font-weight:600!important}
.wf-trusted .elementor-heading-title{font-weight:600!important;letter-spacing:.2em!important}
.wf-marquee-set span{font-weight:500!important;letter-spacing:.015em!important}
.wf-marquee-set{gap:64px!important;padding-right:64px!important}
.wf-caps .elementor-icon-list-text{font-weight:600!important;font-size:11px!important;letter-spacing:.12em!important}
.wf-caps .elementor-icon-list-icon{margin-right:0!important}
.wf-caps .elementor-icon-list-item{align-items:center!important}
@media(min-width:1025px) and (max-width:1500px){.wf-marquee-set{gap:40px!important;padding-right:40px!important}}
@media(max-width:767px){.wf-marquee-set{gap:32px!important;padding-right:32px!important}}
/* wf-caps-grid: even cells + hairline separators for the service ribbon */
@media(min-width:1025px){
.wf-caps .elementor-icon-list-items.elementor-inline-items{display:flex!important;flex-wrap:nowrap!important;justify-content:stretch!important;gap:0!important;width:100%!important}
.wf-caps .elementor-inline-items .elementor-icon-list-item{flex:1 1 0!important;min-width:0!important;justify-content:center!important;align-items:center!important;padding:2px 14px!important;margin:0!important}
.wf-caps .elementor-inline-items .elementor-icon-list-item + .elementor-icon-list-item{box-shadow:inset 1px 0 0 rgba(5,5,5,.12)!important}
.wf-caps .elementor-icon-list-text{white-space:nowrap!important}
}
/* wf-caps-link: make each service cell a full-cell link */
@media(min-width:1025px){.wf-caps .elementor-inline-items .elementor-icon-list-item>a{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important;gap:10px!important}}
.wf-caps .elementor-icon-list-item>a{transition:opacity .2s ease,color .2s ease}
.wf-caps .elementor-icon-list-item>a:hover .elementor-icon-list-text{color:#FF9200!important}
.wf-caps .elementor-icon-list-item>a:focus-visible{outline:2px solid #FF9200;outline-offset:-4px;border-radius:2px}
/* wf-caps-icon: larger, optically balanced service icons */
.wf-caps .elementor-icon-list-icon{width:auto!important;display:inline-flex!important;align-items:center!important}
.wf-caps .elementor-icon-list-icon svg{width:15px!important;height:15px!important}
@media(min-width:1025px){
.wf-caps .elementor-icon-list-icon svg{width:16px!important;height:16px!important}
.wf-caps .elementor-inline-items .elementor-icon-list-item>a{gap:11px!important}
}
/* wf-marquee-hover: names lift slightly on hover */
.wf-logos .wf-marquee-set span{transition:color .25s ease,opacity .25s ease}
.wf-marquee:hover .wf-marquee-set span{opacity:1}
.wf-logos{transition:opacity .25s ease}
.wf-logos:hover{opacity:.78!important}
/* wf-svc-caps: capability chips inside each service card */
.wf-svc-caps{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:18px 0 0;padding:0;list-style:none}
.wf-svc-caps li{font-family:'Inter',sans-serif;font-weight:600;font-size:10px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--wf-grey);display:flex;align-items:center}
.wf-svc-caps li+li::before{content:'';display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--wf-amber);margin:0 10px;flex-shrink:0}
/* wf-home-only-counters: section number watermarks belong to the homepage sequence only */
body:not(.home) .wf-about::before,body:not(.home) .wf-why::after{content:none!important;display:none!important}
/* wf-svc-caps-lg: capability list on service detail pages */
.wf-svc-caps-lg{margin-top:28px!important;gap:10px 0!important}
.wf-svc-caps-lg li{font-size:11px!important;letter-spacing:.14em!important;color:var(--wf-white)!important}
.wf-svc-caps-lg li+li::before{margin:0 14px!important}
/* ---------- ABOUT PAGE (post 50) ---------- */
.wf-ab-hero,.wf-ab-story,.wf-ab-values,.wf-ab-process{position:relative}
.wf-ab-hero>.e-con-inner,.wf-ab-story>.e-con-inner,.wf-ab-values>.e-con-inner,.wf-ab-process>.e-con-inner{position:relative;z-index:1}
.wf-ab-watermark,.wf-ab-wm{position:absolute;font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1;letter-spacing:-.04em;color:rgba(245,244,240,.045);pointer-events:none;user-select:none;white-space:nowrap;z-index:0}
.wf-ab-watermark{left:-1%;top:8%;font-size:22vw}
.wf-ab-wm{font-size:16vw;color:rgba(245,244,240,.035)}
.wf-ab-wm-l{left:-3%;top:50%;transform:translateY(-50%)}
.wf-ab-wm-r{right:-2%;bottom:-5%}
.wf-ab-wm-l2{left:-2%;top:-5%}
.wf-ab-hero .wf-tag{margin-bottom:32px}
.wf-ab-story-img img{width:100%;display:block}
.wf-ab-badge-t p{margin:0}
.wf-ab-grid>.e-con-inner{padding:0}
.wf-ab-cell{height:100%}
.wf-ab-cta-hash{margin:0;font-family:'Inter',sans-serif;font-weight:700;font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-style:italic;color:rgba(5,5,5,.55);text-align:center}
.wf-ab-cta .elementor-widget-button{width:auto}
@media(max-width:1024px){.wf-ab-watermark{font-size:26vw}.wf-ab-wm{font-size:22vw}}
@media(max-width:767px){.wf-ab-watermark,.wf-ab-wm{display:none}}
/* ---------- SERVICES INDEX (post 51) ---------- */
.wf-sv-list .wf-sv-row:last-child{border-bottom:0!important;margin-bottom:0!important;padding-bottom:0!important}
.wf-sv-img img{width:100%;display:block}
.wf-sv-hero .wf-tag{margin-bottom:32px}
/* ---------- SERVICE DETAIL PAGES (111-116) ---------- */
.wf-sd-back{color:var(--wf-grey)!important;transition:color .3s}
.wf-sd-back:hover{color:var(--wf-amber)!important}
.wf-sd-back i{width:32px}
.wf-sd-back:hover i{width:48px}
.wf-sd-glance{margin:0;padding:0;list-style:none}
.wf-sd-glance li{padding:18px 0;border-top:1px solid var(--wf-graph)}
.wf-sd-glance li:first-child{border-top:0;padding-top:0}
.wf-sd-glance li:last-child{padding-bottom:0}
.wf-sd-glance b{display:block;font-family:'Inter',sans-serif;font-weight:700;font-size:9px;line-height:1;letter-spacing:.3em;text-transform:uppercase;color:var(--wf-amber);margin-bottom:10px}
.wf-sd-glance span{display:block;font-family:'Inter',sans-serif;font-weight:300;font-size:14px;line-height:1.6;color:var(--wf-white)}
.wf-sd-tier{height:100%}
.wf-sd-more-link{display:block;text-decoration:none!important}
.wf-sd-more-link em{display:block;font-style:normal;font-family:'Inter',sans-serif;font-weight:700;font-size:9px;line-height:1;letter-spacing:.3em;text-transform:uppercase;color:var(--wf-amber);margin-bottom:12px}
.wf-sd-more-link strong{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;line-height:1.2;letter-spacing:-.02em;text-transform:uppercase;color:var(--wf-white);transition:color .3s}
.wf-sd-more-link:hover strong{color:var(--wf-amber)}
@media(max-width:767px){.wf-sd-glance-wrap{margin-top:8px}}
/* ---------- footer CTA is a FALLBACK ----------
Every page that carries its own CTA section (home, about, services, the six
service detail pages) was showing two calls to action back to back: its own,
then the shared footer's. Hide the footer one wherever the page already has a
CTA; Work / Reviews / FAQ / Contact have none, so they keep it. Browsers
without :has() simply keep both, which is the old behaviour. */
body:has(.wf-cta, .wf-ab-cta, .wf-sv-cta, .wf-sd-cta) .wf-footer-cta{display:none!important}
/* ---------- page CTA: amber panel + logo watermark ----------
Home and About were already amber with black type and black buttons. The
services index and the six detail pages had been built dark, which broke that
house style - they now match. All four carry a faint logo mark behind the copy.
The WhatsApp button is picked out by href so the rule does not depend on
sibling order. */
.wf-cta,.wf-ab-cta,.wf-sv-cta,.wf-sd-cta{position:relative;overflow:hidden}
.wf-cta,.wf-sv-cta,.wf-sd-cta{background-color:var(--wf-amber)!important}
.wf-cta::after,.wf-ab-cta::after,.wf-sv-cta::after,.wf-sd-cta::after{content:'';position:absolute;top:50%;left:50%;width:660px;height:660px;transform:translate(-50%,-50%);background:url(https://waveformentertainment.co.ke/wp-content/uploads/2026/09/waveform-entertainment-logo-mark.png) center center/contain no-repeat;filter:brightness(0);opacity:.055;pointer-events:none;z-index:0}
.wf-cta>.e-con-inner,.wf-ab-cta>.e-con-inner,.wf-sv-cta>.e-con-inner,.wf-sd-cta>.e-con-inner{position:relative;z-index:1}
.wf-cta .elementor-heading-title,.wf-sv-cta .elementor-heading-title,.wf-sd-cta .elementor-heading-title,.wf-sv-cta .elementor-heading-title .wf-amber,.wf-sd-cta .elementor-heading-title .wf-amber{color:var(--wf-black)!important}
.wf-cta .elementor-widget-text-editor,.wf-cta .elementor-widget-text-editor p,.wf-sv-cta .elementor-widget-text-editor,.wf-sv-cta .elementor-widget-text-editor p,.wf-sd-cta .elementor-widget-text-editor,.wf-sd-cta .elementor-widget-text-editor p{color:rgba(5,5,5,.75)!important}
.wf-cta .elementor-button,.wf-sv-cta .elementor-button,.wf-sd-cta .elementor-button{background-color:var(--wf-black)!important;color:var(--wf-white)!important;border:0!important}
.wf-cta .elementor-button:hover,.wf-sv-cta .elementor-button:hover,.wf-sd-cta .elementor-button:hover{background-color:var(--wf-white)!important;color:var(--wf-black)!important}.wf-cta .elementor-button[href*="wa.me"],.wf-sv-cta .elementor-button[href*="wa.me"],.wf-sd-cta .elementor-button[href*="wa.me"]{background-color:transparent!important;color:var(--wf-black)!important;border:2px solid var(--wf-black)!important}
.wf-cta .elementor-button[href*="wa.me"]:hover,.wf-sv-cta .elementor-button[href*="wa.me"]:hover,.wf-sd-cta .elementor-button[href*="wa.me"]:hover{background-color:var(--wf-black)!important;color:var(--wf-amber)!important}
@media(max-width:767px){.wf-cta::after,.wf-ab-cta::after,.wf-sv-cta::after,.wf-sd-cta::after{width:380px;height:380px}}
body:has(.wf-cta, .wf-ab-cta, .wf-sv-cta, .wf-sd-cta) .wf-footer-cta + .e-con{padding-top:56px}
/* ---------- PRIMARY NAV DROPDOWN (Services -> the six detail pages) ----------
Astra ships the submenu as a white panel with a blue top border, opening flush
against the parent link's 13px text box. This is a floating card instead: it
clears the header bar, has a caret pointing at its parent, and an invisible
bridge across the gap so the pointer can travel down without the hover breaking
(the bridge is inside the , which is what Astra's :hover is on). */
.ast-builder-menu-1 .main-header-menu .sub-menu{
top:calc(100% + 25px)!important;min-width:288px!important;width:288px!important;padding:12px!important;
background:linear-gradient(180deg,#161a20 0%,#0a0c0f 100%)!important;
border:1px solid rgba(167,173,180,.18)!important;border-radius:16px!important;
box-shadow:0 34px 70px -24px rgba(0,0,0,.95),0 0 0 1px rgba(255,146,0,.05),inset 0 1px 0 rgba(255,255,255,.05)!important;
overflow:visible!important}
/* Astra already puts a hover bridge on .sub-menu::before and sizes it from its
own 'submenu top offset' setting via an inline .ast-desktop rule (height:7px)
that outranks ours. It has to be forced, or the bridge is 7px across a 25px gap
and the menu closes before the pointer reaches the panel, the items look
present but cannot be clicked. Astra positions it with translateY(-100%), so
only the height needs changing; top is reset to 0 to work with that. */
.ast-builder-menu-1 .main-header-menu>.menu-item>.sub-menu::before{content:''!important;position:absolute!important;left:0!important;right:auto!important;width:100%!important;top:0!important;height:30px!important;transform:translateY(-100%)!important}
.ast-builder-menu-1 .main-header-menu>.menu-item>.sub-menu::after{content:'';position:absolute;top:-7px;left:30px;width:12px;height:12px;background:#161a20;border-left:1px solid rgba(167,173,180,.18);border-top:1px solid rgba(167,173,180,.18);border-radius:3px 0 0 0;transform:rotate(45deg)}
.ast-builder-menu-1 .main-header-menu .sub-menu .menu-item{width:100%}
.ast-builder-menu-1 .main-header-menu .sub-menu .menu-item .menu-link,.ast-builder-menu-1 .main-header-menu .sub-menu a{display:flex!important;align-items:center;gap:12px;color:var(--wf-grey)!important;font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:11px!important;letter-spacing:.14em!important;text-transform:uppercase!important;line-height:1.35!important;padding:13px 14px!important;border-radius:10px!important;background:transparent!important;border:0!important;transition:background .25s,color .25s,padding .25s}
.ast-builder-menu-1 .main-header-menu .sub-menu .menu-item .menu-link::before{content:'';flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:rgba(255,146,0,.35);transition:background .25s,transform .25s}
.ast-builder-menu-1 .main-header-menu .sub-menu .menu-item:hover>.menu-link,.ast-builder-menu-1 .main-header-menu .sub-menu a:hover{color:var(--wf-white)!important;background:rgba(255,146,0,.09)!important;padding-left:18px!important}
.ast-builder-menu-1 .main-header-menu .sub-menu .menu-item:hover>.menu-link::before{background:var(--wf-amber);transform:scale(1.3)}
.ast-builder-menu-1 .main-header-menu .sub-menu .current-menu-item>.menu-link{color:var(--wf-amber)!important;background:rgba(255,146,0,.07)!important}
.ast-builder-menu-1 .main-header-menu .sub-menu .current-menu-item>.menu-link::before{background:var(--wf-amber)}
.ast-builder-menu-1 .main-header-menu .menu-item-has-children>.menu-link .ast-icon{color:var(--wf-amber)!important;transition:transform .25s}
.ast-builder-menu-1 .main-header-menu>.menu-item-has-children:hover>.menu-link .ast-icon{transform:rotate(180deg)}
/* mobile drawer: indent the nested items so the hierarchy is legible */
.ast-mobile-popup-content .sub-menu .menu-item .menu-link{padding-left:48px!important;font-size:11px!important;letter-spacing:.18em!important;color:var(--wf-grey)!important}
.ast-mobile-popup-content .sub-menu .menu-item .menu-link:hover{color:var(--wf-amber)!important}
/* Astra renders the mobile submenu expander as a light box - make it invisible furniture */
.ast-mobile-popup-content .ast-menu-toggle,.ast-mobile-header-content .ast-menu-toggle,.ast-mobile-popup-content .menu-item .ast-menu-toggle{background:transparent!important;background-color:transparent!important;color:var(--wf-amber)!important;border:0!important;box-shadow:none!important;outline:0!important}
.ast-mobile-popup-content .ast-menu-toggle svg,.ast-mobile-header-content .ast-menu-toggle svg,.ast-mobile-popup-content .ast-menu-toggle .ast-icon{color:var(--wf-amber)!important;fill:var(--wf-amber)!important}
.ast-mobile-popup-content .sub-menu .menu-item .menu-link:before{color:var(--wf-amber)!important}
/* ---------- SERVICE DETAIL: mid-page booking band (wf-sd-book) ----------
Sits between the scale tiers and the related services. Kept visually apart
from the closing wf-sd-cta amber slab on purpose: a bordered card with a
faint amber wash, not a second full-width amber panel. */
.wf-sd-book-card{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(120deg,rgba(255,146,0,.09) 0%,rgba(255,146,0,.02) 42%,rgba(16,19,23,0) 100%),var(--wf-stage);border-color:rgba(167,173,180,.18)!important}
.wf-sd-book-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--wf-amber),rgba(255,146,0,.15));pointer-events:none}
.wf-sd-book-card h3{margin:0}
.wf-sd-book-act{align-items:flex-end}
.wf-sd-book-alt{font-size:10px!important;letter-spacing:.24em!important;color:var(--wf-grey)!important;transition:color .3s}
.wf-sd-book-alt:hover{color:var(--wf-amber)!important}
.wf-sd-book-alt i{width:34px}
.wf-sd-book-alt:hover i{width:56px}
@media(max-width:1024px){.wf-sd-book-act{align-items:flex-start}}
@media(max-width:767px){.wf-sd-book-card{border-radius:12px}.wf-sd-book-card::before{width:2px}.wf-sd-book-act .elementor-widget-button,.wf-sd-book-act .elementor-button{width:100%;text-align:center}/* the label wraps to two lines at 375px on the default 44px padding */.wf-sd-book-act .elementor-button{padding:20px 16px!important;letter-spacing:.14em!important}}
/* ---------- PORTFOLIO (CPT wf_portfolio; grid on page 52, single via sandbox template) ---------- */
.wf-pf-empty{color:var(--wf-grey);font-family:'Inter',sans-serif;font-size:14px}
.wf-pf-grid-front{display:grid;gap:40px}
.wf-pf-cols-2{grid-template-columns:repeat(2,1fr)}
.wf-pf-cols-3{grid-template-columns:repeat(3,1fr)}
.wf-pf-cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.wf-pf-grid-front{grid-template-columns:repeat(2,1fr);gap:32px}}
@media(max-width:767px){.wf-pf-grid-front{grid-template-columns:1fr;gap:24px}}
.wf-pf-card{display:block;text-decoration:none!important;background:var(--wf-black);border:1px solid var(--wf-graph);transition:border-color .35s}
.wf-pf-card:hover{border-color:var(--wf-amber)}
.wf-pf-media{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:var(--wf-stage)}
.wf-pf-media img{width:100%;height:100%;object-fit:cover;display:block}
.wf-pf-year{position:absolute;top:0;right:0;background:var(--wf-amber);color:var(--wf-black);font-family:'Inter',sans-serif;font-weight:900;font-size:11px;letter-spacing:.2em;padding:9px 14px;line-height:1}
.wf-pf-body{display:block;padding:32px}
.wf-pf-body .wf-cat{margin-bottom:14px}
.wf-pf-body h2,.wf-pf-body h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-.02em;text-transform:uppercase;color:var(--wf-white);margin:0 0 12px;transition:color .3s}
.wf-pf-card:hover .wf-pf-body h2,.wf-pf-card:hover .wf-pf-body h3{color:var(--wf-amber)}
.wf-pf-meta{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:12px;letter-spacing:.06em;color:var(--wf-amber);margin-bottom:14px}
.wf-pf-exc{display:block;font-family:'Inter',sans-serif;font-weight:300;font-size:14px;line-height:1.65;color:var(--wf-grey)}
.wf-pf-caps{margin-top:16px!important}
.wf-pf-link{margin-top:24px}
/* single project */
.wf-pfs-inner{max-width:1600px;margin:0 auto;padding:0 64px}
@media(max-width:1024px){.wf-pfs-inner{padding:0 40px}}
@media(max-width:767px){.wf-pfs-inner{padding:0 24px}}
.wf-pfs-hero{position:relative;background:var(--wf-black) center/cover no-repeat;padding:220px 0 88px;border-bottom:1px solid var(--wf-graph)}
.wf-pfs-hero::before{content:'';position:absolute;inset:0;background:rgba(5,5,5,.80)}
.wf-pfs-hero .wf-pfs-inner{position:relative;z-index:1}
.wf-pfs-hero .wf-pill{margin:24px 0 24px;display:inline-block}
.wf-pfs-hero h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:84px;line-height:.95;letter-spacing:-.04em;text-transform:uppercase;color:var(--wf-white);margin:0 0 24px}
.wf-pfs-lede{font-family:'Inter',sans-serif;font-weight:300;font-size:19px;line-height:1.65;color:var(--wf-white);max-width:660px;margin:0}
@media(max-width:1024px){.wf-pfs-hero{padding:180px 0 72px}.wf-pfs-hero h1{font-size:60px}}
@media(max-width:767px){.wf-pfs-hero{padding:150px 0 56px}.wf-pfs-hero h1{font-size:38px}.wf-pfs-lede{font-size:16px}}
.wf-pfs-facts{background:var(--wf-stage);border-bottom:1px solid var(--wf-graph);padding:64px 0}
.wf-pfs-dl{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin:0}
@media(max-width:767px){.wf-pfs-dl{grid-template-columns:repeat(2,1fr);gap:24px}}
.wf-pfs-dl dt{font-family:'Inter',sans-serif;font-weight:700;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--wf-amber);margin-bottom:10px}
.wf-pfs-dl dd{margin:0;font-family:'Inter',sans-serif;font-weight:300;font-size:15px;line-height:1.5;color:var(--wf-white)}
.wf-pfs-services{margin-top:40px;padding-top:32px;border-top:1px solid var(--wf-graph)}
.wf-pfs-services .wf-cat{margin-bottom:14px}
.wf-pfs-body{padding:112px 0;background:var(--wf-black)}
.wf-pfs-copy{max-width:760px;font-family:'Inter',sans-serif;font-weight:300;font-size:17px;line-height:1.75;color:var(--wf-grey)}
.wf-pfs-copy h2,.wf-pfs-copy h3{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.02em;color:var(--wf-white);margin:40px 0 16px}
.wf-pfs-copy img{max-width:100%;height:auto;display:block;margin:32px 0}
.wf-pfs-copy a{color:var(--wf-amber)}
.wf-pfs-more{padding:112px 0;background:var(--wf-stage);border-top:1px solid var(--wf-graph)}
.wf-pfs-more .wf-cat{display:block;margin-bottom:40px}
@media(max-width:767px){.wf-pfs-body,.wf-pfs-more{padding:72px 0}}
.wf-pfs-cta{padding:144px 0;text-align:center}
.wf-pfs-cta .wf-pfs-inner{position:relative;z-index:1}
.wf-pfs-cta h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:56px;line-height:1.05;letter-spacing:-.04em;text-transform:uppercase;color:var(--wf-black);margin:0 0 28px}
.wf-pfs-cta h2 .wf-amber{color:var(--wf-black)}
.wf-pfs-cta p{font-family:'Inter',sans-serif;font-weight:300;font-size:17px;line-height:1.65;color:rgba(5,5,5,.75);max-width:640px;margin:0 auto 48px}
.wf-pfs-btns{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap}
.wf-pfs-btn{display:inline-block;background:var(--wf-black);color:var(--wf-white)!important;text-decoration:none!important;font-family:'Inter',sans-serif;font-weight:900;font-size:11px;letter-spacing:.2em;text-transform:uppercase;line-height:1;padding:20px 44px;transition:background .3s,color .3s}
.wf-pfs-btn:hover{background:var(--wf-white);color:var(--wf-black)!important}
.wf-pfs-btn-o{background:transparent;color:var(--wf-black)!important;border:2px solid var(--wf-black)}
.wf-pfs-btn-o:hover{background:var(--wf-black);color:var(--wf-amber)!important}
@media(max-width:767px){.wf-pfs-cta{padding:88px 0}.wf-pfs-cta h2{font-size:32px}.wf-pfs-btn{width:100%;text-align:center}}
/* touch devices keep the project photos in colour */
/* ---------- PROJECT GALLERY + LIGHTBOX ---------- */
.wf-pfs-gal{padding:112px 0;background:var(--wf-black);border-top:1px solid var(--wf-graph)}
.wf-pfs-gal .wf-cat{display:block;margin-bottom:40px}
@media(max-width:767px){.wf-pfs-gal{padding:72px 0}}
.wf-gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1024px){.wf-gal-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:600px){.wf-gal-grid{grid-template-columns:repeat(2,1fr);gap:8px}}
.wf-gal-item{display:block;position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--wf-stage);border:1px solid var(--wf-graph);cursor:zoom-in}
.wf-gal-item img{width:100%;height:100%;object-fit:cover;display:block}
.wf-lb{position:fixed;inset:0;z-index:99999;background:rgba(5,5,5,.94);display:flex;align-items:center;justify-content:center;padding:64px 24px}
.wf-lb[hidden]{display:none}
.wf-lb-fig{margin:0;max-width:92vw;max-height:86vh;display:flex;flex-direction:column;align-items:center;gap:16px}
.wf-lb-fig img{max-width:92vw;max-height:78vh;object-fit:contain;display:block}
.wf-lb-fig figcaption{font-family:'Inter',sans-serif;font-weight:300;font-size:13px;letter-spacing:.04em;color:var(--wf-grey);text-align:center;max-width:680px}
.wf-lb button{position:absolute;background:transparent;border:0;color:var(--wf-white);cursor:pointer;line-height:1;padding:12px;transition:color .3s}
.wf-lb button:hover{color:var(--wf-amber)}
.wf-lb-x{top:18px;right:22px;font-size:40px}
.wf-lb-prev,.wf-lb-next{top:50%;transform:translateY(-50%);font-size:56px}
.wf-lb-prev{left:12px}
.wf-lb-next{right:12px}
@media(max-width:767px){.wf-lb{padding:56px 12px}.wf-lb-prev,.wf-lb-next{font-size:40px}.wf-lb-x{font-size:32px;top:10px;right:12px}}
/* lightbox controls: beat Astra's global button styling (amber fill, in-flow) */
.wf-lb .wf-lb-x,.wf-lb .wf-lb-prev,.wf-lb .wf-lb-next{position:absolute!important;background:transparent!important;background-color:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;color:var(--wf-white)!important;cursor:pointer;line-height:1!important;padding:12px!important;min-height:0!important;width:auto!important;border-radius:0!important;transition:color .3s}
.wf-lb .wf-lb-x:hover,.wf-lb .wf-lb-prev:hover,.wf-lb .wf-lb-next:hover{background:transparent!important;background-color:transparent!important;color:var(--wf-amber)!important}
.wf-lb .wf-lb-x{top:18px!important;right:22px!important;left:auto!important;font-size:40px!important}
.wf-lb .wf-lb-prev{left:12px!important;right:auto!important;top:50%!important;transform:translateY(-50%)!important;font-size:56px!important}
.wf-lb .wf-lb-next{right:12px!important;left:auto!important;top:50%!important;transform:translateY(-50%)!important;font-size:56px!important}
@media(max-width:767px){.wf-lb .wf-lb-prev,.wf-lb .wf-lb-next{font-size:40px!important}.wf-lb .wf-lb-x{font-size:32px!important;top:10px!important;right:12px!important}}
/* ---------- GALLERY PAGE (post 53), aggregates every project's _wf_gallery ---------- */
.wf-gal-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px}
.wf-gal-filter .wf-gal-f{background:transparent!important;background-color:transparent!important;border:1px solid var(--wf-graph)!important;border-radius:0!important;color:var(--wf-grey)!important;font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:10px!important;letter-spacing:.2em!important;text-transform:uppercase!important;line-height:1!important;padding:13px 18px!important;min-height:0!important;width:auto!important;box-shadow:none!important;cursor:pointer;transition:color .3s,border-color .3s}
.wf-gal-filter .wf-gal-f:hover{color:var(--wf-white)!important;border-color:var(--wf-grey)!important;background:transparent!important}
.wf-gal-filter .wf-gal-f.is-on{color:var(--wf-black)!important;background:var(--wf-amber)!important;background-color:var(--wf-amber)!important;border-color:var(--wf-amber)!important}
.wf-gal-filter .wf-gal-f span{opacity:.55;margin-left:7px}
.wf-gal-tag{position:absolute;left:0;bottom:0;z-index:2;background:rgba(5,5,5,.82);color:var(--wf-white);font-family:'Inter',sans-serif;font-weight:700;font-size:9px;letter-spacing:.2em;text-transform:uppercase;line-height:1;padding:9px 12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.wf-gal-item:hover .wf-gal-tag{opacity:1;transform:none}
@media(hover:none),(max-width:1024px){.wf-gal-tag{opacity:1;transform:none}}
/* wf-footer-redesign */
.wf-footer .wf-foot-cta-sub p{font-family:'Inter',sans-serif;font-weight:300;font-size:15px;line-height:1.6;color:var(--wf-grey);margin:10px 0 0;text-transform:none;letter-spacing:.01em}
.wf-footer .elementor-icon-list-item a{transition:color .2s ease,padding-left .2s ease}
.wf-footer .elementor-icon-list-item a:hover{color:var(--wf-amber)!important;padding-left:4px}
.wf-footer .elementor-icon-list-icon svg{width:9px!important;height:9px!important;fill:var(--wf-amber)!important;opacity:.75}
.wf-foot-social-extra h5{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;line-height:1.3;letter-spacing:.02em;text-transform:uppercase;color:var(--wf-white);margin:0 0 14px}
.wf-foot-shots{display:flex;gap:8px}
.wf-foot-shot{display:block;width:72px;height:56px;overflow:hidden;flex-shrink:0;border:1px solid rgba(245,244,240,.14)}
.wf-foot-shot img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9);transition:transform .35s ease,filter .35s ease}
.wf-foot-shot:hover img{transform:scale(1.06);filter:saturate(1.05)}
.wf-foot-social-extra p{font-family:'Inter',sans-serif;font-weight:300;font-size:12px;line-height:1.6;color:var(--wf-grey);margin:14px 0 0;text-transform:none}
/* ---------- MOSAIC GRIDS (portfolio cards + all gallery tiles) ----------
Gallery tiles drop the fixed 4:3 box and take their height from explicit grid
rows, so tiles can span 2 cols / 2 rows in a repeating 8-tile rhythm.
grid-auto-flow:dense back-fills the holes that leaves. */
.wf-gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;grid-auto-flow:dense;gap:14px}
.wf-gal-item{aspect-ratio:auto;height:100%}
.wf-gal-item img{height:100%}
.wf-gal-grid>.wf-gal-item[data-m="1"]{grid-column:span 2;grid-row:span 2}
.wf-gal-grid>.wf-gal-item[data-m="4"]{grid-column:span 2}
.wf-gal-grid>.wf-gal-item[data-m="5"]{grid-row:span 2}
.wf-gal-grid>.wf-gal-item[data-m="8"]{grid-column:span 2}
@media(max-width:1200px){.wf-gal-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:170px;gap:12px}}
@media(max-width:767px){.wf-gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:118px;gap:8px}
.wf-gal-grid>.wf-gal-item[data-m="5"]{grid-row:span 1}}
/* portfolio: every 6th card leads as a double-width feature, page grid only
(the related-projects strip on single projects stays an even 3-up) */
.wf-pf-section .wf-pf-grid-front{grid-auto-flow:dense}
.wf-pf-section .wf-pf-cols-3>.wf-pf-card:nth-child(6n+1){grid-column:span 2}
.wf-pf-section .wf-pf-cols-3>.wf-pf-card:nth-child(6n+1) .wf-pf-media{aspect-ratio:auto;height:0;padding-top:calc((100% - 40px) * .375)}.wf-pf-section .wf-pf-cols-3>.wf-pf-card:nth-child(6n+1) .wf-pf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wf-pf-section .wf-pf-cols-3>.wf-pf-card:nth-child(6n+1) .wf-pf-body h2,.wf-pf-section .wf-pf-cols-3>.wf-pf-card:nth-child(6n+1) .wf-pf-body h3{font-size:28px}
@media(max-width:767px){
.wf-pf-section .wf-pf-cols-3>.wf-pf-card:nth-child(6n+1){grid-column:span 1}
.wf-pf-section .wf-pf-cols-3>.wf-pf-card:nth-child(6n+1) .wf-pf-media{aspect-ratio:4/3;height:auto;padding-top:0}.wf-pf-section .wf-pf-cols-3>.wf-pf-card:nth-child(6n+1) .wf-pf-media img{position:static;height:100%}
.wf-pf-section .wf-pf-cols-3>.wf-pf-card:nth-child(6n+1) .wf-pf-body h2,.wf-pf-section .wf-pf-cols-3>.wf-pf-card:nth-child(6n+1) .wf-pf-body h3{font-size:22px}
}
/* wf-foot-mockup-a */
.wf-footer .elementor-widget-heading .elementor-heading-title{position:relative;padding-bottom:12px;font-size:13px!important;letter-spacing:.1em!important}
.wf-footer .elementor-widget-heading .elementor-heading-title::after{content:'';position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--wf-amber)}
.wf-footer .wf-foot-band .elementor-heading-title::after{display:none}
.wf-footer .wf-foot-band{border-radius:10px!important;overflow:hidden!important;margin:0 24px!important}
.wf-footer .wf-foot-band .elementor-heading-title{font-size:30px!important;line-height:1.2!important;letter-spacing:-.01em!important;text-transform:none!important;padding-bottom:0!important}
.wf-footer .wf-foot-band .elementor-button{border-radius:999px!important;padding:20px 34px!important;letter-spacing:.1em!important}
/* wf-foot-mockup-b */
.wf-footer .elementor-icon-list-item{margin-bottom:6px!important}
.wf-footer .elementor-icon-list-item a[href^='mailto'] .elementor-icon-list-icon,.wf-footer .elementor-icon-list-item a[href^='tel'] .elementor-icon-list-icon,.wf-footer .elementor-icon-list-item a[href*='wa.me'] .elementor-icon-list-icon{order:0!important;width:38px;height:38px;border-radius:50%;background:rgba(255,146,0,.12);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.wf-footer .elementor-social-icon{width:38px!important;height:38px!important;background:rgba(245,244,240,.07)!important;border-radius:50%!important;transition:background .2s ease,transform .2s ease}
.wf-footer .elementor-social-icon:hover{background:var(--wf-amber)!important;transform:translateY(-2px)}
.wf-foot-hash{display:inline-block;background:var(--wf-amber);color:#050505;font-family:'Inter',sans-serif;font-weight:700;font-size:12px;letter-spacing:.04em;padding:14px 26px}
@media(max-width:1024px){.wf-footer .wf-foot-band{margin:0 16px!important}.wf-footer .wf-foot-band .elementor-heading-title{font-size:24px!important}}
/* wf-foot-fix: scope list layout per column type */
.wf-footer .wf-foot-nav .elementor-icon-list-item a{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;gap:12px}
.wf-footer .wf-foot-nav .elementor-icon-list-icon{order:2}
.wf-footer .wf-foot-nav .elementor-icon-list-text{order:1}
.wf-footer .elementor-icon-list-text{text-transform:none!important;letter-spacing:.01em!important;font-size:14px!important}
.wf-footer .wf-foot-contact .elementor-icon-list-items{display:flex;flex-direction:column;gap:18px}
.wf-footer .wf-foot-contact .elementor-icon-list-item{margin:0!important}
.wf-footer .wf-foot-contact .elementor-icon-list-item a,.wf-footer .wf-foot-contact .elementor-icon-list-item{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:16px!important;text-align:left!important}
.wf-footer .wf-foot-contact .elementor-icon-list-icon{order:0!important;width:42px!important;height:42px!important;border-radius:50%!important;background:rgba(255,146,0,.14)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 42px!important}
.wf-footer .wf-foot-contact .elementor-icon-list-icon svg{width:16px!important;height:16px!important;fill:var(--wf-amber)!important;opacity:1!important}
.wf-footer .wf-foot-contact .elementor-icon-list-text{order:1!important;line-height:1.45!important}
.wf-foot-sub{display:block;font-size:12px;color:var(--wf-grey);margin-top:3px;letter-spacing:.01em}
.wf-footer .wf-foot-legal .elementor-icon-list-items{display:flex;gap:22px}
.wf-footer .wf-foot-legal .elementor-icon-list-item a{display:inline-flex!important;justify-content:flex-start!important;width:auto!important}
/* wf-foot-social-row: keep the four social badges on a single line */
.wf-footer .elementor-social-icons-wrapper{display:flex!important;flex-wrap:nowrap!important;gap:10px!important}
.wf-footer .elementor-social-icons-wrapper .elementor-grid-item{width:auto!important;margin:0!important}
.wf-footer .elementor-social-icon{width:36px!important;height:36px!important}
/* ============ FOOTER v2, rail split (2026-09-20) ============
Two independently sized halves, not one 4-column grid. In the single-grid
version the newsletter could not start until the TALLEST top column ended,
and the brand column ran ~150px taller than the link lists, so dead space
sat under them. Splitting the row lets each side size itself and the
newsletter rises under the lists. The SOUND/STAGE/LED/PRODUCTION icon strip
and the PEOPLE | TECHNOLOGY | GREAT EVENTS line (widget ftrcaps) were removed
from the brand column on 2026-09-20 at the client's request, which took a
further 138px off the footer and left the two halves near balanced.
9a88bda = the row -> rail | right
ftrrail = brand + Follow Us, stacked
ftrright = services/explore/contact + newsletter
The contact track keeps a minmax() FLOOR of 330px: the email is a single
unbreakable 32-character token needing ~250px of text box plus a 42px icon
and a 16px gap. An fr-only track fell 3px short on a 13-inch screen.
The rail is a BAND, not an fr, so it cannot collapse under the logo and intro
nor sprawl beside them. */
.wf-footer .elementor-element-9a88bda{
display:grid!important;
grid-template-columns:minmax(330px,380px) minmax(0,1fr);
gap:40px 46px!important;align-items:start!important}
/* Elementor sizes containers as flex items with calc() widths; as grid items
the track must own the width. */
.wf-footer .elementor-element-9a88bda > .e-con,
.wf-footer .elementor-element-ftrright > .e-con,
.wf-footer .elementor-element-ftrrail > .e-con{width:auto!important;max-width:none!important;min-width:0!important;flex:none!important}
.wf-footer .elementor-element-ftrrail{display:flex!important;flex-direction:column!important;
gap:34px!important;align-items:stretch!important}
.wf-footer .elementor-element-ftrright{display:grid!important;
grid-template-columns:1fr 1fr minmax(330px,1.3fr);
grid-template-areas:"services explore contact" "news news news";
gap:40px 46px!important;align-items:start!important}
.wf-footer .elementor-element-0128c80{grid-area:services}
.wf-footer .elementor-element-ftrqcol{grid-area:explore}
.wf-footer .elementor-element-50f1eb7{grid-area:contact}
.wf-footer .elementor-element-ftrnews{grid-area:news}
@media(min-width:1301px) and (max-width:1399px){
.wf-footer .elementor-element-9a88bda{grid-template-columns:minmax(300px,340px) minmax(0,1fr);gap:38px 38px!important}
.wf-footer .elementor-element-ftrright{grid-template-columns:1fr 1fr minmax(330px,1.25fr);gap:36px 34px!important}
}
@media(max-width:1300px){
.wf-footer .elementor-element-9a88bda{grid-template-columns:1fr;gap:40px!important}
.wf-footer .elementor-element-ftrrail{display:grid!important;grid-template-columns:1fr 1fr;gap:36px!important}
.wf-footer .elementor-element-ftrright{grid-template-columns:1fr 1fr;
grid-template-areas:"services explore" "contact contact" "news news";gap:36px!important}
}
@media(max-width:767px){
.wf-footer .elementor-element-ftrrail{grid-template-columns:1fr!important;gap:32px!important}
.wf-footer .elementor-element-ftrright{grid-template-columns:1fr;
grid-template-areas:"services" "explore" "contact" "news";gap:32px!important}
}
/* wf-foot-wrap: the email is a single 32-character token with no break
opportunity, and min-width:0 is needed too because the icon list row is a
flex container whose text span will not otherwise shrink. */
.wf-footer .elementor-icon-list-item > a,
.wf-footer .elementor-icon-list-item > span{min-width:0}
.wf-footer .elementor-icon-list-text{min-width:0;overflow-wrap:anywhere}
/* ---- newsletter: deliberately ONE row tall ---- */
.wf-ftr-news{padding:0!important}
.wf-ns{display:flex;align-items:center;justify-content:space-between;gap:16px 20px;flex-wrap:wrap;
border:1px solid #23292f;border-radius:12px;padding:12px 18px;position:relative;overflow:hidden;
background:linear-gradient(180deg,#0e1115 0%,#0b0e11 100%)}
.wf-ns::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
background:linear-gradient(180deg,#FF9200,rgba(255,146,0,0))}
.wf-ns-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 200px}
.wf-ns-eyebrow{font-size:10px;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:#FF9200;font-weight:800}
.wf-ns-line{font-size:14.5px;color:#F5F4F0;font-weight:600;line-height:1.25}
.wf-ns-form{margin:0;min-width:0;flex:0 1 auto}
.wf-ns-row{display:flex;gap:9px}
/* Astra forces height:40px on form controls, which clips the value in half. */
.wf-ns-input{height:auto!important;min-height:0!important;flex:1 1 165px;min-width:0;
background:#101317;border:1px solid #262c33;border-radius:99px;
padding:10px 16px!important;font-size:14px!important;line-height:1.35!important;
color:#F5F4F0;outline:none}
.wf-ns-input::placeholder{color:#5f676e}
.wf-ns-input:focus{border-color:#FF9200}
/* Astra also wins plain background on , so both are forced. */
.wf-ns-btn{background:linear-gradient(135deg,#FFA633,#FF9200)!important;background-color:#FF9200!important;
color:#120a00!important;border:0!important;cursor:pointer;height:auto!important;min-height:0!important;
border-radius:99px;padding:10px 22px!important;font-size:12px!important;line-height:1.35!important;
font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.wf-ns-btn:hover{filter:brightness(1.07)}
.wf-ns-btn[disabled]{opacity:.6;cursor:default}
/* off-screen, not display:none, because a bot that never sees the field is no test */
.wf-ns-hp{position:absolute!important;left:-9999px!important;top:auto!important;
width:1px!important;height:1px!important;overflow:hidden!important}
.wf-ns-msg{margin:6px 0 0;font-size:12px;line-height:1.4}
.wf-ns-msg:empty{display:none}
.wf-ns-msg.is-ok{color:#7ddc9a}
.wf-ns-msg.is-err{color:#ff8f80}
@media(max-width:600px){.wf-ns-row{flex-direction:column}.wf-ns-btn{width:100%}}
/* wf-foot-social-left */
.wf-footer .elementor-social-icons-wrapper{justify-content:flex-start!important;padding-left:0!important}
.wf-footer .elementor-widget-social-icons .elementor-grid{justify-content:flex-start!important}
/* ---------- FAQ PAGE (post 54) ---------- */
.wf-fq-jumpnav{display:flex;flex-wrap:wrap;gap:8px}
.wf-fq-jumpnav a{display:inline-flex;align-items:baseline;gap:10px;text-decoration:none!important;border:1px solid var(--wf-graph);padding:13px 18px;transition:border-color .3s,background .3s}
.wf-fq-jumpnav a:hover{border-color:var(--wf-amber);background:rgba(255,146,0,.07)}
.wf-fq-jumpnav em{font-style:normal;font-family:'Inter',sans-serif;font-weight:700;font-size:9px;letter-spacing:.2em;color:var(--wf-amber)}
.wf-fq-jumpnav span{font-family:'Inter',sans-serif;font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--wf-grey);transition:color .3s}
.wf-fq-jumpnav a:hover span{color:var(--wf-white)}
@media(min-width:1025px){.wf-fq-side{position:sticky;top:120px}}
.wf-fq-group{scroll-margin-top:96px}
.wf-fq-contact{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;line-height:1.25;letter-spacing:-.02em;color:var(--wf-white)!important;text-decoration:none!important;word-break:break-word;transition:color .3s}
.wf-fq-contact:hover{color:var(--wf-amber)!important}
@media(max-width:767px){.wf-fq-contact{font-size:17px}}
/* accordion: give the answers room and keep the open row marked */
.wf-fq-group .elementor-accordion .elementor-tab-title{border-top:0!important}
.wf-fq-group .elementor-accordion .elementor-accordion-item{border-left:0!important;border-right:0!important;border-top:0!important}
.wf-fq-group .elementor-accordion .elementor-accordion-item:first-child{border-top:1px solid var(--wf-graph)!important}
.wf-fq-group .elementor-tab-title.elementor-active{color:var(--wf-amber)!important}
/* ---------- CONTACT PAGE (post 55), wf-ct-main v2 ----------
Rebuilt 2026-09-18 from the client reference: photo-backed section, a column of
whole-card contact links on the left, a raised message panel on the right.
The old .wf-ct-card / .wf-ct-val markup is gone, .wf-ct-line replaces it. */
.wf-ct-main{scroll-margin-top:96px;position:relative}
.wf-ct-main > .e-con-inner{position:relative;z-index:1}
/* ---- left: direct lines ---- */
.wf-ct-lines{display:flex;flex-direction:column;gap:16px}
.wf-ct-line{display:flex;align-items:center;gap:22px;padding:22px 24px;border:1px solid rgba(167,173,180,.16);border-radius:14px;background:rgba(8,10,12,.55);text-decoration:none!important;transition:border-color .3s,background .3s,transform .3s}
.wf-ct-line:hover{border-color:var(--wf-amber);background:rgba(255,146,0,.05);transform:translateX(3px)}
.wf-ct-badge{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:1.5px solid rgba(255,146,0,.55);border-radius:50%;transition:border-color .3s,background .3s}
.wf-ct-badge svg{width:24px;height:24px;stroke:var(--wf-amber);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wf-ct-line:hover .wf-ct-badge{border-color:var(--wf-amber);background:rgba(255,146,0,.1)}
.wf-ct-body{display:block;min-width:0;flex:1 1 auto}
.wf-ct-body em{display:block;font-style:normal;font-family:'Inter',sans-serif;font-weight:700;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(245,244,240,.5);margin-bottom:8px}
.wf-ct-body b{display:block;font-family:'Inter',sans-serif;font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-.01em;color:var(--wf-white);word-break:break-word;transition:color .3s}
.wf-ct-line:hover .wf-ct-body b{color:var(--wf-amber)}
.wf-ct-body i{display:block;margin-top:7px;font-style:normal;font-family:'Inter',sans-serif;font-weight:300;font-size:13px;line-height:1.55;color:var(--wf-grey)}
.wf-ct-go{flex:0 0 auto;display:flex;align-items:center}
.wf-ct-go svg{width:22px;height:22px;stroke:var(--wf-amber);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.wf-ct-line:hover .wf-ct-go svg{transform:translateX(4px)}
/* ---- left: footer lockup ---- */
/* the widget wrapper takes margin-top:auto (the lockup is not itself a flex
child of the column) so the two columns finish level, as in the reference */
.wf-ct-side > .elementor-element:last-child{margin-top:auto}
.wf-ct-foot{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:40px;padding-top:34px;border-top:1px solid rgba(167,173,180,.16)}
.wf-ct-script{position:relative;padding-bottom:16px}
.wf-ct-script span{display:block;font-family:'Caveat','Segoe Script',cursive;font-weight:600;font-size:40px;line-height:.92;letter-spacing:0;color:var(--wf-white)}
.wf-ct-script span:last-of-type{padding-left:34px}
.wf-ct-swash{position:absolute;left:34px;bottom:0;width:130px;height:12px;stroke:var(--wf-amber);fill:none;stroke-width:2.4;stroke-linecap:round}
.wf-ct-words{list-style:none;margin:0;padding:0}
.wf-ct-words li{font-family:'Inter',sans-serif;font-weight:600;font-size:10px;letter-spacing:.22em;text-transform:uppercase;line-height:1.9;color:var(--wf-grey)}
/* ---- right: panel head ---- */
.wf-ct-head{display:flex;align-items:flex-start;justify-content:space-between;gap:28px}
.wf-ct-headl{min-width:0}
.wf-ct-head .wf-tag{margin-bottom:18px}
.wf-ct-head h2{margin:0;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:46px;line-height:1.02;letter-spacing:-.04em;text-transform:uppercase;color:var(--wf-white)}
.wf-ct-words-r{flex:0 0 auto;padding-left:20px;border-left:2px solid rgba(245,244,240,.32);margin-top:6px}
.wf-ct-words-r li{line-height:2;color:rgba(245,244,240,.75)}
/* ---- right: reassurance strip ---- */
.wf-ct-assure{display:flex;align-items:center;margin-top:34px;padding-top:26px;border-top:1px solid rgba(167,173,180,.16)}
.wf-ct-as{flex:1 1 0;display:flex;align-items:center;gap:13px;min-width:0;padding:0 22px}
.wf-ct-as:first-child{padding-left:0}
.wf-ct-as:last-child{padding-right:0}
.wf-ct-as+.wf-ct-as{border-left:1px solid rgba(167,173,180,.16)}
.wf-ct-as svg{flex:0 0 auto;width:21px;height:21px;stroke:var(--wf-amber);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wf-ct-as span{display:block;min-width:0}
.wf-ct-as b,.wf-ct-as i{display:block;font-style:normal;font-family:'Inter',sans-serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;line-height:1.5}
.wf-ct-as b{font-weight:600;color:var(--wf-grey)}
.wf-ct-as i{font-weight:700;color:var(--wf-white)}
.wf-ct-as i a{color:var(--wf-amber)!important;text-decoration:none!important;border-bottom:1px solid rgba(255,146,0,.4)}
.wf-ct-as i a:hover{border-bottom-color:var(--wf-amber)}
/* ---- right: the form itself (CF7 form 34) ----
Scoped to .wf-ct-form so the generic .wf-form styling stays intact for any
other placement of the form. */
.wf-ct-form .wpcf7{margin:0}
.wf-ct-form .wpcf7 form{display:block;margin:0}
.wf-ct-form .wf-cf-f{display:block;margin:0 0 20px;cursor:text}
.wf-ct-form .wf-cf-lab{display:block;margin:0 0 11px;font-family:'Inter',sans-serif;font-weight:700;font-size:10px;line-height:1;letter-spacing:.25em;text-transform:uppercase;color:var(--wf-grey)}
.wf-ct-form .wpcf7-form-control-wrap{position:relative;display:block;margin:0}
.wf-ct-form .wpcf7-form-control-wrap::before{content:'';position:absolute;left:19px;top:50%;transform:translateY(-50%);width:20px;height:20px;background-repeat:no-repeat;background-position:center;background-size:20px 20px;opacity:.75;pointer-events:none;transition:opacity .25s}
.wf-ct-form .wf-cf-f:focus-within .wpcf7-form-control-wrap::before{opacity:1}
.wf-ct-form .wf-cf-chat .wpcf7-form-control-wrap::before{top:21px;transform:none}
.wf-ct-form input:not([type=submit]),.wf-ct-form textarea{width:100%;background:rgba(245,244,240,.03);border:1px solid rgba(167,173,180,.18);border-radius:10px;color:var(--wf-white);font-family:'Inter',sans-serif;font-weight:400;font-size:15px;outline:0;box-shadow:none;transition:border-color .25s,background .25s;-webkit-appearance:none;appearance:none;color-scheme:dark;margin:0}
.wf-ct-form textarea{resize:vertical}
.wf-ct-form ::placeholder{color:rgba(167,173,180,.55)}
.wf-ct-form input:focus,.wf-ct-form textarea:focus{border-color:var(--wf-amber);background:rgba(255,146,0,.04)}
.wf-ct-form .wpcf7-not-valid{border-color:#d63638!important}
.wf-ct-form .wpcf7-not-valid-tip{margin-top:8px;font-family:'Inter',sans-serif;font-weight:400;font-size:12px;letter-spacing:0;text-transform:none;color:#ff6b6d}
.wf-ct-form .wpcf7-spinner{display:block;margin:14px auto 0}
.wf-ct-form .wpcf7-response-output{border:1px solid var(--wf-amber)!important;border-radius:10px;color:var(--wf-white);margin:22px 0 0!important;padding:14px 18px!important;font-family:'Inter',sans-serif;font-size:13px;line-height:1.5}
/* submit: a (see waveform-contact.php) so the arrow can sit inside it.
Astra styles bare buttons, hence the forced background. */
.wf-ct-form button[type=submit]{display:flex;align-items:center;justify-content:center;gap:13px;width:100%;margin-top:30px;padding:23px 28px;background:var(--wf-amber)!important;background-color:var(--wf-amber)!important;color:var(--wf-black)!important;border:0!important;border-radius:10px;font-family:'Inter',sans-serif;font-weight:900;font-size:13px;line-height:1;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .3s}
.wf-ct-form button[type=submit]:hover{background:var(--wf-white)!important;background-color:var(--wf-white)!important;color:var(--wf-black)!important}
.wf-ct-form button[type=submit][disabled]{opacity:.55;cursor:default}
.wf-ct-form .wf-cf-arrow{flex:0 0 auto;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.wf-ct-form button[type=submit]:hover .wf-cf-arrow{transform:translateX(4px)}
/* ---- the rest of the contact page ---- */
.wf-ct-faq .wf-linkline{white-space:nowrap}
@media(max-width:767px){.wf-ct-faq .wf-linkline{margin-top:24px}}
/* ---- responsive ---- */
@media(max-width:1024px){
.wf-ct-head h2{font-size:38px}
.wf-ct-foot{margin-top:34px}
}
@media(max-width:767px){
.wf-ct-head{flex-direction:column;gap:20px}
.wf-ct-head h2{font-size:28px}
.wf-ct-words-r{padding-left:0;border-left:0;border-top:1px solid rgba(245,244,240,.22);padding-top:14px;margin-top:0}
.wf-ct-words-r li{line-height:1.9}
.wf-ct-line{gap:16px;padding:18px 18px;border-radius:12px}
.wf-ct-badge{width:46px;height:46px}
.wf-ct-badge svg{width:20px;height:20px}
.wf-ct-body b{font-size:17px}
.wf-ct-go svg{width:18px;height:18px}
.wf-ct-foot{flex-direction:column;align-items:flex-start;gap:24px}
.wf-ct-script span{font-size:34px}
.wf-ct-assure{flex-direction:column;align-items:flex-start;gap:16px;margin-top:28px}
.wf-ct-as{flex:0 0 auto;width:100%;padding:0}
.wf-ct-as+.wf-ct-as{border-left:0;border-top:1px solid rgba(167,173,180,.14);padding-top:16px}
}
/* wf-foot-contact-firstline: multi-line row aligns its badge to the first text line */
.wf-footer .wf-foot-contact .elementor-icon-list-item:last-child a,.wf-footer .wf-foot-contact .elementor-icon-list-item:last-child{align-items:flex-start!important}
.wf-footer .wf-foot-contact .elementor-icon-list-item:last-child .elementor-icon-list-icon{margin-top:-11px!important}
/* ---------- BOOKING FORM (page 191, [wf_booking_form]), v2 ----------
Three columns: step rail / form / angled photo panel. The panel has to reach
the right edge of the viewport, so the Elementor container's own gutter is
removed and the side padding moves onto the rail and form columns instead.
Boxed containers carry their padding on .e-con-inner, not .e-con. */
.wf-bk-section,.wf-bk-section > .e-con-inner{max-width:none!important;padding-left:0!important;padding-right:0!important}
/* .ast-container adds 20px of its own; the panel eats it so it reaches the page edge */
.wf-bk-aside{margin-right:-20px}
.wf-bk{display:grid;grid-template-columns:minmax(330px,392px) minmax(0,1fr) minmax(300px,24vw);align-items:stretch;gap:0}
/* step rail */
.wf-bk-side{display:flex;flex-direction:column;justify-content:space-between;gap:56px;padding:4px 36px 4px 44px;border-right:1px solid var(--wf-graph)}
.wf-bk-rail{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.wf-bk-railitem{display:flex;align-items:center;gap:16px;padding:14px 18px;border:1px solid transparent;border-radius:10px;transition:border-color .3s,background .3s}
.wf-bk-railitem em{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(167,173,180,.3);font-style:normal;font-family:'Inter',sans-serif;font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--wf-grey);transition:background .3s,border-color .3s,color .3s}
.wf-bk-railtxt{display:block;min-width:0}
.wf-bk-railtxt b{display:block;font-family:'Inter',sans-serif;font-weight:700;font-size:15px;line-height:1.2;color:var(--wf-white)}
.wf-bk-railtxt i{display:block;margin-top:5px;font-style:normal;font-family:'Inter',sans-serif;font-weight:300;font-size:12px;line-height:1.4;color:var(--wf-grey)}
.wf-bk-railitem.is-on{border-color:var(--wf-amber);background:rgba(255,146,0,.06)}
.wf-bk-railitem.is-on em{background:var(--wf-amber);border-color:var(--wf-amber);color:var(--wf-black)}
.wf-bk-railitem.is-done{cursor:pointer}
.wf-bk-railitem.is-done em{border-color:var(--wf-amber);color:var(--wf-amber)}
.wf-bk-railitem.is-done:hover{background:rgba(245,244,240,.04)}
.wf-bk-sidefoot{padding:0 0 4px 18px}
.wf-bk-sidefoot span{display:block;max-width:260px;font-family:'Inter',sans-serif;font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;line-height:1.5;color:var(--wf-white)}
.wf-bk-sidefoot span::before{content:'';display:block;width:40px;height:2px;background:var(--wf-amber);margin-bottom:18px}
.wf-bk-sidefoot p{margin:14px 0 0;max-width:250px;font-family:'Inter',sans-serif;font-weight:300;font-size:13px;line-height:1.6;color:var(--wf-grey)}
/* form column */
.wf-bk-main{min-width:0;padding:4px 56px 4px 52px}
.wf-bk-form{margin:0}
.wf-bk-step{display:none;border:0;padding:0;margin:0;min-width:0}
.wf-bk-step.is-on{display:block}
.wf-bk-step legend{display:block;width:100%;padding:0;margin:0 0 40px}
.wf-bk-step legend em{display:block;font-style:normal;font-family:'Inter',sans-serif;font-weight:700;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--wf-amber);margin-bottom:16px}
.wf-bk-step legend b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:52px;line-height:1.02;letter-spacing:-.03em;color:var(--wf-white)}
.wf-bk-step legend span{display:block;margin-top:14px;max-width:640px;font-family:'Inter',sans-serif;font-weight:300;font-size:16px;line-height:1.6;color:var(--wf-grey)}
/* fields */
.wf-bk-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px;margin:0 0 26px}
.wf-bk-f{display:block;margin:0 0 26px;font-family:'Inter',sans-serif;font-weight:700;font-size:11px;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:var(--wf-grey)}
.wf-bk-grid .wf-bk-f{margin-bottom:0}
.wf-bk-f b{color:var(--wf-amber)}
.wf-bk-opt{color:var(--wf-grey);opacity:.5;letter-spacing:.08em;text-transform:none;font-weight:400}
.wf-bk-fw{position:relative;display:block;margin-top:12px}
.wf-bk-f input,.wf-bk-f select,.wf-bk-f textarea{display:block;width:100%;background:rgba(245,244,240,.02);border:1px solid rgba(167,173,180,.22);border-radius:8px;color:var(--wf-white);font-family:'Inter',sans-serif;font-weight:400;font-size:16px;letter-spacing:0;text-transform:none;outline:0;transition:border-color .25s,background .25s;-webkit-appearance:none;appearance:none;color-scheme:dark}
.wf-bk-f textarea{resize:vertical}
.wf-bk-f ::placeholder{color:rgba(167,173,180,.55)}
.wf-bk-f input:focus,.wf-bk-f select:focus,.wf-bk-f textarea:focus{border-color:var(--wf-amber);background:rgba(255,146,0,.04)}
.wf-bk-f.is-bad input,.wf-bk-f.is-bad select,.wf-bk-f.is-bad textarea{border-color:#d63638}
.wf-bk-help{display:block;margin-top:10px;font-style:normal;font-family:'Inter',sans-serif;font-weight:300;font-size:13px;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--wf-grey);opacity:.75}
/* leading icon sits inside the control; the padding override lives in the FORM
FIELD SIZING block below, which is !important and would otherwise win */
.wf-bk-fw-ico .wf-bk-i{position:absolute;left:19px;top:50%;transform:translateY(-50%);width:19px;height:19px;stroke:var(--wf-grey);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:stroke .25s}
.wf-bk-fw-ico:focus-within .wf-bk-i{stroke:var(--wf-amber)}
/* services checklist */
.wf-bk-checks{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wf-bk-check{position:relative;display:flex;align-items:center;gap:14px;padding:18px 20px;border:1px solid rgba(167,173,180,.22);border-radius:8px;cursor:pointer;transition:border-color .3s,background .3s}
.wf-bk-check:hover{border-color:var(--wf-grey)}
.wf-bk-check input{position:absolute;opacity:0;width:0;height:0}
.wf-bk-check span{font-family:'Inter',sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--wf-grey);transition:color .3s}
.wf-bk-check span::before{content:'';display:inline-block;width:15px;height:15px;margin-right:14px;vertical-align:-3px;border:1px solid rgba(167,173,180,.4);border-radius:4px;transition:background .3s,border-color .3s}
.wf-bk-check:has(input:checked){border-color:var(--wf-amber);background:rgba(255,146,0,.07)}
.wf-bk-check:has(input:checked) span{color:var(--wf-white)}
.wf-bk-check:has(input:checked) span::before{background:var(--wf-amber);border-color:var(--wf-amber)}
.wf-bk-check input:focus-visible+span{color:var(--wf-white)}
.wf-bk-hint{margin:18px 0 0;font-family:'Inter',sans-serif;font-weight:300;font-size:13px;color:var(--wf-grey);opacity:.75}
/* review panel */
.wf-bk-review{margin:32px 0 0;padding:28px 28px 8px;border:1px solid rgba(167,173,180,.22);border-radius:10px;background:rgba(245,244,240,.02)}
.wf-bk-review:empty{display:none}
.wf-bk-review .wf-cat{display:block;margin-bottom:20px}
.wf-bk-review dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.wf-bk-review dl>div{padding:0 0 18px}
.wf-bk-review dt{font-family:'Inter',sans-serif;font-weight:700;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--wf-amber);margin-bottom:7px}
.wf-bk-review dd{margin:0;font-family:'Inter',sans-serif;font-weight:300;font-size:14px;line-height:1.5;color:var(--wf-white);word-break:break-word}
/* buttons + reassurance line */
.wf-bk-nav{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:44px}
.wf-bk-btn{display:inline-flex;align-items:center;gap:13px;background:var(--wf-amber);color:var(--wf-black)!important;border:0;border-radius:6px;font-family:'Inter',sans-serif;font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;line-height:1;padding:20px 34px;cursor:pointer;text-decoration:none!important;transition:background .3s,color .3s}
.wf-bk-btn .wf-bk-i{flex:0 0 auto;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.wf-bk-btn:hover .wf-bk-i-arrow{transform:translateX(4px)}
.wf-bk-btn:hover .wf-bk-i-arrow-l{transform:translateX(-4px)}
.wf-bk-btn[disabled]{opacity:.5;cursor:default}
.wf-bk-btn-o{background:transparent;color:var(--wf-white)!important;border:1px solid var(--wf-graph)}
.wf-bk-secure{display:flex;align-items:center;flex:1 1 300px;min-width:0;gap:11px;margin:0;font-family:'Inter',sans-serif;font-weight:300;font-size:13px;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--wf-grey)}
.wf-bk-secure .wf-bk-i{flex:0 0 auto;width:18px;height:18px;stroke:var(--wf-grey);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.wf-bk-note{margin:20px 0 0;font-family:'Inter',sans-serif;font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--wf-grey);opacity:.6}
.wf-bk-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* angled photo panel */
.wf-bk-aside{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:560px;padding:52px 40px 52px 88px;background:var(--wf-graph) center/cover no-repeat;clip-path:polygon(58px 0,100% 0,100% 100%,0 100%);overflow:hidden}
.wf-bk-aside::before{content:'';position:absolute;inset:0;background:linear-gradient(200deg,rgba(5,5,5,.86) 0%,rgba(5,5,5,.5) 46%,rgba(5,5,5,.9) 100%)}
.wf-bk-aside>*{position:relative}
.wf-bk-aside-top{text-align:right}
.wf-bk-aside-top span{display:inline-block;font-family:'Inter',sans-serif;font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;line-height:2;color:var(--wf-white)}
.wf-bk-aside-top span::before{content:'';display:block;width:44px;height:2px;background:var(--wf-amber);margin:0 0 18px auto}
.wf-bk-aside-bot{text-align:right}
.wf-bk-aside-bot b,.wf-bk-aside-bot em{display:block;font-style:normal;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px;line-height:1.15;letter-spacing:-.02em;text-transform:uppercase}
.wf-bk-aside-bot b{color:var(--wf-white)}
.wf-bk-aside-bot em{color:var(--wf-amber)}
.wf-bk-aside-bot::after{content:'';display:block;width:56px;height:2px;background:var(--wf-amber);margin:16px 0 0 auto}
/* confirmation */
.wf-bk-done{max-width:760px;margin:0 auto;border:1px solid var(--wf-amber);border-radius:12px;padding:64px 56px;background:var(--wf-stage)}
.wf-bk-done .wf-cat{display:block;margin-bottom:24px}
.wf-bk-done h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:38px;line-height:1.1;letter-spacing:-.03em;text-transform:uppercase;color:var(--wf-white);margin:0 0 20px}
.wf-bk-done p{font-family:'Inter',sans-serif;font-weight:300;font-size:16px;line-height:1.7;color:var(--wf-grey);margin:0 0 40px}
.wf-bk-done-btns{display:flex;flex-wrap:wrap;gap:16px}
/* ---- responsive ---- */
@media(max-width:1300px){
.wf-bk{grid-template-columns:minmax(260px,296px) minmax(0,1fr)}
.wf-bk-aside{display:none}
.wf-bk-main{padding-right:56px}
}
@media(max-width:1024px){
/* minmax(0,1fr) and min-width:0 keep the horizontally scrolling rail inside
the grid column instead of stretching the page (it overflowed to 700px) */
.wf-bk{grid-template-columns:minmax(0,1fr)}
.wf-bk-side{min-width:0;flex-direction:column;gap:0;padding:0 40px 28px;border-right:0;border-bottom:1px solid var(--wf-graph)}
.wf-bk-rail{min-width:0;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;gap:8px;scrollbar-width:none;-ms-overflow-style:none}
.wf-bk-rail::-webkit-scrollbar{display:none}
.wf-bk-railitem{flex:0 0 auto}
.wf-bk-railtxt i{display:none}
.wf-bk-sidefoot{display:none}
.wf-bk-main{padding:40px 40px 0}
.wf-bk-step legend b{font-size:38px}
.wf-bk-step legend{margin-bottom:32px}
}
@media(max-width:767px){
.wf-bk-side{padding:0 24px 22px}
.wf-bk-main{padding:30px 24px 0}
.wf-bk-step legend b{font-size:30px}
.wf-bk-step legend span{font-size:15px}
.wf-bk-step legend em{font-size:10px;margin-bottom:12px}
.wf-bk-grid{grid-template-columns:1fr}
.wf-bk-checks{grid-template-columns:1fr}
.wf-bk-review dl{grid-template-columns:1fr}
.wf-bk-railitem{padding:11px 14px;gap:12px}
.wf-bk-railitem em{width:32px;height:32px;font-size:11px}
.wf-bk-railtxt b{font-size:13px}
.wf-bk-done{margin:0 24px;padding:40px 24px}
.wf-bk-done h2{font-size:26px}
}
@media(max-width:600px){
.wf-bk-nav{flex-direction:column;align-items:stretch;gap:14px}
.wf-bk-btn{width:100%;justify-content:center}
.wf-bk-secure{font-size:12px}
}
/* wf-foot-badge-center: kill Elementor icon-spacing padding so the glyph centres in the circle */
.wf-footer .wf-foot-contact .elementor-icon-list-icon{padding:0!important;margin-right:0!important}
.wf-footer .wf-foot-contact .elementor-icon-list-icon svg{margin:0!important;display:block!important}
/* wf-foot-tighten: remove dead space between columns, divider and copyright */
@media(min-width:1025px){
.wf-footer .elementor-element-9a88bda{margin-bottom:40px!important}
.wf-footer .elementor-element-ba26f48{padding-top:26px!important}
}
@media(max-width:1024px){
.wf-footer .elementor-element-9a88bda{margin-bottom:32px!important}
.wf-footer .elementor-element-ba26f48{padding-top:22px!important}
}
/* wf-foot-nobottom: drop the 96px dead space under the bottom bar */
.wf-footer > .e-con-inner{padding-bottom:0!important}
.wf-footer .elementor-element-ba26f48{padding-bottom:0!important;align-items:center!important}
/* dark select popups: without an explicit option background/colour the native
list renders dark-on-dark and looks empty. Applies to the booking form and the
CF7 quote form, which share the same dark field styling. */
.wf-bk-f select option,.wf-form select option{background:#101317;color:#F5F4F0}
.wf-bk-f select option:checked,.wf-form select option:checked{background:#FF9200;color:#050505}
.wf-bk-f select,.wf-form select{color-scheme:dark}
/* wf-foot-v3 */
.wf-foot-tag{font-family:'Inter',sans-serif;font-weight:700!important;font-size:24px!important;line-height:1.25!important;color:var(--wf-white)!important;margin:0 0 14px!important}
.wf-foot-tag b{color:var(--wf-amber)}
.wf-foot-blurb{font-size:14px!important;line-height:1.65!important;color:var(--wf-grey)!important;margin:0!important}
/* wf-foot-v3b */
.wf-foot-wa{display:inline-flex;align-items:center;gap:12px;background:var(--wf-amber);color:#050505;border-radius:999px;padding:16px 26px;margin-top:6px;font-family:'Inter',sans-serif;font-weight:700;font-size:14px;letter-spacing:.02em;transition:transform .2s ease,filter .2s ease}
.wf-foot-wa:hover{transform:translateY(-2px);filter:brightness(1.06)}
.wf-foot-wa svg{width:22px;height:22px;fill:#050505;flex-shrink:0}
.wf-foot-wa i{width:16px;height:16px;flex-shrink:0;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,, so force both properties */
background:linear-gradient(135deg,#FFA726 0%,#FF9200 52%,#E07B00 100%)!important;
background-color:#FF9200!important;color:#0A0A0A!important;
box-shadow:0 6px 18px rgba(255,146,0,.28);transition:transform .2s ease,box-shadow .2s ease;
}
.wf-sys-search button:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(255,146,0,.38)}
.wf-sys-search button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* ---- route cards ---- */
.wf-sys-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
gap:12px;text-align:left;margin:0 0 clamp(30px,4vw,44px);
}
.wf-sys-card{
position:relative;display:flex;flex-direction:column;gap:4px;
padding:20px 46px 20px 20px;border-radius:14px;text-decoration:none;
background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);
transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.wf-sys-card:hover{background:rgba(255,146,0,.08);border-color:rgba(255,146,0,.5);transform:translateY(-2px)}
.wf-sys-card-t{font-size:15px;font-weight:700;color:#fff;letter-spacing:.01em}
.wf-sys-card-d{font-size:13px;line-height:1.5;color:var(--wf-grey,#A7ADB4)}
.wf-sys-card-go{
position:absolute;right:16px;top:50%;transform:translateY(-50%);
width:18px;height:18px;fill:none;stroke:var(--wf-amber,#FF9200);
stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
opacity:0;transition:opacity .25s ease,transform .25s ease;
}
.wf-sys-card:hover .wf-sys-card-go{opacity:1;transform:translateY(-50%) translateX(3px)}
.wf-sys-foot{margin:0;font-size:14px;color:var(--wf-grey,#A7ADB4)}
.wf-sys-foot a{color:var(--wf-amber,#FF9200);text-decoration:none;border-bottom:1px solid rgba(255,146,0,.35)}
.wf-sys-foot a:hover{border-bottom-color:currentColor}
/* ---- search results ---- */
.wf-sys-results{list-style:none;margin:0 0 28px;padding:0;text-align:left;display:grid;gap:10px}
.wf-sys-res-link{
position:relative;display:flex;align-items:center;gap:16px;
padding:14px 46px 14px 14px;border-radius:14px;text-decoration:none;
background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);
transition:background .25s ease,border-color .25s ease;
}
.wf-sys-res-link:hover{background:rgba(255,146,0,.07);border-color:rgba(255,146,0,.45)}
.wf-sys-res-img{flex:0 0 auto;width:88px;height:66px;border-radius:9px;overflow:hidden;background:var(--wf-stage,#101317)}
.wf-sys-res-img img{width:100%;height:100%;object-fit:cover;display:block}
.wf-sys-res-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.wf-sys-res-kind{
font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--wf-amber,#FF9200);
}
.wf-sys-res-t{font-size:17px;font-weight:700;color:#fff;line-height:1.25}
.wf-sys-res-x{font-size:13.5px;line-height:1.55;color:var(--wf-grey,#A7ADB4)}
.wf-sys-none{margin:0 0 26px}
.wf-sys-none-h{margin:0 0 10px;font-size:clamp(19px,2.4vw,24px);font-weight:700;color:#fff}
.wf-sys-none-h em{font-style:normal;color:var(--wf-amber,#FF9200)}
.wf-sys-pag{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.wf-sys-pag .page-numbers{
display:inline-flex;align-items:center;justify-content:center;
min-width:40px;height:40px;padding:0 13px;border-radius:9px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
color:var(--wf-off,#F5F4F0);text-decoration:none;font-size:14px;font-weight:600;
transition:background .2s ease,border-color .2s ease;
}
.wf-sys-pag .page-numbers:hover{background:rgba(255,146,0,.1);border-color:rgba(255,146,0,.45)}
.wf-sys-pag .page-numbers.current{background:var(--wf-amber,#FF9200);border-color:var(--wf-amber,#FF9200);color:#0A0A0A}
@media(max-width:600px){
.wf-sys-res-link{padding:12px 38px 12px 12px;gap:12px}
.wf-sys-res-img{width:66px;height:54px}
.wf-sys-res-t{font-size:15.5px}
.wf-sys-res-x{display:none}
.wf-sys-search{flex-wrap:nowrap;padding-left:14px}
.wf-sys-search button span{display:none}
.wf-sys-search button{padding:12px 15px!important}
}
/* ---------- LEGAL PAGES: PRIVACY + TERMS (waveform-legal.php) ----------
Two columns: a sticky contents rail and the document. The rail is built from
the s at render time by wf_legal_anchor_headings(), so it can never drift
out of step with the headings. Below 1000px the rail becomes a plain list at
the top, because a sticky sidebar on a phone is just lost height. */
.wf-legal{
display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);
gap:clamp(32px,5vw,72px);align-items:start;
max-width:1120px;margin:0 auto;
}
/* ---- contents rail ---- */
.wf-legal-rail{position:sticky;top:120px}
.wf-legal-rail-h{
margin:0 0 16px;font-size:11px;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--wf-amber,#FF9200);
}
.wf-legal-toc{list-style:none;margin:0 0 28px;padding:0;counter-reset:none}
.wf-legal-toc li{margin:0}
.wf-legal-toc a{
display:flex;gap:10px;padding:7px 0;text-decoration:none;
font-size:13.5px;line-height:1.45;color:var(--wf-grey,#A7ADB4);
border-bottom:1px solid rgba(255,255,255,.05);
transition:color .2s ease;
}
.wf-legal-toc a span{
flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.08em;
color:#5E656D;padding-top:2px;transition:color .2s ease;
}
.wf-legal-toc a:hover{color:#fff}
.wf-legal-toc a:hover span{color:var(--wf-amber,#FF9200)}
.wf-legal-updated{
margin:0;font-size:12px;line-height:1.7;color:#6F767E;
padding-top:16px;border-top:1px solid rgba(255,255,255,.07);
}
.wf-legal-updated b{color:var(--wf-off,#F5F4F0);font-weight:600}
/* ---- the document ---- */
.wf-legal-body{max-width:72ch;font-size:16px;line-height:1.75;color:#BCC2C9}
.wf-legal-body > :first-child{margin-top:0}
.wf-legal-intro{
font-size:clamp(17px,1.5vw,19.5px)!important;line-height:1.62!important;
color:var(--wf-off,#F5F4F0)!important;font-weight:300;
padding:0 0 28px;margin:0 0 36px;
border-bottom:1px solid rgba(255,255,255,.1);
}
.wf-legal-body h2{
font-family:'Space Grotesk',system-ui,sans-serif;
font-size:clamp(21px,2.1vw,26px);font-weight:700;line-height:1.2;
letter-spacing:-.015em;color:#fff;
margin:52px 0 16px;padding-top:18px;
border-top:1px solid rgba(255,255,255,.08);
scroll-margin-top:118px; /* clear the fixed header when jumped to */
}
.wf-legal-body h2:first-of-type{margin-top:0}
.wf-legal-body h3{
font-size:16px;font-weight:700;color:var(--wf-off,#F5F4F0);
margin:28px 0 10px;letter-spacing:.005em;
}
.wf-legal-body p{margin:0 0 18px}
.wf-legal-body strong{color:var(--wf-off,#F5F4F0);font-weight:600}
.wf-legal-body a{color:var(--wf-amber,#FF9200);text-decoration:none;border-bottom:1px solid rgba(255,146,0,.3)}
.wf-legal-body a:hover{border-bottom-color:currentColor}
.wf-legal-body ul,.wf-legal-body ol{margin:0 0 20px;padding:0 0 0 2px;list-style:none}
.wf-legal-body ul li,.wf-legal-body ol li{position:relative;padding-left:24px;margin:0 0 11px}
.wf-legal-body ul li::before{
content:"";position:absolute;left:3px;top:11px;width:6px;height:6px;
border-radius:50%;background:var(--wf-amber,#FF9200);
}
.wf-legal-body ol{counter-reset:wflg}
.wf-legal-body ol li{counter-increment:wflg}
.wf-legal-body ol li::before{
content:counter(wflg);position:absolute;left:0;top:0;
font-size:11px;font-weight:700;color:var(--wf-amber,#FF9200);
}
@media(max-width:1000px){
.wf-legal{grid-template-columns:1fr;gap:34px}
.wf-legal-rail{
position:static;padding:20px;border-radius:14px;
background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
}
.wf-legal-toc{
margin-bottom:18px;
columns:2;column-gap:26px;
}
.wf-legal-toc a{border-bottom:0;padding:5px 0;break-inside:avoid}
.wf-legal-updated{padding-top:14px}
}
@media(max-width:560px){
.wf-legal-toc{columns:1}
.wf-legal-body{font-size:15.5px}
}
/* ---- legal page hero + section (waveform-legal-tpl.php) ----
These pages are not Elementor documents, so the padding that an Elementor
container would carry has to live here. */
.wf-lg-hero{
background:#050505;border-bottom:1px solid #1B2026;
padding:220px 64px 96px;
}
.wf-lg-section{background:#050505;padding:88px 64px 112px}
.wf-lg-in{max-width:1600px;margin:0 auto}
.wf-lg-hero h1{
font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;
font-size:clamp(38px,6vw,80px);line-height:.92;letter-spacing:-.04em;
text-transform:uppercase;color:#F5F4F0;margin:0 0 28px;
}
.wf-lg-hero .wf-tag{margin-bottom:32px}
.wf-lg-lede{
max-width:660px;margin:0;font-family:Inter,system-ui,sans-serif;
font-size:clamp(16px,1.3vw,18px);font-weight:300;line-height:1.65;
color:#A7ADB4;
}
@media(max-width:1024px){
.wf-lg-hero{padding:180px 40px 80px}
.wf-lg-section{padding:72px 40px 88px}
}
@media(max-width:767px){
.wf-lg-hero{padding:150px 24px 64px}
.wf-lg-section{padding:56px 24px 72px}
}
/* ---------- JOURNAL INDEX (waveform-blog.php, page 176) ----------
Laid out as a show rundown: a lead story, then numbered cues. The cue number
is decorative and comes from PHP rather than a CSS counter, so it stays correct
across pagination instead of restarting at 01 on page two. */
.wf-bl{max-width:1280px;margin:0 auto}
/* shared flag: amber dot + label */
.wf-bl-flag{
display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;
font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
color:var(--wf-amber,#FF9200);
}
.wf-bl-flag i{
width:7px;height:7px;border-radius:50%;background:currentColor;
box-shadow:0 0 0 4px rgba(255,146,0,.16);
animation:wfBlPulse 2.6s ease-in-out infinite;
}
@keyframes wfBlPulse{0%,100%{box-shadow:0 0 0 4px rgba(255,146,0,.16)}50%{box-shadow:0 0 0 8px rgba(255,146,0,.05)}}
@media(prefers-reduced-motion:reduce){.wf-bl-flag i{animation:none}}
/* ---------------------------------------------------------- lead story ---- */
.wf-bl-lead{margin:0 0 clamp(36px,5vw,60px)}
.wf-bl-lead-link{
display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
align-items:stretch;gap:0;text-decoration:none;overflow:hidden;
border:1px solid rgba(255,255,255,.1);border-radius:20px;
background:linear-gradient(135deg,rgba(255,146,0,.07) 0%,rgba(255,255,255,.028) 46%,rgba(255,255,255,.02) 100%);
transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
.wf-bl-lead-link:hover{
border-color:rgba(255,146,0,.5);transform:translateY(-3px);
box-shadow:0 22px 50px rgba(0,0,0,.45);
}
.wf-bl-lead-media{position:relative;overflow:hidden;min-height:340px;background:var(--wf-stage,#101317)}
.wf-bl-lead-media img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.wf-bl-lead-link:hover .wf-bl-lead-media img{transform:scale(1.045)}
/* amber wash so the panel and the photo read as one object */
.wf-bl-lead-media::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(5,5,5,0) 55%,rgba(5,5,5,.72) 100%);
}
.wf-bl-lead-body{
display:flex;flex-direction:column;align-items:flex-start;
padding:clamp(26px,3.4vw,44px);
}
.wf-bl-lead-meta,.wf-bl-meta{
display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px;
font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:#7C838B;
}
.wf-bl-lead-meta em,.wf-bl-meta em{font-style:normal;color:var(--wf-amber,#FF9200);font-weight:700}
.wf-bl-lead-meta > *+*::before,.wf-bl-meta > *+*::before{
content:"";display:inline-block;width:3px;height:3px;border-radius:50%;
background:currentColor;margin-right:10px;vertical-align:middle;opacity:.55;
}
.wf-bl-lead-t{
display:block;font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;
font-size:clamp(24px,2.9vw,38px);line-height:1.12;letter-spacing:-.022em;
color:#fff;margin:0 0 14px;
}
.wf-bl-lead-x{
display:block;font-size:15.5px;line-height:1.68;color:var(--wf-grey,#A7ADB4);
margin:0 0 24px;max-width:52ch;
}
.wf-bl-lead-link .wf-bl-more{margin-top:auto}
/* ------------------------------------------------------------- filter ---- */
.wf-bl-filter{
display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(22px,3vw,30px);
padding:0 0 clamp(22px,3vw,30px);border-bottom:1px solid rgba(255,255,255,.08);
}
.wf-bl-chip{
display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
border-radius:999px;text-decoration:none;
border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.03);
font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
color:var(--wf-grey,#A7ADB4);
transition:border-color .22s ease,color .22s ease,background .22s ease;
}
.wf-bl-chip span{
font-size:10.5px;font-weight:700;color:#6F767E;
padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.07);
}
.wf-bl-chip:hover{color:#fff;border-color:rgba(255,146,0,.45)}
.wf-bl-chip.is-on{
background:var(--wf-amber,#FF9200);border-color:var(--wf-amber,#FF9200);color:#0A0A0A;
}
.wf-bl-chip.is-on span{background:rgba(0,0,0,.18);color:#0A0A0A}
/* --------------------------------------------------------------- grid ---- */
.wf-bl-grid{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fill,minmax(304px,1fr));
gap:clamp(18px,2.2vw,28px);
}
.wf-bl-card{margin:0}
.wf-bl-link{
display:flex;flex-direction:column;height:100%;text-decoration:none;
border:1px solid rgba(255,255,255,.09);border-radius:16px;overflow:hidden;
background:rgba(255,255,255,.028);
transition:border-color .28s ease,transform .28s ease,background .28s ease;
}
.wf-bl-link:hover{border-color:rgba(255,146,0,.45);transform:translateY(-3px);background:rgba(255,146,0,.045)}
.wf-bl-media{
position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
background:var(--wf-stage,#101317);
}
.wf-bl-media img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.wf-bl-link:hover .wf-bl-media img{transform:scale(1.05)}
/* the cue number, bottom-left over the image */
.wf-bl-cue{
position:absolute;left:12px;bottom:12px;z-index:1;
display:inline-flex;align-items:center;justify-content:center;
min-width:34px;height:26px;padding:0 9px;border-radius:7px;
font-family:'Space Grotesk',system-ui,sans-serif;
font-size:12px;font-weight:700;letter-spacing:.06em;
color:#0A0A0A;background:var(--wf-amber,#FF9200);
box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.wf-bl-body{display:flex;flex-direction:column;flex:1 1 auto;padding:20px}
.wf-bl-t{
display:block;font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;
font-size:19px;line-height:1.25;letter-spacing:-.012em;color:#fff;margin:0 0 10px;
}
.wf-bl-exc{display:block;font-size:14px;line-height:1.62;color:var(--wf-grey,#A7ADB4);margin:0 0 18px}
.wf-bl-foot{
display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.07);
}
.wf-bl-read{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6F767E}
.wf-bl-none{margin:0;padding:34px 0;text-align:center;color:var(--wf-grey,#A7ADB4)}
/* ------------------------------------------------------------- pager ---- */
.wf-bl-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:clamp(32px,4vw,48px) 0 0}
.wf-bl-pager .page-numbers{
display:inline-flex;align-items:center;justify-content:center;
min-width:40px;height:40px;padding:0 14px;border-radius:9px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
color:var(--wf-off,#F5F4F0);text-decoration:none;font-size:13.5px;font-weight:600;
transition:background .2s ease,border-color .2s ease;
}
.wf-bl-pager .page-numbers:hover{background:rgba(255,146,0,.1);border-color:rgba(255,146,0,.45)}
.wf-bl-pager .page-numbers.current{background:var(--wf-amber,#FF9200);border-color:var(--wf-amber,#FF9200);color:#0A0A0A}
/* ------------------------------------------------------- empty state ---- */
/* The journal launches with nothing in it, so this is the real first view. */
.wf-bl-empty{
position:relative;max-width:760px;margin:0 auto;padding:clamp(40px,6vw,76px) clamp(24px,4vw,56px);
text-align:center;border-radius:22px;
border:1px solid rgba(255,255,255,.1);
background:
radial-gradient(120% 90% at 50% 0%,rgba(255,146,0,.11) 0%,transparent 62%),
rgba(255,255,255,.028);
overflow:hidden;
}
/* a five-bar level meter, idling */
.wf-bl-empty-mark{display:flex;align-items:flex-end;justify-content:center;gap:6px;height:44px;margin:0 0 26px}
.wf-bl-empty-mark span{
width:7px;border-radius:4px;background:linear-gradient(180deg,#FF9200,#B85F00);
animation:wfBlBar 1.9s ease-in-out infinite;opacity:.9;
}
.wf-bl-empty-mark span:nth-child(1){height:38%;animation-delay:0s}
.wf-bl-empty-mark span:nth-child(2){height:72%;animation-delay:.18s}
.wf-bl-empty-mark span:nth-child(3){height:100%;animation-delay:.36s}
.wf-bl-empty-mark span:nth-child(4){height:64%;animation-delay:.54s}
.wf-bl-empty-mark span:nth-child(5){height:30%;animation-delay:.72s}
@keyframes wfBlBar{0%,100%{transform:scaleY(.42)}50%{transform:scaleY(1)}}
.wf-bl-empty-mark span{transform-origin:50% 100%}
@media(prefers-reduced-motion:reduce){.wf-bl-empty-mark span{animation:none}}
.wf-bl-empty .wf-bl-flag{justify-content:center}
.wf-bl-empty-h{
font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;
font-size:clamp(27px,4.2vw,44px);line-height:1.08;letter-spacing:-.028em;
color:#fff;margin:0 0 18px;
}
.wf-bl-empty-x{
max-width:56ch;margin:0 auto 30px;font-size:16px;line-height:1.72;
color:var(--wf-grey,#A7ADB4);
}
.wf-bl-empty-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 26px}
.wf-bl-editor-note{
margin:30px 0 0;padding:14px 18px;border-radius:11px;text-align:left;
background:rgba(255,146,0,.07);border:1px dashed rgba(255,146,0,.35);
font-size:13px;line-height:1.6;color:var(--wf-grey,#A7ADB4);
}
.wf-bl-editor-note strong{color:var(--wf-off,#F5F4F0)}
.wf-bl-editor-note a{color:var(--wf-amber,#FF9200)}
/* ------------------------------------------------------- breakpoints ---- */
@media(max-width:900px){
.wf-bl-lead-link{grid-template-columns:1fr}
.wf-bl-lead-media{min-height:0;aspect-ratio:16/9}
.wf-bl-lead-media::after{background:linear-gradient(180deg,rgba(5,5,5,0) 55%,rgba(5,5,5,.6) 100%)}
}
@media(max-width:560px){
.wf-bl-grid{grid-template-columns:1fr}
.wf-bl-filter{
flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
margin-left:-4px;padding-left:4px;
}
.wf-bl-filter::-webkit-scrollbar{display:none}
.wf-bl-chip{flex:0 0 auto}
}
/* ---------- SERVICE CARDS: NARROW DESKTOP (7 cards, 3 up then 4 up) ----------
The second row is 4 up (calc(25% - 30.6px)), so between Astra's 1025px desktop
floor and ~1400px a card is only 216-310px wide. With 40px padding on both
sides that leaves 136-230px for a 24px uppercase title, which wraps to three
or four lines and breaks the row. Tighten padding and type instead of letting
the cards fall over. Applies to BOTH rows so the two read as one grid.
The 'NN' number widgets are the absolutely positioned headings, so they are
sized separately from the card titles. */
@media(min-width:1025px) and (max-width:1400px){
.wf-card{padding:28px!important}
.wf-card .elementor-widget-heading:not(.elementor-absolute) .elementor-heading-title{font-size:20px!important}
.wf-card .elementor-widget-heading.elementor-absolute .elementor-heading-title{font-size:46px!important}
}
@media(min-width:1025px) and (max-width:1200px){
.wf-card{padding:22px!important}
.wf-card .elementor-widget-heading:not(.elementor-absolute) .elementor-heading-title{font-size:18px!important}
.wf-card .elementor-widget-heading.elementor-absolute .elementor-heading-title{font-size:38px!important}
.wf-card .wf-svc-caps li{font-size:11px}
}
/* ---------- LEGAL PAGES: escape Astra's flex container ----------
Astra wraps page content in .ast-container, which is a FLEX ROW (it exists
for the sidebar layout). The legal template emits two sibling s,
the hero and the document, so they became flex ITEMS and rendered SIDE BY
SIDE: the document column started at the top of the page and ran up under
the fixed header, with its first paragraph clipped. That is what made these
pages look unfinished. The CSS was never wrong; it never got a block
formatting context to work in.
TWO properties are needed, not one. max-width alone leaves the sections
sizing to their content as flex items, which is exactly what happened on
the blog single. Scoped by the wf-legal-page body class that
waveform-legal.php adds from the _wf_legal meta, so no other page moves. */
body.wf-legal-page .site-content > .ast-container{
display:block!important;max-width:none!important;padding:0!important;
}
/* The hero was measured at 1600px while the document grid below it is 1120px,
so once they stacked correctly the H1 still sat ~160px left of the contents
rail and the page read as two unrelated blocks. One shared measure lines the
hero up with the rail and the document. */
body.wf-legal-page .wf-lg-in{max-width:1120px}
/* ---------- REVIEWS FROM THE CPT (homepage, [wf_reviews]) ----------
Replaces three hard-coded Elementor testimonial widgets. The measurements
are lifted from those widgets so the section looks identical: cards are
#050505 sitting on a #1B2026 grid with a 1px gap, so the gap itself reads
as the hairline divider. The avatar is deliberately gone: it only ever held
AI-generated faces, and a real client giving a quote will not supply a
headshot, so requiring one would just block the client from using this. */
.wf-rv-grid{
display:flex;flex-wrap:wrap;gap:1px;
background:#1B2026;border:1px solid #1B2026;
}
.wf-rv-card{
width:calc((100% - 2.6px) / 3);background:#050505;
padding:40px;display:flex;flex-direction:column;
justify-content:space-between;gap:24px;
}
/* One or two published reviews must still fill the row, or the graphite
backing shows through as a block where the third card would have been. */
.wf-rv-grid.wf-rv-n1 .wf-rv-card{width:100%}
.wf-rv-grid.wf-rv-n2 .wf-rv-card{width:calc((100% - 1.3px) / 2)}
.wf-rv-stars{display:flex;gap:4px;line-height:1}
.wf-rv-stars i{font-style:normal;font-size:12px;color:rgba(255,146,0,.25)}
.wf-rv-stars i.on{color:var(--wf-amber,#FF9200)}
.wf-rv-quote{margin:0;padding:0;border:0;font-family:Inter,system-ui,sans-serif}
.wf-rv-quote p{
margin:0 0 12px;font-size:18px;font-weight:300;line-height:1.6;
color:var(--wf-off,#F5F4F0);
}
.wf-rv-quote p:last-child{margin-bottom:0}
/* Curly quotes come from CSS so the client types plain text in the admin. */
.wf-rv-quote p:first-of-type::before{content:'\201C'}
.wf-rv-quote p:last-of-type::after{content:'\201D'}
.wf-rv-by{
border-top:1px solid var(--wf-graph,#1B2026);padding-top:24px;margin-top:16px;
display:flex;flex-direction:column;gap:4px;
}
.wf-rv-by b{
font-family:Inter,system-ui,sans-serif;font-size:12px;font-weight:700;
text-transform:uppercase;letter-spacing:.1em;line-height:1.4;
color:var(--wf-off,#F5F4F0);
}
.wf-rv-by span{
font-family:Inter,system-ui,sans-serif;font-size:10px;font-weight:400;
text-transform:uppercase;letter-spacing:.1em;line-height:1.5;
color:var(--wf-grey,#A7ADB4);
}
/* Nothing published: hide the grid AND its eyebrow, but keep the stats strip,
which is a sibling inside the same .wf-reviews section. An absent section
is the honest state here; an empty bordered box is not. */
.wf-reviews:has(.wf-rv-empty) .elementor-element-ec5553d,
.wf-reviews:has(.wf-rv-empty) .elementor-element-e1d55c2{display:none!important}
@media(max-width:1024px){
.wf-rv-card,.wf-rv-grid.wf-rv-n2 .wf-rv-card{width:100%}
}
@media(max-width:767px){
.wf-rv-card{padding:28px}
.wf-rv-quote p{font-size:16px}
}
/* With nothing published the stats strip is the only thing left in the
section, and it kept an 80px margin-top that was separating it from the
now-hidden grid, on top of 128px of container padding and its own 64px:
272px of dead space above the numbers. Elementor puts the padding on
.e-con-inner, not .e-con, so it has to be overridden there. */
.wf-reviews:has(.wf-rv-empty) > .e-con-inner{padding-top:64px!important}
.wf-reviews:has(.wf-rv-empty) .wf-stats{margin-top:0!important}
/* ---------- GALLERY VIDEO STRIP (top of page 53, [wf_gallery_videos]) ----------
The players load with the page (the facade was dropped 2026-09-21 at the
client's request). Still ONE horizontal row rather than a grid, because the
point of this page is the photographs and two 9:16 TikToks stacked would be
a wall of video. Height is capped so the grid stays close to the fold. */
.wf-gv{margin:0 0 44px}
.wf-gv-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin:0 0 18px}
.wf-gv-head p{margin:0;font-size:13px;line-height:1.6;color:var(--wf-grey,#A7ADB4)}
.wf-gv-row{display:flex;gap:16px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;align-items:flex-start}
.wf-gv-row::-webkit-scrollbar{height:6px}
.wf-gv-row::-webkit-scrollbar-thumb{background:var(--wf-graph,#1B2026);border-radius:3px}
.wf-gv-card{
flex:0 0 auto;scroll-snap-align:start;margin:0;
background:#050505;border:1px solid var(--wf-graph,#1B2026);
border-radius:12px;overflow:hidden}
/* Each provider gets its own box. One shared ratio does not work: a 9:16 clip
in a 16:9 frame letterboxes into a postage stamp, and TikTok's player has a
minimum usable width of its own. */
.wf-gv-frame{display:block;background:#000;line-height:0}
.wf-gv-tall .wf-gv-frame{width:260px;height:462px}
.wf-gv-wide .wf-gv-frame{width:520px;height:293px}
.wf-gv-card iframe{width:100%;height:100%;border:0;display:block}
.wf-gv-t{
display:block;padding:11px 14px;font-size:12.5px;line-height:1.5;
color:var(--wf-off,#F5F4F0);text-transform:none;letter-spacing:normal}
/* No videos: collapse the whole band so it never leaves a gap above the photos. */
.wf-gv-section:has(.wf-gv-empty){display:none!important}
/* The strip and the photo grid read as one block, so the gallery's own 112px
top padding would stack on the strip's bottom margin. Elementor puts that
padding on .e-con-inner, not .e-con, so it has to be overridden there. */
.wf-gv-section:has(.wf-gv) + .wf-gal-section > .e-con-inner{padding-top:56px!important}
@media(max-width:767px){
/* The explanatory line wrapped to three lines at 375px and cost height the
photographs need more than the sentence does. */
.wf-gv-head p{display:none}
.wf-gv{margin-bottom:32px}
.wf-gv-tall .wf-gv-frame{width:216px;height:384px}
.wf-gv-wide .wf-gv-frame{width:300px;height:169px}
.wf-gv-section:has(.wf-gv) + .wf-gal-section > .e-con-inner{padding-top:36px!important}
}
/* ---------- FOOTER CREDIT (designed-by link) ----------
Sits inside the copyright line in the footer .wf-legal bar, which already
carries opacity:.6, so this only has to separate the credit from the
copyright and keep the link legible without competing with it.
NOTE: .wf-legal is ALSO the Privacy/Terms page grid container, so never
add layout rules to .wf-legal itself from here. */
.wf-credit{margin-left:10px;padding-left:12px;border-left:1px solid rgba(255,255,255,.18)}
.wf-credit a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25);transition:color .2s ease,border-color .2s ease}
.wf-credit a:hover,.wf-credit a:focus-visible{color:var(--wf-amber,#FF9200);border-bottom-color:var(--wf-amber,#FF9200)}
@media(max-width:600px){.wf-credit{display:block;margin-left:0;padding-left:0;border-left:0;margin-top:8px}}
/* ---------- HOMEPAGE MOTION + LAYOUT v2 (2026-11-01, from the approved mockup) ----------
Layout changes are desktop-only (>=1025px). The services accordion needs the JS module
(html.wf-motion); the work mosaic and the pinned Why split are pure CSS. ---------- */
/* hero word reveal: wrappers only clip while the intro runs */
html.wf-intro .wf-hero h1 .wf-w{display:inline-block;overflow:hidden;vertical-align:bottom}
.wf-hero h1 .wf-w{display:inline-block;vertical-align:bottom;margin-right:.22em}
.wf-hero h1 .wf-w > span{display:inline-block}
/* about manifesto scrub: words start dim, GSAP brightens them as they are read */
html.wf-motion .wf-about .elementor-widget-text-editor .wf-mw{opacity:.2}
@media(prefers-reduced-motion:reduce){html.wf-motion .wf-about .elementor-widget-text-editor .wf-mw{opacity:1}}
@media(min-width:1025px){
/* services: horizontal accordion of the 7 whole-card links */
html.wf-motion .elementor-element-f045c53{flex-wrap:nowrap!important;gap:10px!important;height:560px}
html.wf-motion .elementor-element-f045c53 > .wf-card{flex:1 1 0!important;width:auto!important;min-width:0;min-height:0!important;padding:40px!important;transition:flex .7s cubic-bezier(.16,1,.3,1)}
html.wf-motion .elementor-element-f045c53 > .wf-card:hover,html.wf-motion .elementor-element-f045c53 > .wf-card:focus-within{flex:3.4 1 0!important}
html.wf-motion .wf-card .wf-lab{position:absolute;left:28px;bottom:28px;z-index:3;writing-mode:vertical-rl;transform:rotate(180deg);font:700 15px/1 'Space Grotesk',sans-serif;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;color:#F5F4F0;transition:opacity .3s;pointer-events:none}
html.wf-motion .wf-card .wf-card-body{opacity:0;transform:translateY(16px);transition:opacity .5s .15s,transform .5s .15s cubic-bezier(.16,1,.3,1)}
html.wf-motion .wf-card:hover .wf-card-body,html.wf-motion .wf-card:focus-within .wf-card-body{opacity:1;transform:none}
html.wf-motion .wf-card:hover .wf-lab,html.wf-motion .wf-card:focus-within .wf-lab{opacity:0}
html.wf-motion .wf-card .wf-card-body h3,html.wf-motion .wf-card .wf-card-body h4{white-space:nowrap}
html.wf-motion .wf-card .wf-card-desc{opacity:1!important;transform:none!important}
html.wf-motion .wf-card .wf-card-img img{opacity:.45}
html.wf-motion .wf-card:hover .wf-card-img img{opacity:.78}
/* work: 3-column mosaic (feature 2x2, two singles, full-width) from the two existing rows */
.elementor-element-1677306{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:280px;gap:20px}
.elementor-element-1677306 > .e-con{display:contents!important}
.elementor-element-1677306 .wf-proj{width:auto!important;min-height:0!important;aspect-ratio:auto!important;height:100%}
.elementor-element-eaf698d{grid-column:span 2;grid-row:span 2}
.elementor-element-f589811{grid-column:span 3}
/* why: heading pins on the left while the four reasons scroll past on the right */
.wf-why{overflow:clip!important} /* overflow:hidden would make the section the sticky scrollport */
.wf-why > .e-con-inner{display:grid!important;grid-template-columns:1fr 1.2fr;gap:96px;align-items:start}
.elementor-element-1911cef{align-items:flex-start!important;--position:sticky;position:sticky!important;top:140px;width:auto!important;align-self:start!important;--align-self:start;height:auto!important;min-height:0!important}
.elementor-element-1911cef .elementor-heading-title{text-align:left!important;max-width:14ch}
.elementor-element-6db9d1d{flex-direction:column!important;background:transparent!important;gap:0!important;width:auto!important;border:0!important}
.elementor-element-6db9d1d > .e-con{width:100%!important;background:transparent!important;border-top:1px solid #1B2026;padding:40px 0!important}
.elementor-element-6db9d1d > .e-con:last-child{border-bottom:1px solid #1B2026}
.elementor-element-6db9d1d .elementor-icon-box-wrapper{display:flex!important;align-items:flex-start;gap:32px;text-align:left}
.elementor-element-6db9d1d .elementor-icon-box-icon{margin:0!important;flex:none}
.elementor-element-6db9d1d .elementor-icon-box-content{text-align:left!important}
.elementor-element-6db9d1d .elementor-icon-box-description{max-width:44ch}
.wf-why-prog{width:2px;height:160px;background:#1B2026;margin-top:40px}
.wf-why-prog i{display:block;width:100%;height:100%;background:#FF9200;transform:scaleY(0);transform-origin:top}
}