/* =======================
   FONT FACE DEFINITIONS
   ======================= */
@font-face {
  font-family: 'Bodyfont';
  src: url('Bodyfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;  /* body can show fallback while loading */
}

@font-face {
  font-family: 'Headingfont';
  src: url('Headingfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* headings wait for the font (no flash) */
}
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap; /* 👈 this is the fix */
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff2") format("woff2"),
       url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff") format("woff");
}


/* =======================
   ROOT VARIABLES
   ======================= */
:root {
  --color-blue: #006eff;
  --color-pink: #ff66c4;
  --color-turquoise: #1ec6b0;
  --color-black: #000000;
  --color-white: #ffffff;
}

/* =======================
   BASE TYPOGRAPHY & LAYOUT
   ======================= */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* prevent horizontal scroll */
  max-width: 100%;
}
* {
  box-sizing: border-box;
}
body {
  font-family: 'Bodyfont', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-white);
  background-color: var(--color-black);
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Headingfont', serif;
  font-weight: normal;
  line-height: 1.2;
  color: var(--color-white);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* H1 – huge, uppercase */
/* H1 – slightly smaller now */
h1 {
  font-size: clamp(2.1rem, 8vw, 5rem);
  text-transform: uppercase;
  line-height: 1.1;
}

/* H2 – bigger than H1 */
h2 {
  font-size: clamp(1rem, 8vw, 2rem);
  text-transform: uppercase;
  line-height: 1.15;
}

/* H3 – large */
h3 {
  font-size: clamp(2rem, 11vw, 5rem);
  line-height: 1.2;
}

/* H4 – medium-large */
h4 {
  font-size: clamp(1.75rem, 4vw, 1.75rem);
  line-height: 1.3;
}

/* H5 – medium */
h5 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.4;
}

/* H6 – small heading */
h6 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.4;
}

/* Paragraph text – responsive size */
p {
  font-size: clamp(0.85rem, 2vw, 1rem);
  line-height: 1.6;
  padding-left: 2rem;
  padding-right: 2rem;
}

.btn {
  font-size: clamp(0.8rem, 2vw, 1rem);
}
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem; /* 1rem bottom space, no top space */
}

#hero p,
#about p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* =======================
   NAVBAR
   ======================= */
/* was header { ... } */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Base: fast to paint, no blur */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1rem;
  background: rgba(0,0,0,0.75);   /* solid-ish, cheap */
  border-bottom: 2px solid var(--color-blue);
  z-index: 9999;

  /* Only animate cheap properties */
  transition: background-color .25s ease, box-shadow .25s ease, border-radius .25s ease, margin .25s ease, width .25s ease;
  border-radius: 0;
}

/* On scroll: apply the “glass” look */
@supports (backdrop-filter: blur(10px)) {
  .navbar.scrolled {
    background: rgba(0,0,0,0.50);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
  }
}

/* Optional: pill shape only when scrolled */
.navbar.scrolled {
  margin: 0.5rem auto;
  width: 95%;
  border-radius: 50px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .navbar { transition: none; }
}


body {
  padding-top: 72px; /* match navbar height */
}

.navbar > * { min-width: 0; }

/* Social icons (left) */
.nav-social {
  display: flex;
  gap: 1rem;
}
.nav-social img {
  width: clamp(28px, 5vw, 40px);
  height: clamp(28px, 5vw, 40px);
  transition: transform 0.3s ease;
    aspect-ratio: 1 / 1;      /* reserve square box before image loads */

}

.nav-social a:hover img {
  transform: scale(1.2);
}

/* Centered logo */
.nav-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 40vw;
    aspect-ratio: 2 / 1;      /* 300x150 -> 2:1, reserves space */

}
.nav-logo img {
  height: 70px;       /* controls the actual display height */
  width: auto;        /* keep the natural 2:1 ratio */
  max-width: 100%;    /* prevent overflow */
  display: block;     /* avoids inline image spacing/jitter */
  transition: transform 0.3s ease;
}

.nav-logo a:hover img {
  cursor: pointer;;
}

/* Desktop nav links (right) */
.nav-links {
  display: flex;
  gap: 0.75rem;
}
.pill-btn {
  background: var(--color-blue);
  color: var(--color-white);
  padding: 0.2rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  box-shadow: 0 0 10px var(--color-blue);
}
.pill-btn:hover {
  background: var(--color-pink);
  box-shadow: 0 0 15px var(--color-pink); /* pink glow on hover */
  transform: scale(1.15);
}

/* Global Button Style */
.btn {
  display: inline-block;
  background: var(--color-blue);
  color: var(--color-white);
  padding: 0.5rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  box-shadow: 0 0 10px var(--color-blue);
  margin-top: 0.5rem;
  font-weight: 500;
}

.btn:hover {
  background: var(--color-pink);
  box-shadow: 0 0 15px var(--color-pink); /* pink glow on hover */
   transform: scale(1.15);
}


/* =======================
   HAMBURGER
   ======================= */
  .mobile-link {
  font-size: 0.85rem; /* smaller text */
}

@media (max-width: 520px) {
  .mobile-link {
    font-size: 0.8rem; /* even smaller on tiny screens */
  }
}
 
.hamburger {
  display: none;
  position: relative;
  width: 40px;
  height: 28px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  
}
.hamburger span {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  background: var(--color-white);
  transition: transform .25s, opacity .2s;
}
.hamburger span:nth-child(1) { top: 25%; }
.hamburger span:nth-child(2) { top: 50%; }
.hamburger span:nth-child(3) { top: 75%; }

/* Mobile menu */
.mobile-menu {
  position: absolute;
  left: 70%;
  right: 0;
  top: 105%;
  background: #00000000;
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform .2s;
  text-align: center;
  z-index: 1000;
  border-radius: 1.5rem;
   background: rgba(0, 0, 0, 0.5); /* semi-transparent for glass effect */
border-bottom: 2px solid var(--color-blue);
max-width: 140px;
}
/* short left border from bottom up */

.mobile-menu.is-open {
  transform: scaleY(1);
}
.mobile-link {
  display: block;
  padding: 0.2rem 0.75rem;
  border-radius: 2rem;
  text-decoration: none;
  background: var(--color-blue);
  color: var(--color-white);
  box-shadow: 0 0 10px var(--color-blue);
}

@media (min-width: 600px) and (max-width: 1099px) { .mobile-menu { left: 80%; } }
@media (min-width: 800px) and (max-width: 1099px) { .mobile-menu { left: 85%; } }
@media (min-width: 1000px) and (max-width: 1099px) { .mobile-menu { left: 90%; } }

/* Responsive */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .hamburger { display: inline-block; }
}
@media (max-width: 520px) {
  .nav-logo img { height: 42px; max-width: 150px; }
  .nav-social { gap: 0.5rem; }
}

/* Hamburger to X animation */
.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
/* Facebook glow (blue) */
.nav-social a[aria-label="Facebook"] img {
  filter: drop-shadow(0 0 6px var(--color-blue));
}

/* Instagram glow (pink) */
.nav-social a[aria-label="Instagram"] img {
  filter: drop-shadow(0 0 6px var(--color-pink));
}

/* Email glow (turquoise) */
.nav-social a[aria-label="Email"] img {
  filter: drop-shadow(0 0 6px var(--color-turquoise));
}



.trigpoint-rise {
  position: absolute;
  left: 7%;                 /* tweak horizontal position */
  bottom: 110px;             /* starts at the bottom edge */
  pointer-events: none;
  z-index: 1;
  /* Optional cap: max-width: 380px; */
}

.trigpoint-figure {
  display: block;
  width: clamp(50px, 10vw, 150px);
  height: auto;
  transform: translateY(var(--trigpoint-y, 160px)) scaleX(-1); 
  /* flip horizontally */
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
  will-change: transform;
  transition: none;

}

@media (max-width: 767px) {
  .trigpoint-rise {
    bottom: 120px;  /* lower it further */
  }
}
/* Base: very small phones */
.hero-us {
  position: absolute;
  left: 19%;
  bottom: -72px;            /* 88 - 160 */
  pointer-events: none;
  z-index: 5;
}

/* Phones */
@media (min-width: 375px) { .hero-us { bottom: -76px; } }  /* 84 - 160 */
@media (min-width: 414px) { .hero-us { bottom: -78px; } }  /* 82 - 160 */
@media (min-width: 480px) { .hero-us { bottom: -78px; } }  /* 82 - 160 */

/* Small tablets / phablets */
@media (min-width: 600px) { .hero-us { bottom: -86px; } }  /* 74 - 160 */
@media (min-width: 720px) { .hero-us { bottom: -94px; } }  /* 66 - 160 */

/* Tablets */
@media (min-width: 768px) { .hero-us { bottom: -120px; } }  /* 40 - 160 */

@media (min-width: 1024px){ .hero-us { bottom: -139px; } }  /* 21 - 160 */

/* Desktops */
@media (min-width: 1280px){ .hero-us { bottom: -151px; } }  /* 9 - 160 */

/* Image: static, no Y-translate */
.us-figure2 {
  display: block;
  width: clamp(90px, 30vw, 350px);
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
  transition: none;
}

/* Optional: keep slight rotation on smaller screens */
@media (max-width: 1300px) {
  .hero-us { transform: rotate(3deg); }
}
.hero-glow {
  position: absolute;
  top: var(--navbar-height, 60px);
  left: 0; right: 0; bottom: 0;
  pointer-events: none;
}

.orbit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  --radius: 8vmin;
  --dur: 12s;
  animation: spin var(--dur) linear infinite;
  transform-origin: center center;
}

.orbit.orb-blue { --radius: 30vmin; --dur: 11s; }
.orbit.orb-pink { --radius: 40vmin; --dur: 13s; animation-direction: reverse; }
.orbit.orb-turq { --radius: 50vmin; --dur: 18s; }

.orbit > .orb {
  transform: translate3d(var(--radius), 0, 0);
  width: 2vmin;
  height: 2vmin;
  border-radius: 50%;
}

/* Simple solid colors */
.orb--blue { background: #006eff; }
.orb--pink { background: #ff66c4; }
.orb--turq { background: #1ec6b0; }

/* Spin animation */
@keyframes spin { 
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Keyframes (can stay the same) */
/* Hero heading */
#hero h1 {
  font-family: 'Headingfont', serif;
  margin-bottom: 0;
  z-index: 1;
  /* Make it visible immediately */
  opacity: 1;
  transform: none;
}

/* Hero paragraph */
#hero p {
  font-family: 'Bodyfont', sans-serif;
  max-width: 600px;
  margin-bottom: 2rem;
  z-index: 1;
  opacity: 1;
  transform: none;
}

/* Hero button */
#hero .btn {
  z-index: 1;
  opacity: 1;
  transform: none;
}

#hero .btn:hover {
  background: var(--color-pink);
}

.section-wave {
  position: relative;
  top: 1px; /* prevents gap from anti-aliasing */
  width: 100%;
  overflow: hidden;
  line-height: 0;
  height: 200px; /* match SVG height */
  z-index: 51;
}

.section-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

.section-wave h2 {
  position: absolute;
  top: 70%; /* vertically center */
  left: 50%; /* horizontally center */
  transform: translate(-50%, -50%);
  color: var(--color-black); /* visible on white wave */
  margin: 0;
  z-index: 1;
  text-align: center;
}

/* container that sits over the wave and into the top of the section */
.about-clouds {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* extend enough height to cover the wave (200px) and a bit below it */
  height: 520px;
  pointer-events: none;
  z-index: 500; /* above wave svg, below headings/content where needed */
}

/* base cloud styles: small, responsive, and smooth transforms */
.cloud {
  position: absolute;
  width: clamp(200px, 40vw, 600px);
  height: auto;
  opacity: 0.2;
  will-change: transform;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
  transform: translateX(100vw); /* start off-screen right as a fallback */
}

/* individual starting heights (tweak as you like) */
.cloud--1  { top: 10px; }   /* inside the wave */
.cloud--1b { top: 140px; }  /* inside the wave, different height */
.cloud--2  { top: 25px; }  /* just below the wave edge */
@media (max-width: 640px) {
  .cloud--1  { top: 50px; }  /* was 10px */
  .cloud--2  { top: 110px; }  /* was 25px */
  .cloud--1b { top: 70px; }  /* was 140px */
}

/* ensure the wave title sits above the svg but below clouds as desired */
.section-wave {
  position: relative;
  z-index: 51;
}
.section-wave h2 {
  z-index: 8; /* above clouds so the heading stays readable */
}
#about {
  position: relative;
  background: transparent;
  padding-bottom: 6rem;
}

/* Create the bottom half background */
#about::after {
  content: "";
  position: absolute;
  top: 10%;        /* start halfway down the section */
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  z-index: -1;     /* keep behind the content */
}

/* About content area */
.about-content {
  background: var(--color-white);
  padding: 2rem 1rem;
  padding-top: 0rem !important;
  text-align: center;
  color: var(--color-black); /* sets default for text inside */
}

.about-content h3 {
  color: var(--color-black);
}

.about-content p {
  color: var(--color-black);
  max-width: 800px;
  margin: 1rem;
  line-height: 1.6;

}
/* Team section block */
.team-section {
  background: var(--color-white);
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-black);
}
/* Reveal-up effect for cards */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}

/* When visible */
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    transform 0.6s cubic-bezier(.22,.61,.36,1),
    opacity 0.6s ease;
  transition-delay: var(--stagger, 0ms);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .reveal-up.is-visible {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

.team-section h3{
color: var(--color-black);
}

.team-cards {
  display: block; /* default stacking */
  max-width: 500px;
  margin: 2rem auto;
  margin-top: 1rem !important;
  margin-top: 0rem;
  display: flex;
  justify-content: center; /* centers horizontally */
  gap: 1.5rem;             /* space between cards */
  flex-wrap: wrap;
    flex-direction: column; /* stacked by default for mobile */
  align-items: center; 
}

/* Card styles */
.team-card {
  border-radius: 3rem;
  padding: 1rem;
  color: var(--color-white);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  text-align: center;
  margin-bottom: 1.5rem;
  max-width: 300px;
}
/* Base box shadows per theme */
.team-card.blue {
  background: var(--color-blue);
  box-shadow: 0 0 5px var(--color-blue);
}
.team-card.pink {
  background: var(--color-pink);
  box-shadow: 0 0 5px var(--color-pink);
}
.team-card.turquoise {
  background: var(--color-turquoise);
  box-shadow: 0 0 5px var(--color-turquoise);
}

/* Hover effect: grow & brighter glow */
.team-card.blue:hover {
  transform: scale(1.03);

}
.team-card.pink:hover {
  transform: scale(1.03);

}
.team-card.turquoise:hover {
  transform: scale(1.03);

}

/* Smooth transitions */
.team-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card img {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 02rem;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 0 15px var(--color-white);
}
.team-card img:hover {
  cursor: pointer;
}
.team-card h4 {
  margin: 0.5rem 0;
  font-family: 'Headingfont', serif;
}

.team-card p {
  margin: 0;
  font-family: 'Bodyfont', sans-serif;
}

/* Card color themes */
.team-card.blue {
  background: var(--color-blue);
}

.team-card.pink {
  background: var(--color-pink);
}

.team-card.turquoise {
  background: var(--color-turquoise);
}

/* Two-column layout for likes/dislikes */
.team-extra {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  font-size: 0.9rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  text-align: left;
  
}

/* Expanded state */
.team-card.open .team-extra {
  max-height: 300px; /* enough room for both lists */
  padding-top: 0.75rem;
}

/* Remove list styling */
.team-extra ul {
  margin: 0.25rem 0 0 0;
  padding: 0;
  list-style: none;
}

.team-extra li {
  margin: 0.2rem 0;
}

/* Make columns same width */
.team-extra > div {
  min-width: 120px;
}
.team-desc {
    max-width: 800px;
}
/* Team cards: stack on small, row when there's room */
#about .team-cards {
  display: flex;
  flex-direction: column;   /* mobile */
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  max-width: none;          /* remove the 500px cap */
  margin: 2rem 0 0;         /* drop auto-centering on a capped box */
}

/* fixed card width so they line up nicely */
#about .team-card {
  flex: 0 1 250px;
}

/* switch to a centered row + wrap on wider screens */
@media (min-width: 768px) {
  #about .team-cards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1.5rem;
    row-gap: 1.5rem;
  }
}

/* Forest container at the very bottom of #about */
.about-forest {
  position: absolute;
  bottom: clamp(110px, 130px - 5vw, 120px);
  left: -200px;
  right: 0;
  height: 260px;          /* adjust if your trees are taller */
  pointer-events: none;   /* don’t block interactions */
  z-index: 50;             /* sits above wave & clouds, below text if needed */
  overflow: visible;
}

/* Individual tree sprites */
.tree {
  position: absolute;
  bottom: 0;                     /* anchor feet to forest baseline */
  transform-origin: bottom center;
  opacity: 1;                     /* hidden until "peeking" */
  transition: opacity 0.4s ease;  /* smooth fade in */
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
  will-change: transform;
}

#what-we-do {
  --green-start: clamp(75%, 100vw, 60%); /* min 75%, fluid, max 85% */

  position: relative;
  min-height: 500px;
  background: linear-gradient(
    to bottom,
    var(--color-white) 0 200px,          /* top strip stays white */
    var(--color-black) 200px var(--green-start),  /* black fades until green-start */
    #830188 100%                         /* fade into green at bottom */
  );
  top: -2px;
  padding-bottom: clamp(4rem, 20vw, 25rem); /* min 8rem, fluid, max 15rem */
  
}


#what-we-do::after {
  content: "";
  position: absolute;
  top: 150px;
  right: clamp(0px, 5vw, 60px);   /* 0 → 60 depending on viewport */
  width: clamp(120px, 15vw, 200px);  /* always 150px */
  height: clamp(120px, 15vw, 200px); /* always 150px */
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fffde7, #fff9c4 80%);
  box-shadow: 
    0 0 60px 30px rgba(255, 249, 196, 0.5),
    0 0 120px 60px rgba(255, 249, 196, 0.5);
  z-index: 52;
}
/* Stars container */
#what-we-do .stars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;           /* only in the top 80% of the section */
  pointer-events: none;  /* don’t block clicks */
  z-index: 51;           /* below the moon (52), above background */
}

/* Individual star */
#what-we-do .star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: white;
  opacity: 0.8;
}
/* On small screens (content stacked) */


@keyframes twinkle {
  0%, 100% {
    opacity: 0.4;
    filter: brightness(80%);
    transform: scale(1);
  }
  50% {
    opacity: 1;
    filter: brightness(220%);
    transform: scale(1.6); /* small “pop” */
  }
}

#what-we-do .star.twinkle {
  animation: twinkle 2.5s ease-in-out infinite;
}

#what-we-do .star.twinkle:nth-child(3n) {
  animation-duration: 3.5s;
  animation-delay: 0.5s;
}
#what-we-do .star.twinkle:nth-child(4n) {
  animation-duration: 4.5s;
  animation-delay: 1.2s;
}

#what-we-do h2 {
  color: var(--color-white);
}
/* WHAT WE DO – layout and cards */
.wwd-wrap {
  width: min(1300px, 92vw);
  margin: 0 auto 0;
  display: grid;
  gap: 0rem;
  z-index: 53 !important;
}

.skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  text-align: center; /* keeps img centered */
}

.skyline img {
  display: block;
  width: 100%;     /* always span full width */
  height: auto;    /* scale proportionally, no cropping */
   filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
}

.wwd-panel {
  --accent: var(--color-blue);

  /* glass base (from project-card) */
  background: rgba(59, 59, 59, 0.28);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(1px) saturate(140%);
  -webkit-backdrop-filter: blur(1px) saturate(140%);
  background-clip: padding-box;

  /* text color */
  color: var(--color-white);

  /* shape + spacing */
  border-radius: 1.75rem;
  padding: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 2rem;

  /* shadow + highlight */
  box-shadow:
    0 10px 24px rgba(0,0,0,0.55),
    inset 0 1px rgba(255,255,255,0.45),
    inset 0 -1px rgba(255,255,255,0.28);

  /* animation prep */
  opacity: 0;
  transform: translateX(0); /* overridden by anim classes */
  transition: none; /* disable hover effects until visible */

  z-index: 4;
}

/* Blue panel: fade + slide from left */
.wwd-panel.fade-from-left {
  transform: translateX(-60px);
}

/* Pink panel: fade + slide from right */
.wwd-panel.fade-from-right {
  transform: translateX(60px);
}

/* Visible state */
.wwd-panel.is-visible {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
/* Pick accent via data-attribute */
.wwd-panel[data-accent="blue"] { --accent: var(--color-blue); }
.wwd-panel[data-accent="pink"] { --accent: var(--color-pink); }

.wwd-title {
  text-align: center;
  margin: 0 0 1rem;
}

.wwd-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.wwd-intro {
  padding: 1rem;
}

.wwd-panel p {
  padding: 0;
  margin: 0.5rem 0; /* fixed missing units */
}

/* Card grid */
.wwd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem 1.5rem;
  align-self: start;
  margin-top: 1.8rem; /* lifts cards to align with intro heading */
}

/* Base card */
.wwd-card {
  background: var(--color-black);
  color: var(--color-white);
  border-radius: 2rem;
  border: 2px solid transparent;
  box-shadow: 0 0 8px rgba(0,0,0,0.8); /* black glow all around */
  transition: transform 0.25s ease,
              box-shadow 0.25s ease,
              border-color 0.25s ease,
              background 0.25s ease;
  position: relative;
  z-index: 0;
  isolation: isolate; /* keeps glow behind content in Safari/iOS */
  overflow: visible;
  padding: 2.5rem 1rem 1.2rem; /* extra top padding for icon box */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: pointer;
}

/* Headings & text inside cards */
.wwd-card h4 {
  margin: 0.2rem 0 0.35rem;
}

.wwd-card p {
  margin: 0.5rem 0;
  color: #e9e9e9;
}

/* Default button styling */
.wwd-card .btn {
  display: inline-block;
  width: auto;
  margin-top: auto;
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 8px var(--accent);
  transition: background 0.3s ease,
              color 0.3s ease,
              box-shadow 0.3s ease,
              transform 0.3s ease;
}

/* Icon box */
.icon-box {
  position: absolute;
  top: -34px;
  left: 14px;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: var(--accent);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  border: 2px solid rgba(255,255,255,0.3);
  z-index: 1; /* stays above glow */
}

/* Glow layer drawn behind the card */
.wwd-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 16px var(--accent);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Hover / tap / focus-active states */
.wwd-card:hover,
.wwd-card.is-hot {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.05) !important;
  box-shadow: 0 0 8px rgba(0,0,0,0.8); /* base black shadow */
}

.wwd-card:hover::before,
.wwd-card.is-hot::before {
  opacity: 1; /* show accent glow */
}

.wwd-card:hover .btn,
.wwd-card.is-hot .btn {
  background: var(--color-black);
  color: #fff;
  box-shadow: 0 0 12px rgba(0,0,0,0.8); /* black glow */
}

.wwd-card:hover .icon-box,
.wwd-card.is-hot .icon-box {
  background: var(--color-black);
}


/* Floating icon box, half-in half-out */
.icon-box {
  position: absolute;
  top: -34px;
  left: 14px;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: var(--accent);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  border: 2px solid rgba(255,255,255,0.3);
}

.icon-box i {
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}

/* Override h3 and h5 color in panels */
.wwd-panel h3,
.wwd-panel h5 {
  color: var(--color-white);
}
/* Prevent background SVGs / glow / clouds from blocking clicks */
.section-wave svg,
.hero-glow,
.orbit,
.orb,
.about-clouds,
.how-clouds,
.rp-glow {
  pointer-events: none;
}

/* Responsive tweaks */
@media (max-width: 1200px) {
  .wwd-inner { grid-template-columns: 1fr; }
  .wwd-grid  { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
  .wwd-inner { 
    grid-template-columns: 1fr;      /* you already do this */
    justify-items: center;           /* center the single column’s content */
  }
  .wwd-intro {
    text-align: center;
    max-width: 720px;                /* keeps lines readable */
    margin-inline: auto;
  }
  .wwd-intro h5,
  .wwd-intro p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}


@media (max-width: 560px) {
  .wwd-grid { grid-template-columns:  1fr; }
  .icon-box {
    top: -30px;
    left: 12px;
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }
}
/* container & base sizes (unchanged) */
#what-we-do { position: relative; }
#what-we-do .wwd-wrap { position: relative; z-index: 2; }



/* HOW WE DO IT */
#how-we-do-it {
  position: relative;
  background: var(--color-white);
  color: var(--color-black); /* ensures text stays readable */
  padding: 4rem 1rem; /* breathing space */
    padding-bottom: clamp(200px, 10vw, 230px);
  text-align: center;
  z-index: 1;
  min-height: 500px;
  overflow: hidden; /* prevents clouds from breaking layout */
}

/* container that sits at top of How We Do It */
.how-clouds {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 520px;
  pointer-events: none;
  z-index: 500; /* above background, below headings/content */
}

/* base cloud styles */
.how-clouds .cloud {
  position: absolute;
  width: clamp(200px, 40vw, 600px);
  height: auto;
  opacity: 0.2;
  will-change: transform;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
  transform: translateX(100vw);
}

/* individual placement */
.how-clouds .cloud--1 { top: -70px; }
.how-clouds .cloud--2 { top: 20px; }

@media (max-width: 640px) {
  .how-clouds .cloud--1 { top: 0px; }
  .how-clouds .cloud--2 { top: 70px; }
}
.heading-with-plane {
  position: relative;
  display: inline-block; /* keeps plane tied to text width */
  z-index: 0; /* text above the plane */
  
}

.heading-with-plane::before {
  content: "";
  position: absolute;
  top: 62%;      
  left: 78%;     
  transform: translate(-50%, -50%) rotate(10deg); /* center + rotate */
  background: url('plane.svg') no-repeat center/contain;
  
  /* responsive sizing: min 350px, scale with viewport, max 500px */
  width: clamp(450px, 35vw, 900px);
  height: clamp(300px, 15vw, 480px);

  
  z-index: -1;   
}
/* =======================
   PROCESS SECTION (scoped)
   ======================= */
#how-we-do-it p,
#how-we-do-it .process__grid {
  position: relative;
  z-index: 2;             /* force above the plane */
}
.process__title{
  color: var(--color-black);
  position: relative;
  z-index: 10; /* above the plane */
}

.process{
  max-width: 1300px;
  margin: 3rem auto 0;
  padding: 0rem;
  text-align: center; /* section copy & top CTA centered */
}

.process__lead{
  /* typography inherits globally */
  z-index: 10;
  max-width: 800px;
}

/* Grid */
.process__grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(6, minmax(0,1fr));
  margin-top: 4rem;
}
@media (max-width: 1024px){
  .process__grid{ grid-template-columns: repeat(3, 1fr);
  row-gap: clamp(40px, 6vw, 50px); }
  
}
@media (max-width: 760px){
  .process__grid{ grid-template-columns: repeat(2, 1fr); }
  
}
@media (max-width: 380px){
  .process__grid {
    grid-template-columns: 1fr; /* single column stack */
  }
}
/* =======================
   CARDS
   ======================= */

.process .step-card{
  /* layout + left alignment inside each card */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;

  /* visual base */
  background: var(--color-black);
  color: var(--color-white);
  border-radius: 2rem;
  border: 2px solid transparent;
  box-shadow: 0 0 8px rgba(0,0,0,.8);
  padding: 2rem 1rem 1.2rem;
  gap: .5rem;
  position: relative;
  overflow: visible;

  transition: box-shadow .25s, border-color .25s, background .25s, color .25s;

  /* default accent (overridden by color classes) */
  --accent: var(--color-blue);
}

/* Headings inside cards – fluid between 1rem and 1.5rem */
.process .step-card .step-title{
  margin: .5rem 0;
  font-size: clamp(1rem, 0.75rem + 1.5vw, 1.5rem);
}

/* Paragraphs inside cards – remove global side padding */
.process .step-card .step-copy,
.process .step-card p{
  padding-left: 0;
  padding-right: 0;
  margin: .25rem 0 .75rem;
}

/* Badge – flat (no glow), uses --accent */
.process .step-card .step-badge{
  position: absolute;
  top: -24px;
  left: 14px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  border: 2px solid rgba(255,255,255,.5);
  background: var(--accent);
  box-shadow: none;
  font-size: 2rem;
}

/* CTA inside cards: keep global look but colored by --accent
   (override section centering + margins) */
.process .step-card .btn{
  align-self: flex-start;
  margin: 0;                 /* cancel auto-centering */
  margin-top: auto;          /* stick to bottom-left */
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* Hover: card turns to accent; badge + CTA flip to black */
.process .step-card:hover{
  background: var(--accent);
  border-color: var(--accent);

   cursor: pointer;
}
.process .step-card:hover .step-badge{
  background: var(--color-black);
  color: #fff;

}

.process .step-card:hover .btn{
  background: var(--color-black);
  color: #fff;
  box-shadow: 0 0 12px rgba(0,0,0,.8); /* CTA glow stays; badge remains flat */
}
/* =======================
   COLOR VARIANTS
   ======================= */

.process .step-card.step-blue { --accent: var(--color-blue); }
.process .step-card.step-pink { --accent: var(--color-pink); }
.process .step-card.step-turq { --accent: var(--color-turquoise); }
/* Card transition tuning */
.process .step-card{
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    background-color .45s ease,
    box-shadow .45s ease,
    border-color .45s ease,
    color .25s ease;
  will-change: transform, box-shadow, background-color;
}

/* Smooth element transitions */
.process .step-card .step-badge{
  transition: background-color .35s ease, color .25s ease; /* no box-shadow here */
}
.process .step-card .btn,
.process .step-card .btn-cta{
  transition: background-color .35s ease, color .25s ease, box-shadow .45s ease,  transform .35s ease;
}

/* Hover & auto-active feel identical */
.process .step-card:hover{
  transform: scale(1.05);
  box-shadow: 0 0 16px var(--accent);
}

/* Override to preserve reveal transition + stagger on step cards */
.process .step-card.reveal-up {
  transition:
    transform 0.6s cubic-bezier(.22,.61,.36,1),
    opacity 0.6s ease,
    box-shadow .25s,
    border-color .25s,
    background .25s,
    color .25s;
  /* delays: [transform, opacity, box-shadow, border-color, background, color] */
  transition-delay:
    var(--stagger, 0ms),
    var(--stagger, 0ms),
    0ms, 0ms, 0ms, 0ms;
}


#recent-projects {
  --rp-top-band: 200px; /* white band height */
  /* clamp the start of turquoise between 80% and 90% */
  --rp-turq-start: clamp(70%, 85vw, 70%);

  position: relative;
  min-height: 500px;
  background: linear-gradient(
    to bottom,
    var(--color-white) 0 var(--rp-top-band),
    #000000 var(--rp-top-band) var(--rp-turq-start),
    #1ec6b0 100%  /* turquoise fills the bottom completely */
  );
  color: var(--color-white);
  overflow: visible;
  top: -2px;
  padding-bottom: 1rem;
}
/* Base hidden state */
.projects-row {
  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Sites row → slide in from left */
.projects-row.sites {
  transform: translateX(-60px);
}

/* Design row → slide in from right */
.projects-row.design {
  transform: translateX(60px);
}

/* When visible */
.projects-row.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* keep the wave below stars so they appear in the sky area */
#recent-projects .section-wave { position: relative; z-index: 1; }

/* stars live only below the white band */
#recent-projects .stars{
  position: absolute;
  top: 80px;
  left: 0; right: 0;
  height: calc(100% - var(--rp-top-band));  /* only over the dark gradient */
  pointer-events: none;
  z-index: 1;                                 /* above background/wave, below billboard/text */
}

#recent-projects .star{
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fff;
  opacity: .8;
}

/* your twinkle from earlier (brightness only if you prefer no “movement”) */
@keyframes twinkle {
  0%,100% { opacity:.4; filter:brightness(80%); }
  50%     { opacity:1;  filter:brightness(200%); }
}
#recent-projects .star.twinkle { animation: twinkle 3s ease-in-out infinite; }
#recent-projects .star.twinkle:nth-child(3n){ animation-duration: 3.6s; animation-delay:.4s; }
#recent-projects .star.twinkle:nth-child(4n){ animation-duration: 4.2s; animation-delay:1s; }

#recent-projects h2 { color: var(--color-white) !important; }

/* Billboard layer */
#recent-projects .billboard{
  position: absolute;
  left: 50.8%; top: -15px;
  transform: translate(-50%, -45%); /* lift above the wave */
  z-index: 1;
  pointer-events: none;
}
#recent-projects .billboard img {
  display: block;
  width: clamp(400px, 18vw, 500px);
  height: auto;
  max-width: 95vw;
  clip-path: inset(0 0 10% 0); /* cut off bottom 20% */
}

/* Title positioned inside the billboard */
#recent-projects .billboard-title{
  position: absolute;
  left: 48.5%;
  top: 58px;                             /* nudge to the board’s center */
  transform: translate(-50%, -50%);
  margin: 0;
  color: var(--color-white);            /* contrast on the sign */
  text-align: center;
  z-index: 1;
}

/* subtitle inside the wave */
#recent-projects .wave-subtitle{
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;          /* full width instead of left:50% */
  transform: none;   /* no translate centering needed */
  margin: 0;
  text-align: center;
  color: var(--color-white);
  white-space: nowrap; /* keep on one line */
  z-index: 2000 !important;
}

.process .process__lead,
#recent-projects .rp-intro{
  max-width: 800px;
  margin: 1rem auto;   /* centers the block like your about text */
  text-align: center;  /* same alignment */
  /* keep global p padding (2rem) — no override needed */
}
@media (max-width: 1025px) {
#recent-projects .rp-intro-wrap{
  margin: 1rem auto;
  padding-inline: 1rem;     /* ← exactly 1rem L/R */
  box-sizing: border-box;   /* padding stays inside the 800px */
}
}
/* ===== Rows (3 → 2 → 1) with per-row accent ===== */
#recent-projects .projects-row{
  --accent: var(--color-blue);          /* default; overridden below */
  width: min(1300px, 92vw);
  margin: 2rem auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
#recent-projects .projects-row.sites  { --accent: var(--color-blue); }
#recent-projects .projects-row.design { --accent: var(--color-pink); }

@media (max-width: 1024px){
  #recent-projects .projects-row{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  #recent-projects .projects-row{ grid-template-columns: 1fr; }
}

/* ===== Project cards (glass on black) ===== */
#recent-projects .project-card{
  /* glass base */
  background: rgba(59, 59, 59, 0.28);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(1px) saturate(140%);
  -webkit-backdrop-filter: blur(1px) saturate(140%);
  background-clip: padding-box;          /* crisp edge with semi-transparent bg */

  /* your existing look */
  color: var(--color-white);
  border-radius: 2rem;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.55),        /* depth on black */
    inset 0 1px rgba(255,255,255,0.45),  /* top highlight */
    inset 0 -1px rgba(255,255,255,0.28); /* bottom soft edge */
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease,
    background .3s ease,
    backdrop-filter .3s ease;
    cursor: pointer;
}

/* Graceful fallback when blur isn’t supported */
@supports not (backdrop-filter: blur(1px)) {
  #recent-projects .project-card{
    background: rgba(255,255,255,0.10);
  }
}


#recent-projects .project-title{
  margin: .25rem 0 .25rem;
  text-align: center;
}

/* Image area */
#recent-projects .project-media{
  display: grid;
  place-items: center;
  aspect-ratio: 16/9;
  border-radius: 1rem;
  overflow: hidden;
  background:none;
}
#recent-projects .project-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;  /* keep full mockup visible */
}

/* Copy — no extra side padding inside cards */
#recent-projects .project-copy{
  padding: 0;
  margin: .25rem 0 .75rem;
}

/* CTA uses row accent; flips to black on hover (like step cards) */
#recent-projects .project-card .btn{
  margin-top: auto;
  align-self: center;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}

/* Hover glow (white) */
#recent-projects .project-card:hover{
  transform: scale(1.03);
  box-shadow: 0 0 16px #ffffff70;
  border-color: #ffffff5e;
}
#recent-projects .project-card:hover,
#recent-projects .project-card:focus,
#recent-projects .project-card:focus-within {
  box-shadow: 0 0 16px #ffffff70 !important;
  border-color: #ffffff5e !important;
  transform: scale(1.03) !important;
}

/* Row accents + inverted CTA hover color */
#recent-projects .projects-row.sites  { --accent: var(--color-blue);  --cta-hover: var(--color-pink); }
#recent-projects .projects-row.design { --accent: var(--color-pink);  --cta-hover: var(--color-blue); }

/* Invert on CTA hover */
#recent-projects .project-card .btn:hover{
  background: var(--cta-hover);
  box-shadow: 0 0 12px var(--cta-hover);
  color: #fff;
}
/* Projects: make pink → turq on CTA hover */
#recent-projects .projects-row.design{
  --accent: var(--color-pink);              /* keep pink as the base accent */
  --cta-hover: var(--color-turq, #00e0c6);  /* hover becomes turquoise */
}

/* Make sure the content layers sit above the glow */
#recent-projects .rp-intro-wrap,
#recent-projects .projects-row { position: relative; z-index: 2; }

/* ================================
   2-COL LAYOUT: CENTER LONE LAST CARD
   ================================ */
@media (min-width: 561px) and (max-width: 1024px){
  #recent-projects .projects-row{ --rp-gap: 36px; } /* match your grid gap */
  #recent-projects .projects-row > .project-card:last-child:nth-child(odd){
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--rp-gap, 36px)) / 2); /* equals one column */
    max-width: none;
  }
}

/* Container */
#recent-projects .meteors {
  position: absolute;
  top: var(--rp-top-band, 200px);
  left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 2;
}

/* Comet head */
#recent-projects .meteor {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: white;
  opacity: 0;
  box-shadow: 0 0 10px 5px rgba(255,255,255,.9);
}

/* ===== KEYFRAMES with idle time ===== */
@keyframes meteorLeftRightTop {
  0%   { transform: translate(-20vw, 5vh) rotate(-15deg); opacity: 0; }
  3%   { opacity: 1; }
  8%   { transform: translate(120vw, 15vh) rotate(-15deg); opacity: 0; }
  100% { transform: translate(120vw, 15vh) rotate(-15deg); opacity: 0; }
}
@keyframes meteorLeftRightMid {
  0%   { transform: translate(-20vw, 35vh) rotate(-10deg); opacity: 0; }
  3%   { opacity: 1; }
  8%   { transform: translate(120vw, 45vh) rotate(-10deg); opacity: 0; }
  100% { transform: translate(120vw, 45vh) rotate(-10deg); opacity: 0; }
}
@keyframes meteorLeftRightBottom {
  0%   { transform: translate(-20vw, 75vh) rotate(-5deg); opacity: 0; }
  3%   { opacity: 1; }
  8%   { transform: translate(120vw, 90vh) rotate(-5deg); opacity: 0; }
  100% { transform: translate(120vw, 90vh) rotate(-5deg); opacity: 0; }
}

/* Right → Left */
@keyframes meteorRightLeftTop {
  0%   { transform: translate(120vw, 20vh) rotate(195deg); opacity: 0; }
  3%   { opacity: 1; }
  8%   { transform: translate(-20vw, 30vh) rotate(195deg); opacity: 0; }
  100% { transform: translate(-20vw, 30vh) rotate(195deg); opacity: 0; }
}
@keyframes meteorRightLeftBottom {
  0%   { transform: translate(120vw, 85vh) rotate(185deg); opacity: 0; }
  3%   { opacity: 1; }
  8%   { transform: translate(-20vw, 95vh) rotate(185deg); opacity: 0; }
  100% { transform: translate(-20vw, 95vh) rotate(185deg); opacity: 0; }
}

/* ===== ASSIGNMENTS (fast streak + idle; staggered) ===== */
#recent-projects .meteor.top1    { animation: meteorLeftRightTop     18s linear infinite; animation-delay: 2s;  }
#recent-projects .meteor.top2    { animation: meteorRightLeftTop     22s linear infinite; animation-delay: 9s;  }
#recent-projects .meteor.top3    { animation: meteorLeftRightMid     20s linear infinite; animation-delay: 14s; }
#recent-projects .meteor.bottom1 { animation: meteorRightLeftBottom  24s linear infinite; animation-delay: 6s;  }
#recent-projects .meteor.bottom2 { animation: meteorLeftRightBottom  25s linear infinite; animation-delay: 17s; }



/* Remove the default WebKit/Blink tap highlight on touch */
* {
  -webkit-tap-highlight-color: transparent; /* or rgba(0,0,0,0) */
}

/* Don’t let buttons/cards get “text-selected” on tap */
.btn, .pill-btn,
.wwd-card, #recent-projects .project-card,
.process .step-card, .team-card,
.nav-social a, .nav-logo a,
.hamburger, .mobile-link {
  -webkit-user-select: none;
  user-select: none;
}

/* Accessibility: keep outlines for keyboard users only */
:focus { outline: none; }                 /* remove generic focus */
:focus-visible {
  outline: 2px solid var(--color-blue);   /* your accessible focus style */
  outline-offset: 3px;
}

/* ===== Two-column testimonials (video + two text cards) ===== */
.testimonials-two{
  --gap: 28px;
  --video-ar-w: 16;      /* video card aspect ratio: width  */
  --video-ar-h: 9;       /* video card aspect ratio: height */
  --short-height-frac: .40; /* each right card ≈ 40% of video card height */

  background: var(--color-turquoise);
  color: var(--color-black);
  padding: 3rem 1rem 3.5rem;
  overflow: hidden;
  position: relative; 
  top: -4px;
}

/* Section title wrapper */
.testimonials-two__title {
  position: relative;
  text-align: center;    /* keeps the whole heading centered in the section */
  margin: 0 0 2rem;
  color: var(--color-white);
  z-index: 1;
}

.testimonials-two__title::before,
.testimonials-two__title::after {
  position: relative;
  font-size: 3rem; /* adjust size */
  font-family: "Pacifico", cursive; /* fun look */
  color: rgba(255,255,255,0.25); /* subtle & playful */
  z-index: -1; /* keep behind text */
}

.testimonials-two__title::before {
  content: "“";
  left: -1.5rem;
  top: 0rem;
}

.testimonials-two__title::after {
  content: "”";
  right: -0.8rem;
  bottom: 0rem;
}


.testimonials-two__grid{
  max-width: min(1350px, 92vw);
  margin: 0 auto;
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr; /* mobile: stack */
}

/* Desktop: two equal columns */
@media (min-width: 1100px){
  .testimonials-two__grid{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Left video card – use aspect-ratio so right cards can match width-driven height math */
.t-card--video{
  aspect-ratio: calc(var(--video-ar-w) / var(--video-ar-h)); /* 16/9 by default */
  display: grid;
  grid-template-rows: auto 1fr;
}

/* Right column: two cards stacked; each ~40% of the video card height.
   Since both columns have equal widths, we can compute a matching aspect-ratio.
   If left is 16/9, right card AR = 16 / (9 * 0.40) ≈ 4.444  */
.testimonials-two__stack{
  display: grid;
  gap: var(--gap);
}
/* phone — taller, same width */
@media (max-width: 600px){
  .t-card--video{
    aspect-ratio: 3 / 4;          /* taller than wide */
    width: 100%;                   /* never wider than the column */
  }
}
@media (min-width: 900px){
  .testimonials-two__stack > .t-card{
    display: grid;
    grid-template-rows: auto 1fr;
  }
}

/* Shared card look (reuses your t-card styles) */
.t-card{
  background: var(--color-white);
  border-radius: 16px;
  padding: 0.73rem;
  box-shadow: none;
  display: grid;
  gap: .5rem;
  min-height: 150px; /* keeps some presence when stacked on mobile */
     box-shadow: 0 0 16px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

.t-card__header{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
}

.t-avatar{
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(0,0,0,.06);
}

.t-name{ font-weight: 700; }
.t-meta{ font-size: .85rem; opacity: .7; }

.t-stars{
  color: #f5b301;
  font-size: 1.5rem;
  letter-spacing: 2px;
}

.t-text{
  margin: 0;
  color: #333;
}

/* Video wrapper */
.t-media{
  overflow: hidden;
  border-radius: 12px;
}
.t-media video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 12px;
}

/* Optional hover lift */
.testimonials-two .t-card{
  transition: transform .2s ease, box-shadow .2s ease;
}
.testimonials-two .t-card:hover{
  transform: translateY(-4px);
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.5);
}
/* Why Choose Us — white section after testimonials */
#why-choose-us {
  background: var(--color-white);
  color: var(--color-black);
  padding: 3rem 1.5rem;     /* tweak as you like */
  position: relative;
  z-index: 1;
  min-height: 900px;
  overflow: visible;
  top: -4px;
}
/* The injected tower */
.why-tower {
  position: absolute;
  right: clamp(8px, 3vw, 28px);
  bottom: 0;                              /* final parked baseline */
  width: clamp(78px, 11vw, 140px);
  transform: translate3d(0, 160px, 0);    /* start down; JS drives this */
  opacity: 0;
  pointer-events: none;
  z-index: 120;                           /* above section decoration */
  transition: none;                       /* animation is scroll-driven */
}
#why-choose-us h2 {
  color: var(--color-black);
  text-align: center;
  margin: 0 auto 2rem; /* centers + adds bottom space */
  font-family: 'Headingfont', serif; /* keep it consistent */
}
#why-choose-us h3 {
  color: var(--color-black);
  text-align: center;

                        /* subtle contrast */
}
/* container that sits at top of Why Choose Us */
.why-clouds {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 520px;
  pointer-events: none;
  z-index: 500; /* above background, below headings */
}

/* base cloud styles */
.why-clouds .cloud {
  position: absolute;
  width: clamp(200px, 40vw, 600px);
  height: auto;
  opacity: 0.2;
  will-change: transform;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
  transform: translateX(100vw); /* default off-screen */
}

/* varied placement (not uniform) */
.why-clouds .cloud--a { top: -50px; left: 0%; }
.why-clouds .cloud--b { top: 60px;  right: 0%; }
.why-clouds .cloud--d { top: -20px; right: -10%;  }

@media (max-width: 640px) {
  .why-clouds .cloud--a { top: 10px; left: 0%; }
  .why-clouds .cloud--b { top: 50px; right: 0%; }
  .why-clouds .cloud--d { top: 0px; right: -10%; }
}
/* ===============  SPLIT FEATURE  =============== */
.split-feature {
  max-width: 1100px;
  width: 100%;
  margin: 2.5rem auto;
  padding-inline: clamp(16px, 4vw, 24px);   /* equal responsive gap */
  display: grid;
  grid-template-columns: 420px 1fr;         /* image left, text right */
  column-gap: 2rem;
  align-items: start;
}

/* Image panel */
.split-feature__media {
  margin: 0;                                /* reset UA margins */
  border-radius: 1.5rem;
  overflow: hidden;
  background: #111;
  box-shadow: 0 8px 20px rgba(0,0,0,0.38);
  max-height: 700px;                        /* your fixed cap */
}
.split-feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 750px;                        /* your fixed cap */
  object-fit: cover;
}

/* Content panel */
.split-feature__content {
  color: var(--color-black);
  text-align: left;                         /* desktop default */
}
.split-feature__content h4 {
  margin: 0 0 .5rem;
  color: var(--color-black);
}
.split-feature__content p {
  margin: 0 0 1rem;
  padding: 0;                               /* override global p */
  max-width: 800px;
}

/* Bulleted list */
.split-feature__list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
.split-feature__list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 1rem;
  align-items: center;
}
.split-feature__list li i {
  font-size: 2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
}
.split-feature__list li:nth-child(odd) i  { color: var(--color-blue); }
.split-feature__list li:nth-child(even) i { color: var(--color-pink); }

.split-feature__list .bullet-text h5 {
  margin: 0 0 0.25rem;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  color: var(--color-black);
}
.split-feature__list .bullet-text p {
  margin: 0;
  line-height: 1.4;
  opacity: 0.9;
}

/* CTA button */
.split-feature .btn {
  margin-top: .5rem;
}

/* ===============  MOBILE / STACKED  =============== */
@media (max-width: 900px) {
  .split-feature {
    grid-template-columns: 1fr;            /* stack image above text */
    row-gap: 1.25rem;
    text-align: center;
    padding-inline: 16px;                  /* exact, symmetric */
  }

  .split-feature__media {
    margin-inline: auto;                   /* center the image */
    border-radius: 1.25rem;
    max-width: 300px;
  }
  .split-feature__content {
    margin-inline: auto;
    text-align: center;
    padding-inline: 0.5rem;
    max-width: 800px;                      /* comfy line length */
  }

  /* Center bullets and stack icon above text */
  .split-feature__list {
    justify-items: center;
    gap: 1.25rem;                          /* vertical gap between bullets */
  }
  .split-feature__list li {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    text-align: center;
    gap: 0.2rem;                           /* tight icon→text spacing */
  }
  .split-feature__list li i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin: 0;
  }
  .split-feature__list .bullet-text h5 {
    margin-top: 0;
    margin-bottom: 0.2rem;                 /* small space before paragraph */
  }
  .split-feature p {
    padding-left: 0;
    padding-right: 0;
  }
}
#why-choose-us { position: relative; }
@media (max-width: 767px) {
  .split-feature__media {
    margin-inline: auto;                   /* center the image */
    border-radius: 1.25rem;
    max-width: 250px;
  }
}
.tower-wrap {
  position: absolute;
  right: 0%;
  /* bottom will be set by JS */
  pointer-events: none;
  z-index: 60;
}

.tower {
  width: clamp(100px, 22vw, 300px); /* your responsive size */
  height: auto;
  display: block;
  will-change: transform;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
}

/* Last-resort safety if other content might overflow horizontally */
html, body { overflow-x: clip; /* or hidden */ }

/* ===========================
   PRICING SECTION (tidy)
   =========================== */

#pricing {
  --pricing-top-band: 200px;

  /* Blue starts low (83%) on mobile, high (55%) on large screens */
  --pricing-deep-start: clamp(55%, 85% - 35vw, 63%);

  position: relative;
  min-height: 500px;
  top: -5px;
  background: linear-gradient(
    to bottom,
    var(--color-white) 0 var(--pricing-top-band),
    #000000 var(--pricing-top-band) var(--pricing-deep-start),
    #004db3 100%
  );
  padding-bottom: clamp(7rem, 25vw, 25rem);
 isolation: isolate;
}

/* Keep wave under stars so they sit “in the sky” */
#pricing .section-wave{ position:relative; z-index:1; }

/* Stars live below the white band */
#pricing .stars{
  position:absolute;
  top: 70px;
  left:0; right:0;
  height: calc(100% - var(--pricing-top-band));
  pointer-events:none;
  z-index:1;  /* above background/wave, below cards */
}

#pricing .star{
  position:absolute;
  width:3px; height:3px;
  border-radius:50%;
  background:#fff;
  opacity:.8;
}
.skyline2 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
  text-align: center; /* keeps img centered */
}

.skyline2 img {
  display: block;
  width: 100%;     /* always span full width */
  height: auto;    /* scale proportionally, no cropping */
   filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
}


/* Twinkle (brightness-only so they don’t “move”) */
@keyframes twinkle {
  0%,100% { opacity:.4; filter:brightness(80%); }
  50%     { opacity:1;  filter:brightness(200%); }
}
#pricing .star.twinkle{
  animation: twinkle 3s ease-in-out infinite;
}
#pricing .star.twinkle:nth-child(3n){
  animation-duration:3.6s; animation-delay:.4s;
}
#pricing .star.twinkle:nth-child(4n){
  animation-duration:4.2s; animation-delay:1s;
}

/* Ensure heading stays visible on the dark background */
#pricing h2 {
  color: var(--color-white);
  white-space: nowrap;
}

/* ---------- Grid: 3 → 2 → 1 ---------- */
#pricing .pricing-grid {
  width: min(1300px, 92vw);
  margin: 2rem auto 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  align-items: stretch; /* make cards equal height */
}

@media (max-width: 1024px) {
  #pricing .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Center the lone last card and cap its width on tablet */
  #pricing .pricing-grid > .price-card:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(50%, 680px);
  }
}

@media (max-width: 560px) {
  #pricing .pricing-grid {
    grid-template-columns: 1fr;
  }
  /* Reset the last card rules on phones */
  #pricing .pricing-grid > .price-card:last-child {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}

/* ---------- Card (glass) ---------- */
#pricing .price-card {
  /* glass base */
  background: rgba(59, 59, 59, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(1px) saturate(140%);
  -webkit-backdrop-filter: blur(1px) saturate(140%);
  background-clip: padding-box;

  color: var(--color-white);
  border-radius: 2rem;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.55),
    inset 0 1px rgba(255, 255, 255, 0.45),
    inset 0 -1px rgba(255, 255, 255, 0.28);
  padding: 1rem;

  /* Internal layout: lock price above CTA */
  display: grid;
  grid-template-rows: auto auto 1fr auto auto; /* head | list | SPACER | price | cta */
  row-gap: .75rem;
  height: 100%;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease,
    background .3s ease,
    backdrop-filter .3s ease;
    
  cursor: pointer;

  /* Apply the reveal-up class for staggered reveal */
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
  transition: transform 0.6s cubic-bezier(.22, .61, .36, 1), opacity 0.6s ease;
  transition-delay: var(--stagger, 0ms); /* Staggered transition delay */
}

/* When visible */
#pricing .price-card.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(.22, .61, .36, 1), opacity 0.6s ease;
  transition-delay: var(--stagger, 0ms);
}


/* ============== PRICING — TIDY HOVER & ACCENTS ============== */

/* Backdrop fallback */
@supports not (backdrop-filter: blur(1px)) {
  #pricing .price-card { background: rgba(255, 255, 255, 0.10); }
}

/* Card hover/focus lift + glow (unchanged look) */
#pricing .price-card:hover,
#pricing .price-card:focus,
#pricing .price-card:focus-within {
  transform: scale(1.03);
  box-shadow: 0 0 16px #ffffff70;
  border-color: #ffffff5e;
}

/* Head + tagline */
#pricing .price-card__head { margin: 0; }
#pricing .price-card__title {
  margin: .25rem 0 .2rem;
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}
#pricing .price-card__tagline {
  margin: 0;
  text-align: center;
  opacity: .75;
}

/* Feature list + ticks (ticks use accent) */
#pricing .price-card__list {
  list-style: none;
  padding: 0;
  margin: .25rem 0 0;
  display: grid;
  gap: .55rem;
}
#pricing .price-card__list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: clamp(.98rem, 1.7vw, 1.05rem);
}
#pricing .price-card__list svg {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  stroke: var(--accent, currentColor);
  stroke-width: 3;
  fill: none;
  margin-top: .15rem;
  opacity: .9;
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--accent, currentColor) 35%, transparent));
}

/* Price block (sits just above CTA in your grid layout) */
#pricing .price-card__price {
  grid-row: 4;
  text-align: center;
  margin: 0 0 .75rem;
}
#pricing .price-card__from { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }

/* Default price number colour = accent */
#pricing .price-card__from strong{
  color: var(--accent);
  text-shadow: 0 0 8px color-mix(in oklab, var(--accent) 40%, transparent);
  font-weight: 700;
}

/* CTA base (row 5) */
#pricing .price-card .btn{
  grid-row: 5;
  justify-self: center;
  margin-top: 0 !important;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  transition: transform .25s ease, box-shadow .2s ease, background .2s ease;
  will-change: transform;
}

/* CTA hover: same growth as global .btn:hover, but colour = accent-hover */
#pricing .price-card .btn:hover,
#pricing .price-card .btn:focus-visible{
  background: var(--accent-hover, var(--accent));
  box-shadow: 0 0 15px var(--accent-hover, var(--accent));
  transform: scale(1.15);     /* matches your global .btn:hover */
  color: #fff;
}

/* Sync price number to CTA hover colour using :has() */
#pricing .price-card:has(.btn:hover) .price-card__from strong,
#pricing .price-card:has(.btn:focus-visible) .price-card__from strong{
  color: var(--accent-hover, var(--accent));
  text-shadow: 0 0 8px color-mix(in oklab, var(--accent-hover, var(--accent)) 40%, transparent);
}

/* Fallback if :has() unsupported: change price on whole-card hover */
@supports not selector(:has(*)) {
  #pricing .price-card:hover .price-card__from strong,
  #pricing .price-card:focus-within .price-card__from strong{
    color: var(--accent-hover, var(--accent));
    text-shadow: 0 0 8px color-mix(in oklab, var(--accent-hover, var(--accent)) 40%, transparent);
  }
}

/* Per-card accents + hover swaps */
#pricing .price-card--blue { --accent: var(--color-blue);  --accent-hover: var(--color-pink); }
#pricing .price-card--pink { --accent: var(--color-pink);  --accent-hover: var(--color-turq, #00e0c6); }
#pricing .price-card--turq { --accent: var(--color-turq, #00e0c6); --accent-hover: var(--color-blue); }

/* ===== Pricing intro (inherits your global h3/p styles) ===== */

/* Center the block and constrain width */
#pricing .pricing-intro{
  width: min(900px, 92vw);
  margin: 0 auto 1.5rem;
  text-align: center;   /* no type overrides — uses your global h3/p */
  z-index: 20 !important;
}

/* Give the grid breathing room below the intro */
#pricing .pricing-grid{
  margin-top: 2rem;
}


/* Closing paragraph under the pricing grid (inherits global h3/p styles) */
#pricing .pricing-outro{
  width: min(900px, 92vw);
  margin: 0 auto;           /* center horizontally */
  text-align: center;

}

/* Avoid extra spacing quirks */
#pricing .pricing-outro p{
  margin-top: 0;            /* don't stack with the grid's bottom margin */
  margin-bottom: 0;         /* tidy end spacing */
}
#pricing .pricing-intro h3{
  margin-bottom: 2rem;
  z-index: 2;
}

/* Ensure cards sit above the glow */
#pricing .pricing-grid{ position: relative; z-index: 2; }
/* balloon container anchored inside pricing section */
#pricing .balloons {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: -2;
  
}

#pricing .balloon {
  position: absolute;
  bottom: -80px; /* start below section */
  width: clamp(40px, 8vw, 60px);
  opacity: 0;
 animation: balloon-float 60s linear infinite;
}

@keyframes balloon-float {
  0%   { top: 100%; opacity: 0; transform: translateX(0) rotate(0deg); }
  5%   { opacity: 1; }
  50%  { transform: translateX(-12px) rotate(-3deg); }
  80%  { transform: translateX(10px) rotate(2deg); opacity: 1; }
  90%  { top: 15%; opacity: 1; }   /* fully visible until 10% from top */
  100% { top: 5%;  opacity: 0; }   /* fade out in last stretch */
}
/* stagger positions, speeds, and delays */
#pricing .balloon.b1 {
  left: 3%;
  animation-duration: clamp(18s, 42s - 2vw, 34s); /* ~18s on desktop → ~34s on phone */
  animation-delay: 2s;
}
#pricing .balloon.b2 {
  left: 50%;
  animation-duration: clamp(18s, 40s - 2vw, 32s); /* ~18s → ~32s */
  animation-delay: 6s;
}
#pricing .balloon.b3 {
  left: 97%;
  animation-duration: clamp(20s, 46s - 2vw, 36s); /* ~20s → ~36s */
  animation-delay: 10s;
}

#pricing .balloon.b4 {
  left: 40%;
  animation-duration: clamp(20s, 46s - 2vw, 36s); /* ~20s → ~36s */
  animation-delay: 34s;
}
#pricing .balloon.b5 {
  left: 20%;
  animation-duration: clamp(22s, 50s - 2vw, 38s); /* ~22s → ~38s */
  animation-delay: 38s;
}
#pricing .balloon.b6 {
  left: 60%;
  animation-duration: clamp(18s, 44s - 2vw, 34s); /* ~18s → ~34s */
  animation-delay: 42s;
}
/* =======================
   CONTACT SECTION (CLEAN)
   ======================= */

/* Section container: vertical padding only (no side padding to avoid 92vw + padding overflow) */
#contact {
  background: #fff;
  color: var(--color-black);
  min-height: 500px;
  padding-block: 3rem;
  padding-inline: 0;
  position: relative;
  z-index: 1;
  overflow-x: clip; /* safety */
  padding-bottom: 6rem;
}

/* Normalize width for headings + grid so gutters match site */
#contact > h2,
#contact > h3,
#contact > .contact-grid {
  width: min(1300px, 92vw);
  margin-inline: auto;
}

/* Headings */
#contact h2,
#contact h3 { color: var(--color-black); text-align: center; }
#contact h3 { margin: auto; padding: 1rem 0 2.5rem; }
#contact h4 { color: var(--color-black); }

/* Paragraphs inside contact — remove global side padding */
#contact p {
  max-width: 520px;
  margin: .5rem 0 1.5rem;
  padding: 0;
}

/* Grid layout: 2 cols desktop, 1 col stacked */
.contact-grid {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: 1fr;   /* mobile default */
  align-items: start;
}
@media (min-width: 1100px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
 
}

/* Left column */
.contact-info { text-align: left; }

/* Socials list */
.contact-socials {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
}
/* Limit hover/click to just the icon + text */
.contact-socials a{
  display: inline-grid;                /* not block */
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  width: max-content;                  /* hug content */
  color: inherit;
  text-decoration: none;
}

/* keep wrapping behavior */
.contact-socials a span{
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* stacked layout: center the small link block */
@media (max-width:1099px){
  .contact-socials { justify-items: center; }
}

/* Right column — black form card */
.contact-card {
  background: var(--color-black);
  color: var(--color-white);
  border-radius: 1.75rem;
  padding: 1.25rem 1.25rem 1.5rem;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.55),
    inset 0 1px rgba(255,255,255,0.18),
    inset 0 -1px rgba(255,255,255,0.12);
  max-width: 600px !important; /* stays comfy on phones */
}

.contact-card__title { margin: .25rem 0 1rem; text-align: center; color: var(--color-white) !important; }

/* Form */
.contact-form { display: grid; gap: .75rem; }
.contact-form label {
  font-family: 'Headingfont', serif;
  letter-spacing: .03em;
  text-align: left;   /* always left, per your rule */
  display: block;
  padding-left: 1rem;
  padding-top: .5rem;
}
/* Default input/textarea styles remain the same */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: .9rem 1rem;
  border: none;
  border-radius: .9rem;
  background: #1e1e1e;
  color: #e9e9e9;
  font: inherit;
  outline: none;
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow .25s ease, transform .15s ease;
   resize: none; 
}
/* WebKit browsers (Chrome, Edge, Safari) */
.contact-form textarea::-webkit-scrollbar {
  width: 8px;                /* narrower scrollbar */
}

.contact-form textarea::-webkit-scrollbar-track {
  background: transparent;   /* let your textarea background show */
  margin: 6px;               /* insets scrollbar top & bottom so it clears rounded corners */
}

.contact-form textarea::-webkit-scrollbar-thumb {
  background-color: var(--color-blue);
  border-radius: 999px;      /* fully rounded */
  border: 2px solid #1e1e1e; /* space around thumb to blend with textarea bg */
}

.contact-form textarea::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-pink);
}

/* Firefox */
.contact-form textarea {
  scrollbar-width: thin;
  scrollbar-color: var(--color-blue) transparent;
}

/* Email field focus → pink */
.contact-form input[type="email"]:focus {
  box-shadow: inset 0 0 0 2px var(--color-pink),
              0 0 10px var(--color-pink);
}

/* Message textarea focus → turquoise */
.contact-form textarea:focus {
  box-shadow: inset 0 0 0 2px var(--color-turquoise),
              0 0 10px var(--color-turquoise);
}

/* Other inputs (like name) stay blue */
.contact-form input[type="text"]:focus {
  box-shadow: inset 0 0 0 2px var(--color-blue),
              0 0 10px var(--color-blue);
}

/* Full-width CTA with gentler hover */
.contact-form button.btn {
  width: 100%;
  border: none;
  cursor: pointer;
  font: inherit;
  justify-self: stretch;
}
.contact-form button.btn:hover { transform: scale(1.03); }

/* ===== Stacked layout: center all content (labels stay left) ===== */
@media (max-width: 1099px) {
  .contact-grid { justify-items: center; text-align: center; }
  .contact-info,
  .contact-card { width: 100%; max-width: 800px; margin-inline: auto; }

  .contact-info h4 { display: none; }
  .contact-info p  { margin-inline: auto; text-align: center; }
  .contact-socials { justify-items: center; }
  .contact-socials li { justify-content: center; grid-template-columns: auto auto; }
  /* labels remain left-aligned inside the centered card */
  .contact-form label { text-align: left; }
   #contact p {
  max-width: 800px;
  margin: auto;
  padding: 0 2rem;
  padding-bottom: 2rem;

}
}
.contact-socials li {
  display: block; /* now each li contains one link */
}

.contact-socials a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease;
}

.soc-icon {
  width: clamp(42px, 6vw, 56px);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.25));
  transition: transform 0.25s ease;
}

.contact-socials a:hover .soc-icon {
  transform: scale(1.15); /* icon grows */
}
.contact-socials a { color: inherit; text-decoration: none; }
.soc-icon { width: clamp(42px, 6vw, 56px); height: auto; display: block; filter: drop-shadow(0 0 6px rgba(0,0,0,.25)); }
.soc-icon--fb   { filter: drop-shadow(0 0 6px var(--color-blue)); }
.soc-icon--ig   { filter: drop-shadow(0 0 6px var(--color-pink)); }
.soc-icon--mail { filter: drop-shadow(0 0 6px var(--color-turquoise)); }

/* container that sits at top of Contact */
.contact-clouds {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 520px;
  pointer-events: none;
  z-index: 5; /* above background, below headings/content */
}

/* base cloud styles */
.contact-clouds .cloud {
  position: absolute;
  width: clamp(200px, 40vw, 600px);
  height: auto;
  opacity: 0.2;
  will-change: transform;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
  transform: translateX(100vw);
}

/* individual placement */
.contact-clouds .cloud--1 { top: -70px; }
.contact-clouds .cloud--2 { top: 20px; }

@media (max-width: 640px) {
  .contact-clouds .cloud--1 { top: 0px; }
  .contact-clouds .cloud--2 { top: 70px; }
}

/* ===== Footer base with wave + 198px white band ===== */
.site-footer {
  position: relative;
  background: linear-gradient(to bottom, #ffffff 198px, var(--color-black) 200px);
  color: var(--color-white);
  overflow: hidden;
  top: -2px;
}

.site-footer .section-wave svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Content container */
.footer-inner {
  width: min(1300px, 92vw);
  margin: -40px auto 0;
  padding: 0 0 1.5rem;  /* spacing below */
  position: relative;
  z-index: 60;
}

/* Grid: 3 cols desktop → 2 → 1 */
.footer-grid {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  grid-template-columns: 1fr;
  
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

/* Column headings + text */
.site-footer h4 {
  font-family: 'Headingfont', serif;
  color: var(--color-white);
  margin: 0 0 .5rem;
/* H4 – medium-large */
  font-size: clamp(1.25rem, 3vw, 1.75rem);
}
.site-footer p {
  padding: 0; /* cancel global p padding */
  margin: 0;
  line-height: 1.6;
  max-width: 600px;
}

/* Footer links */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .4rem;
}
.footer-links a {
  color: var(--color-white);
  text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease, transform .2s ease;
}
.footer-links a:hover {
  color: var(--color-blue);
  text-shadow: 0 0 10px var(--color-blue);
  transform: translateX(2px);
}

/* Blue divider */
.footer-rule {
  width: min(1300px, 92vw);
  height: 2px;
  background: var(--color-blue);
  margin: 1.2rem auto 0.8rem;
}

/* Copyright */
.copyright {
  width: min(1300px, 92vw);
  margin: 0 auto;
  display: block;
  text-align: center;
  padding: .6rem 0 .8rem;
  color: #e5e5e5;
  font-size: clamp(.85rem, 1.6vw, .95rem);
}
/* Copyright */
.copyright {
  width: min(1300px, 92vw);
  margin: 0 auto;
  display: block;
  text-align: center;

  /* Reset any global paragraph spacing */
  padding: .6rem 0 .8rem;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;

  color: #e5e5e5;
  font-size: clamp(.85rem, 1.6vw, .95rem);
}
/* Container anchors the figure to the bottom-left of #contact */
#contact {
  position: relative; /* ensure absolute children anchor here */
}

.us-rise {
  position: absolute;
  left: 18%;                 /* ← tweak horizontal position */
  bottom: -39px;                  /* starts at the bottom edge */
  pointer-events: none;
  z-index: 5;
  /* You can cap the box if you want: max-width: 380px; */
}

/* The figure itself */
.us-figure {
  display: block;
width: clamp(80px, 27vw, 450px);  /* 30% of viewport */
  height: auto;
  transform: translateY(var(--us-y, 160px)) scaleX(-1); 
  
  will-change: transform;
  transition: none; /* JS drives it smoothly */
   filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

/* If you don’t want it flipped, remove scaleX(-1) above. */

/* Reduced motion: just show the final position */
@media (prefers-reduced-motion: reduce) {
  .us-figure {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (max-width: 1099px) {
  .us-rise {
    left: auto;       /* reset left */
    right: 5%;       /* position from the right side */
    bottom: -85px;    /* lower it further */
  }
}
@media (max-width: 767px) {
  .us-rise {

    bottom: -75px;    /* lower it further */
  }
}
/* Phones/tablets: center footer content when stacked */
@media (max-width: 767px) {
  .site-footer .footer-col { 
    text-align: center; 
  }
  .site-footer h4 {
    text-align: center;
    
  }
  .site-footer .footer-col p {
    margin-inline: auto;        /* center block width */
  }
  .site-footer .footer-links {
    justify-items: center;      /* center list items */
  }
  .site-footer .footer-links a {
    display: inline-block;      /* keeps hover shift tidy */
  }
  .site-footer .footer-logo img {
    margin: 0 auto;             /* ensure logo is centered */
  }
}

/* ===== Project Gallery Modal ===== */
.modal {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: transparent;
  z-index: 10000;
  pointer-events: none;            /* off until open */
  opacity: 0;
  visibility: hidden;              /* hide without display:none */
  transition: opacity .2s ease;
  will-change: opacity;            /* performance hint */
}
.modal.is-open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;             /* show again */
}
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(2px);
}
.modal__dialog {
  position: relative;
  width: min(1000px, 92vw);
  max-height: 90vh;        /* cap total modal height */
  overflow: hidden;        /* contain children */
  display: flex;
  flex-direction: column;  /* stack: title, viewport, thumbs */

  background: rgba(59,59,59,0.28);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border-radius: 1.25rem;
  box-shadow: 0 10px 24px rgba(0,0,0,0.55);
  padding: 1rem 1rem 0.75rem;
  color: var(--color-white);
  gap: .75rem;
}

/* Keep the viewport from getting too tall on big desktops */
.modal__viewport {
  flex: 1 1 auto;
  min-height: 40vh;
  max-height: min(65vh, 660px); /* cap on big screens */
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  border-radius: .75rem;
  overflow: hidden;
}

/* Make the image respect a smaller desktop cap, but leave mobile/tablet as-is */
.modal__image {
  max-width: 100%;
  max-height: min(70vh, 640px); /* phones/tablets use 70vh, desktops cap at ~640px */
  display: block;
  object-fit: contain;
}


.modal__close {
  position: absolute; top: .4rem; right: .6rem;
  border: none; background: transparent; color: #fff;
  font-size: 2rem; line-height: 1; cursor: pointer;
  padding: .25rem .5rem;
}

#gallery-title {
  margin: .25rem 0 .25rem; text-align: center;
}


.modal__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  border: none; background: none;
  color: #fff; font-size: 2rem; line-height: 1;
  width: 44px; height: 56px; cursor: pointer;
  border-radius: .6rem;
}
.modal__nav:hover { cursor: pointer; }
.modal__nav.prev { left: .5rem; }
.modal__nav.next { right: .5rem; }

.modal__thumbs {
  display: grid;
  grid-auto-flow: column;
  gap: .5rem;
  overflow-x: auto;
  padding: .6rem .25rem .8rem;

  justify-content: center;   /* center grid content */
  justify-items: center;     /* center each button in its cell */
}

.modal__thumbs button {
  border: 2px solid transparent;
  background: #000; padding: 0; border-radius: .5rem; cursor: pointer;
  width: 60px; height: 60px; overflow: hidden;
  box-shadow: 0 0 6px rgba(0,0,0,.55);
}
.modal__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal__thumbs button[aria-current="true"] {
  border-color: var(--color-pink);
  box-shadow: 0 0 10px var(--color-pink);
}

/* Small screens: tighter paddings */
@media (max-width: 520px) {
  .modal__dialog { padding: .75rem .75rem .5rem; }
  .modal__nav { width: 38px; height: 50px; }
}


/* ---- Privacy Policy Hero ---- */
.privacy-hero {
  position: relative;              /* anchor for pseudo-elements */
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;

  /* Fallback */
  min-height: 30vh;
}

/* Modern browsers with new viewport units */
@supports (height: 100lvh) {
  .privacy-hero {
    min-height: 30lvh;
  }
}

/* JS polyfill using --vh */
html.vh-ready .privacy-hero {
  min-height: calc(var(--vh, 1vh) * 30);
}

/* Privacy page content card */
body.privacy-page main.privacy-content {
  box-sizing: border-box;                 /* padding stays inside width */
  width: min(800px, calc(100% - 2rem));   /* <= 800px, AND keeps 1rem gutters */
  margin-top: 0rem !important;
  margin: 2rem auto;                      /* center it */
  padding: 1.25rem;                       

  /* your glass styles (as before) */
  --accent: var(--color-blue);
  background: rgba(59,59,59,0.28);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(1px) saturate(140%);
  -webkit-backdrop-filter: blur(1px) saturate(140%);
  background-clip: padding-box;
  border-radius: 1.75rem;
  color: var(--color-white);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.55),
    inset 0 1px rgba(255,255,255,0.45),
    inset 0 -1px rgba(255,255,255,0.28),
    0 0 20px rgba(255,255,255,0.25); /* subtle white glow */
  position: relative;
  z-index: 4;
}

.privacy-content {
    max-width: 800px;   /* keeps text comfortable to read */
  margin: 0 auto;     /* centers the whole block */
  padding: 0 1rem;    /* spacing left/right on small screens */
  text-align: left;   /* ensures all text is left aligned */
  margin-bottom: 8rem !important;
}

/* Only affects footer on privacy page */
body.privacy-page .site-footer {
  background: var(--color-black);
}


/* Space out each section */
.privacy-section {
  margin-bottom: 3rem; /* space between sections */
}

/* Only affect links inside the privacy page contact list */
body.privacy-page .privacy-section a {
  color: inherit;         /* takes the parent text color */
  text-decoration: none;  /* removes underline */
  font-weight: 600;       /* optional, makes it stand out a bit */
}

body.privacy-page .privacy-section a:hover {
  text-decoration: underline; /* optional hover effect */
}
ul {
  font-size: clamp(0.85rem, 2vw, 1rem);
  line-height: 1.6;
  padding-left: 2rem;
  padding-right: 2rem;
}

.footer-legal {
  text-align: center;
  font-size: 0.85rem;
  color: #aaa;
  margin-top: 1rem;
}

.footer-legal p {
  margin: auto;
}

.footer-legal nav {
  margin-top: 0.5rem;
}

.footer-legal a {
  margin: 0 0.5rem;
  color: inherit;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer-legal a:hover {
  color: #fff;
  transform: scale(1.05);
}

.privacy-hero::after {
  content: "";
  position: absolute;
  top: -90px;   /* adjust how far down */
  right: -130px;   /* move horizontally */
  width: clamp(200px, 15vw, 400px);
  height: clamp(200px, 15vw, 400px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fffde7, #fff9c4 80%);
  box-shadow:
    0 0 60px 30px rgba(255, 249, 196, 0.5),
    0 0 120px 60px rgba(255, 249, 196, 0.5);
  z-index: 0;  /* behind hero text */
}

body.privacy-page {
  position: relative;
  background: linear-gradient(
    to bottom,
    #000 0%,
    #000 60%,
    var(--color-blue) 85%,
    var(--color-blue) 97%,
    #000 100%
  );
}
body.privacy-page .site-footer {
  background: linear-gradient(
    to bottom,
    var(--color-blue) 0,
    var(--color-blue) 170px,
    var(--color-black) 170px,
    var(--color-black) 100%
  );
}


/* stars span the whole document and scroll with it */
body.privacy-page .stars {
  position: absolute;   /* was: fixed */
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;           /* behind your content */
}

/* individual stars & animation as you already have */
body.privacy-page .star { 
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; opacity: .8;
}
body.privacy-page .star.twinkle { animation: twinkle 2.5s ease-in-out infinite; }
body.privacy-page .star.twinkle:nth-child(3n) {
  animation-duration: 3.5s;
  animation-delay: 0.5s;
}
body.privacy-page .star.twinkle:nth-child(4n) {
  animation-duration: 4.5s;
  animation-delay: 1.2s;
}

/* Container */
body.privacy-page .meteors {
  position: absolute;
  top: 0;
  left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 2; /* sits above stars, behind content */
}

/* Comet head */
body.privacy-page .meteor {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: white;
  opacity: 0;
  box-shadow: 0 0 10px 5px rgba(255,255,255,.9);
}

/* === Keyframes (unchanged) === */
@keyframes meteorLeftRightTop {
  0%   { transform: translate(-20vw, 5vh) rotate(-15deg); opacity: 0; }
  3%   { opacity: 1; }
  8%   { transform: translate(120vw, 15vh) rotate(-15deg); opacity: 0; }
  100% { transform: translate(120vw, 15vh) rotate(-15deg); opacity: 0; }
}
/* … keep the other keyframes the same … */

/* === Assignments (reuse delays/speeds) === */
body.privacy-page .meteor.top1    { animation: meteorLeftRightTop     18s linear infinite; animation-delay: 2s;  }
body.privacy-page .meteor.top2    { animation: meteorRightLeftTop     22s linear infinite; animation-delay: 9s;  }
body.privacy-page .meteor.top3    { animation: meteorLeftRightMid     20s linear infinite; animation-delay: 14s; }
body.privacy-page .meteor.bottom1 { animation: meteorRightLeftBottom  24s linear infinite; animation-delay: 6s;  }
body.privacy-page .meteor.bottom2 { animation: meteorLeftRightBottom  25s linear infinite; animation-delay: 17s; }

/* =========================
   BLOG PAGE: GLOBAL BACKDROP
   ========================= */
body.blog-page {
  background: linear-gradient(
    to bottom,
    #0c63c1 0%,
    #ffffff 53%,
    #ffffff 97%,
    #000000 97%,
    #000000 100%
  ) !important;
  
}


/* =========================
   HERO
   ========================= */
.blog-hero {
  position: relative;
  background: transparent;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 2rem;

  min-height: 30vh; /* fallback */
}

@supports (height: 100lvh) {
  .blog-hero { min-height: 30lvh; }
}

html.vh-ready .blog-hero {
  min-height: calc(var(--vh, 1vh) * 30);
}


/* keep hero content above decorative elements */
.blog-hero .hero-inner { position: relative; z-index: 5; }



/* glow accent (mirrored left) */
.blog-hero::after {
  content: "";
  position: absolute;
  top: -90px;
  left: -130px;
  width: clamp(200px, 15vw, 400px);
  height: clamp(200px, 15vw, 400px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fffde7, #fff9c4 80%);
  box-shadow:
    0 0 60px 30px rgba(255, 249, 196, 0.5),
    0 0 120px 60px rgba(255, 249, 196, 0.5);
  z-index: 0;
}

/* =========================
   RECENT POSTS
   ========================= */
.recent-posts {
  background: transparent !important;  /* show page gradient */
  color: #000;
  padding: 4rem 1rem;
  padding-top: 0 !important;           /* ensure no top pad above section */
  text-align: center;
  margin-bottom: 6rem;
    position: relative; /* so the absolute child is anchored here */

}
.blogus-deco {
  position: absolute;
  bottom: -168px;        /* sit at the bottom of .blog-main */
  right: 8%;       /* 20% from the right */
 height: clamp(100px, 15vw, 200px);  pointer-events: none; /* decorative only, no blocking */
  z-index: 2;       /* above main background but below footer if needed */
   transform: rotate(-3deg);
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));

}
.recent-posts h2 {
  color: #000000;
  margin-bottom: 2rem;
}
/* ======================
   GRID + CARD WIDTH CAP
   ====================== */
.posts-grid {
  display: grid;
  gap: 1.25rem;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  justify-items: center;   /* center cards inside wider tracks */
  align-items: stretch;    /* let cards fill row height */
}

/* Card width cap + responsive shrink */
.post-card {
  width: min(100%, 400px);  /* ~400px on desktop, shrinks on small screens */
}

/* ======================
   CARD STRUCTURE
   ====================== */
/* Column layout: image on top, meta below */
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;

  border-radius: 1rem;
  overflow: hidden;
/* replace the old shadow */
box-shadow: 0 0 10px rgba(0,0,0,.2);
}

/* 16:9 image area */
.post-image {
  aspect-ratio: 16 / 9;
  background-image: var(--img, none), linear-gradient(#f4f4f4, #eaeaea);
  background-size: cover, 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* ======================
   META BLOCK (LEFT, SHORTER)
   ====================== */
/* single knob to control text block height */
:root { --post-meta-min: clamp(140px, 16vh, 200px); }

.post-meta {
  display: grid;
  grid-template-rows: auto auto minmax(var(--post-meta-min), 1fr) auto; /* date | title | excerpt | button */
  row-gap: 0.5rem;
  padding: 1rem;
  text-align: left;
  flex: 1;  /* fill remaining card height so the button can sit at the bottom */
}

/* Date (top) */
.post-meta time { align-self: start; }

/* Title (h2) */
.post-meta h2 { margin: 0; }

/* Brief snapshot */
.post-excerpt{
  display:block;
  -webkit-line-clamp:unset;
  line-clamp:unset;
  overflow:visible;
}


/* Button pinned bottom-left */
.post-meta .pill-btn {
  align-self: end;                 /* bottom row */
  justify-self: center;             /* left edge */
  margin-top: 0;
}
/* Big article card */
.article-card {
  width: min(800px, calc(100% - 2rem)); /* cap at 800px; 1rem side gutters when narrower */
  margin: 0 auto 6rem;                  /* centered, with 8rem bottom space */
  background: #fff;
  color: #000;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(0,0,0,.2);  /* even halo all around */
}

/* Top image area: fixed 16:9 */
.article-image {
  aspect-ratio: 16 / 9;
  background-image: var(--img, none), linear-gradient(#f4f4f4, #eaeaea); /* fallback if no image yet */
  background-size: cover, 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Body: only left/right padding per your request */
.article-body {
  padding: 0 1rem;
}
/* Force the article heading to black */
.article-card h2 { color: #000; }

/* Spacing tweaks (no typography overrides) */
.article-body time { display: block; margin: 1rem 0 .5rem; }
.article-body h2 { margin: 0 0 .75rem; }
.article-body p { margin: 0 0 1rem; }

/* Bottom button centered */
.article-cta {
  text-align: center;
  padding: 1rem 0 1.25rem; /* vertical breathing room only */
}
/* Article subheadings */
.article-card .article-body h3 {
  font-size: 2rem;
    margin-top: 2rem;  /* extra space above */
  color: #000;
}
/* Keep pill buttons the same color in every state */
a.pill-btn,
a.pill-btn:link,
a.pill-btn:visited,
a.pill-btn:hover,
a.pill-btn:active,
a.pill-btn:focus {
             /* or #fff if your buttons have white text */
  text-decoration: none;
}
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.post-wrap {
  position: relative; /* anchor for the absolutely positioned blogus-deco */
}

.blog-cloud {
  position: absolute;
  bottom: 0;
  height: clamp(40px, 12vw, 110px);
  pointer-events: none;
  z-index: 1 !important;
opacity: 0.3;
  /* animation */
  animation: sway 5s ease-in-out infinite alternate;
  transform: var(--base-transform); /* base + animated combined */
}

/* Left cloud (flipped + slightly larger) */
.blog-cloud.cloud-left {
  left: 11%;
  top: 7%;
  --base-transform: scale(1.2) scaleX(-1) rotate(-2deg); /* 20% bigger */
}

/* Right cloud (normal size) */
.blog-cloud.cloud-right {
  right: 1%;
  top: 55%;
  --base-transform: scale(1) rotate(2deg);
}

/* Keyframes for gentle swaying */
@keyframes sway {
  0%   { transform: var(--base-transform) translateX(0) rotate(0deg); }
  50%  { transform: var(--base-transform) translateX(-3px) rotate(-1deg); }
  100% { transform: var(--base-transform) translateX(3px) rotate(1deg); }
}