:root {
  --ink: #171717;
  --muted: #777;
  --line: #e8e8e8;
  --green: #58d26a;
  --dark: #0d0f0e;
  --dark2: #141715;
  --max: 1600px
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300
}

a {
  color: inherit;
  text-decoration: none
}

img {
  max-width: 100%;
  display: block;
  -webkit-user-drag: none;
  user-select: none
}

.wrap {
  width: min(var(--max), calc(100% - 112px));
  margin: auto
}

header {
  height: 92px;
  display: flex;
  align-items: center
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  gap: 20px
}

.brand {
  letter-spacing: .22em;
  font-size: 18px
}

nav {
  display: flex;
  gap: 32px;
  font-size: 13px
}

nav a {
  padding: 8px 0;
  border-bottom: 1px solid transparent
}

nav a.active {
  border-color: var(--ink)
}

.lang {
  justify-self: end;
  font-size: 12px
}

.hero {
  min-height: calc(100vh - 92px);
  display: grid;
  place-items: center;
  padding: 28px 0 60px
}

.hero img {
  width: min(780px, 76vw);
  max-height: 72vh;
  object-fit: contain
}

.section {
  padding: 74px 0
}

.manifesto {
  display: grid;
  grid-template-columns: minmax(320px, 500px) minmax(0, 1fr);
  gap: 96px;
  align-items: start
}

.manifesto h1,
.project-copy h1 {
  font-size: 32px;
  letter-spacing: .12em;
  font-weight: 300;
  margin: 0 0 26px
}

.manifesto p,
.project-copy p,
.about-grid p,
.contact-grid p {
  font-size: 15px;
  line-height: 1.8;
  color: #4d4d4d
}

.project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px 52px
}

.card img {
  aspect-ratio: 1.55;
  object-fit: cover
}

.card h2 {
  font-size: 15px;
  font-weight: 300;
  margin: 12px 0;
  text-align: center
}

.project-layout {
  display: grid;
  grid-template-columns: minmax(300px, 32%) minmax(0, 1fr);
  gap: 96px;
  align-items: start
}

.project-copy {
  position: sticky;
  top: 36px
}

.project-copy .kicker {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 24px
}

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px
}

.thumb-grid button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer
}

.thumb-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover
}

.video-list {
  max-width: 1180px;
  margin: auto
}

.video-intro {
  max-width: 650px;
  margin-bottom: 50px;
  font-size: 16px;
  line-height: 1.7;
  color: #555
}

.video-item {
  display: grid;
  grid-template-columns: 58% 1fr;
  gap: 36px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: center
}

.video-box {
  position: relative;
  aspect-ratio: 16/9;
  background: #eee;
  overflow: hidden
}

.video-box img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 38px;
  color: #fff;
  text-shadow: 0 1px 8px #333
}

.video-meta h2 {
  font-size: 24px;
  letter-spacing: .08em;
  font-weight: 300;
  margin: 0 0 12px
}

.video-meta p {
  font-size: 14px;
  color: #666;
  line-height: 1.6
}

.about-grid,
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 46%);
  gap: 110px;
  align-items: start
}

.about-grid img,
.contact-grid img {
  width: 100%;
  max-height: 680px;
  object-fit: cover
}

.form {
  display: grid;
  gap: 12px;
  margin-top: 30px
}

.form input,
.form textarea {
  font: inherit;
  font-weight: 300;
  padding: 14px;
  border: 1px solid #ddd
}

.form textarea {
  min-height: 150px
}

.form button {
  width: max-content;
  background: #171717;
  color: #fff;
  border: 0;
  padding: 13px 24px;
  letter-spacing: .12em
}

footer {
  border-top: 1px solid var(--line);
  margin-top: 80px;
  padding: 28px 0 44px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #777
}

.lightbox {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 42px 72px
}

.lightbox.open {
  display: flex
}

.lightbox img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain
}

.lb-close,
.lb-prev,
.lb-next {
  position: fixed;
  background: none;
  border: 0;
  color: #222;
  font-size: 28px;
  cursor: pointer
}

.lb-close {
  right: 28px;
  top: 20px
}

.lb-prev {
  left: 22px;
  top: 50%
}

.lb-next {
  right: 22px;
  top: 50%
}

.lb-count {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #777
}

body.dark {
  background: var(--dark);
  color: #f5f5f5
}

body.dark nav a.active {
  border-color: var(--green);
  color: var(--green)
}

.dark .ay-hero {
  display: grid;
  grid-template-columns: 46% 1fr;
  min-height: 520px;
  align-items: center;
  gap: 54px;
  padding: 44px 0
}

.dark .ay-hero img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  filter: grayscale(100%)
}

.ay-title {
  font-size: 48px;
  letter-spacing: .12em;
  font-weight: 300;
  margin: 0 0 24px
}

.ay-title b {
  color: var(--green);
  font-weight: 300
}

.ay-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #2a302b;
  border: 1px solid #2a302b
}

.ay-feature {
  background: var(--dark2);
  padding: 28px 22px;
  min-height: 150px
}

.ay-feature strong {
  color: var(--green);
  font-weight: 400;
  display: block;
  margin-bottom: 8px
}

.ay-event {
  margin-top: 44px;
  border: 1px solid var(--green);
  padding: 28px;
  font-size: 18px;
  line-height: 1.6
}

.ay-event b {
  color: var(--green)
}

body.dark footer {
  border-color: #252925;
  color: #909690
}

@media(max-width:850px) {
  .wrap {
    width: min(100% - 34px, var(--max))
  }

  .nav {
    grid-template-columns: 1fr auto
  }

  nav {
    display: none
  }

  .hero img {
    width: 92vw
  }

  .manifesto,
  .project-layout,
  .about-grid,
  .contact-grid,
  .dark .ay-hero {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .project-copy {
    position: static
  }

  .project-grid {
    grid-template-columns: 1fr
  }

  .thumb-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .thumb-grid img {
    height: 180px
  }

  .video-item {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .ay-features {
    grid-template-columns: 1fr 1fr
  }

  .lightbox {
    padding: 38px 28px
  }
}


/* ===== V3 layout overrides ===== */
header .wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 64px !important;
  padding-right: 64px !important;
}

.brand {
  text-transform: lowercase !important;
  letter-spacing: .16em !important;
  font-weight: 300 !important;
}

.lang {
  padding-right: 0 !important;
}

@media (min-width:1400px) {
  header .wrap {
    padding-left: 88px !important;
    padding-right: 88px !important;
  }
}

/* Home: large image with visible white passepartout */
.hero {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - 92px) !important;
  padding: 26px 54px 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-slideshow {
  position: relative;
  width: 100%;
  height: calc(100vh - 172px);
  min-height: 560px;
  max-height: 920px;
  overflow: hidden;
  background: #fff;
}

.hero-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  opacity: 0;
  transition: opacity 2.4s ease-in-out;
}

.hero-slide.active {
  opacity: 1
}

/* Internal pages: wider, but text columns remain readable */
.section.wrap {
  width: min(1500px, calc(100% - 96px)) !important;
}

.manifesto {
  grid-template-columns: minmax(320px, 460px) minmax(0, 1fr) !important;
  gap: 110px !important;
}

.project-layout {
  grid-template-columns: minmax(300px, 30%) minmax(0, 1fr) !important;
  gap: 110px !important;
}

.video-list {
  max-width: 1260px !important
}

.about-grid,
.contact-grid {
  gap: 120px !important
}

@media(max-width:850px) {
  header .wrap {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .hero {
    padding: 18px 18px 34px !important;
  }

  .hero-slideshow {
    height: calc(100vh - 130px);
    min-height: 420px;
  }

  .section.wrap {
    width: calc(100% - 30px) !important;
  }
}


/* ===== ANIMALYZER V4 ===== */
.ay-page {
  background: var(--dark);
  color: #f3f5f3
}

.ay-wrap {
  width: min(1480px, calc(100% - 112px));
  margin: auto
}

.ay-section {
  padding: 88px 0
}

.ay-kicker {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px
}

.ay-heading {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: .05em;
  margin: 0 0 22px
}

.ay-copy {
  max-width: 760px;
  color: #c3c9c3;
  font-size: 16px;
  line-height: 1.75
}

.ay-problem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 42%);
  gap: 86px;
  align-items: start;
  border-top: 1px solid #252a26;
  border-bottom: 1px solid #252a26;
}

.ay-problem-card {
  background: #121512;
  border: 1px solid #242924;
  padding: 32px;
}

.ay-problem-card strong {
  display: block;
  color: #fff;
  font-weight: 400;
  margin-bottom: 10px
}

.ay-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 42px
}

.ay-flow-step {
  background: #121512;
  border: 1px solid #293029;
  padding: 22px 18px;
  min-height: 120px;
  position: relative
}

.ay-flow-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--green);
  font-size: 22px;
  z-index: 2
}

.ay-flow-step b {
  display: block;
  color: var(--green);
  font-weight: 400;
  margin-bottom: 8px
}

.ay-shot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px
}

.ay-shot {
  background: #fff;
  padding: 12px;
  border: 1px solid #2c312d;
}

.ay-shot .fake-ui {
  background: #f7f7f7;
  color: #333;
  min-height: 430px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.fake-bar {
  height: 18px;
  background: #e6e6e6;
  border-radius: 2px
}

.fake-bar.short {
  width: 62%
}

.fake-bar.mid {
  width: 78%
}

.fake-panel {
  flex: 1;
  border: 1px solid #ddd;
  background: #fff;
  padding: 12px
}

.fake-map {
  height: 140px;
  background: linear-gradient(135deg, #eef2ee 0%, #dfe7df 100%);
  border: 1px solid #d7ddd7
}

.fake-chart {
  height: 120px;
  border: 1px solid #ddd;
  background: repeating-linear-gradient(to right, #fafafa 0 38px, #f2f2f2 38px 39px)
}

.fake-table {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px
}

.fake-cell {
  height: 18px;
  background: #efefef
}

.ay-shot-title {
  margin-top: 10px;
  color: #fff;
  font-size: 13px;
  letter-spacing: .08em
}

.ay-data-bridge {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 30px;
  align-items: center;
  margin-top: 42px
}

.ay-video-frame {
  background: #111;
  border: 1px solid #2a2f2a;
  min-height: 280px;
  display: grid;
  place-items: center;
  color: #8f9890
}

.ay-arrow {
  font-size: 32px;
  color: var(--green)
}

.ay-data-card {
  border: 1px solid var(--green);
  padding: 26px;
  background: #101310
}

.ay-data-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #252b25
}

.ay-data-row:last-child {
  border-bottom: 0
}

.ay-data-row span:first-child {
  color: #8e978f
}

.ay-data-row span:last-child {
  color: #fff
}

.ay-track-focus {
  display: grid;
  grid-template-columns: minmax(320px, 40%) 1fr;
  gap: 70px;
  align-items: center;
  background: #111411;
  border: 1px solid #262c26;
  padding: 38px
}

.ay-track-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px
}

.ay-clip {
  border: 1px solid #303630;
  padding: 18px;
  text-align: center;
  color: #c8cec8;
  background: #0d100e
}

.ay-link {
  color: var(--green);
  font-size: 30px
}

.ay-note {
  margin-top: 18px;
  color: #a8b0a9;
  font-size: 14px;
  line-height: 1.7
}

.ay-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 36px
}

.ay-status-card {
  background: #121512;
  border: 1px solid #292f29;
  padding: 28px
}

.ay-status-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 300;
  color: #fff
}

.ay-cta {
  border-top: 1px solid #252a26;
  padding: 80px 0 100px
}

.ay-cta-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  border: 1px solid var(--green);
  padding: 34px
}

.ay-btn {
  display: inline-block;
  border: 1px solid var(--green);
  padding: 13px 20px;
  color: var(--green);
  letter-spacing: .12em;
  font-size: 12px
}

.ay-footerline {
  color: #7d867e;
  font-size: 12px;
  margin-top: 18px
}

@media(max-width:950px) {
  .ay-wrap {
    width: calc(100% - 36px)
  }

  .ay-problem,
  .ay-track-focus,
  .ay-data-bridge,
  .ay-status {
    grid-template-columns: 1fr
  }

  .ay-flow {
    grid-template-columns: 1fr
  }

  .ay-flow-step:not(:last-child)::after {
    content: "↓";
    right: 50%;
    top: auto;
    bottom: -22px;
    transform: translateX(50%)
  }

  .ay-shot-grid {
    grid-template-columns: 1fr
  }

  .ay-cta-box {
    align-items: flex-start;
    flex-direction: column
  }
}

.gallery-loading,
.gallery-error {
  grid-column: 1/-1;
  font-size: 13px;
  color: #888;
  padding: 20px 0
}

.lang a:hover,
nav a:hover {
  opacity: .55
}


/* ===== V6 refinements ===== */
.brand {
  font-size: 21px !important;
  letter-spacing: .16em !important;
  font-weight: 300 !important
}

.section-title,
.manifesto h1,
.project-copy h1,
.video-meta h2 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  letter-spacing: .08em
}

.section-title {
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 28px
}

/* Responsive homepage pictures */
.hero-slide {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity 2.4s ease-in-out
}

.hero-slide.active {
  opacity: 1
}

.hero-slide img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important
}

@media(min-width:851px) {
  .hero {
    padding: 24px 54px 50px !important
  }

  .hero-slideshow {
    width: 100% !important;
    height: calc(100vh - 166px) !important;
    min-height: 560px;
    max-height: 940px
  }
}

@media(max-width:850px) {
  .brand {
    font-size: 22px !important
  }

  .hero {
    padding: 14px 16px 30px !important;
    min-height: calc(100vh - 74px) !important
  }

  .hero-slideshow {
    width: 100% !important;
    height: calc(100vh - 118px) !important;
    min-height: 520px !important;
    max-height: none !important
  }

  .hero-slide img {
    object-fit: contain !important
  }
}

/* ANIMALYZER V6 - visual direction closer to approved mockup */
.ay-v6 {
  background: #0c0f0d;
  color: #f5f5f5
}

.ay-v6-hero {
  display: grid;
  grid-template-columns: minmax(320px, 43%) minmax(460px, 1fr);
  gap: 72px;
  align-items: center;
  padding: 70px 0 92px
}

.ay-brand-strip {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid #303830;
  padding-bottom: 9px;
  color: #fff;
  letter-spacing: .12em;
  font-size: 13px;
  margin-bottom: 38px
}

.ay-brand-strip span {
  font-size: 9px;
  color: #849086;
  letter-spacing: .17em
}

.ay-title span {
  color: var(--green)
}

.ay-v6-intro {
  font-size: 20px;
  line-height: 1.55;
  color: #d9ded9;
  max-width: 640px
}

.ay-deepfaune {
  margin-top: 28px;
  color: #8e988f;
  font-size: 13px
}

.ay-deepfaune strong {
  color: var(--green);
  font-weight: 400
}

.ay-laptop {
  position: relative;
  padding-bottom: 28px
}

.ay-laptop-screen {
  background: #050605;
  border: 8px solid #202421;
  border-radius: 12px 12px 5px 5px;
  padding: 12px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .34)
}

.ay-laptop-base {
  width: 108%;
  height: 18px;
  background: linear-gradient(#777, #323632);
  position: absolute;
  left: -4%;
  bottom: 12px;
  border-radius: 2px 2px 14px 14px
}

.ay-real-header-placeholder {
  height: 48px;
  background: #101511;
  color: var(--green);
  font-size: 10px;
  letter-spacing: .12em;
  display: flex;
  align-items: center;
  padding: 0 18px
}

.ay-ui-white {
  background: #f6f6f6;
  height: 330px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.ay-ui-white span {
  height: 18px;
  background: #dedede
}

.ay-ui-white div {
  grid-column: 1/-1;
  border: 1px solid #ddd;
  background: #fff
}

.ay-v6-wolf {
  display: grid;
  grid-template-columns: 52% 1fr;
  gap: 74px;
  align-items: center;
  padding: 34px 0 94px
}

.ay-v6-wolf img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  filter: grayscale(100%)
}

.ay-icon-flow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  margin-top: 36px
}

.ay-icon-card {
  border-top: 1px solid #303830;
  padding: 22px 12px 12px;
  min-height: 148px
}

.ay-icon {
  font-size: 28px;
  color: var(--green);
  height: 42px
}

.ay-icon-card b {
  display: block;
  font-weight: 300;
  font-size: 15px;
  margin-bottom: 8px
}

.ay-icon-card small {
  color: #8f998f;
  line-height: 1.45
}

.ay-track-hero {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 78px;
  align-items: center;
  padding: 78px 0;
  border-top: 1px solid #252b26;
  border-bottom: 1px solid #252b26
}

.ay-track-visual {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center
}

.ay-track-visual .clip {
  border: 1px solid #39413a;
  background: #111512;
  padding: 34px 20px;
  text-align: center;
  font-size: 18px
}

.ay-track-visual .clip span {
  font-size: 12px;
  color: #89948b
}

.connector {
  color: var(--green);
  font-size: 13px;
  white-space: nowrap;
  letter-spacing: .08em
}

.ay-real-screens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 38px
}

.ay-screen-card {
  background: #171b18;
  padding: 14px
}

.screen-placeholder {
  background: #fff;
  color: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px
}

.screen-placeholder.tall {
  height: 540px
}

.screen-placeholder b {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: .09em
}

.screen-placeholder span {
  font-size: 11px;
  color: #888
}

.ay-data-section {
  display: grid;
  grid-template-columns: 1fr 46%;
  gap: 80px;
  align-items: center
}

@media(max-width:1050px) {
  .ay-icon-flow {
    grid-template-columns: repeat(4, 1fr)
  }

  .ay-v6-hero {
    grid-template-columns: 1fr
  }

  .ay-v6-wolf,
  .ay-track-hero,
  .ay-data-section {
    grid-template-columns: 1fr
  }

  .ay-real-screens {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:700px) {
  .ay-wrap {
    width: calc(100% - 34px) !important
  }

  .ay-v6-hero {
    padding: 44px 0 60px
  }

  .ay-v6-intro {
    font-size: 17px
  }

  .ay-laptop-screen {
    border-width: 5px
  }

  .ay-ui-white {
    height: 250px
  }

  .ay-v6-wolf {
    padding-bottom: 66px
  }

  .ay-icon-flow {
    grid-template-columns: 1fr 1fr
  }

  .ay-track-visual {
    grid-template-columns: 1fr
  }

  .connector {
    text-align: center
  }

  .ay-real-screens {
    grid-template-columns: 1fr
  }

  .screen-placeholder.tall {
    height: 430px
  }
}

/* V7 HOME */
.brand {
  font-size: 20px !important;
  text-transform: lowercase !important;
  letter-spacing: .16em !important
}

header .wrap {
  padding-left: 72px !important;
  padding-right: 72px !important
}

.hero {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - 92px) !important;
  padding: 20px 48px 42px !important
}

.hero-slideshow {
  position: relative !important;
  width: 100% !important;
  height: calc(100vh - 154px) !important;
  min-height: 600px !important;
  max-height: 980px !important;
  overflow: hidden !important
}

.hero-picture {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  opacity: 0 !important;
  transition: opacity 2.4s ease-in-out !important
}

.hero-picture.active {
  opacity: 1 !important
}

.hero-picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important
}

@media(max-width:850px) {
  .brand {
    font-size: 21px !important
  }

  header .wrap {
    padding-left: 20px !important;
    padding-right: 20px !important
  }

  .hero {
    min-height: calc(100vh - 74px) !important;
    padding: 14px 16px 24px !important
  }

  .hero-slideshow {
    height: calc(100vh - 116px) !important;
    min-height: 520px !important
  }
}

/* V7 ANIMALYZER */
.ay-mockup {
  background: #0a0c0b;
  color: #f4f5f4
}

.aym-hero {
  display: grid;
  grid-template-columns: 1.02fr .86fr 1.45fr;
  gap: 34px;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 24px
}

.aym-wolf {
  position: relative;
  min-height: 440px;
  overflow: hidden
}

.aym-wolf img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  filter: grayscale(1);
  opacity: .88
}

.aym-cam-meta {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 11px;
  letter-spacing: .08em;
  color: #ddd
}

.aym-intro h1 {
  font-size: 48px;
  letter-spacing: .12em;
  font-weight: 300;
  margin: 0 0 8px
}

.aym-intro h1 span {
  color: var(--green)
}

.aym-intro h2 {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 300;
  letter-spacing: .05em;
  margin: 0 0 24px;
  color: #fff
}

.aym-intro p {
  font-size: 16px;
  line-height: 1.55;
  color: #e5e8e5
}

.aym-small {
  font-size: 13px !important;
  color: #aeb6af !important
}

.aym-laptop {
  position: relative;
  transform: perspective(1000px) rotateY(-8deg) rotateX(2deg);
  transform-origin: center
}

.aym-screen {
  background: #171b18;
  border: 2px solid #4a504b;
  border-radius: 14px 14px 6px 6px;
  padding: 10px;
  box-shadow: 0 22px 30px rgba(0, 0, 0, .35)
}

.aym-screen-top {
  font-size: 11px;
  color: var(--green);
  padding: 2px 0 8px
}

.aym-screen-video {
  position: relative;
  background: #050605;
  height: 250px;
  overflow: hidden
}

.aym-screen-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1)
}

.aym-box {
  position: absolute;
  left: 42%;
  top: 36%;
  border: 2px solid var(--green);
  color: var(--green);
  font-size: 11px;
  padding: 6px 8px
}

.aym-screen-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-top: 8px
}

.aym-screen-strip span {
  height: 34px;
  background: #242924;
  border: 1px solid #353c36
}

.aym-base {
  height: 18px;
  background: linear-gradient(#787d79, #323632);
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  margin: 0 -20px
}

.aym-row {
  display: grid;
  grid-template-columns: 29% 1fr;
  gap: 48px;
  border-top: 1px solid #242824;
  border-bottom: 1px solid #242824;
  padding-top: 28px;
  padding-bottom: 28px
}

.aym-problem p {
  color: #c3c8c3;
  font-size: 14px;
  line-height: 1.6
}

.aym-icons {
  display: grid;
  grid-template-columns: repeat(8, 1fr)
}

.aym-icons>div {
  padding: 8px 13px;
  border-left: 1px solid #293029;
  text-align: center
}

.aym-icons .ico {
  display: block;
  color: var(--green);
  font-size: 30px;
  min-height: 38px
}

.aym-icons b {
  display: block;
  color: var(--green);
  font-size: 13px;
  font-weight: 400;
  margin: 5px 0
}

.aym-icons small {
  display: block;
  color: #b7beb8;
  font-size: 10px;
  line-height: 1.35
}

.aym-workflow {
  display: grid;
  grid-template-columns: 1fr 34%;
  gap: 44px;
  padding-top: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid #242824
}

.aym-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: center
}

.aym-flow>div {
  text-align: center
}

.aym-flow span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #92ef9d;
  color: #102013;
  margin: 0 auto 8px;
  font-size: 12px
}

.aym-flow b {
  display: block;
  font-size: 13px;
  font-weight: 400
}

.aym-flow small {
  display: block;
  color: #a9b0aa;
  font-size: 10px;
  line-height: 1.35;
  margin-top: 5px
}

.aym-flow em {
  font-style: normal;
  color: #bbb;
  font-size: 22px
}

.aym-event-callout {
  border: 1px solid var(--green);
  padding: 18px 20px
}

.event-icon {
  color: var(--green);
  font-size: 30px
}

.aym-event-callout h3 {
  font-weight: 300;
  font-size: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 6px 0 10px
}

.aym-event-callout p {
  color: #c1c7c2;
  font-size: 13px;
  line-height: 1.55
}

.aym-interface {
  padding-top: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid #242824
}

.aym-section-lead {
  color: #c1c7c2;
  font-size: 13px
}

.aym-ui-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 20px
}

.aym-ui-card h4 {
  margin: 9px 0 3px;
  font-weight: 400;
  font-size: 13px
}

.aym-ui-card p {
  margin: 0;
  color: #b9c0ba;
  font-size: 11px;
  line-height: 1.45
}

.aym-phone-ui {
  background: #fff;
  color: #242424;
  min-height: 340px;
  border-radius: 6px;
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.aym-phone-ui span {
  height: 34px;
  background: #f1f1f1;
  border: 1px solid #ddd
}

.aym-phone-ui button {
  margin-top: auto;
  background: #47d85a;
  color: #0b250f;
  border: 0;
  padding: 11px
}

.aym-phone-ui.map {
  background: linear-gradient(135deg, #f7f7f7, #dde7dd);
  position: relative
}

.aym-phone-ui .dots {
  font-size: 30px;
  line-height: 1.9;
  color: #ee7622;
  word-spacing: 18px;
  margin-top: 50px
}

.aym-phone-ui.stats .bars {
  margin-top: 70px;
  font-size: 46px;
  color: #4fd260;
  letter-spacing: 3px
}

.aym-event {
  padding-top: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid #242824
}

.aym-event-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.22fr auto 1.15fr .5fr;
  gap: 14px;
  align-items: center
}

.aym-video-thumb {
  border: 1px solid #303630;
  padding: 4px
}

.aym-video-thumb img {
  height: 120px;
  width: 100%;
  object-fit: cover;
  filter: grayscale(1)
}

.aym-video-thumb span {
  display: block;
  font-size: 10px;
  color: #bbb;
  padding: 5px
}

.aym-arrow {
  color: #fff;
  font-size: 24px
}

.aym-track-box {
  border: 1px solid var(--green);
  padding: 15px
}

.aym-track-box b {
  color: var(--green);
  font-size: 13px
}

.aym-track-box p {
  font-size: 11px;
  color: #bbc2bb;
  line-height: 1.4
}

.aym-data-box {
  border: 1px solid #303630;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px
}

.aym-data-box b {
  font-size: 13px;
  margin-bottom: 4px
}

.aym-data-box small {
  color: #bbc2bb
}

.aym-csv {
  border: 2px solid #eee;
  padding: 24px 9px;
  text-align: center
}

.aym-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 26px;
  padding-bottom: 34px
}

.aym-bottom>div {
  border-right: 1px solid #2a312b;
  padding-right: 26px
}

.aym-bottom>div:last-child {
  border-right: 0
}

.aym-bottom p {
  color: #bdc4bd;
  font-size: 12px;
  line-height: 1.55
}

.aym-button {
  display: inline-block;
  border: 1px solid var(--green);
  color: var(--green);
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: .12em;
  margin-top: 8px
}

@media(max-width:1050px) {
  .aym-hero {
    grid-template-columns: 1fr
  }

  .aym-laptop {
    transform: none
  }

  .aym-row,
  .aym-workflow {
    grid-template-columns: 1fr
  }

  .aym-icons {
    grid-template-columns: repeat(4, 1fr)
  }

  .aym-ui-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .aym-event-grid {
    grid-template-columns: 1fr auto 1fr
  }

  .aym-track-box,
  .aym-data-box,
  .aym-csv {
    grid-column: 1/-1
  }
}

@media(max-width:700px) {
  .aym-icons {
    grid-template-columns: repeat(2, 1fr)
  }

  .aym-flow {
    grid-template-columns: 1fr
  }

  .aym-flow em {
    transform: rotate(90deg)
  }

  .aym-ui-grid {
    grid-template-columns: 1fr
  }

  .aym-bottom {
    grid-template-columns: 1fr
  }

  .aym-intro h1 {
    font-size: 38px
  }
}


/* ===== V8 APPROVED DIRECTION ===== */
/* Home desktop: true 16:9, very large, with white passepartout. */
.hero {
  padding: 14px 30px 34px !important;
  min-height: calc(100vh - 92px) !important
}

.hero-slideshow {
  height: min(calc(100vh - 138px), 960px) !important;
  width: auto !important;
  max-width: 94vw !important;
  aspect-ratio: 16/9 !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: auto !important
}

.hero-picture,
.hero-picture img {
  width: 100% !important;
  height: 100% !important
}

.hero-picture img {
  object-fit: cover !important
}

/* Mobile: dedicated 3:4 crop, not desktop crop. */
@media(max-width:850px) {
  .hero {
    padding: 10px 14px 24px !important;
    min-height: calc(100vh - 74px) !important;
    align-items: flex-start !important
  }

  .hero-slideshow {
    width: min(calc(100vw - 28px), 600px) !important;
    height: auto !important;
    aspect-ratio: 3/4 !important;
    max-width: none !important;
    margin: 8px auto 0 !important
  }

  .hero-picture img {
    object-fit: cover !important
  }
}

/* Project covers and project thumbnails use native photographic 3:2 ratio. */
.project-grid .card img {
  aspect-ratio: 3/2 !important;
  object-fit: cover !important;
  width: 100% !important
}

.thumb-grid button {
  aspect-ratio: 3/2 !important;
  overflow: hidden !important
}

.thumb-grid img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important
}

/* Headings About / Contact: same thin language used elsewhere. */
.about-grid h1,
.contact-grid h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 32px !important;
  line-height: 1.2 !important;
  font-weight: 300 !important;
  letter-spacing: .12em !important;
  margin: 0 0 28px !important
}

/* ANIMALYZER refinements */
.aym-hero-v8 {
  display: grid;
  grid-template-columns: 33% 27% 40%;
  gap: 34px;
  align-items: center;
  padding: 30px 0 34px
}

.aym-real-header {
  height: 440px;
  position: relative;
  overflow: hidden;
  background: #080908
}

.aym-real-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: none !important;
  opacity: 1 !important
}

.aym-real-header .aym-cam-meta {
  background: linear-gradient(transparent, rgba(0, 0, 0, .62));
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 12px 10px
}

.aym-laptop-image {
  display: block;
  width: 100%;
  max-height: 390px;
  object-fit: contain;
  filter: none !important
}

.aym-intro-v8 h1 {
  font-size: 52px;
  letter-spacing: .12em;
  font-weight: 300;
  margin: 0 0 10px
}

.aym-intro-v8 h1 span {
  color: var(--green)
}

.aym-intro-v8 h2 {
  font-size: 19px;
  line-height: 1.35;
  font-weight: 300;
  letter-spacing: .045em;
  margin: 0 0 24px;
  color: #fff
}

.aym-intro-v8>p {
  font-size: 16px;
  line-height: 1.58;
  color: #e1e5e1
}

.aym-deepfaune-note {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #aeb6af !important;
  margin-top: 18px !important
}

/* Readability: do not use tiny text on the dark page. */
.ay-mockup .ay-kicker {
  font-size: 13px !important
}

.aym-problem p,
.aym-event-callout p,
.aym-bottom p {
  font-size: 14px !important;
  line-height: 1.6 !important
}

.aym-icons b {
  font-size: 14px !important
}

.aym-icons small {
  font-size: 12px !important;
  line-height: 1.4 !important
}

.aym-flow b {
  font-size: 15px !important
}

.aym-flow small {
  font-size: 12.5px !important;
  line-height: 1.42 !important
}

.aym-flow span {
  width: 32px !important;
  height: 32px !important;
  font-size: 13px !important
}

.aym-section-lead {
  font-size: 14px !important
}

/* Cosa fa: simple explanatory line icons. */
.aym-icons-v8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0
}

.aym-icons-v8>div {
  padding: 10px 12px;
  border-left: 1px solid #293029;
  text-align: center
}

.aym-icons-v8 svg {
  width: 34px;
  height: 34px;
  stroke: var(--green);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 6px
}

.aym-icons-v8 b {
  display: block;
  color: var(--green);
  font-size: 14px;
  font-weight: 400;
  margin: 4px 0 6px
}

.aym-icons-v8 small {
  display: block;
  color: #bdc4bd;
  font-size: 12px;
  line-height: 1.4
}

/* Real UI screenshots will be horizontal. */
.aym-ui-grid-v8 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 24px
}

.aym-ui-card-v8 h4 {
  margin: 10px 0 4px;
  font-weight: 300;
  font-size: 15px
}

.aym-ui-card-v8 p {
  margin: 0;
  color: #bac1bb;
  font-size: 13px;
  line-height: 1.5
}

.aym-ui-preview {
  aspect-ratio: 16/9;
  background: #fff;
  color: #222;
  border: 1px solid #353c36;
  display: grid;
  place-items: center;
  overflow: hidden
}

.aym-ui-preview .fake-horizontal {
  width: 92%;
  height: 82%;
  border: 1px solid #ddd;
  background: #f7f7f7;
  padding: 14px;
  display: grid;
  grid-template-columns: 22% 1fr;
  gap: 12px
}

.aym-ui-preview .fake-sidebar {
  background: #ecefec
}

.aym-ui-preview .fake-main {
  background: #fff;
  border: 1px solid #e2e2e2;
  position: relative
}

.aym-ui-preview .fake-main:after {
  content: "SCHERMATA REALE";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #999;
  font-size: 12px;
  letter-spacing: .12em
}

/* Camera-trap video section in ANIMALYZER. */
.aym-camtrap {
  padding-top: 34px;
  padding-bottom: 40px;
  border-top: 1px solid #242824;
  border-bottom: 1px solid #242824
}

.aym-camtrap-head {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 70px;
  align-items: start;
  margin-bottom: 26px
}

.aym-camtrap-head h3 {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: .08em;
  margin: 0
}

.aym-camtrap-head p {
  font-size: 14px;
  line-height: 1.65;
  color: #bdc4bd;
  margin: 0
}

.aym-camtrap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.aym-camtrap-card {
  display: block
}

.aym-camtrap-thumb {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  border: 1px solid #303630
}

.aym-camtrap-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none !important
}

.aym-camtrap-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 34px;
  color: #fff;
  text-shadow: 0 2px 12px #000
}

.aym-camtrap-card h4 {
  font-size: 14px;
  font-weight: 300;
  margin: 9px 0 0;
  color: #fff
}

@media(max-width:1100px) {
  .aym-hero-v8 {
    grid-template-columns: 1fr 1fr
  }

  .aym-laptop-wrap {
    grid-column: 1/-1
  }

  .aym-laptop-image {
    max-height: 420px
  }

  .aym-icons-v8 {
    grid-template-columns: repeat(4, 1fr)
  }
}

@media(max-width:760px) {
  .aym-hero-v8 {
    grid-template-columns: 1fr
  }

  .aym-real-header {
    height: auto;
    aspect-ratio: 16/9
  }

  .aym-intro-v8 h1 {
    font-size: 40px
  }

  .aym-icons-v8 {
    grid-template-columns: repeat(2, 1fr)
  }

  .aym-ui-grid-v8 {
    grid-template-columns: 1fr
  }

  .aym-camtrap-head {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .aym-camtrap-grid {
    grid-template-columns: 1fr
  }
}


/* ===== PATCH V9: HOME + ANIMALYZER ONLY ===== */

/* HOME
   Desktop standard: 17:9.
   Mobile standard: 2:3.
*/
.home-v9 {
  min-height: auto !important;
  padding: 14px 30px 28px !important;
}

.hero-slideshow-v9 {
  width: min(1430px, calc(100vw - 120px)) !important;
  height: auto !important;
  aspect-ratio: 19 / 12 !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  position: relative !important;
}

.hero-slideshow-v9 .hero-picture {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  transition: opacity 2.4s ease-in-out !important;
}

.hero-slideshow-v9 .hero-picture.active {
  opacity: 1 !important
}

.hero-slideshow-v9 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media(max-width:850px) {
  .home-v9 {
    padding: 10px 14px 18px !important
  }

  .hero-slideshow-v9 {
    width: min(calc(100vw - 28px), 560px) !important;
    aspect-ratio: 2 / 3 !important;
    margin: 4px auto 0 !important;
  }
}

/* ANIMALYZER HERO: official artwork + temporary 3/4 laptop */
.ay-v9-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(360px, .85fr);
  gap: 44px;
  align-items: center;
  padding: 34px 0 42px;
}

.ay-v9-official-header {
  width: 100%;
  height: auto;
  display: block;
  filter: none !important;
}

.ay-v9-intro {
  max-width: 860px;
  font-size: 15px;
  line-height: 1.65;
  color: #bdc4bd;
  margin: 22px 0 0;
}

.ay-v9-intro strong {
  font-weight: 400;
  color: #fff
}

.ay-v9-laptop img {
  width: 100%;
  max-height: 430px;
  object-fit: contain;
  filter: none !important;
  display: block;
}

.ay-v9-laptop small {
  display: block;
  color: #788079;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 8px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Make dark-page text genuinely readable. */
.ay-v9 .ay-kicker {
  font-size: 14px !important
}

.ay-v9 .aym-problem p,
.ay-v9 .aym-event-callout p,
.ay-v9 .aym-bottom p {
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.ay-v9 .aym-flow b {
  font-size: 16px !important
}

.ay-v9 .aym-flow small {
  font-size: 14px !important;
  line-height: 1.45 !important
}

.ay-v9 .aym-flow span {
  width: 34px !important;
  height: 34px !important;
  font-size: 14px !important
}

.ay-v9 .aym-event-callout h3 {
  font-size: 19px !important
}

.ay-v9 .aym-section-lead {
  font-size: 15px !important
}

/* Horizontal REAL interface screenshots. */
.ay-v9 .aym-ui-preview {
  aspect-ratio: 16/9 !important;
  padding: 0 !important;
  background: #fff;
}

.ay-v9 .aym-ui-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none !important;
}

/* Up to ten monitoring clips, compact two-column layout. */
.ay-v9-video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 28px;
}

.ay-v9-camtrap .aym-camtrap-head p {
  font-size: 16px !important;
  line-height: 1.65 !important;
}

.ay-v9-camtrap .aym-camtrap-card h4 {
  font-size: 14px;
  font-weight: 300;
}

@media(max-width:1050px) {
  .ay-v9-hero {
    grid-template-columns: 1fr;
    gap: 26px
  }

  .ay-v9-laptop {
    max-width: 720px;
    margin: 0 auto
  }
}

@media(max-width:760px) {
  .ay-v9-video-grid {
    grid-template-columns: 1fr
  }

  .ay-v9-intro {
    font-size: 14px
  }
}


/* ============================================================
   GLOBAL TYPOGRAPHY — V13
   Official site font: Manrope
   Light 300 = default
   Regular 400 = emphasis / functional labels only
   ============================================================ */

html,
body,
button,
input,
textarea,
select {
  font-family: "Manrope", sans-serif !important;
}

body {
  font-weight: 300 !important;
}

.brand,
nav,
.lang,
.section-title,
.manifesto h1,
.project-copy h1,
.video-meta h2,
.about-grid h1,
.contact-grid h1,
.ay-page,
.ay-mockup,
.ay-v9,
.ay-title,
.ay-heading,
.ay-kicker,
.aym-intro h1,
.aym-intro h2,
.aym-flow,
.aym-icons,
.aym-icons-v8,
.aym-camtrap,
footer {
  font-family: "Manrope", sans-serif !important;
}

.brand,
.manifesto h1,
.project-copy h1,
.video-meta h2,
.about-grid h1,
.contact-grid h1,
.ay-title,
.ay-heading,
.aym-intro h1,
.aym-intro h2 {
  font-weight: 300 !important;
}

/* Keep functional emphasis restrained. */
strong,
b {
  font-weight: 400;
}


/* ============================================================
   READABILITY REFINEMENT — V14
   Increase only the site's smallest text. Main body copy,
   headings, logo and Home layout remain unchanged.
   ============================================================ */

nav {
  font-size: 14px !important;
}

.lang {
  font-size: 13px !important;
}

.project-copy .kicker {
  font-size: 13px !important;
}

.lb-count {
  font-size: 12px !important;
}

.gallery-loading,
.gallery-error {
  font-size: 14px !important;
}

footer {
  font-size: 13.5px !important;
}

/* ANIMALYZER: small labels and supporting copy. */
.ay-v9 .ay-hero-kicker {
  font-size: 12px !important;
}

.ay-v9 .ay-hero-button {
  font-size: 12px !important;
}

.ay-v9 .aym-icons-v8 small {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.ay-v9 .aym-ui-card-v8 p {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.ay-v9 .aym-video-card p {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.ay-v9 .aym-video-card h4 {
  font-size: 15px !important;
}

/* ANIMALYZER interface screenshots:
   16:9, two columns on desktop, one column on small screens. */
.ay-v9 .aym-ui-grid-v8 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ay-v9 .aym-ui-preview {
  aspect-ratio: 16 / 9 !important;
}

.ay-v9 .aym-ui-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media(max-width:760px) {
  .ay-v9 .aym-ui-grid-v8 {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   MOBILE NAV + PROJECTS — V15
   - real mobile navigation
   - stronger Projects index on phones
   - larger project gallery thumbnails
   About / Contact intentionally unchanged.
   ============================================================ */

.mobile-menu-toggle {
  display: none;
}

@media (max-width: 850px) {
  header {
    height: 74px;
    position: relative;
    z-index: 1200;
    background: #fff;
  }

  body.dark header,
  body.ay-page header,
  body.ay-mockup header,
  body.ay-v9 header {
    background: var(--dark);
  }

  header .wrap {
    padding-left: 20px !important;
    padding-right: 18px !important;
  }

  .nav {
    grid-template-columns: 1fr auto auto !important;
    gap: 13px !important;
  }

  .brand {
    white-space: nowrap;
  }

  .lang {
    position: relative;
    z-index: 1203;
    align-self: center;
  }

  .mobile-menu-toggle {
    display: flex;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 1203;
    color: var(--ink);
  }

  body.dark .mobile-menu-toggle,
  body.ay-page .mobile-menu-toggle,
  body.ay-mockup .mobile-menu-toggle,
  body.ay-v9 .mobile-menu-toggle {
    color: #f4f5f4;
  }

  .mobile-menu-toggle span,
  .mobile-menu-toggle::before,
  .mobile-menu-toggle::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 1px;
    background: currentColor;
    transition: transform .24s ease, opacity .24s ease, top .24s ease;
  }

  .mobile-menu-toggle::before {
    top: 10px;
  }

  .mobile-menu-toggle span {
    top: 16px;
  }

  .mobile-menu-toggle::after {
    top: 22px;
  }

  .mobile-menu-open .mobile-menu-toggle::before {
    top: 16px;
    transform: rotate(45deg);
  }

  .mobile-menu-open .mobile-menu-toggle span {
    opacity: 0;
  }

  .mobile-menu-open .mobile-menu-toggle::after {
    top: 16px;
    transform: rotate(-45deg);
  }

  header nav {
    display: flex !important;
    position: fixed;
    inset: 74px 0 0 0;
    padding: 38px 24px 44px;
    background: rgba(255,255,255,.985);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    z-index: 1199;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    overflow-y: auto;
  }

  body.dark header nav,
  body.ay-page header nav,
  body.ay-mockup header nav,
  body.ay-v9 header nav {
    background: rgba(13,15,14,.985);
  }

  .mobile-menu-open header nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  header nav a {
    width: 100%;
    padding: 17px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    font-size: 19px !important;
    letter-spacing: .035em;
  }

  body.dark header nav a,
  body.ay-page header nav a,
  body.ay-mockup header nav a,
  body.ay-v9 header nav a {
    border-color: #2a2e2a !important;
  }

  header nav a.active {
    opacity: .55;
  }

  .mobile-menu-open {
    overflow: hidden;
  }

  /* Projects index: text first, then large visual cards. */
  main.manifesto.section.wrap {
    padding-top: 42px !important;
    padding-bottom: 32px !important;
    gap: 42px !important;
  }

  main.manifesto.section.wrap > section:first-child {
    max-width: 620px;
  }

  main.manifesto.section.wrap > section:first-child h1 {
    margin-bottom: 22px !important;
  }

  main.manifesto.section.wrap > section:first-child p {
    font-size: 15px !important;
    line-height: 1.72 !important;
  }

  .project-grid {
    grid-template-columns: 1fr !important;
    gap: 38px !important;
  }

  .project-grid .card {
    display: block;
  }

  .project-grid .card img {
    width: 100% !important;
    aspect-ratio: 3/2 !important;
  }

  .project-grid .card h2 {
    text-align: left !important;
    font-size: 17px !important;
    margin: 12px 0 0 !important;
    letter-spacing: .045em;
  }

  /* Individual project: let the photography dominate. */
  .project-layout {
    gap: 42px !important;
  }

  .project-copy {
    max-width: 680px;
  }

  .thumb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .thumb-grid button {
    width: 100%;
    aspect-ratio: 3/2 !important;
  }
}

@media (max-width: 600px) {
  .section.wrap {
    width: calc(100% - 28px) !important;
  }

  main.manifesto.section.wrap {
    padding-top: 34px !important;
  }

  .project-grid {
    gap: 34px !important;
  }

  .project-grid .card h2 {
    font-size: 16px !important;
  }

  .project-layout {
    gap: 34px !important;
  }

  .thumb-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .thumb-grid button {
    aspect-ratio: 3/2 !important;
  }
}


/* ============================================================
   PROJECTS MOBILE FIX — V16
   The later desktop .manifesto rule uses !important, so mobile
   must explicitly override it with !important too.
   ============================================================ */
@media (max-width: 850px) {
  main.manifesto.section.wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 42px !important;
  }

  main.manifesto.section.wrap > section {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  main.manifesto.section.wrap .project-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 38px !important;
  }

  main.manifesto.section.wrap .project-grid .card {
    width: 100% !important;
    min-width: 0 !important;
  }

  main.manifesto.section.wrap .project-grid .card img {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
  }
}

/* Gallery counter — extra subtle */
.lb-count{
  opacity:.5!important;
}