/* ==========================================================================
   components.css — buttons, cards, marquee & all UI components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.main-nav__list {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  align-items: center;
}

.main-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700; /* Figma: Satoshi Bold */
  font-size: 1rem;
  color: var(--color-white);
  transition: color var(--speed) var(--ease);
}

.main-nav__item > a:hover {
  color: var(--color-accent);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-white);
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

.icon-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Mobile menu toggle -------------------------------------------------------*/
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  order: 2;
}

.nav-toggle__bar {
  width: 26px;
  height: 2px;
  background: var(--color-white);
  transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 61.99rem) {
  .main-nav {
    position: relative;
  }

  .main-nav__list {
    position: absolute;
    right: 0;
    top: calc(100% + 1rem);
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 220px;
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    display: none;
  }

  .main-nav__list.is-open {
    display: flex;
  }

  .main-nav__item {
    width: 100%;
  }

  .main-nav__item > a {
    width: 100%;
    justify-content: space-between;
    padding: 0.65rem 0.5rem;
  }
}

@media (min-width: 62rem) {
  .nav-toggle {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Buttons & pills
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-button);
  font-weight: 500;
}

.btn--primary > span {
  display: inline-flex;
  align-items: center;
  padding: 1.375rem 2rem; /* Figma: 22px / 32px */
  background: var(--color-red); /* red CTA against the gold theme */
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-size: 1rem;
  line-height: 1;
  transition: background var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.btn__arrow {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  transition: transform var(--speed) var(--ease);
}

.btn--primary:hover > span {
  background: var(--color-red-hover);
}

.btn--primary:hover .btn__arrow {
  transform: rotate(45deg);
}

/* Outlined variant (Figma: "View All News" — white border, transparent fill) */
.btn--outline > span {
  display: inline-flex;
  align-items: center;
  padding: 1.375rem 2rem;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  border-radius: 26px;
  font-size: 1rem;
  line-height: 1;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.btn--outline:hover > span {
  background: var(--color-white);
  color: var(--color-bg);
}

.btn__arrow-o {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  transition: transform var(--speed) var(--ease);
}

.btn__arrow-o svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn--outline:hover .btn__arrow-o {
  transform: rotate(45deg);
}

.pill-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 500;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12); /* Figma */
  font-size: 0.875rem;
  font-weight: 500; /* Satoshi Medium */
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero__title {
  position: relative;
  z-index: 2;
  line-height: 0.75;
  letter-spacing: 0;
  margin: 0;
}

.hero__word {
  display: block;
}

.hero__word--outline {
  /* VIDEO — reduced ~15% from Figma's 23.44vw so the KPM logo stands out */
  font-size: clamp(3.5rem, 20vw, 34rem);
  color: transparent;
  -webkit-text-stroke: clamp(1.5px, 0.12vw, 3px) var(--color-white);
  text-stroke: clamp(1.5px, 0.12vw, 3px) var(--color-white);
}

.hero__word--solid {
  /* PRODUCTION — reduced ~15% from Figma's 17.92vw so the KPM logo stands out */
  font-size: clamp(2.75rem, 15.3vw, 26rem);
  color: var(--color-white);
}

/* On desktop, PRODUCTION is shifted right (+34% ≈ 620px) and tucked up to
   overlap VIDEO and the banner top. */
@media (min-width: 62rem) {
  .hero__word--solid {
    margin-left: 34%;
    margin-top: -0.12em;
  }
}

.hero__lead {
  /* Figma: Satoshi Medium 18px, white, line-height 32px */
  margin-top: 1.75rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.78;
  color: var(--color-white);
  max-width: 42ch;
}

.about-badge {
  display: block;
  /* Figma: 161px @1920 (8.39vw) */
  width: clamp(110px, 8.39vw, 215px);
  height: clamp(110px, 8.39vw, 215px);
  margin-top: 1.75rem;
}

.about-badge img {
  width: 100%;
  height: 100%;
  animation: slow-spin 14s linear infinite;
  transition: transform var(--speed) var(--ease);
}

.about-badge:hover img {
  animation-play-state: paused;
  transform: scale(1.05);
}

.hero__reel {
  display: none;
}

/* Desktop: place lead, badge and reel around the giant headline */
@media (min-width: 62rem) {
  .hero__lead {
    position: absolute;
    top: 2.5rem;
    left: 45%;
    width: min(30ch, 28.6vw);
    margin-top: 0;
  }

  .about-badge {
    position: absolute;
    top: 26%;
    left: 45%;
    z-index: 3;
    margin-top: 0;
  }

  .hero__reel {
    display: block;
    position: absolute;
    top: -3.5rem;
    right: clamp(0px, 2vw, 40px);
    width: clamp(240px, 19.53vw, 500px); /* Figma: 375px @1920 */
    z-index: 0;
    pointer-events: none;
  }
}

.hero__banner img {
  width: 100%;
  /* Figma: 1807×684 → aspect 2.64 */
  aspect-ratio: 1807 / 684;
  height: auto;
  object-fit: cover;
}

@media (min-width: 62rem) {
  .hero__banner img {
    border-radius: var(--radius-lg);
  }
}

/* --------------------------------------------------------------------------
   Brands
   -------------------------------------------------------------------------- */
.brands {
  text-align: center;
}

.brands__title {
  /* Figma: Mango Grotesque Semi Bold 56px @1920 (2.917vw), white, line-height 63px */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 2.917vw, 5rem);
  line-height: 1.125;
  color: var(--color-white);
  margin-bottom: clamp(2rem, 2.7vw, 3.5rem);
}

.brands__logos {
  width: 100%;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   About — rating & features
   -------------------------------------------------------------------------- */
.rating {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.rating__info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Circular "see reviews" button next to the rating (Figma: 50px ring) */
.rating__btn {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  color: var(--color-white);
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.rating__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rating__btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.rating__label {
  font-size: var(--fs-small);
  letter-spacing: -0.02em;
  color: var(--color-muted);
}

.rating__row {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.rating__score {
  font-weight: 700;
  font-size: 1rem;
}

.stars {
  display: inline-flex;
  gap: 3px;
}

.stars svg {
  width: 16px;
  height: 16px;
  fill: var(--color-accent);
}

.about__title {
  /* Figma: Mango Grotesque Semi Bold 80px @1920 (80/1920 = 4.17vw); scales up
     with the layout so it keeps the same proportion at 2560. */
  font-size: clamp(2.5rem, 4.17vw, 7rem);
  line-height: 0.89;
  margin-bottom: clamp(2rem, 3vw, 2.75rem);
  text-transform: none;
  font-weight: 600;
}

.feature {
  display: grid;
  gap: 1rem;
}

.feature__icon {
  width: 78px;
  height: 78px;
}

.feature__title {
  /* Figma: Mango Grotesque Semi Bold 52px @1920 (52/1920 = 2.71vw) */
  font-size: clamp(1.75rem, 2.71vw, 4.5rem);
  line-height: 1.04;
  font-weight: 600;
  text-transform: none; /* "Award Winning" / "Best Quality" are Title Case in Figma */
}

.feature__text {
  color: var(--color-muted);
  max-width: 42ch;
}

/* --------------------------------------------------------------------------
   Category cards
   -------------------------------------------------------------------------- */
.category-card {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.4vw, 3rem);
  height: 100%;
}

.category-card__media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 637 / 522;
}

.category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.category-card:hover .category-card__media img {
  transform: scale(1.05);
}

.category-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.category-card__title {
  /* Figma: Mango Grotesque Semi Bold 52px @1920 (2.708vw) / line-height 54px */
  font-size: clamp(1.5rem, 2.708vw, 4.5rem);
  line-height: 1.04;
  font-weight: 600;
  text-transform: none;
}

.category-card__tag {
  display: block;
  margin-top: 0.35rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.88);
}

.category-card__arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--color-accent); /* Figma: plain red diagonal arrow, no circle */
  transition: transform var(--speed) var(--ease);
}

.category-card__arrow svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-card:hover .category-card__arrow {
  transform: translate(3px, -3px);
}

/* --------------------------------------------------------------------------
   Service cards
   -------------------------------------------------------------------------- */
.service-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(2rem, 2.5vw, 2.8rem);
  /* Figma: translucent fill, no border, square corners */
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid transparent;
  border-radius: 0;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.service-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
}

.service-card__icon {
  /* Figma: 98px @1920 (5.1vw) */
  width: clamp(80px, 5.1vw, 130px);
  height: clamp(80px, 5.1vw, 130px);
  margin-bottom: 0.75rem;
}

.service-card__title {
  /* Figma: Mango Grotesque Semi Bold 52px @1920 (2.71vw) */
  font-size: clamp(2rem, 2.71vw, 4.5rem);
  line-height: 1.04;
  font-weight: 600;
  text-transform: none;
}

.service-card__text {
  color: rgba(255, 255, 255, 0.8);
}

.check-list {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.check-list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 1rem;
  font-weight: 700; /* Figma: Satoshi Bold */
  color: rgba(255, 255, 255, 0.9);
}

.check-list li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: -0.1em;
  color: var(--color-amber); /* Figma: #ffa600 */
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  /* Pulled up so it overlaps the bottom edge of the awards panel (Figma) */
  margin-top: clamp(-4.5rem, -4vw, -2rem);
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 26s linear infinite;
}

.marquee__group {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-right: clamp(1.5rem, 3vw, 3rem);
}

.marquee__word {
  font-family: var(--font-display);
  font-weight: 700;
  /* Figma: 100px @1920 (5.21vw), tracking -2px */
  font-size: clamp(2.5rem, 5.21vw, 8.7rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-white);
  text-stroke: 2px var(--color-white);
  white-space: nowrap;
}

.marquee__star {
  /* Figma: 64px @1920 (3.33vw) */
  width: clamp(36px, 3.33vw, 66px);
  height: clamp(36px, 3.33vw, 66px);
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   Awards media
   -------------------------------------------------------------------------- */
.awards__frame {
  position: relative;
  /* Figma: 1704 / 1920 ≈ 88.75vw (narrower than the media container) */
  width: min(88.75vw, 2275px);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.75rem, 3vw, 3rem);
  /* Figma: no border — it's a photo panel with rounded corners */
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.awards__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.awards__frame::before { /* darkening overlay so text stays legible */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.35));
  z-index: -1;
}

.awards__asterisk {
  position: absolute;
  top: clamp(0.5rem, 2vw, 1.5rem);
  right: clamp(0.5rem, 2vw, 1.5rem);
  width: clamp(90px, 10.3vw, 200px); /* Figma: 198px @1920 */
  animation: slow-spin 18s linear infinite;
}

.awards__badges {
  display: flex;
  gap: clamp(1.5rem, 3.4vw, 65px); /* Figma: ~65px @1920 */
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.awards__badges img {
  width: clamp(90px, 7.4vw, 145px); /* Figma: ~142px @1920 */
  height: auto;
}

.awards__media {
  display: flex;
  justify-content: center;
}

.awards__inset {
  width: 100%;
  max-width: min(32vw, 618px); /* Figma: 618px @1920 */
  aspect-ratio: 618 / 692;
  object-fit: cover;
}

@keyframes slow-spin {
  to {
    transform: rotate(360deg);
  }
}

.awards__title {
  text-transform: uppercase;
  max-width: 14ch;
  margin-bottom: 1.5rem;
}

.awards__text {
  /* Figma: Satoshi Regular 18px @1920, white, line-height 30px */
  color: var(--color-white);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.67;
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.member {
  text-align: center;
}

.member__photo {
  overflow: hidden;
  border-radius: 50%; /* Figma: circular portraits */
  aspect-ratio: 1;
  margin-bottom: 1.75rem;
  background: var(--color-surface);
}

.member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.member:hover .member__photo img {
  transform: scale(1.06);
}

.member__name {
  /* Figma: Mango Grotesque Medium 36px @1920 (1.875vw) */
  font-size: clamp(1.5rem, 1.875vw, 3rem);
  font-weight: 500;
  text-transform: none;
}

.member__role {
  margin-top: 0.75rem;
  font-size: clamp(0.8rem, 0.729vw, 0.95rem); /* Figma: Satoshi Medium 14px */
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   Portfolio gallery
   -------------------------------------------------------------------------- */
.gallery__item {
  position: relative;
  border-radius: 0; /* Figma: sharp-cornered tight grid */
  overflow: hidden;
  aspect-ratio: 590 / 405;
}

.gallery__item img:not(.gallery__play) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.gallery__item:hover img:not(.gallery__play) {
  transform: scale(1.05);
}

.gallery__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(72px, 9vw, 114px);
  height: clamp(72px, 9vw, 114px);
  transition: transform var(--speed) var(--ease);
}

.gallery__item--play:hover .gallery__play {
  transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.testimonials__collage {
  width: 100%;
  max-width: none;
}

.testimonials__collage img {
  width: 100%;
  height: auto;
}

.quote {
  position: relative;
}

.quote__mark {
  /* Figma: 137px @1920 (7.14vw) */
  width: clamp(90px, 7.14vw, 183px);
  height: auto;
  margin-bottom: 1.5rem;
}

.quote__text {
  font-family: var(--font-display);
  font-weight: 600;
  /* Figma: Mango Grotesque Semi Bold 80px @1920 (4.167vw) / line-height 80px */
  font-size: clamp(2rem, 4.167vw, 6.75rem);
  line-height: 1;
  text-transform: none; /* Figma: sentence case */
  margin-bottom: 2rem;
}

.quote__author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.quote__avatar {
  width: 53px;
  height: 53px;
  border-radius: 50%;
  background: #6f6f6f;
  flex-shrink: 0;
}

.quote__meta {
  display: flex;
  flex-direction: column;
}

.quote__name {
  font-family: var(--font-display); /* Figma: Mango Grotesque Medium 32px @1920 (1.667vw) */
  font-weight: 500;
  font-size: clamp(1.6rem, 1.667vw, 2.7rem);
  line-height: 1.06;
  text-transform: none;
}

.quote__role {
  font-size: 0.875rem; /* Figma: Satoshi Medium 14px */
  color: var(--color-muted);
}

.testimonials__nav {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (min-width: 62rem) {
  .testimonials__nav {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-top: 0;
  }
}

.nav-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.nav-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-arrow--filled {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.nav-arrow:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */
.stat {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.75rem;
  align-items: flex-start; /* Figma: left-aligned */
}

.stat__num {
  font-family: var(--font-display);
  font-weight: 600; /* Figma: Mango Grotesque Semi Bold 150px @1920 (7.813vw) */
  font-size: clamp(3rem, 7.813vw, 12.5rem);
  line-height: 0.68;
  /* Figma: transparent fill → outlined, consistent with the hero/marquee */
  color: transparent;
  -webkit-text-stroke: clamp(1px, 0.12vw, 2px) var(--color-white);
  text-stroke: clamp(1px, 0.12vw, 2px) var(--color-white);
}

.stat__label {
  display: inline-flex;
  padding: 8px 19px;
  border-radius: 4px; /* Figma */
  background: var(--color-accent-tint);
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 0.833vw, 1.35rem); /* Figma: 16px @1920 */
  font-weight: 500;
  letter-spacing: 0.28em; /* Figma tracking 4.64px */
  text-transform: uppercase;
  color: var(--color-accent-2);
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */
.blog__head-side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  max-width: 480px;
}

.blog__head-text {
  color: var(--color-white); /* Figma: Satoshi Medium 16px white */
  font-size: 1rem;
}

.post-list {
  display: grid;
}

.post {
  display: grid;
  gap: 1.25rem 2rem;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--color-border);
  align-items: center;
}

.post-list .post:last-child {
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 62rem) {
  /* Every post shares the same 3-column track so all titles line up, even the
     posts without a thumbnail (their media column simply stays empty). */
  .post {
    /* Figma: media 440 : title 440 : aside 410 (of the 1290 container) */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.93fr);
  }

  .post:not(.post--featured) .post__main {
    grid-column-start: 2;
  }
}

.post__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 393 / 318; /* Figma */
}

/* Figma: the featured post's photo is tilted -15° */
.post--featured .post__media {
  transform: rotate(-15deg);
}

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

.post__main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.post__title {
  /* Figma: Mango Grotesque Medium 42px @1920 (2.19vw) / line-height 50px */
  font-size: clamp(1.75rem, 2.19vw, 46px);
  font-weight: 500;
  line-height: 1.19;
  text-transform: none;
}

.post__title a {
  transition: color var(--speed) var(--ease);
}

.post__title a:hover {
  color: var(--color-accent);
}

/* Featured article title is red + underlined in Figma */
.post--featured .post__title a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.post__more {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700; /* Figma: Satoshi Bold */
  font-size: 1rem;
  color: var(--color-white); /* white by default; red only on the featured post */
}

.post--featured .post__more {
  color: var(--color-accent);
}

.post--featured .post__more-icon {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.post__more-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.post__more-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.post__more:hover .post__more-icon {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.post__aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

/* Tag + date share the top row; excerpt sits below (Figma) */
.post__meta-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.post__excerpt {
  color: rgba(255, 255, 255, 0.77); /* Figma */
  font-size: 1rem;
  max-width: 46ch;
}

.post__date {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem; /* Figma: Satoshi Medium 16px white */
  color: var(--color-white);
}

.post__date svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  isolation: isolate;
  background-color: var(--color-bg-alt);
  background-image: url("../assets/img/footer-bg.jpg");
  background-size: cover;
  background-position: center;
  padding-block: clamp(3rem, 6vw, 5rem) 0;
  overflow: hidden;
}

.site-footer__asterisk {
  position: absolute;
  left: -2%;
  top: 18%;
  width: clamp(120px, 14vw, 240px);
  opacity: 0.08;
  z-index: -1;
  pointer-events: none;
}

.site-footer__camera {
  position: absolute;
  right: 1%;
  /* Figma: the camera sits in the lower-right (below the CTA circle row),
     around the footer columns — not beside the circle. */
  top: 34%;
  width: clamp(120px, 13vw, 210px);
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 61.99rem) {
  .site-footer__camera {
    display: none;
  }
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Figma: title left, circle at the container's right edge. The circle sits at
     the 67% content edge while the camera prop is out near 98%, so no overlap. */
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.cta__title {
  font-family: var(--font-display);
  font-weight: 600; /* Figma: Mango Grotesque Semi Bold 190px @1920 (9.9vw) */
  font-size: clamp(3.5rem, 9.9vw, 200px);
  line-height: 0.9;
  border-bottom: 6px solid var(--color-white);
  padding-bottom: 0.1rem;
}

.cta__circle {
  position: relative;
  /* Figma: arrow sits right above the label as one compact centered group */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(140px, 15vw, 190px);
  height: clamp(140px, 15vw, 190px);
  border-radius: 50%;
  background: var(--color-red); /* red CTA against the gold theme */
  color: var(--color-white);
  text-align: center;
  transition: background var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.cta__circle:hover {
  background: var(--color-red-hover);
  transform: scale(1.04);
}

.cta__arrow {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--color-white);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 0.75rem;
}

.cta__label {
  font-family: var(--font-body); /* Figma: Satoshi Bold */
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  max-width: 8ch;
}

.footer-grid {
  border-top: 1px solid var(--color-border);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-brand .logo__word {
  font-size: 2.5rem; /* Figma: 44px */
}

.footer-brand__text {
  color: var(--color-white);
  font-size: 1.125rem; /* Figma: Satoshi Medium 18px */
  line-height: 1.7;
  max-width: 34ch;
}

/* Big display column heading — "Company Info" (Mango Grotesque Medium 36px) */
.footer-col__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 1.5rem;
}

/* Small eyebrow label — "Location:" / "Contact Us:" (Satoshi Medium 14px) */
.footer-col__eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-white); /* Figma: white eyebrow */
  margin-bottom: 1rem;
}

/* Big display value — address / email / phone (Mango Grotesque Medium 36px) */
.footer-col__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.15;
  color: var(--color-white);
}

.footer-col__list {
  display: grid;
  gap: 0.9rem;
}

.footer-col__list a {
  font-size: 1rem; /* Satoshi Medium 16px */
  color: rgba(255, 255, 255, 0.79);
}

.footer-col__list a,
.footer-col__value a {
  transition: color var(--speed) var(--ease);
}

.footer-col__list a:hover,
.footer-col__value a:hover {
  color: var(--color-accent);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.footer-bottom__copy {
  font-family: var(--font-body);
  font-weight: 400; /* Figma: Satoshi Regular 18px white */
  font-size: 1.125rem;
  color: var(--color-white);
}

.socials {
  display: flex;
  gap: 0.6rem;
}

.socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  color: var(--color-white);
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.socials a svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.socials a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.socials__accent {
  background: var(--color-accent);
  border-color: var(--color-accent) !important;
  color: var(--color-on-accent);
}