/* ═══════════════════════════════════════════════════════════════════════
   Galaxy Events — landing page
   1. Tokens          5. Header / nav      9.  Testimonials
   2. Reset & base    6. Hero              10. Team
   3. Typography      7. About             11. Contact
   4. Buttons         8. Services/Clients  12. Footer / motion / responsive
═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────── */
:root{
  /* Colour */
  --ink:        #0A0812;
  --ink-raised: #14102A;
  --ink-card:   #171232;
  --plum:       #150E30;
  --cream:      #F7F4EE;
  --white:      #FFFFFF;
  --brand-navy: #16355B;   /* logo colour on light backgrounds */

  --violet:     #7C4DFF;
  --violet-lt:  #A78BFA;
  --magenta:    #E9539B;
  --magenta-lt: #F9A8D4;

  --text-d:     #17132A;
  --text-d-mute:#5D5677;
  --text-l:     #F4F1FB;
  --text-l-mute:#A9A1C6;

  --line-d:     rgba(23,19,42,.12);
  --line-l:     rgba(255,255,255,.11);

  --grad:       linear-gradient(100deg, var(--violet), var(--magenta));
  --grad-soft:  linear-gradient(100deg, var(--violet-lt), var(--magenta-lt));

  /* Type */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Space */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --pad-y:  clamp(4.5rem, 8vw, 7.5rem);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --header-h: 74px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 2. Reset & base ───────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box; }
* { margin: 0; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body{
  font-family: var(--font-body);
  font-size: clamp(.95rem, .9rem + .2vw, 1.03rem);
  line-height: 1.68;
  color: var(--text-d);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg{ display: block; max-width: 100%; }
ul, ol{ list-style: none; padding: 0; }
a{ color: inherit; text-decoration: none; }
button, input, select, textarea{ font: inherit; color: inherit; }

:focus-visible{
  outline: 2px solid var(--magenta-lt);
  outline-offset: 3px;
  border-radius: 4px;
}

.sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link{
  position: fixed; top: .6rem; left: .6rem; z-index: 200;
  padding: .6rem 1rem; border-radius: var(--r-sm);
  background: var(--magenta); color: #fff; font-weight: 700;
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip-link:focus-visible{ transform: none; }

.wrap{
  width: min(1200px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section shells: padding here, colour in the modifiers. Nothing else
   sets vertical padding on these elements. */
.section{
  position: relative;
  padding-block: var(--pad-y);
  scroll-margin-top: calc(var(--header-h) + 8px);
  isolation: isolate;
}
.section--cream{ background: var(--cream); color: var(--text-d); }
.section--dark { background: var(--ink);   color: var(--text-l); }
.section--plum { background: var(--plum);  color: var(--text-l); }

/* Single restrained beam wash for the dark sections. */
.wash{
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none;
}
.wash::before{
  content: '';
  position: absolute; top: -30%; left: 50%; width: 130%; height: 90%;
  translate: -50% 0;
  background:
    radial-gradient(46% 60% at 32% 0%, rgba(124,77,255,.30), transparent 70%),
    radial-gradient(40% 55% at 70% 4%, rgba(233,83,155,.24), transparent 72%);
  filter: blur(10px);
}

.grain{
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ── 3. Typography ─────────────────────────────────────────────────── */
.eyebrow{
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 1rem;
}
.eyebrow--pink { color: var(--magenta-lt); }
.eyebrow--light{ color: rgba(255,255,255,.72); }

.h2{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 130;
  font-weight: 500;
  font-size: clamp(2.05rem, 1.15rem + 3.5vw, 3.85rem);
  line-height: 1.05;
  letter-spacing: -.022em;
  color: var(--text-d);
  text-wrap: balance;
}
.h2--light{ color: #fff; }
.h2 em{
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 130, 'SOFT' 20;
}
.accent-pink  { color: var(--magenta); }
.accent-violet{ color: var(--violet); }
.h2--light .accent-pink  { color: var(--magenta-lt); }
.h2--light .accent-violet{ color: var(--violet-lt); }

.lede{
  max-width: 56ch;
  margin-top: 1.35rem;
  color: var(--text-d-mute);
  font-size: 1.05rem;
}
.lede--light{ color: var(--text-l-mute); }

.sec-head{ margin-bottom: clamp(2.75rem, 5vw, 4rem); }
.sec-head--center{ text-align: center; }
.sec-head--center .lede{ margin-inline: auto; }

.prose{ margin-top: 1.9rem; color: var(--text-d-mute); }
.prose p + p{ margin-top: 1rem; }
.prose__lead{
  color: var(--text-d);
  font-weight: 600;
  border-left: 2px solid transparent;
  border-image: var(--grad) 1;
  padding-left: 1.1rem;
}

/* ── 4. Buttons ────────────────────────────────────────────────────── */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border: 0;
  border-radius: var(--r-pill);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), color .25s var(--ease);
}
.btn svg{ width: 1.15em; height: 1.15em; flex: none; transition: translate .25s var(--ease); }
.btn:hover svg{ translate: 4px 0; }

.btn--grad{
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(233,83,155,.75);
}
.btn--grad:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(233,83,155,.9); }

.btn--outline{
  background: transparent;
  color: var(--text-d);
  box-shadow: inset 0 0 0 1.5px var(--line-d);
}
.btn--outline:hover{ box-shadow: inset 0 0 0 1.5px var(--violet); color: var(--violet); }

.btn--ghost{
  background: rgba(255,255,255,.07);
  color: #fff;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--line-l);
}
.btn--ghost:hover{ background: rgba(255,255,255,.14); transform: translateY(-2px); }

.btn--wa{
  background: #1FAF54;
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(31,175,84,.9);
}
.btn--wa:hover{ transform: translateY(-2px); }
.btn--wa:hover svg{ translate: 0; }

.btn--sm  { padding: .68rem 1.15rem; font-size: .7rem; }
.btn--full{ width: 100%; justify-content: center; }

/* ── 5. Header / nav ───────────────────────────────────────────────── */
.header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,8,18,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.header.is-scrolled{
  border-bottom-color: var(--line-l);
  background: rgba(10,8,18,.97);
}

.header__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand{ display: inline-flex; align-items: center; gap: .65rem; }
.brand__mark{ width: 46px; height: 31px; flex: none; color: #fff; }
.brand__type{ display: grid; line-height: 1; }
/* Kaushan Script is subset to the glyphs in "Galaxy" only. */
.brand__name{
  font-family: 'Kaushan Script', var(--font-display), cursive;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.06;
  color: #fff;
}
.brand__sub{
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-top: .1rem;
}

.nav{ display: flex; align-items: center; gap: 1.75rem; }
.nav__list{ display: flex; align-items: center; gap: 1.5rem; }
.nav__list a{
  position: relative;
  font-size: .88rem;
  font-weight: 500;
  color: rgba(255,255,255,.78);
  padding-block: .35rem;
  transition: color .2s var(--ease);
}
.nav__list a::after{
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--grad-soft);
  scale: 0 1;
  transform-origin: left;
  transition: scale .3s var(--ease);
}
.nav__list a:hover{ color: #fff; }
.nav__list a:hover::after,
.nav__list a.is-active::after{ scale: 1 1; }
.nav__list a.is-active{ color: #fff; }

.nav__toggle, .nav__close{
  display: none;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-l);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.05);
  color: #fff;
  cursor: pointer;
}
.nav__toggle svg, .nav__close svg{ width: 22px; height: 22px; }

/* ── 6. Hero ───────────────────────────────────────────────────────── */
.hero{
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(560px, 82vh, 820px);
  padding-block: clamp(4rem, 9vw, 7rem);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.hero__stage{ position: absolute; inset: 0; z-index: -1; background: var(--ink); }

/* Drop assets/images/hero.jpg in and it layers on top of the CSS stage
   art. If the file is absent, the art below carries the section. */
.hero__photo{
  position: absolute; inset: 0;
  background: url('../assets/images/hero.jpg') center/cover no-repeat;
  opacity: .78;
}

.hero__glow{
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 50% at 50% 100%, rgba(124,77,255,.26), transparent 68%),
    radial-gradient(48% 38% at 78% 88%, rgba(233,83,155,.20), transparent 70%),
    linear-gradient(93deg, rgba(10,8,18,.94) 4%, rgba(10,8,18,.72) 40%, rgba(10,8,18,.30) 72%);
}

/* Signature: volumetric stage beams. */
.beams{
  position: absolute; inset: -12% -6% auto -6%;
  height: 128%;
  mix-blend-mode: screen;
  pointer-events: none;
}
.beam{
  position: absolute;
  top: -20%;
  left: var(--x);
  width: var(--w);
  height: 150%;
  background: linear-gradient(180deg, var(--c) 0%, transparent 72%);
  filter: blur(44px);
  transform-origin: 50% 0;
  rotate: var(--r);
  opacity: .3;
  animation: sway var(--d) ease-in-out infinite alternate;
}
.beam--1{ --x: 8%;  --w: 15vmax; --r: 14deg;  --c: rgba(124,77,255,.62); --d: 11s; }
.beam--2{ --x: 30%; --w: 11vmax; --r: -9deg;  --c: rgba(233,83,155,.55); --d: 14s; animation-delay: -3s; }
.beam--3{ --x: 58%; --w: 17vmax; --r: 7deg;   --c: rgba(167,139,250,.50); --d: 17s; animation-delay: -6s; }
.beam--4{ --x: 80%; --w: 12vmax; --r: -15deg; --c: rgba(249,168,212,.42); --d: 13s; animation-delay: -9s; }

@keyframes sway{
  from{ rotate: calc(var(--r) - 3.5deg); }
  to  { rotate: calc(var(--r) + 3.5deg); }
}

.hero__inner{ position: relative; }

.hero__title{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 144;
  font-weight: 600;
  font-size: clamp(2.55rem, 1.2rem + 5.4vw, 5.3rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  max-width: 15ch;
}
.hero__title em{
  display: inline-block;
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 1;
  background: var(--grad-soft);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .08em;
}

.hero__lede{
  max-width: 46ch;
  margin-top: 1.6rem;
  font-size: clamp(1rem, .95rem + .3vw, 1.14rem);
  color: rgba(255,255,255,.8);
}

.hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2.4rem;
}

/* ── 7. About ──────────────────────────────────────────────────────── */
.about__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.stats{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-d);
}
.stat{ position: relative; padding-right: clamp(1.5rem, 4vw, 3rem); }
.stat + .stat::before{
  content: '';
  position: absolute; left: calc(-1 * clamp(.75rem, 2vw, 1.5rem)); top: 6px;
  width: 1px; height: calc(100% - 12px);
  background: var(--line-d);
}
.stat__num{
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 110;
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat__label{
  margin-top: .45rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-d-mute);
}

.about__copy .btn--outline{ margin-top: 2.25rem; }

/* Collage: a deliberate grid rather than scattered overlaps. */
.about__media{
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 14px;
}
.about__media::before{
  content: '';
  position: absolute; inset: -18px -18px 34px 34px;
  border-radius: var(--r-lg);
  border: 1.5px solid transparent;
  background: var(--grad) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .38;
  z-index: -1;
}

.shot{
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--art, var(--ink-raised));
  box-shadow: 0 18px 44px -22px rgba(23,19,42,.55);
}
.shot::after{
  content: '';
  position: absolute; inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
}
/* The tall shot sets the collage height; the two side shots stretch to
   fill their rows and are cover-cropped, so there are no dead gaps. */
.shot--main{ grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
.shot--a   { grid-column: 2; grid-row: 1; }
.shot--b   { grid-column: 2; grid-row: 2; }

.shot__cap{
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 2.5rem .95rem .85rem;
  background: linear-gradient(transparent, rgba(10,8,18,.88));
  color: rgba(255,255,255,.9);
  font-size: .74rem;
  letter-spacing: .02em;
}

/* ── 8a. Services ──────────────────────────────────────────────────── */
.svc-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2vw, 1.6rem);
}

.svc{
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-card);
  box-shadow: inset 0 0 0 1px var(--line-l);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.svc:hover{
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 1px rgba(233,83,155,.45),
              0 26px 54px -26px rgba(124,77,255,.75);
}

.svc__media{
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--art, var(--ink-raised));
}
.svc__media::after{
  content: '';
  position: absolute; inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
}
.svc__media::before{
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 40%, rgba(23,18,50,.95));
}

.svc__body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem 1.5rem 1.35rem;
  margin-top: -2.6rem;
  position: relative;
  z-index: 2;
}
.svc__title{
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 60;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: #fff;
}
.svc__desc{
  margin-top: .5rem;
  font-size: .92rem;
  color: var(--text-l-mute);
}

.ticks{
  display: grid;
  gap: .6rem;
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line-l);
  font-size: .88rem;
  color: rgba(255,255,255,.84);
}
.ticks li{ display: flex; align-items: flex-start; gap: .65rem; }
.ticks svg{
  width: 1.05em; height: 1.05em; flex: none;
  margin-top: .35em;
  color: var(--magenta-lt);
}

.svc__link{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--magenta-lt);
}
.svc__link svg{ width: 1.2em; height: 1.2em; transition: translate .25s var(--ease); }
.svc__link:hover svg{ translate: 5px 0; }

.chips{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem 1rem;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-l);
}
.chips__label{
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-l-mute);
}
.chips__list{ display: flex; flex-wrap: wrap; gap: .5rem; }
.chips__list li{
  padding: .38rem .85rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--line-l);
  font-size: .82rem;
  color: rgba(255,255,255,.82);
}

/* ── 8b. Clients ───────────────────────────────────────────────────── */
.logo-group + .logo-group{ margin-top: clamp(2rem, 4vw, 3rem); }

.logo-group__title{
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-d-mute);
  margin-bottom: 1.1rem;
}

.logo-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.7rem, 1.4vw, 1rem);
}

.logo-card{
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: 1rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: 0 2px 10px -4px rgba(23,19,42,.14), inset 0 0 0 1px var(--line-d);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.logo-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -18px rgba(124,77,255,.6), inset 0 0 0 1px rgba(124,77,255,.3);
}
/* Full colour, as in the approved design — greyscale erases the lighter
   marks (Sun N Moon, Sangria, Soul) almost entirely. */
.logo-card img{
  max-height: 54px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: scale .3s var(--ease);
}
.logo-card:hover img{ scale: 1.04; }

/* Shown when a logo file is missing. */
.logo-card__mark{
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 40;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-align: center;
  color: var(--text-d);
  opacity: .72;
}

.clients__cta{
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* ── 9. Testimonials ───────────────────────────────────────────────── */
.quote-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2vw, 1.6rem);
}

.quote{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.7rem 1.7rem;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 0 1px var(--line-l);
  overflow: hidden;
}
.quote::before{
  content: '\201C';
  position: absolute; top: -.6rem; right: 1.15rem;
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .3;
  pointer-events: none;
}

.quote__stars{ display: flex; gap: .18rem; margin-bottom: 1.1rem; }
.quote__stars svg{ width: 1rem; height: 1rem; color: var(--magenta-lt); }

.quote blockquote p{
  font-size: 1rem;
  color: rgba(255,255,255,.88);
  text-wrap: pretty;
}

.quote__by{
  display: grid;
  gap: .2rem;
  margin-top: auto;              /* aligns attributions across cards */
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-l);
}
.quote__name{
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 50;
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
}
.quote__role{
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--text-l-mute);
}

/* ── 10. Team ──────────────────────────────────────────────────────── */
.team-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.1rem, 2vw, 1.6rem);
}

.member{ text-align: left; }
.member__photo{
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(160deg, #2B1A52, #6D3A8F 55%, #B14A8E);
  box-shadow: 0 18px 40px -24px rgba(23,19,42,.6);
}
.member__photo::before{
  content: attr(data-initials);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 90;
  font-weight: 500;
  font-size: 2.6rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.5);
}
.member__photo::after{
  content: '';
  position: absolute; inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center top;
  transition: scale .5s var(--ease);
}
.member:hover .member__photo::after{ scale: 1.05; }

.member__name{
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 50;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  margin-top: 1rem;
}
.member__role{
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet);
  margin-top: .3rem;
}

/* ── 11. Contact ───────────────────────────────────────────────────── */
.contact__grid{
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.contact-list{
  display: grid;
  gap: .95rem;
  margin-top: 2.25rem;
}
.contact-list li{
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: .98rem;
  color: rgba(255,255,255,.86);
}
.contact-list svg{
  width: 2.4rem; height: 2.4rem; flex: none;
  padding: .6rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px var(--line-l);
  color: var(--magenta-lt);
}
.contact-list a:hover{ color: var(--magenta-lt); }

.contact__intro .btn--wa{ margin-top: 2.1rem; }

.contact__panel{
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 0 1px var(--line-l);
  backdrop-filter: blur(6px);
}

.form{ display: grid; gap: 1.05rem; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
.field{ display: grid; gap: .4rem; }
.field label{
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-l-mute);
}
.field label span{ color: var(--magenta-lt); }

.field input,
.field select,
.field textarea{
  width: 100%;
  padding: .8rem .95rem;
  border: 1px solid var(--line-l);
  border-radius: var(--r-sm);
  background: rgba(10,8,18,.5);
  color: #fff;
  font-size: .95rem;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea{ resize: vertical; min-height: 108px; }
.field input::placeholder,
.field textarea::placeholder{ color: rgba(255,255,255,.36); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--magenta);
  background: rgba(10,8,18,.75);
}
.field select option{ background: var(--ink-raised); color: #fff; }

.field__err{
  font-size: .78rem;
  color: var(--magenta-lt);
  min-height: 0;
}
.field.has-err input,
.field.has-err select,
.field.has-err textarea{ border-color: var(--magenta); }

.hp{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__error{
  padding: .75rem 1rem;
  border-radius: var(--r-sm);
  background: rgba(233,83,155,.14);
  box-shadow: inset 0 0 0 1px rgba(233,83,155,.45);
  color: var(--magenta-lt);
  font-size: .88rem;
}

.form__note{
  font-size: .78rem;
  color: var(--text-l-mute);
  text-align: center;
}

.form__done{ text-align: center; padding: 1.5rem .5rem; }
.form__tick{
  width: 3.2rem; height: 3.2rem;
  margin: 0 auto 1.1rem;
  padding: .8rem;
  border-radius: var(--r-pill);
  background: var(--grad);
  color: #fff;
}
.form__done h3{
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 70;
  font-weight: 600;
  font-size: 1.5rem;
  color: #fff;
}
.form__done p{ margin-top: .6rem; color: var(--text-l-mute); }
.form__done a{ color: var(--magenta-lt); text-decoration: underline; }

/* ── 12. Footer ────────────────────────────────────────────────────── */
.footer{
  background: var(--ink);
  color: var(--text-l);
  border-top: 1px solid var(--line-l);
  padding-top: clamp(3rem, 5vw, 4.5rem);
}
.footer__grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.footer__tag{
  max-width: 34ch;
  margin-top: 1.2rem;
  font-size: .92rem;
  color: var(--text-l-mute);
}
.footer__head{
  position: relative;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: .8rem;
  margin-bottom: 1.1rem;
}
.footer__head::after{
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 32px; height: 2px;
  background: var(--grad);
  border-radius: 2px;
}
.footer__links{ display: grid; gap: .65rem; font-size: .92rem; }
.footer__links a{ color: var(--text-l-mute); transition: color .2s var(--ease); }
.footer__links a:hover{ color: #fff; }
.footer__links--icon li{ display: flex; align-items: center; gap: .65rem; }
.footer__links--icon svg{ width: 1.1rem; height: 1.1rem; flex: none; color: var(--magenta-lt); }
.footer__links--icon span{ color: var(--text-l-mute); }

.socials{ display: flex; gap: .6rem; margin-top: 1.4rem; }
.socials a{
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px var(--line-l);
  color: #fff;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.socials a svg{ width: 1.15rem; height: 1.15rem; }
.socials a:hover{ background: var(--grad); transform: translateY(-3px); }

.footer__bottom{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-block: 1.3rem;
  border-top: 1px solid var(--line-l);
  font-size: .82rem;
  color: var(--text-l-mute);
}
.footer__bottom a:hover{ color: #fff; }

/* ── Scroll reveal ─────────────────────────────────────────────────── */
.js [data-reveal]{
  opacity: 0;
  translate: 0 22px;
  transition: opacity .75s var(--ease), translate .75s var(--ease);
}
.js [data-reveal].is-in{ opacity: 1; translate: none; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1080px){
  /* backdrop-filter would make .header the containing block for the
     fixed off-canvas .nav, collapsing it to header height. */
  .header,
  .header.is-scrolled{
    backdrop-filter: none;
    background: var(--ink);
  }

  .nav{
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 120;
    width: min(340px, 84vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 5.5rem 1.75rem 2rem;
    background: var(--ink-raised);
    border-left: 1px solid var(--line-l);
    translate: 100% 0;
    /* visibility keeps the closed panel out of the tab order */
    visibility: hidden;
    transition: translate .38s var(--ease), visibility .38s var(--ease);
    overflow-y: auto;
  }
  .nav.is-open{ translate: none; visibility: visible; }
  .nav__list{ flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a{
    display: block;
    padding-block: .95rem;
    border-bottom: 1px solid var(--line-l);
    font-size: 1rem;
  }
  .nav__list a::after{ display: none; }
  .nav__cta{ margin-top: 1.75rem; justify-content: center; }
  .nav__toggle{ display: grid; }
  .nav__close{ display: grid; position: absolute; top: 1.1rem; right: 1.1rem; }

  /* Below .header (z-index 100), because .nav is fixed *inside* the header's
     stacking context — a higher backdrop would paint over the open panel. */
  body.is-menu::before{
    content: '';
    position: fixed; inset: 0; z-index: 90;
    background: rgba(6,4,14,.66);
    backdrop-filter: blur(3px);
  }
  body.is-menu{ overflow: hidden; }
}

@media (max-width: 980px){
  .about__grid,
  .contact__grid{ grid-template-columns: 1fr; }
  .about__media{ order: -1; max-width: 620px; }
  .svc-grid,
  .quote-grid{ grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .team-grid{ grid-template-columns: repeat(2, 1fr); }
  .logo-grid{ grid-template-columns: repeat(4, 1fr); }
  .clients__cta{ justify-content: flex-start; }
}

@media (max-width: 640px){
  :root{ --header-h: 66px; }
  .logo-grid{ grid-template-columns: repeat(2, 1fr); }
  .logo-card{ min-height: 84px; }
  .field-row{ grid-template-columns: 1fr; }
  .hero__actions .btn{ flex: 1 1 100%; justify-content: center; }
  .stats{ gap: 1.5rem; }
  .stat + .stat::before{ display: none; }
  .shot--main{ aspect-ratio: 4 / 3; }
  .brand__mark{ width: 39px; height: 26px; }
  .brand__name{ font-size: 1.3rem; }
  .brand__sub{ font-size: .52rem; letter-spacing: .32em; }
  .footer__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 420px){
  .team-grid{ grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; }
  .about__media{ grid-template-columns: 1fr; }
  .shot--main{ grid-row: auto; aspect-ratio: 4 / 3; }
  .shot--a, .shot--b{ grid-column: 1; }
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal]{ opacity: 1; translate: none; }
}

/* ── Print ─────────────────────────────────────────────────────────── */
@media print{
  .header, .hero__stage, .wash, .nav__toggle, .socials{ display: none !important; }
  body{ background: #fff; color: #000; }
  .section--dark, .section--plum, .footer, .hero{ background: #fff !important; color: #000 !important; }
}