/* ==========================================================================
   Adyasha Group — vibrant, colourful, modern stylesheet
   ========================================================================== */

:root {
  --ink:        #14112b;
  --ink-soft:   #4b4770;
  --muted:      #7a76a0;
  --line:       #e9e6f7;
  --bg:         #ffffff;
  --bg-alt:     #f6f3ff;

  /* Vivid brand palette */
  --violet:     #7b2ff7;
  --violet-dk:  #5a15d0;
  --pink:       #f02d8b;
  --orange:     #ff7a18;
  --amber:      #ffc300;
  --teal:       #00c2a8;
  --green:      #17b978;
  --blue:       #2c7bff;
  --red:        #ef2b52;

  --primary:    var(--violet);
  --primary-dk: var(--violet-dk);
  --accent:     var(--pink);

  --grad-hot:   linear-gradient(120deg, #7b2ff7 0%, #f02d8b 50%, #ff7a18 100%);
  --grad-cool:  linear-gradient(120deg, #2c7bff 0%, #00c2a8 55%, #17b978 100%);
  --grad-warm:  linear-gradient(120deg, #ff7a18 0%, #ffc300 100%);

  --radius:     22px;
  --shadow-sm:  0 3px 12px rgba(35, 15, 80, .07);
  --shadow-md:  0 14px 34px rgba(35, 15, 80, .12);
  --shadow-lg:  0 28px 66px rgba(35, 15, 80, .20);
  --container:  1180px;
  --ease:       cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: var(--primary); text-decoration: none; }
a:hover { color: var(--pink); }

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.025em; }
h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 800; }
h3 { font-size: 1.24rem; font-weight: 800; }
p  { margin: 0 0 1rem; }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--violet); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 8px; }

/* Gradient text helper */
.grad {
  background: var(--grad-hot);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-cool {
  background: var(--grad-cool);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.eyebrow {
  display: inline-block;
  text-transform: uppercase; letter-spacing: .16em; font-size: .72rem;
  font-weight: 800; margin: 0 0 .9rem;
  padding: .4rem .95rem; border-radius: 999px;
  color: var(--violet-dk);
  background: linear-gradient(120deg, rgba(123, 47, 247, .14), rgba(240, 45, 139, .14));
  border: 1px solid rgba(123, 47, 247, .18);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px);
  transition: box-shadow .3s var(--ease);
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--grad-hot); opacity: 0; transition: opacity .3s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header.is-stuck::after { opacity: 1; }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 86px; position: relative;
}

.brand { display: inline-flex; align-items: center; color: var(--ink); }
.brand-logo {
  height: 58px; width: auto; max-width: 100%;
  object-fit: contain;
  transition: transform .35s var(--ease);
}
.brand:hover .brand-logo { transform: scale(1.04); }

.primary-nav ul { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.primary-nav a {
  position: relative; display: block; padding: .55rem .95rem; border-radius: 11px;
  color: var(--ink-soft); font-weight: 700; font-size: .95rem;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.primary-nav a:hover { color: var(--violet); background: rgba(123, 47, 247, .08); }
.primary-nav a.is-active { color: var(--violet-dk); background: rgba(123, 47, 247, .12); }
.nav-cta {
  margin-left: .6rem; color: #fff !important;
  background: var(--grad-hot);
  padding: .65rem 1.3rem !important;
  box-shadow: 0 8px 20px rgba(240, 45, 139, .32);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease) !important;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(240, 45, 139, .45); }

.nav-toggle {
  display: none; width: 46px; height: 46px; border: 0;
  border-radius: 13px; background: var(--grad-hot); cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  box-shadow: 0 6px 16px rgba(240, 45, 139, .3);
}
.nav-toggle span {
  width: 20px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 1.8rem; border-radius: 14px; border: 2px solid transparent;
  font-weight: 800; font-size: .97rem; cursor: pointer; font-family: inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn:hover { transform: translateY(-3px); }
.btn-primary {
  background: var(--grad-hot); color: #fff; background-size: 200% 100%;
  box-shadow: 0 10px 26px rgba(240, 45, 139, .38);
}
.btn-primary:hover { color: #fff; background-position: 100% 0; box-shadow: 0 16px 34px rgba(240, 45, 139, .5); }
.btn-ghost { background: #fff; color: var(--violet-dk); border-color: rgba(123, 47, 247, .3); }
.btn-ghost:hover { border-color: var(--violet); color: var(--violet-dk); box-shadow: var(--shadow-md); }
.btn-light { background: #fff; color: var(--violet-dk); box-shadow: 0 10px 26px rgba(0, 0, 0, .18); }
.btn-light:hover { color: var(--pink); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(0, 194, 168, .20), transparent 62%),
    radial-gradient(900px 560px at 8% 6%, rgba(123, 47, 247, .20), transparent 62%),
    radial-gradient(800px 520px at 55% 108%, rgba(255, 122, 24, .18), transparent 62%),
    linear-gradient(180deg, #fdfbff 0%, #f4efff 100%);
}
/* With slide images the hero just supplies a plain base; the images carry
   the colour, so the layered gradients above would only wash them out. */
.hero--bg { background: #fbfaff; }
/* Floating colour blobs, for a hero with no slide background images.
   .hero--bg (set when the slider supplies its own backgrounds) hides them,
   since they would only muddy the images. */
.hero-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero--bg .hero-glow { display: none; }
.hero-glow::before,
.hero-glow::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5;
}
.hero-glow::before {
  width: 380px; height: 380px; top: -90px; right: -60px;
  background: radial-gradient(circle, rgba(240, 45, 139, .55), transparent 68%);
  animation: float1 13s ease-in-out infinite;
}
.hero-glow::after {
  width: 320px; height: 320px; bottom: -110px; left: -70px;
  background: radial-gradient(circle, rgba(44, 123, 255, .5), transparent 68%);
  animation: float2 16s ease-in-out infinite;
}
@keyframes float1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-42px, 34px) scale(1.12); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(38px, -30px) scale(1.1); }
}

.hero-lead { font-size: clamp(1.06rem, 1.9vw, 1.28rem); color: var(--ink-soft); max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

/* ---------- Hero slider ---------- */
.slider { position: relative; }

/* Slides stack on top of each other; only the active one is visible.
   The wrapper's height comes from the tallest slide (see .slides). */
.slides { display: grid; }
/* The outgoing slide fades out fast and the incoming one is already fully
   opaque, so the copy/logo entrance animations play over a solid slide
   rather than a blank gap. */
.slide {
  position: relative;
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility 0s linear .25s;
  pointer-events: none;
}
.slide.is-active {
  opacity: 1; visibility: visible;
  transition: opacity .25s var(--ease), visibility 0s;
  pointer-events: auto;
}

/* Per-slide background image. It sits behind the copy with a scrim on the
   text side so the dark body text keeps its contrast whatever the image.
   It bleeds past the bottom of the slide so the dots strip below the
   slider sits on the image too, with no seam against the hero gradient. */
.slide-bg {
  position: absolute; inset: 0 0 -220px; z-index: 0;
  background-size: cover;
  background-position: center right;
  opacity: 0;
}
.slide.is-active .slide-bg {
  animation: bgIn .9s var(--ease) forwards, bgPan 22s ease-in-out 0.9s infinite alternate;
}
@keyframes bgIn { to { opacity: 1; } }
/* Slow Ken Burns drift so the hero never feels static */
@keyframes bgPan {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-1.2%, -1%, 0); }
}

/* Readability scrim: strongest on the left where the copy sits */
.slide.has-bg .slide-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
              rgba(255, 255, 255, .84) 0%,
              rgba(255, 255, 255, .62) 40%,
              rgba(255, 255, 255, .10) 68%,
              rgba(255, 255, 255, 0) 100%);
}

.slide-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 2.5rem; align-items: center;
  padding: clamp(3.2rem, 7vw, 5.6rem) 0 clamp(2.6rem, 5vw, 4rem);
}

/* Copy animates in when its slide becomes active */
.slide-copy > * {
  opacity: 0; transform: translateY(18px);
}
.slide.is-active .slide-copy > * {
  animation: slideIn .55s var(--ease) forwards;
}
.slide.is-active .slide-copy > *:nth-child(1) { animation-delay: .02s; }
.slide.is-active .slide-copy > *:nth-child(2) { animation-delay: .08s; }
.slide.is-active .slide-copy > *:nth-child(3) { animation-delay: .14s; }
.slide.is-active .slide-copy > *:nth-child(4) { animation-delay: .20s; }
@keyframes slideIn { to { opacity: 1; transform: none; } }

/* The slide's own colour drives its eyebrow and primary button */
.slide .eyebrow {
  color: var(--slide);
  background: color-mix(in srgb, var(--slide) 14%, transparent);
  border-color: color-mix(in srgb, var(--slide) 30%, transparent);
}
.slide .btn-primary {
  background: linear-gradient(120deg, var(--slide),
              color-mix(in srgb, var(--slide) 55%, var(--pink)));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--slide) 40%, transparent);
}
.slide .btn-primary:hover { box-shadow: 0 16px 34px color-mix(in srgb, var(--slide) 55%, transparent); }
.slide .btn-ghost { color: var(--slide); border-color: color-mix(in srgb, var(--slide) 32%, transparent); }
.slide .btn-ghost:hover { border-color: var(--slide); color: var(--slide); }

/* Compact glass logo badge keeps the photography visible. */
.slide-visual { display: flex; justify-content: flex-end; align-self: start; padding-top: 1rem; }
.slide-logo {
  display: flex; align-items: center; justify-content: center;
  width: min(100%, 260px); height: 112px;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, .92); border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--slide) 22%, transparent);
  box-shadow: 0 26px 60px color-mix(in srgb, var(--slide) 26%, transparent);
  backdrop-filter: blur(10px);
}
.slide-logo img { width: 100%; height: 100%; object-fit: contain; }
a.slide-logo { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
a.slide-logo:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 70px color-mix(in srgb, var(--slide) 36%, transparent);
}
.slide-logo.logo-dark { background: color-mix(in srgb, var(--slide) 80%, #000); }
.slide.is-active .slide-logo { animation: logoIn .5s var(--ease) both; }
@keyframes logoIn {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* Arrows */
.slider-btn {
  position: absolute; top: 50%; z-index: 3;
  width: 48px; height: 48px; transform: translateY(-50%);
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: var(--ink);
  cursor: pointer; backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
  transition: background .25s var(--ease), color .25s var(--ease),
              transform .25s var(--ease), box-shadow .25s var(--ease);
}
.slider-btn svg { width: 22px; height: 22px; }
.slider-btn:hover {
  background: var(--violet); color: #fff; border-color: transparent;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 24px rgba(123, 47, 247, .4);
}
.slider-btn.prev { left: max(1rem, calc((100vw - var(--container)) / 2 - 62px)); }
.slider-btn.next { right: max(1rem, calc((100vw - var(--container)) / 2 - 62px)); }

/* Dots with an autoplay progress fill */
.slider-dots {
  position: relative; z-index: 2;
  display: flex; justify-content: center; gap: .55rem;
  padding-bottom: clamp(2.2rem, 4vw, 3.2rem);
}
.dot {
  position: relative; overflow: hidden;
  width: 34px; height: 6px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  transition: width .35s var(--ease), background .35s var(--ease);
}
.dot:hover { background: color-mix(in srgb, var(--ink) 30%, transparent); }
.dot.is-active { width: 62px; background: color-mix(in srgb, var(--slide) 25%, transparent); }
.dot-fill {
  position: absolute; inset: 0; width: 0;
  background: var(--slide); border-radius: 999px;
}
.dot.is-active .dot-fill { width: 100%; transition: width var(--dur, 6s) linear; }
.dot.is-paused .dot-fill { transition: none; }

/* Rainbow divider under the hero */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg, var(--red), var(--orange), var(--amber),
                              var(--green), var(--teal), var(--blue), var(--violet), var(--pink));
}

/* ---------- Sections ---------- */
.section { padding: clamp(3.8rem, 8vw, 7rem) 0; }
.section-alt {
  background:
    radial-gradient(760px 420px at 12% 0%, rgba(44, 123, 255, .12), transparent 60%),
    radial-gradient(760px 420px at 88% 100%, rgba(240, 45, 139, .12), transparent 60%),
    var(--bg-alt);
}
.section-head { max-width: 720px; margin: 0 auto 3.2rem; text-align: center; }
.section-lead { color: var(--ink-soft); font-size: 1.06rem; margin: 0; }

/* ---------- At a glance (stats) ---------- */
.stats-section {
  position: relative;
  background:
    radial-gradient(700px 380px at 8% 0%, rgba(123, 47, 247, .10), transparent 62%),
    radial-gradient(700px 380px at 92% 100%, rgba(0, 194, 168, .12), transparent 62%),
    var(--bg-alt);
}

.stats-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.stat-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.9rem 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
}
.stat-card:nth-child(1) { --stat: var(--red); }
.stat-card:nth-child(2) { --stat: var(--blue); }
.stat-card:nth-child(3) { --stat: var(--amber); }
.stat-card:nth-child(4) { --stat: var(--green); }

/* Coloured top bar + a soft wash that grows on hover */
.stat-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 6px;
  background: linear-gradient(90deg, var(--stat),
              color-mix(in srgb, var(--stat) 35%, #fff));
}
.stat-card::after {
  content: ""; position: absolute; z-index: -1;
  width: 210px; height: 210px; border-radius: 50%;
  top: -120px; right: -95px;
  background: radial-gradient(circle,
              color-mix(in srgb, var(--stat) 38%, transparent), transparent 70%);
  transform: scale(.6); opacity: .55;
  transition: transform .55s var(--ease), opacity .55s var(--ease);
}
.stat-card:hover {
  transform: translateY(-10px);
  border-color: color-mix(in srgb, var(--stat) 35%, transparent);
  box-shadow: 0 28px 56px color-mix(in srgb, var(--stat) 26%, transparent);
}
.stat-card:hover::after { transform: scale(1.3); opacity: 1; }

.stat-card strong {
  display: block; line-height: 1;
  font-size: clamp(2.6rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.05em;
  color: var(--stat);
  margin-bottom: .55rem;
}
.stat-label {
  font-size: 1.02rem; font-weight: 800; color: var(--ink);
  letter-spacing: -.01em;
}
.stat-note {
  margin-top: .3rem;
  font-size: .88rem; color: var(--muted); font-weight: 500;
}

/* ---------- The four brand logo cards ---------- */
.logo-grid {
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.logo-card {
  position: relative; overflow: hidden; isolation: isolate;
  background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem 1.6rem 1.8rem;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
/* Colour wash that grows on hover */
.logo-card::after {
  content: ""; position: absolute; z-index: -1;
  width: 240px; height: 240px; border-radius: 50%;
  top: -130px; right: -110px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%);
  transform: scale(.55); opacity: .6;
  transition: transform .55s var(--ease), opacity .55s var(--ease);
}
.logo-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 6px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, #fff));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.logo-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px color-mix(in srgb, var(--accent) 28%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.logo-card:hover::before { transform: scaleX(1); }
.logo-card:hover::after  { transform: scale(1.35); opacity: 1; }

/* White frame: the supplied logos carry their own white/transparent
   backgrounds, so a tinted panel behind them would look dirty. */
.logo-frame {
  display: flex; align-items: center; justify-content: center;
  height: 126px; margin-bottom: 1.3rem; overflow: hidden;
  border-radius: 16px; padding: .9rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
  transition: border-color .4s var(--ease), transform .4s var(--ease),
              box-shadow .4s var(--ease);
}
.logo-card:hover .logo-frame {
  transform: scale(1.03);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 20%, transparent);
}
/* The frame is a fixed box; the logo scales to fit inside it whatever its
   native ratio. object-fit does the letterboxing, so width/height on the
   <img> only reserve space and never stretch the artwork. */
.logo-frame img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  transition: transform .4s var(--ease);
}
.logo-card:hover .logo-frame img { transform: scale(1.06); }

.chip {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; padding: .34rem .85rem; border-radius: 999px;
  color: #fff; background: var(--accent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 40%, transparent);
  margin-bottom: .85rem;
}
.logo-card h3 { color: var(--ink); }
.logo-card p { color: var(--ink-soft); font-size: .95rem; }
.card-link { font-weight: 800; font-size: .93rem; color: var(--accent); }
.card-link span { transition: transform .25s var(--ease); display: inline-block; }
.card-link:hover { color: var(--accent); }
.logo-card:hover .card-link span { transform: translateX(6px); }

/* ---------- Colourful marquee strip ---------- */
.strip {
  overflow: hidden; padding: 1rem 0;
  background: linear-gradient(90deg, var(--violet), var(--pink) 35%, var(--orange) 65%, var(--amber));
  color: #fff;
}
.strip-track {
  display: flex; align-items: center; gap: 1.6rem; width: max-content;
  animation: marquee 26s linear infinite;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .88rem;
}
.strip-track .dot {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .8); flex: none;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.strip:hover .strip-track { animation-play-state: paused; }

/* ---------- About split ---------- */
.about-split { display: grid; gap: 3rem; grid-template-columns: 1fr 1fr; align-items: center; }
.about-split p { color: var(--ink-soft); }
.value-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.value-list li {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 1.15rem 1.4rem 1.15rem 1.6rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.value-list li::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 6px;
  background: var(--vc, var(--violet));
}
.value-list li:nth-child(1) { --vc: var(--violet); }
.value-list li:nth-child(2) { --vc: var(--teal); }
.value-list li:nth-child(3) { --vc: var(--orange); }
.value-list li:nth-child(4) { --vc: var(--pink); }
.value-list li:hover {
  transform: translateX(8px);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--vc) 22%, transparent);
}
.value-list h4 { margin: 0 0 .25rem; font-size: 1.05rem; color: var(--vc); }
.value-list p { margin: 0; font-size: .93rem; color: var(--ink-soft); }

/* ---------- Page header (inner pages) ---------- */
.page-head {
  position: relative; overflow: hidden;
  padding: clamp(3.2rem, 6vw, 5rem) 0;
  background:
    radial-gradient(760px 420px at 85% 0%, rgba(0, 194, 168, .20), transparent 62%),
    radial-gradient(700px 420px at 5% 100%, rgba(123, 47, 247, .20), transparent 62%),
    linear-gradient(180deg, #fdfbff 0%, #f4efff 100%);
}
.page-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg, var(--red), var(--orange), var(--amber),
                              var(--green), var(--teal), var(--blue), var(--violet), var(--pink));
}
.page-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); margin-bottom: .5rem; }
.page-head p { color: var(--ink-soft); max-width: 60ch; margin: 0; font-size: 1.06rem; }

/* ---------- Vertical detail rows ---------- */
.vertical-row {
  position: relative;
  display: grid; grid-template-columns: 330px 1fr; gap: 2.6rem; align-items: center;
  padding: 2.6rem; margin-bottom: 1.6rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--accent) 7%, #fff), #fff 65%);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 110px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.vertical-row::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 7px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #fff));
}
.vertical-row:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px color-mix(in srgb, var(--accent) 24%, transparent);
}
.vertical-media {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 300px; margin: 0;
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 22%, transparent);
}
.vertical-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.vertical-media::after {
  content: ""; position: absolute; inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(12, 8, 32, .42));
  pointer-events: none;
}
.vertical-logo {
  position: absolute; z-index: 1; left: 1rem; right: 1rem; bottom: 1rem;
  display: flex; align-items: center; justify-content: center;
  height: 74px; padding: .65rem 1rem;
  border-radius: 14px; background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 24px rgba(12, 8, 32, .2);
  backdrop-filter: blur(8px);
}
.vertical-logo img { width: 100%; height: 100%; object-fit: contain; }
.vertical-row:hover .vertical-photo { transform: scale(1.045); }
.vertical-row h2 { color: var(--accent); }
.vertical-row ul { margin: 1rem 0 0; padding: 0; list-style: none; color: var(--ink-soft); }
.vertical-row li {
  position: relative; margin-bottom: .55rem; padding-left: 1.7rem;
}
.vertical-row li::before {
  content: "✦"; position: absolute; left: 0; top: -1px;
  color: var(--accent); font-size: .95rem;
}
.vertical-row p { color: var(--ink-soft); }
.vertical-cta { margin-top: 1.2rem; }

/* ---------- Individual brand pages ---------- */
.brand-hero {
  position: relative; overflow: hidden; min-height: 610px;
  display: grid; align-items: center; color: var(--ink);
}
.brand-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center right;
}
.brand-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.84) 39%, rgba(255,255,255,.18) 72%, transparent 100%);
}
.brand-hero-inner {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 1fr .75fr; align-items: center; gap: 3rem;
  padding-block: clamp(4rem, 9vw, 7rem);
}
.brand-hero-copy { max-width: 650px; }
.brand-hero-copy h1 { color: var(--ink); }
.brand-hero-copy p { max-width: 54ch; color: var(--ink-soft); font-size: 1.15rem; }
.brand-hero-logo {
  justify-self: end; display: flex; align-items: center; justify-content: center;
  width: min(100%, 330px); height: 145px; padding: 1.2rem 1.5rem;
  border-radius: 22px; background: rgba(255,255,255,.94);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: 0 24px 58px color-mix(in srgb, var(--accent) 28%, transparent);
  backdrop-filter: blur(10px);
}
.brand-hero-logo img { width: 100%; height: 100%; object-fit: contain; }

/* White logos sit on a dark tint of the brand colour instead of white. */
.logo-frame.logo-dark,
.vertical-logo.logo-dark,
.brand-hero-logo.logo-dark {
  background: color-mix(in srgb, var(--accent) 80%, #000);
}
.brand-details {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.brand-body { color: var(--ink-soft); font-size: 1.08rem; max-width: 65ch; }
.brand-services {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; background: #fff; box-shadow: var(--shadow-md);
}
.brand-services h3 { color: var(--accent); }
.brand-services ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.brand-services li { position: relative; padding-left: 1.65rem; color: var(--ink-soft); }
.brand-services li::before { content: "✦"; position: absolute; left: 0; color: var(--accent); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: start; }
.card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; box-shadow: var(--shadow-md);
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 6px;
  background: var(--grad-hot);
}
.card + .card, aside .card { margin-top: 0; }
aside .card::before { background: var(--grad-cool); }

.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .45rem; }
.field label span { color: var(--pink); }
.field input, .field textarea, .field select {
  width: 100%; padding: .85rem 1rem; font: inherit; font-size: .95rem;
  border: 2px solid var(--line); border-radius: 13px; background: #fdfcff; color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--violet); background: #fff;
  box-shadow: 0 0 0 4px rgba(123, 47, 247, .15);
}
.field textarea { min-height: 145px; resize: vertical; }
.field .error { color: var(--red); font-size: .84rem; margin: .35rem 0 0; font-weight: 700; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red); }
.hp-field { position: absolute; left: -9999px; }

.alert { border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1.4rem; font-weight: 700; font-size: .94rem; }
.alert-success { background: linear-gradient(120deg, #dcfbee, #d6f7f2); color: #0a7a52; border: 2px solid #8fe3c2; }
.alert-error   { background: linear-gradient(120deg, #ffe6ec, #ffeade); color: #b4102f; border: 2px solid #ffb3c2; }

.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.info-list li { padding-left: 1rem; border-left: 4px solid var(--ic, var(--violet)); }
.info-list li:nth-child(1) { --ic: var(--pink); }
.info-list li:nth-child(2) { --ic: var(--blue); }
.info-list li:nth-child(3) { --ic: var(--orange); }
.info-list li:nth-child(4) { --ic: var(--green); }
.info-list h4 { margin: 0 0 .2rem; font-size: .97rem; color: var(--ic); }
.info-list p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(120deg, #7b2ff7, #f02d8b 48%, #ff7a18);
  background-size: 200% 200%;
  animation: shift 14s ease infinite;
}
@keyframes shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 300px at 15% 20%, rgba(255, 255, 255, .22), transparent 60%);
}
.cta-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  flex-wrap: wrap; padding: clamp(2.8rem, 5vw, 4rem) 0;
}
.cta-band h2 { margin: 0 0 .4rem; color: #fff; }
.cta-band p { margin: 0; opacity: .95; font-size: 1.05rem; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: linear-gradient(165deg, #1c1147 0%, #140d33 55%, #0d0822 100%);
  color: #c3bde4; padding-top: 3.8rem;
}
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--red), var(--orange), var(--amber),
                              var(--green), var(--teal), var(--blue), var(--violet), var(--pink));
}
.site-footer h3 {
  color: #fff; font-size: .93rem; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 1.1rem;
}
.site-footer a { color: #c3bde4; transition: color .2s var(--ease); }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid; gap: 2.5rem; padding-bottom: 3rem;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
}
.footer-about p { font-size: .93rem; max-width: 34ch; margin-top: 1rem; }

/* The logo's lettering is dark navy, so it needs a light plate to stay
   legible against the dark footer. */
.brand--footer { display: inline-block; }
.brand--footer .brand-logo {
  height: 62px;
  background: #fff;
  padding: .6rem .85rem;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}
.footer-col ul, .footer-contact {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .93rem;
}

/* ---------- Footer icon lists ---------- */
.icon-list a,
.icon-list .static-item {
  display: flex; align-items: center; gap: .65rem;
  line-height: 1.4;
}
.icon-list .static-item { color: #c3bde4; }

/* The coloured icon badge */
.icon-list .ico {
  width: 30px; height: 30px; flex: none; padding: 6px;
  border-radius: 9px;
  color: var(--ic, #fff);
  background: color-mix(in srgb, var(--ic, #7b2ff7) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--ic, #7b2ff7) 32%, transparent);
  transition: background .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease), color .25s var(--ease);
}
.icon-list a:hover .ico {
  background: var(--ic, #7b2ff7);
  color: #fff;
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ic, #7b2ff7) 45%, transparent);
}
/* Nudge only the label, so the icon badge stays put */
.icon-list a span { transition: transform .25s var(--ease); }
.icon-list a:hover span { transform: translateX(3px); }

.footer-contact .static-item .ico { align-self: flex-start; }

/* Company column cycles through the palette */
.icon-list--company li:nth-child(1) { --ic: #7b2ff7; }
.icon-list--company li:nth-child(2) { --ic: #00c2a8; }
.icon-list--company li:nth-child(3) { --ic: #ffc300; }
.icon-list--company li:nth-child(4) { --ic: #f02d8b; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .12); padding: 1.4rem 0; font-size: .86rem;
}
.footer-bottom p { margin: 0; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .about-split, .contact-grid, .brand-details { grid-template-columns: 1fr; }
  /* Stack the slide: copy first, logo below */
  .slide-inner { grid-template-columns: 1fr; gap: 2rem; }
  .slide-visual { order: -1; justify-content: flex-start; padding-top: 0; }
  .slide-logo { width: min(62vw, 260px); height: 96px; padding: .85rem 1rem; }
  .slide-bg { background-position: 62% center; }
  .slider-btn { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .vertical-row { grid-template-columns: 1fr; gap: 1.6rem; padding: 1.8rem; }
  .vertical-media { min-height: 280px; }
  .brand-hero { min-height: 680px; align-items: end; }
  .brand-hero-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .brand-hero-logo { justify-self: start; order: -1; width: min(70vw, 280px); height: 110px; }
  .brand-hero-bg { object-position: 62% center; }
  .brand-hero-scrim { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.94) 48%, #fff 100%); }
}

@media (max-width: 780px) {
  .nav-toggle { display: flex; }
  /* Shrink the wide logo so it never crowds the menu button */
  .brand-logo { height: 42px; }
  .primary-nav {
    position: absolute; top: calc(100% + 3px); left: -1.25rem; right: -1.25rem;
    background: #fff; box-shadow: var(--shadow-md);
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .3s var(--ease);
  }
  .primary-nav ul { overflow: hidden; flex-direction: column; align-items: stretch; gap: 0; padding: 0 1.25rem; }
  .primary-nav.is-open { grid-template-rows: 1fr; }
  .primary-nav.is-open ul { padding: .9rem 1.25rem 1.3rem; }
  .primary-nav a { padding: .85rem .6rem; }
  .nav-cta { margin: .6rem 0 0; text-align: center; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; gap: 1rem; }
  .stat-card { padding: 1.4rem 1.2rem; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .slide.has-bg .slide-bg::after {
    background: linear-gradient(180deg,
                rgba(255, 255, 255, .93) 0%,
                rgba(255, 255, 255, .82) 58%,
                rgba(255, 255, 255, .55) 100%);
  }
  .slide .hero-lead { color: var(--ink); }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .brand-hero { min-height: 640px; }
  .brand-hero-inner { gap: 1.5rem; }
  .brand-hero-logo { justify-self: start; width: min(100%, 280px); height: 118px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-glow::before, .hero-glow::after { animation: none; }
  .strip-track { animation: none; }
  .cta-band { animation: none; }
  /* Slider: no autoplay fill, no entrance animation — just show the slide */
  .slide.is-active .slide-copy > *,
  .slide.is-active .slide-logo { animation: none; opacity: 1; transform: none; }
  .slide-copy > * { opacity: 1; transform: none; }
  .dot.is-active .dot-fill { transition: none; width: 100%; }
  /* Show the background statically — no fade-in, no Ken Burns drift */
  .slide.is-active .slide-bg { animation: none; opacity: 1; transform: none; }
}