/* Global styles */

/* Global font setup */
:root {
    /* ── Solid theme colours ──────────────────────────────── */
    --color-primary: #111A2E;
    --color-background: #F5F7FA;
    --color-accent: #f51aa4;
    --color-accent-hover: #ca0a83;
    --color-text: #0B1320;
    --color-border: #F5F7FA;
    --color-success: #2ecc71;
    --color-error: #e74c3c;
    --color-blue-accent: #147CFF;
    --color-blue-light: #00B2FF;
    --color-blue-sky: #38bdf8;
    --color-white: #ffffff;
    --color-bg-dark: #001f3f;
    --color-vision-muted: #cbd5e1;

    /* ── Font families ────────────────────────────────────── */
    --font-heading: 'Satoshi', sans-serif;
    --font-body: 'Satoshi', sans-serif;

    /* ── Named overlay tokens ─────────────────────────────── */
    --color-overlay-dark: rgba(0, 31, 63, 0.92);
    --color-card-shadow: rgba(0, 0, 0, 0.1);

    /* ── White / glass tokens (alpha as integer %) ────────── */
    --white-a3:  rgba(255, 255, 255, 0.03);
    --white-a4:  rgba(255, 255, 255, 0.04);
    --white-a5:  rgba(255, 255, 255, 0.05);
    --white-a6:  rgba(255, 255, 255, 0.06);
    --white-a7:  rgba(255, 255, 255, 0.07);
    --white-a75: rgba(255, 255, 255, 0.075);
    --white-a8:  rgba(255, 255, 255, 0.08);
    --white-a10: rgba(255, 255, 255, 0.10);
    --white-a12: rgba(255, 255, 255, 0.12);
    --white-a15: rgba(255, 255, 255, 0.15);
    --white-a16: rgba(255, 255, 255, 0.16);
    --white-a30: rgba(255, 255, 255, 0.30);
    --white-a32: rgba(255, 255, 255, 0.32);
    --white-a42: rgba(255, 255, 255, 0.42);
    --white-a45: rgba(255, 255, 255, 0.45);
    --white-a48: rgba(255, 255, 255, 0.48);
    --white-a50: rgba(255, 255, 255, 0.50);
    --white-a52: rgba(255, 255, 255, 0.52);
    --white-a55: rgba(255, 255, 255, 0.55);
    --white-a60: rgba(255, 255, 255, 0.60);
    --white-a62: rgba(255, 255, 255, 0.62);
    --white-a65: rgba(255, 255, 255, 0.65);
    --white-a68: rgba(255, 255, 255, 0.68);
    --white-a70: rgba(255, 255, 255, 0.70);
    --white-a72: rgba(255, 255, 255, 0.72);
    --white-a74: rgba(255, 255, 255, 0.74);
    --white-a75b: rgba(255, 255, 255, 0.75);
    --white-a78: rgba(255, 255, 255, 0.78);
    --white-a80: rgba(255, 255, 255, 0.80);
    --white-a82: rgba(255, 255, 255, 0.82);
    --white-a86: rgba(255, 255, 255, 0.86);
    --white-a88: rgba(255, 255, 255, 0.88);
    --white-a90: rgba(255, 255, 255, 0.90);
    --white-a92: rgba(255, 255, 255, 0.92);
    --white-a95: rgba(255, 255, 255, 0.95);
    --white-a96: rgba(255, 255, 255, 0.96);
    --white-a97: rgba(255, 255, 255, 0.97);

    /* ── Black overlay tokens ─────────────────────────────── */
    --black-a14: rgba(0, 0, 0, 0.14);
    --black-a18: rgba(0, 0, 0, 0.18);
    --black-a25: rgba(0, 0, 0, 0.25);
    --black-a40: rgba(0, 0, 0, 0.40);
    --black-a45: rgba(0, 0, 0, 0.45);
    --black-a50: rgba(0, 0, 0, 0.50);
    --black-a60: rgba(0, 0, 0, 0.60);
    --black-a65: rgba(0, 0, 0, 0.65);
    --black-a70: rgba(0, 0, 0, 0.70);
    --black-a82: rgba(0, 0, 0, 0.82);
    --black-a90: rgba(0, 0, 0, 0.90);

    /* ── Cyan (0 255 255) tokens ──────────────────────────── */
    --cyan-a5:  rgba(0, 255, 255, 0.05);
    --cyan-a6:  rgba(0, 255, 255, 0.06);
    --cyan-a12: rgba(0, 255, 255, 0.12);
    --cyan-a14: rgba(0, 255, 255, 0.14);
    --cyan-a25: rgba(0, 255, 255, 0.25);
    --cyan-a28: rgba(0, 255, 255, 0.28);
    --cyan-a30: rgba(0, 255, 255, 0.30);
    --cyan-a35: rgba(0, 255, 255, 0.35);
    --cyan-a40: rgba(0, 255, 255, 0.40);
    --cyan-a50: rgba(0, 255, 255, 0.50);

    /* ── Navy (0 31 63 = #001f3f) tokens ──────────────────── */
    --navy-a0:  rgba(0, 31, 63, 0);
    --navy-a50: rgba(0, 31, 63, 0.50);
    --navy-a60: rgba(0, 31, 63, 0.60);
    --navy-a75: rgba(0, 31, 63, 0.75);

    /* ── Deep-navy (0 10 30) tokens ───────────────────────── */
    --deep-navy-a0:  rgba(0, 10, 30, 0);
    --deep-navy-a40: rgba(0, 10, 30, 0.40);
    --deep-navy-a72: rgba(0, 10, 30, 0.72);
    --deep-navy-a82: rgba(0, 10, 30, 0.82);
    --deep-navy-a97: rgba(0, 10, 30, 0.97);

    /* ── Darkest-navy (0 10 40) tokens ───────────────────── */
    --darkest-navy-a97: rgba(0, 10, 40, 0.97);

    /* ── Accent-pink (245 26 164) tokens ─────────────────── */
    --accent-a8:  rgba(245, 26, 164, 0.08);
    --accent-a12: rgba(245, 26, 164, 0.12);
    --accent-a28: rgba(245, 26, 164, 0.28);
    --accent-a30: rgba(245, 26, 164, 0.30);

    /* ── Blue-sky (56 189 248 = #38bdf8) tokens ──────────── */
    --blue-sky-a8:  rgba(56, 189, 248, 0.08);
    --blue-sky-a10: rgba(56, 189, 248, 0.10);
    --blue-sky-a12: rgba(56, 189, 248, 0.12);
    --blue-sky-a15: rgba(56, 189, 248, 0.15);
    --blue-sky-a20: rgba(56, 189, 248, 0.20);
    --blue-sky-a22: rgba(56, 189, 248, 0.22);
    --blue-sky-a40: rgba(56, 189, 248, 0.40);

    /* ── Gold token ───────────────────────────────────────── */
    --gold-a95: rgba(255, 215, 0, 0.95);
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: var(--font-body);
    background: 
      linear-gradient(to right, var(--black-a70) 30%, var(--navy-a50) 60%, var(--navy-a0) 100%);
    background-color: var(--color-bg-dark);
    background-repeat: repeat;
    background-size: auto, cover;
    overflow-x: hidden;
  }

  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .reveal-delay {
    transition-delay: 0.3s;
  }

  .section-title {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
    font-family: var(--font-heading);
    color: var(--color-blue-accent);
    text-shadow: 0 0 10px var(--cyan-a50);
    margin-top: 5%;
    margin-bottom: 5rem;
  }

  /* Nav */
  header {
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease;
  }

  /* Fixed transparent header for pages with full-bleed hero backgrounds */
  header.hero-nav {
    position: fixed;
    width: 100%;
    background: transparent;
  }

  nav {
    width: 100%;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 10vh;
  }

  #navbar.scrolled {
    background: 
    linear-gradient(to right, var(--black-a90) 30%, var(--navy-a60) 60%, var(--navy-a60) 100%);
  }

  .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .nav-items {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  .nav-items a {
    position: relative;
    text-decoration: none;
    color: var(--color-background);
    transition: transform 0.2s ease;
  }

  .nav-items a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
  }

  .nav-items a:hover {
    transform: scale(1.05);
  }

  .nav-items a:hover::after {
    width: 100%;
  }

  .menu-toggle {
    display: none;
    z-index: 2001;
    flex-direction: column;
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    height: 3px;
    width: 25px;
    background-color: var(--color-text);
    margin: 5px 0;
    border-radius: 2px;
    transition: transform 0.4s ease, opacity 0.4s ease;
    transform-origin: center;
  }

  .mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    background-color: var(--color-accent);
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    z-index: 2000;
    overflow: auto;
  }  

  .mobile-menu.open {
    transform: translateX(0);
  }

  .mobile-menu a {
    color: var(--color-white);
    margin: 1rem 0;
    font-size: 1.2rem;
    text-decoration: none;
  }

  .mobile-menu ul,
  .mobile-menu li {
    list-style: none;
    margin-bottom: 25px;
  }

  .mobile-menu li:hover {
    transition: all 0.25s ease-in-out;
  }

  /* ── Desktop dropdowns ─────────────────────────────────── */
  .nav-has-dropdown {
    position: relative;
  }

  .nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 0.6rem;
    background: var(--darkest-navy-a97);
    border: 1px solid var(--white-a10);
    border-radius: 8px;
    padding-bottom: 0.4rem;
    list-style: none;
    min-width: 190px;
    z-index: 1100;
    box-shadow: 0 8px 24px var(--black-a45);
  }

  .nav-has-dropdown:hover .nav-dropdown,
  .nav-has-dropdown:focus-within .nav-dropdown {
    display: block;
  }

  .nav-dropdown li a {
    display: block;
    padding: 0.45rem 1.2rem;
    color: var(--color-background);
    white-space: nowrap;
    font-size: 0.88rem;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .nav-dropdown li a:hover {
    color: var(--color-accent);
    transform: none;
  }

  .nav-dropdown li a::after {
    display: none;
  }

  .nav-caret {
    font-size: 0.7rem;
    vertical-align: middle;
    margin-left: 2px;
  }

  /* ── Mobile dropdowns ──────────────────────────────────── */
  .mobile-dropdown-toggle {
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: inherit;
    width: 100%;
    text-align: left;
  }

  .mobile-sub {
    display: none;
    list-style: none;
    padding: 0.3rem 0 0.3rem 1.1rem;
    margin: 0 0 0.5rem;
  }

  .mobile-sub.open {
    display: block;
  }

  .mobile-sub li {
    margin-bottom: 8px !important;
  }

  .mobile-sub li a {
    font-size: 0.95rem !important;
    margin: 0 !important;
    color: var(--white-a75b) !important;
  }

  .mobile-sub li:hover {
    transform: none !important;
  }

  .scrolled header {
    background-color: var(--color-primary);
  }

  .menu-toggle span {
    display: block; /* Needed for transform to work */
  }
  
  .mobile-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--black-a40);
    z-index: 1049;
    display: none;
    transition: opacity 0.3s ease;
  }
  
  .mobile-backdrop.show {
    display: block;
  }
  

  @media (max-width: 1115px) {
    .nav-item-container {
      display: none;
    }

    .menu-toggle {
      display: flex;
    }

    .menu-toggle span {
        background-color: var(--color-background);
    }
  }

  @media(max-width: 576px) {
    .mobile-menu {
      width: 200px;
      padding: 3rem 1.5rem;
    }

    .mobile-menu a {
      font-size: 1rem;
    }

    .mobile-dropdown-toggle {
      font-size: 1rem;
    }

    .mobile-dropdown-toggle .bi,
    .mobile-dropdown-toggle .nav-icon-emoji {
      display: none;
    }
  }

  /* Hero */
  .hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background-color: var(--color-primary);
    min-height: 80vh;
    background: 
      linear-gradient(to right, var(--black-a70) 30%, var(--navy-a50) 60%, var(--navy-a0) 100%);
    background-color: var(--color-bg-dark);
    background-repeat: repeat;
    background-size: auto, cover;
    overflow: hidden;
    position: relative;
  }

  .hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    z-index: 0;
  }
  
  .hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .trustcard{
    padding: 1rem 1.1rem;
    border-radius: 18px;

    background: var(--white-a6);
    border: 1px solid var(--white-a12);

    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px var(--black-a18);

    transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
  }

  .trustcard:hover{
    transform: translateY(-3px);
    border-color: var(--cyan-a30);
    background: var(--white-a75);
  }

  .trustcard-title{
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: .45rem;
  }

  .trustcard-value{
    font-size: 1rem;
    line-height: 1.35;
    color: var(--color-background);
  }
  
  .hero-text h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    color: var(--color-background);
  }

  .blue-accent {
    color: var(--color-blue-accent);
    font-weight: 700;
  }
  
  .hero-text p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--color-background);
  }

  .hero-location {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
    color: var(--white-a60);
    margin-bottom: 1.5rem;
  }

  .hero-location i {
    color: var(--color-accent);
  }
  
  .cta-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  .cta {
    position: relative;
    padding: 0.35rem 1.10rem;
    background-color: transparent;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    z-index: 1;
    border-radius: 6px;
  }
  
  @keyframes border-glow {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  
  .cta.secondary {
    border-color: var(--color-blue-accent);
    color: var(--color-blue-accent);
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  }

  .cta.secondary:hover {
    background-color: var(--color-blue-accent);
    color: var(--color-background);
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  }

  .cta.primary {
    background-color: var(--color-accent);
    color: var(--color-background);
    transition: background-color 0.3s ease-in-out;
  }

  .cta.primary:hover {
    background-color: var(--color-accent-hover);
    transition: background-color 0.3s ease-in-out;
  }
  
  .hero-image {
    flex: 1 1 400px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
  }
  
  .hero-image img {
    max-width: 80%;
    height: auto;
    z-index: 2;
    position: relative;
  }

  .accent-word {
    color: var(--color-blue-accent);
    font-weight: 700;
  }

  @media (max-width: 1200px) {
    .hero-text h1 {
      font-size: 2.5rem;
    }
  }

  @media (max-width: 768px) {
    .hero {
      flex-direction: column;
      text-align: center;
    }
  
    .hero-text {
      max-width: 100%;
    }
  
    .hero-image {
      margin-top: 4rem;
    }
  
    .cta-buttons {
      justify-content: center;
    }
  }

  /*Upcoming Courses*/

.available-courses .section-subtitle{
  color: var(--white-a78);
  max-width: 60ch;
}

.coursecard{
  border-radius: 18px;
  padding: 1.2rem 1.2rem;
  background: var(--white-a6);
  border: 1px solid var(--white-a12);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px var(--black-a18);
}

.coursecard.featured{
  border-color: var(--cyan-a28);
  background: var(--cyan-a6);
}

.coursecard-title{
  color: var(--white-a95);
  font-size: 1.25rem;
  margin: 0;
}

.coursecard-meta{
  color: var(--white-a65);
  font-size: 0.95rem;
}

.course-badge{
  font-weight: 700;
  padding: .55rem .7rem;
  border-radius: 999px;
  font-size: .85rem;
}

.course-badge.full{
  background: var(--white-a8);
  color: var(--white-a80);
  border: 1px solid var(--white-a16);
}

.course-badge.available{
  background: var(--cyan-a14);
  color: var(--white-a95);
  border: 1px solid var(--cyan-a30);
}

.course-badge.price{
  background: rgba(20, 124, 255, 0.15);
  color: var(--color-blue-accent);
  border: 1px solid rgba(20, 124, 255, 0.35);
}

.course-badge.september{
  background: rgba(255, 165, 0, 0.12);
  color: #ffb347;
  border: 1px solid rgba(255, 165, 0, 0.35);
}

.coursecard-body p{
  color: var(--white-a82);
}

.coursecard-points{
  margin: 0;
  padding-left: 1.1rem;
  color: var(--white-a86);
  display: grid;
  gap: 0.35rem;
}

.coursecard-points li{
  list-style: none;
  position: relative;
  padding-left: 1.1rem;
}

.coursecard-points li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-blue-accent);
  font-weight: 700;
}

.courses-note{
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: var(--white-a4);
  border: 1px solid var(--white-a10);
  color: var(--white-a75b);
}

.course-image-wrapper{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  height: 260px;
}

.course-image-wrapper::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    var(--deep-navy-a97) 0%,
    var(--deep-navy-a72) 30%,
    var(--deep-navy-a40) 55%,
    var(--deep-navy-a72) 100%
  );
  pointer-events: none;
}

.course-image-overlay {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  padding: 1.75rem 2rem;
  z-index: 2;
  pointer-events: none;
  background: none;
  text-align: center;
}

@media (min-width: 768px) {
  .course-image-overlay {
    top: auto;
    bottom: 0;
    transform: none;
    text-align: left;
    background: linear-gradient(to top, var(--deep-navy-a82) 0%, var(--deep-navy-a0) 100%);
  }
}

.course-image-tagline {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-white);
  text-shadow: 0 1px 6px var(--black-a60);
  line-height: 1.3;
}

.course-image-sub {
  margin: 0;
  font-size: 0.9rem;
  color: var(--white-a80);
  text-shadow: 0 1px 4px var(--black-a50);
  max-width: 55ch;
  line-height: 1.5;
}

.course-image-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 80%;
  display: block;
  transition: transform .35s ease;
}

.course-image-wrapper:hover img{
  transform: scale(1.06);
}


  /* Our vision */
  /* Base styling */
.our-vision-section {
  color: var(--color-background);
  padding: 4rem 2rem;
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0% 95%);
  font-family: var(--font-body);
  box-shadow: inset 0 0 30px var(--cyan-a5);
  overflow: hidden;
  position: relative;
}

.vision-container {
  max-width: 900px;
  margin: auto;
  text-align: center;
}

/* Text styles */
.vision-text {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: var(--color-vision-muted);
  transform: translateY(30px);
}

.vision-text strong {
  color: var(--color-blue-sky);
  font-weight: 600;
}

@media (max-width: 768px) {
  .vision-container::before {
    top: -50%;
    left: -10%;
    width: 500px;
    height: 500px;
    opacity: 0.4;
    display: none;
  }
}

/* Courses */
.our-courses-section {
  color: var(--color-text);
  position: relative;
  font-family: var(--font-body);
  overflow: hidden;
}

.our-courses-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.14;            /* much more subtle = more premium */
  filter: saturate(0.9);
  z-index: 0;
}

.our-courses-section .container {
  position: relative;
  z-index: 1;
}

.section-subtitle{
  max-width: 70ch;
  color: var(--white-a78);
}

/* Premium “area” cards */
.area-card{
  height: 100%;
  border-radius: 18px;
  overflow: hidden;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);

  box-shadow: 0 14px 35px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);

  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.area-card:hover{
  transform: translateY(-3px);
  border-color: rgba(0,255,255,0.25);
  background: rgba(255,255,255,0.075);
}

.area-media{
  height: 190px;
  overflow: hidden;
  background: var(--black-a18);
}

.area-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  transform: scale(1.02);
  transition: transform .35s ease, object-position .35s ease;
}

.area-card-web .area-media img{
  object-position: 60% 60%;
}

.col-12:nth-child(4) .area-media img{
  object-position: center 65%;
}

.area-card:hover .area-media img{
  transform: scale(1.06);
}

.area-body{
  padding: 1.15rem 1.2rem 1.25rem;
  text-align: left;
}

.area-title{
  font-family: var(--font-heading);
  font-size: 1.2rem;
  margin: 0 0 .5rem;
  color: var(--white-a95);
  letter-spacing: -0.01em;
}

.area-text{
  margin: 0 0 .9rem;
  color: var(--white-a80);
  line-height: 1.55;
}

.area-points{
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}

.area-points li{
  list-style: none;
  position: relative;
  padding-left: 1.1rem;
  color: var(--white-a86);
  line-height: 1.35;
}

.area-points li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-blue-accent);
  font-weight: 800;
}

@media (max-width: 576px){
  .area-media{ height: 170px; }
  .area-title{ font-size: 1.1rem; }
}

/* About us section */

  .about-section {
    color: var(--color-background);
    font-family: var(--font-body);
    position: relative;
    overflow: hidden;
  }

  .about-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.10;
    filter: saturate(0.9);
    z-index: 0;
  }

  .about-section .container{
    position: relative;
    z-index: 1;
  }

  .about-description {
    max-width: 78ch;
    margin: 0 auto;
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--white-a82);
  }

  .profile-card-v2{
    border-radius: 18px;
    overflow: hidden;

    background: var(--white-a6);
    border: 1px solid var(--white-a12);

    box-shadow: 0 14px 35px var(--black-a18);
    backdrop-filter: blur(10px);

    transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
  }

  .profile-card-v2:hover{
    transform: translateY(-3px);
    border-color: var(--cyan-a25);
    background: var(--white-a75);
  }

  .profile-card-v2 .profile-media{
    height: 210px;
    overflow: hidden;
    background: var(--black-a18);
  }

  .profile-card-v2 .profile-media img{
    width: 100%;
    height: 100%;
    object-fit:contain;
    transform: scale(1.02);
    transition: transform .35s ease;
  }

  .profile-card-v2:hover .profile-media img{
    transform: scale(1.06);
  }

  .profile-card-v2 .profile-body{
    padding: 1.15rem 1.2rem 1.35rem;
    text-align: left;
  }

  .profile-card-v2 .profile-body h3{
    font-family: var(--font-heading);
    font-size: 1.35rem;
    margin: 0 0 .65rem;
    color: var(--color-blue-accent);
    letter-spacing: -0.01em;
  }

  .profile-card-v2 .profile-body p{
    font-size: 0.98rem;
    line-height: 1.65;
    margin: 0;
    color: var(--white-a86);
  }

  @media (max-width: 576px){
    .profile-card-v2 .profile-media{ height: 190px; }
  }

/* How it works */
/* --- How it works: premium card collage (still uses .collage-img + .active) --- */

  .how-section {
  background:
    linear-gradient(to right, var(--black-a70) 30%, var(--navy-a50) 60%, var(--navy-a0) 100%);
  background-color: var(--color-primary);
  background-repeat: repeat;
  background-size: auto, cover;
  color: var(--color-background);
  font-family: var(--font-body);
  position: relative;
  }

  .sticky-boundary {
    position: relative;
    padding-bottom: 4rem;
  }

  /* force row to flex columns with equal height */
  .sticky-boundary .row {
    display: flex;
    align-items: stretch;
  }

  /* Sticky wrapper (right side) */
  .sticky-wrapper {
    position: sticky;
    top: 100px;
  }

  /* Left steps */
  .step-block {
    margin-bottom: 55vh; /* slower transitions */
  }

  .step-block:last-child {
    margin-bottom: 30px;
  }

  .how-steps h1 {
    color: var(--color-blue-accent);
    margin-bottom: 0.5rem;
  }

  .benefits-btn {
    margin-top: 14px;
  }

  .benefits-list {
    list-style-type: disc;
    padding-left: 1.5rem;
    color: var(--color-background);
    font-size: 1rem;
    line-height: 1.6;
  }

  .benefits-list li {
    margin-bottom: 0.75rem;
    list-style: none;
  }

  .pink-check {
    color: var(--color-accent);
    height: 5px;
    margin-right: 5px;
  }

  /* =========================
    RIGHT SIDE: PREMIUM CARD COLLAGE
    (replaces old background-image tiles)
    ========================= */

  .image-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 82vh;           /* larger cards */
    position: sticky;
    top: 100px;
    gap: 1.25rem;           /* more breathing room */
  }

  /* Each card (still uses class collage-img for JS active toggle) */
  .collage-card,
  .collage-img {
    width: 100%;
    border-radius: 18px;
    overflow: hidden;

    background: var(--white-a6);
    border: 1px solid var(--white-a12);

    box-shadow: 0 14px 35px var(--black-a18);
    backdrop-filter: blur(10px);

    /* inactive look */
    filter: brightness(0.55) blur(0.6px);
    transform: scale(0.985);
    position: relative;

    transition:
      transform 0.35s ease,
      filter 0.35s ease,
      border-color 0.35s ease,
      background-color 0.35s ease;
  }

  .collage-media {
    height: 68%;
    overflow: hidden;
    background: var(--black-a18);
  }

  .collage-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    transition: transform 0.35s ease;
  }

  .collage-body {
    height: 32%;
    padding: 1.1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .collage-title {
    font-family: var(--font-heading);
    font-size: 1.12rem;
    color: var(--white-a95);
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
  }

  .collage-text {
    font-size: 0.95rem;
    color: var(--white-a74);
    line-height: 1.25;
  }

  /* Active behaviour (JS toggles .active on the correct .collage-img) */
  .collage-img.active {
    filter: brightness(1) blur(0);
    transform: scale(1.03);
    z-index: 2;
    border-color: var(--cyan-a25);
    background: var(--white-a75);
  }

  .collage-img.active .collage-media img {
    transform: scale(1.08);
  }

  /* =========================
    MOBILE
    ========================= */
  @media (max-width: 768px) {
    .image-collage {
      position: static;
      grid-template-columns: 1fr 1fr;
      margin-top: 2rem;
      height: auto;
      width: 100%;
      gap: 0.75rem;
    }

    .collage-card,
    .collage-img {
      min-height: 260px;
      transform: scale(1);          /* avoid cramped look on mobile */
      filter: brightness(0.7) blur(0.3px);
    }

    .collage-media {
      height: 160px;
    }

    .collage-body {
      height: auto;
    }

    .step-block {
      margin-bottom: 25px;
    }

    .step-block:last-child {
      margin-bottom: 25px;
    }
  }


/* Testimonials */
  .testimonials-section {
    color: var(--color-background);
    font-family: var(--font-body);
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
  }

  .testimonials-section:before{
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.10;
    filter: saturate(0.9);
    z-index: 0;
  }

  .testimonials-section .container{
    position: relative;
    z-index: 1;
  }

  .testimonial-card-v2{
    border-radius: 18px;
    padding: 1.35rem 1.35rem 1.25rem;

    background: var(--white-a6);
    border: 1px solid var(--white-a12);

    box-shadow: 0 14px 35px var(--black-a18);
    backdrop-filter: blur(10px);

    transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
  }

  .testimonial-card-v2:hover{
    transform: translateY(-3px);
    border-color: var(--cyan-a25);
    background: var(--white-a75);
  }

  .testimonial-text{
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1rem;
    color: var(--white-a86);
    position: relative;
    padding-left: 1.35rem;
  }

  .testimonial-text::before{
    content: "“";
    position: absolute;
    left: 0;
    top: -0.15rem;
    font-size: 2.1rem;
    color: var(--color-accent);
    font-family: var(--font-heading);
    line-height: 1;
  }

  .testimonial-author{
    font-weight: 700;
    color: var(--color-blue-accent);
    margin-bottom: 0.25rem;
  }

  .testimonial-stars{
    color: var(--gold-a95);
    font-size: 1.15rem;
    letter-spacing: 0.08em;
  }

/* Quiz */
/* =========================
   INTERACTIVE QUIZ
   ========================= */

  .quiz-section{
    color: var(--color-background);
    font-family: var(--font-body);
    position: relative;
    overflow: hidden;
  }

  /* Optional subtle circuit background (keep if you want) */
  .quiz-section::before{
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.10;
    filter: saturate(0.9);
    z-index: 0;
  }

  .quiz-section .container{
    position: relative;
    z-index: 1;
  }

  /* Tabs */
  .quiz-nav{
    gap: .75rem;
  }

  .quiz-tab{
    border: 1px solid var(--white-a12);
    background: var(--white-a6);
    color: var(--white-a88);

    padding: .65rem 1rem;
    border-radius: 999px;
    cursor: pointer;

    font-weight: 600;
    font-size: .95rem;
    line-height: 1;

    backdrop-filter: blur(10px);
    box-shadow: 0 14px 35px var(--black-a14);

    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;

    /* key: let Bootstrap flex handle sizing */
    width: auto;
    white-space: nowrap;
  }

  .quiz-tab:hover{
    transform: translateY(-2px);
    border-color: var(--cyan-a25);
    background: var(--white-a75);
  }

  .quiz-tab.active{
    border-color: var(--cyan-a35);
    background: var(--cyan-a14);
    color: var(--white-a96);
  }

  /* Quiz content card styling (applies to dynamically rendered .card) */
  .quiz-content .card{
    border-radius: 18px;
    background: var(--white-a6);
    border: 1px solid var(--white-a12);
    box-shadow: 0 14px 35px var(--black-a18);
    backdrop-filter: blur(10px);
    color: var(--white-a90);
  }

  .quiz-content .card .card-title,
  .quiz-content .card h5,
  .quiz-content .card h4{
    color: var(--white-a95);
  }

  /* List items inside quiz (answers/options) */
  .quiz-content .list-group-item{
    cursor: pointer;
    border: 1px solid var(--white-a10);
    background: var(--white-a4);
    color: var(--white-a86);

    border-radius: 12px;
    margin-bottom: .55rem;

    transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
  }

  .quiz-content .list-group-item:hover{
    transform: translateY(-2px);
    background: var(--white-a7);
    border-color: var(--cyan-a25);
    color: var(--white-a92);
  }

  /* If your JS applies Bootstrap state classes, make them look good */
  .quiz-content .list-group-item.active{
    background: var(--cyan-a14);
    border-color: var(--cyan-a35);
    color: var(--white-a96);
  }

  /* Image panel */
  .quiz-img-container{
    border-radius: 18px;
    overflow: hidden;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    width: 100%;
    min-height: 360px;

    border: 1px solid var(--white-a12);
    box-shadow: 0 14px 35px var(--black-a18);
  }

  /* Responsive: make the image not too tall on small screens */
  @media (max-width: 992px){
    .quiz-img-container{
      min-height: 280px;
      margin-top: 1rem;
    }
  }

  /* Responsive: let tabs wrap cleanly */
  @media (max-width: 576px){
    .quiz-tab{
      flex: 1 1 calc(50% - .5rem);
      justify-content: center;
      text-align: center;
    }
  }

  @media (max-width: 360px){
    .quiz-tab{
      flex: 1 1 100%;
    }
  }

/* Footer */
.footer-section {
  margin-top: 5rem;
  color: var(--color-background);
  font-family: var(--font-body);
}

.footer-logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .footer-logo {
    margin-left: 0;
    margin-right: 0;
  }
}

.footer-link {
  color: var(--color-background);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-link:hover {
  color: var(--color-accent);
}

/* Contact */
.contact-section {
  color: var(--color-background);
  font-family: var(--font-body);
  overflow-x: hidden;
}
.contact-info a {
  color: var(--color-blue-accent);
  text-decoration: none;
}
.contact-info a:hover {
  color: var(--color-accent);
}

/* Contact */
.contact-section {
  color: var(--color-background);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.contact-info a {
  color: var(--color-blue-accent);
  text-decoration: none;
}

.contact-info a:hover {
  color: var(--color-accent);
}

/* Optional subtle error text styling */
.contact-error {
  color: var(--color-error);
}


/* Legal */

#tncs, #privacy, #data-protection, #cookies {
  color: var(--color-background);
  margin: 25px 25px
}

#tncs, #privacy, #data-protection, #cookies  > h1 {
  color: var(--color-background);
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

#tncs, #privacy, #data-protection, #cookies  h2 {
  color: var(--color-background);
  font-size: 1.8rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

#tncs, #privacy, #data-protection, #cookies  p {
  color: var(--color-background);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════════════════════
   PARTIES PAGE
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────── */
.party-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-bg-dark);
}

.party-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.party-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--black-a82) 0%,
    var(--navy-a75) 60%,
    var(--black-a65) 100%
  );
  z-index: 1;
}

.party-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 820px;
}

.party-hero-content h1 {
  font-size: 3.6rem;
  font-family: var(--font-heading);
  color: var(--color-background);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.party-hero-content .party-sub {
  font-size: 1.25rem;
  color: var(--color-blue-accent);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.party-hero-content .party-tagline {
  font-size: 1rem;
  color: var(--white-a72);
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .party-hero-content h1 { font-size: 2.2rem; }
  .party-hero-content .party-sub { font-size: 1.05rem; }
}

/* ── Section wrappers ──────────────────────────────────────── */
.party-section {
  padding: 5rem 0;
  position: relative;
  color: var(--color-background);
  overflow-x: hidden;
}

.party-section .section-title {
  margin-top: 0;
  margin-bottom: 2rem;
}

.party-section-alt {
  background: linear-gradient(to bottom, transparent 0%, var(--white-a3) 8%, var(--white-a3) 92%, transparent 100%);
}

/* ── Intro stat strip ─────────────────────────────────────── */
.party-intro-stats {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.party-intro-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  background: var(--white-a4);
  border-left: 3px solid var(--color-blue-accent);
  border-radius: 0 12px 12px 0;
  transition: background 0.2s, border-color 0.2s;
}

.party-intro-stat:hover {
  background: var(--white-a7);
  border-color: var(--color-accent);
}

.party-intro-stat i {
  font-size: 1.4rem;
  color: var(--color-blue-accent);
  flex-shrink: 0;
}

.party-intro-stat strong {
  display: block;
  color: var(--white-a92);
  font-size: 0.94rem;
  font-weight: 600;
}

.party-intro-stat span {
  color: var(--white-a48);
  font-size: 0.8rem;
}

/* ── Stat cards in intro (reuse trustcard, add value style) ── */
.party-stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-blue-accent);
  margin-bottom: 0.4rem;
  line-height: 1;
}

/* ── Game cards ────────────────────────────────────────────── */
.game-card {
  border-radius: 18px;
  overflow: hidden;
  background: var(--white-a6);
  border: 1px solid var(--white-a12);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px var(--black-a18);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.game-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-a28);
  background: var(--white-a75);
}

.game-card-media {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: var(--black-a25);
  flex-shrink: 0;
}

.game-card-media img,
.game-card-media video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity 0.4s ease;
}

.game-card-media img { opacity: 1; }

.game-card-media video {
  opacity: 0;
  pointer-events: none;
}

.game-card.playing .game-card-media img { opacity: 0; }
.game-card.playing .game-card-media video { opacity: 1; }

.game-card-body {
  padding: 1.1rem 1.15rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.game-card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white-a95);
  margin-bottom: 0.35rem;
}

.game-card-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: var(--cyan-a12);
  color: var(--color-blue-accent);
  border: 1px solid var(--cyan-a25);
  margin-bottom: 0.55rem;
}

.game-card-badge.age-badge {
  background: var(--accent-a12);
  color: var(--color-accent);
  border-color: var(--accent-a28);
}

.game-card-desc {
  font-size: 0.88rem;
  color: var(--white-a68);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

/* ── Timeline ──────────────────────────────────────────────── */
.timeline {
  position: relative;
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-blue-accent), var(--color-accent));
  opacity: 0.4;
}

.timeline-item {
  position: relative;
  padding: 0 0 2rem 60px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: 10px;
  top: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-blue-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-accent);
  font-size: 0.75rem;
  font-weight: 700;
}

.timeline-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white-a95);
  margin-bottom: 0.2rem;
}

.timeline-desc {
  font-size: 0.93rem;
  color: var(--white-a68);
  margin: 0;
}

/* ── Package cards ─────────────────────────────────────────── */
.pkg-card {
  border-radius: 18px;
  padding: 2rem 1.5rem;
  background: var(--white-a6);
  border: 1px solid var(--white-a12);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 35px var(--black-a18);
  transition: transform 0.18s ease, border-color 0.18s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pkg-card.featured-pkg {
  border-color: var(--cyan-a35);
  background: var(--white-a6);
}

.pkg-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-a35);
}

.pkg-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--cyan-a14);
  color: var(--color-blue-accent);
  border: 1px solid var(--cyan-a30);
  display: inline-block;
  margin-bottom: 1rem;
}

.pkg-badge.pkg-badge-ultimate {
  background: var(--accent-a12);
  color: var(--color-accent);
  border-color: var(--accent-a30);
}

.pkg-name {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--white-a97);
  margin-bottom: 0.35rem;
}

.pkg-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-blue-accent);
  line-height: 1;
  margin-bottom: 0.2rem;
}

.pkg-price span {
  font-size: 1rem;
  font-weight: 400;
}

.pkg-price-note {
  font-size: 0.82rem;
  color: var(--white-a55);
  margin-bottom: 1.25rem;
}

.pkg-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.5rem;
  flex: 1;
}

.pkg-features li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.93rem;
  color: var(--white-a82);
}

.pkg-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-blue-accent);
  font-weight: 700;
}

/* ── Step cards (booking process) ─────────────────────────── */
.step-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.1rem;
  border-radius: 16px;
  background: var(--white-a5);
  border: 1px solid var(--white-a10);
  backdrop-filter: blur(8px);
  transition: border-color 0.2s, background 0.2s;
}

.step-card:hover {
  border-color: var(--cyan-a25);
  background: var(--white-a75);
}

.step-num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-accent);
}

.step-title {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--white-a95);
  margin-bottom: 0.15rem;
}

.step-desc {
  font-size: 0.88rem;
  color: var(--white-a65);
  margin: 0;
}

/* ── Why / info feature cards ──────────────────────────────── */
.party-feature-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 1.1rem;
  border-radius: 16px;
  background: var(--white-a5);
  border: 1px solid var(--white-a10);
  backdrop-filter: blur(8px);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.party-feature-card:hover {
  border-color: var(--cyan-a25);
  background: var(--white-a75);
  transform: translateY(-2px);
}

.party-feature-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--blue-sky-a12);
  border: 1px solid var(--blue-sky-a22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--color-blue-accent);
}

.party-feature-title {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--white-a95);
  margin-bottom: 0.1rem;
}

.party-feature-desc {
  font-size: 0.88rem;
  color: var(--white-a62);
  margin: 0;
  line-height: 1.5;
}

/* ── Behaviour / T&C info panels ───────────────────────────── */
.party-info-panel {
  border-radius: 18px;
  overflow: hidden;
  background: var(--white-a5);
  border: 1px solid var(--white-a12);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 35px var(--black-a18);
  height: 100%;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.party-info-panel:hover {
  transform: translateY(-3px);
  border-color: var(--cyan-a25);
  background: var(--white-a75);
}

.party-info-panel-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.4rem;
  background: var(--blue-sky-a8);
  border-bottom: 1px solid var(--white-a10);
}

.party-info-panel-header.accent-header {
  background: var(--accent-a8);
}

.party-info-panel-header i {
  font-size: 1.2rem;
  color: var(--color-blue-accent);
}

.party-info-panel-header.accent-header i {
  color: var(--color-accent);
}

.party-info-panel-header h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white-a95);
  margin: 0;
}

.party-info-panel-body {
  padding: 1.4rem;
}

.party-info-panel-body p {
  color: var(--white-a72);
  font-size: 0.93rem;
  line-height: 1.65;
  margin-bottom: 0.9rem;
}

.party-info-panel-body p:last-child {
  margin-bottom: 0;
}

.party-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}

.party-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.93rem;
  color: var(--white-a80);
  line-height: 1.45;
}

.party-check-list li i {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 0.9rem;
  color: var(--color-blue-accent);
}

.party-check-list.accent-checks li i {
  color: var(--color-accent);
}

.party-info-note {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: var(--white-a4);
  border-left: 3px solid var(--blue-sky-a40);
  font-size: 0.85rem;
  color: var(--white-a52);
  line-height: 1.55;
}

/* ── Party enquiry form ────────────────────────────────────── */
.party-form-wrap {
  border-radius: 20px;
  padding: 2.5rem 2rem;
  background: var(--white-a5);
  border: 1px solid var(--white-a12);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px var(--black-a25);
}

.party-form-wrap .form-label {
  color: var(--white-a78);
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

.party-form-wrap .form-control,
.party-form-wrap .form-select {
  background: var(--white-a7);
  border: 1px solid var(--white-a15);
  color: var(--white-a90);
  border-radius: 10px;
}

.party-form-wrap .form-control:focus,
.party-form-wrap .form-select:focus {
  background: var(--white-a10);
  border-color: var(--cyan-a40);
  box-shadow: 0 0 0 0.2rem var(--blue-sky-a15);
  color: var(--white-a95);
}

.party-form-wrap .form-control::placeholder {
  color: var(--white-a32);
}

.party-form-wrap .form-select option {
  background-color: var(--color-bg-dark);
  color: var(--white-a90);
}

.party-form-wrap .form-check-label {
  color: var(--white-a70);
  font-size: 0.88rem;
}

.party-form-wrap .form-check-input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ── Final CTA ─────────────────────────────────────────────── */
.party-final-cta {
  padding: 5rem 0;
  text-align: center;
  overflow-x: hidden;
}

.party-final-cta h2 {
  font-size: 2.4rem;
  color: var(--color-background);
  margin-bottom: 1.5rem;
  font-family: var(--font-heading);
}

/* ── Deposit note ──────────────────────────────────────────── */
.deposit-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--white-a52);
  margin-top: 0.85rem;
}

/* ── Intro lead text ───────────────────────────────────────── */
.party-intro-lead {
  font-size: 1.05rem;
  color: var(--white-a82);
  line-height: 1.75;
}

@media (max-width: 768px) {
  .party-final-cta h2 { font-size: 1.85rem; }
}

/* ── Why Parents dedicated section ────────────────────────── */
.party-why-image {
  border-radius: 20px;
  overflow: hidden;
  height: 440px;
  background: var(--white-a4);
  border: 1px solid var(--white-a12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.party-why-image img,
.party-why-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.party-why-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--white-a30);
  font-size: 0.9rem;
}

.party-why-placeholder i { font-size: 3rem; }

.party-why-list {
  display: flex;
  flex-direction: column;
}

.party-why-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--white-a7);
}

.party-why-item:last-child { border-bottom: none; }

.party-why-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue-sky-a10);
  border: 1px solid var(--blue-sky-a20);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--color-blue-accent);
}

.party-why-label {
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--white-a92);
  margin-bottom: 0.15rem;
}

.party-why-sub {
  font-size: 0.85rem;
  color: var(--white-a50);
  line-height: 1.45;
}

@media (max-width: 991px) {
  .party-why-image { height: 300px; }
}

/* ── Party paragraph helper classes (replaces inline style colors) ─ */
.party-intro-text {
  color: var(--white-a65);
  max-width: 60ch;
  margin: 0 auto 2.5rem;
}

.party-intro-text-55 {
  color: var(--white-a65);
  max-width: 55ch;
  margin: 0 auto 2.5rem;
}

.party-body-text {
  color: var(--white-a65);
  line-height: 1.75;
  font-size: 0.97rem;
}

.party-body-text-mb {
  color: var(--white-a65);
  margin-bottom: 2rem;
  line-height: 1.75;
}

.party-fine-print {
  color: var(--white-a42);
  font-size: 0.85rem;
}

.party-success-text {
  color: var(--white-a75b);
}

.party-required-note {
  color: var(--white-a45);
  font-size: 0.85rem;
}


/* ═══════════════════════════════════════════════════════════
   DIGITAL SOLUTIONS PAGE
═══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.ds-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-bg-dark);
  padding: 6rem 1.5rem 4rem;
}

.ds-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* ── DS Hero orb glows ──────────────────────────────────── */
.ds-hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}

.ds-hero-orb--blue {
  width: 65vw;
  max-width: 900px;
  height: 65vw;
  max-height: 900px;
  background: radial-gradient(circle, rgba(20, 124, 255, 0.92) 0%, rgba(20, 124, 255, 0.32) 52%, transparent 70%);
  filter: blur(60px);
  top: -18%;
  right: -12%;
  animation: ds-orb-a 16s ease-in-out -6s infinite alternate;
}

.ds-hero-orb--pink {
  width: 55vw;
  max-width: 780px;
  height: 55vw;
  max-height: 780px;
  background: radial-gradient(circle, rgba(245, 26, 164, 0.85) 0%, rgba(245, 26, 164, 0.28) 52%, transparent 70%);
  filter: blur(65px);
  bottom: -22%;
  left: -8%;
  animation: ds-orb-b 20s ease-in-out -11s infinite alternate;
}

@keyframes ds-orb-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-9vw, 10vh) scale(1.18); }
}

@keyframes ds-orb-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(10vw, -8vh) scale(1.12); }
}

.ds-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.52) 0%, rgba(5,10,24,0.46) 50%, rgba(0,0,0,0.60) 100%);
  z-index: 1;
}

/* Darken left & right edges as side cards slide in (xl+ only) */
@media (min-width: 1200px) {
  .ds-hero-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.42) 0%,
      transparent 28%,
      transparent 72%,
      rgba(0, 0, 0, 0.42) 100%
    );
    opacity: 0;
    animation: ds-overlay-sides 0.80s cubic-bezier(0.22, 1, 0.36, 1) 1.55s both;
  }
}

@keyframes ds-overlay-sides {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ds-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 880px;
  width: 100%;
}

.ds-hero-eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-blue-accent);
  margin-bottom: 1.1rem;
}

.ds-hero-content h1 {
  font-family: var(--font-heading);
  font-size: 3.8rem;
  font-weight: 700;
  color: var(--color-background);
  line-height: 1.1;
  margin-bottom: 1.4rem;
}

.ds-hero-lead {
  font-size: 1.12rem;
  color: var(--white-a72);
  line-height: 1.8;
  margin: 0 auto 2.5rem;
  max-width: 60ch;
}

/* ── DS Hero entry animations ───────────────────────────── */
@keyframes ds-in-top {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ds-in-left {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ds-in-right {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ds-in-bottom {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ds-anim-top    { animation: ds-in-top    1.00s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both; }
.ds-anim-left   { animation: ds-in-left   1.00s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }
.ds-anim-right  { animation: ds-in-right  1.00s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }
.ds-anim-bottom { animation: ds-in-bottom 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.95s both; }
.ds-anim-cta    { animation: ds-in-bottom 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.15s both; }
.ds-anim-cards  { animation: ds-in-bottom 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.25s both; }
/* Side card entrances use translate so hover remains immediately responsive. */
@keyframes ds-card-in-left {
  from { opacity: 0; translate: -48px 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes ds-card-in-right {
  from { opacity: 0; translate: 48px 0; }
  to { opacity: 1; translate: 0 0; }
}

.ds-anim-card-l { animation: ds-card-in-left .62s cubic-bezier(.22, 1, .36, 1) .7s backwards; }
.ds-anim-card-r { animation: ds-card-in-right .62s cubic-bezier(.22, 1, .36, 1) .7s backwards; }

/* ── DS Hero mini cards (desktop) ─────────────────────────── */
/* ── DS Hero side cards container ──────────────────────────── */
.ds-hero-side-cards {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.ds-hero-card {
  pointer-events: auto;
  position: absolute;
  width: 200px;
  background: var(--white-a5);
  border: 1px solid var(--white-a12);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  text-align: left;
  backdrop-filter: blur(10px);
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .2);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.ds-hero-card::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-blue-accent), var(--color-accent));
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ds-hero-card:hover {
  transform: translateY(-3px);
  border-color: var(--white-a30);
  background: var(--white-a8);
  box-shadow: 0 24px 55px rgba(0, 0, 0, .32);
}
.ds-hero-card:hover::after {
  opacity: 1;
}

/* top-left: aligned with h1, near left edge */
.ds-hero-card--tl { top: 36%; left: 2%;   transform: translateY(-50%); }
.ds-hero-card--tl:hover { transform: translateY(calc(-50% - 3px)); }
/* bottom-left: aligned with buttons, more margin from edge */
.ds-hero-card--bl { top: 61%; left: 5%;   transform: translateY(-50%); }
.ds-hero-card--bl:hover { transform: translateY(calc(-50% - 3px)); }
/* top-right: aligned with h1, near right edge */
.ds-hero-card--tr { top: 36%; right: 2%;  transform: translateY(-50%); }
.ds-hero-card--tr:hover { transform: translateY(calc(-50% - 3px)); }
/* bottom-right: aligned with buttons, more margin from edge */
.ds-hero-card--br { top: 61%; right: 5%;  transform: translateY(-50%); }
.ds-hero-card--br:hover { transform: translateY(calc(-50% - 3px)); }

.ds-hero-card-head {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--white-a95);
  margin-bottom: 0.3rem;
}
.ds-hero-card-desc {
  font-size: 0.78rem;
  color: var(--white-a55);
  line-height: 1.55;
  margin: 0;
}

/* ── DS Hero mobile accordions ─────────────────────────────── */
.ds-hero-accordions {
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 2rem;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.ds-hero-accord-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  overflow: hidden;
  background: var(--white-a5);
  border: 1px solid var(--white-a12);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  color: var(--white-a95);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease, border-radius 0.15s ease;
}
.ds-hero-accord-btn::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-blue-accent), var(--color-accent));
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ds-hero-accord-btn:hover {
  background: var(--white-a8);
  border-color: var(--white-a16);
}
.ds-hero-accord-btn:hover::after {
  opacity: 1;
}
.ds-hero-accord.open > .ds-hero-accord-btn {
  border-radius: 10px 10px 0 0;
  background: var(--white-a8);
  border-color: var(--white-a16);
}
.ds-hero-accord.open > .ds-hero-accord-btn::after {
  opacity: 1;
}
.ds-accord-caret {
  font-size: 0.7rem;
  margin-left: auto;
  transition: transform 0.25s ease;
}
.ds-hero-accord.open .ds-accord-caret {
  transform: rotate(180deg);
}
.ds-hero-accord-body {
  display: none;
  padding: 0.55rem 0.9rem 0.7rem;
  font-size: 0.82rem;
  color: var(--white-a62);
  line-height: 1.6;
  text-align: left;
  background: var(--white-a3);
  border: 1px solid var(--white-a8);
  border-top: none;
  border-radius: 0 0 10px 10px;
  margin-top: -2px;
}
.ds-hero-accord.open > .ds-hero-accord-body {
  display: block;
}

/* ── Service pillar cards ── */
.ds-service-card {
  border-radius: 18px;
  padding: 1.8rem 1.5rem;
  background: var(--white-a5);
  border: 1px solid var(--white-a12);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 35px var(--black-a18);
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.ds-service-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-blue-accent), var(--color-blue-sky));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ds-service-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-a25);
  background: var(--white-a75);
}

.ds-service-card:hover::after {
  opacity: 1;
}

.ds-service-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--blue-sky-a12);
  border: 1px solid var(--blue-sky-a22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--color-blue-accent);
  margin-bottom: 1.2rem;
}

.ds-service-icon.ds-icon-accent {
  background: var(--accent-a12);
  border-color: var(--accent-a28);
  color: var(--color-accent);
}

.ds-service-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white-a95);
  margin-bottom: 0.55rem;
}

.ds-service-desc {
  font-size: 0.93rem;
  color: var(--white-a72);
  line-height: 1.65;
  margin: 0;
}

/* ── DS scroll-reveal animations ── */
.ds-sr {
  opacity: 0;
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--ds-sr-delay, 0s),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--ds-sr-delay, 0s);
}
.ds-sr.ds-sr-left  { transform: translateX(-52px); }
.ds-sr.ds-sr-right { transform: translateX(52px); }
.ds-sr.ds-sr-up    { transform: translateY(36px); }
.ds-sr.ds-sr-visible {
  opacity: 1;
  transform: none;
}

/* ── What We Build section ── */
.ds-what-section,
.ds-portfolio-section {
  background: linear-gradient(160deg, #070d1c 0%, #050a18 100%);
  overflow-x: hidden;
}

.ds-hero-bg {
  background-color: var(--color-bg-dark);
  position: relative;
  overflow: hidden;
}

.ds-what-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--white-a95);
  line-height: 1.15;
  margin: 0.5rem 0 0;
}

.ds-what-subtext {
  font-size: 0.97rem;
  color: var(--white-a62);
  line-height: 1.85;
  margin: 0;
}

.ds-cap-card {
  position: relative;
  border-radius: 16px;
  padding: 1.6rem 1.4rem 1.3rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  height: 100%;
  overflow: hidden;
  transition: border-color 0.25s ease 0.12s, background 0.25s ease 0.12s, transform 0.25s ease 0.12s;
}
.ds-cap-card::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-blue-accent), var(--color-blue-sky));
  opacity: 0;
  transition: opacity 0.25s ease 0.12s;
}
.ds-cap-card--accent::after {
  background: linear-gradient(90deg, var(--color-accent), var(--color-blue-accent));
}
.ds-cap-card:hover {
  border-color: rgba(255,255,255,0.17);
  background: rgba(255,255,255,0.07);
  transform: translateY(-3px);
}
.ds-cap-card:hover::after { opacity: 1; }

.ds-cap-num {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.16);
  font-family: var(--font-heading);
}

.ds-cap-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--blue-sky-a12);
  border: 1px solid var(--blue-sky-a22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--color-blue-accent);
  margin-bottom: 1rem;
}
.ds-cap-icon--accent {
  background: var(--accent-a12);
  border-color: var(--accent-a28);
  color: var(--color-accent);
}

.ds-cap-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white-a95);
  margin-bottom: 0.5rem;
}

.ds-cap-desc {
  font-size: 0.88rem;
  color: var(--white-a62);
  line-height: 1.72;
  margin-bottom: 1rem;
}

.ds-cap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.ds-cap-tags span {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.18rem 0.5rem;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.11);
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════
   SELECTED WORK — Portfolio Section (.pf-*)
   ═══════════════════════════════════════════════════════════ */

/* ── Featured project card ── */
.pf-featured {
  display: flex;
  gap: 0;
  background: var(--white-a3);
  border: 1px solid var(--white-a8);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.pf-featured-media {
  flex: 0 0 52%;
  max-width: 52%;
  overflow: hidden;
}
.pf-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #070d1c;
  display: block;
  transition: transform 0.65s ease;
}
.pf-featured:hover .pf-featured-media img {
  transform: scale(1.03);
}
.pf-featured-content {
  flex: 1;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

/* ── Badge ── */
.pf-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.75rem;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-blue-accent));
  color: #fff;
  margin-bottom: 0.9rem;
  width: fit-content;
}

/* ── Category eyebrow (shared by featured + cards) ── */
.pf-category {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--white-a55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

/* ── Featured title ── */
.pf-title {
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  font-weight: 700;
  color: var(--white-a95);
  line-height: 1.15;
  margin-bottom: 0.25rem;
}

/* ── Client name ── */
.pf-client {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-blue-sky);
  margin-bottom: 1rem;
}

/* ── Description ── */
.pf-desc {
  font-size: 0.92rem;
  color: var(--white-a78);
  line-height: 1.78;
  margin-bottom: 1.15rem;
}

/* ── Featured impact list ── */
.pf-impact {
  list-style: none;
  padding: 0;
  margin: 0 0 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pf-impact li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.87rem;
  color: var(--white-a78);
  line-height: 1.55;
}
.pf-impact li i {
  color: var(--color-blue-sky);
  flex-shrink: 0;
  margin-top: 0.17em;
  font-size: 1rem;
}

/* ── Tags (shared by featured + cards) ── */
.pf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.pf-tags span {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 20px;
  background: var(--white-a6);
  border: 1px solid var(--white-a10);
  color: var(--white-a45);
  letter-spacing: 0.02em;
}

/* ── Small project cards ── */
.pf-card {
  position: relative;
  background: var(--white-a3);
  border: 1px solid var(--white-a8);
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.pf-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-blue-accent));
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.pf-card:hover {
  border-color: var(--white-a15);
  box-shadow: 0 10px 44px rgba(0, 0, 0, 0.4);
}
.pf-card:hover::after {
  opacity: 1;
  transform: scaleX(1);
}
.pf-card-media {
  overflow: hidden;
  flex-shrink: 0;
}

/* Desktop screenshot carousel */
.pf-card-carousel {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}
.pf-card-carousel .carousel,
.pf-card-carousel .carousel-inner,
.pf-card-carousel .carousel-item {
  height: 100%;
}
.pf-card-carousel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #070d1c;
  display: block;
  transition: transform 0.65s ease;
}
.pf-card:hover .pf-card-carousel .carousel-item.active img { transform: none; }
.pf-card-carousel .carousel-control-prev,
.pf-card-carousel .carousel-control-next {
  width: 2.2rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.pf-card:hover .pf-card-carousel .carousel-control-prev,
.pf-card:hover .pf-card-carousel .carousel-control-next {
  opacity: 1;
}
.pf-card-carousel .carousel-indicators {
  margin-bottom: 0.35rem;
}
.pf-card-carousel .carousel-indicators [data-bs-target] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border-top: none;
  border-bottom: none;
}

/* Mobile screenshot thumbnail strip */
.pf-mobile-strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid var(--white-a6);
  flex-shrink: 0;
}
.pf-mobile-label {
  font-size: 0.63rem;
  font-weight: 600;
  color: var(--white-a40);
  white-space: nowrap;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.pf-mobile-thumbs {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pf-mobile-thumbs::-webkit-scrollbar { display: none; }
.pf-mobile-thumbs a {
  flex-shrink: 0;
  display: block;
}
.pf-mobile-thumbs img {
  height: 52px;
  width: auto;
  border-radius: 5px;
  border: 1px solid var(--white-a10);
  display: block;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.pf-mobile-thumbs a:hover img {
  border-color: var(--white-a25);
  opacity: 0.85;
}

.pf-card-body {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pf-card-title {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--white-a95);
  margin-bottom: 0.45rem;
  line-height: 1.25;
}
.pf-card-desc {
  font-size: 0.86rem;
  color: var(--white-a78);
  line-height: 1.72;
  margin-bottom: 0.9rem;
  flex: 1;
}

/* ── Card impact list ── */
.pf-card-impact {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pf-card-impact li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.81rem;
  color: var(--white-a62);
  line-height: 1.5;
}
.pf-card-impact li i {
  color: var(--color-blue-sky);
  flex-shrink: 0;
  margin-top: 0.14em;
  font-size: 0.9rem;
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
  .pf-featured {
    flex-direction: column;
  }
  .pf-featured-media {
    flex: unset;
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }
  .pf-featured-content {
    padding: 2rem 1.75rem;
  }
}
@media (max-width: 575.98px) {
  .pf-featured-content {
    padding: 1.5rem;
  }
}

/* ── Section shared ── */
.ds-section {
  padding: 5rem 0;
  background-color: var(--color-bg-dark);
  overflow-x: hidden;
}

.ds-section-alt {
  padding: 5rem 0;
  background: linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-primary) 50%, var(--color-bg-dark) 100%);
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════
   WHY BUSINESSES WORK WITH US — .ds-why-*
   ═══════════════════════════════════════════════════════════ */
.ds-why-card {
  position: relative;
  background: var(--white-a3);
  border: 1px solid var(--white-a8);
  border-radius: 16px;
  padding: 2rem 1.6rem;
  height: 100%;
  overflow: hidden;
  transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
.ds-why-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-blue-accent));
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.ds-why-card:hover {
  border-color: var(--white-a15);
  background: var(--white-a5);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.ds-why-card:hover::after {
  opacity: 1;
  transform: scaleX(1);
}
.ds-why-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(20,124,255,0.15), rgba(245,26,164,0.10));
  border: 1px solid rgba(20,124,255,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  font-size: 1.3rem;
  color: var(--color-blue-sky);
}
.ds-why-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white-a95);
  line-height: 1.3;
  margin-bottom: 0.75rem;
}
.ds-why-desc {
  font-size: 0.88rem;
  color: var(--white-a62);
  line-height: 1.75;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   A STRAIGHTFORWARD PROCESS — .ds-process-*
   ═══════════════════════════════════════════════════════════ */
.ds-process-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
}
.ds-process-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.ds-process-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(20,124,255,0.18), rgba(56,189,248,0.12));
  border: 1px solid rgba(20,124,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-blue-sky);
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.ds-process-connector {
  position: absolute;
  top: 32px;
  left: calc(50% + 32px);
  right: calc(-50% + 32px);
  height: 1px;
  background: linear-gradient(90deg, rgba(56,189,248,0.4), rgba(56,189,248,0.08));
}
.ds-process-connector--last {
  display: none;
}
.ds-process-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white-a95);
  margin-bottom: 0.5rem;
  word-spacing: 0.12em;
}
.ds-process-desc {
  font-size: 0.88rem;
  color: var(--white-a62);
  line-height: 1.72;
  max-width: 20ch;
  margin: 0 auto;
}

/* Process step hover — per-step accent colour */
.ds-process-step:nth-child(1):hover .ds-process-icon {
  background: linear-gradient(135deg, rgba(245,26,164,0.28), rgba(245,26,164,0.10));
  border-color: rgba(245,26,164,0.55);
  box-shadow: 0 0 22px rgba(245,26,164,0.35);
  color: var(--color-accent);
  transform: scale(1.1);
}
.ds-process-step:nth-child(1):hover .ds-process-title {
  background: linear-gradient(90deg, var(--color-accent), #ff72c0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ds-process-step:nth-child(2):hover .ds-process-icon {
  background: linear-gradient(135deg, rgba(20,124,255,0.32), rgba(56,189,248,0.16));
  border-color: rgba(20,124,255,0.65);
  box-shadow: 0 0 22px rgba(20,124,255,0.4);
  color: var(--color-blue-accent);
  transform: scale(1.1);
}
.ds-process-step:nth-child(2):hover .ds-process-title {
  background: linear-gradient(90deg, var(--color-blue-accent), var(--color-blue-sky));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ds-process-step:nth-child(3):hover .ds-process-icon {
  background: linear-gradient(135deg, rgba(56,189,248,0.32), rgba(34,211,238,0.14));
  border-color: rgba(56,189,248,0.65);
  box-shadow: 0 0 22px rgba(56,189,248,0.4);
  color: #22d3ee;
  transform: scale(1.1);
}
.ds-process-step:nth-child(3):hover .ds-process-title {
  background: linear-gradient(90deg, var(--color-blue-sky), #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 575.98px) {
  .ds-process-track {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }
  .ds-process-connector {
    display: none;
  }
  .ds-process-step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .ds-process-icon {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .ds-process-desc {
    max-width: none;
    margin: 0;
  }
}

.ds-section-lead {
  font-size: 1.05rem;
  color: var(--white-a78);
  line-height: 1.8;
  max-width: 68ch;
  margin: 0 auto 3rem;
}

/* ── Portfolio cards ── */
.portfolio-card {
  border-radius: 18px;
  overflow: hidden;
  background: var(--white-a5);
  border: 1px solid var(--white-a12);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 35px var(--black-a18);
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.portfolio-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-blue-accent), var(--color-blue-sky));
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1;
}

.portfolio-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-a25);
  background: var(--white-a75);
}

.portfolio-card:hover::after {
  opacity: 1;
}

.portfolio-card-media {
  height: 195px;
  overflow: hidden;
  background: var(--black-a25);
  position: relative;
}

.portfolio-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.35s ease;
}

.portfolio-card:hover .portfolio-card-media img {
  transform: scale(1.05);
}

.portfolio-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--white-a30);
  font-size: 0.85rem;
}

.portfolio-card-placeholder i {
  font-size: 2.5rem;
}

.portfolio-card-body {
  padding: 1.3rem 1.35rem 1.45rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.portfolio-card-industry {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-blue-accent);
  margin-bottom: 0.4rem;
}

.portfolio-card-title {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--white-a95);
  margin-bottom: 0.55rem;
}

.portfolio-card-desc {
  font-size: 0.9rem;
  color: var(--white-a68);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 1rem;
}

.portfolio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0;
}

.portfolio-tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--white-a5);
  border: 1px solid var(--white-a14);
  color: var(--white-a68);
}

/* ── AI capability items ── */
.ai-capability-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem 1.15rem;
  border-radius: 16px;
  background: var(--white-a5);
  border: 1px solid var(--white-a10);
  backdrop-filter: blur(8px);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.ai-capability-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-blue-accent), var(--color-blue-sky));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ai-capability-item:hover {
  border-color: var(--cyan-a25);
  background: var(--white-a75);
  transform: translateY(-2px);
}

.ai-capability-item:hover::after {
  opacity: 1;
}

.ai-capability-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue-sky-a12);
  border: 1px solid var(--blue-sky-a22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--color-blue-accent);
}

.ai-capability-title {
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--white-a92);
  margin-bottom: 0.2rem;
}

.ai-capability-desc {
  font-size: 0.87rem;
  color: var(--white-a62);
  line-height: 1.55;
  margin: 0;
}

/* ── DS Testimonials ── */
.ds-testimonial-card {
  border-radius: 16px;
  padding: 1.75rem 1.6rem;
  background: var(--white-a3);
  border: 1px solid var(--white-a8);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.ds-testimonial-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-blue-accent));
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.ds-testimonial-card:hover {
  border-color: var(--white-a15);
  background: var(--white-a5);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

.ds-testimonial-card:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.ds-testimonial-card--featured {
  border-left: 3px solid var(--color-accent);
  padding-left: 2.1rem;
}

.ds-testimonial-text--cont {
  flex: 0;
  margin-top: 0;
}

.ds-testimonial-stars {
  color: var(--gold-a95);
  font-size: 1rem;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.ds-testimonial-text {
  font-size: 0.96rem;
  color: var(--white-a82);
  line-height: 1.75;
  flex: 1;
  margin-bottom: 1.25rem;
  font-style: italic;
}

.ds-testimonial-author {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--white-a95);
  margin-bottom: 0.15rem;
}

.ds-testimonial-role {
  font-size: 0.8rem;
  color: var(--white-a50);
}

/* ── DS Contact CTA ── */
.ds-cta-section {
  padding: 6rem 1.5rem;
  text-align: center;
  background: var(--color-bg-dark);
  position: relative;
  overflow: hidden;
}

/* Reposition orbs for the CTA section */
.ds-cta-orb--blue { top: auto; bottom: -20%; right: -10%; }
.ds-cta-orb--pink { bottom: auto; top: -20%; left: -6%; }

.ds-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(5,10,24,0.42) 50%, rgba(0,0,0,0.58) 100%);
  z-index: 1;
}

.ds-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
}

.ds-cta-section h2 {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  color: var(--white-a95);
  margin-bottom: 1.1rem;
  line-height: 1.2;
}

.ds-cta-section p {
  font-size: 1.05rem;
  color: var(--white-a72);
  line-height: 1.75;
  margin-bottom: 2.5rem;
}

/* ── Automation feature list ── */
.auto-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem 1.15rem;
  border-radius: 16px;
  background: var(--white-a5);
  border: 1px solid var(--white-a10);
  backdrop-filter: blur(8px);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
  position: relative;
  overflow: hidden;
}

.auto-feature-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-blue-accent));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.auto-feature-item:hover {
  border-color: var(--accent-a28);
  background: var(--white-a75);
  transform: translateY(-2px);
}

.auto-feature-item:hover::after {
  opacity: 1;
}

.auto-feature-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-a12);
  border: 1px solid var(--accent-a28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--color-accent);
}

.auto-feature-title {
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--white-a92);
  margin-bottom: 0.2rem;
}

.auto-feature-desc {
  font-size: 0.87rem;
  color: var(--white-a62);
  line-height: 1.55;
  margin: 0;
}

/* ── Feature tiles ("Every site. No exceptions.") ── */
.ds-feature-tile {
  position: relative;
  border-radius: 20px;
  padding: 2rem 1.5rem 1.75rem;
  background: var(--white-a5);
  border: 1px solid var(--white-a10);
  backdrop-filter: blur(10px);
  overflow: hidden;
  height: 100%;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.ds-feature-tile::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-blue-accent), var(--color-blue-sky));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ds-feature-tile:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-a25);
  background: var(--white-a75);
}

.ds-feature-tile:hover::after {
  opacity: 1;
}

.ds-feature-tile-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--blue-sky-a12), var(--blue-sky-a8));
  border: 1px solid var(--blue-sky-a22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--color-blue-accent);
  margin-bottom: 1.2rem;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.ds-feature-tile:hover .ds-feature-tile-icon {
  background: linear-gradient(135deg, var(--blue-sky-a22), var(--blue-sky-a12));
  box-shadow: 0 0 18px var(--blue-sky-a22);
}

.ds-feature-tile-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white-a95);
  margin-bottom: 0.55rem;
}

.ds-feature-tile-desc {
  font-size: 0.88rem;
  color: var(--white-a68);
  line-height: 1.65;
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .ds-hero-content h1 { font-size: 2.3rem; }
  .ds-hero-lead { font-size: 1rem; }
  .ds-cta-section h2 { font-size: 2rem; }

  /* Orbs: reposition so they're clearly visible on mobile */
  .ds-hero-orb--blue {
    width: 110vw;
    height: 110vw;
    max-width: none;
    max-height: none;
    top: -20%;
    right: -30%;
    filter: blur(45px);
  }
  .ds-hero-orb--pink {
    width: 100vw;
    height: 100vw;
    max-width: none;
    max-height: none;
    bottom: -25%;
    left: -25%;
    filter: blur(45px);
  }
}

/* ── Horizontal accordion (Why custom) ── */

/* ═══════════════════════════════════════════════════════════
   GOLDCREST CODE — standalone Digital Solutions theme
   Preserves the original layout, card system and motion.
   ═══════════════════════════════════════════════════════════ */
:root {
  --color-primary: #111827;
  --color-background: #f8fafc;
  --color-accent: #f3b900;
  --color-accent-hover: #ffd34d;
  --color-text: #0b1020;
  --color-blue-accent: #f3b900;
  --color-blue-light: #ffd34d;
  --color-blue-sky: #f7cb42;
  --color-bg-dark: #070a12;
  --accent-a8: rgba(243, 185, 0, 0.08);
  --accent-a12: rgba(243, 185, 0, 0.12);
  --accent-a28: rgba(243, 185, 0, 0.28);
  --accent-a30: rgba(243, 185, 0, 0.30);
  --blue-sky-a8: rgba(247, 203, 66, 0.08);
  --blue-sky-a10: rgba(247, 203, 66, 0.10);
  --blue-sky-a12: rgba(247, 203, 66, 0.12);
  --blue-sky-a15: rgba(247, 203, 66, 0.15);
  --blue-sky-a20: rgba(247, 203, 66, 0.20);
  --blue-sky-a22: rgba(247, 203, 66, 0.22);
  --blue-sky-a40: rgba(247, 203, 66, 0.40);
}

html { scroll-behavior: smooth; }
main [id] { scroll-margin-top: 100px; }
body {
  background: #070a12;
  color: var(--color-background);
  font-size: 1rem;
  line-height: 1.65;
}
body::selection { background: var(--color-accent); color: #080b12; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

header.hero-nav { background: transparent; }
#navbar {
  height: 88px;
  padding: .85rem clamp(1rem, 3vw, 3rem);
  background: linear-gradient(180deg, rgba(5, 7, 13, .94), rgba(5, 7, 13, .76));
  border-bottom: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(18px);
}
#navbar.scrolled {
  background: rgba(5, 7, 13, .97);
  box-shadow: 0 16px 45px rgba(0,0,0,.28);
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: #fff;
  text-decoration: none;
  min-width: max-content;
}
.brand-mark {
  width: 48px;
  height: 48px;
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(243,185,0,.45);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.brand-mark img {
  width: auto;
  height: 64px;
  max-width: none;
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.brand-name {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: baseline;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
}
.brand-name > span { font-weight: 400; margin-left: .12em; }
.brand-name small {
  grid-column: 1 / -1;
  margin-top: .38rem;
  font-size: .57rem;
  text-align: center;
  letter-spacing: .65em;
  color: var(--color-accent);
}
.nav-items { gap: clamp(.9rem, 1.8vw, 1.7rem); }
.nav-items a { font-size: .88rem; font-weight: 600; letter-spacing: .01em; color: rgba(255,255,255,.78); }
.nav-items a:hover, .nav-items a.active, .nav-items a[aria-current="page"] { color: #fff; }
.nav-items a::after { background: var(--color-accent); }
.nav-items .nav-cta {
  padding: .7rem 1rem;
  border: 1px solid rgba(243,185,0,.65);
  border-radius: 10px;
  color: var(--color-accent);
}
.nav-items .nav-cta::after { display: none; }
.nav-items .nav-cta:hover { color: #090b10; background: var(--color-accent); transform: translateY(-2px); }
.menu-toggle { background: transparent; border: 0; padding: .5rem; }
.menu-toggle span { background: var(--color-accent); }
.mobile-menu {
  background: rgba(7, 10, 18, .98);
  border-left: 1px solid rgba(243,185,0,.22);
  width: min(320px, 88vw);
}
.mobile-menu a { color: rgba(255,255,255,.85); transition: color .2s ease, transform .2s ease; }
.mobile-menu a:hover { color: var(--color-accent); transform: translateX(4px); }

.ds-hero {
  background: #070a12;
  padding-top: 8rem;
}
.ds-hero::before {
  display: none;
}
.ds-hero-orb--blue {
  background: radial-gradient(circle, rgba(243,185,0,.48) 0%, rgba(243,185,0,.14) 50%, transparent 70%);
}
.ds-hero-orb--pink {
  background: radial-gradient(circle, rgba(110,123,151,.35) 0%, rgba(73,84,107,.12) 52%, transparent 70%);
}
.ds-hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(5,8,15,.5) 55%, rgba(0,0,0,.7)); }
.blue-accent { color: var(--color-accent) !important; }
.glow-pulse { text-shadow: 0 0 30px rgba(243,185,0,.22); }
.ds-hero-card, .ds-hero-accord-btn, .ds-hero-accord-body {
  border-color: rgba(243,185,0,.18);
  background: rgba(255,255,255,.045);
}
.ds-hero-card::after, .ds-hero-accord-btn::after,
.ds-cap-card::after, .ds-cap-card--accent::after,
.auto-feature-item::after, .pf-card::after, .ds-why-card::after,
.ds-testimonial-card::after {
  background: linear-gradient(90deg, var(--color-accent), #fff0a6);
}

.cta {
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.cta.primary {
  background: linear-gradient(135deg, #f3b900, #ffd65b);
  color: #090b10;
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(243,185,0,.18);
}
.cta.primary:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(243,185,0,.3); background: linear-gradient(135deg, #ffd65b, #f3b900); color: #090b10; }
.cta.secondary { border-color: rgba(255,255,255,.28); color: #fff; background: rgba(255,255,255,.04); }
.cta.secondary:hover { transform: translateY(-3px); border-color: var(--color-accent); color: var(--color-accent); background: rgba(243,185,0,.06); }

.ds-what-section { background: linear-gradient(160deg, #0b101b 0%, #070a12 100%); }
.ds-portfolio-section { background: linear-gradient(160deg, #070a12 0%, #0b101b 100%); }
.problem-section { border-top: 1px solid rgba(243,185,0,.15); }
.problem-stat-card,
.profile-mini-card,
.work-preview-card {
  position: relative;
  display: block;
  height: 100%;
  padding: 1.6rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  color: rgba(255,255,255,.75);
  text-decoration: none;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.problem-stat-card::after, .profile-mini-card::after, .work-preview-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), #fff0a6);
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: left;
  transition: opacity .3s ease, transform .3s ease;
}
.problem-stat-card:hover, .profile-mini-card:hover, .work-preview-card:hover {
  transform: translateY(-6px);
  border-color: rgba(243,185,0,.32);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
}
.problem-stat-card:hover::after, .profile-mini-card:hover::after, .work-preview-card:hover::after { opacity: 1; transform: scaleX(1); }
.problem-stat { display: block; color: var(--color-accent); font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 700; line-height: 1; margin-bottom: 1.25rem; }
.problem-stat-card h3, .profile-mini-card h3, .work-preview-card h3 { color: #fff; font-size: 1.18rem; font-weight: 700; margin-bottom: .7rem; }
.problem-stat-card p, .profile-mini-card p, .work-preview-card p { color: rgba(255,255,255,.61); font-size: .9rem; line-height: 1.7; margin-bottom: 1rem; }
.problem-stat-card a, .text-link { color: var(--color-accent); font-size: .85rem; font-weight: 700; text-decoration: none; }
.problem-stat-card a:hover, .text-link:hover { color: #ffe28a; }
.profile-mini-card > span, .work-preview-card > div > span { color: var(--color-accent); text-transform: uppercase; letter-spacing: .16em; font-size: .69rem; font-weight: 700; }
.profile-mini-card { min-height: 280px; }
.profile-mini-card h3 { margin-top: 1.5rem; }

.work-preview-card { padding: 0; }
.work-preview-card > img, .work-preview-placeholder { width: 100%; height: 220px; object-fit: contain; display: block; padding: .4rem; border-bottom: 1px solid rgba(255,255,255,.08); background: #0a101b; transition: transform .6s ease; }
.work-preview-card:hover > img { transform: scale(1.035); }
.work-preview-card > div:not(.work-preview-placeholder) { padding: 1.4rem; }
.work-preview-card h3 { margin-top: .45rem; }
.work-preview-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .8rem;
  color: #15110a;
  background: linear-gradient(135deg, #f3b900, #ffdf77);
}
.work-preview-placeholder i { font-size: 2.5rem; }
.work-preview-placeholder strong { font-size: 1.1rem; letter-spacing: .04em; }

.ds-cap-card { min-height: 310px; padding: 2rem 1.75rem; }
.ds-cap-card:hover, .auto-feature-item:hover { border-color: rgba(243,185,0,.25); background: rgba(255,255,255,.075); }
.ds-cap-icon, .ds-cap-icon--accent, .auto-feature-icon {
  color: var(--color-accent);
  background: rgba(243,185,0,.1);
  border-color: rgba(243,185,0,.24);
}
.ds-process-icon { color: var(--color-accent); background: rgba(243,185,0,.1); border-color: rgba(243,185,0,.28); }
.ds-process-connector { background: linear-gradient(90deg, rgba(243,185,0,.48), rgba(243,185,0,.08)); }
.ds-process-step:hover .ds-process-icon { color: #090b10 !important; background: var(--color-accent) !important; border-color: var(--color-accent) !important; box-shadow: 0 0 24px rgba(243,185,0,.3) !important; }
.ds-process-step:hover .ds-process-title { color: var(--color-accent) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.contact-layer { position: relative; z-index: 2; }
.party-form-wrap { border-color: rgba(243,185,0,.2); background: rgba(7,10,18,.72); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.form-control, .form-select { min-height: 48px; }
.form-control:focus, .form-select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 .25rem rgba(243,185,0,.14); }
.form-check a { color: var(--color-accent); }
.form-success-icon { color: var(--color-accent); font-size: 3rem; }

.page-hero {
  min-height: 58vh;
  padding: 10rem 1.5rem 5rem;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 75% 15%, rgba(243,185,0,.18), transparent 30%), linear-gradient(145deg, #070a12, #101725 58%, #070a12);
}
.page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), transparent 65%); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { max-width: 13ch; color: #fff; font-size: clamp(2.55rem, 5.4vw, 4.8rem); line-height: .98; letter-spacing: -.035em; font-weight: 700; }
.page-hero p { max-width: 62ch; color: rgba(255,255,255,.68); font-size: 1.05rem; line-height: 1.8; }
.page-kicker { color: var(--color-accent); font-size: .75rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 1rem; display: block; }

.portfolio-grid .pf-card { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.portfolio-grid .pf-card:hover { transform: translateY(-6px); border-color: rgba(243,185,0,.28); }
.portfolio-placeholder { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #17130b, #f3b900); color: #fff; font-weight: 700; font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: .03em; }
.case-study { padding: 2rem; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; background: rgba(255,255,255,.035); }
.case-study + .case-study { margin-top: 2rem; }
.case-study h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.case-study h3 { color: var(--color-accent); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.case-study p, .case-study li { color: rgba(255,255,255,.7); }
.case-study img { width: 100%; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); }
.case-study ul { padding-left: 1.2rem; }

.legal-section { background: linear-gradient(160deg, #0b101b, #070a12); padding: 5rem 0; }
.legal-content { max-width: 900px; margin: 0 auto; color: rgba(255,255,255,.72); }
.legal-content h2 { color: #fff; font-size: 1.55rem; margin: 2.6rem 0 1rem; }
.legal-content h3 { color: #f7d66e; font-size: 1.05rem; margin: 1.6rem 0 .7rem; }
.legal-content p, .legal-content li { line-height: 1.8; }
.legal-content a { color: var(--color-accent); }
.legal-content .legal-summary { padding: 1.4rem 1.5rem; border-left: 3px solid var(--color-accent); background: rgba(243,185,0,.06); border-radius: 0 12px 12px 0; color: rgba(255,255,255,.82); }
.legal-meta { color: rgba(255,255,255,.48); font-size: .85rem; }
.legal-table { width: 100%; border-collapse: collapse; margin: 1.3rem 0; }
.legal-table th, .legal-table td { padding: .9rem; border: 1px solid rgba(255,255,255,.12); vertical-align: top; }
.legal-table th { color: #fff; background: rgba(255,255,255,.05); }

.footer-section { background: #05070d; border-top: 1px solid rgba(243,185,0,.16); padding: 4.5rem 0 1.5rem; }
.footer-brand { margin-bottom: 1.3rem; }
.footer-intro { max-width: 52ch; color: rgba(255,255,255,.58); }
.company-details { color: rgba(255,255,255,.42); font-size: .8rem; line-height: 1.7; }
.footer-section h2 { color: #fff; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-section ul { list-style: none; padding: 0; margin: 0; }
.footer-section li { margin-bottom: .55rem; }
.footer-section a { color: rgba(255,255,255,.58); text-decoration: none; transition: color .2s ease, transform .2s ease; }
.footer-section li a { display: inline-block; }
.footer-section li a:hover { color: var(--color-accent); transform: translateX(4px); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.4rem; margin-top: 3rem; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.35); font-size: .76rem; }

@media (max-width: 991.98px) {
  .nav-item-container { display: none; }
  .menu-toggle { display: flex; }
  .brand-name { font-size: .78rem; }
  .page-hero { min-height: 52vh; }
}
@media (max-width: 575.98px) {
  #navbar { height: 76px; padding-inline: 1rem; }
  .brand-mark { width: 42px; height: 42px; }
  .brand-name { font-size: .7rem; letter-spacing: .08em; }
  .ds-hero { padding-top: 7rem; }
  .ds-section { padding: 4rem 0; }
  .page-hero { padding-top: 8rem; }
  .page-hero h1 { font-size: 2.45rem; }
  .footer-bottom { flex-direction: column; }
  .case-study { padding: 1.3rem; }
  .legal-table { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ds-sr { opacity: 1 !important; transform: none !important; }
  .ds-hero::before { animation: none !important; }
}

/* ==========================================================
   Premium refinement
   ========================================================== */

/* Navigation */
.brand-mark {
  width: 46px;
  height: 50px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.brand-mark img {
  width: 46px;
  height: 48px;
  max-width: 46px;
  object-fit: contain;
  position: static;
  transform: none;
  filter: drop-shadow(0 8px 18px rgba(243, 185, 0, .18));
}

/* Main hero */
.ds-hero {
  isolation: isolate;
  background: #070a12;
}

.ds-hero-media {
  display: none;
}

.ds-hero::before {
  display: none;
}

.ds-hero-card {
  background: #101725;
  border-color: rgba(243, 185, 0, .2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hero-trust-line {
  margin: 1.2rem auto 0;
  color: rgba(255, 255, 255, .58);
  font-size: .82rem;
  letter-spacing: .035em;
}

/* Section rhythm */
.ds-what-section {
  background:
    radial-gradient(circle at 10% 15%, rgba(87, 111, 154, .12), transparent 32%),
    linear-gradient(155deg, #101725 0%, #0a101c 100%);
}

.ds-portfolio-section {
  background:
    radial-gradient(circle at 88% 20%, rgba(243, 185, 0, .06), transparent 30%),
    linear-gradient(155deg, #080c14 0%, #0d1421 100%);
}

/* Home section surfaces */
#services {
  background:
    radial-gradient(ellipse at 92% 8%, rgba(243, 185, 0, .1), transparent 32%),
    radial-gradient(ellipse at 5% 90%, rgba(94, 115, 149, .12), transparent 34%),
    linear-gradient(145deg, #0a0e16 0%, #151d2b 54%, #0b1019 100%);
}

#approach {
  color: #171c28;
  background:
    radial-gradient(ellipse at 88% 18%, rgba(243, 185, 0, .13), transparent 30%),
    radial-gradient(ellipse at 8% 88%, rgba(101, 121, 151, .12), transparent 32%),
    linear-gradient(145deg, #eef1f5 0%, #faf9f4 52%, #e7ebf0 100%);
}

#approach .ds-hero-eyebrow,
#approach .blue-accent { color: #806000 !important; }
#approach .ds-what-heading { color: #111827; }
#approach .ds-section-lead { color: #4f5868; }
#approach .auto-feature-item {
  border-color: rgba(17, 24, 39, .1);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 20px 55px rgba(25, 34, 49, .08);
  backdrop-filter: none;
}
#approach .auto-feature-item:hover {
  border-color: rgba(128, 96, 0, .3);
  background: #fff;
  box-shadow: 0 26px 65px rgba(25, 34, 49, .13);
}
#approach .auto-feature-title { color: #111827; }
#approach .auto-feature-desc { color: #5a6373; }
#approach .auto-feature-icon {
  color: #806000;
  background: rgba(243, 185, 0, .12);
  border-color: rgba(128, 96, 0, .22);
}

#selected-work {
  background:
    radial-gradient(ellipse at 12% 20%, rgba(79, 101, 139, .14), transparent 34%),
    radial-gradient(ellipse at 88% 82%, rgba(243, 185, 0, .07), transparent 30%),
    linear-gradient(150deg, #0b111c 0%, #162132 52%, #0a0f18 100%);
}

#process {
  background:
    radial-gradient(ellipse at 50% 16%, rgba(243, 185, 0, .085), transparent 31%),
    linear-gradient(180deg, #0d131e 0%, #080c13 100%);
}

#contact {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(243, 185, 0, .14), transparent 34%),
    radial-gradient(ellipse at 86% 100%, rgba(81, 106, 151, .18), transparent 36%),
    linear-gradient(145deg, #0d1522 0%, #070b12 58%, #111827 100%);
}
#contact .ds-hero-overlay {
  background: linear-gradient(180deg, rgba(4, 7, 13, .08), rgba(4, 7, 13, .38));
}

.problem-section {
  color: #151a25;
  background:
    radial-gradient(circle at 90% 5%, rgba(243, 185, 0, .15), transparent 25%),
    linear-gradient(145deg, #f6f4ed 0%, #ebe9e2 100%);
  border-top: 0;
}

.problem-section .ds-hero-eyebrow,
.problem-section .blue-accent { color: #8a6800 !important; }
.problem-section .ds-what-heading { color: #101522; }
.problem-section .ds-what-subtext { color: #4e5564; }

.problem-section .problem-stat-card {
  border-color: rgba(20, 27, 43, .1);
  background: rgba(255, 255, 255, .74);
  color: #303747;
  box-shadow: 0 24px 70px rgba(19, 25, 38, .08);
}

.problem-section .problem-stat-card:hover {
  border-color: rgba(138, 104, 0, .36);
  background: #fff;
  box-shadow: 0 30px 75px rgba(19, 25, 38, .14);
}

.problem-section .problem-stat { color: #8a6800; }
.problem-section .problem-stat-card h3 { color: #111827; }
.problem-section .problem-stat-card p { color: #545c6b; }
.problem-section .problem-stat-card a { color: #745800; }

/* AI-assisted engineering */
.ai-engineering-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  border-block: 1px solid rgba(243, 185, 0, .14);
  background:
    radial-gradient(circle at 88% 44%, rgba(243, 185, 0, .12), transparent 30%),
    linear-gradient(145deg, #090d15 0%, #111824 56%, #070a10 100%);
}

.ai-engineering-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000);
  mask-image: linear-gradient(90deg, transparent 35%, #000);
}

.ai-engineering-section .container { position: relative; z-index: 1; }
.ai-engineering-section .ds-what-heading { max-width: 16ch; }

.ai-engineering-copy {
  max-width: 64ch;
  margin-bottom: 0;
  color: rgba(255, 255, 255, .7);
  font-size: 1rem;
  line-height: 1.8;
}

.ai-proof-grid { display: grid; gap: .8rem; }

.ai-proof-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.25rem;
  border: 1px solid rgba(243, 185, 0, .18);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.ai-proof-card:hover {
  transform: translateY(-4px);
  border-color: rgba(243, 185, 0, .5);
  background: rgba(255, 255, 255, .055);
  box-shadow: 0 24px 58px rgba(0, 0, 0, .28);
}

.ai-proof-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--color-accent);
  font-size: 1.1rem;
  border: 1px solid rgba(243, 185, 0, .3);
  border-radius: 11px;
  background: rgba(243, 185, 0, .07);
}

.ai-proof-card h3 {
  margin: 0 0 .35rem;
  color: #fff;
  font-size: 1rem;
}

.ai-proof-card p {
  margin: 0;
  color: rgba(255, 255, 255, .58);
  font-size: .86rem;
  line-height: 1.65;
}

#about.ds-what-section {
  color: #171c28;
  background:
    radial-gradient(circle at 15% 85%, rgba(243, 185, 0, .12), transparent 28%),
    linear-gradient(145deg, #eef1f5 0%, #f8f7f2 100%);
}

#about .ds-hero-eyebrow,
#about .blue-accent,
#about .text-link { color: #806000 !important; }
#about .ds-what-heading { color: #111827; }
#about .ds-section-lead { color: #4b5565; }
#about .profile-mini-card {
  border-color: rgba(17, 24, 39, .1);
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 20px 60px rgba(20, 26, 38, .08);
}
#about .profile-mini-card:hover { border-color: rgba(128, 96, 0, .32); background: #fff; }
#about .profile-mini-card > span { color: #806000; }
#about .profile-mini-card h3 { color: #111827; }
#about .profile-mini-card p { color: #596172; }

/* Page heroes */
.page-hero {
  min-height: 62vh;
  isolation: isolate;
  background: #0b101b;
}

.page-hero-media,
.page-hero--legal::before {
  display: none;
}

.page-hero::after {
  display: none;
}

.page-hero .container { z-index: 2; }
.page-hero h1 { text-shadow: none; }
.page-hero p { color: rgba(255, 255, 255, .8); }
.page-hero .cta-buttons { justify-content: flex-start; margin-top: 2rem; }

/* Portfolio */
.pf-card { box-shadow: 0 24px 70px rgba(0, 0, 0, .2); }
.pf-card-carousel {
  aspect-ratio: 2.22 / 1;
  overflow: hidden;
  background: #0a101b;
}
.pf-card-carousel .carousel,
.pf-card-carousel .carousel-inner,
.pf-card-carousel .carousel-item { height: 100%; }
.pf-card-carousel .carousel-item { background: #0a101b; }
.pf-card-carousel .carousel-item img {
  width: 100%;
  height: 100%;
  padding: clamp(.25rem, .6vw, .5rem);
  object-fit: contain;
  object-position: center;
}
.pf-card-carousel .carousel-control-prev,
.pf-card-carousel .carousel-control-next {
  width: 48px;
  height: 48px;
  top: 50%;
  bottom: auto;
  margin: 0 .8rem;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
  background: rgba(5, 8, 15, .72);
  opacity: 0;
  transition: opacity .25s ease, background .25s ease, transform .25s ease;
}
.pf-card:hover .carousel-control-prev,
.pf-card:hover .carousel-control-next,
.pf-card:focus-within .carousel-control-prev,
.pf-card:focus-within .carousel-control-next { opacity: 1; }
.pf-card-carousel .carousel-control-prev:hover,
.pf-card-carousel .carousel-control-next:hover { background: rgba(243, 185, 0, .9); transform: translateY(-50%) scale(1.05); }
.pf-card-carousel .carousel-indicators { margin-bottom: .85rem; }
.pf-card-carousel .carousel-indicators [data-bs-target] {
  width: 24px;
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .66);
}
.pf-card-carousel .carousel-indicators .active { background: var(--color-accent); }

.pf-links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1rem; }

/* Case studies */
.case-study {
  scroll-margin-top: 110px;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-color: rgba(255, 255, 255, .1);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025));
  box-shadow: 0 28px 85px rgba(0, 0, 0, .22);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.case-study + .case-study { margin-top: 2.5rem; }
.case-study:hover { transform: translateY(-4px); border-color: rgba(243, 185, 0, .24); box-shadow: 0 36px 95px rgba(0, 0, 0, .3); }
.case-study--featured { border-color: rgba(243, 185, 0, .2); }

.case-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
.case-gallery img {
  width: 100%;
  aspect-ratio: 2.22 / 1;
  padding: .35rem;
  object-fit: contain;
  object-position: center;
  background: #0a101b;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

/* Supplied portfolio captures keep their intrinsic widescreen ratio. */
.case-gallery img[width][height] {
  height: auto;
  aspect-ratio: auto;
  padding: 0;
  object-fit: initial;
  background: transparent;
}

.case-gallery img:nth-child(2) { transform: none; }

.client-quote {
  margin: 1.7rem 0;
  padding: 1.25rem 1.35rem;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 12px 12px 0;
  background: rgba(243, 185, 0, .07);
}
.client-quote p { margin-bottom: .65rem; color: rgba(255, 255, 255, .84); font-size: 1rem; }
.client-quote p + p { margin-top: .85rem; }
.client-quote cite { color: var(--color-accent); font-size: .78rem; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.case-study--story { border-color: rgba(243, 185, 0, .22); }
/* Hover and focus consistency */
.pf-card,
.pf-featured,
.ds-cap-card,
.auto-feature-item,
.ds-why-card,
.party-form-wrap { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.pf-featured:hover,
.ds-cap-card:hover,
.auto-feature-item:hover,
.ds-why-card:hover { transform: translateY(-5px); box-shadow: 0 28px 78px rgba(0, 0, 0, .28); }
.text-link { display: inline-block; transition: color .2s ease, transform .2s ease; }
.text-link:hover { transform: translateX(3px); }

/* Responsive */
@media (max-width: 991.98px) {
  .page-hero { min-height: 56vh; }
  .case-gallery { margin-bottom: 1rem; }
}

@media (max-width: 575.98px) {
  .brand-mark,
  .brand-mark img { width: 40px; height: 43px; }
  .ds-hero-media { inset: -2%; }
  .page-hero { min-height: 60vh; padding-inline: 1rem; }
  .page-hero h1 { font-size: clamp(2.25rem, 10.5vw, 2.85rem); }
  .pf-card-carousel .carousel-control-prev,
  .pf-card-carousel .carousel-control-next { opacity: 1; width: 42px; height: 42px; margin-inline: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-hero-media,
  .page-hero-media { display: none !important; }
}

/* ==========================================================
   Intelligent hero
   ========================================================== */

.ds-hero {
  min-height: 100svh;
  align-items: stretch;
  padding: 7.25rem clamp(1rem, 3vw, 3.5rem) 1.6rem;
  background:
    radial-gradient(ellipse at 76% 48%, rgba(243, 185, 0, .065), transparent 33%),
    radial-gradient(ellipse at 42% 55%, rgba(104, 121, 151, .08), transparent 42%),
    linear-gradient(145deg, #05070c 0%, #090d14 55%, #05070b 100%);
}

.ds-hero-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 49.95%, rgba(255, 255, 255, .025) 50%, transparent 50.05%),
    linear-gradient(180deg, transparent 0 82%, rgba(243, 185, 0, .07) 82.1%, transparent 82.2%);
}

.ds-hero-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: min(100%, 1500px);
  min-height: calc(100svh - 8.85rem);
  margin: 0 auto;
}

.ds-hero-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  min-height: 0;
}

.ds-hero-content {
  max-width: 740px;
  text-align: left;
}

.ds-hero-content h1 {
  max-width: 12.5ch;
  margin-bottom: 1.35rem;
  font-size: clamp(3.1rem, 4.55vw, 4.65rem);
  line-height: .99;
  letter-spacing: -.045em;
}

.ds-hero-content h1 .blue-accent {
  margin-top: .12em;
}

.ds-hero-lead {
  max-width: 58ch;
  margin: 0 0 2rem;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.75;
}

.ds-hero-content .cta-buttons {
  justify-content: flex-start;
}

.hero-trust-line {
  margin: 1.35rem 0 0;
  color: rgba(243, 185, 0, .78);
  font-size: .8rem;
  letter-spacing: .025em;
}

/* Hero sculpture and technical reveal */
.ds-hero-visual {
  --scan-x: 48%;
  --scan-y: 43%;
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 420px;
  cursor: crosshair;
}

.ds-hero-visual::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 7.5%;
  width: min(84%, 560px);
  height: 12%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(242, 197, 89, .17), rgba(55, 61, 73, .08) 48%, transparent 72%);
  filter: blur(12px);
  pointer-events: none;
}

.ds-bird-stage {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  height: clamp(480px, 61vh, 720px);
}

.ds-bird-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 26px 36px rgba(0, 0, 0, .36));
}

.ds-bird-image--xray {
  z-index: 2;
  opacity: 0;
  clip-path: circle(0 at var(--scan-x) var(--scan-y));
  transition: opacity .18s ease, clip-path .28s cubic-bezier(.22, 1, .36, 1);
  filter: drop-shadow(0 0 18px rgba(243, 185, 0, .12));
}

.ds-hero-visual.is-active .ds-bird-image--xray {
  opacity: 1;
  clip-path: circle(clamp(86px, 9vw, 132px) at var(--scan-x) var(--scan-y));
}

.ds-bird-scan {
  position: absolute;
  z-index: 3;
  left: var(--scan-x);
  top: var(--scan-y);
  width: clamp(172px, 18vw, 264px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 215, 108, .52);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.82);
  transition: opacity .18s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
  box-shadow: inset 0 0 24px rgba(243, 185, 0, .08), 0 0 28px rgba(243, 185, 0, .09);
  pointer-events: none;
}

.ds-bird-scan::before,
.ds-bird-scan::after {
  content: '';
  position: absolute;
  background: rgba(255, 221, 128, .78);
  box-shadow: 0 0 12px rgba(243, 185, 0, .35);
}

.ds-bird-scan::before {
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
}

.ds-bird-scan::after {
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 1px;
}

.ds-hero-visual.is-active .ds-bird-scan {
  opacity: .78;
  transform: translate(-50%, -50%) scale(1);
}

.ds-bird-hint {
  position: absolute;
  z-index: 4;
  right: 3%;
  bottom: 2.5%;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  color: rgba(255, 255, 255, .42);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .2s ease;
}

.ds-hero-visual:hover .ds-bird-hint {
  color: rgba(243, 185, 0, .8);
}

@keyframes ds-bird-in {
  from { opacity: 0; translate: 36px 18px; }
  to { opacity: 1; translate: 0 0; }
}

.ds-anim-bird {
  animation: ds-bird-in 1s cubic-bezier(.22, 1, .36, 1) .55s both;
}

.ds-anim-cards {
  animation-delay: 2.05s;
}

/* Hero service rail */
.ds-hero-service-rail {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(243, 185, 0, .18);
}

@keyframes ds-card-rail-in {
  from { opacity: 0; translate: 0 30px; }
  to { opacity: 1; translate: 0 0; }
}

.ds-hero-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: .85rem;
  width: auto;
  min-height: 112px;
  padding: 1rem 1.05rem;
  color: #fff;
  text-decoration: none;
  background: #0d121c;
  border: 1px solid rgba(243, 185, 0, .24);
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
  overflow: hidden;
  animation: ds-card-rail-in .64s cubic-bezier(.22, 1, .36, 1) 1.65s backwards;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.ds-hero-card:nth-child(2) { animation-delay: 1.78s; }
.ds-hero-card:nth-child(3) { animation-delay: 1.91s; }
.ds-hero-card:nth-child(4) { animation-delay: 2.04s; }

.ds-hero-card:hover,
.ds-hero-card:focus-visible {
  transform: translateY(-5px);
  color: #fff;
  border-color: rgba(243, 185, 0, .62);
  background: #121925;
  box-shadow: 0 25px 58px rgba(0, 0, 0, .34), 0 0 0 1px rgba(243, 185, 0, .08);
}

.ds-hero-card::after {
  height: 2px;
  opacity: .32;
  background: linear-gradient(90deg, var(--color-accent), rgba(255, 240, 166, .88));
}

.ds-hero-card:hover::after,
.ds-hero-card:focus-visible::after {
  opacity: 1;
}

.ds-hero-card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--color-accent);
  font-size: 1.18rem;
  border: 1px solid rgba(243, 185, 0, .3);
  border-radius: 10px;
  background: rgba(243, 185, 0, .06);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.ds-hero-card:hover .ds-hero-card-icon,
.ds-hero-card:focus-visible .ds-hero-card-icon {
  color: #080b10;
  background: var(--color-accent);
  transform: translateY(-2px);
}

.ds-hero-card strong,
.ds-hero-card small {
  display: block;
}

.ds-hero-card strong {
  margin: .1rem 0 .35rem;
  color: rgba(255, 255, 255, .96);
  font-size: .92rem;
  line-height: 1.25;
}

.ds-hero-card small {
  color: rgba(255, 255, 255, .55);
  font-size: .76rem;
  line-height: 1.5;
}

/* Consistent premium surfaces */
.page-hero {
  border-bottom: 1px solid rgba(243, 185, 0, .16);
  background:
    radial-gradient(ellipse at 82% 26%, rgba(243, 185, 0, .09), transparent 30%),
    radial-gradient(ellipse at 14% 78%, rgba(95, 112, 145, .12), transparent 34%),
    linear-gradient(145deg, #080b12 0%, #111824 56%, #070a10 100%);
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .024) 50%, transparent);
}

#services .ds-cap-card,
#selected-work .work-preview-card,
#process .ds-process-step,
.pf-card,
.case-study {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 24px 70px rgba(0, 0, 0, .18);
}

@media (max-width: 1199.98px) {
  .ds-hero {
    padding-bottom: 3rem;
  }

  .ds-hero-shell {
    min-height: auto;
  }

  .ds-hero-stage {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr);
  }

  .ds-hero-content h1 {
    font-size: clamp(2.7rem, 5.1vw, 4.05rem);
  }

  .ds-bird-stage {
    height: clamp(420px, 54vh, 590px);
  }

  .ds-hero-accordions {
    margin-top: 1.4rem;
    margin-bottom: 0;
  }
}

@media (max-width: 767.98px) {
  .ds-hero {
    padding: 6.5rem 1rem 2.5rem;
  }

  .ds-hero-stage {
    grid-template-columns: 1fr;
    gap: .25rem;
  }

  .ds-hero-content {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
  }

  .ds-hero-content h1 {
    max-width: 12ch;
    margin-inline: auto;
    font-size: clamp(2.6rem, 12vw, 3.55rem);
    line-height: 1.02;
  }

  .ds-hero-lead {
    margin-inline: auto;
  }

  .ds-hero-content .cta-buttons {
    justify-content: center;
  }

  .hero-trust-line {
    margin-inline: auto;
  }

  .ds-hero-visual {
    min-height: 350px;
  }

  .ds-bird-stage {
    width: min(86vw, 360px);
    height: 440px;
  }

  .ds-bird-hint {
    right: 50%;
    bottom: .25rem;
    width: max-content;
    transform: translateX(50%);
  }

  .ds-hero-accordions {
    width: min(100%, 560px);
  }
}

@media (max-width: 420px) {
  .ds-hero-content h1 {
    font-size: clamp(2.35rem, 11.7vw, 3rem);
  }

  .ds-hero-eyebrow {
    font-size: .68rem;
    letter-spacing: .16em;
  }

  .ds-bird-stage {
    height: 380px;
  }

  .ds-hero-visual {
    min-height: 310px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-anim-bird,
  .ds-hero-card {
    animation: none !important;
  }

  .ds-bird-image--xray,
  .ds-bird-scan {
    transition: none !important;
  }
}

/* ==========================================================
   Final hero sizing, brand assets and intelligence lens
   ========================================================== */

/* Brand artwork */
.brand-logo {
  display: block;
  width: auto;
  object-fit: contain;
}

.brand-logo--inline {
  width: clamp(210px, 21vw, 282px);
  height: auto;
  max-height: 44px;
  filter: drop-shadow(0 8px 20px rgba(243, 185, 0, .12));
}

.footer-brand {
  width: fit-content;
}

.brand-logo--stacked {
  width: min(260px, 72vw);
  height: auto;
  filter: drop-shadow(0 14px 30px rgba(243, 185, 0, .1));
}

/* Full-viewport main hero */
.ds-hero {
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  padding: 6.75rem clamp(1rem, 3vw, 3.5rem) 1rem;
  overflow: hidden;
}

.ds-hero-shell {
  height: calc(100svh - 7.75rem);
  min-height: 0;
}

.ds-bird-stage {
  height: clamp(380px, 55vh, 650px);
}

.ds-hero-card {
  min-height: 100px;
  padding-block: .85rem;
}

/* Non-violent technical inspection lens */
.ds-hero-visual {
  cursor: pointer;
}

.ds-bird-scan {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: clamp(150px, 15vw, 218px);
  aspect-ratio: 1.18;
  padding: .8rem;
  border: 1px solid rgba(255, 216, 111, .5);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(17, 24, 36, .36), rgba(243, 185, 0, .055));
  box-shadow: inset 0 0 30px rgba(243, 185, 0, .055), 0 14px 34px rgba(0, 0, 0, .2);
}

.ds-bird-scan::before,
.ds-bird-scan::after {
  content: none;
}

.ds-bird-scan-label {
  max-width: calc(100% - 1.75rem);
  color: rgba(255, 231, 161, .78);
  font-size: .56rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.ds-bird-scan > i {
  color: rgba(255, 220, 124, .86);
  font-size: 1.05rem;
  filter: drop-shadow(0 0 10px rgba(243, 185, 0, .34));
}

/* Full-viewport secondary heroes */
.page-hero--portfolio,
.page-hero--case-studies,
.page-hero--about {
  height: 100svh;
  min-height: 100svh;
  padding: 7.5rem 1.5rem 2rem;
  isolation: isolate;
}

.page-hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-hero--case-studies .page-hero-art img {
  object-fit: cover;
}

.page-hero--portfolio::before,
.page-hero--case-studies::before,
.page-hero--about::before {
  z-index: 1;
  background: linear-gradient(90deg, rgba(4, 6, 10, .3) 0%, rgba(4, 6, 10, .14) 48%, rgba(4, 6, 10, .02) 76%);
}

.page-hero--portfolio::after,
.page-hero--case-studies::after,
.page-hero--about::after {
  z-index: 2;
  background: linear-gradient(90deg, rgba(3, 5, 9, .76) 0%, rgba(3, 5, 9, .46) 44%, rgba(3, 5, 9, .06) 70%);
}

.page-hero--portfolio .container,
.page-hero--case-studies .container,
.page-hero--about .container {
  z-index: 3;
}

/* Short desktop viewports */
@media (min-width: 1200px) and (max-height: 860px) {
  .ds-hero {
    padding-top: 6rem;
    padding-bottom: .7rem;
  }

  .ds-hero-shell {
    height: calc(100svh - 6.7rem);
  }

  .ds-hero-stage {
    gap: clamp(1.5rem, 3.4vw, 4rem);
  }

  .ds-hero-content h1 {
    margin-bottom: .85rem;
    font-size: clamp(2.65rem, 4.05vw, 4.1rem);
  }

  .ds-hero-lead {
    margin-bottom: 1.1rem;
    line-height: 1.55;
  }

  .hero-trust-line {
    margin-top: .8rem;
  }

  .ds-bird-stage {
    height: clamp(350px, 52vh, 490px);
  }

  .ds-hero-service-rail {
    padding-top: .7rem;
  }

  .ds-hero-card {
    min-height: 90px;
    padding: .7rem .85rem;
  }
}

/* Tablet hero fit */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .ds-hero {
    padding: 6.4rem 1.4rem .8rem;
  }

  .ds-hero-shell {
    height: calc(100svh - 7.2rem);
  }

  .ds-hero-accordions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    width: 100%;
    margin-top: .7rem;
  }

  .ds-hero-accord {
    margin: 0;
  }

  .ds-hero-accord-btn {
    min-height: 48px;
  }
}

/* Mobile hero fit */
@media (max-width: 767.98px) {
  .brand-logo--inline {
    width: clamp(182px, 53vw, 224px);
    max-height: 34px;
  }

  .ds-hero {
    padding: 5.35rem 1rem .65rem;
  }

  .ds-hero-shell {
    height: calc(100svh - 6rem);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .ds-hero-stage {
    align-content: center;
    gap: 0;
  }

  .ds-hero-content h1 {
    margin-bottom: .7rem;
    font-size: clamp(1.95rem, 8.5vw, 2.45rem);
  }

  .ds-hero-lead {
    margin-bottom: .85rem;
    font-size: .88rem;
    line-height: 1.48;
  }

  .ds-hero-content .cta-buttons {
    flex-wrap: nowrap;
    gap: .55rem;
  }

  .ds-hero-content .cta {
    padding: .72rem .8rem;
    font-size: .77rem;
  }

  .hero-trust-line {
    margin-top: .65rem;
    font-size: .65rem;
  }

  .ds-hero-visual {
    min-height: 150px;
  }

  .ds-bird-stage {
    width: min(52vw, 205px);
    height: clamp(150px, 21vh, 190px);
  }

  .ds-bird-image {
    transform: scale(1.16);
    transform-origin: center;
  }

  .ds-bird-hint {
    display: none;
  }

  .ds-hero-accordions {
    align-self: end;
    justify-self: center;
    gap: .35rem;
    width: 100%;
    max-width: 100%;
    margin: .35rem 0 0;
  }

  .ds-hero-accord {
    margin: 0;
  }

  .ds-hero-accord-btn {
    min-height: 39px;
    padding: .55rem .75rem;
    font-size: .76rem;
  }

  .ds-hero-accord-btn > i:first-child {
    flex: 0 0 1rem;
    width: 1rem;
    margin-right: .25rem !important;
    text-align: center;
  }

  .page-hero--portfolio,
  .page-hero--case-studies,
  .page-hero--about {
    height: 100svh;
    min-height: 100svh;
    padding: 6.5rem 1rem 1.5rem;
  }

  .page-hero-art img {
    object-position: 52% center;
  }

  .page-hero--portfolio .page-hero-art img {
    object-position: 70% center;
  }

  .page-hero--case-studies .page-hero-art img {
    object-fit: cover;
    object-position: 72% center;
    transform: none;
  }

  .footer-section { padding-inline: 1rem; }

  .footer-section .col-lg-5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-brand,
  .footer-intro,
  .company-details { margin-inline: auto; }

  .footer-section .col-6 { text-align: left; }

  .footer-bottom {
    align-items: center;
    text-align: center;
  }

  .page-hero--portfolio::after,
  .page-hero--case-studies::after,
  .page-hero--about::after {
    background: linear-gradient(90deg, rgba(3, 5, 9, .94), rgba(3, 5, 9, .84) 64%, rgba(3, 5, 9, .64));
  }
}

@media (max-width: 420px), (max-height: 700px) and (max-width: 767.98px) {
  .ds-hero-content h1 {
    font-size: clamp(1.75rem, 8.2vw, 2.2rem);
  }

  .ds-hero-eyebrow {
    margin-bottom: .55rem;
    font-size: .58rem;
  }

  .ds-hero-lead {
    font-size: .8rem;
  }

  .ds-hero-visual {
    min-height: 105px;
  }

  .ds-bird-stage {
    height: 118px;
  }

  .ds-hero-accord-btn {
    min-height: 35px;
    padding-block: .4rem;
  }
}