.antonio-bold {
  font-family: "Antonio", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

.antonio-reg{
  font-family: "Antonio", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


.catamaran-reg {
  font-family: "Catamaran", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}



/* dark/light tweakables */
:root {
  --fx-line: rgba(255,255,255,.08);
  --fx-dot: rgba(255,255,255,.45);
  --fx-accent: #e6ff4b;     /* your accent */
}
.dark {
  --fx-line: rgba(255,255,255,.10);
  --fx-dot: rgba(255,255,255,.5);
}

/* reduce motion = static background */
@media (prefers-reduced-motion: reduce) {
  #heroFx { display: none; }
}

/* Webfont: Surgena-Regular */@font-face {
    font-family: 'Surgena-reg';
    src: url('fonts/Surgena-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Surgena-Regular.otf') format('opentype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Surgena-Bold */@font-face {
    font-family: 'Surgena';
    src: url('fonts/Surgena-Bold.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Surgena-Bold.otf') format('opentype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}


h1 {margin:0;}

h3 {font-family: "Catamaran", sans-serif;}

p {  font-family: "Catamaran", sans-serif;
  font-optical-sizing: auto;
  font-size: clamp(16px, 1.2vw, 18px) !important;
  font-weight: 300;
  font-style: normal;}

strong {font-weight: 1000;}


ul {margin-top:0;}

  li {  font-family: "Catamaran", sans-serif;
  font-optical-sizing: auto;
  font-size: clamp(16px, 1.2vw, 18px) !important;
  font-weight: 300;
  font-style: normal;}



    :root{
      --bg:#1C1D20;               /* site background */
      --fg:#e9e9e9;               /* primary text */
      --muted:#a6a6a6;            /* secondary text */
      --line:#414141;                /* hairline separators */
      --accent:#e6ff4b;           /* subtle accent for hovers */
      --maxw:1200px;              /* content max width */
      --gutter:28px;              /* horizontal padding */
      --lh:1.2;                   /* line height */
      --marquee-speed: 32s;       /* adjust for faster/slower greeting strip */
    }

    body.light{
  --bg:#ffffff;
  --fg:#1C1D20;
  --muted:#555;
  --line:#ddd;
  --accent:#5e67e6;
}
body.light .icon-dark {display: none;}
body.light .icon-light {display: block;}

.flex {display: flex; justify-content: space-between; flex-wrap: wrap;}

.icon-dark {display: block;}
.icon-light {display: none;}

    /* Reset / base */
    *{box-sizing:border-box}
    html,body{height:100%; cursor: none; }
    .noise-cover {position: fixed;top:0;  left:0; width: 100%; height: 100%; background-image: url(images/noise.gif); background-size: contain; opacity: 0.03;}
    body{
      margin:0;
      font-family: "Catamaran", sans-serif;
      background:var(--bg);
      color:var(--fg);
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
      overflow-y:scroll;
    }
    a{color:inherit; text-decoration:none; cursor: none;}
    img{max-width:100%; display:block}
    .container{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}

    /* --- Header / Nav (kept outside smooth scroller so it stays fixed) --- */
    .topbar{
      position:fixed; top:0; z-index:50;
      backdrop-filter:saturate(120%) blur(8px);
 	width: 100%; top:0; left:0;
    }
    .topbar .inner{display:flex; align-items:center; justify-content:space-between; height:64px}
    .brand{font-weight:700; letter-spacing:.2px}
    .nav{display:flex; gap:22px}
    .nav a{opacity:.9}
    .nav a:hover{opacity:1}

    .header-link {position: relative;}
.header-link:hover:after {content:""; position: absolute; width: 5px; height: 5px; background:var(--accent); left: 50%;
    transform: translate(-50%, 0); bottom:-5px; border-radius: 50%;}
    .home .home-link:after {content:""; position: absolute; width: 5px; height: 5px; background:var(--accent); left: 50%;
    transform: translate(-50%, 0); bottom:-5px; border-radius: 50%;}

     .page-template-work .work-link:after {content:""; position: absolute; width: 5px; height: 5px; background:var(--accent); left: 50%;
    transform: translate(-50%, 0); bottom:-5px; border-radius: 50%;}



     .page-template-about .about-link:after {content:""; position: absolute; width: 5px; height: 5px; background:var(--accent); left: 50%;
    transform: translate(-50%, 0); bottom:-5px; border-radius: 50%;}


     .page-template-contact .contact-link:after {content:""; position: absolute; width: 5px; height: 5px; background:var(--accent); left: 50%;
    transform: translate(-50%, 0); bottom:-5px; border-radius: 50%;}

.brand {width: 50px;}

    /* container */
.toggleBtn {
  width: 50px;
  height: 26px;
  border-radius: 50px;
  background: var(--line);
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
  flex-shrink: 0;
}

/* the circle "knob" */
.toggleBtn::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 20px;
  height: 20px;
  background: var(--fg);
  border-radius: 50%;
  transition: transform 1s ease, background 0.3s ease;
}

/* when light mode is active */
body.light .toggleBtn {
  background: var(--accent); /* active background */
}


body.light .toggleBtn::after {
  transform: translateX(26px); /* slide knob to right */
  background: var(--bg); /* contrast in light mode */
}


.toggleBtn {
  background: var(--accent); /* active background */
}


.toggleBtn::after {
  transform: translateX(2px); /* slide knob to right */
  background: var(--bg);       /* contrast in light mode */
}


.circle-text { position: absolute; right: 0; bottom: 200px; }


.globe {
    position: absolute;
    width: 50%;
    /* left: 25%; */
    top: 50%;
    left: 50%;
    rotate: 20deg;
    transform: translate(-65%, -30%);}

/* SVG wrapper: no animation here */
.badge {
  display: inline-block;
  /* no animation on .badge */
  /* will-change not needed if not animating this element */
  pointer-events: none;            /* avoids accidental hits */
}


#about .globe {rotate:0deg; transform: translate(-50%, -50%);}


/* Text styling */
.badge__text{
  fill: currentColor;
  font-family: "Antonio", sans-serif;
  font-size: 14px;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-rendering: optimizeSpeed;   /* prefer speed over quality */
}

/* Rotate ONLY the group */
.spin{
  transform-origin: 50% 50%;
  transform-box: fill-box;         /* reliable origin across browsers */
  animation: spin 30s linear infinite;  /* slower = smoother */
  will-change: transform;          /* promote this layer only */
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Mobile: pause animation to save battery/FPS */
@media (max-width: 768px){
  .spin { animation: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .spin { animation: none !important; }
}



/*Loader*/

#loader{
  position: fixed;
  inset: 0;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transform: translateY(0);
  will-change: transform, border-radius, box-shadow;
  transition: transform .9s cubic-bezier(.22,1,.36,1), border-radius .9s, box-shadow .9s;
  text-align: center; /* make sure text is centered */
}

/* Slide down exit */
#loader.slideDown{
  transform: translateY(100%);
  border-top-left-radius: 48px;
  border-top-right-radius: 48px;
  box-shadow: 0 -20px 60px rgba(0,0,0,.35);
}

/* greetings baseline */
.loader-text{
  position: relative;
}
.loader-text span{
  position: absolute;         /* stack them on top of each other */
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  font-family: "Antonio", sans-serif;
  font-size: clamp(32px, 6vw, 72px);
  font-weight: 700;
}

/* animate only when .play is applied */
.loader-text span.play{
  animation: fadeInOut 0.8s forwards;
}

@keyframes fadeInOut{
  0%   {opacity:0; transform: translate(-50%,-40%);}
  20%,80% {opacity:1; transform: translate(-50%,-50%);}
  100% {opacity:0; transform: translate(-50%,-60%);}
}



    /* ---- Smooth scrolling container ---- */
    .smooth{position:fixed; inset:0; overflow:hidden;}
    .smooth__content{will-change:transform}

    /* --- Hero --- */
    .hero{padding:8vh 0 10vh; height: 100vh; display: flex; align-items: center; flex-wrap: wrap; position: relative; min-height: 800px;}
    .hero .overline{display:flex; gap:10px; color:var(--muted); font-size:14px; letter-spacing:.12em; text-transform:uppercase}
    .hero h1{font-size: clamp(40px, 8vw, 124px); line-height:.95; }
    .hero .name{font-size: clamp(18px, 2vw, 64px); line-height:.95; }
    .hero .role{font-size: clamp(16px, 2.2vw, 28px); color:var(--muted); max-width:900px}
    .hero .ctaRow{display:flex; gap:16px; align-items:center; margin-top:28px}
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  font-weight: 600;
  overflow: hidden; /* clip the fill inside */
  z-index: 0;
  transition: color .3s ease, border-color .3s ease;
}

/* background fill layer */
.btn::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  background: var(--accent);
  z-index: -1; /* keep it behind the text */
  transition: height 0.4s ease;
}

/* on hover: animate fill + adjust text color */
.btn:hover::before {
  height: 100%;
}

.btn:hover {
  color: var(--bg);         /* text changes to background color */
  border-color: var(--accent);
  transform: translateY(-1px);
}

.btn span.chev {
  display: inline-block;
  transform: translateX(0);
  transition: transform .25s ease;
}

.btn:hover span.chev {
  transform: translateX(4px);
}
    .btn span.chev{display:inline-block; transform:translateX(0); transition:transform .25s ease}
    .btn:hover span.chev{transform:translateX(4px)}

    /* --- Work list --- */
    .section{padding:72px 0; border-bottom:1px solid var(--line)}
    .section h2{font-size:14px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; margin:0 0 22px}

    .worklist{display:grid; grid-template-columns:1fr;}
    .workItem{display:grid; grid-template-columns: 1fr 1fr 160px; gap:20px; align-items:center; padding:18px 0; border-top:1px solid var(--line); transition: 0.5s;}
    .workItem:first-child{border-top:0}
    .workTitle{font-size: clamp(20px, 3.2vw, 40px); line-height:var(--lh)}
    .workTitle2{font-size: clamp(20px, 3.2vw, 40px); line-height:var(--lh)}
    .workMeta{color:var(--muted)}
    .workLink{justify-self:end}
    .workLink .text{border:1px solid var(--line); padding:10px 12px; border-radius:999px; font-size:14px; opacity:.9}
    .workItem:hover .text{border-color:var(--fg); opacity:1}
    .workItem:hover .workTitle{color:var(--accent)}
    .workItem:hover  {padding: 50px 0;}


 .workItem2{display:grid; grid-template-columns: 1fr 1fr 160px; gap:20px; align-items:center; padding:18px 0; border-top:1px solid var(--line); transition: 0.5s;}
    .workItem2:first-child{border-top:0}
.workItem2:hover .text{border-color:var(--fg); opacity:1}
    .workItem2:hover .workTitle{color:var(--accent)}
    .workItem2:hover  {padding: 50px 0;}




    @media (max-width:900px){
      .workItem{grid-template-columns:1fr;}
       .workItem2{grid-template-columns:1fr;}
      .workLink{justify-self:start}
    }

    /* --- Footer / Contact --- */
    .ctaBlock{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px}
    .ctaHeading{font-size: clamp(28px, 4.8vw, 68px); margin:0}
    .foot{display:grid; grid-template-columns:1fr 1fr; gap:18px; color:var(--muted); padding-top:26px}
    @media (max-width:800px){.foot{grid-template-columns:1fr}}



    /* --- Custom cursor (subtle) --- */
    .cursor{position:fixed; left:-5px; top:-5px; width:20px; height:20px; background:var(--accent);  border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); opacity:1; transition:transform .12s ease-out, width .2s, height .2s, opacity .2s; z-index:999;}
    .cursor.grow{width:36px; height:36px; opacity:1}
       .cursor.grow{width:50px; height:50px; opacity:1}
       .cursor.grow:after{content:"VIEW"; color:var(--bg); font-family: "Catamaran", sans-serif; font-size: 16px; position: absolute; width: 30px; height: 30px; top:13px; left:4px; font-weight: 800;}

    .marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  padding: 40px 0;
  margin-top:-100px;
  width: 100%;
}

.marquee .track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
}

.marquee .item {
  margin: 0 32px;
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 14px;
}


#about {position: relative;}




.location-panel {position: absolute; right:0; width: 200px; bottom:200px; background:var(--fg); }

    /* utility */
    .muted{color:var(--muted)}
    .sep{border-top:1px solid var(--line)}








.email a {display: flex; align-items: center;}

.email img {width: 14px;}





#cursorPreview {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 180px;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 999;
  border-radius: 12px;
  overflow: hidden;
}




/* Horizontal scroll section */
.hs {
  position: relative;
  width: 100%;
  overflow: hidden;       /* hide overflow outside viewport */
  padding: 80px 0;        /* vertical breathing space */
}

.hs-track {
  display: flex;
  gap: 40px;              /* spacing between videos/images */
  will-change: transform; /* smoother GPU compositing */
}

/* Each item (video or image) */
.hs-track video,
.hs-track img {
  flex: 0 0 auto;         /* prevent shrinking */
  width: 400px;           /* set your preferred size */
  height: 250px;          /* keep consistent height */
  object-fit: cover;      /* crop nicely inside */
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  background: #000;       /* fallback for videos */
}

/* Optional: responsive sizing */
@media (max-width: 900px) {
  .hs-track video,
  .hs-track img {
    width: 280px;
    height: 180px;
  }
}






/* Page transition overlay — swipe up (cover) then down (reveal) */
#transition{
  position: fixed;
  display: flex;
  align-items: center;
  inset: 0;
  z-index: 9999;
/*  background: var(--fg);*/
  transform: translateY(0);                  /* start covering, so load -> slide DOWN */
  transition: transform 0.9s cubic-bezier(.77,0,.175,1);
  pointer-events: none;
text-align: center;
justify-content: center;
background-image:url(images/white-transition.webp);
background-size: cover;
background-position: top center;

                 /* if you want curved edges; add px */
}

body.light #transition{background-image:url(images/black-transition.webp);}

#transition,
#transition.hide{
  transition:
    transform 1.5s cubic-bezier(.77,0,.175,1),
    border-radius 1.5s cubic-bezier(.77,0,.175,1);
}
#transition.hide{ border-radius: 0; }


/* On link click → swipe UP to cover before navigating */
#transition.active{
  transform: translateY(0);
}

/* On page load → swipe DOWN to reveal content */
#transition.hide{
  transform: translateY(100%);
}


#transition span {font-size: 4vw; color:var(--bg); text-align: center;}


/* Text styling */
.transition-text {
  font-size: clamp(24px, 5vw, 72px);
  color: var(--bg); /* contrast with overlay */
  display: flex;
  gap: 2px;
  perspective: 600px; /* gives a bit of depth to the toss */
}

.transition-text span {
  display: inline-block;
  transform-origin: bottom center;
  /* one-shot "toss" (no infinite loop), fills both start/end */
  animation: tossUp 1.5s cubic-bezier(.2,.7,.2,1) both;
}

/* "thrown up then down" with a little squash on landing */
@keyframes tossUp {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  35%  { transform: translateY(-26px) rotate(var(--rot, 0deg)) scale(1.02); } /* up & slight tilt */
  60%  { transform: translateY(0) rotate(0deg) scale(0.98); }                 /* land & squash */
  78%  { transform: translateY(6px) rotate(0deg) scale(0.99); }               /* tiny after-bounce */
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* Staggered start times for the "toss" */
.transition-text span:nth-child(1)  { animation-delay: 0s; }
.transition-text span:nth-child(2)  { animation-delay: 0.05s; }
.transition-text span:nth-child(3)  { animation-delay: 0.10s; }
.transition-text span:nth-child(4)  { animation-delay: 0.15s; }
.transition-text span:nth-child(5)  { animation-delay: 0.20s; }
.transition-text span:nth-child(6)  { animation-delay: 0.25s; }
.transition-text span:nth-child(7)  { animation-delay: 0.30s; }
.transition-text span:nth-child(8)  { animation-delay: 0.35s; }
.transition-text span:nth-child(9)  { animation-delay: 0.40s; }
.transition-text span:nth-child(10) { animation-delay: 0.45s; }
.transition-text span:nth-child(11) { animation-delay: 0.50s; }
.transition-text span:nth-child(12) { animation-delay: 0.55s; }
.transition-text span:nth-child(13) { animation-delay: 0.60s; }
.transition-text span:nth-child(14) { animation-delay: 0.65s; }
.transition-text span:nth-child(15) { animation-delay: 0.70s; }

/* Slight per-letter rotation variance (feels more physical) */
.transition-text span:nth-child(odd)  { --rot: -6deg; }
.transition-text span:nth-child(even) { --rot:  5deg; }
/* spaces won’t need rotation; if you used   spans, you can neutralize them:
   .transition-text span:empty { --rot: 0deg; } */


.case-breakdown {width: 100%; padding-top:100px;}
.case-intro-image {width: 49%;}
.breakdown-left {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.breakdown-right {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.summary {margin-bottom:20px; width: 30%}
.breakdown-title {color:var(--muted);  font-size: clamp(18px, 1.2vw, 22px); font-family: "Antonio", sans-serif;font-optical-sizing: auto;font-weight: 800;}
.summary p {margin:0; font-size: clamp(14px, 1vw, 18px) !important;}
.kings {background-image: url(images/kings.png); background-size: cover; background-repeat: no-repeat; background-position: center;}
.case-intro-image {
  /* your existing background-image here */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 60vh; /* or whatever height you want */
  will-change: background-position;
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .parallax { background-position: center center !important; }
}


.left-title {color:var(--muted);  font-size: clamp(18px, 1.6vw, 22px); font-family: "Antonio", sans-serif;font-optical-sizing: auto;font-weight: 800;}



.page-template-about .hero-text {width: 50%;}


.split-input {display: flex; justify-content: space-between; flex-wrap: wrap;  flex-wrap: wrap; margin-bottom: 20px;}
.left-input {width: 49%;}
.right-input {width: 49%;}


.form {max-width: 900px;}
.form input {padding: 14px 16px;
	width: 100%;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 12px;}

    select.wpcf7-form-control.wpcf7-select {padding: 14px 16px;
	width: 100%;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 12px;}


    textarea {    padding: 14px 16px;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 12px;
    resize: vertical; width: 100%; margin-bottom: 20px;}

.btn input {padding:0;
	width: 100%;
    background: transparent;
    color: var(--background);
    border: 0;
    border-radius: 0; font-family: "Catamaran", sans-serif; font-weight: 800;}

    span.wpcf7-spinner {
    display: none;
}

span.wpcf7-list-item.first.last {margin-left: 0; margin-bottom: 20px;}
span.wpcf7-list-item.first.last label {display: flex;}
span.wpcf7-list-item.first.last label input {width: 20px; border-radius: 5px;}


.form p {margin:0;}




.case-info {border-bottom: 1px solid var(--line); margin-bottom: 20px; display: flex; justify-content: space-between;}
.left-copy {width: 20%;}
.right-copy{ width: 78%; }
.right-copy p {margin-top:0;}

.image-gallery2 {
  position: relative;
  max-width: 1000px;
  margin: 40px auto;
}

.carousel {
  position: relative;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  align-items: center;
  transition: transform 0.6s cubic-bezier(.77,0,.175,1);
}

.gallery-image {
  min-width: 100%;
  user-select: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.08);
}

.gallery-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  color: white;
  border: none;
  font-size: 32px;
  padding: 6px 12px;
  border-radius: 50%;
  cursor: pointer;
  transition: background .3s;
  z-index: 2;
  width:50px;
  height: 50px;
}
.carousel-btn:hover {
  background: rgba(0,0,0,0.7);
}
.carousel-btn.prev { left: 12px; display: flex; align-items: center; justify-content: center;}
.carousel-btn.next { right: 12px; display: flex; align-items: center; justify-content: center;}

/* Dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  gap: 8px;
}
.carousel-dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--muted, #999);
  cursor: pointer;
  transition: background .3s;
}
.carousel-dots button.active {
  background: var(--accent, #e6ff4b);
}

#contact {padding-bottom:0; border-bottom: 0;}

.case-intro-image {width: 100%; height: 450px; margin: 40px auto; max-width: var(--maxw); border-radius: 12px; background-size: cover; background-position: center;}
.case-intro-image.amicus {background-image: url(images/amicus.webp);}
.case-intro-image.bsl {background-image: url(images/bsl.webp);}


.video-gallery-phone {display: flex; justify-content: space-between; flex-wrap: wrap;}
.video-container {width: 30%; margin-bottom: 40px;}
.video-container2 {width: 100%;}
.video-container video {border-radius:35px; width: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); max-height: 530px;}



/* Container */
.post-password-form {
  max-width: 480px;
  margin: 4rem auto;
  padding: 1.5rem 1.75rem;
  background: #000;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  text-align: center;
  margin-top:150px;
}

/* Title + text (optional – if you add a title above the form) */
.post-password-form h2 {

  font-size: 2rem;
  margin: 0 0 0.75rem;
  color: #fff;
}
.post-password-form p {
  color: #ddd;
  margin: 0 0 1rem;
}

/* Field + button */
.post-password-form label {
  display: none; /* WP prints a label; hide if you use placeholder */
}
.post-password-form input[type="password"] {
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff;
  outline: none;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
}
.post-password-form input[type="password"]::placeholder { color: #bbb; }

.post-password-form input[type="submit"] {
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  background: linear-gradient(135deg, #ff5b84, #7a5cff);
  color: #fff;
  transition: transform .08s ease, filter .2s ease;
}
.post-password-form input[type="submit"]:active { transform: translateY(1px); }
.post-password-form input[type="submit"]:hover { filter: brightness(1.05); }

/* Help text */
.post-password-form .hint {
  display: block; margin-top: .75rem; font-size: .9rem; color: #aaa;
}




/* your soft, single-colour glow */
.grad-circle {
  z-index: -1;
  width: 44vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in oklab, var(--accent) 42%, transparent) 0%,
    transparent 70%
  );
  filter: blur(32px);
  opacity: 0.8;
  transform: translate(-50%, -50%); /* center on its left/top */
}

/* follower positioning */
.glow-follow {
  position: fixed;
  left: var(--gx, 50vw);
  top:  var(--gy, 45vh);
  pointer-events: none;
  z-index: 3;          /* adjust relative to your hero/content */
}
.page-template-work section#work {
    padding-top: 100px !important;
}


:root{
  --drawer-w: 86vw;
  --dur: .28s;
  --e: cubic-bezier(.2,.7,.2,1);
  --glass-bg: rgba(17,17,17,.55);
  --glass-stroke: rgba(255,255,255,.08);
}

.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); background: rgba(255,255,255,.6); }
@media (prefers-color-scheme: dark){
  .site-header { background: rgba(0,0,0,.35); }
}

.site-header__bar{
  display:none; align-items:center; justify-content:space-between;
  padding: 12px 16px;
}

:root{
  --drawer-w: 86vw;
  --dur: .28s;
  --e: cubic-bezier(.2,.7,.2,1);
  --glass-bg: rgba(17,17,17,.55);
  --glass-stroke: rgba(255,255,255,.08);
}

.hamburger{ position:relative; width:40px; height:40px; border:none; background:transparent; cursor:pointer; }
.hamburger span{
  position:absolute; left:8px; right:8px; height:2px; background:var(--fg); transition:transform var(--dur) var(--e), opacity var(--dur) var(--e), top var(--dur) var(--e);
}
.hamburger span:nth-child(1){ top:12px; }
.hamburger span:nth-child(2){ top:19px; }
.hamburger span:nth-child(3){ top:26px; }
.hamburger[aria-expanded="true"] span:nth-child(1){ top:19px; transform:rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ top:19px; transform:rotate(-45deg); }

/* Backdrop */
.drawer-backdrop{
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(3px);
  opacity:0; pointer-events:none;
  transition: opacity var(--dur) var(--e);
}
.drawer-backdrop[data-open="true"]{ opacity:1; pointer-events:auto; }

/* Drawer */
.drawer{
  position: fixed; inset: 0 0 0 auto; width: var(--drawer-w); max-width: 480px;
  transform: translateX(100%);
  background: var(--glass-bg);
  border-left: 1px solid var(--glass-stroke);
  backdrop-filter: blur(16px);
  z-index: 80; display:flex; flex-direction:column;
  transition: transform var(--dur) var(--e);
  color: #fff;
}
.drawer[data-open="true"]{ transform: translateX(0); }

.drawer__nav{ display:flex; flex-direction:column; height:100%; }
.mobile-menu{ list-style:none; margin: 20px 0; padding: 0 16px; }
.mobile-menu > li{ border-bottom: 1px solid rgba(255,255,255,.06); }
.mobile-menu a{
  display:block; padding:14px 4px; text-decoration:none; color:inherit; font-weight:500;
}
.mobile-menu .sub-menu{
  list-style:none; margin: 0 0 10px; padding-left: 10px; display:none;
  border-left: 1px dashed rgba(255,255,255,.15);
}
.mobile-menu .sub-open > .sub-menu{ display:block; }

.submenu-toggle{
  margin-left: 8px; border: none; background: transparent; color: inherit; cursor: pointer;
  padding: 6px; border-radius: 10px; line-height: 0;
}
.submenu-toggle:focus-visible{ outline: 2px solid rgba(255,255,255,.5); outline-offset: 2px; }

.drawer__footer{
  margin-top: auto; padding: 16px; border-top: 1px solid rgba(255,255,255,.08);
}
.btn-ghost{
  display:inline-block; padding:10px 14px; border:1px solid rgba(255,255,255,.24);
  border-radius: 12px; text-decoration:none; color:inherit;
}

/* Scroll lock */
.no-scroll{ overflow: hidden; }

a.site-logo {
    width: 45px;
}

.drawer__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-template-contact section.section.container {padding-top:100px !important;}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .drawer, .drawer-backdrop, .hamburger span{ transition: none !important; }
}



/* optional: keep it desktop-only */
@media (max-width: 768px) {
  .glow-follow { display: none; }
}

/* optional: reduce motion friendly */
@media (prefers-reduced-motion: reduce) {
  .glow-follow { display: none; }
}

@media only screen and (max-width: 1250px) {
  .container {padding: 20px 40px !important; }
  .circle-text {right:40px;}
  .marquee {margin-bottom: 50px;}
}

@media only screen and (max-width: 950px) {
.page-template-about .hero {flex-direction: column;}
.page-template-about .hero-text {width: 100%;}

.page-template-about .hero div {margin-left:0 !important;}
}

@media only screen and (max-width: 850px) {
  .circle-text {position: relative; left:0px; margin-top:40px;}
  #about .circle-text {display: none;}
  .circle-text {bottom:50px; display: none;}
  #about {margin-bottom: 50px;}
  .container {padding: 20px 20px !important;}
  .globe-link {display: none;}
  section#bio div {display: block !important;}
  section#bio {
    padding-bottom: 20px !important;
}
section#bio .btn {margin-bottom: 10px;}
}

@media only screen and (max-width: 650px) {
.breakdown-left {flex-direction: column;}
.breakdown-right {flex-direction: column;}
.summary {width: 100%;}
.case-info {flex-direction: column;}
.right-copy {width: 100%;}
.left-title {margin-bottom: 20px;}
.topbar {display: none;}
.site-header__bar {display: flex;}
.video-container video {border-radius: 5px; height: 280px;}

}

@media only screen and (max-width: 520px) {
.sep span {margin-left:0 !important;}
}


@media only screen and (max-width: 100px) {
.video-container {
    width: 100%;
    }
}