* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  scroll-behavior: smooth;
}

:root {
  --main-color: #ffea00;
  --accent-color: #ffea00;
  --text-color: #222;
  --bg:#000;
  --text:#fff;

  --ink:#0b0b0b;
  --muted:#6b7280;
  --accent:#2f6fec;

  --gap: clamp(16px, 2.2vw, 28px);
  --title-size: clamp(32px, 8vw, 120px);
  --stat-size: clamp(12px, 1.2vw, 16px);

  --cardW: 380px;
  --cardH: 260px;

  --radius: 12px;
  --transition: all 0.3s ease;
}

html, body { overflow-x: hidden; }

.social-stack{
  position: fixed;              /* or absolute if inside a section */
  left : clamp(10px, 2vw, 24px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 12px;
  z-index: 50;
  pointer-events: none;         /* only children clickable */
}
.social-stack > * { pointer-events: auto; }

/* circular buttons */
.social__btn,
.social__avatar{
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.social__btn:hover,
.social__avatar:hover{ transform: translateY(-2px) scale(1.04); }

/* icons */
.social__btn i{ font-size: 26px; color: #fff; line-height: 1; }

/* counts/labels under each button */
.social__count, .social__btn__label{
  display: block;
  text-align: center;
  color: #fff;
  font: 500 12px/1.1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  margin-top: 6px;
  opacity: .9;
}

/* avatar with tiny 'Follow' label under it */
.social__avatar{
  overflow: hidden;
  position: relative;
}
.social__avatar img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 50%;
}

/* optional: a small stack of social links like in the video */
.social__links{
  display: grid;
  gap: 8px;
  justify-items: center;
  margin-top: 6px;
}
.social__links a{
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  transition: transform .2s ease;
}
.social__links a:hover{ transform: translateY(-2px) scale(1.05); }
.social__links i{ font-size: 22px; color: #fff; }

/* base button */
.social__btn{
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-decoration: none;        /* << remove underline */
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.social__btn i{ font-size: 26px; line-height: 1; }

/* brand colors */
.is-facebook  i{ color:#1877F2; }
.is-instagram i{ color:#E1306C; } /* you can swap to a gradient if you want */
.is-tiktok    i{ color:#25F4EE; } /* or #FE2C55 for red */
.is-youtube   i{ color:#FF0000; }
.is-linkedin  i{ color:#0A66C2; }

/* subtle hover lift */
.social__btn:hover{ transform: translateY(-2px) scale(1.04); }

/* glow ring + invert on hover (fills circle with brand color, icon turns white) */
.is-facebook:hover  { background:#1877F2; border-color:#1877F2; }
.is-instagram:hover { background:#E1306C; border-color:#E1306C; }
.is-tiktok:hover    { background:#25F4EE; border-color:#25F4EE; color:#000; }
.is-youtube:hover   { background:#FF0000; border-color:#FF0000; }
.is-linkedin:hover  { background:#0A66C2; border-color:#0A66C2; }

.is-facebook:hover i,
.is-instagram:hover i,
.is-youtube:hover i,
.is-linkedin:hover i { color:#fff; }
.is-tiktok:hover i   { color:#000; }

/* optional outer glow */
.is-facebook:hover  { box-shadow: 0 0 24px rgba(24,119,242,.55); }
.is-instagram:hover { box-shadow: 0 0 24px rgba(225,48,108,.55); }
.is-tiktok:hover    { box-shadow: 0 0 24px rgba(37,244,238,.55); }
.is-youtube:hover   { box-shadow: 0 0 24px rgba(255,0,0,.55); }
.is-linkedin:hover  { box-shadow: 0 0 24px rgba(10,102,194,.55); }


/* responsive tweak for small screens */
@media (max-width: 640px){
  .social__btn, .social__avatar{ width: 48px; height: 48px; }
  .social__links a{ width: 40px; height: 40px; }
}

/* === MAIN NAVBAR === */
.navbar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 5%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* === LOGO === */
.nav-logo img {
  height: 60px;
  width: auto;
  transition: transform 0.3s ease;
}
.nav-logo img:hover {
  transform: scale(1.05);
}

/* === NAV LINKS === */
.nav-links {
  list-style: none;
  display: flex;
  gap: clamp(14px, 3vw, 42px);
}

.nav-links li a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.03em;
  position: relative;
  transition: color 0.3s ease;
}

.nav-links li a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: #00bcd4; /* accent color */
  transition: width 0.3s ease;
}

.nav-links li a:hover {
  color: #00bcd4;
}
.nav-links li a:hover::after {
  width: 100%;
}

/* === SOCIAL ICON STACK (RIGHT SIDE) === */
.social-stack {
  position: fixed;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 999;
}

.social__btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  font-size: 1.3rem;
  transition: all 0.3s ease;
}

.social__btn:hover {
  background: #00bcd4;
  color: #fff;
  transform: translateY(-3px) scale(1.05);
}

/* === MOBILE VIEW === */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 5%;
  }

  .nav-links {
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
  }

  .social-stack {
    right: 10px;
    top: auto;
    bottom: 20px;
    flex-direction: row;
    transform: none;
  }
}

/* ==================== Section 1 ==================== */
/* ===== HERO BASE ===== */
.hero{
  min-height: 100vh;
  position: relative;
  color:#fff;
  background:
    linear-gradient(to right, rgba(0,0,0,.32), rgba(0,0,0,.10) 45%, transparent),
    url("Pic/Section\ 1\ background\ pic.jpg");
  background-size: cover;
  background-position: center 55%;
  padding: max(24px, env(safe-area-inset-top))
           max(24px, env(safe-area-inset-right))
           max(28px, env(safe-area-inset-bottom))
           max(28px, env(safe-area-inset-left));
  display:flex;
  align-items:center;
}

.hero__copy{
  width:min(92%,760px);
  margin-left:clamp(12px,5vw,72px);
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

.hero__title{
  margin:0;
  font-family:"Anton", Impact, "Arial Narrow Bold", system-ui, sans-serif;
  font-weight:700;
  letter-spacing:.015em;
  line-height:.95;
  font-size:clamp(36px,6.5vw,96px);
}
.hero__k{ color:#F4C045; }

/* WELCOME now below the title */
.hero__kicker{
  margin:.35em 0 0;                  /* space under the title */
  font:800 clamp(14px,1.8vw,22px)/1 "Oswald", system-ui, sans-serif;
  letter-spacing:.05em;
  text-transform:uppercase;
}

/* Move the logo further left (increase 'right') */
.hero__logo{
  position:absolute;
  top:12vh;
  right:16vw;                        /* was 8vw → more to the left */
  width:clamp(84px,13vw,220px);
  height:auto;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.35));
  pointer-events:none;
}

/* Responsive tweaks */
@media (min-height:900px){
  .hero{ align-items:flex-start; }
  .hero__copy{ margin-top:10vh; }
}
@media (max-width:820px){
  .hero__logo{ top:9vh; right:12vw; width:clamp(72px,18vw,160px); }
}
@media (max-width:560px){
  .hero{ background-position:center 60%; padding-bottom:12svh; }
  .hero__title{ font-size:clamp(32px,10vw,72px); }
  .hero__kicker{ font-size:clamp(12px,2.6vw,18px); }
}

/* ==================== Section 2 ==================== */
/* SECTION BASE */
.overview {
  background: #fff;
  color: #111;
  padding: clamp(24px, 6vw, 72px);
}

/* TWO-COLUMN LAYOUT */
.overview__inner {
  width: min(95%, 1400px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* LEFT TEXT AREA */
.overview__title {
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 400;
  letter-spacing: .04em;
  font-size: clamp(36px, 6vw, 72px);
  line-height: .95;
  margin: 0 0 clamp(10px, 2vw, 20px);
}

.overview__sub {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  margin: 0 0 .8rem;
}

.overview__copy p {
  margin: 0 0 1rem;
  line-height: 1.65;
  max-width: 60ch;
}

.overview__copy a {
  color: #1185a8;
  text-decoration: underline;
  margin-left: .4em;
}

/* RIGHT IMAGE SIDE */
.overview__media {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(16px, 2.8vw, 28px);
  align-items: center; /* centers first image vertically */
  position: relative;
}

/* SHARED PHOTO STYLES */
.photo {
  border-radius: 28px;
  overflow: hidden;
  background: #eee;
  position: relative;
  cursor: pointer;
  transition: transform .5s ease, box-shadow .5s ease;
}

/* Smooth hover zoom-in */
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

.photo:hover img {
  transform: scale(1.06); /* zoom-in on hover */
}

.photo:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  transform: translateY(-6px); /* subtle lift */
}

/* Different height ratios */
.photo--left {
  aspect-ratio: 3 / 4;
  justify-self: end;
}
.photo--right {
  aspect-ratio: 3 / 5;
}

/* Slightly larger corners on wide screens */
@media (min-width: 1300px) {
  .photo { border-radius: 34px; }
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .overview__inner {
    grid-template-columns: 1fr;
  }
  .overview__media {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
@media (max-width: 640px) {
  .overview__media {
    grid-template-columns: 1fr;
  }
  .photo--left,
  .photo--right {
    aspect-ratio: 16 / 11;
  }
}

/* ==================== Section 3 ==================== */
.founder{
  min-height: 100vh;
  background:
    /* darken for text legibility, stronger on the left */
    linear-gradient(rgba(0,0,0,.55)),
    url("Pic/Section\ 3\ background.png") center/cover no-repeat;     /* <-- replace with your city image */
  color: #fff;
  position: relative;
  overflow: visible;          /* allow portrait to pop out */
  perspective: 1000px;
}

/* layout container */
.founder__inner{
  height: 100%;
  min-height: inherit;
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 56px);
}

/* text block on the left */
.founder__copy{
  max-width: 48ch;
  margin-top: clamp(24px, 12vh, 160px);
}

.founder__kicker{
  font: 600 clamp(12px, 1.2vw, 16px)/1.2 ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial;
  letter-spacing: .12em;
  opacity: .9;
  margin: 0 0 .5rem;
}

.founder__name{
  font-family: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(32px, 7vw, 96px);
  line-height: .95;
  letter-spacing: .01em;
  margin: 0 0 .8rem;
  text-transform: uppercase;
}

.founder__copy p{
  font: 400 clamp(14px, 1.2vw, 18px)/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
  margin: 0 0 1rem;
}

/* portrait on the right, anchored to bottom */
.founder__portrait{
  position: absolute;
  right: clamp(12px, 4vw, 48px);
  bottom: 0;
  width: clamp(320px, 40vw, 680px);   /* responsive size */
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.45));
  pointer-events: none;               /* avoid covering text */
  z-index: 1;
  transform-origin: bottom right;
  pointer-events: auto;
  transition: transform .6s ease, filter .4s ease;
  will-change: transform;
}
.founder__portrait:hover{
  transform: scale(1.12) translateZ(24px);
  filter: drop-shadow(0 28px 56px rgba(0,0,0,.55)) brightness(1.05);
}
/* optional: keep text from running under the portrait on very wide screens */
@media (min-width: 1200px){
  .founder__copy{ max-width: 52ch; }
}

/* mobile: stack portrait below and center */
@media (max-width: 840px){
  .founder{
    background:
      linear-gradient(180deg, rgba(0,0,0,.55) 0 35%, rgba(0,0,0,.2) 35% 65%, rgba(0,0,0,0) 80%),
      url("Pic/Section\ 3\ background.png") center/cover no-repeat;
  }
  .founder__portrait{
    position: static;
    display: block;
    margin: clamp(16px, 6vw, 32px) auto 0;
    width: clamp(220px, 60vw, 420px);
    pointer-events: auto;
  }
}
.founder::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);  /* adjust darkness: .25–.55 */
  pointer-events: none;
  z-index: 0;                    /* under text & portrait */
}
.founder__inner,
.founder__copy{
  position: relative;
  z-index: 1;
}

/* ==================== Section 4 ==================== */
/* Section */
/* =============== TIMELINE SECTION =============== */
.timeline {
  min-height: 100vh;                     /* full screen height */
  background: #0e0e0e;
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  display: flex;                         /* center the whole section */
  flex-direction: column;
  justify-content: center;               /* vertical center */
  align-items: center;                   /* horizontal center */

  padding: 60px 20px;                    /* top/bottom padding */
  box-sizing: border-box;
  text-align: center;                    /* center title text */
}

/* =============== HEADER =============== */
.timeline__head {
  width: 100%;
  max-width: 1200px;
  margin-bottom: 60px;                   /* space between title and cards */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#timeline-title {
  flex: 1;
  text-align: left;
  font-size: clamp(32px, 5vw, 54px);     /* ⬅ bigger title */
  font-weight: 800;
  letter-spacing: .02em;
  margin: 0;
  text-transform: uppercase;
}

/* =============== CONTROLS =============== */
.timeline__controls {
  display: flex;
  gap: 14px;
}
.tl-btn {
  border: 1px solid #3a3a3a;
  background: #161616;
  color: #fff;
  padding: 14px 20px;                    /* ⬅ bigger buttons */
  border-radius: 12px;
  cursor: pointer;
  font-size: 18px;
  transition: transform .15s ease, background .15s ease;
}
.tl-btn:hover {
  transform: translateY(-2px);
  background: #1e1e1e;
}

/* =============== VIEWPORT =============== */
.timeline__viewport {
  width: 100%;
  max-width: 1300px;                     /* ⬅ slightly wider area */
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  margin: 0 auto;
}
.timeline__viewport::-webkit-scrollbar { display: none; }

/* =============== TRACK (CARDS CONTAINER) =============== */
.timeline__track {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(320px, 40vw, 420px);  /* ⬅ larger cards */
  column-gap: 32px;
  position: relative;
  padding: 100px 4px 12px;               /* ⬅ lower line + more breathing room */
  margin-top: 20px;
}

/* =============== CENTER LINE =============== */
.timeline__track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 120px;                            /* ⬅ lower horizontal line */
  height: 2px;
  background: linear-gradient(90deg, transparent, #2d2d2d, transparent);
  pointer-events: none;
}

/* =============== CARD =============== */
.tl-item {
  background: #121212;
  border: 1px solid #272727;
  border-radius: 18px;

  min-height: 360px;                     /* ⬅ taller cards */
  max-height: 460px;

  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 14px;

  padding: 28px 22px;
  padding-left: 64px;                    /* gutter for dot */
  position: relative;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.tl-item:hover {
  transform: translateY(-6px);
  border-color: #3a3a3a;
  background: #161616;
}

/* =============== DOT MARKER =============== */
.tl-item::before {
  content: "";
  position: absolute;
  top: 120px;                            /* ⬅ matches line height */
  left: 26px;
  width: 14px;
  height: 14px;
  background: #00d19a;
  border-radius: 50%;
  border: 2px solid #0e0e0e;
  transform: translateY(-50%);
  box-shadow: 0 0 0 2px #1a1a1a;
}

/* =============== TEXT =============== */
.tl-time {
  font-size: 14px;
  letter-spacing: .08em;
  color: #a6a6a6;
  text-transform: uppercase;
}

.tl-title {
  font-size: clamp(18px, 2.8vw, 24px);   /* ⬅ larger title inside card */
  margin: 6px 0 0;
  font-weight: 700;
  text-align: left;
}

.tl-text {
  font-size: 16px;
  line-height: 1.6;
  color: #d6d6d6;
  margin: 0;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 7;                 /* ⬅ show more lines */
  -webkit-box-orient: vertical;
}

/* =============== RESPONSIVE =============== */
@media (max-width: 520px) {
  .timeline {
    padding: 40px 16px;
  }
  .timeline__head {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  #timeline-title {
    text-align: center;
    font-size: clamp(26px, 6vw, 36px);
  }
  .timeline__track {
    grid-auto-columns: 88%;
    padding-top: 80px;
  }
  .timeline__track::before { top: 100px; }
  .tl-item {
    min-height: 300px;
    padding-left: 52px;
  }
}


/* ==================== Section 5 ==================== */
/* 1) Make the whole section exactly one screen tall */
.carousel{
  background:#000;
  height: 100vh;                  /* mobile-safe vh */
  display: grid;
  grid-template-rows: auto 1fr auto 1fr;  /* h2, track, h2, track */
  row-gap: clamp(8px, 2vh, 16px);
  padding-block: clamp(10px, 3vw, 30px);
  overflow: hidden;
}

/* 2) Titles are auto-height (already fine) */
.row-title{
  width:92%; max-width:1400px;
  color:#fff;
  font-size: clamp(20px, 3vw, 36px);
  margin: 0 auto;                  /* keep them inside the 92% width */
}

/* 3) Each track fills its grid row (no fixed margin/height) */
.sfivetop{
  margin: 0;                       /* remove 100px top margin */
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: center;
  padding-block: 0;                /* avoid double vertical padding */
}

/* 4) Cards stretch to the track’s row height */
.card{
  /* keep your width logic as you like; key point is height = 100% */
  flex: 0 0 auto;
  width: clamp(220px, 22vw, 340px);
  height: clamp(180px, 25vw, 260px);
  overflow: hidden;
  border-radius: 16px;
  position: relative;
  background: #111;
  transition: transform 0.6s ease;   /* smooth scaling for the box */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 5) Keep your animations, but use transform for motion */
.Group5t{
  display:flex; align-items:center; justify-content:center; gap:1em;
  padding-right:1em;
  animation: spinright 40s linear infinite;
}
.Group5b{
  display:flex; align-items:center; justify-content:center; gap:1em;
  padding-left:1em;
  animation: spinleft 40s linear infinite;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;             /* optional: makes them look identical */
  transition: transform 0.8s ease, object-fit 0.8s ease;
}
.card:hover img {
  transform: perspective(1000px) scale(1.15) translateZ(20px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  filter: brightness(1.1);
  cursor: pointer;
}
/* .sfivetop:hover .Group5t,
.sfivetop:hover .Group5b {
  animation-play-state: paused;
} */
@keyframes spinright{
  from{ transform: translateX(0); }
  to  { transform: translateX(-100%); }
}
@keyframes spinleft{
  from{ transform: translateX(-100%); }
  to  { transform: translateX(0); }
}

/* 6) Keep the gradient masks (no change needed) */
.sfivetop::before,
.sfivetop::after{
  content:"";
  position:absolute;
  top:0;
  height:100%;
  width:15%;
  z-index:2;
  pointer-events:none;
}
.sfivetop::before{
  left:0;  background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
}
.sfivetop::after{
  right:0; background: linear-gradient(to left,  rgba(0,0,0,1), rgba(0,0,0,0));
}


/* ==================== Section 6 ==================== */
/* SECTION SHELL */
.trophies{
  background:#fff;
  color:#111;
  padding: clamp(24px, 6vw, 64px);
  min-height: 100vh;
}
.trophies__inner{
  width:min(95%, 1400px);  /* wider container */
  margin:0 auto;
}

/* TITLE */
.trophies__title{
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 400;
  font-size: clamp(36px, 6vw, 80px);
  letter-spacing:.04em;
  margin: 0 0 clamp(10px, 2vw, 24px);
}

/* SCROLLING TICKER */
.ticker{
  overflow:hidden;
  white-space:nowrap;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  padding: clamp(6px, 1.2vw, 10px) 0;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.ticker__track{
  display:inline-block;
  font: 900 clamp(20px, 4vw, 52px)/1.05 "Impact", "Anton", system-ui, sans-serif;
  letter-spacing:.02em;
  text-transform:uppercase;
  animation: ticker-move 22s linear infinite;
}
.ticker__track span{ margin-right: 2rem; }

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

@media (prefers-reduced-motion: reduce){
  .ticker__track{ animation: none; }
}

/* GALLERY GRID */
.trophies__grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 2vw, 26px);
  align-items: stretch;
  padding: clamp(14px, 2vw, 28px);
}

/* TILE BASE */
.tile{
  background:#f2f2f2;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  transition: transform .35s ease, box-shadow .35s ease;
  max-height: 480px; /* bigger */
}
.tile img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transition: transform .6s ease;
}

/* Hover animation */
.tile:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,.20);
}
.tile:hover img{
  transform: scale(1.06); /* stronger zoom */
}

/* Tall main image */
.tile--tall{
  grid-column: span 5;
  grid-row: span 2;
  aspect-ratio: 3 / 4.8;   /* taller */
  max-height: 580px;       /* much larger */
}

/* Regular tiles */
.trophies__grid .tile:not(.tile--tall){
  grid-column: span 7 / span 7;
  aspect-ratio: 4 / 3.2;   /* slightly taller ratio */
}

/* Desktop layout */
@media (min-width: 900px){
  .trophies__grid .tile:not(.tile--tall){ grid-column: span 3; }
}

/* Tablet layout */
@media (max-width: 899px) and (min-width: 600px){
  .tile--tall{ grid-column: span 6; }
  .trophies__grid .tile:not(.tile--tall){ grid-column: span 6; }
}

/* Mobile layout */
@media (max-width: 599px){
  .tile--tall{ grid-column: 1 / -1; }
  .trophies__grid .tile:not(.tile--tall){ grid-column: 1 / -1; }
  .tile--tall{ aspect-ratio: 3 / 4; }
}



/* ==================== Section 7 ==================== */
/* SECTION SHELL */
.intl-hero{
  position: relative;
  min-height: 100vh;
  background: url("Pic/Cambodia\ airport.png") center/cover no-repeat; /* ← replace */
  color: #fff;
  overflow: hidden;
}

/* CONTENT CONTAINER */
.intl-hero__inner{
  display: grid;
  align-content: start;   /* was center */
  justify-items: start;   /* left-align the grid items */
  padding-top: clamp(24px, 10vh, 140px);
  padding-left: clamp(16px, 6vw, 120px);
}

/* TITLE */
.intl-hero__title{
  font-family: "Special Elite", ui-serif, Georgia, serif;
  font-size: clamp(32px, 8vw, 96px);
  line-height: .95;
  letter-spacing: .02em;
  margin: 0 0 .3em 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}

/* LEAD + SUBTEXT */
.intl-hero__lead{
  font: 400 clamp(14px, 1.4vw, 22px)/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial;
  max-width: 75ch;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.intl-hero__sub{
  font: 400 clamp(13px, 1.2vw, 18px)/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial;
  opacity: .95;
  max-width: 65ch;
  margin: .6em 0 0 0;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}

/* OPTIONAL: make text sit left with extra breathing room on big screens */
@media (min-width: 1200px){
  .intl-hero__inner{ padding-left: clamp(64px, 10vw, 160px); }
}

/* OPTIONAL: fixed/parallax vibe (comment out if you don’t want it) */
@media (min-width: 900px){
  .intl-hero{ background-attachment: fixed; }
}

/* ==================== Section 8 ==================== */
.company {
  padding-block: clamp(36px, 7vw, 96px);
  --logoH: clamp(180px, 20vw, 260px); /* tweak for bigger/smaller logos */
}

#company-title {
  text-align: left;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: .04em;
  margin-bottom: clamp(10px, 2vw, 20px);
  margin-left: clamp(60px, 8vw, 160px); /* ⬅️ increased left spacing */
  color: #111;
  text-transform: uppercase;
  position: relative;
}
/* subtle divider under title */


/* horizontal logo layout */
.company__logos {
  list-style: none;
  display: flex;                     /* horizontal alignment */
  justify-content: center;           /* center logos */
  align-items: center;               /* align vertically */
  gap: clamp(40px, 5vw, 100px);      /* space between logos */
  padding: 0;
  margin: clamp(24px, 3vw, 40px) auto 0;
  flex-wrap: nowrap;                 /* one line only */
  overflow-x: auto;                  /* allows side scroll on small screens */
  scrollbar-width: none;             /* hide scrollbar (Firefox) */
}
.company__logos::-webkit-scrollbar { display: none; } /* hide scrollbar Chrome */

/* logo container */
.company__item {
  flex: 0 0 auto;                    /* prevent resizing */
  height: var(--logoH);              /* equal height for all */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 1vw, 14px);
}

/* logo images */
.company__item > img {
  height: 100% !important;           /* make all same visual height */
  width: auto !important;
  object-fit: contain;
  max-width: clamp(160px, 26vw, 340px);
  display: block;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease, opacity .25s ease;
  will-change: transform;
}

/* hover: elegant lift & glow */
.company__item > img:hover {
  transform: translateY(-4px) scale(1.04);
  filter: contrast(1.15) saturate(1.15);
  ;
}
/* dim siblings slightly when one is hovered */
.company__logos:hover .company__item > img {
  opacity: .82;
}
.company__logos .company__item > img:hover {
  opacity: 1;
}
/* responsive: allow gentle wrapping if very narrow */
@media (max-width: 900px) {
  .company__logos {
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(24px, 5vw, 60px);
  }
}


/* ==================== Section 9 ==================== */
.re-hero{
  min-height: 100vh;
  position: relative;
  color: #fff;
  font-family: 'Times New Roman', Times, serif;
  /* left-side dark gradient + the image */
  background: url("Pic/Section\ 9\ background.jpg") center bottom / cover no-repeat; /* <-- replace */
}

/* top-right heading */
.re-title{
  position: absolute;
  top: clamp(24px, 6vw, 64px);
  right: clamp(28px, 8vw, 96px);
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: 0.04em;
  opacity: 0.95;
}

/* left column paragraph block */
.re-copy{
  max-width: clamp(420px, 36vw, 560px);
  padding: clamp(24px, 7vw, 96px);
  padding-right: clamp(20px, 4vw, 48px);
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.9;
  text-align: justify;
  text-justify: inter-word;
  opacity: 0.98;
}

/* ==================== Section 10 ==================== */
/* Section shell */
.estate{
  min-height: 100vh;
  background:#000;
  color:#eaeaea;
  padding: clamp(28px, 6vw, 64px);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Big left headline */
.estate__kicker{
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 400;
  letter-spacing:.04em;
  line-height: .88;
  font-size: clamp(40px, 8vw, 92px);
  margin: 0 0 clamp(20px, 3vw, 36px);
}

/* Grid of cards */
.estate__grid{
  width: min(92%, 1400px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
}

/* Card */
.prop{
  background:#e9e9e9;
  color:#111;
  border: 1px solid #cfcfcf;
  box-shadow: 0 6px 0 rgba(0,0,0,.85);
  display: grid;
  grid-template-rows: auto 1fr;
  transition: transform .25s ease, box-shadow .25s ease;
}
.prop:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
}

/* Image with inner border and fixed ratio */
.prop__media{
  padding: clamp(10px, 1.5vw, 16px);
}
.prop__media img{
  width: 100%;
  aspect-ratio: 4 / 3;       /* same height across cards */
  object-fit: cover;
  display: block;
  border: 1px solid #bdbdbd;
}

/* Text area */
.prop__body{
  padding: clamp(12px, 1.7vw, 18px) clamp(14px, 2vw, 22px) clamp(18px, 2.2vw, 26px);
}
.prop__title{
  font-size: clamp(18px, 1.6vw, 22px);
  margin: .2em 0 .25em;
  color:#3a3a3a;
  font-weight: 600;
}
.prop__sub{
  margin: 0 0 .9em;
  font-size: clamp(12px, 1.05vw, 14px);
  color:#6b6b6b;
}

/* Prices row */
.prop__meta{
  margin-top: .6em;
  display: flex;
  gap: clamp(10px, 1.6vw, 18px);
  align-items: baseline;
  flex-wrap: wrap;
  color:#4a4a4a;
  font-size: clamp(13px, 1.15vw, 15px);
}
.prop__meta b{ color:#000; font-weight: 700; }
.prop__meta-sep{
  width: 1px; height: 1em;
  background: #b8b8b8;
}

/* Responsive: stack to 1–2 columns */
@media (max-width: 1050px){
  .estate__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .estate__grid{ grid-template-columns: 1fr; }
  .estate__kicker{ font-size: clamp(40px, 14vw, 72px); }
}

/* ==================== Section 11 ==================== */
.sector{
  position: relative;
  min-height: 100vh;             /* make it tall like a hero */
  color:#fff;
  overflow:hidden;


  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: justify;
}

/* Background photo + top-left darkening (for white text) */
.sector--industrial{
  background:
    radial-gradient(1200px 500px at 22% 15%, rgba(0,0,0,.55), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.35), transparent 55%),
    url("Pic/Section\ 11\ background.jpg");  /* <-- replace with your image */
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Small title at top-right (typewriter vibe) */
.sector__heading{
  position: absolute;
  top: clamp(16px, 4vw, 36px);
  right: clamp(16px, 5vw, 64px);
  font-family: "Special Elite", ui-serif, Georgia, serif;
  font-weight: 400;
  letter-spacing: .08em;
  font-size: clamp(18px, 2vw, 28px);
}

/* Left paragraph (mono style, like the screenshot) */
.sector__copy{
  max-width: 56ch;
  margin-left: clamp(16px, 6vw, 64px);
  margin-top: clamp(18px, 8vw, 60px);
  font-family: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.65;
  text-shadow: 0 1px 6px rgba(0,0,0,.35); /* extra readability */
}

/* ==================== Section 12 ==================== */
/* section shell */
.onehero{


  min-height: 100vh;
  background:#000;
  color:#fff;
  display: grid;
  grid-template-columns: minmax(280px, 40%) 1fr; /* left photo / right content */
  gap: var(--gap);
}

/* LEFT: tall mono image with subtle vignette */
.onehero__left{
  background:
    linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.25) 40%, rgba(0,0,0,0)),
    url("Pic/Shipping\ containers\ with\ birds.jpg") center/cover no-repeat;   /* <-- replace */
  min-height: 40vh;
  border-right: 1px solid rgba(255,255,255,.08);
}

/* RIGHT: content stack */
.onehero__content{
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: center;
  padding: clamp(16px, 4vw, 48px);
  gap: var(--gap);
}

/* Headline */
.onehero__title{
  font-family: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: var(--title-size);
  line-height: .9;
  letter-spacing: .02em;
  margin: 0;
}
.onehero__title .dot{ margin-left:.06em; }

/* Small stat line on the right of the title area feel */
.onehero__stat{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: var(--stat-size);
  opacity: .9;
  max-width: 36ch;
}

/* Cards row */
.onehero__cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  align-items: end;
}

/* Tall image cards */
.card12{
  aspect-ratio: 4 / 5;                 /* tall look */
  border-radius: 10px;
  overflow: hidden;
  background:#111;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  margin: 0;                            /* remove figure default margin */
}
.card12 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.card12:hover img{ transform: scale(1.05); }

/* Responsive: stack and allow horizontal scroll for cards on small screens */
@media (max-width: 900px){
  .onehero{ grid-template-columns: 1fr; }
  .onehero__left{ min-height: 36vh; }
  .onehero__cards{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 70%;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .onehero__cards::-webkit-scrollbar{ display:none; }
}


/* ==================== Section 13 ==================== */
.energy{
  min-height: 100vh;
  background: url("Pic/Section 13 background.jpg") center/cover no-repeat;
  position: relative;
  color:#fff;
}

/* don't create a new positioning context here */
.energy__wrap{ padding:0; position:static; display:block; }

/* your card box */
.energy__card{
  position: absolute;
  top: 50%;
  left: clamp(18px, 5vw, 40px);
  transform: translateY(-50%);
  width: clamp(360px, 50vw, 720px);
  aspect-ratio: 16 / 10;
  border-radius: 30px;
  overflow: hidden;
  background:#000;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  margin: 0;            /* ← remove default figure margin */
}

/* make the image fill the card */
.energy__card > img{
  position: absolute;
  inset: 0;             /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;       /* remove inline gap */
  z-index: 0;
}

/* caption sits on top */
.energy__tag{
  position: absolute;
  top: clamp(10px, 1.8vw, 18px);
  left: clamp(14px, 2.2vw, 24px);
  font-family: "Special Elite", ui-serif, Georgia, serif;
  font-size: clamp(16px, 2.2vw, 26px);
  letter-spacing: .06em;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
  z-index: 1;           /* above the image */
}

/* ==================== Section 14 ==================== */
/* SECTION: keep vertical centering, move content to the LEFT */
.s14{
  min-height: 100vh;
  background: url(Pic/section14\ background.png);
  color:#fff;

  display: flex;
  align-items: center;        /* vertical center */
  justify-content: flex-end;/* ⟵ push content to the left */

  /* gutters */
  padding: clamp(20px, 4vw, 40px)
           clamp(20px, 5vw, 60px)
           clamp(28px, 6vw, 72px);
  padding-left:  max(clamp(20px, 5vw, 60px), env(safe-area-inset-left));
  padding-right: max(clamp(20px, 5vw, 60px), env(safe-area-inset-right));
  padding-bottom:max(clamp(28px, 6vw, 72px), env(safe-area-inset-bottom));
}

/* WRAP: two columns now (card | image), left-aligned */
.s14__wrap{
  --paneH: clamp(420px, 72svh, 820px);

  /* left align the block inside the section (no auto-centering) */
  width: min(1100px, 92%);    /* tweak 900–1300px to taste */
  margin: 0;                  /* ⟵ no auto centering */

  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(380px, 1fr); /* card | image */
  align-items: center;        /* vertical align within row */
  justify-content: start;     /* ⟵ align grid to the left */
  gap: clamp(16px, 3vw, 40px);
}

/* Right image only */
.s14__pane{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.s14__pane img{
  height: var(--paneH);
  width: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  transition: transform .35s ease;
}
.s14__pane::after{
  content:"";
  position:absolute; inset:0;
  
  pointer-events:none;
}
.s14__pane img:hover{ transform: scale(1.02); }

/* Center column (glass box) */
.s14__center{ text-align: center; }
#s14-title{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: .12em;
  margin: 0 0 clamp(10px, 1.8vw, 16px);
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.s14__card{
  margin-inline: auto;
  padding: clamp(14px, 2.1vw, 22px);
  line-height: 1.55;
  text-align: justify;

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(14px, 1.1vw, 18px);

  background: rgba(0,0,0,.58);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  color: #f3f3f3;
}
.s14__card p{ margin: 0 0 .9em; }
.s14__card a{ color:#cfe3ff; text-decoration: underline; }

/* Mobile: stack card above image */
@media (max-width: 980px){
  .s14__wrap{
    width: 100%;
    grid-template-columns: 1fr;
    gap: clamp(12px, 3vw, 20px);
  }
  .s14__pane img{
    height: clamp(260px, 46svh, 520px);
  }
}

/* ==================== Section 15 ==================== */
.agriculture {
  min-height: 100vh; /* full screen */
  color: #fff;
  background:
    url("Pic/Farm.jpg"); /* Replace with your actual image path */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start; /* vertically center text */
  justify-content: flex-start; /* text stays on left side */
  padding: clamp(20px, 6vw, 80px);
}

.agriculture__content {
  max-width: 600px;
  font-family: "Courier New", monospace;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.agriculture__text {
  font-size: clamp(14px, 1.2vw, 18px);
  margin-bottom: clamp(20px, 3vw, 40px);
  text-align: justify;
}

.agriculture__title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  font-family: "Georgia", serif;
}

/* ==================== Section 16 ==================== */
.agri-triple {
  background: #000;
  color: #fff;
  min-height: 100vh; /* full screen */
  display: flex;
  align-items: center;
  padding: clamp(20px, 4vw, 40px);
}

.agri-triple__inner {
  width: min(92%, 1600px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr minmax(320px, 520px) 0.9fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: stretch;
  height: 100%;
}

/* LEFT IMAGE */
.agri-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(255,255,255,.1);
}

/* MIDDLE TEXT (uses left part of greens image) */
.agri-note {
  position: relative;
  padding: clamp(14px, 2vw, 24px);
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url("Pic/vegetable.jpg");
  background-size: 300% 100%;       /* wider span for smoother continuation */
  background-position: 0% center;   /* start from the left side */
  border: 1px solid rgba(255,255,255,.12);
  overflow: visible;
}

/* TEXT STYLE */
.agri-list {
  margin: 0;
  padding-left: 1ch;
  font-family: "Courier New", monospace;
  line-height: 1.6;
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: .03em;
  list-style: decimal;
}
.agri-list li { margin: 0 0 .5em 0; }
.agri-list li::marker { content: counter(list-item) ") "; }

/* RIGHT SIDE (continuation of greens) */
.agri-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 22px);
  height: 100%;
}

.agri-slice {
  background-image: url("Pic/vegetable.jpg");
  background-repeat: no-repeat;
  background-size: 300% 100%;       /* same scaling as .agri-note */
}
.agri-slice--left  { background-position: 50% center; } /* continuation middle */
.agri-slice--right { background-position: 100% center; } /* far right end */

/* RESPONSIVE */
@media (max-width: 900px) {
  .agri-triple {
    min-height: auto;
  }
  .agri-triple__inner {
    grid-template-columns: 1fr;
    height: auto;
  }
  .agri-split {
    grid-template-columns: 1fr 1fr;
    height: 50vh;
  }
}


/* ==================== Section 17 ==================== */
.media-hero{
  position: relative;
  min-height: 100vh;                       /* tall hero */
  color:#fff;
  background: url("Pic/media.jpg") center/cover no-repeat; /* <-- replace */
}

/* Title (top-center, typewriter style) */
.media-hero__title{
  position: absolute;
  top: clamp(14px, 3vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  font-family: "Special Elite", ui-serif, Georgia, serif;
  letter-spacing: .08em;
  font-size: clamp(18px, 2.2vw, 28px);
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* Right translucent text panel */
.media-hero__panel{
  position: absolute;
  top: clamp(70px, 12vh, 120px);
  right: clamp(10px, 4vw, 40px);
  width: min(560px, 45vw);
  background: rgba(180,180,180,.25);      /* light grey glass */
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px;
  padding: clamp(12px, 2vw, 18px);
  backdrop-filter: blur(2px);              /* subtle, safe to drop if unsupported */
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font-family: "Source Code Pro", ui-monospace, Menlo, monospace;
  font-size: clamp(13px, 1.35vw, 16px);
  line-height: 1.65;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* Responsive */
@media (max-width: 820px){
  .media-hero{ min-height: 78vh; }
  .media-hero__panel{
    position: static;
    margin: 18vh 1rem 1rem;               /* drops under the title */
    width: auto;
  }
}

/* ==================== Section 18 ==================== */
/* MAIN SECTION — centers everything */
.news-media {
  background: #000;
  color: #fff;
  font-family: "Courier New", monospace;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

/* GRID WRAPPER (LEFT COLUMN + TOP ROW) */
.nm {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  align-items: stretch;
  width: min(92%, 1800px);
  margin: 0 auto;
  padding: clamp(10px, 2vw, 20px);
}

/* LEFT COLUMN TEXT */
.nm-left {
  background: #000;
  border-right: 1px solid rgba(255,255,255,0.25);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(14px, 1.8vw, 20px);
  height: 100%;
}

.nm-title,
.nm-list,
.nm-top,
.nm-bottom {
  margin: 0;
  padding: 0;
}

.nm-title {
  font-size: clamp(26px, 2.5vw, 40px);
  letter-spacing: .04em;
  line-height: 1;
  font-weight: 700;
}

.nm-list {
  font-size: clamp(14px, 1.2vw, 18px);
  text-transform: uppercase;
  line-height: 1.3;
}

/* TOP ROW (NEWS IMAGES) */
.top-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px;
  height: 40vh;   /* 👈 same height as bottom row */
}

.cell {
  position: relative;
  overflow: hidden;
  background: #111;
}

.cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.cell:hover img {
  transform: scale(1.05);
}

/* --- BOTTOM ROW SCROLLER --- */
.nm-bottom-scroll {
  position: relative;
  width: 100vw;
  overflow: hidden;
  margin-top: 20px;
  height: 40vh;    /* 👈 equal height to top row */
}

/* SCROLL TRACK */
.nm-bottom-track {
  display: flex;
  gap: 14px;                  /* 👈 space between images */
  width: max-content;
  animation: slideLeft 25s linear infinite;
}

.nm-bottom-scroll .cell {
  flex: 0 0 25vw;             /* each image takes 25% of viewport width */
  height: 100%;
}

.nm-bottom-scroll img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* SCROLL ANIMATION */
@keyframes slideLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Optional hover pause */
.nm-bottom-scroll:hover .nm-bottom-track {
  animation-play-state: paused;
}

/* Wide screen fix */
@media (min-width: 1900px) {
  .nm {
    max-width: none;
  }
}

/* ==================== Section 19 ==================== */
.deliverables{
  background:#fff; color:var(--ink);
  padding: clamp(24px, 6vw, 60px) 1.25rem;
}

.dv-wrap{
  max-width: 1200px;
  margin-inline: auto;
}

/* Title + intro (typewriter vibe) */
.dv-title{
  font-family:"Playfair Display", serif;
  font-weight:400;
  letter-spacing:.06em;
  font-size: clamp(32px, 6vw, 56px);
  margin-bottom:.25rem;
}
.dv-intro{
  max-width: 70ch;
  font-family:"Special Elite", ui-serif, Georgia, serif;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height:1.7;
  color:#111;
  opacity:.9;
}

/* Stats row */
.dv-stats{
  margin-top: clamp(36px, 8vw, 90px);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2.5vw, 28px);
  align-items:start;
  text-align:center;
}

/* Individual stat */
.dv-stat{
  position:relative;
  padding-inline: clamp(10px, 3vw, 40px);
}
.dv-stat:not(:last-child)::after{
  content:"";
  position:absolute;
  top:0; bottom:0; right:-1px;
  border-right: 2px dotted color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:.75;
}

.dv-label{
  font-family:"Special Elite", ui-serif, Georgia, serif;
  font-size: clamp(12px, 1.3vw, 16px);
  letter-spacing:.12em;
  margin-bottom: .35rem;
  color: var(--muted);
}

.dv-value{
  font-family: Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 10vw, 96px);
  line-height: 1;
  margin-bottom: clamp(14px, 2.5vw, 22px);
}

.dv-note{
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.6;
  max-width: 36ch;
  margin-inline: auto;
  font-size: clamp(14px, 1.6vw, 18px);
}

/* ==================== Section 20 ==================== */
.interviews{
  background:#000;
  color:#fff;
  padding: clamp(24px, 6vw, 80px);
  font-family: Inter, system-ui, sans-serif;
  min-height: calc(100svh - var(--nav-h));
}
.iv-wrap{
  max-width: 1280px;
  margin-inline: auto;
  display:grid;
  grid-template-columns: 260px 1fr;  /* left column | videos */
  gap: clamp(32px, 6vw, 80px);
  align-items:start;
}

/* Left labels */
.iv-title{
  font-family:"Special Elite", ui-serif, Georgia, serif;
  font-weight:400;
  letter-spacing:.08em;
  font-size: clamp(28px, 4vw, 44px);
  margin-bottom: clamp(12px, 2vw, 20px);
}
.iv-tags{
  list-style:none;
  font-family:"Special Elite", ui-serif, Georgia, serif;
  line-height:1.25;
  font-size: clamp(12px, 1.6vw, 16px);
  opacity:.9;
}
.iv-tags li{ margin:.2rem 0; }

/* Video grid */
.iv-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(420px, 1fr));
  gap: clamp(32px, 6vw, 64px);
  margin-top: clamp(24px, 6vw, 60px);
}

/* Card look like screenshot: white frame + drop shadow */
.video-card{
  position: relative;
  background:#fff;
  border:1px solid #e6e6e6;
  padding: clamp(10px, 1.8vw, 16px);
  box-shadow: 0 20px 28px rgba(0,0,0,.35);
}

/* 16:9 responsive iframe */
.video-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:#222;
  box-shadow: inset 0 0 0 1px #dcdcdc; /* thin inner line */
}
.video-frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; display:block;
}

/* ==================== Section 21 ==================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* MAIN SECTION */
.bottom-menu {
  background-color: #3a3a3a;
  color: #e9e9e9;
  padding: 28px 5vw 40px;  /* space from left & right sides */
  font-family: Arial, Helvetica, sans-serif;
}

/* HEADER: now just the logo */
.menu-header {
  border-bottom: 1px solid #565656;
  padding-bottom: 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
}

.menu-logo img {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.4;
}

/* LINK GRID */
.menu-links {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 48px;
  margin-top: 10px;
}

.menu-links .col h3 {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
}

.menu-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-links li {
  margin: 6px 0;
}

.menu-links a {
  color: #e6e6e6;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.menu-links a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* RESPONSIVE */
@media (max-width: 980px) {
  .menu-links {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .menu-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  .menu-links {
    grid-template-columns: 1fr;
  }

  .menu-header {
    justify-content: center;
  }
}

/* ==================== Section 22 ==================== */
/* ==================== Section 23 ==================== */
/* ==================== Section 24 ==================== */
/* ==================== Section 25 ==================== */
/* ==================== Section 26 ==================== */
/* ==================== Section 27 ==================== */