/* ==========================================================================
   Attica Lawyers — Home Demo «Λευκό Κύρος / Quiet Authority»
   Preview-only homepage proposal. All rules are scoped under .al2 / .is-home-demo
   so nothing leaks into the live front page. Institutional white canvas
   (Zeya / PotamitisVekris) + V Group's cinematic premium; one gold accent used
   only as hairline / underline / numeral. NO left-border accent strips anywhere.
   ========================================================================== */

.al2 {
  /* — palette — */
  --al2-paper:      #ffffff;
  --al2-mist:       #f6f5f2;
  --al2-ink:        #1a1f2b;
  --al2-ink-muted:  #5b6270;
  --al2-ink-faint:  #9aa0ac;
  --al2-navy-deep:  #10141e;
  --al2-gold:       #b0894c;
  --al2-gold-deep:  #94703a;
  --al2-gold-bright:#cba468;  /* gold for hover on dark panels */
  --al2-hairline:   #e6e4df;
  --al2-hairline-d: rgba(255,255,255,.16);  /* hairline on dark panels */
  --al2-scrim:      rgba(16,20,30,.55);

  /* — type — */
  --al2-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --al2-sans:  "Geologica", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* — metrics — */
  --al2-container: 1200px;
  --al2-measure:   620px;
  --al2-gutter:    clamp(1.25rem, 5vw, 4rem);
  --al2-section-y: clamp(6rem, 11vw, 10rem);
  --al2-ease:      cubic-bezier(.22,.61,.36,1);
}

/* Page surface — override the theme's warm-ivory body just for this template. */
body.is-home-demo {
  background: var(--al2-paper);
  color: var(--al2-ink);
}
.al2 { font-family: var(--al2-sans); color: var(--al2-ink); }
.al2 .al-container { max-width: var(--al2-container); }
body.is-home-demo .al-header__inner { max-width: var(--al2-container); }

/* Shared editorial primitives ------------------------------------------------ */
.al2-eyebrow {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  margin: 0 0 1.25rem;
  font-family: var(--al2-sans);
  font-size: .6875rem;          /* 11px */
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--al2-ink-faint);
}
.al2-num {
  font-family: var(--al2-serif);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--al2-gold);
  font-feature-settings: "lnum" 1;
}
.al2-h2 {
  margin: 0;
  font-family: var(--al2-serif);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--al2-ink);
}
.al2-lead {
  margin: 0;
  max-width: var(--al2-measure);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--al2-ink-muted);
}
.al2-section { padding: var(--al2-section-y) 0; }
.al2-section--mist { background: var(--al2-mist); }

/* A gold underline that grows on hover (the Zeya indicator), reused by links. */
.al2-ulink {
  position: relative;
  color: var(--al2-ink);
  text-decoration: none;
  padding-bottom: 2px;
  transition: color .25s var(--al2-ease);
}
.al2-ulink::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--al2-gold);
  transition: width .3s var(--al2-ease);
}
.al2-ulink:hover { color: var(--al2-gold-deep); }
.al2-ulink:hover::after { width: 100%; }

/* Sharp-cornered ghost button — fills with ink on hover. No radius, no shadow. */
.al2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border: 1px solid var(--al2-ink);
  border-radius: 0;
  background: transparent;
  color: var(--al2-ink);
  font-family: var(--al2-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .3s var(--al2-ease), color .3s var(--al2-ease);
}
.al2-btn:hover { background: var(--al2-ink); color: #fff; }
.al2-arrow { display: inline-block; transition: transform .25s var(--al2-ease); }
.al2-contact__directions:hover .al2-arrow { transform: translateX(4px); }

/* ==========================================================================
   Header theming — transparent + white over the film hero, solid on scroll
   ========================================================================== */
body.is-home-demo .al-header {
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--al2-ease), border-color .4s var(--al2-ease);
}
/* The masthead adapts to the panel currently beneath it. home-demo.js toggles
   body.al2-on-dark by reading the data-theme of the section under the header. */

/* Over a DARK panel → white logo + ivory nav. */
body.is-home-demo.al2-on-dark .al-brand__logo { filter: brightness(0) invert(1); }
body.is-home-demo.al2-on-dark .al-nav__link,
body.is-home-demo.al2-on-dark .al-lang__link,
body.is-home-demo.al2-on-dark .al-lang__sep,
body.is-home-demo.al2-on-dark .al-burger__label { color: #fff; }
body.is-home-demo.al2-on-dark .al-burger__box span { background: #fff; }
body.is-home-demo.al2-on-dark .al-nav__link:hover,
body.is-home-demo.al2-on-dark .al-lang__link.is-active { color: var(--al2-gold-bright); }
body.is-home-demo.al2-on-dark .al-header.is-scrolled {
  background: rgba(16,20,30,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: var(--al2-hairline-d);
}

/* Over a LIGHT panel → ink logo + ink nav. */
body.is-home-demo:not(.al2-on-dark) .al-brand__logo { filter: none; }
body.is-home-demo:not(.al2-on-dark) .al-nav__link,
body.is-home-demo:not(.al2-on-dark) .al-lang__link { color: var(--al2-ink); }
body.is-home-demo:not(.al2-on-dark) .al-nav__link:hover,
body.is-home-demo:not(.al2-on-dark) .al-lang__link.is-active { color: var(--al2-gold-deep); }
body.is-home-demo:not(.al2-on-dark) .al-header.is-scrolled {
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: var(--al2-hairline);
}

/* ==========================================================================
   1 · Hero — pinned cinematic film
   ========================================================================== */
.al2-hero { position: sticky; top: 0; height: 100svh; min-height: 100svh; z-index: 1; }
.al2-hero__pin {
  position: static;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.al2-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--al2-navy-deep); }
.al2-hero__video,
.al2-hero__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Slow cinematic drift (V Group). Disabled for reduced-motion below. */
.al2-hero__video { animation: al2-ken 26s ease-in-out infinite alternate; }
@keyframes al2-ken { from { transform: scale(1.05); } to { transform: scale(1.13); } }
.al2-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,20,30,.62) 0%, rgba(16,20,30,.28) 32%, rgba(16,20,30,.30) 64%, rgba(16,20,30,.74) 100%);
}
.al2-hero__grain {
  position: absolute; inset: 0;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.al2-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(4rem, 12vh, 9rem);
  color: #fff;
}
.al2-hero__eyebrow { color: rgba(255,255,255,.82); margin-bottom: 1.5rem; }
.al2-hero__title {
  position: relative;
  margin: 0;
  min-height: clamp(8rem, 28vh, 17rem);
}
.al2-hero__line {
  position: absolute;
  left: 0; top: 0;
  max-width: 18ch;
  margin: 0;
  overflow: hidden;
  padding-bottom: .1em;
  opacity: 0;
  transition: opacity .9s var(--al2-ease);
  pointer-events: none;
}
.al2-hero__line.is-stage { opacity: 1; pointer-events: auto; }
.al2-hero__line-inner {
  display: block;
  font-family: var(--al2-serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 5.6vw, 5.6rem);
  line-height: 1.05;
  letter-spacing: -.012em;
  color: #fff;
  transform: translateY(112%);
  transition: transform 1.05s var(--al2-ease);
}
.al2-hero__line.is-stage .al2-hero__line-inner { transform: none; }

/* Sound toggle — minimal, bottom-right, gold underline label. */
.al2-hero__sound {
  position: absolute;
  right: var(--al2-gutter);
  bottom: clamp(1.5rem, 4vh, 2.75rem);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.al2-hero__sound-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--al2-gold);
  padding-bottom: 2px;
}
.al2-hero__sound-icon { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; }
.al2-hero__sound-icon i {
  width: 2px; height: 5px;
  background: var(--al2-gold);
  transform-origin: bottom;
  animation: al2-eq 1.1s var(--al2-ease) infinite;
}
.al2-hero__sound-icon i:nth-child(2) { animation-delay: .18s; }
.al2-hero__sound-icon i:nth-child(3) { animation-delay: .36s; }
.al2-hero__sound-icon i:nth-child(4) { animation-delay: .54s; }
.al2-hero__sound[aria-pressed="true"] .al2-hero__sound-icon i { animation-duration: .55s; }
@keyframes al2-eq { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(2.4); } }

.al2-hero__scroll {
  position: absolute;
  left: 50%; bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  color: rgba(255,255,255,.7);
  text-decoration: none;
}
.al2-hero__scroll-label { font-size: .625rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.al2-hero__scroll-line { width: 1px; height: 38px; background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,0)); }
.al2-hero__scroll-line::after {
  content: ""; display: block; width: 1px; height: 10px; margin: 0 auto;
  background: var(--al2-gold);
  animation: al2-scroll 1.8s var(--al2-ease) infinite;
}
@keyframes al2-scroll { 0% { transform: translateY(-12px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(28px); opacity: 0; } }

/* ==========================================================================
   Reach — full-bleed cinematic Athens video panel
   ========================================================================== */
.al2-reach { position: relative; overflow: hidden; color: #fff; }
.al2-reach__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--al2-navy-deep); }
.al2-reach__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.al2-reach__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,20,30,.74) 0%, rgba(16,20,30,.5) 42%, rgba(16,20,30,.82) 100%);
}
.al2-reach__inner { position: relative; z-index: 2; }
.al2-reach .al2-eyebrow { color: rgba(255,255,255,.7); }
.al2-reach__title { max-width: 16ch; color: #fff; }
.al2-reach__lead {
  margin: clamp(1.4rem, 2.5vw, 2rem) 0 0;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.6;
  color: rgba(255,255,255,.82);
}

/* Ethos — centred maxim over the justice video. */
.al2-ethos__inner { max-width: 940px; margin: 0 auto; text-align: center; }
.al2-ethos .al2-eyebrow { justify-content: center; color: rgba(255,255,255,.7); }
.al2-ethos__quote {
  margin: 0;
  font-family: var(--al2-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.9rem, 3.8vw, 3.6rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: #fff;
}
.al2-ethos__cite {
  display: block;
  margin-top: clamp(1.4rem, 2.5vw, 2rem);
  font-style: normal;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--al2-gold-bright);
}

/* ==========================================================================
   2 · Intro — The Firm (lead + three values)
   ========================================================================== */
.al2-intro__head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.al2-intro__lead { padding-top: .4rem; }

.al2-values {
  list-style: none;
  margin: clamp(4rem, 8vw, 7rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--al2-hairline);
}
.al2-value {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--al2-hairline);
}
.al2-value__no {
  font-family: var(--al2-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--al2-gold);
}
.al2-value__title {
  margin: 0;
  font-family: var(--al2-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  line-height: 1.15;
  color: var(--al2-ink);
}
.al2-value__text {
  margin: .6rem 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--al2-ink-muted);
  max-width: 46ch;
}
@media (min-width: 880px) {
  .al2-value {
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.2fr);
  }
  .al2-value__text { margin-top: 0; }
}

/* ==========================================================================
   3 · Stats — at a glance (inverted dark beat)
   ========================================================================== */
.al2-stats { background: var(--al2-navy-deep); color: #fff; }
.al2-stats__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin: 0;
}
.al2-stat { text-align: left; }
.al2-stat__num {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--al2-serif);
  font-weight: 300;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  color: #fff;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--al2-gold);
}
.al2-stat__suffix { font-size: .55em; color: var(--al2-gold); margin-left: .1em; }
.al2-stat__label {
  margin: 1rem 0 0;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

/* ==========================================================================
   4 · Practice — typographic index
   ========================================================================== */
.al2-practice__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.al2-practice__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  border-top: 1px solid var(--al2-hairline);
}
.al2-practice__item { border-bottom: 1px solid var(--al2-hairline); }
.al2-practice__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  color: var(--al2-ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.0625rem;
}
.al2-practice__name { position: relative; }
.al2-practice__name::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--al2-gold);
  transition: width .3s var(--al2-ease);
}
.al2-practice__link:hover .al2-practice__name { color: var(--al2-gold-deep); }
.al2-practice__link:hover .al2-practice__name::after { width: 100%; }
.al2-practice__arrow {
  color: var(--al2-gold);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s var(--al2-ease), transform .25s var(--al2-ease);
}
.al2-practice__link:hover .al2-practice__arrow { opacity: 1; transform: none; }
.al2-practice__link--plain { color: var(--al2-ink-muted); cursor: default; }

/* ==========================================================================
   5 · Team — B&W portrait grid
   ========================================================================== */
.al2-team__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.al2-team__carousel { position: relative; }
.al2-team__swiper { overflow: hidden; }
.al2-team .swiper-slide { height: auto; }
.al-team__nav { display: flex; gap: .75rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.al-team__prev,
.al-team__next {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--al2-hairline);
  background: transparent; color: var(--al2-ink);
  border-radius: 0; cursor: pointer; font-size: 1rem;
  transition: background-color .25s var(--al2-ease), color .25s var(--al2-ease), border-color .25s var(--al2-ease);
}
.al-team__prev:hover,
.al-team__next:hover { background: var(--al2-ink); color: #fff; border-color: var(--al2-ink); }
.al-team__prev.swiper-button-disabled,
.al-team__next.swiper-button-disabled { opacity: .3; pointer-events: none; }
.al2-member { margin: 0; }
.al2-member__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: var(--al2-mist);
  cursor: pointer;
  overflow: hidden;
}
.al2-member__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
  transition: filter .5s var(--al2-ease), transform .9s var(--al2-ease);
}
.al2-member__media:hover img { filter: grayscale(0); transform: scale(1.035); }
.al2-member__media--empty { display: grid; place-items: center; aspect-ratio: 1 / 1; }
.al2-member__initial { font-family: var(--al2-serif); font-size: 3rem; color: var(--al2-ink-faint); }
.al2-member__plus {
  position: absolute;
  right: 14px; bottom: 14px;
  width: 30px; height: 30px;
  background: rgba(16,20,30,.55);
  opacity: 0;
  transition: opacity .3s var(--al2-ease);
}
.al2-member__plus::before,
.al2-member__plus::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
.al2-member__plus::before { width: 11px; height: 1px; }
.al2-member__plus::after  { width: 1px; height: 11px; }
.al2-member__media:hover .al2-member__plus,
.al2-member__media:focus-visible .al2-member__plus { opacity: 1; }
.al2-member__info { margin-top: 1.1rem; }
.al2-member__name {
  margin: 0;
  font-family: var(--al2-serif);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--al2-ink);
}
.al2-member__role {
  margin: .4rem 0 0;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--al2-ink-faint);
}
.al2-member__langs { margin: .35rem 0 0; font-size: .82rem; color: var(--al2-ink-muted); }

/* ==========================================================================
   6 · Contact — coordinates + interactive map
   ========================================================================== */
.al2-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.al2-contact__list { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.al2-contact__row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--al2-hairline);
}
.al2-contact__row:first-child { border-top: 1px solid var(--al2-hairline); }
.al2-contact__label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--al2-ink-faint);
  padding-top: .15rem;
}
.al2-contact__value { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--al2-ink); }
.al2-contact__social {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.al2-contact__cta {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
}
.al2-contact__directions { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.al2-contact__map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  border: 1px solid var(--al2-hairline);
  overflow: hidden;
  background: var(--al2-mist);
}
.al2-contact__map-frame iframe {
  filter: grayscale(.85) contrast(1.05);
  transition: filter .45s var(--al2-ease);
}
.al2-contact__map-frame:hover iframe,
.al2-contact__map-frame:focus-within iframe { filter: grayscale(0); }

/* ==========================================================================
   Scroll-reveal engine — content enters beautifully as you scroll
   (PotamitisVekris fade-up + heading mask reveals + image clip-wipes;
   driven by home-demo.js' [data-r] IntersectionObserver, staggered via --rd)
   ========================================================================== */

/* a · Fade-up (default for text/blocks). */
.al2 [data-r="up"] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity .95s ease var(--rd, 0s),
    transform .95s cubic-bezier(.25,.46,.45,.94) var(--rd, 0s);
  will-change: opacity, transform;
}
.al2 [data-r="up"].r-in { opacity: 1; transform: none; }

/* b · Heading MASK reveal — the inner line rises from behind a clip. */
.al2 [data-r="mask"] { overflow: hidden; padding-bottom: .08em; }
.al2 [data-r="mask"] > * {
  display: block;
  transform: translateY(112%);
  transition: transform 1.05s cubic-bezier(.16,1,.3,1) var(--rd, 0s);
  will-change: transform;
}
.al2 [data-r="mask"].r-in > * { transform: none; }

/* c · Image CLIP-wipe — reveals bottom→up. The clip lives on the INNER media,
   never on the observed element itself: a target clipped to zero area reports
   intersectionRatio 0 to IntersectionObserver and would never trigger. */
.al2 [data-r="img"] > img,
.al2 [data-r="img"] > iframe {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.25s cubic-bezier(.16,1,.3,1) var(--rd, 0s);
}
.al2 [data-r="img"].r-in > img,
.al2 [data-r="img"].r-in > iframe { clip-path: inset(0 0 0 0); }

/* Subtle parallax targets get GPU compositing; transform set by JS. */
.al2 [data-pll] { will-change: transform; }

/* No-JS fallback — never leave content hidden if the observer can't run. */
.no-js .al2 [data-r] { opacity: 1 !important; transform: none !important; }
.no-js .al2 [data-r="mask"] > *,
.no-js .al2 [data-r="img"] > img,
.no-js .al2 [data-r="img"] > iframe { transform: none !important; clip-path: none !important; }
.no-js .al2-hero__line { opacity: 1; }
.no-js .al2-hero__line-inner { transform: none; }
.no-js .al2-hero__line[data-stage="2"],
.no-js .al2-hero__line[data-stage="3"] { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .al2-practice__list { grid-template-columns: repeat(2, 1fr); }
  .al2-team__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 2.5rem); }
}
@media (max-width: 860px) {
  .al2-intro__head { grid-template-columns: 1fr; gap: 2rem; }
  .al2-contact__grid { grid-template-columns: 1fr; }
  .al2-stats__row { grid-template-columns: repeat(2, 1fr); row-gap: clamp(2.5rem, 8vw, 3.5rem); }
  .al2-hero { height: 200vh; }
  .al2-contact__map-frame { aspect-ratio: 16 / 11; }
}
@media (max-width: 560px) {
  .al2-practice__list { grid-template-columns: 1fr; }
  .al2-team__grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .al2-value { grid-template-columns: 1fr; gap: .5rem; }
  .al2-value__no { display: none; }
  .al2-stats__row { grid-template-columns: 1fr 1fr; }
  .al2-hero__sound { right: var(--al2-gutter); }
}

/* ==========================================================================
   Reduced motion — freeze the hero, drop reveals & decorative motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .al2-hero { height: auto; margin-top: calc(-1 * var(--al-header-h, 76px)); }
  .al2-hero__pin { position: static; height: 100svh; }
  .al2-hero__line { position: relative; opacity: 1; transition: none; }
  .al2-hero__line-inner { transform: none; transition: none; }
  .al2-hero__line[data-stage="2"],
  .al2-hero__line[data-stage="3"] { display: none; }
  .al2-hero__video { animation: none; transform: none; }
  .al2-hero__sound-icon i,
  .al2-hero__scroll-line::after { animation: none; }
  /* Reveals resolve instantly; no parallax. */
  .al2 [data-r] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .al2 [data-r="mask"] > *,
  .al2 [data-r="img"] > img,
  .al2 [data-r="img"] > iframe { transform: none !important; clip-path: none !important; transition: none !important; }
  .al2 [data-pll] { transform: none !important; }
  .al2-member__media img,
  .al2-contact__map-frame iframe { transition: none; }
}

/* ==========================================================================
   V GROUP CHOREOGRAPHY — alternating dark/light panels that SLIDE OVER each
   other (overlap + z-index ladder + fade-top blend). The film hero stays the
   pinned centerpiece; the masthead theme follows the panel beneath it (JS).
   ========================================================================== */

/* STACKING — every panel PINS at the top and the NEXT panel slides up over it
   (V Group's signature). Panels are full-screen & solid, with a z-index ladder so
   later panels paint above earlier ones. (Desktop; mobile scrolls normally.) */
.al2 > section {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.al2 > section:nth-child(1) { z-index: 1; }   /* hero  */
.al2 > section:nth-child(2) { z-index: 2; }   /* intro */
.al2 > section:nth-child(3) { z-index: 3; }   /* stats */
.al2 > section:nth-child(4) { z-index: 4; }   /* reach (Athens video) */
.al2 > section:nth-child(5) { z-index: 5; }   /* practice */
.al2 > section:nth-child(6) { z-index: 6; }   /* team */
.al2 > section:nth-child(7) { z-index: 7; }   /* ethos (justice video) */
.al2 > section:nth-child(8) { z-index: 8; }   /* contact */

/* Colour panels (solid — each fully covers the one beneath as it rises). */
.al2-section--dark  { --al2-bg: var(--al2-navy-deep); background: var(--al2-navy-deep); color: #fff; }
.al2-section--light { --al2-bg: var(--al2-paper);     background: var(--al2-paper);     color: var(--al2-ink); }

/* Soft shadow on the rising top edge → depth as the panel slides over. */
.al2-over { box-shadow: 0 -40px 70px -40px rgba(6,9,15,.6); }

/* Centred content clears the fixed masthead inside each full-screen panel. */
.al2-section { padding: calc(var(--al-header-h, 84px) + 2vh) 0 5vh; }

/* — dark-panel text theming — */
.al2-section--dark .al2-eyebrow { color: rgba(255,255,255,.55); }
.al2-section--dark .al2-h2 { color: #fff; }
.al2-section--dark .al2-lead { color: rgba(255,255,255,.74); }
.al2-section--dark .al2-values,
.al2-section--dark .al2-value { border-color: var(--al2-hairline-d); }
.al2-section--dark .al2-value__title { color: #fff; }
.al2-section--dark .al2-value__text { color: rgba(255,255,255,.6); }
.al2-section--dark .al2-practice__list,
.al2-section--dark .al2-practice__item { border-color: var(--al2-hairline-d); }
.al2-section--dark .al2-practice__link { color: #fff; }
.al2-section--dark .al2-practice__link:hover .al2-practice__name { color: var(--al2-gold-bright); }
.al2-section--dark .al2-practice__link--plain { color: rgba(255,255,255,.5); }
.al2-section--dark .al2-contact__row { border-bottom-color: var(--al2-hairline-d); }
.al2-section--dark .al2-contact__row:first-child { border-top-color: var(--al2-hairline-d); }
.al2-section--dark .al2-contact__label { color: rgba(255,255,255,.5); }
.al2-section--dark .al2-contact__value { color: #fff; }
.al2-section--dark .al2-ulink { color: rgba(255,255,255,.82); }
.al2-section--dark .al2-ulink:hover { color: var(--al2-gold-bright); }
.al2-section--dark .al2-btn { border-color: rgba(255,255,255,.5); color: #fff; }
.al2-section--dark .al2-btn:hover { background: #fff; color: var(--al2-ink); border-color: #fff; }
.al2-section--dark .al2-contact__map-frame { border-color: var(--al2-hairline-d); }

/* — stats flipped to a LIGHT panel — */
.al2-stats.al2-section--light { background: var(--al2-paper); color: var(--al2-ink); }
.al2-section--light .al2-stat__num { color: var(--al2-ink); }
.al2-section--light .al2-stat__label { color: var(--al2-ink-faint); }

/* Reduced-motion + small screens: NO pinning — clean stacked panels that scroll
   normally (avoids clipping the taller practice/team panels when pinned). */
@media (prefers-reduced-motion: reduce) {
  .al2 > section { position: relative; min-height: 0; }
}
@media (max-width: 860px) {
  .al2 > section { position: relative; min-height: 0; display: block; }
  .al2-section { padding: clamp(4rem, 12vw, 6rem) 0; }
}