.elementor-6571 .elementor-element.elementor-element-22d374c{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6571 .elementor-element.elementor-element-bf57324{width:100%;max-width:100%;}.elementor-6571 .elementor-element.elementor-element-7250f65{--display:flex;--margin-top:-84px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:0;}.elementor-6571 .elementor-element.elementor-element-c3d6ba6{width:100%;max-width:100%;}.elementor-6571 .elementor-element.elementor-element-c3d6ba6 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-6571 .elementor-element.elementor-element-8bd0569{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6571 .elementor-element.elementor-element-8bd0569:not(.elementor-motion-effects-element-type-background), .elementor-6571 .elementor-element.elementor-element-8bd0569 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-6571 .elementor-element.elementor-element-df45212{width:100%;max-width:100%;}.elementor-6571 .elementor-element.elementor-element-df45212 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-6571 .elementor-element.elementor-element-c52b00f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6571 .elementor-element.elementor-element-c52b00f:not(.elementor-motion-effects-element-type-background), .elementor-6571 .elementor-element.elementor-element-c52b00f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-6571 .elementor-element.elementor-element-8bb2ebc{width:100%;max-width:100%;}.elementor-6571 .elementor-element.elementor-element-8bb2ebc > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-6571 .elementor-element.elementor-element-196f055{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6571 .elementor-element.elementor-element-196f055:not(.elementor-motion-effects-element-type-background), .elementor-6571 .elementor-element.elementor-element-196f055 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-6571 .elementor-element.elementor-element-16250c4{width:100%;max-width:100%;}.elementor-6571 .elementor-element.elementor-element-16250c4 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-6571 .elementor-element.elementor-element-2786f45{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6571 .elementor-element.elementor-element-2786f45:not(.elementor-motion-effects-element-type-background), .elementor-6571 .elementor-element.elementor-element-2786f45 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-6571 .elementor-element.elementor-element-9702fb9{width:100%;max-width:100%;}.elementor-6571 .elementor-element.elementor-element-9702fb9 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-6571 .elementor-element.elementor-element-fb1f50b{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6571 .elementor-element.elementor-element-fb1f50b:not(.elementor-motion-effects-element-type-background), .elementor-6571 .elementor-element.elementor-element-fb1f50b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-6571 .elementor-element.elementor-element-b741906{width:100%;max-width:100%;}.elementor-6571 .elementor-element.elementor-element-b741906 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-6571 .elementor-element.elementor-element-77102c6{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6571 .elementor-element.elementor-element-77102c6:not(.elementor-motion-effects-element-type-background), .elementor-6571 .elementor-element.elementor-element-77102c6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-6571 .elementor-element.elementor-element-0144a9e{width:100%;max-width:100%;}.elementor-6571 .elementor-element.elementor-element-0144a9e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-6571 .elementor-element.elementor-element-32e3ddc{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6571 .elementor-element.elementor-element-32e3ddc:not(.elementor-motion-effects-element-type-background), .elementor-6571 .elementor-element.elementor-element-32e3ddc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-6571 .elementor-element.elementor-element-c91d2fd{width:100%;max-width:100%;}.elementor-6571 .elementor-element.elementor-element-c91d2fd > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-6571 .elementor-element.elementor-element-7b79704{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6571 .elementor-element.elementor-element-7b79704:not(.elementor-motion-effects-element-type-background), .elementor-6571 .elementor-element.elementor-element-7b79704 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-6571 .elementor-element.elementor-element-c924528{width:100%;max-width:100%;}.elementor-6571 .elementor-element.elementor-element-c924528 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-6571 .elementor-element.elementor-element-270178a{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6571 .elementor-element.elementor-element-270178a:not(.elementor-motion-effects-element-type-background), .elementor-6571 .elementor-element.elementor-element-270178a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-51703bc );}.elementor-6571 .elementor-element.elementor-element-bd7c3ab{width:100%;max-width:100%;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-22d374c */@media(max-width:960px){
  .hy-sec{padding:88px 24px;}
  .hy-contact{padding:72px 24px;}
  .hy-hero-content{padding:0 24px;max-width:100%;width:100%;}
  .hy-sdots{left:24px;bottom:28px;}
  .hy-idea-grid,.hy-tools-layout{grid-template-columns:1fr;}
  .hy-idea-img,.hy-tools-img{min-height:340px;}
  .hy-idea-text{padding:56px 28px;}
  .hy-stat-grid,.hy-outcome-grid{grid-template-columns:1fr;}
  .hy-tools-cards{grid-template-columns:1fr;}
  .hy-pgrid{grid-template-columns:1fr 1fr;}
  .hy-pitem.wide{grid-column:span 2;aspect-ratio:16/9;}
  .hy-pitem.tall{grid-row:span 1;aspect-ratio:1;}
  .hy-form-grid{grid-template-columns:1fr;}
}

@media(max-width:600px){
  .hy-hero{min-height:100svh;}
  .hy-hero-content{padding:0 20px;width:100%;}
  .hy-hero-h1{font-size:clamp(36px,10vw,56px)!important;white-space:nowrap;}
  .hy-hero-sub{font-size:16px;margin-bottom:36px;white-space:nowrap;}
  .hy-eyebrow{font-size:9px;letter-spacing:.12em;margin-bottom:24px;margin-top:24px;white-space:nowrap;}
  .hy-sdots{left:20px;bottom:20px;}
  .hy-hero-cta .hy-btn-primary{padding:14px 28px;font-size:13px;}
  .hy-slide{background-position:center center!important;}
}/* End custom CSS */
/* Start custom CSS */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hyve Digital - Impossible to Ignore. Intelligent Growth.</title>
<link href="https://fonts.googleapis.com/css2?family=Forum&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
 
<!--
=======================================================
  HYVE DIGITAL - v7 EDITABLE REFERENCE
=======================================================
 
  DESIGN SYSTEM OVERVIEW
  ──────────────────────
  Fonts:      Forum (serif, headlines)  - loaded from Google Fonts
              Mulish (sans, body/UI)    - loaded from Google Fonts
 
  Colours:    Background dark    #0A0A0A
              Background mid     #121417
              Background light   #F2F4F7
              White              #FFFFFF
              Pink (primary CTA) #FF007A
              Pink (deep/text)   #BF0061
              Yellow (accent)    #EEFF00
 
  Sections:   Each section uses .sec for padding (120px 60px)
              .wrap     = max 1280px centred
              .wrap-sm  = max 900px centred
 
  Labels:     .lbl + colour modifier
              .lbl-pink   = #FF007A
              .lbl-yellow = #EEFF00
              .lbl-dk     = #BF0061
 
  Animations: .r class = scroll reveal (opacity + translateY)
              Add .d1 .d2 .d3 for staggered delays
              JS IntersectionObserver adds .on class on scroll
 
  IMAGES TO REPLACE - search for YOUR_IMAGE_URL
  ──────────────────────────────────────────────
  [NAV LOGO]        .nav-logo src
  [HERO SLIDE 1-5]  .hero-slides .slide background-image (×5)
  [IDEA SECTION]    .idea-img .img-inner background-image
  [OUTCOME 01]      .ocard:1 .oimg-inner background-image
  [OUTCOME 02]      .ocard:2 .oimg-inner background-image
  [OUTCOME 03]      .ocard:3 .oimg-inner background-image
  [TOOLS IMAGE]     .tools-img .img-inner background-image
  [PORTFOLIO 1-10]  .pitem .pimg background-image (×10)
  [CLOSE BG]        .cbg background-image
  [FOOTER LOGO]     .flogo src
 
  LINKS TO REPLACE - search for PLACEHOLDER_CALENDAR_ID
  ──────────────────────────────────────────────────────
  Replace with your real Google Calendar booking URL (×4)
=======================================================
-->
 
<style>
/* ─────────────────────────────────────────────
   RESET + BASE
───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;cursor:none;}
html{scroll-behavior:smooth;}
body{background:#0A0A0A;color:#fff;font-family:"Mulish",sans-serif;opacity:0;animation:fadeIn .5s ease forwards;overflow-x:hidden;}
@keyframes fadeIn{to{opacity:1;}}
 
/* ─────────────────────────────────────────────
   CURSOR - neon yellow square
   To disable: remove cursor:none from * above
   and delete the #cur block + cursor JS
───────────────────────────────────────────── */
#cur{position:fixed;pointer-events:none;z-index:99999;width:6px;height:6px;background:#EEFF00;border-radius:0;transform:translate(-50%,-50%);transition:width .18s ease,height .18s ease;}
 
/* ─────────────────────────────────────────────
   SPOTLIGHT CANVAS
   Vignette effect over hero/image sections
   Disable: remove canvas JS block entirely
───────────────────────────────────────────── */
#spotlight-canvas{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .5s ease;}
#spotlight-canvas.active{opacity:1;}
 
/* ─────────────────────────────────────────────
   NAV
   - Transparent on load, dark on scroll
   - Logo uses mix-blend-mode:screen to drop
     black background from PNG logos
───────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:500;padding:24px 60px;display:flex;align-items:center;justify-content:space-between;transition:background .4s;}
nav.scrolled{background:rgba(10,10,10,.96);backdrop-filter:blur(18px);}
.nav-logo{height:40px;width:auto;transition:opacity .2s;mix-blend-mode:screen;}
.nav-logo:hover{opacity:.7;}
.flogo{height:30px;width:auto;mix-blend-mode:screen;}
.nav-links{display:flex;align-items:center;gap:40px;}
.nl{font-family:"Mulish",sans-serif;font-size:13px;font-weight:500;color:rgba(255,255,255,.48);text-decoration:none;letter-spacing:.03em;position:relative;transition:color .25s;}
.nl::after{content:"";position:absolute;bottom:-3px;left:0;width:0;height:1px;background:#FF007A;transition:width .3s ease;}
.nl:hover{color:#fff;}.nl:hover::after{width:100%;}
.btn-nav{background:#FF007A;color:#fff;border:none;border-radius:0;padding:12px 26px;font-family:"Mulish",sans-serif;font-size:13px;font-weight:600;letter-spacing:.03em;text-decoration:none;display:inline-block;position:relative;overflow:hidden;transition:background .2s,transform .15s;}
.btn-nav::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.16) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);pointer-events:none;transition:left 0s;}
.btn-nav:hover{background:#BF0061;transform:translateY(-1px);}
.btn-nav:hover::before{left:125%;transition:left 0.45s ease;}
 
/* ─────────────────────────────────────────────
   HERO
   - Full viewport height slideshow
   - 5 slides, auto-advance every 5.8s
   - Slide dots auto-generated by JS
   - Text stagger-animates on load
───────────────────────────────────────────── */
.hero{position:relative;height:100vh;min-height:680px;display:flex;align-items:center;overflow:hidden;background:#060810;}
.hero-slides{position:absolute;inset:0;}
.slide{position:absolute;inset:0;background-size:cover;background-position:center right;opacity:0;transition:opacity 2.8s ease;filter:brightness(.92) saturate(.9);}
.slide.active{opacity:1;filter:brightness(1) saturate(1);transition:opacity 2.8s ease,filter 3.5s ease;}
.hero-overlay{position:absolute;inset:0;z-index:0;background:linear-gradient(110deg,rgba(6,8,16,.55) 30%,rgba(6,8,16,.08) 100%);}
.hero-content{position:relative;z-index:10;padding:0 0 0 88px;width:55%;}
.eyebrow{font-family:"Mulish",sans-serif;font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#EEFF00;display:block;margin-bottom:40px;opacity:0;animation:up .6s ease .2s forwards;}
.hero h1{font-family:"Forum",serif;font-size:clamp(56px,6.5vw,96px);line-height:1.0;color:#fff;opacity:0;display:block;}
.hero h1.l1{animation:up .75s ease .35s forwards;margin-bottom:8px;}
.hero h1.l2{animation:up .75s ease .52s forwards;margin-bottom:36px;}
.hero-sub{font-family:"Forum",serif;font-style:italic;font-size:clamp(16px,1.6vw,24px);color:rgba(255,255,255,.85);margin-bottom:52px;letter-spacing:.01em;opacity:0;animation:up .75s ease .68s forwards;}
.hero-cta{opacity:0;animation:up .75s ease .84s forwards;display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.btn-primary{background:#FF007A;color:#fff;border:none;border-radius:0;padding:18px 44px;font-family:"Mulish",sans-serif;font-size:15px;font-weight:700;letter-spacing:.04em;text-decoration:none;display:inline-block;position:relative;overflow:hidden;transition:background .3s,transform .2s;}
.btn-primary::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.18) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);transition:left 0s;pointer-events:none;}
.btn-primary:hover{background:#BF0061;transform:translateY(-2px);}
.btn-primary:hover::before{left:125%;transition:left 0.55s ease;}
.hero-note{font-size:11px;color:rgba(255,255,255,.75);letter-spacing:.04em;}
.sdots{position:absolute;bottom:40px;left:88px;display:flex;gap:8px;z-index:10;}
.sdot{width:6px;height:6px;background:rgba(255,255,255,.18);border-radius:0;transition:background .3s,width .4s ease;}
.sdot.active{background:#EEFF00;width:24px;}
@keyframes up{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
 
/* ─────────────────────────────────────────────
   SHARED SECTION STYLES
───────────────────────────────────────────── */
.sec{padding:120px 60px;}
.wrap{max-width:1280px;margin:0 auto;}
.wrap-sm{max-width:900px;margin:0 auto;}
.lbl{font-family:"Mulish",sans-serif;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;display:block;margin-bottom:24px;}
.lbl-pink{color:#FF007A;}.lbl-yellow{color:#EEFF00;}.lbl-dk{color:#BF0061;}
h2{font-family:"Forum",serif;font-size:clamp(38px,5vw,68px);line-height:1.04;margin-bottom:32px;}
p{font-family:"Mulish",sans-serif;font-size:17px;line-height:1.82;margin-bottom:20px;}
p:last-child{margin-bottom:0;}
/* Scroll reveal - .r = hidden, .r.on = visible (JS adds .on) */
.r{opacity:0;transform:translateY(40px);transition:opacity .75s ease,transform .75s ease;}
.r.on{opacity:1;transform:none;}
.d1{transition-delay:.12s;}.d2{transition-delay:.24s;}.d3{transition-delay:.36s;}
 
/* ─────────────────────────────────────────────
   PROBLEM SECTION
   Background: white - bold contrast against dark
───────────────────────────────────────────── */
.problem{background:#fff;}
.problem h2{color:#121417;font-size:clamp(34px,4.2vw,60px);}
.problem p{color:#444;font-size:18px;}
 
/* ─────────────────────────────────────────────
   IDEA SECTION
   50/50 split: image left, text right
   Image has subtle hover zoom
───────────────────────────────────────────── */
.idea{background:#121417;padding:0;}
.idea-grid{display:grid;grid-template-columns:1fr 1fr;min-height:700px;}
.idea-img{background-size:cover;background-position:center;position:relative;overflow:hidden;}
.idea-img .img-inner{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s ease;}
.idea-img:hover .img-inner{transform:scale(1.04);}
.idea-text{padding:96px 80px;display:flex;align-items:center;}
.idea-text h2{color:#fff;}
.idea-text p{color:rgba(255,255,255,.68);font-size:16px;line-height:1.88;}
blockquote{border-left:3px solid #FF007A;padding-left:24px;margin-top:36px;}
blockquote p{font-family:"Forum",serif;font-style:italic;font-size:clamp(20px,2vw,28px);color:#FF007A;margin:0;}
 
/* ─────────────────────────────────────────────
   CREDIBILITY / STATS
   Background: light grey #F2F4F7
   Stat cards: dark with animated top border on hover
   Numbers count up on scroll (JS)
───────────────────────────────────────────── */
.cred{background:#F2F4F7;}
.cred h2{color:#121417;}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:60px;margin-bottom:28px;}
.stat-card{background:#121417;padding:52px 48px;position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;}
.stat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .4s ease;}
.stat-card:hover{transform:translateY(-4px);box-shadow:0 24px 64px rgba(0,0,0,.35);}
.stat-card:hover::before{transform:scaleX(1);}
.stat-num{font-family:"Forum",serif;font-size:clamp(64px,6vw,88px);color:#EEFF00;line-height:1;margin-bottom:16px;}
.stat-card p{font-size:14px;color:rgba(255,255,255,.7);margin:0;line-height:1.65;}
.tech{font-family:"Mulish",sans-serif;font-size:13px;color:#888;text-align:center;line-height:1.7;}
 
/* ─────────────────────────────────────────────
   OUTCOMES - 3 COLUMN
   Background: white
   Square image + number + title + body per card
───────────────────────────────────────────── */
.outcomes{background:#fff;}
.outcomes h2{color:#121417;}
.outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;margin-top:64px;}
.ocard{position:relative;}
.oimg{width:100%;aspect-ratio:1;overflow:hidden;margin-bottom:28px;}
.oimg-inner{width:100%;height:100%;background-size:cover;background-position:center top;transition:transform .6s ease;}
.ocard:hover .oimg-inner{transform:scale(1.05);}
.onum{font-family:"Forum",serif;font-size:clamp(52px,5vw,68px);color:#FF007A;line-height:1;margin-bottom:14px;}
.otitle{font-family:"Forum",serif;font-size:clamp(22px,2vw,30px);color:#121417;margin-bottom:14px;}
.obody{font-family:"Mulish",sans-serif;font-size:15px;color:#555;line-height:1.82;}
 
/* ─────────────────────────────────────────────
   TOOLS SECTION
   Background: light grey
   Layout: image left (50%) + 2×2 card grid right
───────────────────────────────────────────── */
.tools-sec{background:#F2F4F7;}
.tools-sec h2{color:#121417;}
.tools-hdr p{color:#555;max-width:540px;}
.tools-layout{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:64px;}
.tools-img{background-size:cover;background-position:center;min-height:520px;position:relative;overflow:hidden;}
.tools-img .img-inner{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s ease;}
.tools-img:hover .img-inner{transform:scale(1.04);}
.tools-cards{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#d8dce3;}
.tcard{background:#fff;padding:32px 28px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:background .25s;}
.tcard:hover{background:#f8f8fa;}
.tlbl{font-family:"Mulish",sans-serif;font-size:10px;font-weight:700;letter-spacing:.24em;color:#FF007A;margin-bottom:12px;}
.ttitle{font-family:"Forum",serif;font-size:20px;color:#121417;margin-bottom:10px;}
.tbody{font-family:"Mulish",sans-serif;font-size:13px;color:#555;line-height:1.72;flex:1;padding-bottom:16px;margin-bottom:0;}
.tproof{font-family:"Mulish",sans-serif;font-size:12px;color:#BF0061;border-top:1px solid #e8e8e8;padding-top:14px;margin:0;line-height:1.55;font-weight:600;}
.tcta{margin-top:52px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.ghost{font-family:"Mulish",sans-serif;font-size:14px;color:rgba(18,20,23,.5);text-decoration:underline;text-underline-offset:5px;transition:color .2s;}
.ghost:hover{color:#121417;}
.tnote{font-size:12px;color:rgba(18,20,23,.4);margin-top:12px;}
 
/* ─────────────────────────────────────────────
   PORTFOLIO GRID
   Background: dark #0A0A0A
   Filterable by category (JS)
   .wide = span 2 cols, .tall = span 2 rows
   Video items: thumbnail shows, video plays on hover
───────────────────────────────────────────── */
.port-sec{background:#0A0A0A;}
.port-sec h2{color:#fff;}
.port-filters{display:flex;gap:4px;flex-wrap:wrap;margin-top:48px;margin-bottom:52px;}
.pf{font-family:"Mulish",sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:10px 22px;border:1px solid rgba(255,255,255,.14);background:transparent;color:rgba(255,255,255,.42);border-radius:0;transition:all .25s;}
.pf:hover{border-color:rgba(255,255,255,.36);color:rgba(255,255,255,.76);}
.pf.active{background:#EEFF00;color:#0A0A0A;border-color:#EEFF00;font-weight:700;}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.pitem{position:relative;overflow:hidden;background:#111;aspect-ratio:1;transition:opacity .4s,transform .3s;}
.pitem.wide{grid-column:span 2;aspect-ratio:2/1;}
.pitem.tall{grid-row:span 2;}
.pitem.video-item{background:#000;}
.pitem video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s;}
.pitem:hover video{opacity:1;}
.pimg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .55s ease,opacity .4s;}
.pitem:hover .pimg{transform:scale(1.06);}
.pitem.video-item:hover .pimg{opacity:0;}
.poverlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 55%);opacity:0;transition:opacity .35s;z-index:2;}
.pitem:hover .poverlay{opacity:1;}
.pinfo{position:absolute;bottom:0;left:0;right:0;padding:20px;transform:translateY(8px);opacity:0;transition:opacity .3s,transform .3s;z-index:3;}
.pitem:hover .pinfo{opacity:1;transform:none;}
.ptag{font-family:"Mulish",sans-serif;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#EEFF00;display:inline-block;margin-bottom:6px;}
.ptitle{font-family:"Forum",serif;font-size:15px;color:#fff;}
 
/* ─────────────────────────────────────────────
   PROOF / TESTIMONIAL
   Background: dark #121417
   Large opening quote mark, centred layout
   Logo placeholder bars (replace with real logos)
───────────────────────────────────────────── */
.proof-sec{background:#121417;}
.proof-inner{max-width:800px;margin:0 auto;text-align:center;}
.qmark{font-family:"Forum",serif;font-size:clamp(90px,12vw,140px);color:#FF007A;line-height:.6;display:block;margin-bottom:20px;}
.proof-inner blockquote{border:none;padding:0;margin:0 0 28px;}
.proof-inner blockquote p{font-family:"Forum",serif;font-style:italic;font-size:clamp(22px,2.8vw,36px);color:#fff;line-height:1.3;margin:0;}
.attr{font-family:"Mulish",sans-serif;font-size:13px;color:rgba(255,255,255,.36);margin-bottom:64px;}
.logos-lbl{font-family:"Mulish",sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:22px;}
.logos{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.lph{width:96px;height:32px;background:rgba(255,255,255,.06);transition:background .2s;}
.lph:hover{background:rgba(255,255,255,.14);}
 
/* ─────────────────────────────────────────────
   CLOSE CTA
   Full viewport height, background image with
   dark overlay, parallax scroll on bg (JS)
───────────────────────────────────────────── */
.close-sec{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cbg{position:absolute;inset:0;background-size:cover;background-position:center right;}
.cov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,8,16,.42),rgba(6,8,16,.88));}
.ccontent{position:relative;z-index:2;text-align:center;padding:0 40px;max-width:960px;}
.ccontent h2{font-family:"Forum",serif;font-size:clamp(40px,7vw,84px);color:#fff;line-height:1.04;margin-bottom:28px;}
.ccontent .sub-copy{font-size:19px;color:rgba(255,255,255,.58);margin-bottom:52px;max-width:560px;margin-left:auto;margin-right:auto;}
.cnote{font-size:12px;color:rgba(255,255,255,.26);margin-top:20px;}
.cnote span{color:#EEFF00;}
 
/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
footer{background:#0A0A0A;padding:48px 60px 40px;border-top:1px solid #141414;}
.ftop{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:28px;}
.flinks{display:flex;gap:32px;align-items:center;flex-wrap:wrap;}
.flinks a{font-family:"Mulish",sans-serif;font-size:13px;color:rgba(255,255,255,.34);text-decoration:none;transition:color .2s;}
.flinks a:hover{color:#fff;}
.flinks a.fp{color:#FF007A;}.flinks a.fp:hover{color:#BF0061;}
.fdiv{height:1px;background:#141414;margin-bottom:24px;}
.fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.fbot p{font-family:"Mulish",sans-serif;font-size:12px;color:rgba(255,255,255,.22);margin:0;}
 
/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media(max-width:960px){
  nav{padding:18px 24px;}.nav-only{display:none;}
  .sec{padding:88px 24px;}
  .hero-content{padding:0 24px;max-width:100%;}
  .sdots{left:24px;bottom:28px;}
  .idea-grid,.tools-layout{grid-template-columns:1fr;}
  .idea-img,.tools-img{min-height:340px;}
  .idea-text{padding:56px 28px;}
  .stat-grid,.outcome-grid{grid-template-columns:1fr;}
  .tools-cards{grid-template-columns:1fr;}
  .pgrid{grid-template-columns:1fr 1fr;}
  .pitem.wide{grid-column:span 2;aspect-ratio:16/9;}
  .pitem.tall{grid-row:span 1;aspect-ratio:1;}
  footer{padding:36px 24px 28px;}.ftop{flex-direction:column;align-items:flex-start;}
}
</style>
</head>
<body>
<div id="cur"></div>/* End custom CSS */