:root{
    --navy-950:#080d1a; --navy-900:#0c1326; --navy-800:#16213f; --navy-line:#2a3556;
    --red-600:#c8102e; --red-700:#8f0c22; --red-500:#e0193a; --red-glow:rgba(200,16,46,0.35);
    --cream:#f3efe6; --ink:#14151a; --ink-dim:#565b6b;
    --slate:#95a0bd; --slate-dim:#5c6785; --paper:#f4f1ea;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{transition:none !important; animation:none !important;} }
  body{ background:var(--navy-950); color:var(--paper); font-family:'Inter',sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--red-500); outline-offset:3px; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 40px; }
  @media (max-width:640px){ .wrap{ padding:0 22px; } }
  h1,h2,h3{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; letter-spacing:-0.02em; }
  .eyebrow{ font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--red-500); }
  .fade{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
  .fade.in{ opacity:1; transform:none; }

  /* NAV */
  nav{ position:sticky; top:0; z-index:60; background:rgba(8,13,26,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--navy-line); }
  nav .inner{ display:flex; align-items:center; justify-content:space-between; padding:22px 0; }
  .brand{ font-family:'Bricolage Grotesque',sans-serif; font-size:21px; font-weight:800; text-transform:uppercase; letter-spacing:0.01em; }
  .navlinks{ display:flex; gap:30px; font-size:12px; color:var(--slate); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; }
  .navlinks a{ position:relative; }
  .navlinks a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--red-500); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
  .navlinks a:hover::after{ transform:scaleX(1); }
  .navlinks a:hover{ color:#fff; }
  @media (max-width:860px){ .navlinks{ display:none; } }
  .nav-cta{ background:var(--red-600); color:#fff; padding:11px 22px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; border-radius:2px; transition:background .2s ease; }
  .nav-cta:hover{ background:var(--red-500); }

  /* HERO */
  .hero{ position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; }
  .hero-bg{ position:absolute; inset:0; background-image:url('https://images.unsplash.com/photo-1541462608143-67571c6738dd?w=1600&q=80'); background-size:cover; background-position:center 30%; }
  .hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,13,26,0.6) 0%, rgba(8,13,26,0.8) 55%, var(--navy-950) 97%); }
  .hero-spotlight{ position:absolute; inset:0; pointer-events:none; z-index:1; background:radial-gradient(500px circle at var(--x,50%) var(--y,30%), rgba(200,16,46,0.16), transparent 60%); transition:background .1s ease; }
  .hero-cut{ position:absolute; right:-10%; top:-20%; width:65%; height:160%; background:linear-gradient(135deg, var(--red-600), var(--red-700)); clip-path:polygon(60% 0, 100% 0, 55% 100%, 15% 100%); opacity:0.9; mix-blend-mode:normal; animation:floatBlob 16s ease-in-out infinite; }
  @keyframes floatBlob{ 0%,100%{ transform:translate(0,0) rotate(0deg); } 50%{ transform:translate(-24px,26px) rotate(4deg); } }
  .hero-outline{ position:absolute; left:50%; bottom:6%; transform:translateX(-50%); z-index:1; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(120px,19vw,320px); line-height:1; letter-spacing:-0.02em; white-space:nowrap; color:transparent; -webkit-text-stroke:1.5px rgba(244,241,234,0.16); text-stroke:1.5px rgba(244,241,234,0.16); pointer-events:none; user-select:none; }
  .hero-inner{ position:relative; z-index:2; padding:0 0 110px; width:100%; }
  .hero h1{ font-size:clamp(52px,9.5vw,128px); line-height:0.92; max-width:15ch; margin:26px 0 30px; color:#fff; text-transform:uppercase; letter-spacing:-0.01em; }
  .hero h1 .accent{ color:var(--red-500); font-style:normal; }
  .hero p{ font-size:18px; color:rgba(244,241,234,0.85); max-width:52ch; margin-bottom:40px; }
  .hero-ctas{ display:flex; gap:30px; align-items:center; flex-wrap:wrap; }
  .btn-primary{ background:var(--red-600); color:#fff; padding:16px 30px; font-weight:700; font-size:14.5px; border-radius:2px; transition:background .2s ease, transform .2s ease; box-shadow:0 16px 34px -14px var(--red-glow); display:inline-block; border:none; cursor:pointer; }
  .btn-primary:hover{ background:var(--red-500); transform:translateY(-2px); }
  .link-arrow{ font-size:14.5px; font-weight:700; color:#fff; border-bottom:1px solid rgba(255,255,255,0.3); padding-bottom:2px; transition:border-color .2s ease; }
  .link-arrow:hover{ border-color:var(--red-500); }

  section{ padding:120px 0; }
  .lede{ font-size:clamp(26px,3.4vw,42px); line-height:1.18; }

  /* BELIEF — cream contrast section */
  .belief{ background:var(--cream); color:var(--ink); }
  .belief .eyebrow{ color:var(--red-600); }
  .belief-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:start; }
  @media (max-width:900px){ .belief-grid{ grid-template-columns:1fr; gap:30px; } }
  .belief .lede{ max-width:14ch; }
  .belief .lede .accent{ color:var(--red-600); font-style:italic; font-family:'Bricolage Grotesque',sans-serif; }
  .belief-body p{ font-size:17px; color:var(--ink-dim); max-width:56ch; }
  .belief-rule{ width:64px; height:4px; margin:26px 0; overflow:visible; }
  .belief-rule line{ stroke:var(--red-600); stroke-width:4; stroke-dasharray:64; stroke-dashoffset:64; transition:stroke-dashoffset 1s ease .2s; }
  .belief.in .belief-rule line{ stroke-dashoffset:0; }

  /* SERVICES — minimal index list */
  .svc-head{ max-width:640px; margin-bottom:64px; }
  .svc-head h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(34px,5vw,58px); text-transform:uppercase; letter-spacing:-0.01em; line-height:1.1; color:#fff; margin:18px 0 0; }
  .svc-head h2 em{ font-style:normal; color:var(--red-500); }

  .svc-index{ display:flex; flex-direction:column; }
  .svc-item{ display:grid; grid-template-columns:64px 1fr; gap:24px; padding:34px 0; border-top:1px solid var(--navy-line); align-items:baseline; opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
  #services.in .svc-index .svc-item:nth-child(1){ opacity:1; transform:none; transition-delay:.05s; }
  #services.in .svc-index .svc-item:nth-child(2){ opacity:1; transform:none; transition-delay:.15s; }
  #services.in .svc-index .svc-item:nth-child(3){ opacity:1; transform:none; transition-delay:.25s; }
  #services.in .svc-index .svc-item:nth-child(4){ opacity:1; transform:none; transition-delay:.35s; }
  #services.in .svc-index .svc-item:nth-child(5){ opacity:1; transform:none; transition-delay:.45s; }
  .svc-item:last-child{ border-bottom:1px solid var(--navy-line); }
  .svc-item .s-num{ font-family:'Space Mono',monospace; font-size:15px; color:var(--red-500); align-self:start; margin-top:8px; }
  .svc-item .s-body{ display:grid; grid-template-columns:1fr 1.4fr; gap:24px; align-items:baseline; }
  .svc-item h3{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(22px,2.6vw,34px); text-transform:uppercase; letter-spacing:-0.01em; color:#fff; }
  .svc-item p{ font-size:14.5px; color:var(--slate); line-height:1.6; max-width:44ch; }
  @media (max-width:760px){
    .svc-item{ grid-template-columns:32px 1fr; }
    .svc-item .s-body{ grid-template-columns:1fr; gap:8px; }
  }

  .svc-footnote{ margin-top:40px; font-size:14px; color:var(--slate-dim); line-height:1.6; max-width:56ch; }
  .svc-footnote a{ color:var(--red-500); font-weight:700; border-bottom:1px solid transparent; }
  .svc-footnote a:hover{ border-bottom-color:var(--red-500); }

  /* JOURNEY — dark image band */
  .journey{ position:relative; background:var(--navy-900); overflow:hidden; }
  .journey-bg{ position:absolute; inset:0; background-image:url('https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=1600&q=80'); background-size:cover; background-position:center; opacity:0.16; }
  .journey .wrap{ position:relative; z-index:2; }
  .journey .lede{ color:#fff; max-width:16ch; }
  .j-track{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:60px; position:relative; }
  @media (max-width:760px){ .j-track{ grid-template-columns:1fr; gap:34px; } }
  .j-line{ position:absolute; top:11px; left:0; right:0; height:2px; background:var(--navy-line); overflow:hidden; }
  .j-line-fill{ position:absolute; inset:0; background:var(--red-600); transform:scaleX(0); transform-origin:left; transition:transform 1.8s cubic-bezier(.16,.84,.44,1) .15s; }
  .journey.in .j-line-fill{ transform:scaleX(1); }
  @media (max-width:760px){ .j-line{ display:none; } }
  .j-step{ position:relative; padding-right:24px; }
  .j-dot{ width:22px; height:22px; border-radius:50%; background:var(--red-600); box-shadow:0 0 0 5px var(--navy-900), 0 0 20px var(--red-glow); margin-bottom:22px; position:relative; z-index:2; transform:scale(0); transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
  .journey.in .j-track > .j-step:nth-child(2) .j-dot{ transform:scale(1); transition-delay:.15s; }
  .journey.in .j-track > .j-step:nth-child(3) .j-dot{ transform:scale(1); transition-delay:.3s; }
  .journey.in .j-track > .j-step:nth-child(4) .j-dot{ transform:scale(1); transition-delay:.45s; }
  .journey.in .j-track > .j-step:nth-child(5) .j-dot{ transform:scale(1); transition-delay:.6s; }
  .j-step h3{ font-size:20px; margin-bottom:10px; color:#fff; }
  .j-step p{ font-size:13.5px; color:var(--slate); max-width:28ch; }

  /* HOW WE WORK — cream 2x2 */
  .work-section{ background:var(--cream); color:var(--ink); }
  .work-section .eyebrow{ color:var(--red-600); }
  .work-section .lede{ max-width:16ch; }
  .work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#ddd7c8; border:1px solid #ddd7c8; margin-top:52px; }
  @media (max-width:700px){ .work-grid{ grid-template-columns:1fr; } }
  .work-cell{ background:var(--cream); padding:36px 32px; }
  .work-cell h3{ font-size:19px; margin-bottom:10px; color:var(--ink); }
  .work-cell p{ font-size:14.5px; color:var(--ink-dim); }

  /* PROOF */
  .proof-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
  @media (max-width:820px){ .proof-grid{ grid-template-columns:1fr; } }
  .proof-card{ border-radius:4px; overflow:hidden; position:relative; aspect-ratio:3/4; background:var(--navy-800); }
  .proof-card img{ width:100%; object-fit:cover; opacity:0.55; animation:kenburns 14s ease-in-out infinite alternate; transition:transform .4s ease; }
  .proof-card:hover img{ transform:scale(1.1); animation-play-state:paused; }
  @keyframes kenburns{ 0%{ transform:scale(1); } 100%{ transform:scale(1.07); } }
  .proof-overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,13,26,0.92), rgba(8,13,26,0.2) 55%); display:flex; flex-direction:column; justify-content:flex-end; padding:26px; }
  .proof-overlay h3{ font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--red-500); margin-bottom:10px; }
  .proof-overlay p{ font-size:13.5px; color:var(--slate); font-style:italic; }

  /* FINAL CTA */
  .final{ position:relative; text-align:center; padding:170px 0; overflow:hidden; background:linear-gradient(135deg, var(--red-700), var(--red-600) 55%, var(--navy-950)); }
  .final::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 42px); }
  .final .wrap{ position:relative; }
  .final h2{ font-size:clamp(38px,5.6vw,64px); color:#fff; max-width:16ch; margin:0 auto 26px; line-height:1.05; }
  .final p{ font-size:16.5px; color:rgba(255,255,255,0.85); max-width:52ch; margin:0 auto 42px; }
  .final .btn-primary{ background:#fff; color:var(--red-600); }
  .final .btn-primary:hover{ background:var(--cream); }

  /* FOOTER — full */
  .footer-main{ background:var(--navy-950); border-top:1px solid var(--navy-line);}
  .footer-grid{ display:grid; grid-template-columns:1.3fr 0.8fr 0.9fr 1.1fr; gap:50px; padding-bottom:60px; border-bottom:1px solid var(--navy-line); }
  @media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; row-gap:44px; } }
  @media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

  .footer-brand .brand{ font-size:20px; display:inline-block; margin-bottom:16px; }
  .footer-brand p{ font-size:14px; color:var(--slate); max-width:34ch; line-height:1.65; margin-bottom:24px; }
  .footer-social{ display:flex; gap:12px; }
  .footer-social a{ width:36px; height:36px; border:1px solid var(--navy-line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--slate); transition:border-color .2s ease, color .2s ease, background .2s ease; }
  .footer-social a:hover{ border-color:var(--red-500); color:#fff; background:var(--red-600); }
  .footer-social svg{ width:16px; height:16px; }

  .footer-heading{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--red-500); margin-bottom:20px; }
  .footer-links{ list-style:none; display:flex; flex-direction:column; gap:13px; }
  .footer-links a{ font-size:14px; color:var(--slate); transition:color .2s ease; }
  .footer-links a:hover{ color:#fff; }

  .footer-contact p{ font-size:14px; color:var(--slate); line-height:1.7; margin-bottom:16px; }
  .footer-contact a{ color:var(--slate); transition:color .2s ease; }
  .footer-contact a:hover{ color:#fff; }
  .footer-contact .footer-heading + p{ margin-bottom:16px; }

  .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:26px 0; font-size:12.5px; color:var(--slate-dim); }
  .footer-legal{ display:flex; gap:24px; }
  .footer-legal a{ color:var(--slate-dim); transition:color .2s ease; }
  .footer-legal a:hover{ color:var(--red-500); }

  /* GRAIN — tactile texture over dark sections */
  .grain{ position:fixed; inset:0; z-index:59; pointer-events:none; opacity:0.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

  /* CURSOR — magnetic reveal on work/proof items */
  .cursor-dot{ position:fixed; top:0; left:0; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--red-500); z-index:200; pointer-events:none; mix-blend-mode:difference; transform:translate(-100px,-100px) scale(1); transition:width .28s cubic-bezier(.16,.84,.44,1), height .28s cubic-bezier(.16,.84,.44,1), margin .28s cubic-bezier(.16,.84,.44,1), background .28s ease; display:flex; align-items:center; justify-content:center; }
  .cursor-dot span{ opacity:0; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#fff; white-space:nowrap; transition:opacity .2s ease .05s; }
  .cursor-dot.cd-view{ width:88px; height:88px; margin:-44px 0 0 -44px; background:var(--red-600); }
  .cursor-dot.cd-view span{ opacity:1; }
  .cursor-dot.cd-link{ width:46px; height:46px; margin:-23px 0 0 -23px; background:rgba(224,25,58,0.85); }
  @media (hover:none), (pointer:coarse){ .cursor-dot{ display:none; } }

  /* MARQUEE — capability strip */
  .marquee-band{ background:var(--red-600); border-top:1px solid var(--red-700); border-bottom:1px solid var(--red-700); overflow:hidden; padding:16px 0; }
  .marquee-track{ display:flex; width:max-content; animation:marqueeScroll 32s linear infinite; }
  .marquee-track span{ display:flex; align-items:center; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:17px; color:rgba(255,255,255,0.95); text-transform:uppercase; letter-spacing:0.02em; white-space:nowrap; padding:0 22px; }
  @keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

  /* PROOF hover — color pop instead of flat dim */
  .proof-card img{ filter:grayscale(0.55) brightness(0.8); }
  .proof-card:hover img{ filter:grayscale(0) brightness(0.95); }
  .proof-card::before{ content:""; position:absolute; inset:0; border:1px solid transparent; transition:border-color .3s ease; z-index:2; pointer-events:none; }
  .proof-card:hover::before{ border-color:var(--red-500); }

  /* Hero scramble target */
  .hero h1 .scramble-char{ display:inline-block; }

  /* WORK INDEX — bold hover-reveal portfolio list */
  .work-index{ margin-top:10px; }
  .work-row{ display:flex; align-items:center; gap:28px; padding:38px 4px; border-top:1px solid var(--navy-line); cursor:pointer; }
  .work-row:last-child{ border-bottom:1px solid var(--navy-line); }
  .work-row .wr-num{ font-family:'Space Mono',monospace; font-size:13px; color:var(--red-500); width:34px; flex-shrink:0; }
  .work-row .wr-title{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(30px,5.4vw,64px); text-transform:uppercase; letter-spacing:-0.01em; color:#fff; transition:color .25s ease, transform .25s ease; flex:1; }
  .work-row .wr-tag{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate-dim); flex-shrink:0; display:none; }
  @media (min-width:700px){ .work-row .wr-tag{ display:block; } }
  .work-row .wr-arrow{ font-size:24px; color:var(--slate-dim); flex-shrink:0; transition:transform .25s ease, color .25s ease; }
  .work-row:hover .wr-title{ color:var(--red-500); transform:translateX(14px); }
  .work-row:hover .wr-arrow{ color:var(--red-500); transform:translate(6px,-6px); }
  @media (max-width:700px){ .work-row{ gap:16px; padding:26px 2px; } }

  .hover-preview{ position:fixed; top:0; left:0; width:260px; height:340px; border-radius:3px; overflow:hidden; z-index:150; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(0.85); transition:opacity .3s ease, transform .3s cubic-bezier(.16,.84,.44,1); box-shadow:0 30px 60px -20px rgba(0,0,0,0.6); }
  .hover-preview.active{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  .hover-preview img{ width:100%; height:100%; object-fit:cover; }
  @media (hover:none), (pointer:coarse){ .hover-preview{ display:none; } }

   /* POPUP FORM STYLES — bold & clean */
    .popup-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(12px);
      z-index: 999; display: flex; align-items: center; justify-content: center;
      opacity: 0; visibility: hidden; transition: 0.3s ease;
    }
    .popup-overlay.active { opacity: 1; visibility: visible; }
    .popup-form {
      background: var(--cream); color: var(--ink); padding: 44px 36px;
      border-radius: 6px; max-width: 520px; width: 90%;
      box-shadow: 0 30px 55px rgba(0,0,0,0.7); border-left: 6px solid var(--red-600);
      position: relative; font-weight: 600;
    }
    .popup-form h3 { 
      font-size: 1.5rem; margin-bottom: 28px; color: var(--navy-950); 
      text-align:center;
    }
    .popup-form input, .popup-form textarea {
      width: 100%; padding: 16px 14px; margin-bottom: 20px;
      border: 2px solid #cfc9b8; background: #fff; font-weight: 600;
      border-radius: 4px; font-family: 'Inter', sans-serif;
    }
    .popup-close {
      position: absolute; top: 18px; right: 24px;
      font-size: 32px; cursor: pointer; color: var(--red-600); font-weight: 800;
    }
    .popup-submit {
      background: var(--red-600); color: white; border: none;
      padding: 16px 28px; font-weight: 800; text-transform: uppercase;
      width: 100%; border-radius: 4px; cursor: pointer;
    }

 .wha-header__logo {
     position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
 }
 
 .wha-logo {
    width: 100%;
    max-width: 180px;
    height: 57px;
    display: block;
    margin: 0 auto;
	margin-left: 12px;
 }

 
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 60px;
  width: max-content;
  animation: marquee-right 18s linear infinite !important;
}

.marquee-track span {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  flex-shrink: 0;
}

@keyframes marquee-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}


 .input-error{
    color:#e53935;
    font-size:13px;
    margin-bottom: 16px;
}

.error{
    border:1px solid #e53935 !important;
}

.thankyou-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:99999;
}

.thankyou-popup.active{
    display:flex;
}

.popup-box{
    background:#fff;
    padding:40px;
    width:90%;
    max-width:450px;
    border-radius:12px;
    text-align:center;
    position:relative;
}

.popup-box h2{
   margin-bottom: 15px;
    color: #000;
}

.popup-box p{
    color: #000;
    margin-bottom: 20px;
}

.close-popup{
    position:absolute;
    right:18px;
    top:10px;
    font-size:28px;
    cursor:pointer;
    color: #000;
}