@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');


h1, h2, h3, h4, h5, h6
{
  font-family: "Oswald", sans-serif !important;
}



body {
  background: #000;
}


/* ============================================================
   .web-loader  –  ZENSKAR intro loader
   Sequence (matches reference video):
   1. Black screen, brand letters fade in one by one
   2. Letters fade out in a scattered order
   3. White dome rises from the bottom and flattens
   4. Loader unmounts, page is revealed
   ============================================================ */

.web-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Oswald", sans-serif !important;
}

/* every element inside the loader uses Oswald */
.web-loader * {
  font-family: "Oswald", sans-serif !important;
}

/* ---------- brand text ---------- */
.web-loader__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  font-family: "Oswald", sans-serif !important;
}

.web-loader__text {
  display: flex;
  font-weight: 700;
  font-size: clamp(2.8rem, 10vw, 8rem);
  letter-spacing: 0.4em;
  margin-right: -0.4em; /* offset trailing letter-spacing so text is truly centered */
  color: #fff;
  user-select: none;
  font-family: "Oswald", sans-serif !important;
}

/* "SOFTWARE SOLUTION" line under the brand */
.web-loader__sub {
  font-family: "Oswald", sans-serif !important;
  font-weight: 800;
  font-size: clamp(0.7rem, 1.8vw, 1.3rem);
  letter-spacing: 0.5em;
  margin-right: -0.5em;
  color: #FFAA17;
  opacity: 0;
  user-select: none;
  animation: web-loader-letter-in 0.8s ease forwards;
  animation-delay: 0.9s;
}

.web-loader[data-phase="out"] .web-loader__sub,
.web-loader[data-phase="curtain"] .web-loader__sub {
  animation: web-loader-letter-out 0.7s ease forwards;
  animation-delay: 0ms;
}

.web-loader__letter {
  display: inline-block;
  font-family: "Oswald", sans-serif !important;
  opacity: 0;
  animation: web-loader-letter-in 0.6s ease forwards;
  animation-delay: calc(var(--i) * 80ms);
}

/* phase 2: letters fade out in scattered order */
.web-loader[data-phase="out"] .web-loader__letter,
.web-loader[data-phase="curtain"] .web-loader__letter {
  animation: web-loader-letter-out 0.7s ease forwards;
  animation-delay: calc(var(--o) * 110ms);
}

@keyframes web-loader-letter-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes web-loader-letter-out {
  0%   { opacity: 1; color: #fff; }
  40%  { opacity: 0.45; color: #8a8a8a; }
  100% { opacity: 0; color: #222; }
}

/* ---------- white dome curtain ---------- */
.web-loader__curtain {
  position: absolute;
  left: -25%;
  top: 0;
  width: 150%;
  height: 140%;
  background: #fff;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  transform: translateY(100%);
  will-change: transform, border-radius;
  pointer-events: none;
}

.web-loader[data-phase="curtain"] .web-loader__curtain {
  animation: web-loader-curtain 1.2s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes web-loader-curtain {
  from {
    transform: translateY(100%);
  }
  to {
    /* curve stays as-is (set on .web-loader__curtain) and exits above the screen */
    transform: translateY(-12%);
  }
}

/* ---------- page content shown after the loader ---------- */
.web-loader-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.web-loader-page__message {
  font-family: "Oswald", sans-serif !important;
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 600;
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
}

.web-loader-page--ready .web-loader-page__message {
  animation: web-loader-message-in 0.8s ease forwards;
}

@keyframes web-loader-message-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .web-loader__letter,
  .web-loader[data-phase] .web-loader__letter {
    animation-duration: 0.01s;
  }
  .web-loader[data-phase="curtain"] .web-loader__curtain {
    animation-duration: 0.01s;
  }
}



/* About banner start */
/* ============================================================
   .web-about-banner  –  tile-join scroll banner
   Grid size (7 x 3) must match BANNER_COLS / BANNER_ROWS in JSX
   ============================================================ */

.web-about-banner-wrap {
  --web-about-banner-header-h: 95px; /* your header height, change if needed */
  --web-about-banner-gap: clamp(1.5rem, 3vw, 2.5rem); /* space between header and banner */

  width: 100%;  
  padding-top: calc(var(--web-about-banner-header-h) + var(--web-about-banner-gap));
}

@media (max-width: 900px) {
  .web-about-banner-wrap {
    --web-about-banner-header-h: 90px;
  }
}

@media (max-width: 640px) {
  .web-about-banner-wrap {
    --web-about-banner-header-h: 80px;
    --web-about-banner-gap: 1rem;
  }
}

/* mela banner-ku vitta edam – height-ah maathikalam */
.web-about-banner-spacer {
  height: 90vh;
}

.web-about-banner {
  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 420px;
  overflow: hidden;
  background: #fff;
}

/* ---------- tiles ---------- */
.web-about-banner__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(3, 1fr);
  container-type: size; /* lets the tiles use cqw / cqh of the whole banner */
}

.web-about-banner__tile {
  /* the whole picture is "cover"-fitted to the banner, and each tile shows
     its own slice of it. The 7 and 3 below must match the grid (7 cols x 3 rows) */
  --web-about-banner-w: max(100cqw, calc(100cqh * var(--web-about-banner-ratio, 1.6)));
  --web-about-banner-h: max(100cqh, calc(100cqw / var(--web-about-banner-ratio, 1.6)));

  background-image: var(--web-about-banner-img);
  background-size: var(--web-about-banner-w) var(--web-about-banner-h);
  background-position:
    calc((100cqw - var(--web-about-banner-w)) / 2 - var(--web-about-banner-col) * 100cqw / 7)
    calc((100cqh - var(--web-about-banner-h)) / 2 - var(--web-about-banner-row) * 100cqh / 3);
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(0);
  will-change: transform, opacity;
}

.web-about-banner--active .web-about-banner__tile {
  animation: web-about-banner-tile 1.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: var(--web-about-banner-delay);
}

@keyframes web-about-banner-tile {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  35% {
    opacity: 1;
  }
  65% {
    transform: scale(0.9); /* gaps still visible */
  }
  100% {
    opacity: 1;
    transform: scale(1.02); /* slight overlap closes the seams */
  }
}

/* ---------- black overlay ---------- */
.web-about-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
}

.web-about-banner--active .web-about-banner__overlay {
  animation: web-about-banner-fade 0.8s ease forwards;
  animation-delay: 1.7s;
}

/* ---------- heading + paragraph ---------- */
.web-about-banner__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  color: #fff;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

.web-about-banner__title {
    margin: 0 0 1rem;
    max-width: 21ch;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    opacity: 0;
    transform: translateY(24px);
    text-transform: uppercase;
    color: #FFAA17;
}

.web-about-banner__text {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  opacity: 0;
  transform: translateY(24px);
  font-family: 'Satoshi-Regular';
}

.web-about-banner--active .web-about-banner__title {
  animation: web-about-banner-rise 0.8s ease forwards;
  animation-delay: 2.1s;
}

.web-about-banner--active .web-about-banner__text {
  animation: web-about-banner-rise 0.8s ease forwards;
  animation-delay: 2.35s;
}

@keyframes web-about-banner-fade {
  to { opacity: 1; }
}

@keyframes web-about-banner-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .web-about-banner {
    height: 70vh;
    min-height: 380px;
  }
}

@media (max-width: 480px) {
  .web-about-banner__content {
    padding: 0 1.1rem;
  }

  .web-about-banner__title {
    font-size: 1.7rem;
    max-width: 14ch;
  }

  .web-about-banner__text {
    font-size: 0.95rem;
    line-height: 1.55;
  }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .web-about-banner__tile,
  .web-about-banner__overlay,
  .web-about-banner__title,
  .web-about-banner__text {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}
/* About banner end */

/* about story book start */
/* ============================================================
   .web-about-story-book  –  scroll-linked opening book
   --web-about-story-book-p : 0 (closed) -> 1 (open), set from JS
   ============================================================ */

.web-about-story-book {
  --web-about-story-book-p: 0;
  --web-about-story-book-paper: #f5f3ee;
  --web-about-story-book-ink: #1a1a1a;

  position: relative;
  width: 100%;
  height: 240vh; /* pinned scroll distance = 140vh, perusa venum na increase pannunga */
  background: linear-gradient(184deg, #000000, #ffaa1714);
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

.web-about-story-book__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2200px;
  overflow: hidden;
}

/* ---------- book ---------- */
.web-about-story-book__book {
  position: relative;
  width: min(920px, 92vw);
  height: min(580px, 68vh);
  transform-style: preserve-3d;
  /* closed: only the cover (right half) shows, so shift left to stay centered */
  transform:
    translateX(calc((1 - var(--web-about-story-book-p, 0)) * -25%))
    rotateX(calc((1 - var(--web-about-story-book-p, 0)) * 8deg));
  transition: transform 0.12s linear;
}

/* ---------- right page ---------- */
.web-about-story-book__page-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: clamp(1rem, 3.2vw, 2.8rem);
  border-radius: 0 6px 6px 0;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.14), transparent 12%),
    var(--web-about-story-book-paper);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
  transform: translateZ(-2px);
}

.web-about-story-book__story {
  color: var(--web-about-story-book-ink);
  opacity: clamp(0, calc((var(--web-about-story-book-p, 0) - 0.55) * 3), 1);
}

.web-about-story-book__title {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.web-about-story-book__text {
  margin: 0 0 0.9rem;
  font-size: clamp(0.8rem, 1.25vw, 1.05rem);
  line-height: 1.65;
}

/* ---------- cover (flips around the spine) ---------- */
.web-about-story-book__cover {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: translateZ(1px)
    rotateY(calc(var(--web-about-story-book-p, 0) * -180deg));
  transition: transform 0.12s linear;
}

.web-about-story-book__cover-front,
.web-about-story-book__cover-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.web-about-story-book__cover-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  border-radius: 0 6px 6px 0;
  background: #000;
  color: #fff;
  outline: 1px solid rgba(255, 255, 255, 0.25);
  outline-offset: -14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.web-about-story-book__brand {
  font-size: clamp(1.1rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.4em;
  margin-right: -0.4em;
  font-family: "Oswald", sans-serif;
}

.web-about-story-book__brand-sub {
  font-size: clamp(0.5rem, 0.9vw, 0.8rem);
  font-weight: 800;
  letter-spacing: 0.5em;
  margin-right: -0.5em;
  font-family: 'Satoshi-Regular';
  color: #ffaa17bd;
}

/* inside-left page = image page */
.web-about-story-book__cover-back {
  transform: rotateY(180deg);
  padding: clamp(0.8rem, 2.4vw, 2rem);
  border-radius: 6px 0 0 6px;
  background:
    linear-gradient(to left, rgba(0, 0, 0, 0.14), transparent 12%),
    var(--web-about-story-book-paper);
}

.web-about-story-book__figure {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

.web-about-story-book__img {
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 3px;
}

.web-about-story-book__caption {
  margin-top: 0.7rem;
  font-size: clamp(0.65rem, 1vw, 0.85rem);
  color: var(--web-about-story-book-ink);
}

/* ---------- mobile: the book opens upwards (top-bound) ----------
   closed -> only the cover shows (bottom half)
   open   -> image page on top, "Our story" page below              */
@media (max-width: 640px) {
  .web-about-story-book__book {
    width: min(92vw, 460px);
    height: min(640px, 76vh);
    /* closed: only the bottom half is visible, so shift up to stay centered */
    transform: translateY(calc((1 - var(--web-about-story-book-p, 0)) * -25%));
  }

  /* text page = bottom half */
  .web-about-story-book__page-right {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    padding: 1.1rem 1.2rem;
    border-radius: 0 0 6px 6px;
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.14), transparent 12%),
      var(--web-about-story-book-paper);
  }

  /* cover hinges on its top edge and flips up */
  .web-about-story-book__cover {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    transform-origin: center top;
    transform: translateZ(1px)
      rotateX(calc(var(--web-about-story-book-p, 0) * 180deg));
  }

  .web-about-story-book__cover-front {
    padding: 0 1rem;
    text-align: center;
    border-radius: 0 0 6px 6px;
  }

  .web-about-story-book__brand {
    font-size: 1.6rem;
    letter-spacing: 0.35em;
    margin-right: -0.35em;
  }

  .web-about-story-book__brand-sub {
    font-size: 0.6rem;
    letter-spacing: 0.4em;
    margin-right: -0.4em;
  }

  /* image page = top half once the cover has flipped */
  .web-about-story-book__cover-back {
    transform: rotateX(180deg);
    padding: 0.8rem 0.9rem;
    border-radius: 6px 6px 0 0;
    background:
      linear-gradient(to top, rgba(0, 0, 0, 0.14), transparent 12%),
      var(--web-about-story-book-paper);
  }

  .web-about-story-book__title {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
  }

  .web-about-story-book__text {
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.55;
  }

  .web-about-story-book__caption {
    margin-top: 0.5rem;
    font-size: 0.7rem;
  }
}

@media (max-width: 360px) {
  .web-about-story-book__text--more {
    display: none; /* very small screens: keep only the first paragraph */
  }
}
/* ---------- cover logo ---------- */
.web-about-story-book__logo {
  width: clamp(48px, 7vw, 96px);
  height: auto;
  object-fit: contain;
  margin-bottom: 0.4rem;
  user-select: none;
}

/* ---------- count-up stats ---------- */
.web-about-story-book__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.4vw, 1.2rem);
  margin-top: clamp(0.8rem, 2vw, 1.6rem);
  padding-top: clamp(0.8rem, 2vw, 1.4rem);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.web-about-story-book__stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  opacity: 0;
  transform: translateY(14px);
}

/* appears when the count starts, each one after the previous */
.web-about-story-book__stat--on {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.6s ease var(--web-about-story-book-stat-delay, 0ms),
    transform 0.6s ease var(--web-about-story-book-stat-delay, 0ms);
}

/* yellow line that fills while the number is counting */
.web-about-story-book__stat::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin-top: 0.3rem;
  background: #FFAA17;
}

.web-about-story-book__stat--on::after {
  width: 100%;
  transition: width 2.2s ease var(--web-about-story-book-stat-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .web-about-story-book__stat,
  .web-about-story-book__stat--on {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .web-about-story-book__stat::after {
    width: 100%;
    transition: none;
  }
}

.web-about-story-book__stat-num {
    font-size: clamp(1.3rem, 2.8vw, 2.2rem);
    font-weight: 700;
    line-height: 1;
    color: #cb8c1e;
    font-variant-numeric: tabular-nums;
    font-family: "Oswald", sans-serif;
}

.web-about-story-book__stat-label {
  font-size: clamp(0.58rem, 0.9vw, 0.78rem);
  line-height: 1.3;
  color: var(--web-about-story-book-ink);
  opacity: 0.75;
}

@media (max-width: 640px) {
  .web-about-story-book__logo {
    width: 44px;
    margin-bottom: 0.2rem;
  }

  /* bottom half is short on mobile, so drop the 2nd paragraph to fit the stats */
  .web-about-story-book__text--more {
    display: none;
  }

  .web-about-story-book__stats {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    gap: 0.5rem;
  }

  .web-about-story-book__stat-num {
    font-size: 1.2rem;
  }

  .web-about-story-book__stat-label {
    font-size: 0.58rem;
  }
}
/* ---------- faint #FFAA17 dot grid (background colour is NOT changed) ---------- */
.web-about-story-book__sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 170, 23, 0.28) 1.2px, transparent 1.5px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, #000 92%);
  mask-image: radial-gradient(ellipse at center, transparent 30%, #000 92%);
  opacity: calc(0.3 + var(--web-about-story-book-p, 0) * 0.7);
}

/* ---------- corner design: #FFAA17 square + black glass + outline rings ---------- */
.web-about-story-book__glass {
  --web-about-story-book-rot: 16deg;
  --web-about-story-book-dir: -1; /* -1 = comes in from top-left, 1 = bottom-right */
  --web-about-story-book-spin: 1; /* spin direction while scrolling */

  position: absolute;
  z-index: 0;
  width: clamp(90px, 11vw, 190px);
  aspect-ratio: 1;
  border-radius: 24%;
  background: linear-gradient(135deg, #000000 0%, #ffaa1729 50%, #ffbf56 100%);
  box-shadow:
    0 0 60px rgba(255, 170, 23, 0.35),
    0 24px 40px rgba(0, 0, 0, 0.4);
  pointer-events: none;

  /* individual transform properties: tilt + scroll spin + slide-in + float stay separate */
  rotate: calc(
    var(--web-about-story-book-rot) +
      var(--web-about-story-book-p, 0) * 40deg * var(--web-about-story-book-spin)
  );
  translate:
    calc((1 - var(--web-about-story-book-p, 0)) * var(--web-about-story-book-dir) * 70px)
    calc((1 - var(--web-about-story-book-p, 0)) * var(--web-about-story-book-dir) * 70px);
  opacity: calc(0.4 + var(--web-about-story-book-p, 0) * 0.6);
  animation: web-about-story-book-float 8s ease-in-out infinite;
}

/* two thin nested outline rings */
.web-about-story-book__glass::before {
  content: "";
  position: absolute;
  inset: -16%;
  border: 1.5px solid rgba(255, 170, 23, 0.6);
  border-radius: 26%;
  outline: 1px solid rgba(255, 170, 23, 0.25);
  outline-offset: 14px;
  transform: rotate(14deg);
}

/* black smoked-glass square over the orange one */
.web-about-story-book__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(30%, 30%) rotate(-10deg) scale(0.75);
  border-radius: 24%;
  background: linear-gradient(
    135deg,
    rgba(20, 20, 20, 0.78),
    rgba(20, 20, 20, 0.35)
  );
  border: 1px solid rgba(255, 170, 23, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 18px 36px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.web-about-story-book__glass--tl {
  --web-about-story-book-rot: 16deg;
  --web-about-story-book-dir: -1;
  --web-about-story-book-spin: 1;
  top: 3%;
  left: 2%;
}

.web-about-story-book__glass--br {
  --web-about-story-book-rot: -16deg;
  --web-about-story-book-dir: 1;
  --web-about-story-book-spin: -1;
  bottom: 3%;
  right: 2%;
  animation-delay: -4s;
}

/* bottom-right: rings and glass shift the other way (towards the book) */
.web-about-story-book__glass--br::before {
  transform: rotate(-14deg);
}

.web-about-story-book__glass--br::after {
  transform: translate(-30%, -30%) rotate(10deg) scale(0.75);
}

/* ---------- small floating outlined squares ---------- */
.web-about-story-book__chip {
  position: absolute;
  z-index: 0;
  width: clamp(14px, 1.6vw, 26px);
  aspect-ratio: 1;
  border-radius: 28%;
  border: 1.5px solid #ffaa17;
  box-shadow: 0 0 16px rgba(255, 170, 23, 0.5);
  pointer-events: none;
  rotate: 24deg;
  opacity: var(--web-about-story-book-p, 0);
  animation: web-about-story-book-float 6s ease-in-out infinite;
}

.web-about-story-book__chip--tl {
  top: 16%;
  left: 20%;
}

.web-about-story-book__chip--br {
  bottom: 16%;
  right: 20%;
  animation-delay: -3s;
}

@keyframes web-about-story-book-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@media (max-width: 640px) {
  .web-about-story-book__glass {
    width: 76px;
  }

  .web-about-story-book__glass--tl {
    top: 2%;
    left: 4%;
  }

  .web-about-story-book__glass--br {
    bottom: 2%;
    right: 4%;
  }

  .web-about-story-book__chip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .web-about-story-book__glass,
  .web-about-story-book__chip {
    animation: none;
    translate: none;
  }
}
/* about story book end */


/* about our mission start */
/* about our mission start */
/* ============================================================
   .web-about-our-mission  –  hub + 4 cards infographic
   Colours: black page (#000 from body) + #FFAA17
   ============================================================ */

.web-about-our-mission {
  --web-about-our-mission-badge: clamp(64px, 7vw, 88px);

  position: relative;
  width: 100%;
  padding: clamp(3.5rem, 8vw, 0rem) clamp(1rem, 4vw, 3rem);
  overflow: hidden;
  color: #fff;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

/* 3 columns: hub | connector lines | cards */
.web-about-our-mission__inner {
  display: grid;
  grid-template-columns: minmax(240px, 32%) clamp(56px, 9vw, 120px) minmax(0, 1fr);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- hub (left circle) ---------- */
.web-about-our-mission__hub {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background: radial-gradient(circle, #0d0d0d 60%, #1a1a1a 100%);
  box-shadow:
    0 0 0 1px rgba(255, 170, 23, 0.2),
    0 0 90px rgba(255, 170, 23, 0.14);
  opacity: 0;
  scale: 0.85;
}

/* coloured segments on the right side of the ring */
.web-about-our-mission__hub-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 22deg,
    #ffd27a 22deg 58deg,
    #ffaa17 58deg 94deg,
    #d98200 94deg 130deg,
    #7a4a00 130deg 166deg,
    transparent 166deg 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent 88%, #000 88.5%);
  mask: radial-gradient(farthest-side, transparent 88%, #000 88.5%);
}

.web-about-our-mission__hub-core {
  position: absolute;
  inset: 10%;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  border-radius: 50%;
  color: #0a0a0a;
  background: linear-gradient(145deg, #ffbd45 0%, #ffaa17 55%, #e58e00 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    0 12px 30px rgba(0, 0, 0, 0.5);
}

.web-about-our-mission__hub-title {
  margin: 0;
  font-size: clamp(1.3rem, 2.7vw, 2.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.06em;
}

.web-about-our-mission__hub-sub {
  margin-top: 0.6rem;
  margin-right: -0.35em; /* offset trailing letter-spacing */
  font-size: clamp(0.55rem, 0.9vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.35em;
}

/* ---------- connector lines ---------- */
.web-about-our-mission__connect {
  position: relative;
  align-self: stretch;
  opacity: 0;
}

.web-about-our-mission__lines {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 9px); /* leave room for the arrow head */
  height: 100%;
  overflow: visible;
}

.web-about-our-mission__lines path {
  fill: none;
  stroke: #ffaa17;
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
  opacity: 0.75;
  vector-effect: non-scaling-stroke;
  animation: web-about-our-mission-dash 1.4s linear infinite;
}

.web-about-our-mission__arrow {
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #ffaa17;
  transform: translateY(-50%);
}

/* ---------- cards ---------- */
.web-about-our-mission__cards {
  display: grid;
  grid-auto-rows: 1fr; /* equal rows -> arrows line up with card centres */
  align-items: center;
}

.web-about-our-mission__card {
  position: relative;
  display: flex;
  align-items: center;
  margin-block: 0.65rem;
  padding-left: calc(var(--web-about-our-mission-badge) / 2);
  opacity: 0;
}

/* tab colours per card */
.web-about-our-mission__card--1 {
  --web-about-our-mission-tab: linear-gradient(135deg, #ffd27a, #ffaa17);
  --web-about-our-mission-tab-fg: #111;
}

.web-about-our-mission__card--2 {
  --web-about-our-mission-tab: linear-gradient(135deg, #ffaa17, #d98200);
  --web-about-our-mission-tab-fg: #111;
}

.web-about-our-mission__card--3 {
  --web-about-our-mission-tab: linear-gradient(135deg, #ffc050, #e07b00);
  --web-about-our-mission-tab-fg: #111;
}

.web-about-our-mission__card--4 {
  --web-about-our-mission-tab: linear-gradient(135deg, #ffb52e, #e58e00);
  --web-about-our-mission-tab-fg: #111;
}

/* round icon badge, overlaps the left end of the pill */
.web-about-our-mission__badge {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--web-about-our-mission-badge);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: 3px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(#0b0b0b, #0b0b0b) padding-box,
    linear-gradient(135deg, #ffd27a, #ffaa17, #b86e00) border-box;
  box-shadow: 0 0 26px rgba(255, 170, 23, 0.25);
}

.web-about-our-mission__badge svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: #ffaa17;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* pill body */
.web-about-our-mission__body {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  min-height: calc(var(--web-about-our-mission-badge) * 0.9);
  overflow: hidden;
  border: 1px solid rgba(255, 170, 23, 0.28);
  border-radius: 999px;
  background: linear-gradient(180deg, #161616, #0e0e0e);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.web-about-our-mission__card:hover .web-about-our-mission__body {
  border-color: rgba(255, 170, 23, 0.7);
  box-shadow: 0 0 32px rgba(255, 170, 23, 0.18);
}

/* coloured label tab (Mission / Vision / Value / Goals) */
.web-about-our-mission__tab {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  min-width: calc(var(--web-about-our-mission-badge) + 1.6rem);
  padding: 0 1.1rem 0 calc(var(--web-about-our-mission-badge) / 2 + 0.5rem);
  border-radius: 0 22px 22px 0;
  background: var(--web-about-our-mission-tab);
  color: var(--web-about-our-mission-tab-fg);
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  font-weight: 700;
}

.web-about-our-mission__content {
  display: grid;
  gap: 0.15rem;
  align-content: center;
  min-width: 0;
  padding: 0.75rem 1.7rem 0.75rem 1.3rem;
}

.web-about-our-mission__meta {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.web-about-our-mission__num {
  color: #ffaa17;
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  font-weight: 700;
}

.web-about-our-mission__kicker {
  color: rgba(255, 255, 255, 0.5);
  font-size: clamp(0.55rem, 0.8vw, 0.68rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.web-about-our-mission__card-title {
  margin: 0;
  color: #fff;
  font-size: clamp(0.95rem, 1.45vw, 1.2rem);
  font-weight: 700;
  line-height: 1.25;
}

.web-about-our-mission__card-text {
  margin: 0.15rem 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(0.72rem, 0.95vw, 0.84rem);
  line-height: 1.5;
}

/* ---------- entrance animation ---------- */
.web-about-our-mission--in .web-about-our-mission__hub {
  animation: web-about-our-mission-hub-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.web-about-our-mission--in .web-about-our-mission__connect {
  animation: web-about-our-mission-fade 0.8s ease 0.5s forwards;
}

.web-about-our-mission--in .web-about-our-mission__card {
  animation: web-about-our-mission-card-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(0.45s + var(--web-about-our-mission-i, 0) * 0.15s);
}

@keyframes web-about-our-mission-hub-in {
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes web-about-our-mission-fade {
  to {
    opacity: 1;
  }
}

@keyframes web-about-our-mission-card-in {
  from {
    opacity: 0;
    translate: 48px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes web-about-our-mission-dash {
  to {
    stroke-dashoffset: -24;
  }
}

/* ---------- tablet & mobile: hub on top, cards stacked ---------- */
@media (max-width: 900px) {
  .web-about-our-mission__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
  }

  .web-about-our-mission__connect {
    display: none;
  }

  .web-about-our-mission__hub {
    max-width: 280px;
  }

  /* small line + arrow going down from the hub to the cards */
  .web-about-our-mission__hub::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 0.6rem);
    width: 2px;
    height: 1.6rem;
    transform: translateX(-50%);
    background: linear-gradient(#ffaa17, rgba(255, 170, 23, 0));
  }

  .web-about-our-mission__cards {
    grid-auto-rows: auto;
  }

  .web-about-our-mission__card {
    margin-block: 0.5rem;
  }
}

@media (max-width: 560px) {
  .web-about-our-mission {
    --web-about-our-mission-badge: 58px;
  }

  .web-about-our-mission__body {
    border-radius: 34px;
  }

  .web-about-our-mission__tab {
    min-width: calc(var(--web-about-our-mission-badge) + 0.8rem);
    padding-right: 0.7rem;
    font-size: 0.74rem;
  }

  .web-about-our-mission__content {
    padding: 0.7rem 1rem 0.7rem 0.9rem;
  }

  .web-about-our-mission__kicker {
    display: none;
  }

  .web-about-our-mission__card-title {
    font-size: 0.92rem;
  }

  .web-about-our-mission__card-text {
    font-size: 0.72rem;
  }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .web-about-our-mission__hub,
  .web-about-our-mission__connect,
  .web-about-our-mission__card {
    animation: none !important;
    opacity: 1;
    scale: 1;
    translate: none;
  }

  .web-about-our-mission__lines path {
    animation: none;
  }
}
/* about our mission end */


/* about our vision start */
/* about our vision start */
/* ============================================================
   .web-about-our-vision  –  wavy timeline infographic
   Colours: black page (#000 from body) + #FFAA17
   Desktop: 5 columns, circles alternate above / below the centre line
   <= 960px: vertical timeline
   ============================================================ */

.web-about-our-vision {
  position: relative;
  width: 100%;
  padding: clamp(3.5rem, 8vw, 0rem) clamp(1rem, 4vw, 3rem);
  overflow: hidden;
  color: #fff;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- title ---------- */
.web-about-our-vision__title {
  margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  translate: 0 18px;
}

.web-about-our-vision__title-bold {
  margin-right: 0.15em;
  font-weight: 800;
  color: #ffaa17;
}

/* ---------- timeline (desktop) ---------- */
.web-about-our-vision__timeline {
  container-type: inline-size; /* lets the shapes size themselves with cqw */
  width: 100%;
  max-width: 1200px; /* same as .web-about-our-mission__inner */
  margin: 0 auto;
}

.web-about-our-vision__track {
  --web-about-our-vision-lw: 4px;     /* line thickness */
  --web-about-our-vision-gap: 34px;   /* how far arch / U ends stop from the centre line */
  --web-about-our-vision-half: 190px; /* height above / below the centre line */
  --web-about-our-vision-tail: clamp(24px, 6cqw, 56px);
  --web-about-our-vision-w: calc((100cqw - 2 * var(--web-about-our-vision-tail)) / 5);
  --web-about-our-vision-d: clamp(72px, calc(var(--web-about-our-vision-w) * 0.68), 150px);
  --web-about-our-vision-grey: rgba(255, 255, 255, 0.3);

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-inline: var(--web-about-our-vision-tail);
}

/* colour of each segment */
.web-about-our-vision__item--1 { --web-about-our-vision-c: #ffd27a; }
.web-about-our-vision__item--2 { --web-about-our-vision-c: #ffaa17; }
.web-about-our-vision__item--3 { --web-about-our-vision-c: #ff8a1f; }
.web-about-our-vision__item--4 { --web-about-our-vision-c: #ffc24d; }
.web-about-our-vision__item--5 { --web-about-our-vision-c: #ffe1a0; }

.web-about-our-vision__item {
  position: relative;
  height: calc(var(--web-about-our-vision-half) * 2);
}

/* ---------- arch (up) / U (down) ---------- */
.web-about-our-vision__shape {
  position: absolute;
  left: 0;
  right: calc(var(--web-about-our-vision-lw) * -1); /* neighbours share one border */
  border: var(--web-about-our-vision-lw) solid var(--web-about-our-vision-c);
  clip-path: inset(0 100% 0 0); /* hidden until the section is in view */
}

.web-about-our-vision__item--up .web-about-our-vision__shape {
  bottom: calc(50% + var(--web-about-our-vision-gap));
  height: calc(var(--web-about-our-vision-d) + 14px - var(--web-about-our-vision-gap));
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.web-about-our-vision__item--down .web-about-our-vision__shape {
  top: calc(50% + var(--web-about-our-vision-gap));
  height: calc(var(--web-about-our-vision-d) + 14px - var(--web-about-our-vision-gap));
  border-top: 0;
  border-radius: 0 0 999px 999px;
}

/* ---------- circle with icon ---------- */
.web-about-our-vision__node {
  position: absolute;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--web-about-our-vision-d);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #2a2a2a, #0d0d0d 70%);
  box-shadow:
    0 0 0 1px rgba(255, 170, 23, 0.18),
    0 14px 30px rgba(0, 0, 0, 0.6),
    0 0 28px rgba(255, 170, 23, 0.14);
  opacity: 0;
  scale: 0.6;
}

.web-about-our-vision__item--up .web-about-our-vision__node {
  bottom: 50%;
}

.web-about-our-vision__item--down .web-about-our-vision__node {
  top: 50%;
}

.web-about-our-vision__node svg {
  width: 42%;
  height: 42%;
  fill: none;
  stroke: var(--web-about-our-vision-c);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- text under / over the centre line ---------- */
.web-about-our-vision__info {
  position: absolute;
  left: 0;
  right: 0;
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  padding-inline: 8px;
  text-align: center;
  opacity: 0;
  translate: 0 14px;
}

.web-about-our-vision__item--up .web-about-our-vision__info {
  top: calc(50% + 30px);
  align-content: start;
}

.web-about-our-vision__item--down .web-about-our-vision__info {
  bottom: calc(50% + 30px);
  align-content: end;
}

.web-about-our-vision__year {
  color: var(--web-about-our-vision-c);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
}

.web-about-our-vision__tag {
  color: var(--web-about-our-vision-c);
  font-size: clamp(0.58rem, 0.85vw, 0.7rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.web-about-our-vision__text {
  margin: 0.3rem 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: clamp(0.68rem, 0.95vw, 0.86rem);
  line-height: 1.5;
}

/* ---------- joint (grey connector + dot) ---------- */
.web-about-our-vision__joint {
  position: absolute;
  right: calc(var(--web-about-our-vision-lw) * -1);
  bottom: calc(50% - var(--web-about-our-vision-gap));
  width: var(--web-about-our-vision-lw);
  height: calc(var(--web-about-our-vision-gap) * 2);
  background: var(--web-about-our-vision-grey);
  opacity: 0;
}

.web-about-our-vision__joint::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border: 2px solid #ffaa17;
  border-radius: 50%;
  background: #000;
}

/* ---------- grey tails at both ends ---------- */
.web-about-our-vision__item--1::before,
.web-about-our-vision__item--5::before {
  content: "";
  position: absolute;
  bottom: 50%;
  width: var(--web-about-our-vision-tail);
  height: var(--web-about-our-vision-gap);
  border-bottom: var(--web-about-our-vision-lw) solid var(--web-about-our-vision-grey);
  opacity: 0;
}

.web-about-our-vision__item--1::before {
  right: calc(100% - var(--web-about-our-vision-lw));
  border-right: var(--web-about-our-vision-lw) solid var(--web-about-our-vision-grey);
  border-bottom-right-radius: 24px;
}

.web-about-our-vision__item--5::before {
  left: 100%;
  border-left: var(--web-about-our-vision-lw) solid var(--web-about-our-vision-grey);
  border-bottom-left-radius: 24px;
}

/* ---------- entrance animation ---------- */
.web-about-our-vision--in .web-about-our-vision__title {
  animation: web-about-our-vision-up 0.7s ease forwards;
}

.web-about-our-vision--in .web-about-our-vision__shape {
  animation: web-about-our-vision-draw 0.8s ease forwards;
  animation-delay: calc(var(--web-about-our-vision-i, 0) * 0.35s + 0.2s);
}

.web-about-our-vision--in .web-about-our-vision__node {
  animation: web-about-our-vision-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
  animation-delay: calc(var(--web-about-our-vision-i, 0) * 0.35s + 0.1s);
}

.web-about-our-vision--in .web-about-our-vision__info {
  animation: web-about-our-vision-rise 0.7s ease forwards;
  animation-delay: calc(var(--web-about-our-vision-i, 0) * 0.35s + 0.45s);
}

.web-about-our-vision--in .web-about-our-vision__joint,
.web-about-our-vision--in .web-about-our-vision__item--1::before,
.web-about-our-vision--in .web-about-our-vision__item--5::before {
  animation: web-about-our-vision-fade 0.6s ease forwards;
  animation-delay: calc(var(--web-about-our-vision-i, 0) * 0.35s + 0.5s);
}

@keyframes web-about-our-vision-up {
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes web-about-our-vision-draw {
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes web-about-our-vision-pop {
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes web-about-our-vision-rise {
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes web-about-our-vision-fade {
  to {
    opacity: 1;
  }
}

/* ---------- tablet & mobile: vertical timeline ---------- */
@media (max-width: 960px) {
  .web-about-our-vision__timeline {
    container-type: normal;
    max-width: 100%; /* same width as the Our Mission cards */
  }

  /* keep lines readable on wide tablets */
  .web-about-our-vision__text {
    max-width: 62ch;
  }

  .web-about-our-vision__track {
    --web-about-our-vision-d: 68px;

    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-inline: 0;
  }

  /* the vertical line the circles sit on */
  .web-about-our-vision__track::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--web-about-our-vision-d) / 2 - 1.5px);
    width: 3px;
    background: linear-gradient(#ffd27a, #ffaa17 45%, #e07b00);
    opacity: 0.55;
  }

  .web-about-our-vision__item {
    display: grid;
    grid-template-columns: var(--web-about-our-vision-d) minmax(0, 1fr);
    column-gap: 1.2rem;
    align-items: center;
    height: auto;
  }

  .web-about-our-vision__shape,
  .web-about-our-vision__joint,
  .web-about-our-vision__item--1::before,
  .web-about-our-vision__item--5::before {
    display: none;
  }

  .web-about-our-vision__item--up .web-about-our-vision__node,
  .web-about-our-vision__item--down .web-about-our-vision__node {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    transform: none;
    border: 3px solid var(--web-about-our-vision-c);
  }

  .web-about-our-vision__item--up .web-about-our-vision__info,
  .web-about-our-vision__item--down .web-about-our-vision__info {
    position: static;
    top: auto;
    bottom: auto;
    justify-items: start;
    align-content: center;
    padding: 0;
    text-align: left;
  }

  .web-about-our-vision__year {
    font-size: 1.5rem;
  }

  .web-about-our-vision__tag {
    font-size: 0.66rem;
  }

  .web-about-our-vision__text {
    font-size: 0.82rem;
  }
}

@media (max-width: 480px) {
  .web-about-our-vision__track {
    --web-about-our-vision-d: 58px;
  }

  .web-about-our-vision__item {
    column-gap: 0.9rem;
  }

  .web-about-our-vision__year {
    font-size: 1.3rem;
  }

  .web-about-our-vision__text {
    font-size: 0.76rem;
  }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .web-about-our-vision__title,
  .web-about-our-vision__shape,
  .web-about-our-vision__node,
  .web-about-our-vision__info,
  .web-about-our-vision__joint,
  .web-about-our-vision__item--1::before,
  .web-about-our-vision__item--5::before {
    animation: none !important;
    opacity: 1;
    scale: 1;
    translate: none;
    clip-path: none;
  }
}
/* about our vision end */


/* Our Team start */
/* our staff start */
/* ============================================================
   .web-our-staff  –  curved 3D auto-moving team carousel
   Colours: black page (#000 from body) + #FFAA17
   ============================================================ */

.web-our-staff {
  --web-our-staff-accent: #ffaa17;

  /* everything below is built from the card width, so the whole
     carousel scales together and fills the screen width */
  --web-our-staff-w: clamp(120px, 13.5vw, 270px);
  --web-our-staff-h: calc(var(--web-our-staff-w) * 1.55);
  --web-our-staff-step: calc(var(--web-our-staff-w) * 1.05);   /* gap between cards */
  --web-our-staff-z-base: calc(var(--web-our-staff-w) * -1.875); /* centre card depth */
  --web-our-staff-z-step: calc(var(--web-our-staff-w) * 0.625);  /* outer cards come nearer */
  --web-our-staff-persp: calc(var(--web-our-staff-w) * 5.6);
  --web-our-staff-tilt: -12deg;    /* rotateY per card from centre */
  --web-our-staff-fade: 7%;        /* left / right edge fade */

  position: relative;
  width: 100%;
  padding: clamp(3.5rem, 8vw, 0rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  color: #fff;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 170, 23, 0.1), transparent 65%);
}

/* ---------- heading ---------- */
.web-our-staff__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 clamp(1rem, 4vw, 3rem);
  text-align: center;
}

.web-our-staff__title {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  line-height: 1.1;
}

.web-our-staff__title-serif {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 400;
  color: #fff;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
}

.web-our-staff__title-bold {
  font-size: clamp(1.6rem, 4.2vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--web-our-staff-accent);
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
}

.web-our-staff__subtitle {
  max-width: 46ch;
  margin: 1.2rem 0 1.6rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  line-height: 1.6;
}

/* ---------- button ---------- */
.web-our-staff__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.35rem 0.4rem 0.35rem 1.4rem;
  border-radius: 999px;
  background: var(--web-our-staff-accent);
  color: #000;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(255, 170, 23, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.web-our-staff__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(255, 170, 23, 0.4);
}

.web-our-staff__btn-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #000;
  transition: transform 0.3s ease;
}

.web-our-staff__btn:hover .web-our-staff__btn-icon {
  transform: translateX(3px);
}

.web-our-staff__btn-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--web-our-staff-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 3D stage ---------- */
.web-our-staff__stage {
  position: relative;
  width: 100%;
  height: calc(var(--web-our-staff-h) * 1.1 + 50px); /* fits the cards, no big gaps */
  margin-top: clamp(1rem, 3vw, 2rem);
  perspective: var(--web-our-staff-persp);
  perspective-origin: 50% 50%;
  touch-action: pan-y; /* swipe left / right, page still scrolls up / down */
  user-select: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--web-our-staff-fade), #000 calc(100% - var(--web-our-staff-fade)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--web-our-staff-fade), #000 calc(100% - var(--web-our-staff-fade)), transparent 100%);
}

.web-our-staff__card {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--web-our-staff-w);
  height: var(--web-our-staff-h);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 170, 23, 0.25);
  border-radius: 22px;
  background: #111;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--web-our-staff-o) * var(--web-our-staff-step)))
    translateZ(calc(var(--web-our-staff-z-base) + var(--web-our-staff-a) * var(--web-our-staff-z-step)))
    rotateY(calc(var(--web-our-staff-o) * var(--web-our-staff-tilt)));
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
  opacity: 1;
  transition:
    transform 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.6s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  will-change: transform, opacity;
}

/* fade the outer cards */
.web-our-staff__card[data-a="3"] { opacity: 0.45; }
.web-our-staff__card[data-a="4"] { opacity: 0; pointer-events: none; }

/* card wrapping from one end to the other: no sliding across the screen,
   it jumps while hidden and fades in at the other side */
.web-our-staff__card--jump {
  transition:
    opacity 0.6s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.web-our-staff__card--jump[data-a="4"] {
  transition: none;
}

.web-our-staff__card--active {
  border-color: var(--web-our-staff-accent);
  box-shadow:
    0 0 0 1px var(--web-our-staff-accent),
    0 0 40px rgba(255, 170, 23, 0.4),
    0 20px 40px rgba(0, 0, 0, 0.6);
}

.web-our-staff__card:focus-visible {
  outline: 2px solid var(--web-our-staff-accent);
  outline-offset: 3px;
}

.web-our-staff__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: linear-gradient(160deg, #2a2a2a, #0d0d0d);
  filter: grayscale(0.55) brightness(0.85);
  transition: filter 0.6s ease;
}

.web-our-staff__card--active .web-our-staff__img {
  filter: none;
}

/* name + role label */
.web-our-staff__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 2.2rem 0.8rem 0.8rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 25%, transparent);
}

.web-our-staff__name {
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.web-our-staff__role {
  font-size: clamp(0.6rem, 0.8vw, 0.72rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--web-our-staff-accent);
}

/* ---------- left / right buttons ---------- */
.web-our-staff__nav {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: clamp(0.8rem, 2vw, 1.4rem);
}

.web-our-staff__arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 170, 23, 0.5);
  border-radius: 50%;
  background: transparent;
  color: var(--web-our-staff-accent);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.web-our-staff__arrow:hover {
  background: var(--web-our-staff-accent);
  color: #000;
  transform: scale(1.06);
}

.web-our-staff__arrow:focus-visible {
  outline: 2px solid var(--web-our-staff-accent);
  outline-offset: 3px;
}

.web-our-staff__arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 3 highlights ---------- */
.web-our-staff__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1000px;
  margin: clamp(2rem, 4vw, 3.5rem) auto 0;
  padding: 0 clamp(1rem, 4vw, 3rem);
}

.web-our-staff__feature {
  padding: 0.4rem clamp(1rem, 2.4vw, 2.2rem);
  text-align: center;
}

.web-our-staff__feature + .web-our-staff__feature {
  border-left: 1px solid rgba(255, 170, 23, 0.25);
}

.web-our-staff__feature-title {
  margin: 0 0 0.5rem;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  font-weight: 700;
  color: #fff;
}

.web-our-staff__feature-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: clamp(0.72rem, 0.95vw, 0.84rem);
  line-height: 1.6;
}

/* ---------- entrance animation (same pattern as mission / vision) ---------- */
.web-our-staff__head,
.web-our-staff__stage,
.web-our-staff__nav,
.web-our-staff__features {
  opacity: 0;
  translate: 0 24px;
}

.web-our-staff--in .web-our-staff__nav {
  animation: web-our-staff-up 0.8s ease 0.45s forwards;
}

.web-our-staff--in .web-our-staff__head {
  animation: web-our-staff-up 0.8s ease forwards;
}

.web-our-staff--in .web-our-staff__stage {
  animation: web-our-staff-up 0.9s ease 0.25s forwards;
}

.web-our-staff--in .web-our-staff__features {
  animation: web-our-staff-up 0.8s ease 0.55s forwards;
}

@keyframes web-our-staff-up {
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ---------- tablet & small laptop ---------- */
@media (max-width: 1024px) {
  .web-our-staff {
    --web-our-staff-w: clamp(110px, 15vw, 190px);
    --web-our-staff-step: calc(var(--web-our-staff-w) * 0.9);
    --web-our-staff-tilt: -11deg;
  }
}

/* ---------- mobile: 5 cards visible, features stacked ---------- */
@media (max-width: 640px) {
  .web-our-staff {
    --web-our-staff-w: clamp(96px, 36vw, 170px);
    --web-our-staff-h: calc(var(--web-our-staff-w) * 1.6);
    --web-our-staff-step: calc(var(--web-our-staff-w) * 0.9);
    --web-our-staff-tilt: -10deg;
    --web-our-staff-fade: 4%;
  }

  .web-our-staff__stage {
    margin-top: 0.8rem;
  }

  .web-our-staff__card {
    border-radius: 16px;
  }

  .web-our-staff__card[data-a="2"] { opacity: 0.7; }
  .web-our-staff__card[data-a="3"] { opacity: 0; pointer-events: none; }

  /* hide the half-cut names on the cards peeking at the screen edge */
  .web-our-staff__info {
    transition: opacity 0.4s ease;
  }

  .web-our-staff__card[data-a="2"] .web-our-staff__info {
    opacity: 0;
  }

  .web-our-staff__info {
    padding: 1.6rem 0.55rem 0.6rem;
  }

  .web-our-staff__features {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }

  .web-our-staff__feature + .web-our-staff__feature {
    padding-top: 1.4rem;
    border-left: 0;
    border-top: 1px solid rgba(255, 170, 23, 0.25);
  }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .web-our-staff__card,
  .web-our-staff__btn,
  .web-our-staff__btn-icon {
    transition-duration: 0.01s;
  }

  .web-our-staff__head,
  .web-our-staff__stage,
  .web-our-staff__features {
    animation: none !important;
    opacity: 1;
    translate: none;
  }
}
/* our staff end */


/* Single service banner start */
/* Single service banner start */
/* ============================================================
   .web-single-service-banner  –  full-width, square, professional
   Paste this block at the end of website.css
   Colours: black page (#000 from body) + #FFAA17
   ============================================================ */

/* ---------- wrap: only keeps the banner below the fixed header (same as About) ---------- */
.web-single-service-banner-wrap {
  --web-single-service-banner-header-h: 95px; /* your header height, change if needed */
  --web-single-service-banner-gap: clamp(1.5rem, 3vw, 2.5rem); /* space between header and banner */

  width: 100%;
  padding-top: calc(var(--web-single-service-banner-header-h) + var(--web-single-service-banner-gap));
}

@media (max-width: 900px) {
  .web-single-service-banner-wrap {
    --web-single-service-banner-header-h: 90px;
  }
}

@media (max-width: 640px) {
  .web-single-service-banner-wrap {
    --web-single-service-banner-header-h: 80px;
    --web-single-service-banner-gap: 1rem;
  }
}

/* ---------- banner (edge to edge, no radius) ---------- */
.web-single-service-banner {
  --web-single-service-banner-accent: #ffaa17;
  --web-single-service-banner-line: rgba(255, 170, 23, 0.22);

  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #060606;
  border-top: 1px solid var(--web-single-service-banner-line);
  border-bottom: 1px solid var(--web-single-service-banner-line);
  color: #fff;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

/* slow amber light drifting across the background */
.web-single-service-banner__glow {
  position: absolute;
  top: -60%;
  right: -10%;
  z-index: 0;
  width: 60%;
  height: 220%;
  background: radial-gradient(closest-side, rgba(255, 170, 23, 0.2), transparent 70%);
  pointer-events: none;
  animation: web-single-service-banner-drift 12s ease-in-out infinite alternate;
}

/* thin vertical guide lines (blueprint feel) */
.web-single-service-banner__lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 25% 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}

/* big faint outlined word in the background (whole word visible, centered) */
.web-single-service-banner__watermark {
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 0;
  translate: -50% -50%;
  font-family: "Oswald", "Arial Narrow", Impact, sans-serif; /* clean single outline */
  font-size: 19vw; /* sized by screen width, so the full word always fits */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 170, 23, 0.22);
  /* amber light that passes through the letters */
  background-image: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 170, 23, 0.4) 50%,
    transparent 62%
  );
  background-size: 250% 100%;
  background-position: 150% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
  opacity: 0;
}

/* same width as the other sections of the site */
.web-single-service-banner__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* ---------- main block ---------- */
.web-single-service-banner__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 2rem;
  padding-top: clamp(1.6rem, 3.4vw, 2.6rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

/* breadcrumb: plain text, no pill */
.web-single-service-banner__breadcrumb {
  grid-column: 1 / -1;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  opacity: 0;
  translate: -14px 0;
}

.web-single-service-banner__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 500;
}

.web-single-service-banner__crumb-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.web-single-service-banner__crumb-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.3s ease;
}

.web-single-service-banner__crumb-link:hover {
  color: var(--web-single-service-banner-accent);
}

.web-single-service-banner__crumb-link:focus-visible,
.web-single-service-banner__cta:focus-visible {
  outline: 2px solid var(--web-single-service-banner-accent);
  outline-offset: 4px;
}

.web-single-service-banner__crumb-sep {
  width: 1px;
  height: 0.9em;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-24deg);
}

.web-single-service-banner__crumb-current {
  color: var(--web-single-service-banner-accent);
}

/* ---------- title ---------- */
.web-single-service-banner__title {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.26em;
  margin: 0;
  font-size: clamp(2.4rem, 5.8vw, 4.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* each word is clipped, so it slides up from behind a line */
.web-single-service-banner__word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.web-single-service-banner__word-text {
  display: inline-block;
  translate: 0 110%;
  font-family: "Oswald", sans-serif;
}

.web-single-service-banner__word--accent {
  color: var(--web-single-service-banner-accent);
}

.web-single-service-banner__subtitle {
  max-width: 48ch;
  margin: clamp(0.5rem, 1.2vw, 0.8rem) 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(0.92rem, 1.25vw, 1.05rem);
  line-height: 1.55;
  opacity: 0;
  translate: 0 12px;
}

/* ---------- button (square, matches the banner) ---------- */
.web-single-service-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1.3rem;
  background: var(--web-single-service-banner-accent);
  color: #000;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  opacity: 0;
  translate: 14px 0;
  transition: background 0.3s ease, gap 0.3s ease;
}

.web-single-service-banner__cta:hover {
  gap: 1.1rem;
  background: #ffbd45;
}

.web-single-service-banner__cta-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}



/* ---------- entrance (starts when the loader is gone) ---------- */
.web-single-service-banner--play .web-single-service-banner__breadcrumb {
  animation: web-single-service-banner-slide 0.7s ease 0.05s forwards;
}

.web-single-service-banner--play .web-single-service-banner__word-text {
  animation: web-single-service-banner-rise 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(0.15s + var(--web-single-service-banner-i, 0) * 0.14s);
  font-family: "Oswald", sans-serif;
}

.web-single-service-banner--play .web-single-service-banner__subtitle {
  animation: web-single-service-banner-slide 0.8s ease 0.6s forwards;
  color: #FFAA17;
}

.web-single-service-banner--play .web-single-service-banner__cta {
  animation: web-single-service-banner-slide 0.8s ease 0.75s forwards;
}

.web-single-service-banner--play .web-single-service-banner__watermark {
  animation:
    web-single-service-banner-fade 1.4s ease 0.3s forwards,
    web-single-service-banner-shine 6s ease-in-out 1.7s infinite,
    web-single-service-banner-float 7s ease-in-out 1.7s infinite alternate;
}

@keyframes web-single-service-banner-rise {
  to {
    translate: 0 0;
  }
}

@keyframes web-single-service-banner-slide {
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes web-single-service-banner-fade {
  to {
    opacity: 1;
  }
}

/* light moves left to right through the word, then repeats */
@keyframes web-single-service-banner-shine {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -50% 0;
  }
}

/* very small up and down movement */
@keyframes web-single-service-banner-float {
  from {
    transform: translateY(-6px);
  }
  to {
    transform: translateY(6px);
  }
}

@keyframes web-single-service-banner-drift {
  from {
    translate: 0 0;
  }
  to {
    translate: -22% 6%;
  }
}

/* ---------- tablet & mobile ---------- */
@media (max-width: 640px) {
  .web-single-service-banner__main {
    grid-template-columns: minmax(0, 1fr);
  }

  .web-single-service-banner__title {
    font-size: clamp(2.2rem, 11vw, 3rem);
  }

  /* keeps the banner short on phones */
  .web-single-service-banner__cta {
    display: none;
  }


}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .web-single-service-banner__glow {
    animation: none;
  }

  .web-single-service-banner__word-text,
  .web-single-service-banner__breadcrumb,
  .web-single-service-banner__subtitle,
  .web-single-service-banner__cta,
  .web-single-service-banner__watermark {
    animation: none !important;
    opacity: 1;
    translate: none;
  }
}
/* Single service banner end */

/* Single service cards start */
/* Web development design start */
/* ============================================================
   .web-development-design  –  Web Applications + Mobile Applications
   Web cards    -> browser-window mockup
   Mobile cards -> phone mockup with a soft amber glow
   Colours: black page (#000 from body) + #FFAA17
   Paste this block at the end of website.css
   ============================================================ */

.web-development-design {
  --web-development-design-accent: #ffaa17;
  --web-development-design-soft: rgba(255, 170, 23, 0.28);
  --web-development-design-faint: rgba(255, 170, 23, 0.1);
  --web-development-design-radius: 10px; /* change to 0 for fully square cards */
  --web-development-design-gap: clamp(1rem, 2.2vw, 1.75rem);
  --web-development-design-per: 3.15; /* cards visible at once (the .15 shows a peek of the next card) */

  width: 100%;
  color: #fff;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- one section (web / mobile) ---------- */
.web-development-design__section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 3rem);
}

/* amber light behind each section (left on web, right on mobile) */
.web-development-design__section::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(60%, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 170, 23, 0.14), transparent 70%);
  pointer-events: none;
}

.web-development-design__section--web::before {
  top: -20%;
  left: -12%;
}

.web-development-design__section--mobile {
  background: linear-gradient(180deg, #000, rgba(255, 170, 23, 0.07));
}

.web-development-design__section--mobile::before {
  right: -12%;
  bottom: -20%;
}

.web-development-design__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- section head ---------- */
.web-development-design__head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: end;
  column-gap: clamp(1rem, 3vw, 2.5rem);
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
  padding-bottom: clamp(1.2rem, 2.4vw, 1.8rem);
}

/* amber line that draws under the head */
.web-development-design__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--web-development-design-accent), rgba(255, 170, 23, 0.08));
  transform: scaleX(0);
  transform-origin: left center;
}

/* big outlined number */
.web-development-design__big-num {
  font-family: "Oswald", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 700;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 170, 23, 0.55);
  user-select: none;
  opacity: 0;
  translate: 0 20px;
}

.web-development-design__tag {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.7rem;
  color: var(--web-development-design-accent);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.web-development-design__tag::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--web-development-design-accent);
}

.web-development-design__title {
  margin: 0;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform : uppercase; 
}

.web-development-design__title-accent {
  color: var(--web-development-design-accent);
  font-family: "Oswald", sans-serif;
}

.web-development-design__lead {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.6;
}

.web-development-design__head-text,
.web-development-design__lead {
  opacity: 0;
  translate: 0 20px;
}

/* ---------- slider (scroll-snap track, no prev / next buttons) ---------- */
.web-development-design__slider {
  position: relative;
}

.web-development-design__track {
  display: flex;
  gap: var(--web-development-design-gap);
  /* top / bottom space so the hover lift and glow are not cut off */
  padding: 12px 0 26px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}

.web-development-design__track::-webkit-scrollbar {
  display: none;
}

.web-development-design__track:focus-visible {
  outline: 2px solid var(--web-development-design-accent);
  outline-offset: 4px;
}

/* while dragging with the mouse: free movement, snaps again on release */
.web-development-design__track--drag {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.web-development-design__track > .web-development-design__card {
  flex: 0 0 calc(
    (100% - (var(--web-development-design-per) - 1) * var(--web-development-design-gap)) /
      var(--web-development-design-per)
  );
  scroll-snap-align: start;
}

/* read more link */
.web-development-design__more-wrap {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.web-development-design__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--web-development-design-accent);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.3s ease, color 0.3s ease;
}

.web-development-design__more:hover,
.web-development-design__card:hover .web-development-design__more {
  gap: 0.85rem;
}

.web-development-design__more:hover {
  color: #ffbd45;
}

.web-development-design__more:focus-visible {
  outline: 2px solid var(--web-development-design-accent);
  outline-offset: 4px;
}

.web-development-design__more-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.web-development-design__card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--web-development-design-radius);
  background: linear-gradient(180deg, #121212, #0a0a0a);
  opacity: 0;
  translate: 0 30px;
  transition:
    transform 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

/* amber line that draws along the top on hover */
.web-development-design__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 2px;
  background: var(--web-development-design-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s ease;
}

.web-development-design__card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 170, 23, 0.55);
  box-shadow: 0 0px 50px rgba(255, 170, 23, 0.12);
}

.web-development-design__card:hover::before {
  transform: scaleX(1);
}

/* ---------- preview area (mockup) ---------- */
.web-development-design__preview {
  padding: clamp(1rem, 2vw, 1.4rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 170, 23, 0.08), transparent 70%);
}

/* ---------- browser mockup (web) ---------- */
.web-development-design__browser {
  overflow: hidden;
  border: 1px solid var(--web-development-design-soft);
  border-radius: 8px;
  background: #0b0b0b;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}

.web-development-design__browser-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.web-development-design__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--web-development-design-accent);
}

.web-development-design__dot:nth-child(2) {
  opacity: 0.55;
}

.web-development-design__dot:nth-child(3) {
  opacity: 0.25;
}

.web-development-design__url {
  flex: 1;
  height: 16px;
  margin-left: 0.5rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
}

.web-development-design__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  /* shows only if an image is missing */
  background:
    radial-gradient(rgba(255, 170, 23, 0.25) 1px, transparent 1.4px) 0 0 / 18px 18px,
    linear-gradient(135deg, rgba(255, 170, 23, 0.14), #0b0b0b 65%);
}

.web-development-design__screen-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: top center;
  transition: object-position 3s ease, scale 0.6s ease;
}

/* tall screenshots slowly scroll down on hover, like browsing the page */
.web-development-design__card:hover .web-development-design__screen-img {
  object-position: bottom center;
  scale: 1.03;
}

/* light that passes over the screen on hover */
.web-development-design__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%);
  translate: -100% 0;
  pointer-events: none;
}

.web-development-design__card:hover .web-development-design__screen::after {
  animation: web-development-design-shine 0.9s ease forwards;
}

/* ---------- drawn screen content (shown when no image is given) ---------- */
.web-development-design__ui {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem;
}

.web-development-design__ui--shop,
.web-development-design__ui--list {
  flex-direction: column;
}

/* dashboard: sidebar + animated bars */
.web-development-design__ui-side {
  flex: 0 0 18%;
  border-radius: 4px;
  background: rgba(255, 170, 23, 0.12);
}

.web-development-design__ui-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
}

.web-development-design__ui-line {
  height: 8px;
  width: 40%;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.2);
}

.web-development-design__ui-bars {
  display: flex;
  flex: 1;
  align-items: flex-end;
  gap: 6%;
}

.web-development-design__ui-bar {
  flex: 1;
  height: var(--web-development-design-h, 60%);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--web-development-design-accent), rgba(255, 170, 23, 0.2));
  transform: scaleY(0);
  transform-origin: bottom;
}

/* shop: hero + tiles */
.web-development-design__ui-hero {
  flex: 0 0 42%;
  border-radius: 4px;
  background: linear-gradient(120deg, var(--web-development-design-accent), rgba(255, 170, 23, 0.15));
}

.web-development-design__ui-tiles {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.web-development-design__ui-tile {
  position: relative;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  opacity: 0;
}

.web-development-design__ui-tile::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  right: 40%;
  bottom: 0.4rem;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 170, 23, 0.7);
}

/* list: rows */
.web-development-design__ui-rows {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.35rem;
}

.web-development-design__ui-row {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  opacity: 0;
}

.web-development-design__ui-row::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: rgba(255, 170, 23, 0.75);
}

.web-development-design__ui-row::after {
  content: "";
  flex: 1;
  height: 6px;
  max-width: var(--web-development-design-w, 70%);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
}

/* ---------- phone mockup (mobile) ---------- */
.web-development-design__phone-wrap {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: 0.4rem;
}

.web-development-design__phone-glow {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 170, 23, 0.4), transparent 75%);
  filter: blur(26px);
  animation: web-development-design-pulse 4s ease-in-out infinite alternate;
}

.web-development-design__phone {
  position: relative;
  width: clamp(130px, 46%, 170px);
  aspect-ratio: 9 / 18;
  overflow: hidden;
  border: 5px solid #1c1c1c;
  border-radius: 26px;
  background:
    radial-gradient(rgba(255, 170, 23, 0.25) 1px, transparent 1.4px) 0 0 / 16px 16px,
    linear-gradient(160deg, rgba(255, 170, 23, 0.14), #080808 65%);
  outline: 1px solid var(--web-development-design-soft);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.web-development-design__phone-notch {
  position: absolute;
  top: 5px;
  left: 50%;
  z-index: 2;
  width: 34%;
  height: 8px;
  border-radius: 99px;
  background: #1c1c1c;
  translate: -50% 0;
}

.web-development-design__phone-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: object-position 3s ease, scale 0.6s ease;
}

/* tall screenshots slowly scroll down on hover, like using the app */
.web-development-design__card:hover .web-development-design__phone-img {
  object-position: bottom center;
  scale: 1.03;
}

/* soft dark fade at the bottom, so the navigation is always readable */
.web-development-design__phone::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 30%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  pointer-events: none;
}

.web-development-design__app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.5rem 0.65rem 2.6rem;
}

.web-development-design__app-top {
  height: 8px;
  width: 45%;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.22);
}

.web-development-design__app-hero {
  position: relative;
  display: grid;
  flex: 0 0 38%;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
}

/* ring variant */
.web-development-design__app-hero--ring {
  background: rgba(255, 255, 255, 0.05);
}

.web-development-design__app-hero--ring::before {
  content: "";
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--web-development-design-accent) 0 70%, rgba(255, 255, 255, 0.12) 70% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 64%, #000 66%);
  mask: radial-gradient(farthest-side, transparent 64%, #000 66%);
  animation: web-development-design-spin 10s linear infinite;
}

/* banner variant */
.web-development-design__app-hero--banner {
  background: linear-gradient(135deg, var(--web-development-design-accent), rgba(255, 170, 23, 0.15));
}

.web-development-design__app-hero--banner::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  width: 45%;
  height: 6px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.55);
}

/* map variant */
.web-development-design__app-hero--map {
  border: 1px solid rgba(255, 170, 23, 0.25);
  background-image:
    linear-gradient(rgba(255, 170, 23, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 170, 23, 0.16) 1px, transparent 1px);
  background-size: 14px 14px;
}

.web-development-design__app-hero--map::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--web-development-design-accent);
  animation: web-development-design-ping 1.8s ease-out infinite;
}

.web-development-design__app-row {
  flex: 0 0 11%;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
}

.web-development-design__app-nav {
  position: absolute;
  left: 0.65rem;
  right: 0.65rem;
  bottom: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  height: 22px;
  padding: 0 0.8rem;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.web-development-design__app-nav i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.web-development-design__app-nav i:first-child {
  background: var(--web-development-design-accent);
}

/* ---------- card text ---------- */
.web-development-design__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.1rem, 2vw, 1.5rem);
}

.web-development-design__meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.web-development-design__num {
  color: var(--web-development-design-accent);
  font-size: 0.82rem;
  font-weight: 700;
}

.web-development-design__category {
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--web-development-design-soft);
  border-radius: 99px;
  color: var(--web-development-design-accent);
  font-size: 0.72rem;
  font-weight: 500;
}

.web-development-design__name {
  margin: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
}

.web-development-design__desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* technologies */
.web-development-design__tech-wrap {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.web-development-design__tech-label {
  margin: 0 0 0.6rem;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.web-development-design__tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.web-development-design__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.76rem;
  font-weight: 500;
  opacity: 0;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.web-development-design__chip::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--web-development-design-accent);
}

.web-development-design__chip:hover {
  border-color: var(--web-development-design-accent);
  background: rgba(255, 170, 23, 0.1);
  color: #fff;
}

/* ---------- entrance (when the section scrolls into view) ---------- */
.web-development-design--in .web-development-design__big-num {
  animation: web-development-design-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.web-development-design--in .web-development-design__head-text {
  animation: web-development-design-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s forwards;
}

.web-development-design--in .web-development-design__lead {
  animation: web-development-design-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;
}

.web-development-design--in .web-development-design__head::after {
  animation: web-development-design-line 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}

.web-development-design--in .web-development-design__card {
  animation: web-development-design-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(0.3s + var(--web-development-design-i, 0) * 0.15s);
}

.web-development-design--in .web-development-design__ui-bar {
  animation: web-development-design-grow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(0.7s + var(--web-development-design-i, 0) * 0.15s + var(--web-development-design-bi, 0) * 0.08s);
}

.web-development-design--in .web-development-design__ui-tile,
.web-development-design--in .web-development-design__ui-row {
  animation: web-development-design-fade 0.6s ease forwards;
  animation-delay: calc(0.7s + var(--web-development-design-i, 0) * 0.15s + var(--web-development-design-bi, 0) * 0.1s);
}



@keyframes web-development-design-rise {
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes web-development-design-fade {
  to {
    opacity: 1;
  }
}

@keyframes web-development-design-line {
  to {
    transform: scaleX(1);
  }
}

@keyframes web-development-design-grow {
  to {
    transform: scaleY(1);
  }
}

@keyframes web-development-design-shine {
  to {
    translate: 100% 0;
  }
}

@keyframes web-development-design-pulse {
  from {
    opacity: 0.5;
    scale: 0.9;
  }
  to {
    opacity: 1;
    scale: 1.1;
  }
}

@keyframes web-development-design-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes web-development-design-ping {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 170, 23, 0.6);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(255, 170, 23, 0);
  }
}

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .web-development-design {
    --web-development-design-per: 2.15;
  }
}

@media (max-width: 900px) {
  .web-development-design__head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.9rem;
  }

  .web-development-design__big-num {
    font-size: clamp(3.4rem, 14vw, 5rem);
  }
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .web-development-design {
    --web-development-design-per: 1.12;
  }

  .web-development-design__hint {
    display: none;
  }

  .web-development-design__now {
    min-width: 6.5rem;
  }

  .web-development-design__phone {
    width: clamp(130px, 42%, 160px);
  }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .web-development-design__big-num,
  .web-development-design__head-text,
  .web-development-design__lead,
  .web-development-design__card,
  .web-development-design__ui-tile,
  .web-development-design__ui-row {
    animation: none !important;
    opacity: 1;
    translate: none;
  }

  .web-development-design__ui-bar,
  .web-development-design__head::after {
    animation: none !important;
    transform: none;
  }

  .web-development-design__phone-glow,
  .web-development-design__app-hero--ring::before,
  .web-development-design__app-hero--map::after {
    animation: none;
  }
}
/* Web development design end */


/*  SIngle blog page design start */
/*  SIngle blog page design start */
/* =====================================================
   Single Blog page  –  black + #FFAA17
   Every class starts with  web-single-blog
   The loader (.web-loader ...) is NOT here, it already lives in website.css
   ===================================================== */

.web-single-blog {
  --web-single-blog-accent: #ffaa17;
  --web-single-blog-accent-soft: rgba(255, 170, 23, 0.1);
  --web-single-blog-soft: rgba(255, 170, 23, 0.28);
  --web-single-blog-line: rgba(255, 255, 255, 0.08);
  --web-single-blog-text: rgba(255, 255, 255, 0.72);
  --web-single-blog-muted: rgba(255, 255, 255, 0.5);
  --web-single-blog-radius: 10px;
  --web-single-blog-card-bg: linear-gradient(180deg, #121212, #0a0a0a);

  display: block;
  width: 100%;
  background: #000;
  color: #fff;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

.web-single-blog-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.web-single-blog-icon--accent {
  color: var(--web-single-blog-accent);
}

/* ================= Reading progress ================= */
.web-single-blog-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

.web-single-blog-progress-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffd27a, #ffaa17);
  box-shadow: 0 0 12px rgba(255, 170, 23, 0.7);
  transition: width 0.1s linear;
}

/* ================= Scroll reveal ================= */
.web-single-blog-reveal {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    translate 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--web-single-blog-delay, 0ms);
}

.web-single-blog-reveal--in {
  opacity: 1;
  translate: 0 0;
}

/* =====================================================
   BANNER  –  exact copy of the SingleService banner
   ===================================================== */
.web-single-blog-banner-wrap {
  --web-single-blog-banner-header-h: 95px;
  --web-single-blog-banner-gap: clamp(1.5rem, 3vw, 2.5rem);

  width: 100%;
  padding-top: calc(var(--web-single-blog-banner-header-h) + var(--web-single-blog-banner-gap));
}

@media (max-width: 900px) {
  .web-single-blog-banner-wrap {
    --web-single-blog-banner-header-h: 90px;
  }
}

@media (max-width: 640px) {
  .web-single-blog-banner-wrap {
    --web-single-blog-banner-header-h: 80px;
    --web-single-blog-banner-gap: 1rem;
  }
}

.web-single-blog-banner {
  --web-single-blog-banner-accent: #ffaa17;
  --web-single-blog-banner-line: rgba(255, 170, 23, 0.22);

  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #060606;
  border-top: 1px solid var(--web-single-blog-banner-line);
  border-bottom: 1px solid var(--web-single-blog-banner-line);
  color: #fff;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

.web-single-blog-banner__glow {
  position: absolute;
  top: -60%;
  right: -10%;
  z-index: 0;
  width: 60%;
  height: 220%;
  background: radial-gradient(closest-side, rgba(255, 170, 23, 0.2), transparent 70%);
  pointer-events: none;
  animation: web-single-blog-banner-drift 12s ease-in-out infinite alternate;
}

.web-single-blog-banner__lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 25% 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}

.web-single-blog-banner__watermark {
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 0;
  translate: -50% -50%;
  font-family: "Oswald", "Arial Narrow", Impact, sans-serif;
  font-size: 19vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 170, 23, 0.22);
  background-image: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 170, 23, 0.4) 50%,
    transparent 62%
  );
  background-size: 250% 100%;
  background-position: 150% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
  opacity: 0;
}

.web-single-blog-banner__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.web-single-blog-banner__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 2rem;
  padding-top: clamp(1.6rem, 3.4vw, 2.6rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.web-single-blog-banner__breadcrumb {
  grid-column: 1 / -1;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  opacity: 0;
  translate: -14px 0;
}

.web-single-blog-banner__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 500;
}

.web-single-blog-banner__crumb-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.web-single-blog-banner__crumb-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.3s ease;
}

.web-single-blog-banner__crumb-link:hover {
  color: var(--web-single-blog-banner-accent);
}

.web-single-blog-banner__crumb-link:focus-visible,
.web-single-blog-banner__cta:focus-visible {
  outline: 2px solid var(--web-single-blog-banner-accent);
  outline-offset: 4px;
}

.web-single-blog-banner__crumb-sep {
  width: 1px;
  height: 0.9em;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-24deg);
}

.web-single-blog-banner__crumb-current {
  color: var(--web-single-blog-banner-accent);
}

.web-single-blog-banner__title {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.26em;
  margin: 0;
  font-size: clamp(2.4rem, 5.8vw, 4.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.web-single-blog-banner__word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.web-single-blog-banner__word-text {
  display: inline-block;
  translate: 0 110%;
}

.web-single-blog-banner__word--accent {
  color: var(--web-single-blog-banner-accent);
}

.web-single-blog-banner__subtitle {
  max-width: 48ch;
  margin: clamp(0.5rem, 1.2vw, 0.8rem) 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(0.92rem, 1.25vw, 1.05rem);
  line-height: 1.55;
  opacity: 0;
  translate: 0 12px;
}

.web-single-blog-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1.3rem;
  background: var(--web-single-blog-banner-accent);
  color: #000;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  opacity: 0;
  translate: 14px 0;
  transition: background 0.3s ease, gap 0.3s ease;
}

.web-single-blog-banner__cta:hover {
  gap: 1.1rem;
  background: #ffbd45;
}

.web-single-blog-banner__cta-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.web-single-blog-banner--play .web-single-blog-banner__breadcrumb {
  animation: web-single-blog-banner-slide 0.7s ease 0.05s forwards;
}

.web-single-blog-banner--play .web-single-blog-banner__word-text {
  animation: web-single-blog-banner-rise 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(0.15s + var(--web-single-blog-banner-i, 0) * 0.14s);
  font-family: "Oswald", sans-serif;
}

.web-single-blog-banner--play .web-single-blog-banner__subtitle {
  animation: web-single-blog-banner-slide 0.8s ease 0.6s forwards;
}

.web-single-blog-banner--play .web-single-blog-banner__cta {
  animation: web-single-blog-banner-slide 0.8s ease 0.75s forwards;
}

.web-single-blog-banner--play .web-single-blog-banner__watermark {
  animation:
    web-single-blog-banner-fade 1.4s ease 0.3s forwards,
    web-single-blog-banner-shine 6s ease-in-out 1.7s infinite,
    web-single-blog-banner-float 7s ease-in-out 1.7s infinite alternate;
}

@keyframes web-single-blog-banner-rise {
  to { translate: 0 0; }
}

@keyframes web-single-blog-banner-slide {
  to { opacity: 1; translate: 0 0; }
}

@keyframes web-single-blog-banner-fade {
  to { opacity: 1; }
}

@keyframes web-single-blog-banner-shine {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

@keyframes web-single-blog-banner-float {
  from { transform: translateY(-6px); }
  to { transform: translateY(6px); }
}

@keyframes web-single-blog-banner-drift {
  from { translate: 0 0; }
  to { translate: -22% 6%; }
}

@media (max-width: 640px) {
  .web-single-blog-banner__main {
    grid-template-columns: minmax(0, 1fr);
  }

  .web-single-blog-banner__title {
    font-size: clamp(2.2rem, 11vw, 3rem);
  }

  .web-single-blog-banner__cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .web-single-blog-banner__glow {
    animation: none;
  }

  .web-single-blog-banner__word-text,
  .web-single-blog-banner__breadcrumb,
  .web-single-blog-banner__subtitle,
  .web-single-blog-banner__cta,
  .web-single-blog-banner__watermark {
    animation: none !important;
    opacity: 1;
    translate: none;
  }
}

/* =====================================================
   LAYOUT
   ===================================================== */
.web-single-blog-section {
  position: relative;
  overflow: clip; /* clip (not hidden), so the sticky sidebar works */
  isolation: isolate;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 7vw, 6rem);
}

.web-single-blog-section::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -14%;
  z-index: -1;
  width: min(60%, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 170, 23, 0.12), transparent 70%);
  pointer-events: none;
}

.web-single-blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
}

.web-single-blog-main {
  min-width: 0;
}

/* =====================================================
   ARTICLE
   ===================================================== */
.web-single-blog-article {
  min-width: 0;
}

.web-single-blog-figure {
  position: relative;
  margin: 0 0 1.6rem;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  border: 1px solid var(--web-single-blog-soft);
  border-radius: var(--web-single-blog-radius);
  background: #0b0b0b;
  box-shadow: 0 20px 50px rgba(255, 170, 23, 0.08);
}

.web-single-blog-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.web-single-blog-figure-ph {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(rgba(255, 170, 23, 0.25) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(135deg, rgba(255, 170, 23, 0.18), #0b0b0b 65%);
}

.web-single-blog-figure-letter {
  font-family: "Oswald", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(5rem, 16vw, 11rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 170, 23, 0.6);
  user-select: none;
}

.web-single-blog-noimg {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: "Oswald", "Arial Narrow", Impact, sans-serif;
  font-size: 3.4rem;
  font-weight: 700;
  color: var(--web-single-blog-accent);
}

.web-single-blog-chip {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 99px;
  background: var(--web-single-blog-accent);
  color: #000;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.web-single-blog-chip--float {
  position: absolute;
  top: 14px;
  left: 14px;
}

/* meta */
.web-single-blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--web-single-blog-line);
}

.web-single-blog-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--web-single-blog-muted);
  font-size: 0.85rem;
}

.web-single-blog-meta-item .web-single-blog-icon {
  color: var(--web-single-blog-accent);
}

.web-single-blog-title {
  margin: 0 0 1rem;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.web-single-blog-lead {
  margin: 0 0 1.8rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--web-single-blog-accent);
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.7;
}

/* key takeaways */
.web-single-blog-takeaways {
  position: relative;
  margin-bottom: 1.4rem;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  overflow: hidden;
  border: 1px solid var(--web-single-blog-soft);
  border-radius: var(--web-single-blog-radius);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255, 170, 23, 0.14), transparent 60%),
    var(--web-single-blog-card-bg);
}

.web-single-blog-takeaways-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  color: var(--web-single-blog-accent);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.web-single-blog-takeaways-list {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.web-single-blog-takeaways-list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.55;
}

.web-single-blog-takeaways-list .web-single-blog-icon {
  margin-top: 0.2rem;
}

/* stats */
.web-single-blog-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0.6rem;
  border: 1px solid var(--web-single-blog-line);
  border-radius: var(--web-single-blog-radius);
  background: var(--web-single-blog-card-bg);
}

.web-single-blog-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  text-align: center;
}

.web-single-blog-stat + .web-single-blog-stat {
  border-left: 1px solid var(--web-single-blog-line);
}

.web-single-blog-stat-value {
  color: var(--web-single-blog-accent);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
}

.web-single-blog-stat-label {
  color: var(--web-single-blog-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

/* section blocks */
.web-single-blog-section-block {
  scroll-margin-top: 110px;
  margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
}

.web-single-blog-h2 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.2rem;
  padding-bottom: 1rem;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.web-single-blog-h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--web-single-blog-accent), rgba(255, 170, 23, 0.06));
}

.web-single-blog-h2-num {
  flex-shrink: 0;
  min-width: 2.6rem;
  font-family: "Oswald", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 170, 23, 0.7);
}

.web-single-blog-h3 {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

.web-single-blog-p {
  margin: 0 0 1.1rem;
  color: var(--web-single-blog-text);
  font-size: 1.02rem;
  line-height: 1.85;
}

/* points */
.web-single-blog-points-box {
  margin: 1.4rem 0;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid var(--web-single-blog-line);
  border-radius: var(--web-single-blog-radius);
  background: var(--web-single-blog-card-bg);
}

.web-single-blog-points {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.web-single-blog-point {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  color: var(--web-single-blog-text);
  font-size: 0.97rem;
  line-height: 1.6;
}

.web-single-blog-point-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  border: 1px solid var(--web-single-blog-accent);
  border-radius: 6px;
  background: var(--web-single-blog-accent-soft);
  color: var(--web-single-blog-accent);
}

.web-single-blog-point-icon .web-single-blog-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

/* pull quote */
.web-single-blog-quote {
  position: relative;
  margin: 1.8rem 0;
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.2rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.2rem) clamp(3.6rem, 6vw, 4.8rem);
  overflow: hidden;
  border-left: 4px solid var(--web-single-blog-accent);
  border-radius: 0 var(--web-single-blog-radius) var(--web-single-blog-radius) 0;
  background: linear-gradient(100deg, rgba(255, 170, 23, 0.14), rgba(255, 170, 23, 0.02) 70%);
}

.web-single-blog-quote-icon {
  position: absolute;
  top: 1.2rem;
  left: 1.1rem;
  width: clamp(28px, 4vw, 40px);
  height: clamp(28px, 4vw, 40px);
  color: var(--web-single-blog-accent);
  opacity: 0.85;
}

.web-single-blog-quote-text {
  margin: 0 0 0.8rem;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.45;
}

.web-single-blog-quote-cite {
  color: var(--web-single-blog-accent);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* feature cards */
.web-single-blog-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.4rem 0;
}

.web-single-blog-feature {
  position: relative;
  padding: 1.4rem;
  overflow: hidden;
  border: 1px solid var(--web-single-blog-line);
  border-radius: var(--web-single-blog-radius);
  background: var(--web-single-blog-card-bg);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.web-single-blog-feature::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--web-single-blog-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s ease;
}

.web-single-blog-feature:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 170, 23, 0.55);
  box-shadow: 0 20px 44px rgba(255, 170, 23, 0.12);
}

.web-single-blog-feature:hover::before {
  transform: scaleX(1);
}

.web-single-blog-feature-num {
  display: block;
  margin-bottom: 0.8rem;
  font-family: "Oswald", "Arial Narrow", Impact, sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 170, 23, 0.6);
}

.web-single-blog-feature-title {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.web-single-blog-feature-text {
  margin: 0;
  color: var(--web-single-blog-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* tip / warn */
.web-single-blog-tip {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 1.4rem 0;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--web-single-blog-soft);
  border-radius: var(--web-single-blog-radius);
  background: var(--web-single-blog-accent-soft);
}

.web-single-blog-tip--warn {
  border-color: rgba(255, 99, 71, 0.4);
  background: rgba(255, 99, 71, 0.08);
}

.web-single-blog-tip-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--web-single-blog-accent);
  color: #000;
}

.web-single-blog-tip--warn .web-single-blog-tip-icon {
  background: #ff6347;
}

.web-single-blog-tip-icon .web-single-blog-icon {
  width: 20px;
  height: 20px;
}

.web-single-blog-tip-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--web-single-blog-accent);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.web-single-blog-tip--warn .web-single-blog-tip-label {
  color: #ff8a73;
}

.web-single-blog-tip-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* table */
.web-single-blog-table-wrap {
  margin: 1.4rem 0;
  overflow-x: auto;
  border: 1px solid var(--web-single-blog-line);
  border-radius: var(--web-single-blog-radius);
  background: var(--web-single-blog-card-bg);
}

.web-single-blog-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.web-single-blog-table th {
  padding: 0.95rem 1.1rem;
  background: rgba(255, 170, 23, 0.12);
  color: var(--web-single-blog-accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
}

.web-single-blog-table td {
  padding: 0.95rem 1.1rem;
  border-top: 1px solid var(--web-single-blog-line);
  color: var(--web-single-blog-text);
  line-height: 1.5;
}

.web-single-blog-table td:first-child {
  color: #fff;
  font-weight: 700;
}

.web-single-blog-table td:last-child {
  color: #ffd27a;
}

.web-single-blog-table tbody tr {
  transition: background 0.3s ease;
}

.web-single-blog-table tbody tr:hover {
  background: rgba(255, 170, 23, 0.05);
}

/* steps */
.web-single-blog-steps {
  position: relative;
  display: grid;
  gap: 1.3rem;
  margin: 1.6rem 0;
  padding: 0;
  list-style: none;
}

.web-single-blog-steps::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 19px;
  width: 2px;
  background: linear-gradient(#ffd27a, #ffaa17 50%, rgba(255, 170, 23, 0.1));
  opacity: 0.6;
}

.web-single-blog-step {
  position: relative;
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
}

.web-single-blog-step-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 2px solid var(--web-single-blog-accent);
  border-radius: 50%;
  background: #000;
  color: var(--web-single-blog-accent);
  font-weight: 700;
  box-shadow: 0 0 20px rgba(255, 170, 23, 0.25);
}

.web-single-blog-step-body {
  flex: 1;
  padding: 1rem 1.2rem;
  border: 1px solid var(--web-single-blog-line);
  border-radius: var(--web-single-blog-radius);
  background: var(--web-single-blog-card-bg);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.web-single-blog-step:hover .web-single-blog-step-body {
  border-color: rgba(255, 170, 23, 0.5);
  transform: translateX(4px);
}

.web-single-blog-step-title {
  margin: 0 0 0.3rem;
  font-size: 1.02rem;
  font-weight: 700;
}

.web-single-blog-step-text {
  margin: 0;
  color: var(--web-single-blog-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* FAQ */
.web-single-blog-faq {
  display: grid;
  gap: 0.8rem;
}

.web-single-blog-faq-item {
  overflow: hidden;
  border: 1px solid var(--web-single-blog-line);
  border-radius: var(--web-single-blog-radius);
  background: var(--web-single-blog-card-bg);
  transition: border-color 0.3s ease;
}

.web-single-blog-faq-item--open {
  border-color: rgba(255, 170, 23, 0.55);
}

.web-single-blog-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.05rem 1.2rem;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.web-single-blog-faq-q:focus-visible {
  outline: 2px solid var(--web-single-blog-accent);
  outline-offset: -2px;
}

.web-single-blog-faq-plus {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid var(--web-single-blog-soft);
  border-radius: 50%;
  color: var(--web-single-blog-accent);
  transition: rotate 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.web-single-blog-faq-item--open .web-single-blog-faq-plus {
  rotate: 45deg;
  background: var(--web-single-blog-accent);
  color: #000;
}

.web-single-blog-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.web-single-blog-faq-item--open .web-single-blog-faq-a {
  grid-template-rows: 1fr;
}

.web-single-blog-faq-a p {
  min-height: 0;
  margin: 0;
  padding: 0 1.2rem;
  overflow: hidden;
  color: var(--web-single-blog-muted);
  font-size: 0.93rem;
  line-height: 1.7;
}

.web-single-blog-faq-item--open .web-single-blog-faq-a p {
  padding-bottom: 1.1rem;
}

/* source note */
.web-single-blog-note {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--web-single-blog-accent);
  border-radius: 0 var(--web-single-blog-radius) var(--web-single-blog-radius) 0;
  background: var(--web-single-blog-accent-soft);
  color: var(--web-single-blog-text);
  font-size: 0.92rem;
  line-height: 1.6;
}

.web-single-blog-note .web-single-blog-icon {
  margin-top: 0.15rem;
  color: var(--web-single-blog-accent);
}

.web-single-blog-note strong {
  color: #fff;
}

/* tags */
.web-single-blog-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.6rem;
}

.web-single-blog-tags-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 0.3rem;
  color: var(--web-single-blog-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.web-single-blog-tag {
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.web-single-blog-tag:hover {
  border-color: var(--web-single-blog-accent);
  background: var(--web-single-blog-accent-soft);
  color: #fff;
}

/* buttons */
.web-single-blog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

.web-single-blog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.85rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 0;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: gap 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.web-single-blog-btn--primary {
  background: var(--web-single-blog-accent);
  color: #000;
}

.web-single-blog-btn--primary:hover {
  gap: 1rem;
  background: #ffbd45;
}

.web-single-blog-btn--ghost {
  border-color: rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #fff;
}

.web-single-blog-btn--ghost:hover {
  border-color: var(--web-single-blog-accent);
  color: var(--web-single-blog-accent);
}

.web-single-blog-btn--block {
  width: 100%;
}

.web-single-blog-btn:focus-visible {
  outline: 2px solid var(--web-single-blog-accent);
  outline-offset: 3px;
}

.web-single-blog-btn-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* share */
.web-single-blog-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.8rem;
  padding: 1rem 0;
  border-top: 1px solid var(--web-single-blog-line);
  border-bottom: 1px solid var(--web-single-blog-line);
}

.web-single-blog-share-label {
  margin-right: 0.5rem;
  color: var(--web-single-blog-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.web-single-blog-share-btn {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.web-single-blog-share-btn:hover {
  border-color: var(--web-single-blog-accent);
  background: var(--web-single-blog-accent);
  color: #000;
}

/* author */
.web-single-blog-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--web-single-blog-accent);
  border-radius: 50%;
  background: var(--web-single-blog-accent-soft);
  color: var(--web-single-blog-accent);
  font-weight: 700;
}

.web-single-blog-avatar--lg {
  width: 72px;
  height: 72px;
  font-size: 1.8rem;
  box-shadow: 0 0 30px rgba(255, 170, 23, 0.25);
}

.web-single-blog-author {
  display: flex;
  gap: 1.3rem;
  align-items: center;
  margin-top: 2rem;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  border: 1px solid var(--web-single-blog-line);
  border-radius: var(--web-single-blog-radius);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255, 170, 23, 0.12), transparent 60%),
    var(--web-single-blog-card-bg);
}

.web-single-blog-author-role {
  color: var(--web-single-blog-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.web-single-blog-author-name {
  margin: 0.2rem 0 0.4rem;
  font-size: 1.2rem;
}

.web-single-blog-author-text {
  margin: 0;
  color: var(--web-single-blog-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* prev / next */
.web-single-blog-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
}

.web-single-blog-pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--web-single-blog-line);
  border-radius: var(--web-single-blog-radius);
  background: var(--web-single-blog-card-bg);
  color: #fff;
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.web-single-blog-pager-link--next {
  text-align: right;
}

.web-single-blog-pager-link:hover {
  border-color: rgba(255, 170, 23, 0.55);
  transform: translateY(-3px);
}

.web-single-blog-pager-dir {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--web-single-blog-accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.web-single-blog-pager-link--next .web-single-blog-pager-dir {
  justify-content: flex-end;
}

.web-single-blog-pager-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}

/* comments */
.web-single-blog-comments {
  scroll-margin-top: 110px;
  margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
}

.web-single-blog-block-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.2rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.web-single-blog-block-count {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 0.4rem;
  border-radius: 99px;
  background: var(--web-single-blog-accent);
  color: #000;
  font-size: 0.8rem;
}

.web-single-blog-comment-list {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}

.web-single-blog-comment {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--web-single-blog-line);
  border-radius: var(--web-single-blog-radius);
  background: var(--web-single-blog-card-bg);
}

.web-single-blog-comment-body {
  min-width: 0;
}

.web-single-blog-comment-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  align-items: baseline;
  margin-bottom: 0.3rem;
}

.web-single-blog-comment-head span {
  color: var(--web-single-blog-muted);
  font-size: 0.78rem;
}

.web-single-blog-comment-body p {
  margin: 0;
  color: var(--web-single-blog-text);
  font-size: 0.92rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.web-single-blog-form {
  display: grid;
  gap: 0.8rem;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  border: 1px solid var(--web-single-blog-soft);
  border-radius: var(--web-single-blog-radius);
  background: var(--web-single-blog-card-bg);
}

.web-single-blog-form-title {
  margin: 0;
  font-size: 1.1rem;
}

.web-single-blog-form .web-single-blog-btn {
  justify-self: start;
}

.web-single-blog-input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  box-sizing: border-box;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.web-single-blog-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.web-single-blog-input:focus {
  outline: none;
  border-color: var(--web-single-blog-accent);
  background: rgba(255, 170, 23, 0.06);
}

.web-single-blog-input--area {
  resize: vertical;
  min-height: 110px;
}

/* =====================================================
   SIDEBAR
   ===================================================== */
.web-single-blog-side {
  position: sticky;
  top: 130px;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.web-single-blog-side::-webkit-scrollbar {
  display: none;
}

.web-single-blog-card {
  padding: 1.4rem;
  border: 1px solid var(--web-single-blog-line);
  border-radius: var(--web-single-blog-radius);
  background: var(--web-single-blog-card-bg);
}

.web-single-blog-card-title {
  position: relative;
  margin: 0 0 1.1rem;
  padding-left: 0.9rem;
  font-size: 1rem;
  font-weight: 700;
}

.web-single-blog-card-title::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--web-single-blog-accent);
}

/* search */
.web-single-blog-search {
  position: relative;
}

.web-single-blog-search-input {
  width: 100%;
  padding: 0.85rem 3rem 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.web-single-blog-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.web-single-blog-search-input:focus {
  outline: none;
  border-color: var(--web-single-blog-accent);
}

.web-single-blog-search-btn {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  translate: 0 -50%;
  border-radius: 6px;
  background: var(--web-single-blog-accent);
  color: #000;
}

/* TOC */
.web-single-blog-toc {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.web-single-blog-toc-link {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  background: transparent;
  color: var(--web-single-blog-muted);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.web-single-blog-toc-n {
  flex-shrink: 0;
  min-width: 1.5rem;
  color: rgba(255, 170, 23, 0.7);
  font-weight: 700;
}

.web-single-blog-toc-link:hover {
  color: #fff;
}

.web-single-blog-toc-link--on {
  border-left-color: var(--web-single-blog-accent);
  background: var(--web-single-blog-accent-soft);
  color: #fff;
}

.web-single-blog-toc-link:focus-visible {
  outline: 2px solid var(--web-single-blog-accent);
  outline-offset: 2px;
}

/* facts */
.web-single-blog-facts {
  margin: 0;
}

.web-single-blog-fact {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
  font-size: 0.86rem;
}

.web-single-blog-fact:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.web-single-blog-fact dt {
  color: var(--web-single-blog-muted);
}

.web-single-blog-fact dd {
  margin: 0;
  color: #fff;
  font-weight: 600;
  text-align: right;
}

/* latest */
.web-single-blog-latest {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.web-single-blog-latest-link {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  text-decoration: none;
}

.web-single-blog-latest-thumb {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  overflow: hidden;
  border: 1px solid var(--web-single-blog-soft);
  border-radius: 8px;
  background:
    radial-gradient(rgba(255, 170, 23, 0.25) 1px, transparent 1.4px) 0 0 / 12px 12px,
    linear-gradient(135deg, rgba(255, 170, 23, 0.16), #0b0b0b 70%);
}

.web-single-blog-latest-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.web-single-blog-latest-thumb .web-single-blog-noimg {
  font-size: 1.6rem;
}

.web-single-blog-latest-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.web-single-blog-latest-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.web-single-blog-latest-link:hover .web-single-blog-latest-name {
  color: var(--web-single-blog-accent);
}

.web-single-blog-latest-date {
  color: var(--web-single-blog-muted);
  font-size: 0.74rem;
}

/* categories */
.web-single-blog-cats {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.web-single-blog-cat-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.88rem;
  text-decoration: none;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.web-single-blog-cat-link:hover {
  border-color: var(--web-single-blog-soft);
  background: var(--web-single-blog-accent-soft);
  color: #fff;
}

.web-single-blog-cat-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 0.4rem;
  border-radius: 99px;
  background: rgba(255, 170, 23, 0.16);
  color: var(--web-single-blog-accent);
  font-size: 0.74rem;
  font-weight: 700;
}

/* newsletter card */
.web-single-blog-card--cta {
  display: grid;
  gap: 0.7rem;
  border-color: var(--web-single-blog-soft);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255, 170, 23, 0.22), transparent 65%),
    var(--web-single-blog-card-bg);
}

.web-single-blog-cta-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--web-single-blog-accent);
  color: #000;
}

.web-single-blog-cta-icon .web-single-blog-icon {
  width: 22px;
  height: 22px;
}

.web-single-blog-cta-title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
}

.web-single-blog-cta-text {
  margin: 0;
  color: var(--web-single-blog-muted);
  font-size: 0.86rem;
}

.web-single-blog-cta-done {
  margin: 0;
  color: var(--web-single-blog-accent);
  font-weight: 600;
}

/* =====================================================
   MORE CARDS (about, latest, categories, newsletter)
   They scroll with the page, under the article
   ===================================================== */
.web-single-blog-more {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
  align-items: start;
  max-width: 1240px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}

@media (max-width: 1100px) {
  .web-single-blog-more {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =====================================================
   RELATED ARTICLES
   ===================================================== */
.web-single-blog-related {
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 4vw, 3rem);
  border-top: 1px solid var(--web-single-blog-line);
  background: linear-gradient(180deg, #000, rgba(255, 170, 23, 0.07));
}

.web-single-blog-related-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.web-single-blog-related-tag {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.7rem;
  color: var(--web-single-blog-accent);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.web-single-blog-related-tag::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--web-single-blog-accent);
}

.web-single-blog-related-title {
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.web-single-blog-related-title span {
  color: var(--web-single-blog-accent);
}

.web-single-blog-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

.web-single-blog-rcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--web-single-blog-line);
  border-radius: var(--web-single-blog-radius);
  background: var(--web-single-blog-card-bg);
  color: #fff;
  text-decoration: none;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.web-single-blog-rcard:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 170, 23, 0.55);
  box-shadow: 0 22px 50px rgba(255, 170, 23, 0.12);
}

.web-single-blog-rcard-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--web-single-blog-line);
  background:
    radial-gradient(rgba(255, 170, 23, 0.25) 1px, transparent 1.4px) 0 0 / 18px 18px,
    linear-gradient(135deg, rgba(255, 170, 23, 0.16), #0b0b0b 65%);
}

.web-single-blog-rcard-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.6s ease;
}

.web-single-blog-rcard:hover .web-single-blog-rcard-thumb img {
  scale: 1.05;
}

.web-single-blog-rcard-thumb .web-single-blog-noimg {
  font-size: 4rem;
}

.web-single-blog-rcard-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.2rem 1.3rem 1.3rem;
}

.web-single-blog-rcard-date {
  color: var(--web-single-blog-accent);
  font-size: 0.78rem;
  font-weight: 700;
}

.web-single-blog-rcard-name {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}

.web-single-blog-rcard-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--web-single-blog-line);
  color: var(--web-single-blog-accent);
  font-size: 0.88rem;
  font-weight: 600;
  transition: gap 0.3s ease;
}

.web-single-blog-rcard:hover .web-single-blog-rcard-more {
  gap: 0.85rem;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
  .web-single-blog-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .web-single-blog-side {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .web-single-blog-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .web-single-blog-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .web-single-blog-stat:nth-child(3) {
    border-left: 0;
  }

  .web-single-blog-stat:nth-child(n + 3) {
    border-top: 1px solid var(--web-single-blog-line);
  }

  .web-single-blog-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .web-single-blog-more {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .web-single-blog-related-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .web-single-blog-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .web-single-blog-pager-link--next {
    text-align: left;
  }

  .web-single-blog-pager-link--next .web-single-blog-pager-dir {
    justify-content: flex-start;
  }

  .web-single-blog-author {
    flex-direction: column;
    align-items: flex-start;
  }

  .web-single-blog-h2 {
    gap: 0.7rem;
  }

  .web-single-blog-h2-num {
    min-width: 2rem;
  }

  .web-single-blog-quote {
    padding-left: 1.2rem;
    padding-top: 3.4rem;
  }

  .web-single-blog-actions .web-single-blog-btn,
  .web-single-blog-form .web-single-blog-btn {
    width: 100%;
  }

  .web-single-blog-steps::before {
    left: 15px;
  }

  .web-single-blog-step-dot {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .web-single-blog-reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .web-single-blog-progress-bar,
  .web-single-blog-faq-a,
  .web-single-blog-feature,
  .web-single-blog-rcard {
    transition: none;
  }
}
/* Single blog page design end */


/* Gallery start */
/* ============================================================
   GALLERY PAGE
   Loader (.web-loader ...) and .web-loader-page are NOT here,
   they already live in website.css. Paste / import this after it.
   Colours: black page (#000 from body) + #FFAA17
   ============================================================ */

/* Gallery banner start */
/* ============================================================
   .web-gallery-banner  –  vertical strips banner
   Strips (8) must match GALLERY_BANNER_COLS in JSX.
   Even strips slide down from the top, odd strips slide up
   from the bottom, starting from the centre and going outwards.
   ============================================================ */

.web-gallery-banner-wrap {
  --web-gallery-banner-header-h: 95px; /* your header height, change if needed */
  --web-gallery-banner-gap: clamp(1.5rem, 3vw, 2.5rem); /* space between header and banner */

  width: 100%;
  padding-top: calc(var(--web-gallery-banner-header-h) + var(--web-gallery-banner-gap));
}

@media (max-width: 900px) {
  .web-gallery-banner-wrap {
    --web-gallery-banner-header-h: 90px;
  }
}

@media (max-width: 640px) {
  .web-gallery-banner-wrap {
    --web-gallery-banner-header-h: 80px;
    --web-gallery-banner-gap: 1rem;
  }
}

.web-gallery-banner {
  --web-gallery-banner-cols: 8;

  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 420px;
  overflow: hidden;
  background: #000;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- strips ---------- */
.web-gallery-banner__strips {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  container-type: size; /* strips use cqw / cqh of the whole banner */
}

.web-gallery-banner__strip {
  /* whole picture is "cover"-fitted to the banner, every strip shows its own slice */
  --web-gallery-banner-w: max(100cqw, calc(100cqh * var(--web-gallery-banner-ratio, 1.6)));
  --web-gallery-banner-h: max(100cqh, calc(100cqw / var(--web-gallery-banner-ratio, 1.6)));

  background-image: var(--web-gallery-banner-img);
  background-size: var(--web-gallery-banner-w) var(--web-gallery-banner-h);
  background-position:
    calc(
      (100cqw - var(--web-gallery-banner-w)) / 2 -
        var(--web-gallery-banner-col) * 100cqw / var(--web-gallery-banner-cols)
    )
    calc((100cqh - var(--web-gallery-banner-h)) / 2);
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(calc(var(--web-gallery-banner-dir, -1) * 100%));
  will-change: transform, opacity;
}

.web-gallery-banner--active .web-gallery-banner__strip {
  animation: web-gallery-banner-strip 1.5s cubic-bezier(0.77, 0, 0.18, 1) forwards;
  animation-delay: var(--web-gallery-banner-delay);
}

@keyframes web-gallery-banner-strip {
  0% {
    opacity: 1;
    transform: translateY(calc(var(--web-gallery-banner-dir, -1) * 100%)) scaleX(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleX(1.02); /* slight overlap closes the seams */
  }
}

/* ---------- dark overlay ---------- */
.web-gallery-banner__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25) 60%),
    rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
}

.web-gallery-banner--active .web-gallery-banner__overlay {
  animation: web-gallery-banner-fade 0.8s ease forwards;
  animation-delay: 1.9s;
}

/* ---------- text ---------- */
.web-gallery-banner__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  color: #fff;
}

.web-gallery-banner__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  color: #ffaa17;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(24px);
}

.web-gallery-banner__tag::before,
.web-gallery-banner__tag::after {
  content: "";
  width: 28px;
  height: 1px;
  background: #ffaa17;
}

.web-gallery-banner__title {
  margin: 0 0 1rem;
  max-width: 18ch;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  opacity: 0;
  transform: translateY(24px);
  color: #FFAA17;
  text-transform: uppercase;
}

.web-gallery-banner__text {
  margin: 0;
  max-width: 39ch;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  opacity: 0;
  transform: translateY(24px);
  font-family: 'Satoshi-Regular';
}

.web-gallery-banner--active .web-gallery-banner__tag {
  animation: web-gallery-banner-rise 0.8s ease forwards;
  animation-delay: 2.1s;
}

.web-gallery-banner--active .web-gallery-banner__title {
  animation: web-gallery-banner-rise 0.8s ease forwards;
  animation-delay: 2.3s;
}

.web-gallery-banner--active .web-gallery-banner__text {
  animation: web-gallery-banner-rise 0.8s ease forwards;
  animation-delay: 2.55s;
}

@keyframes web-gallery-banner-fade {
  to { opacity: 1; }
}

@keyframes web-gallery-banner-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .web-gallery-banner {
    --web-gallery-banner-cols: 8;
    height: 70vh;
    min-height: 380px;
  }
}

@media (max-width: 480px) {
  .web-gallery-banner__content {
    padding: 0 1.1rem;
  }

  .web-gallery-banner__title {
    font-size: 1.7rem;
    max-width: 14ch;
  }

  .web-gallery-banner__text {
    font-size: 0.95rem;
    line-height: 1.55;
  }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .web-gallery-banner__strip,
  .web-gallery-banner__overlay,
  .web-gallery-banner__tag,
  .web-gallery-banner__title,
  .web-gallery-banner__text {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}
/* Gallery banner end */


/* Gallery grid start */
/* ============================================================
   .web-gallery-grid  –  filter + masonry grid + lightbox
   ============================================================ */

.web-gallery-grid {
  --web-gallery-grid-accent: #ffaa17;
  --web-gallery-grid-soft: rgba(255, 170, 23, 0.28);
  --web-gallery-grid-radius: 10px;
  --web-gallery-grid-gap: clamp(0.8rem, 1.6vw, 1.3rem);

  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 7vw, 6rem);
  color: #fff;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

/* amber light behind the grid */
.web-gallery-grid::before {
  content: "";
  position: absolute;
  top: -12%;
  left: -14%;
  z-index: -1;
  width: min(60%, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 170, 23, 0.13), transparent 70%);
  pointer-events: none;
}

.web-gallery-grid__inner {
  max-width: 1240px;
  margin: 0 auto;
}

/* ---------- head ---------- */
.web-gallery-grid__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
  opacity: 0;
  translate: 0 22px;
}

.web-gallery-grid__title {
  margin: 0;
  text-align: center;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.web-gallery-grid__title-bold {
  margin-right: 0.15em;
  font-weight: 800;
  color: var(--web-gallery-grid-accent);
}

.web-gallery-grid__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.web-gallery-grid__filter {
  padding: 0.55rem 1.2rem;
  border: 1px solid rgba(255, 170, 23, 0.4);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.web-gallery-grid__filter:hover {
  border-color: var(--web-gallery-grid-accent);
  color: #fff;
}

.web-gallery-grid__filter--on {
  border-color: var(--web-gallery-grid-accent);
  background: var(--web-gallery-grid-accent);
  color: #000;
}

.web-gallery-grid__filter:focus-visible {
  outline: 2px solid var(--web-gallery-grid-accent);
  outline-offset: 3px;
}

/* ---------- masonry list ---------- */
.web-gallery-grid__list {
  column-count: 3;
  column-gap: var(--web-gallery-grid-gap);
}

.web-gallery-grid__item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 var(--web-gallery-grid-gap);
  padding: 0;
  overflow: hidden;
  break-inside: avoid;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--web-gallery-grid-radius);
  background: #111;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  opacity: 0;
  translate: 0 30px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* different heights, so the columns look like a real masonry */
.web-gallery-grid__item:nth-child(3n + 1) .web-gallery-grid__img {
  aspect-ratio: 4 / 5;
}

.web-gallery-grid__item:nth-child(3n + 2) .web-gallery-grid__img {
  aspect-ratio: 1 / 1;
}

.web-gallery-grid__item:nth-child(3n) .web-gallery-grid__img {
  aspect-ratio: 4 / 3;
}

.web-gallery-grid__img {
  display: block;
  width: 100%;
  object-fit: cover;
  background: linear-gradient(160deg, #2a2a2a, #0d0d0d);
  transition: scale 0.7s ease, filter 0.5s ease;
}

.web-gallery-grid__item:hover {
  border-color: rgba(255, 170, 23, 0.6);
  box-shadow: 0 22px 50px rgba(255, 170, 23, 0.14);
}

.web-gallery-grid__item:hover .web-gallery-grid__img {
  scale: 1.06;
  filter: brightness(0.7);
}

.web-gallery-grid__item:focus-visible {
  outline: 2px solid var(--web-gallery-grid-accent);
  outline-offset: 3px;
}

/* caption slides up on hover */
.web-gallery-grid__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 2.4rem 1rem 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 25%, transparent);
  translate: 0 40%;
  opacity: 0;
  transition: translate 0.45s ease, opacity 0.45s ease;
}

.web-gallery-grid__item:hover .web-gallery-grid__caption,
.web-gallery-grid__item:focus-visible .web-gallery-grid__caption {
  translate: 0 0;
  opacity: 1;
}

.web-gallery-grid__cat {
  color: var(--web-gallery-grid-accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.web-gallery-grid__name {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
}

.web-gallery-grid__zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--web-gallery-grid-accent);
  color: #000;
  scale: 0.6;
  opacity: 0;
  transition: scale 0.4s ease, opacity 0.4s ease;
}

.web-gallery-grid__item:hover .web-gallery-grid__zoom {
  scale: 1;
  opacity: 1;
}

.web-gallery-grid__zoom svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- entrance (when the section scrolls into view) ---------- */
.web-gallery-grid--in .web-gallery-grid__head {
  animation: web-gallery-grid-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.web-gallery-grid--in .web-gallery-grid__item {
  animation: web-gallery-grid-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(0.2s + var(--web-gallery-grid-i, 0) * 0.08s);
}

@keyframes web-gallery-grid-rise {
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ---------- lightbox ---------- */
.web-gallery-grid__lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 2vw, 1.4rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: web-gallery-grid-fade 0.3s ease both;
}

.web-gallery-grid__lb-figure {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: min(1000px, 100%);
  margin: 0;
  min-width: 0;
}

.web-gallery-grid__lb-img {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  margin: 0 auto;
  object-fit: contain;
  border: 1px solid var(--web-gallery-grid-soft);
  border-radius: var(--web-gallery-grid-radius);
  box-shadow: 0 0 60px rgba(255, 170, 23, 0.15);
  animation: web-gallery-grid-zoom 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.web-gallery-grid__lb-caption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  font-weight: 600;
}

.web-gallery-grid__lb-count {
  color: var(--web-gallery-grid-accent);
}

.web-gallery-grid__lb-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 170, 23, 0.5);
  border-radius: 50%;
  background: transparent;
  color: var(--web-gallery-grid-accent);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, scale 0.3s ease;
}

.web-gallery-grid__lb-btn:hover {
  background: var(--web-gallery-grid-accent);
  color: #000;
  scale: 1.06;
}

.web-gallery-grid__lb-btn:focus-visible {
  outline: 2px solid var(--web-gallery-grid-accent);
  outline-offset: 3px;
}

.web-gallery-grid__lb-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.web-gallery-grid__lb-close {
  position: absolute;
  top: clamp(0.8rem, 2vw, 1.5rem);
  right: clamp(0.8rem, 2vw, 1.5rem);
}

@keyframes web-gallery-grid-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes web-gallery-grid-zoom {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- tablet ---------- */
@media (max-width: 960px) {
  .web-gallery-grid__list {
    column-count: 2;
  }
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .web-gallery-grid__list {
    column-gap: 0.7rem;
  }

  .web-gallery-grid__item {
    margin-bottom: 0.7rem;
    border-radius: 8px;
  }

  /* no hover on touch, so the caption is always visible */
  .web-gallery-grid__caption {
    translate: 0 0;
    opacity: 1;
    padding: 1.6rem 0.6rem 0.6rem;
  }

  .web-gallery-grid__name {
    font-size: 0.78rem;
  }

  .web-gallery-grid__cat {
    font-size: 0.58rem;
  }

  .web-gallery-grid__zoom {
    display: none;
  }

  /* arrows go to the bottom so the photo can use the full width */
  .web-gallery-grid__lightbox {
    flex-wrap: wrap;
    align-content: center;
  }

  .web-gallery-grid__lb-figure {
    order: 1;
    flex: 0 0 100%;
  }

  .web-gallery-grid__lb-prev {
    order: 2;
    margin-top: 0.8rem;
  }

  .web-gallery-grid__lb-next {
    order: 3;
    margin-top: 0.8rem;
  }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .web-gallery-grid__head,
  .web-gallery-grid__item {
    animation: none !important;
    opacity: 1;
    translate: none;
  }

  .web-gallery-grid__lightbox,
  .web-gallery-grid__lb-img {
    animation: none;
  }
}
/* Gallery grid end */

/* gallery section2 start */
/* =========================================================
   Gallery featured carousel
   Centre card is the biggest, side cards tilt back in 3D.
   Everything is scoped to .web-gallery-featured
   ========================================================= */

.web-gallery-featured {
  /* sizes (change these to resize the whole carousel) */
  --gf-w: 220px;          /* card width */
  --gf-h: 320px;          /* card height */
  --gf-gap1: 255px;       /* distance of the 1st side card from the centre */
  --gf-gap2: 228px;       /* extra distance per step for the 2nd side card */
  --gf-radius: 26px;
  --gf-ease: cubic-bezier(0.22, 0.8, 0.25, 1);

  position: relative;
  width: 100%;
  padding: 90px 0 70px;
  background: #130d0b;
  color: #fff;
  overflow: hidden;
  font-family: inherit;
}

/* soft warm glow behind the centre card */
.web-gallery-featured::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: 720px;
  height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(214, 160, 90, 0.16),
    rgba(214, 160, 90, 0) 70%
  );
  pointer-events: none;
}

/* ---------- stage ---------- */
.web-gallery-featured__stage {
  position: relative;
  height: calc(var(--gf-h) + 130px);
  max-width: 1200px;
  margin: 0 auto;
  perspective: 1400px;
  touch-action: pan-y;
  user-select: none;
}

/* ---------- card ---------- */
.web-gallery-featured__card {
  position: absolute;
  top: 24px;
  left: 50%;
  width: var(--gf-w);
  height: var(--gf-h);
  margin-left: calc(var(--gf-w) / -2);
  padding: 0;
  border: 0;
  border-radius: var(--gf-radius);
  overflow: hidden;
  background: #2a1f1a;
  cursor: pointer;
  color: inherit;
  font: inherit;
  opacity: 0;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
  transform: translateX(0) translateY(60px) scale(0.6);
  transition:
    transform 0.95s var(--gf-ease),
    opacity 0.7s ease,
    filter 0.7s ease,
    box-shadow 0.7s ease;
  will-change: transform;
}

/* a card that wraps from one end to the other jumps instead of flying across */
.web-gallery-featured__card--jump {
  transition: none;
}

.web-gallery-featured__card:focus-visible {
  outline: 2px solid #f2c14e;
  outline-offset: 4px;
}

/* entrance: cards stay hidden until the section is visible */
.web-gallery-featured--in .web-gallery-featured__card[data-a="0"] {
  opacity: 1;
  transform: translateX(0) translateY(56px) scale(1.2);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.6);
}

.web-gallery-featured--in .web-gallery-featured__card[data-a="1"] {
  opacity: 1;
  filter: brightness(0.92);
  transform:
    translateX(calc(var(--web-gallery-featured-o) * var(--gf-gap1)))
    translateY(0)
    rotateY(calc(var(--web-gallery-featured-o) * -16deg))
    scale(0.9);
}

.web-gallery-featured--in .web-gallery-featured__card[data-a="2"] {
  opacity: 0.88;
  filter: brightness(0.8);
  transform:
    translateX(calc(var(--web-gallery-featured-o) * var(--gf-gap2)))
    translateY(-4px)
    rotateY(calc(var(--web-gallery-featured-o) * -14deg))
    scale(0.82);
}

/* everything further away stays hidden behind the others */
.web-gallery-featured--in .web-gallery-featured__card:not([data-a="0"]):not([data-a="1"]):not([data-a="2"]) {
  opacity: 0;
  pointer-events: none;
  transform: translateX(0) translateY(40px) scale(0.6);
}

/* ---------- image ---------- */
.web-gallery-featured__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transform: scale(1.04);
  transition: transform 1.2s var(--gf-ease);
}

.web-gallery-featured__card--active .web-gallery-featured__img {
  transform: scale(1);
}

/* ---------- gradient so the name is always readable ---------- */
.web-gallery-featured__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 12, 9, 0.7) 0%,
    rgba(20, 12, 9, 0.18) 38%,
    rgba(20, 12, 9, 0) 62%
  );
  pointer-events: none;
}

/* ---------- name ---------- */
.web-gallery-featured__name {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 22px;
  z-index: 2;
  text-align: center;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  transition: font-size 0.6s ease, letter-spacing 0.6s ease;
}

.web-gallery-featured__card--active .web-gallery-featured__name {
  bottom: 24px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #fff;
}

/* ---------- tag pill (centre card only) ---------- */
.web-gallery-featured__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.5s ease 0.25s, transform 0.5s ease 0.25s;
}

.web-gallery-featured__card--active .web-gallery-featured__tag {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- arrows ---------- */
.web-gallery-featured__nav {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.web-gallery-featured__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 46px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition:
    width 0.4s var(--gf-ease),
    color 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

.web-gallery-featured__arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.web-gallery-featured__arrow:hover,
.web-gallery-featured__arrow:focus-visible {
  width: 74px;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .web-gallery-featured {
    --gf-w: 190px;
    --gf-h: 280px;
    --gf-gap1: 215px;
    --gf-gap2: 190px;
  }
}

@media (max-width: 820px) {
  .web-gallery-featured {
    --gf-w: 150px;
    --gf-h: 224px;
    --gf-gap1: 165px;
    --gf-gap2: 138px;
    --gf-radius: 20px;
    padding: 70px 0 56px;
  }

  .web-gallery-featured__name {
    font-size: 10px;
    bottom: 16px;
  }

  .web-gallery-featured__card--active .web-gallery-featured__name {
    font-size: 12px;
  }
}

@media (max-width: 560px) {
  .web-gallery-featured {
    --gf-w: 130px;
    --gf-h: 200px;
    --gf-gap1: 118px;
    --gf-gap2: 86px;
    --gf-radius: 18px;
  }

  /* only 3 cards on very small screens */
  .web-gallery-featured--in .web-gallery-featured__card[data-a="2"] {
    opacity: 0;
    pointer-events: none;
  }

  .web-gallery-featured__arrow {
    width: 48px;
    height: 42px;
  }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .web-gallery-featured__card,
  .web-gallery-featured__img,
  .web-gallery-featured__tag {
    transition-duration: 0.01ms;
  }
}
/* gallery section 2 end */

/* gallery section 1 start */
/* =========================================================
   Gallery four cross cards
   Four tilted rounded squares, black background, #FFAA17 accent.
   Everything is scoped to .web-gallery-four-cross
   ========================================================= */

.web-gallery-four-cross {
  /* change these to resize / restyle the whole block */
  --gfc-accent: #ffaa17;
  --gfc-size: 250px;        /* card width and height */
  --gfc-tilt: 22deg;        /* angle of every card */
  --gfc-border: 7px;        /* thick frame around each photo */
  --gfc-radius: 34px;
  --gfc-overlap: -26px;     /* negative = cards overlap each other */
  --gfc-ease: cubic-bezier(0.22, 0.8, 0.25, 1);

  position: relative;
  width: 100%;
  padding: 110px 20px 120px;
  background: #000;
  color: #fff;
  overflow: hidden;
  font-family: inherit;
}

/* soft #FFAA17 glow behind the row */
.web-gallery-four-cross::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 900px;
  height: 380px;
  max-width: 100%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(255, 170, 23, 0.16),
    rgba(255, 170, 23, 0) 70%
  );
  pointer-events: none;
}

/* ---------- row ---------- */
.web-gallery-four-cross__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- card ---------- */
.web-gallery-four-cross__card {
  position: relative;
  flex: 0 0 auto;
  width: var(--gfc-size);
  height: var(--gfc-size);
  margin: 0 0 0 var(--gfc-overlap);
  border: var(--gfc-border) solid var(--gfc-accent);
  border-radius: var(--gfc-radius);
  overflow: hidden;
  background: #111;
  cursor: pointer;
  outline: none;
  box-shadow:
    0 22px 34px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 170, 23, 0.25);
  /* the cards drop in one by one, so they start hidden and straight */
  opacity: 0;
  transform: translateY(70px) rotate(0deg) scale(0.8);
  transition:
    transform 0.9s var(--gfc-ease),
    opacity 0.7s ease,
    box-shadow 0.6s ease;
  transition-delay: calc(var(--web-gallery-four-cross-i) * 0.14s);
  will-change: transform;
}

.web-gallery-four-cross__card:first-child {
  margin-left: 0;
}

/* later cards sit on top of the earlier ones, like the reference */
.web-gallery-four-cross__card:nth-child(1) { z-index: 1; }
.web-gallery-four-cross__card:nth-child(2) { z-index: 2; }
.web-gallery-four-cross__card:nth-child(3) { z-index: 3; }
.web-gallery-four-cross__card:nth-child(4) { z-index: 4; }

/* entrance: every card tilts into place */
.web-gallery-four-cross--in .web-gallery-four-cross__card {
  opacity: 1;
  transform: translateY(0) rotate(var(--gfc-tilt)) scale(1);
}

/* small stagger up and down, so the row feels loose and natural */
.web-gallery-four-cross--in .web-gallery-four-cross__card:nth-child(2) {
  transform: translateY(6px) rotate(var(--gfc-tilt)) scale(1);
}

.web-gallery-four-cross--in .web-gallery-four-cross__card:nth-child(4) {
  transform: translateY(8px) rotate(var(--gfc-tilt)) scale(1);
}

/* active card (automatic or hover): straightens, lifts and glows */
.web-gallery-four-cross--in .web-gallery-four-cross__card--active {
  z-index: 10;
  transform: translateY(-22px) rotate(0deg) scale(1.1);
  box-shadow:
    0 34px 50px rgba(0, 0, 0, 0.75),
    0 0 36px rgba(255, 170, 23, 0.55);
  transition-delay: 0s;
}

.web-gallery-four-cross__card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* ---------- image ---------- */
.web-gallery-four-cross__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transform: scale(1.08);
  transition: transform 1.1s var(--gfc-ease);
}

.web-gallery-four-cross__card--active .web-gallery-four-cross__img {
  transform: scale(1);
}

/* ---------- label (shows on the active card only) ---------- */
.web-gallery-four-cross__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 14px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}

.web-gallery-four-cross__card--active .web-gallery-four-cross__label {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .web-gallery-four-cross {
    --gfc-size: 210px;
    --gfc-overlap: -22px;
    --gfc-radius: 28px;
    --gfc-border: 6px;
  }
}

@media (max-width: 860px) {
  .web-gallery-four-cross {
    --gfc-size: 160px;
    --gfc-overlap: -16px;
    --gfc-radius: 24px;
    --gfc-border: 5px;
    padding: 80px 12px 90px;
  }

  .web-gallery-four-cross__label {
    font-size: 11px;
    padding: 26px 8px 10px;
  }
}

/* phones: 2 x 2 grid, cards keep the tilt */
@media (max-width: 560px) {
  .web-gallery-four-cross {
    --gfc-size: 138px;
    --gfc-overlap: 0px;
    --gfc-radius: 20px;
    --gfc-border: 4px;
    padding: 70px 12px 80px;
  }

  .web-gallery-four-cross__row {
    flex-wrap: wrap;
    gap: 34px 26px;
    max-width: 340px;
  }

  .web-gallery-four-cross--in .web-gallery-four-cross__card--active {
    transform: translateY(-10px) rotate(0deg) scale(1.06);
  }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .web-gallery-four-cross__card,
  .web-gallery-four-cross__img,
  .web-gallery-four-cross__label {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}
/* gallery section 2 end */

/* gallery album */
/* =========================================================
   Gallery round
   Two big rings, one curving in from the left edge and one from
   the right edge. Tiles flip in, then both rings keep turning.
   Black background, #FFAA17 accent.
   Everything is scoped to .web-gallery-round
   ========================================================= */

.web-gallery-round {
  /* change these to resize / restyle the whole block */
  --gr-accent: #ffaa17;
  --gr-r1: 270px;                 /* inner radius of the ring */
  --gr-r2: 460px;                 /* outer radius of the ring (tile height = r2 - r1) */
  --gr-n: 12;                     /* tiles per ring (same as ROUND_TILES) */
  --gr-cx: -60px;                 /* negative = ring goes a bit outside the screen edge */
  --gr-gap: 6px;                  /* gap between tiles */
  --gr-spin: 30s;                 /* time for one full turn (lower = faster) */
  --gr-stage-h: 800px;            /* visible height, the ring is cut at top and bottom */
  --gr-mid: calc((var(--gr-r1) + var(--gr-r2)) / 2);
  --gr-ease: cubic-bezier(0.22, 0.8, 0.25, 1);

  position: relative;
  width: 100%;
  background: #000;
  color: #fff;
  overflow: hidden;
  font-family: inherit;
}

/* soft #FFAA17 glow behind the centre text */
.web-gallery-round::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 760px;
  height: 460px;
  max-width: 100%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(255, 170, 23, 0.14),
    rgba(255, 170, 23, 0) 70%
  );
  pointer-events: none;
}

/* ---------- stage ---------- */
.web-gallery-round__stage {
  position: relative;
  height: var(--gr-stage-h);
  max-width: 1800px;
  margin: 0 auto;
}

/* ---------- rings ---------- */
.web-gallery-round__ringwrap {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.9s ease, transform 1.2s var(--gr-ease);
}

.web-gallery-round__ringwrap--left {
  left: var(--gr-cx);
}

.web-gallery-round__ringwrap--right {
  right: var(--gr-cx);
}

.web-gallery-round--in .web-gallery-round__ringwrap {
  opacity: 1;
  transform: scale(1);
}

/* the ring turns around its own centre */
.web-gallery-round__ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  animation: web-gallery-round-spin var(--gr-spin) linear infinite;
  animation-play-state: paused;
}

.web-gallery-round__ringwrap--right .web-gallery-round__ring {
  animation-direction: reverse;
}

.web-gallery-round--in .web-gallery-round__ring {
  animation-play-state: running;
}

@keyframes web-gallery-round-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- tile (placed on the circle) ---------- */
.web-gallery-round__tile {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(6.2832 * var(--gr-mid) / var(--gr-n) - var(--gr-gap));
  height: calc(var(--gr-r2) - var(--gr-r1) - var(--gr-gap));
  margin-left: calc(
    (6.2832 * var(--gr-mid) / var(--gr-n) - var(--gr-gap)) / -2
  );
  margin-top: calc((var(--gr-r2) - var(--gr-r1) - var(--gr-gap)) / -2);
  transform: rotate(var(--web-gallery-round-a)) translateY(calc(var(--gr-mid) * -1));
  perspective: 700px;
}

/* ---------- face (flips in, one tile after another) ---------- */
.web-gallery-round__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 2px solid var(--gr-accent);
  border-radius: 8px;
  background: #17120a;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: rotateY(90deg);
  transform-origin: 50% 50%;
  transition:
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.web-gallery-round--in .web-gallery-round__face {
  animation: web-gallery-round-flip 1s var(--gr-ease) both;
  animation-delay: calc(var(--web-gallery-round-i) * 90ms + 300ms);
}

@keyframes web-gallery-round-flip {
  0% {
    opacity: 0;
    transform: rotateY(90deg);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

/* after the entrance, every tile flips over once in a while (waves around the ring) */
.web-gallery-round--in .web-gallery-round__face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 170, 23, 0.22);
  opacity: 0;
  pointer-events: none;
  animation: web-gallery-round-glow 7s ease-in-out infinite;
  animation-delay: calc(var(--web-gallery-round-i) * 0.5s + 2.5s);
}

@keyframes web-gallery-round-glow {
  0%, 12%, 100% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
}

.web-gallery-round__tile:hover .web-gallery-round__face {
  border-color: #fff;
  box-shadow: 0 0 22px rgba(255, 170, 23, 0.6);
}

/* ---------- image + label ---------- */
.web-gallery-round__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  filter: grayscale(0.85) contrast(1.05);
  transition: filter 0.5s ease, transform 0.8s var(--gr-ease);
}

.web-gallery-round__tile:hover .web-gallery-round__img {
  filter: none;
  transform: scale(1.08);
}

.web-gallery-round__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0) 55%
  );
  pointer-events: none;
}

.web-gallery-round__label {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
}

/* ---------- centre text ---------- */
.web-gallery-round__center {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--gr-r2) + var(--gr-cx) + 28px);
  text-align: center;
  pointer-events: none;
}

.web-gallery-round__eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gr-accent);
}

.web-gallery-round__title {
  margin: 14px 0 0;
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 1.12;
  color: #fff;
  font-family: "Oswald", sans-serif !important; 
}

.web-gallery-round__title span {
  color: var(--gr-accent);
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
}

.web-gallery-round__text {
  max-width: 420px;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgb(255, 255, 255);
  text-transform: capitalize !important;
}

.web-gallery-round__badge {
  margin-top: 22px;
  padding: 9px 20px;
  border: 1px solid var(--gr-accent);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gr-accent);
  background: rgba(255, 170, 23, 0.08);
}

/* centre text fades in after the rings */
.web-gallery-round__center > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s ease, transform 0.8s var(--gr-ease);
}

.web-gallery-round--in .web-gallery-round__center > * {
  opacity: 1;
  transform: translateY(0);
  text-transform: uppercase;
}

.web-gallery-round--in .web-gallery-round__center > :nth-child(1) { transition-delay: 0.5s; }
.web-gallery-round--in .web-gallery-round__center > :nth-child(2) { transition-delay: 0.65s; }
.web-gallery-round--in .web-gallery-round__center > :nth-child(3) { transition-delay: 0.8s; }
.web-gallery-round--in .web-gallery-round__center > :nth-child(4) { transition-delay: 0.95s; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .web-gallery-round {
    --gr-r1: 210px;
    --gr-r2: 360px;
    --gr-cx: -70px;
    --gr-stage-h: 660px;
  }
}

@media (max-width: 820px) {
  .web-gallery-round {
    --gr-r1: 150px;
    --gr-r2: 265px;
    --gr-cx: -100px;
    --gr-gap: 4px;
    --gr-stage-h: 540px;
  }

  .web-gallery-round__label {
    font-size: 8px;
  }

  .web-gallery-round__text {
    font-size: 13px;
  }
}

/* phones: only the left ring, text sits to the right of it */
/* phones: left ring on top, text in the middle, right ring at the bottom */
@media (max-width: 560px) {
  .web-gallery-round {
    --gr-r1: 100px;
    --gr-r2: 190px;
    --gr-cx: -20px;          /* ring centre sits a little outside the edge */
    --gr-gap: 4px;
    --gr-side-h: 280px;      /* visible height of each ring (the ring is cut top and bottom) */
  }

  .web-gallery-round__stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }

  /* each ring gets its own clipped box */
  .web-gallery-round__ringwrap {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    height: var(--gr-side-h);
    overflow: hidden;
    transform: none;
  }

  .web-gallery-round__ringwrap--left {
    order: 1;
  }

  .web-gallery-round__center {
    order: 2;
  }

  .web-gallery-round__ringwrap--right {
    order: 3;
  }

  /* left ring curves in from the left edge, right ring from the right edge */
  .web-gallery-round__ringwrap--left .web-gallery-round__ring {
    left: var(--gr-cx);
    top: 50%;
  }

  .web-gallery-round__ringwrap--right .web-gallery-round__ring {
    left: calc(100% - var(--gr-cx));
    top: 50%;
  }

  /* text goes back into the normal flow, centred between the rings */
  .web-gallery-round__center {
    position: relative;
    inset: auto;
    align-items: center;
    padding: 36px 22px;
    text-align: center;
  }

  .web-gallery-round__title {
    font-size: 26px;
  }

  .web-gallery-round__text {
    font-size: 13px;
  }

  .web-gallery-round__label {
    font-size: 9px;
    letter-spacing: 0.06em;
  }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .web-gallery-round__ring,
  .web-gallery-round__face,
  .web-gallery-round__face::after {
    animation: none;
  }

  .web-gallery-round--in .web-gallery-round__face {
    opacity: 1;
    transform: none;
  }
}


/* Gallery grid start */
/* Gallery about grid start */
/* ============================================================
   .web-gallery-about-grid  –  project collage (scroll animated)
   Colours: black + #FFAA17 + #ffaa17bd + white (small details only)
   Desktop : free collage, every piece placed by % of the stage
   <= 900px: 2 column grid
   Paste this block at the end of website.css
   ============================================================ */

.web-gallery-about-grid {
  --web-gallery-about-grid-accent: #ffaa17;
  --web-gallery-about-grid-soft: #ffaa17bd;
  --web-gallery-about-grid-edge: rgba(255, 170, 23, 0.35);
  --web-gallery-about-grid-k: 1; /* how far pieces drift in (1 = full, smaller on phones) */

  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 3rem);
  background: #000;
  border-top: 1px solid rgba(255, 170, 23, 0.22);
  color: #fff;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

/* soft amber light behind the collage */
.web-gallery-about-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 40% at 20% 85%, rgba(255, 170, 23, 0.14), transparent 70%),
    radial-gradient(ellipse 40% 35% at 85% 15%, rgba(255, 170, 23, 0.1), transparent 70%);
}

/* ---------- stage (same ratio as the reference slide: 553 x 287) ---------- */
.web-gallery-about-grid__stage {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  aspect-ratio: 553 / 287;
  container-type: inline-size; /* lets text use cqw, so it scales with the stage */
}

/* thin connecting lines behind the pictures */
.web-gallery-about-grid__lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.web-gallery-about-grid__lines path {
  fill: none;
  stroke: var(--web-gallery-about-grid-soft);
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--web-gallery-about-grid-i, 0) * 0.12s);
}

/* diamond mark */
.web-gallery-about-grid__diamond {
  position: absolute;
  left: 30.8%;
  top: 15.4%;
  z-index: 1;
  width: 10%;
  aspect-ratio: 60 / 52;
  overflow: visible;
  pointer-events: none;
}

.web-gallery-about-grid__diamond path {
  fill: none;
  stroke: var(--web-gallery-about-grid-accent);
  stroke-width: 0.8;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.web-gallery-about-grid__stage[data-dir="above"] .web-gallery-about-grid__lines path,
.web-gallery-about-grid__stage[data-dir="above"] .web-gallery-about-grid__diamond path {
  stroke-dashoffset: -1; /* scrolling up: the lines draw the other way */
}

.web-gallery-about-grid__stage[data-on="true"] .web-gallery-about-grid__lines path,
.web-gallery-about-grid__stage[data-on="true"] .web-gallery-about-grid__diamond path {
  stroke-dashoffset: 0;
}

/* ---------- small heading (top left) ---------- */
.web-gallery-about-grid__eyebrow {
  position: absolute;
  left: 5.4%;
  top: 7%;
  z-index: 2;
  width: 25%;
  margin: 0;
}

.web-gallery-about-grid__eyebrow-title,
.web-gallery-about-grid__eyebrow-brand {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.8s ease, translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.web-gallery-about-grid__eyebrow[data-dir="above"] .web-gallery-about-grid__eyebrow-title,
.web-gallery-about-grid__eyebrow[data-dir="above"] .web-gallery-about-grid__eyebrow-brand {
  translate: 0 -18px;
}

.web-gallery-about-grid__eyebrow[data-on="true"] .web-gallery-about-grid__eyebrow-title,
.web-gallery-about-grid__eyebrow[data-on="true"] .web-gallery-about-grid__eyebrow-brand {
  opacity: 1;
  translate: 0 0;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
}

.web-gallery-about-grid__eyebrow[data-on="true"] .web-gallery-about-grid__eyebrow-brand {
  transition-delay: 0.15s;
}

.web-gallery-about-grid__eyebrow-title {
  margin: 0;
  font-size: 2.5vw;
  font-size: 2.5cqw;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: var(--web-gallery-about-grid-accent);
}

.web-gallery-about-grid__eyebrow-brand {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin: 0.9em 0 0;
  font-size: 1.05vw;
  font-size: 1.05cqw;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}

.web-gallery-about-grid__eyebrow-brand::before,
.web-gallery-about-grid__eyebrow-brand::after {
  content: "";
  flex: 1 1 auto;
  min-width: 1.4em;
  height: 1px;
  background: var(--web-gallery-about-grid-soft);
}

/* ---------- big title (bottom left) ---------- */
.web-gallery-about-grid__title {
  position: absolute;
  left: 5.4%;
  top: 60%;
  z-index: 2;
  width: max-content;
  margin: 0;
  font-size: 5.3vw;
  font-size: 5.3cqw;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--web-gallery-about-grid-accent);
  font-family: "Oswald", sans-serif;
}

/* each line sits in a mask, so it rises out of its own line */
.web-gallery-about-grid__title-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.03em;
}

.web-gallery-about-grid__title-line > span {
  display: block;
  translate: 0 105%;
  transition: translate 0.95s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: "Oswald", sans-serif;
}

.web-gallery-about-grid__title[data-dir="above"] .web-gallery-about-grid__title-line > span {
  translate: 0 -105%;
}

.web-gallery-about-grid__title[data-on="true"] .web-gallery-about-grid__title-line > span {
  translate: 0 0;
  transition-delay: calc(var(--web-gallery-about-grid-i, 0) * 0.12s);
}

/* ---------- tiles (desktop: the wrapper disappears, tiles sit on the stage) ---------- */
.web-gallery-about-grid__tiles {
  display: contents;
}

.web-gallery-about-grid__tile {
  position: absolute;
  left: calc(var(--web-gallery-about-grid-l) * 1%);
  top: calc(var(--web-gallery-about-grid-t) * 1%);
  z-index: 1;
  width: calc(var(--web-gallery-about-grid-w) * 1%);
  height: calc(var(--web-gallery-about-grid-h) * 1%);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--web-gallery-about-grid-edge);
  border-radius: 2px;
  background: #0c0c0c;
  opacity: 0;
  /* scrolling down: the piece comes up from below */
  transform:
    translate3d(calc(var(--web-gallery-about-grid-x, 0px) * var(--web-gallery-about-grid-k)), 80px, 0)
    rotate(var(--web-gallery-about-grid-r, 0deg))
    scale(0.88);
  transition:
    transform 0.95s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.7s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
  will-change: transform, opacity;
}

/* scrolling up: the same piece comes down from above, drifting the other way (reverse) */
.web-gallery-about-grid__tile[data-dir="above"] {
  transform:
    translate3d(calc(var(--web-gallery-about-grid-x, 0px) * var(--web-gallery-about-grid-k) * -1), -80px, 0)
    rotate(calc(var(--web-gallery-about-grid-r, 0deg) * -1))
    scale(0.88);
}

.web-gallery-about-grid__tile[data-on="true"] {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--web-gallery-about-grid-i, 0) * 45ms);
}

.web-gallery-about-grid__tile[data-on="true"]:hover {
  z-index: 3;
  border-color: var(--web-gallery-about-grid-accent);
  box-shadow: 0 18px 40px rgba(255, 170, 23, 0.25);
  transition-delay: 0s;
}

/* amber curtain that wipes away, revealing the picture */
.web-gallery-about-grid__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--web-gallery-about-grid-accent);
  transform: scaleY(1);
  transform-origin: 50% 0;
  transition: transform 0.9s cubic-bezier(0.7, 0, 0.2, 1);
  pointer-events: none;
}

.web-gallery-about-grid__tile[data-dir="above"]::after {
  transform-origin: 50% 100%;
}

.web-gallery-about-grid__tile[data-on="true"]::after {
  transform: scaleY(0);
  transition-delay: calc(var(--web-gallery-about-grid-i, 0) * 45ms + 0.25s);
}

/* plain amber blocks (no picture) */
.web-gallery-about-grid__tile--block {
  border: 0;
  background:
    linear-gradient(135deg, var(--web-gallery-about-grid-soft), rgba(255, 170, 23, 0.45));
  outline: 1px solid rgba(255, 255, 255, 0.28);
  outline-offset: -8px;
}

.web-gallery-about-grid__tile--block::after {
  display: none;
}

.web-gallery-about-grid__tile--block[data-on="true"]:hover {
  box-shadow: none;
}

/* ---------- picture ---------- */
.web-gallery-about-grid__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) brightness(0.92);
  transform: scale(1.3);
  transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s ease;
}

.web-gallery-about-grid__tile[data-on="true"] .web-gallery-about-grid__img {
  transform: scale(1);
  transition-delay: calc(var(--web-gallery-about-grid-i, 0) * 45ms);
}

.web-gallery-about-grid__tile[data-on="true"]:hover .web-gallery-about-grid__img {
  transform: scale(1.07);
  filter: none;
  transition-delay: 0s;
  transition-duration: 0.9s;
}

/* small label (top left), slides in after the picture */
.web-gallery-about-grid__label {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  max-width: 100%;
  padding: 0.5em 0.9em;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: max(9px, 0.95vw);
  font-size: max(9px, 0.95cqw);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  translate: 0 -101%;
  transition: translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.web-gallery-about-grid__label::before {
  content: "";
  flex: none;
  border-top: 0.4em solid transparent;
  border-bottom: 0.4em solid transparent;
  border-left: 0.7em solid var(--web-gallery-about-grid-accent);
}

.web-gallery-about-grid__tile[data-on="true"] .web-gallery-about-grid__label {
  translate: 0 0;
  transition-delay: calc(var(--web-gallery-about-grid-i, 0) * 45ms + 0.55s);
}

/* ---------- small mark (bottom right) ---------- */
.web-gallery-about-grid__mark {
  position: absolute;
  right: 1.6%;
  bottom: 1.2%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin: 0;
  font-size: 0.9vw;
  font-size: 0.9cqw;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.65);
  opacity: 0;
  transition: opacity 1s ease 0.6s;
}

.web-gallery-about-grid__mark::before {
  content: "";
  width: 2.4em;
  height: 1px;
  background: var(--web-gallery-about-grid-soft);
}

.web-gallery-about-grid__stage[data-on="true"] .web-gallery-about-grid__mark {
  opacity: 1;
}

/* ---------- tablet & mobile: heading, then a 2 column grid ---------- */
@media (max-width: 900px) {
  .web-gallery-about-grid {
    --web-gallery-about-grid-k: 0.4;
  }

  .web-gallery-about-grid__stage {
    aspect-ratio: auto;
    max-width: 720px;
  }

  .web-gallery-about-grid__lines,
  .web-gallery-about-grid__diamond,
  .web-gallery-about-grid__mark,
  .web-gallery-about-grid__tile--block {
    display: none;
  }

  .web-gallery-about-grid__eyebrow,
  .web-gallery-about-grid__title {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
  }

  .web-gallery-about-grid__eyebrow {
    margin-bottom: 1.4rem;
  }

  .web-gallery-about-grid__eyebrow-title {
    font-size: clamp(1.2rem, 4.6vw, 1.7rem);
  }

  .web-gallery-about-grid__eyebrow-brand {
    font-size: clamp(0.6rem, 2vw, 0.78rem);
    max-width: 22rem;
  }

  .web-gallery-about-grid__title {
    width: auto;
    margin-bottom: clamp(1.5rem, 5vw, 2.4rem);
    font-size: clamp(2.6rem, 12.5vw, 4.4rem);
  }

  .web-gallery-about-grid__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(120px, 30vw, 200px);
    grid-auto-flow: dense;
    gap: clamp(0.6rem, 2vw, 1rem);
  }

  .web-gallery-about-grid__tile {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    min-height: 0;
  }

  .web-gallery-about-grid__tile[data-shape="tall"] {
    grid-row: span 2;
  }

  .web-gallery-about-grid__tile[data-shape="wide"] {
    grid-column: span 2;
  }

  .web-gallery-about-grid__label {
    font-size: 0.68rem;
  }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .web-gallery-about-grid__tile,
  .web-gallery-about-grid__img,
  .web-gallery-about-grid__label,
  .web-gallery-about-grid__eyebrow-title,
  .web-gallery-about-grid__eyebrow-brand,
  .web-gallery-about-grid__title-line > span,
  .web-gallery-about-grid__mark,
  .web-gallery-about-grid__lines path,
  .web-gallery-about-grid__diamond path {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    stroke-dashoffset: 0 !important;
  }

  .web-gallery-about-grid__tile::after {
    display: none;
  }
}
/* Gallery about grid end */


/* =========================================================
   Camera section  (prefix: web-camrera-code-start)
   ========================================================= */
.web-camrera-code-start,
.web-camrera-code-start * {
  box-sizing: border-box;
}

.web-camrera-code-start {
  position: relative;
  overflow: hidden;
  padding: 80px 20px 70px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 170, 23, 0.12), transparent 55%),
    #0d0d10;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.web-camrera-code-start--in {
  opacity: 1;
  transform: none;
}

/* ---------- heading ---------- */
.web-camrera-code-start__head {
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
}

.web-camrera-code-start__eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ffaa17;
}

.web-camrera-code-start__title {
  margin: 10px 0 0;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

.web-camrera-code-start__title span {
  color: #ffaa17;
  font-family: "Oswald", sans-serif;
}

/* ---------- scaler (640 x 800 design, scale is set from JSX) ---------- */
.web-camrera-code-start__scaler {
  --web-camrera-code-start-s: 1; /* JS overrides this to fit the screen width */
  position: relative;
  z-index: 1;
  width: 100%;
  height: calc(520px * var(--web-camrera-code-start-s));
  overflow: hidden;
}

.web-camrera-code-start__stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: 640px;
  height: 520px;
  margin-left: -320px;
  transform: scale(var(--web-camrera-code-start-s));
  transform-origin: top center;
}

/* ---------- camera body (back side) ---------- */
.web-camrera-code-start__camera {
  position: absolute;
  top: 40px;
  left: 60px;
  z-index: 3;
  width: 520px;
  height: 340px;
  border-radius: 36px 36px 30px 30px;
  background: linear-gradient(180deg, #2c2c31 0%, #17171b 60%, #101013 100%);
  box-shadow:
    0 36px 70px #ffc10738,
    inset 0 2px 0 rgb(255 255 255 / 18%),
    inset 0 -8px 0 rgba(0, 0, 0, 0.4);
}

.web-camrera-code-start__camera::before {
  content: "";
  position: absolute;
  top: 78px;
  right: 0;
  left: 0;
  height: 6px;
  background: #ffaa17;
}

.web-camrera-code-start__hotshoe {
  position: absolute;
  top: -24px;
  left: 220px;
  width: 80px;
  height: 30px;
  border-radius: 10px 10px 0 0;
  background: #1d1d21;
}

.web-camrera-code-start__dial {
  position: absolute;
  top: -16px;
  right: 50px;
  width: 130px;
  height: 30px;
  border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(90deg, #2a2a2f 0 6px, #17171a 6px 10px);
}

.web-camrera-code-start__button {
  position: absolute;
  top: -14px;
  right: 200px;
  width: 46px;
  height: 18px;
  border-radius: 7px 7px 0 0;
  background: #e5484d;
  transition: transform 0.12s ease;
}

.web-camrera-code-start__eyepiece {
  position: absolute;
  top: 16px;
  left: 190px;
  width: 140px;
  height: 58px;
  border: 3px solid #3a3a42;
  border-radius: 14px;
  background: #0b0b0d;
}

.web-camrera-code-start__eyepiece-glass {
  position: absolute;
  inset: 8px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0a0a0c 50%, #1d3a55 100%);
}

/* left buttons */
.web-camrera-code-start__keys {
  position: absolute;
  top: 100px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.web-camrera-code-start__key {
  width: 34px;
  height: 34px;
  border: 2px solid #0a0a0c;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3a3a40, #16161a 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ---------- LCD screen (the picture being taken) ---------- */
.web-camrera-code-start__screen {
  position: absolute;
  top: 92px;
  left: 84px;
  width: 270px;
  height: 210px;
  overflow: hidden;
  border: 8px solid #09090b;
  border-radius: 10px;
  background: #000;
  box-shadow:
    0 0 0 3px #3a3a42,
    inset 0 0 18px rgba(0, 0, 0, 0.8);
}

.web-camrera-code-start__subject {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: web-camrera-code-start-subject-in 0.5s ease both;
}

.web-camrera-code-start__focus {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  pointer-events: none;
}

.web-camrera-code-start__shutter {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.web-camrera-code-start__screen-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.web-camrera-code-start__glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.14) 0, transparent 35%);
  pointer-events: none;
}

.web-camrera-code-start__brand {
  position: absolute;
  top: 314px;
  left: 84px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.35em;
  color: #cfcfd6;
}

/* ---------- right side: thumb grip, OK dial, LED ---------- */
.web-camrera-code-start__thumb {
  position: absolute;
  top: 96px;
  right: 26px;
  width: 130px;
  height: 220px;
  border-radius: 22px;
  background:
    radial-gradient(#0b0b0d 1.4px, transparent 1.8px) 0 0 / 9px 9px,
    #202025;
}

.web-camrera-code-start__ok {
  position: absolute;
  top: 150px;
  right: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #3a3a40, #141417 70%);
  box-shadow:
    0 0 0 5px #0b0b0d,
    0 0 0 7px #3a3a42;
}

.web-camrera-code-start__ok span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid #3a3a42;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  color: #ddd;
  background: #0f0f12;
}

.web-camrera-code-start__led {
  position: absolute;
  top: 64px;
  right: 150px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e5484d;
  box-shadow: 0 0 8px #e5484d;
  opacity: 0.25;
}

.web-camrera-code-start__slot {
  position: absolute;
  bottom: -4px;
  left: 90px;
  width: 340px;
  height: 12px;
  border-radius: 6px;
  background: #000;
}

/* ---------- countdown badge ---------- */
.web-camrera-code-start__count {
  position: absolute;
  top: -30px;
  right: -24px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 32px;
  font-weight: 800;
  color: #111;
  background: #ffaa17;
  box-shadow: 0 8px 20px rgba(255, 170, 23, 0.45);
  animation: web-camrera-code-start-pop 1s ease both;
}

/* ---------- photo (comes out under the camera) ---------- */
/* mask covers the whole stage and sits ABOVE the camera (camera z-index is 3) */
.web-camrera-code-start__mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 640px;
  height: 520px;
  pointer-events: none;
}

/* image only (no polaroid). It waits below the stage, then rises over the camera */
.web-camrera-code-start__photo {
  position: absolute;
  top: 0;
  left: 170px;          /* (640 - 300) / 2 = centred */
  width: 300px;
  height: auto;
  display: flex;
  justify-content: center;
  margin: 0;
  opacity: 0;
  transform: translateY(540px) rotate(0deg);
  transform-origin: 50% 50%;
  transition: none;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.55));
}

/* image only: no white frame, no caption */
.web-camrera-code-start__photo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 16px;
  border: 3px solid #ffaa17;
  filter: brightness(0.25) sepia(0.8) blur(3px);
}

/* ---------- dots ---------- */
.web-camrera-code-start__dots {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.web-camrera-code-start__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.3s ease, background 0.3s ease;
}

.web-camrera-code-start__dot--active {
  width: 26px;
  background: #ffaa17;
}

/* ---------- full screen flash ---------- */
.web-camrera-code-start__flash {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: radial-gradient(circle at 50% 30%, #ffffff, rgba(255, 255, 255, 0.85));
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   Phases
   ========================================================= */

/* aim: screen focuses, focus box locks, LED blinks (self-timer) */
.web-camrera-code-start[data-phase="aim"] .web-camrera-code-start__subject {
  animation: web-camrera-code-start-focus 3s ease-out both;
}

.web-camrera-code-start[data-phase="aim"] .web-camrera-code-start__focus {
  animation: web-camrera-code-start-lock 3s ease-out both;
}

.web-camrera-code-start[data-phase="aim"] .web-camrera-code-start__led {
  animation: web-camrera-code-start-blink 0.5s steps(2, end) infinite;
}

/* flash: click */
.web-camrera-code-start[data-phase="flash"] .web-camrera-code-start__flash {
  animation: web-camrera-code-start-flash 0.45s ease-out both;
}

.web-camrera-code-start[data-phase="flash"] .web-camrera-code-start__shutter {
  animation: web-camrera-code-start-shutter 0.45s ease-in-out both;
}

.web-camrera-code-start[data-phase="flash"] .web-camrera-code-start__screen-flash {
  animation: web-camrera-code-start-screen-flash 0.45s ease-out both;
}

.web-camrera-code-start[data-phase="flash"] .web-camrera-code-start__hotshoe {
  animation: web-camrera-code-start-glow 0.45s ease-out both;
}

.web-camrera-code-start[data-phase="flash"] .web-camrera-code-start__button {
  transform: translateY(7px);
}

.web-camrera-code-start[data-phase="flash"] .web-camrera-code-start__camera {
  animation: web-camrera-code-start-recoil 0.45s ease-out both;
}

/* print: image rises from below the camera */
.web-camrera-code-start[data-phase="print"] .web-camrera-code-start__photo {
  opacity: 1;
  transform: translateY(330px) rotate(0deg);
  transition: transform 1.6s ease-in-out, opacity 0.3s ease;
}

/* show: image sits on top of the camera (fully inside), tilts a little and develops */
.web-camrera-code-start[data-phase="show"] .web-camrera-code-start__photo {
  opacity: 1;
  transform: translateY(70px) scale(1.08) rotate(-6deg);
  transition: transform 1s cubic-bezier(0.2, 0.9, 0.25, 1.1);
}

.web-camrera-code-start[data-phase="show"] .web-camrera-code-start__photo-img {
  filter: none;
  transition: filter 1.2s ease;
}

/* reset: photo flies up and away, fading out */
.web-camrera-code-start[data-phase="reset"] .web-camrera-code-start__photo {
  opacity: 0;
  transform: translateY(-460px) scale(1.08) rotate(-16deg);
  transition: transform 0.8s cubic-bezier(0.6, 0, 0.9, 0.4), opacity 0.8s ease;
}

.web-camrera-code-start[data-phase="reset"] .web-camrera-code-start__photo-img {
  filter: none;
}

/* =========================================================
   Keyframes
   ========================================================= */
@keyframes web-camrera-code-start-subject-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes web-camrera-code-start-focus {
  0%   { transform: scale(1.18); filter: blur(5px); }
  100% { transform: scale(1);    filter: blur(0); }
}

@keyframes web-camrera-code-start-lock {
  0%   { transform: scale(1.7); border-color: rgba(255, 255, 255, 0.85); }
  80%  { transform: scale(1);   border-color: rgba(255, 255, 255, 0.85); }
  100% { transform: scale(1);   border-color: #ffaa17; }
}

@keyframes web-camrera-code-start-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  25%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes web-camrera-code-start-blink {
  0%   { opacity: 1; }
  100% { opacity: 0.2; }
}

@keyframes web-camrera-code-start-flash {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes web-camrera-code-start-shutter {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes web-camrera-code-start-screen-flash {
  0%   { opacity: 0; }
  25%  { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes web-camrera-code-start-glow {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 200, 0); }
  20%  { box-shadow: 0 -6px 40px 18px rgba(255, 255, 200, 0.95); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 200, 0); }
}

/* camera shakes a little and its amber glow flares up on click */
@keyframes web-camrera-code-start-recoil {
  0% {
    transform: scale(1);
    box-shadow:
      0 36px 70px #ffc10738,
      inset 0 2px 0 rgb(255 255 255 / 18%),
      inset 0 -8px 0 rgba(0, 0, 0, 0.4);
  }
  35% {
    transform: scale(0.985);
    box-shadow:
      0 36px 110px rgba(255, 170, 23, 0.6),
      inset 0 2px 0 rgb(255 255 255 / 18%),
      inset 0 -8px 0 rgba(0, 0, 0, 0.4);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 36px 70px #ffc10738,
      inset 0 2px 0 rgb(255 255 255 / 18%),
      inset 0 -8px 0 rgba(0, 0, 0, 0.4);
  }
}

/* =========================================================
   Responsive
   (the camera scale itself is set from gallery.jsx, so only the padding is here)
   ========================================================= */
@media (max-width: 640px) {
  .web-camrera-code-start {
    padding: 60px 12px 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .web-camrera-code-start__flash {
    display: none;
  }
}


/* =====================================================
   SINGLE INDUSTRY : NO PROJECTS FOUND
   ===================================================== */
.web-single-industry-not-found {
  --wsinf-bg: #140c0c;
  --wsinf-ink: #111111;
  --wsinf-muted: #6b6b6b;
  --wsinf-line: #e6e6e6;
  --wsinf-accent: #ffaa14; /* change to your brand yellow */

  position: relative;
  width: 100%;
  padding: clamp(56px, 9vw, 120px) 20px;
  background: var(--wsinf-bg);
  overflow: hidden;
  box-sizing: border-box;
}

/* soft glow behind the content */
.web-single-industry-not-found::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: min(640px, 90vw);
  height: min(640px, 90vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(245, 196, 0, 0.16) 0%, rgba(245, 196, 0, 0) 65%);
  pointer-events: none;
}

.web-single-industry-not-found__inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- icon ---------- */
.web-single-industry-not-found__visual {
  position: relative;
  width: clamp(104px, 22vw, 132px);
  height: clamp(104px, 22vw, 132px);
  display: grid;
  place-items: center;
  margin-bottom: 28px;
}

.web-single-industry-not-found__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--wsinf-accent);
  opacity: 0;
  animation: wsinf-pulse 3.2s ease-out infinite;
}

.web-single-industry-not-found__ring--b {
  animation-delay: 1.6s;
}

.web-single-industry-not-found__icon {
  position: relative;
  width: 68%;
  height: 68%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--wsinf-ink);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
  animation: wsinf-float 4s ease-in-out infinite;
}

.web-single-industry-not-found__icon svg {
  width: 44%;
  height: 44%;
  fill: none;
  stroke: var(--wsinf-accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- text ---------- */
.web-single-industry-not-found__tag {
  margin: 0 0 12px;
  padding: 6px 14px;
  border: 1px solid #ffaa14;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffaa14;
}

.web-single-industry-not-found__title {
  margin: 0 0 14px;
  font-size: clamp(28px, 5.4vw, 46px);
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
}

.web-single-industry-not-found__accent {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.web-single-industry-not-found__accent::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 4px;
  height: 36%;
  background: var(--wsinf-accent);
  z-index: -1;
  transform-origin: left;
  animation: wsinf-underline 0.9s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.web-single-industry-not-found__text {
  margin: 0 0 30px;
  max-width: 480px;
  font-size: clamp(14px, 2.2vw, 16px);
  line-height: 1.7;
  color: #bd882ced;
}

/* ---------- buttons ---------- */
.web-single-industry-not-found__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.web-single-industry-not-found__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1.5px solid var(--wsinf-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--wsinf-ink);
  background: transparent;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.web-single-industry-not-found__btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.web-single-industry-not-found__btn:hover {
  background: var(--wsinf-ink);
  color: #fff;
  transform: translateY(-2px);
}

.web-single-industry-not-found__btn--primary {
  background: var(--wsinf-accent);
  border-color: var(--wsinf-accent);
  color: #111;
}

.web-single-industry-not-found__btn--primary:hover {
  background: var(--wsinf-ink);
  border-color: var(--wsinf-ink);
  color: var(--wsinf-accent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.web-single-industry-not-found__btn--primary:hover svg {
  transform: translateX(4px);
}

.web-single-industry-not-found__btn:focus-visible {
  outline: 3px solid var(--wsinf-accent);
  outline-offset: 3px;
}

/* ---------- animations ---------- */
@keyframes wsinf-pulse {
  0%   { transform: scale(0.7); opacity: 0.7; }
  100% { transform: scale(1.45); opacity: 0; }
}

@keyframes wsinf-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes wsinf-underline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- responsive ---------- */
@media (max-width: 600px) {
  .web-single-industry-not-found {
    padding: 48px 16px 64px;
  }

  .web-single-industry-not-found__actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }

  .web-single-industry-not-found__btn {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .web-single-industry-not-found__tag {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .web-single-industry-not-found__ring,
  .web-single-industry-not-found__icon,
  .web-single-industry-not-found__accent::after {
    animation: none;
  }

  .web-single-industry-not-found__ring {
    opacity: 0.4;
    transform: scale(1.1);
  }
}


/* Contact page alert: every class starts with .web-alert--contact */

.web-alert--contact {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 170, 29, 0.35);
  background: linear-gradient(135deg, rgba(255, 170, 29, 0.12), rgba(20, 20, 20, 0.95));
  color: #f2f2f2;
  font-family: inherit;
  animation: web-alert--contact-in 0.45s ease both;
}

.web-alert--contact__icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffaa1d;
  color: #0b0b0b;
  box-shadow: 0 0 0 4px rgba(255, 170, 29, 0.15);
}

.web-alert--contact__icon svg {
  width: 20px;
  height: 20px;
}

.web-alert--contact__body {
  flex: 1;
  min-width: 0;
}

.web-alert--contact__title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #ffaa1d;
}

.web-alert--contact__text {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #d6d6d6;
  overflow-wrap: anywhere;
}

.web-alert--contact__close {
  background: none;
  border: 0;
  padding: 0 4px;
  font-size: 22px;
  line-height: 1;
  color: #8a8a8a;
  cursor: pointer;
  transition: color 0.2s ease;
}

.web-alert--contact__close:hover,
.web-alert--contact__close:focus-visible {
  color: #ffffff;
  outline: none;
}

/* Error variant */
.web-alert--contact-error {
  border-color: rgba(255, 80, 80, 0.45);
  background: linear-gradient(135deg, rgba(255, 80, 80, 0.12), rgba(20, 20, 20, 0.95));
}

.web-alert--contact-error .web-alert--contact__icon {
  background: #ff5050;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 80, 80, 0.15);
}

.web-alert--contact-error .web-alert--contact__title {
  color: #ff7a7a;
}

@keyframes web-alert--contact-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .web-alert--contact {
    animation: none;
  }
}

@media (max-width: 480px) {
  .web-alert--contact {
    padding: 14px;
  }
}


.bc-loc { position: relative; }

.bc-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  max-height: 220px;
  overflow-y: auto;
}

.bc-suggest-item {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #111;
  cursor: pointer;
}

.bc-suggest-item:hover,
.bc-suggest-item.is-active {
  background: #fff3cf;
}

/* ---------- Success popup ---------- */
.bc-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  animation: bcsFade 0.3s ease both;
}

.bc-success {
  position: relative;
  width: min(440px, 100%);
  padding: 44px 32px 36px;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, #1a1305 0%, #0a0a0a 55%, #000 100%);
  border: 1px solid rgba(255, 170, 23, 0.4);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 170, 23, 0.08),
    0 30px 80px rgba(0, 0, 0, 0.7),
    0 0 70px rgba(255, 170, 23, 0.18);
  animation: bcsPop 0.55s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}

.bc-success-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, #ffaa17, transparent);
}

.bc-success-icon {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffaa17;
  color: #000;
  box-shadow: 0 0 40px rgba(255, 170, 23, 0.55);
  animation: bcsIcon 0.6s 0.15s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.bc-success-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #ffaa17;
  opacity: 0;
  animation: bcsRing 2s 0.5s ease-out infinite;
}
.bc-success-ring--2 { animation-delay: 1.2s; }

.bc-success-check {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: bcsDraw 0.5s 0.55s ease forwards;
}

.bc-success-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bc-success-sparks i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px;
  border-radius: 50%;
  background: #ffaa17;
  opacity: 0;
  animation: bcsSpark 0.9s 0.5s ease-out forwards;
}

.bc-success-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #ffaa17;
}

.bc-success-title {
  margin: 0 0 12px;
  font-size: clamp(26px, 5vw, 32px);
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
}
.bc-success-title span { color: #ffaa17; }

.bc-success-text {
  margin: 0 auto 28px;
  max-width: 320px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}

.bc-success-btn {
  min-width: 170px;
  padding: 14px 34px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000;
  background: #ffaa17;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bc-success-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255, 170, 23, 0.45);
}
.bc-success-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.bc-success-timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
}
.bc-success-timer span {
  display: block;
  height: 100%;
  background: #ffaa17;
  transform-origin: left;
  animation-name: bcsTimer;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes bcsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bcsPop {
  from { opacity: 0; transform: translateY(24px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes bcsIcon {
  from { transform: scale(0) rotate(-90deg); }
  to   { transform: scale(1) rotate(0); }
}
@keyframes bcsDraw { to { stroke-dashoffset: 0; } }
@keyframes bcsRing {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.9); }
}
@keyframes bcsSpark {
  0%   { opacity: 1; transform: rotate(var(--a)) translateX(0); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(78px); }
}
@keyframes bcsTimer {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bc-success-overlay,
  .bc-success,
  .bc-success-icon,
  .bc-success-ring,
  .bc-success-sparks i { animation: none; }
  .bc-success-check { animation: none; stroke-dashoffset: 0; }
}