/* ================================================
   NEXGEN BROS — Global Variables & Reset
================================================ */

:root {
  /* ── Brand gradients ── */
  --gradient-brand: linear-gradient(
    82deg, 
    #C82127 27.19%, #C1212B 32.74%, #AE2338 41.99%, 
    #8F264E 51.24%, #632B6C 62.35%, #2E3191 74.37%, #26A9E0 95.65%
  );
  
  --gradient-brand-diagonal: linear-gradient(
    154deg, 
    #C82127 9.43%, #C1212B 17.93%, #AE2338 29.61%, 
    #8F264E 43.41%, #632B6C 59.34%, #2E3191 76.33%, #26A9E0 100.75%
  );

  --gradient-brand-rev: linear-gradient(
    168.12deg, 
    #C82127 9.43%, #C1212B 17.93%, #AE2338 29.61%, 
    #8F264E 43.41%, #632B6C 59.34%, #2E3191 76.33%, #26A9E0 123.75%
  );

  /* ── Neutral palette ── */
  --white:       #ffffff;
  --raisin-25:   #fafafa;
  --raisin-50:   #E4E4E2;
  --raisin-300:  #8C8A84;
  --raisin-400:  #6E6C66;
  --raisin-600:  #3A3833;
  --raisin-700:  #24221E;
  --raisin-800:  #181613;
  --moss-25:     #F4F5EF;
  --moss-50:     #E6E8DC;
  --moss-100:    #CDD2B8;
  --moss-600:    #4A4F36;
  --cyan:        #0cebff;
  --cyan-rgb: 12, 235, 255;
  --success-text: #0a8a6a;
  --error-text: #C82127;
  --success-bg-rgb: 12, 235, 255;
  --error-bg-rgb: 200, 33, 39;
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;

  /* ── Typography ── */
  --f-bold:       "FS Magistral-Bold", Helvetica, sans-serif;
  --f-xbold-it:   "FS Magistral-ExtraBold Italic", Helvetica, sans-serif;
  --f-medium:     "FS Magistral-Medium", Helvetica, sans-serif;
  --f-medium-it:  "FS Magistral-MediumItalic", Helvetica, sans-serif;
  --f-book:       "FS Magistral-Book", Helvetica, sans-serif;

  /* ── Breakpoints (reference values, used in @media queries) ──
     xs: 360 | sm: 480 | md: 768 | lg: 1024 | xl: 1280 | 2xl: 1440 | base: 1728+ */

  /* ── Layout ── */
  --page-w:    1728px;
  --gutter:    120px;                          /* legacy, kept for back-compat */
  --gutter-x:  clamp(20px, 5vw, 120px);        /* fluid outer side padding */
  --gutter-in: clamp(20px, 4vw, 72px);         /* fluid inner side padding */
  --section-y: clamp(60px, 8vw, 100px);        /* fluid section vertical padding */
  --container: min(100% - var(--gutter-x) * 2, var(--page-w));

  /* ── Fluid typography scale ── */
  --fs-h1:    clamp(36px, 5.5vw, 80px);
  --fs-h2:    clamp(28px, 4vw,   56px);
  --fs-h3:    clamp(22px, 2.5vw, 36px);
  --fs-h4:    clamp(18px, 1.6vw, 24px);
  --fs-body:  clamp(15px, 1.1vw, 18px);
  --fs-small: clamp(13px, 0.9vw, 14px);

  /* ── Radii ── */
  --r-pill: 999px;
  --r-card: 40px;
  --r-icon: 20px;

  /* ── Glass shadows ── */
  --shadow-glass:
    2.1px 2.2px 0.5px -1.8px rgba(var(--white-rgb), 0.9) 
    inset, -2px -2.2px 0.5px -1.8px rgba(var(--white-rgb), 0.9) 
    inset, 1px 2px 2px 0px rgba(var(--black-rgb), 0.1) inset;

  --shadow-glass-sm: 
    2.1px 2.2px 0.5px -1.8px rgba(var(--white-rgb), 0.9) 
    inset, -2px -2.2px 0.5px -1.8px rgba(var(--white-rgb), 0.9) 
    inset, 2px 3px 2px 0px rgba(var(--black-rgb), 0) inset;
    
  --shadow-nav-pill:
    inset 0  1px 0  rgba(var(--white-rgb),.40),
    inset 1px 0  0  rgba(var(--white-rgb),.32),
    inset 0 -1px 5px rgba(var(--black-rgb),.20),
    inset -1px 0 5px rgba(var(--black-rgb),.16);
}

/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  font-family: var(--f-book);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  /* overflow-x: hidden; */
}

body {
  background: var(--white);
  color: var(--raisin-800);
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

ul {
  list-style: disc;
}

address {
  font-style: normal;
}

blockquote,
dl,
figure,
form,
ol,
p,
pre,
ul {
    margin-bottom: 1.3em
}

li {
    margin-bottom: .6em;
}

.article-body ul li {
  margin-left: 1.3em;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: .5em;
  margin-top: 0;
  text-rendering: optimizeSpeed;
  width: 100%;
  font-family: var(--f-bold);
  letter-spacing: 0;
  line-height: normal;
  color: var(--raisin-800);
}
/* ── Visually hidden ── */
.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;
}

/* ================================================
   NEXGEN BROS — Shared UI Components
================================================ */

main {
  max-width: 100vw;
  /* overflow-x: hidden; */
}
/* ══════════════════════════════════════════════
   1. BADGE
══════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--gradient-brand);
  box-shadow: var(--shadow-glass-sm);
}

.badge__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background-color: rgba(var(--black-rgb), 0.004);
  backdrop-filter: blur(17px) saturate(105%) hue-rotate(-3.8deg);
  -webkit-backdrop-filter: blur(17px) saturate(105%) hue-rotate(-3.8deg);
  box-shadow: var(--shadow-glass-sm);
  font-family: var(--f-bold);
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 1px 2px rgba(var(--black-rgb), 0.25);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.badge--cyan {
  background: rgba(var(--cyan-rgb), 0.50);
}

.badge--cyan .badge__label {
  font-family: var(--f-medium);
  font-weight: 500;
  color: var(--raisin-800);
  text-shadow: none;
}


/* ══════════════════════════════════════════════
   2. DATE PILL
══════════════════════════════════════════════ */

.date-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--gradient-brand);
  box-shadow: var(--shadow-glass-sm);
}

.date-pill__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background-color: rgba(var(--black-rgb), 0.004);
  font-family: var(--f-bold);
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 1px 2px rgba(var(--black-rgb), 0.25);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

/* Small — news card corners (16 px) */
.date-pill--sm .date-pill__label {
  padding: 12px 17px;
  font-size: 16px;
}

/* Medium — article headers (18 px) */
.date-pill--md .date-pill__label {
  padding: 6px 21px 10px;
  font-size: 18px;
}

/* Large — featured articles (30 px) */
.date-pill--lg .date-pill__label {
  padding: 12px 32px;
  font-size: 30px;
}


/* ══════════════════════════════════════════════
   3. GRADIENT BUTTON
══════════════════════════════════════════════ */

.btn-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--gradient-brand);
  box-shadow: var(--shadow-glass-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}

.btn-gradient:hover {
  opacity: 0.88;
}

.btn-gradient__label {
  font-family: var(--f-bold);
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 1px 2px rgba(var(--black-rgb), 0.25);
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════
   4. TAG
   Solid-background pill tag / chip.
══════════════════════════════════════════════ */

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 60px;
  font-family: var(--f-bold);
  font-weight: 700;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.tag--moss {
  background-color: var(--moss-25);
  color: var(--raisin-700);
}

.tag--white {
  background-color: var(--white);
  color: var(--raisin-700);
}


/* ══════════════════════════════════════════════
   5. BACKGROUND GRID
══════════════════════════════════════════════ */

.bg-grid {
  background-image:
    linear-gradient(rgba(var(--black-rgb), 0.05) 0.8px, transparent 0.8px),
    linear-gradient(90deg, rgba(var(--black-rgb), 0.05) 0.8px, transparent 0.8px);
  background-size: 40px 40px;
}


/* ══════════════════════════════════════════════
   6. GRADIENT TEXT
══════════════════════════════════════════════ */

.text-gradient {
  background: var(--gradient-brand-diagonal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ══════════════════════════════════════════════
   7. GLASS FROSTED
══════════════════════════════════════════════ */

.glass {
  background-color: rgba(var(--black-rgb), 0.004);
  backdrop-filter: blur(17px) saturate(105%) hue-rotate(-3.8deg);
  -webkit-backdrop-filter: blur(17px) saturate(105%) hue-rotate(-3.8deg);
  box-shadow: var(--shadow-glass);
}

.glass--light {
  backdrop-filter: blur(2px) brightness(110%);
  -webkit-backdrop-filter: blur(2px) brightness(110%);
  box-shadow: var(--shadow-glass-sm);
}

/* ══════════════════════════════════════════════
   8. STRETCHED LINK
══════════════════════════════════════════════ */

.stretched-link {
  color: inherit;
  text-decoration: none;
}

.stretched-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
}

/* ================================================
   NEXGEN BROS — Header / Navigation
================================================ */

/* ── Wrapper ── */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 100;
  max-width: 100vw;
}

/* ── Inner row ── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px var(--gutter-x);
  width: 100%;
}
.nav__menu-container {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    position: relative;
    flex: 0 0 auto;
}
/* ── Logo ── */
.nav__logo {
  display: block;
  flex-shrink: 0;
  position: relative;
}
.nav__logo::before {
  content: '';
  position: absolute;
  inset: -8px -16px;
  border-radius: var(--r-pill);
  background-color: rgba(var(--white-rgb),.40);
  backdrop-filter: blur(8.5px);
  -webkit-backdrop-filter: blur(8.5px);
  z-index: 0;
  box-shadow: var(--shadow-glass-sm);
}
.nav__logo-img {
  width: 314px;
  height: 60px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* ── Menu pill — liquid glass ── */
.nav__menu {
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px;
  background: rgba(var(--white-rgb), 0.3);
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  box-shadow: var(--shadow-glass);
  overflow: hidden;
}

/* Liquid specular edge highlight */
.nav__menu::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(var(--white-rgb), 0.08);
  box-shadow:
    inset -10px -8px 0px -11px rgba(var(--white-rgb), 1),
    inset 0px -9px 0px -8px rgba(var(--white-rgb), 1);
  opacity: 0.6;
  z-index: 0;
  filter: blur(1px) drop-shadow(10px 4px 6px rgba(0, 0, 0, 0.25)) brightness(115%);
  pointer-events: none;
}
.nav__menu > * {
  position: relative;
  z-index: 1;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav__list li {
  margin-bottom: 0;
}
.nav__link {
  display: block;
  padding: 16px 24px;
  font-family: var(--f-bold);
  font-size: 14px;
  font-weight: 700;
  color: var(--raisin-800);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
  border: 1px solid transparent;
}
.nav__link:hover {
  background: rgba(var(--cyan-rgb), 0.18);
  box-shadow:
    0 4px 16px rgba(31, 38, 135, 0.10),
    inset 0 1px 0 rgba(var(--white-rgb), 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

/* Active item */
.nav__item--active .nav__link {
  background: rgba(var(--cyan-rgb), 0.4);
  box-shadow:
    0 4px 16px rgba(var(--cyan-rgb), 0.15),
    inset 0 1px 0 rgba(var(--white-rgb), 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

.nav__cta {
  flex-shrink: 0;
  transition: opacity .2s, transform .2s;
}
.nav__cta:hover { opacity: .88; }

.nav__cta-label {
  padding: 20px 24px;
  font-size: 14px;
}

/* ── Mobile hamburger button (hidden on desktop) ── */
.nav__toggle {
  display: none;
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  background: transparent;
  border-color: transparent;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
}
/* Liquid specular edge */
.nav__toggle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset -6px -5px 0px -7px rgba(var(--white-rgb), 1),
    inset 0px -6px 0px -5px rgba(var(--white-rgb), 1);
  opacity: 0.6;
  filter: blur(1px) brightness(115%);
  pointer-events: none;
}
.nav__toggle-bar {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  background: var(--raisin-800);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.nav__toggle-bar:nth-child(1) { top: 20px; }
.nav__toggle-bar:nth-child(2) { top: 27px; }
.nav__toggle-bar:nth-child(3) { top: 34px; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  top: 27px; transform: translateX(-50%) 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) {
  top: 27px; transform: translateX(-50%) rotate(-45deg);
}

/* ── Overlay backdrop ── */
.nav__overlay {
  position: fixed;
  inset: 0;
  background: rgba(24,22,19,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  z-index: 199;
  transition: opacity .25s ease;
  pointer-events: none;
}
.nav__overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Drawer (slide-from-right) ── */
.nav__drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(85vw, 380px);
  height: 100%;
  background: var(--white);
  box-shadow: -8px 0 32px rgba(0,0,0,.12);
  padding: 88px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateX(100%);
  transition: transform .3s ease;
  z-index: 200;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav__drawer.is-open {
  transform: translateX(0);
}

.nav__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--r-pill);
}
.nav__close:hover { background: rgba(0,0,0,.05); }
.nav__close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2px;
  background: var(--raisin-800);
  border-radius: 2px;
}
.nav__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

.nav__drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nav__drawer-list .nav__item { width: 100%; }
.nav__drawer-list .nav__link {
  display: block;
  padding: 18px 16px;
  font-family: var(--f-bold);
  font-size: 18px;
  color: var(--raisin-800);
  border-radius: 12px;
  white-space: normal;
  transition: background-color .2s;
}
.nav__drawer-list .nav__link:hover,
.nav__drawer-list .nav__item--active .nav__link {
  background: rgba(12,235,255,.18);
}

.nav__drawer-cta {
  margin-top: 24px;
  align-self: flex-start;
}
.nav__drawer-cta .badge__label {
  padding: 18px 28px;
  font-size: 14px;
}

/* ── Body scroll-lock when drawer open ── */
body.nav-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* ── Mobile breakpoint: show toggle, hide desktop menu ── */
@media (max-width: 1023px) {
  .nav__logo-img { width: 260px; }
  .nav__menu-container { display: none; }
  .nav__toggle { display: block; }
  .nav {
    padding: 24px var(--gutter-x);
    background-image: linear-gradient(to bottom, rgba(var(--white-rgb), 1) 0%, rgba(var(--white-rgb), 0.85) 60%, rgba(var(--white-rgb), 0.4) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* Gradient fade-out extension below nav — removes hard cut line */
  .nav::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20px;
    transform: translateY(100%);
    background: linear-gradient(to bottom, rgba(var(--white-rgb), 0.4), transparent);
    pointer-events: none;
  }

  .nav__logo::before {
    display: none;
  }

}

/* ── Desktop: ensure drawer & overlay are inert ── */
@media (min-width: 1024px) {
  .nav__overlay,
  .nav__drawer { display: none !important; }
}

@media (max-width: 767px) {
  .nav {
    padding: 18px var(--gutter-x);
  }

  .nav__logo-img {
    width: 220px;
    height: 42px;
  }

  .nav__toggle {
    width: 48px;
    height: 48px;
  }
  .nav__toggle-bar { width: 20px; }
  .nav__toggle-bar:nth-child(1) { top: 16px; }
  .nav__toggle-bar:nth-child(2) { top: 23px; }
  .nav__toggle-bar:nth-child(3) { top: 30px; }
  .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1),
  .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { top: 23px; }
}

/* ================================================
   NEXGEN BROS — Footer
================================================ */

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* ── Inner content row ── */
.footer__inner {
  display: flex;
  align-items: center;
  gap: clamp(32px, 4vw, 70px);
  width: 100%;
  margin: 0 auto;
  padding: 80px var(--gutter-x);
}

/* ── Brand column ── */
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.footer__brand-name {
  font-family: var(--f-bold);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .8px;
}

.footer__brand-copy {
  font-family: var(--f-medium);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .56px;
  color: var(--raisin-300);
}
.footer__brand-name, .footer__brand-copy { 
  margin-bottom: 0; 
}
/* Social icons row (placeholder) */
.footer__brand-socials {
  display: flex;
  gap: 40px;
  margin-top: 20px;
}

/* ── Decorative visual — 3D logo + spinning text ring ── */
.footer__visual {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 600px;
}

.footer__spin-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.footer__logo-3d {
  position: relative;
  z-index: 2;
  object-fit: contain;
}

.footer__text-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform-style: preserve-3d;
  animation: footer-spin-3d 25s linear infinite;
}

.footer__text-ring-svg {
  width: 100%;
  height: 100%;
}

.footer__text-ring-text {
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 18px;
  fill: url(#footerTextGrad);
  letter-spacing: 7px;
  text-transform: uppercase;
}

@keyframes footer-spin-3d {
  from { transform: rotateX(40deg) rotateZ(0deg); }
  to   { transform: rotateX(40deg) rotateZ(360deg); }
}

/* ── Contact column ── */
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: clamp(320px, 28vw, 477px);
  flex-shrink: 0;
}

.footer__contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 12px 0;
  background: var(--white);
  border-radius: var(--r-pill);
}

/* Gradient icon wrapper */
.footer__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 8px;
  border-radius: var(--r-icon);
  background: var(--gradient-brand);
}
.footer__contact-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.footer__contact-text {
  font-family: var(--f-medium);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .8px;
  color: var(--raisin-800);
  line-height: normal;
}
a.footer__contact-text { transition: opacity .2s; }
a.footer__contact-text:hover { opacity: .7; }

/* ── Bottom decorative bar ── */
.footer__bar {
  width: 100%;
  line-height: 0;
  overflow: hidden;
}
.footer__bar-img {
  width: 100%;
  height: 204px;
  object-fit: cover;
  display: block;
}

/* ── Footer responsive ── */
@media (max-width: 1023px) {
  .footer__inner {
    flex-direction: column;
    gap: 40px;
    padding: 60px var(--gutter-x);
    text-align: center;
  }
  .footer__brand {
    align-items: center;
    width: 100%;
  }
  .footer__brand-socials {
    justify-content: center;
    gap: 32px;
  }
  .footer__visual {
    width: 100%;
    max-width: 360px;
  }
  .footer__contact {
    width: 100%;
    max-width: 540px;
    align-items: stretch;
  }
  .footer__contact-item {
    text-align: left;
  }
  .footer__bar-img { height: 140px; }
}

@media (max-width: 767px) {
  .footer__inner {
    gap: 32px;
    padding: 48px var(--gutter-x);
  }
  .footer__brand-name { font-size: 18px; }
  .footer__brand-copy { font-size: 13px; }
  .footer__brand-socials { gap: 24px; }
  .footer__contact { gap: 12px; }
  .footer__contact-item { padding: 8px 14px 8px 0; gap: 10px; }
  .footer__contact-icon { padding: 6px; }
  .footer__contact-icon-img { width: 18px; height: 18px; }
  .footer__contact-text { font-size: 16px; letter-spacing: .4px; }
  .footer__bar-img { height: 96px; }
}

/* ================================================
   NEXGEN BROS — Homepage Styles
================================================ */

/* ══════════════════════════════════════════════
   1. HERO SECTION
══════════════════════════════════════════════ */
.company-intro {
  position: relative;
  width: 100%;
  height: 1126px;
  overflow: hidden;

}

/* Full-bleed background image */
.intro__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
    top: 1406px;
    height: 1937px;
    aspect-ratio: 1;
    object-fit: cover;
    position: absolute;
    left: calc(50% - 864px);
    width: 1728px;
    z-index: -1;
}

/* Centered showcase photo card */
.company-intro__showcase {
  position: absolute;
  top: 239px;
  left: 50%;
  transform: translateX(-50%);
  width: 1348px;
  height: 610px;
  border-radius: 40px;
  overflow: hidden;
  background-color: #795c5c;
}
.company-intro__showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Floating 3D decoration objects */
.company-intro__deco {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.company-intro__deco--star {
  top: 82px;  left: 506px;  width: 263px;
  animation: deco-float-1 5s ease-in-out infinite, deco-rotate-1 7s ease-in-out infinite;
}
.company-intro__deco--top-r {
  top: 178px; right: 0;
  animation: deco-float-2 6s ease-in-out infinite, deco-rotate-2 9s ease-in-out infinite;
}
.company-intro__deco--btm-r {
  top: 572px; left: 1326px;
  filter: blur(3px);
  animation: deco-float-3 5.5s ease-in-out infinite, deco-rotate-1 8s ease-in-out infinite, deco-blur 4s ease-in-out infinite;
}
.company-intro__deco--btm-l {
  top: 311px;
  background-image: url(../images/change_to_white_clear_backgrou_Nano_Banana_2_58250\ 2.png);
  filter: blur(4px);
  animation: deco-float-4 6.5s ease-in-out infinite, deco-rotate-2 10s ease-in-out infinite, deco-blur 5s ease-in-out infinite;
}

.company-intro__deco-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* ── Floating keyframes (different amplitudes) ── */
@keyframes deco-float-1 {
  0%, 100% { translate: 0 0; }
  50%      { translate: 8px -14px; }
}
@keyframes deco-float-2 {
  0%, 100% { translate: 0 0; }
  50%      { translate: -10px -18px; }
}
@keyframes deco-float-3 {
  0%, 100% { translate: 0 0; }
  50%      { translate: 6px -12px; }
}
@keyframes deco-float-4 {
  0%, 100% { translate: 0 0; }
  50%      { translate: -8px -16px; }
}

/* ── Gentle rotation keyframes ── */
@keyframes deco-rotate-1 {
  0%, 100% { rotate: 0deg; }
  50%      { rotate: 8deg; }
}
@keyframes deco-rotate-2 {
  0%, 100% { rotate: 0deg; }
  50%      { rotate: -6deg; }
}

/* Values ticker strip at the bottom of company-intro */
.company-intro__values {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 3;
}

.company-intro__values-track {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  flex-shrink: 0;
  animation: ticker 18s linear infinite;
  will-change: transform;
}

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

.company-intro__value-word {
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 80px;
  color: var(--moss-600);
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}
.company-intro__value-sep {
  width: 92px;
  height: 95px;
  flex-shrink: 0;
  object-fit: contain;
}


/* ══════════════════════════════════════════════
   2. ABOUT SECTION
══════════════════════════════════════════════ */

.about {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 40px);
  padding: var(--section-y) var(--gutter-x);
  width: 100%;
}

.about__content {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: min(100%, 914px);
  flex: 1 1 0;
  min-width: 0;
}

/* Logo mark + company name row */
.about__heading {
  display: flex;
  align-items: flex-start;
  gap: 19px;
  width: 100%;
}

.about__logomark {
  position: relative;
  width: 80px;
  height: 71px;
  flex-shrink: 0;
  margin-top: 6px;
}
.about__logomark-rect {
  position: absolute;
  top: 0;
  width: 45px;
  height: 71px;
}
.about__logomark-rect--back  { left: 35px; }
.about__logomark-rect--front { left: 0; }

.about__name {
  font-family: var(--f-xbold-it);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(88px, 7.5vw, 130px);
  line-height: 0.82;
  letter-spacing: 0;
  background: var(--gradient-brand-rev);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.about__description {
  font-family: var(--f-book);
  font-weight: 400;
  font-size: 24px;
  line-height: 35px;
  color: var(--raisin-800);
  max-width: min(100%, 815px);
}

/* Portrait image on the right */
.about__image {
  flex: 0 1 512px;
  width: 100%;
  max-width: 512px;
  min-width: 280px;
  height: auto;
  aspect-ratio: 512 / 716;
  object-fit: cover;
  border-radius: 8px;
}


/* ══════════════════════════════════════════════
   3. PARTNERS SECTION
══════════════════════════════════════════════ */

.partners {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  padding: 40px var(--gutter-x);
  width: 100%;
}

.partners__logo {
  height: 48px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════
   4. CULTURE BANNER SECTION
══════════════════════════════════════════════ */

.culture-banner {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 60px var(--gutter-x);
}

/* Stacked reveal — cards stick then get covered by next card on scroll */
.culture-banner__stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 1200px;
}

/* Shared card styles */
.culture-banner__card {
  position: sticky;
  top: 120px;
  width: 100%;
  height: 80vh;
  max-height: 560px;
  overflow: hidden;
  border: 20px solid rgba(var(--white-rgb), 0.25);
  box-shadow:
    0 -8px 40px rgba(var(--black-rgb), 0.12),
    inset 0 1px 0 rgba(var(--white-rgb), 0.5),
    inset 0 -1px 0 rgba(var(--black-rgb), 0.08),
    inset 1px 0 0 rgba(var(--white-rgb), 0.3),
    inset -1px 0 0 rgba(var(--white-rgb), 0.3);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}

/* Each card gets a slightly different top offset to peek above the previous */
.culture-banner__card--1 { top: 120px; z-index: 1; }
.culture-banner__card--2 { top: 140px; z-index: 2; }
.culture-banner__card--3 { top: 160px; z-index: 3; }
.culture-banner__card--4 { top: 180px; z-index: 4; }

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

/* Hover: image zoom */
.culture-banner__card:hover .culture-banner__card-img {
  transform: scale(1.05);
}

/* Hover: glass shine sweep */
.culture-banner__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(var(--white-rgb), 0.3) 50%,
    transparent 60%
  );
  translate: -100% -100%;
  transition: none;
  pointer-events: none;
  z-index: 3;
}
.culture-banner__card:hover::after {
  translate: 100% 100%;
  transition: translate 0.8s ease;
}


/* ══════════════════════════════════════════════
   5. features SECTION
══════════════════════════════════════════════ */

.features {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 80px;
  padding: 100px 178px;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 160px;
}

.features__col {
  display: flex;
  flex-direction: column;
  gap: 120px;
  width: 345px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;             /* above bg decoration */
}

.features__item {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.features__item-title {
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 40px;
  line-height: 56px;
  color: var(--raisin-600);
}

.features__item-body {
  font-family: var(--f-medium);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .8px;
  line-height: 1.5;
  color: var(--raisin-400);
}

.features__visual {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.features__visual-img {
  width: 100%;
  max-width: 1728px;
  height: auto;
  object-fit: contain;
}


/* ══════════════════════════════════════════════
   6. COMMUNITY SECTION
══════════════════════════════════════════════ */

.community {
  --community-surface:
    linear-gradient(rgba(0,0,0,0.05) 0.8px, transparent 0.8px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 0.8px, transparent 0.8px),
    var(--gradient-brand);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding: var(--section-y) var(--gutter-x);
  width: 100%;
  border-radius: 0 0 var(--r-card) 48px;
  overflow: hidden;
  background-image: var(--community-surface);

  background-size: 40px 40px, 40px 40px, cover;
  background-repeat: repeat, repeat, no-repeat;
}


/* Optional noise/texture overlay */
.community__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* All direct children stack above overlay */
.community > *:not(.community__overlay) { position: relative; z-index: 1; }

/* ── Heading block ── */
.community__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 742px;
}

.community__head-icon {
  width: 77px;
  height: 80px;
  object-fit: contain;
}

.community__head-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.community__head-line {
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 80px;
  line-height: 76px;
  color: var(--white);
  text-align: center;
  letter-spacing: 0;
}

/* ── Value tags cloud ── */
.community__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 1407px;
  width: 100%;
}

/* Decorative icon in between tags */
.community__tag-deco {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.community__tag-deco img { width: auto; object-fit: contain; }

/* Tag pill — outer .badge + inner .badge__label from style.css */
.community__tag-label {
  padding: 16px 36px 21px;
  font-size: 24px;
}

/* ── Posts / news row ── */
.community__posts {
  display: flex;
  gap: 32px;
  width: 100%;
  max-width: 1488px;
  min-width: 0;
  overflow-x: clip;
  overflow-y: visible;
}


/* ── Post card — grid layout so date overlays thumb without being its child ── */
.post-card {
  --post-card-thumb-radius: 16px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 24px;
  flex: 1;
  min-width: 0;
}

/* Thumb + date share the same grid row */
.post-card__thumb,
.post-card__date {
  grid-row: 1;
  grid-column: 1;
}

.post-card__date {
  justify-self: end;
  align-self: end;
  z-index: 12;
}

.community .post-card__date,
.culture-news__card-date {
  position: relative;
  --date-bridge-radius: 22px;
  --date-bridge-offset: 8px;
  --date-bridge-concave-r: 12px;
}

.community .post-card__date {
  --community-surface-width: 100%;
  --community-surface-height: 100%;
  --community-surface-offset-x: 0px;
  --community-surface-offset-y: 0px;
}

.community .post-card__date::before,
.culture-news__card-date::before {
  content: '';
  position: absolute;
  top: calc(var(--date-bridge-offset) * -1);
  left: calc(var(--date-bridge-offset) * -1);
  right: 0;
  bottom: 0;
  border-radius: var(--date-bridge-radius) 0 0 0;
  z-index: -1;
  pointer-events: none;
}

/* Inverted corners — concave curves outside ::before */
.community .post-card__date::after,
.culture-news__card-date::after {
  content: '';
  position: absolute;
  top: calc((var(--date-bridge-offset) + var(--date-bridge-concave-r)) * -1);
  left: calc((var(--date-bridge-offset) + var(--date-bridge-concave-r)) * -1);
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
}

.culture-news__card-date::after {
  background:
    /* Top-right: concave */
    radial-gradient(circle var(--date-bridge-concave-r) at 0% 0%, transparent calc(var(--date-bridge-concave-r) - 0.5px), var(--date-bridge-bg, var(--white)) var(--date-bridge-concave-r))
      right 0 top 0 / var(--date-bridge-concave-r) var(--date-bridge-concave-r) no-repeat,
    /* Bottom-left: concave */
    radial-gradient(circle var(--date-bridge-concave-r) at 0% 0%, transparent calc(var(--date-bridge-concave-r) - 0.5px), var(--date-bridge-bg, var(--white)) var(--date-bridge-concave-r))
      left 0 bottom 0 / var(--date-bridge-concave-r) var(--date-bridge-concave-r) no-repeat;
}

.community .post-card__date::after {
  background-image: var(--community-surface);
  background-size:
    40px 40px,
    40px 40px,
    var(--community-surface-width) var(--community-surface-height);
  background-repeat: repeat, repeat, no-repeat;
  background-position:
    calc((var(--community-surface-offset-x) - var(--date-bridge-concave-r)) * -1) calc((var(--community-surface-offset-y) - var(--date-bridge-concave-r)) * -1),
    calc((var(--community-surface-offset-x) - var(--date-bridge-concave-r)) * -1) calc((var(--community-surface-offset-y) - var(--date-bridge-concave-r)) * -1),
    calc((var(--community-surface-offset-x) - var(--date-bridge-concave-r)) * -1) calc((var(--community-surface-offset-y) - var(--date-bridge-concave-r)) * -1);
  -webkit-mask:
    radial-gradient(circle var(--date-bridge-concave-r) at 0% 0%, transparent calc(var(--date-bridge-concave-r) - 0.5px), #000 var(--date-bridge-concave-r))
      right 0 top 0 / var(--date-bridge-concave-r) var(--date-bridge-concave-r) no-repeat,
    radial-gradient(circle var(--date-bridge-concave-r) at 0% 0%, transparent calc(var(--date-bridge-concave-r) - 0.5px), #000 var(--date-bridge-concave-r))
      left 0 bottom 0 / var(--date-bridge-concave-r) var(--date-bridge-concave-r) no-repeat;
  mask:
    radial-gradient(circle var(--date-bridge-concave-r) at 0% 0%, transparent calc(var(--date-bridge-concave-r) - 0.5px), #000 var(--date-bridge-concave-r))
      right 0 top 0 / var(--date-bridge-concave-r) var(--date-bridge-concave-r) no-repeat,
    radial-gradient(circle var(--date-bridge-concave-r) at 0% 0%, transparent calc(var(--date-bridge-concave-r) - 0.5px), #000 var(--date-bridge-concave-r))
      left 0 bottom 0 / var(--date-bridge-concave-r) var(--date-bridge-concave-r) no-repeat;
}

.community .post-card__date::before {
  background-image: var(--community-surface);
  background-size:
    40px 40px,
    40px 40px,
    var(--community-surface-width) var(--community-surface-height);
  background-repeat: repeat, repeat, no-repeat;
  background-position:
    calc(var(--community-surface-offset-x) * -1) calc(var(--community-surface-offset-y) * -1),
    calc(var(--community-surface-offset-x) * -1) calc(var(--community-surface-offset-y) * -1),
    calc(var(--community-surface-offset-x) * -1) calc(var(--community-surface-offset-y) * -1);
}

/* Thumbnail with background image */
.post-card__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--post-card-thumb-radius);
  position: relative;
  overflow: hidden;
  z-index: 11;
}

.post-card__thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.4s ease;
}

.post-card__thumb:hover::before {
  transform: scale(1.08);
}

/* Hover: glass shine sweep from top-left to bottom-right */
.post-card .post-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(var(--white-rgb), 0.35) 50%,
    transparent 60%
  );
  translate: -100% -100%;
  transition: none;
  pointer-events: none;
}

.post-card .post-card__thumb:hover::after {
  translate: 100% 100%;
  transition: translate 0.8s ease;
}

.post-card__date-label {
  padding: 12px 17px;
  font-size: 16px;
  background: var(--gradient-brand);
}

/* Post text area */
.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 12px;
  min-width: 0;
}
.post-card__title {
  font-family: var(--f-bold);
  font-size: 20px;
  font-weight: 700;
  color: var(--raisin-25);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Title link: animated underline on hover */
.post-card__title a {
  background-image: linear-gradient(rgba(var(--white-rgb),.6), rgba(var(--white-rgb),.6));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s ease;
}

.post-card__title:hover a {
  background-size: 100% 1px;
}

.post-card__title--dark {
  color: var(--raisin-800);
}

.post-card__title--dark a {
  background-image: linear-gradient(var(--raisin-300), var(--raisin-300));
}
.post-card__excerpt {
  font-family: var(--f-medium);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .8px;
  color: var(--raisin-50);
  line-height: 1.45;
  overflow-wrap: anywhere;
}


/* ══════════════════════════════════════════════
   7. EMPLOYEE-STORIES SECTION
══════════════════════════════════════════════ */

.employee-stories {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  padding: 80px 0 100px;
  width: 100%;
}

.employee-stories__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: min(80vw, 1374px);
  max-width: 100%;
  min-width: 0;
}

/* Two-panel card */
.employee-stories__panels {
  display: flex;
  width: 100%;
  height: 740px;
  overflow: hidden;
  padding: 20px;
  background: var(--moss-50);
  min-width: 0;
}

/* Left: quote panel */
.employee-stories__quote-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 542px;
  height: 100%;
  padding: 40px;
  background: var(--moss-50);
  flex-shrink: 0;
  min-width: 0;
}
.employee-stories__quote-mark {
  width: 30px;
  height: 53px;
  object-fit: contain;
}
.employee-stories__quote-body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 20px 0;
  min-width: 0;
}
.employee-stories__quote-text {
  font-family: var(--f-medium-it);
  font-weight: 500;
  font-style: italic;
  font-size: 20px;
  letter-spacing: .8px;
  line-height: 28px;
  color: var(--raisin-700);
  width: 462px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.employee-stories__quote-icons {
    display: flex;
    align-items: center;
    gap: 24px;
}
/* Right: photo panel */
.employee-stories__photo-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  background-size: cover;
  background-position: center;
  min-width: 0;
}
.employee-stories__photo-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
  min-width: 0;
}
.employee-stories__name,
.employee-stories__role {
  font-family: var(--f-bold);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .8px;
  line-height: 28px;
  color: var(--moss-50);
  white-space: nowrap;
  overflow-wrap: anywhere;
}

/* ══════════════════════════════════════════════
   FRONT-PAGE RESPONSIVE OVERRIDES
══════════════════════════════════════════════ */
@media (max-width: 1440px) {
  .intro__bg {
    left: 0;
  }
}
/* ── Tablet & small laptop (≤1023px) ── */
@media (max-width: 1023px) {
  .intro__bg {
    width: 100vw;
    height: auto;
    top: 1000px;
    left: 50%;
    transform: translateX(-50%);
  }
  /* 1. HERO */
  .company-intro { height: auto; min-height: 720px; padding-bottom: 110px; }
  .company-intro__showcase {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: min(92vw, 900px);
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 140px auto 0;
    border-radius: var(--r-card);
  }
  .company-intro__deco--btm-r,
  .company-intro__deco--btm-l { display: none; }
  .company-intro__deco--star { width: 180px; left: 5vw; top: 60px; }
  .company-intro__deco--top-r { width: 180px; top: 100px; }
  .company-intro__values { height: 90px; }
  .company-intro__value-word { font-size: 56px; }
  .company-intro__value-sep { width: 64px; height: 66px; }

  /* 2. ABOUT */
  .about {
    flex-direction: column;
    align-items: center;
    gap: 48px;
    position: relative;
    overflow: hidden;
  }
    .about__content {
      width: 100%;
      gap: 40px;
      text-align: left;
      position: relative;
      z-index: 1;
    }

    .about__heading {
      justify-content: center;
    }

    .about__name {
      font-size: 80px;
      line-height: 1;
    }

    .about__description {
      font-size: 18px;
      line-height: 1.6;
      margin: 0 auto;
    }

    .about__image {
      position: absolute;
      top: 78%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      max-width: 260px;
      height: auto;
      aspect-ratio: auto;
      opacity: 0.1 !important;
      pointer-events: none;
      z-index: 0;
      filter: grayscale(0.3);
    }

  /* 3. PARTNERS */
  .partners {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 48px;
  }
  .partners::-webkit-scrollbar { display: none; }
  .partners__logo { height: 48px; max-width: 180px; }

  /* 4. CULTURE BANNER — switch to vertical stack (drop absolute + rotate) */
  .culture-banner {
    padding: 60px 0 80px;
  }
  .culture-banner__stack {
    max-width: calc(100% - var(--gutter-x) * 2);
  }

  /* 5. FEATURES */
  .features {
    flex-direction: column;
    gap: 48px;
    padding: var(--section-y) var(--gutter-x);
    margin-bottom: 0;
  }
  .features__col { width: 100%; max-width: 640px; gap: 0; margin: 0 auto; }
  .features__item { gap: 0; }
  .features__item-title { font-size: 32px; line-height: 1.2; }
  .features__item-body { font-size: 18px; }
  .features__visual { position: relative; opacity: .6; }

  /* 6. COMMUNITY */
  .community { gap: 48px; }
  .community__head { width: 100%; max-width: 640px; gap: 32px; }
  .community__head-line { font-size: 56px; line-height: 1.05; }
  .community__head-icon { width: 60px; height: 62px; }
  .community__tags { gap: 16px; }
  .community__tag-deco img { height: 28px; }
  .community__tag-label { padding: 12px 24px 16px; font-size: 18px; }
  .community__posts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .community .community__posts.flickity-enabled .post-card {
    width: calc((100% - 24px) / 2);
    margin-right: 24px;
  }

  .post-card__date-label { font-size: 14px; }
  .post-card__title,
  .post-card__excerpt { font-size: 18px; }

  /* 7. EMPLOYEE STORIES */
  .employee-stories { gap: 60px; padding: 60px 0 80px; overflow: hidden; }
  .employee-stories__card { gap: 32px; }
  .employee-stories__panels {
    flex-direction: column;
    height: auto;
    padding: 16px;
  }
  .employee-stories__quote-panel {
    width: 100%;
    padding: 32px;
  }
  .employee-stories__quote-text { width: 100%; font-size: 18px; line-height: 1.5; }
  .employee-stories__photo-panel {
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 20px;
  }
  .employee-stories__name,
  .employee-stories__role { font-size: 16px; line-height: 1.4; }
}

/* ── Mobile (≤767px) ── */
@media (max-width: 767px) {
  /* 1. HERO */
  .company-intro {
    min-height: max-content;
    padding-bottom: 90px;
  }

  .company-intro__showcase {
    margin-top: 110px;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
  }

  .company-intro__deco {
    display: none;
  }

  .company-intro__values {
    height: 70px;
  }

  .company-intro__value-word {
    font-size: 36px;
  }

  .company-intro__value-sep {
    width: 40px;
    height: 42px;
  }

  /* 2. ABOUT */
  .about__content { gap: 28px; }
  .about__heading { gap: 12px; }
  .about__logomark { width: 56px; height: 50px; margin-top: 0; }
  .about__logomark-rect { width: 32px; height: 50px; }
  .about__logomark-rect--back { left: 24px; }
  .about__name { font-size: 48px; }
  .about__description { font-size: 16px; line-height: 1.55; }

  /* 3. PARTNERS */
  .partners { padding: 24px var(--gutter-x); gap: 32px; }
  .partners__logo { height: 48px; max-width: 180px; }

  /* 4. CULTURE BANNER — mobile slider */
  .culture-banner__stack .culture-banner__card {
    position: relative;
    top: auto;
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: 12px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 2px 12px rgba(var(--black-rgb), 0.10);
    flex-shrink: 0;
  }
  .culture-banner__stack.flickity-enabled {
    display: block;
  }
  .culture-banner__stack.flickity-enabled .culture-banner__card {
    width: 100%;
    margin-right: 0;
  }
  .culture-banner__card:hover { translate: none; }
  .culture-banner__card::after { display: none; }

  /* 5. FEATURES — accent cards with gradient number watermark */
  .features { gap: 16px; }
  .features__col { gap: 16px; }

  .features .features__item {
    position: relative;
    padding: 24px 24px 24px 28px;
    background: rgba(var(--white-rgb), 0.55);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(var(--black-rgb), 0.06);
    overflow: hidden;
    counter-increment: feature-counter;
  }
  .features__col {
    counter-reset: feature-counter;
  }
  /* First col starts at 01, second col at 03 */
  .features__col:last-of-type {
    counter-reset: feature-counter 2;
  }

  /* Gradient accent left border */
  .features .features__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--gradient-brand-diagonal);
    border-radius: 4px 0 0 4px;
  }

  /* Large gradient number watermark */
  .features .features__item::after {
    content: counter(feature-counter, decimal-leading-zero);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--f-bold);
    font-weight: 700;
    font-size: 72px;
    line-height: 1;
    background: var(--gradient-brand-diagonal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.07;
    pointer-events: none;
  }

  .features__item-title { font-size: 20px; line-height: 1.3; }
  .features__item-body { font-size: 15px; line-height: 1.5; }

  /* 6. COMMUNITY */
  .community { gap: 32px; }
  .community__head { gap: 24px; }
  .community__head-line { font-size: 36px; line-height: 1.1; }
  .community__tags { gap: 10px; }
  .community__tag-deco { display: none; }
  .community__tag-label { padding: 10px 18px 12px; font-size: 14px; }
  .community__posts {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .community .community__posts.flickity-enabled .post-card {
    width: 100%;
    margin-right: 0;
  }

  .post-card__title,
  .post-card__excerpt { font-size: 16px; }
  .post-card__date-label { padding: 10px 14px; }

  .community__posts.flickity-enabled .flickity-prev-next-button {
    bottom: auto;
  }


  /* 7. EMPLOYEE STORIES */
  .employee-stories {
    gap: 40px;
    padding: 48px 0 60px;
    overflow: hidden;
  }

  .employee-stories__panels, .employee-stories__quote-panel {
    padding: 12px;
  }
  
  .employee-stories__quote-mark {
    width: 24px;
    height: 42px;
  }

  .employee-stories__quote-text {
    font-size: 16px;
  }

  .employee-stories__quote-icons {
    gap: 16px;
  }

  .employee-stories__photo-panel {
    padding: 16px;
  }

  .employee-stories__name,
  .employee-stories__role {
    font-size: 14px;
    line-height: 1.3;
  }
}

@media screen and (max-width: 480px) {
  html, main {
    overflow-x: hidden;
  }
  .post-card__date-label {
    font-size: 3.2vw;
  }

  /* ── Global overflow safety ── */
  .about__name { font-size: 36px; }
  .about__logomark { width: 40px; height: 36px; }
  .about__logomark-rect { width: 24px; height: 36px; }
  .about__logomark-rect--back { left: 16px; }
  .about__description { font-size: 15px; line-height: 1.5; }
  .community__head { width: 100%; }
  .community__head-line { font-size: 28px; line-height: 1.1; }

  /* Tags → horizontal scroll */
  .community__tags {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 var(--gutter-x);
    margin: 0 calc(var(--gutter-x) * -1);
    width: calc(100% + var(--gutter-x) * 2);
    max-width: none;
  }
  .community__tags::-webkit-scrollbar {
    display: none;
  }
  .community__tags .community__tag {
    flex-shrink: 0;
  }
}

/* ================================================
   NEXGEN BROS — About Page Styles
================================================ */

/* ══════════════════════════════════════════════
   1. ABOUT HERO
══════════════════════════════════════════════ */

.about-hero {
    --about-hero-radius: 40px;
    position: relative;
    margin: 180px auto 100px;
    width: 1488px;
    max-width: calc(100% - var(--gutter-x) * 2);
    height: 683px;
}

.about-hero__bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/Subtract\ 5.png');
    background-size: cover;
    background-position: 50% 50%;
    border-radius: var(--about-hero-radius);
    overflow: hidden;
}

.about-hero__badge {
  position: absolute;
  isolation: isolate;
  --corner-plate-offset: 12px;
  --corner-plate-radius: 52px;
  --corner-plate-concave-r: 32px;
  --corner-plate-layer: 0;
}

.about-hero__badge,
.culture-featured__date {
  --corner-plate-bg: var(--white);
}

.about-hero__badge-label {
  padding: 28px 36px;
  font-size: 24px;
}

.about-hero__badge::before,
.culture-featured__date::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: calc(var(--corner-plate-offset) * -1);
  bottom: calc(var(--corner-plate-offset) * -1);
  background: var(--corner-plate-bg);
  border-radius: 0 0 var(--corner-plate-radius) 0;
  z-index: var(--corner-plate-layer);
}

.about-hero__badge::after,
.culture-featured__date::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: calc((var(--corner-plate-offset) + var(--corner-plate-concave-r)) * -1);
  bottom: calc((var(--corner-plate-offset) + var(--corner-plate-concave-r)) * -1);
  z-index: var(--corner-plate-layer);
  pointer-events: none;
  background:
    radial-gradient(
      circle var(--corner-plate-concave-r) at 100% 100%,
      transparent calc(var(--corner-plate-concave-r) - 0.5px),
      var(--corner-plate-bg) var(--corner-plate-concave-r)
    )
      right 0 top 0 / var(--corner-plate-concave-r) var(--corner-plate-concave-r) no-repeat,
    radial-gradient(
      circle var(--corner-plate-concave-r) at 100% 100%,
      transparent calc(var(--corner-plate-concave-r) - 0.5px),
      var(--corner-plate-bg) var(--corner-plate-concave-r)
    )
      left 0 bottom 0 / var(--corner-plate-concave-r) var(--corner-plate-concave-r) no-repeat;
}


/* ══════════════════════════════════════════════
   2. VISION & MISSION
══════════════════════════════════════════════ */

.vision {
  width: 100%;
  background: var(--white);
  padding: 0px var(--gutter-x);
  display: flex;
  justify-content: center;
}

.vision__inner {
  position: relative;
  width: 1206px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vision__text {
  font-family: var(--f-book);
  font-weight: 400;
  font-size: 40px;
  line-height: 67px;
  color: #000;
  text-align: center;
  width: 100%;
}

.vision__text .badge {
  vertical-align: baseline;
  position: relative;
  top: -4.5px;
}

.vision__badge-label {
  padding: 12px 20px;
  font-size: 26px;
}


/* ══════════════════════════════════════════════
   3. STATS
══════════════════════════════════════════════ */

.stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1362px;
  max-width: calc(100% - var(--gutter-x) * 2);
  margin: 100px auto;
  background: var(--white);
}

.stats__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 255px;
}

.stats__number {
  font-family: "FS Magistral-Light", Helvetica, sans-serif;
  font-weight: 300;
  font-size: 130px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;

  /* Gradient text */
  background: var(--gradient-brand-diagonal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.stats__label {
  font-family: var(--f-medium);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0;
  color: var(--raisin-600);
  line-height: normal;
}


/* ══════════════════════════════════════════════
   4. ACHIEVEMENTS — Timeline
══════════════════════════════════════════════ */

.achievements {
  position: relative;
  width: 1504px;
  max-width: calc(100% - var(--gutter-x) * 2);
  margin: 0 auto 80px;
  border-radius: var(--r-card);
  background: var(--gradient-brand);
  background-size: cover;
  background-position: 50% 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 60px;
  gap: 48px;
}

/* ── Timeline vertical line (center) ── */
.achievements::before {
  content: '';
  position: absolute;
  top: 340px;
  bottom: 80px;
  left: 50%;
  width: 2px;
  background: rgba(var(--white-rgb), 0.25);
  transform: translateX(-50%);
}

/* ── Heading ── */
.achievements__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 1000px;
}

.achievements__head-badge-label {
  padding: 19px 24px;
  font-size: 24px;
  font-family: var(--f-medium);
  font-weight: 500;
}

.achievements__head-text {
  font-family: var(--f-book);
  font-weight: 400;
  font-size: 30px;
  line-height: 49px;
  color: var(--white);
  text-align: center;
  width: 100%;
}

.achievements .achievements__head .achievements__head-badge.badge--cyan .achievements__head-badge-label {
  color: var(--white);
}
 
/* ── Item pair (photo + bubble) — 3-col grid: content | dot | empty ── */
.achievements__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  width: 100%;
  max-width: 1200px;
  align-items: start;
}

/* Timeline dot (center) */
.achievements__item::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(var(--cyan-rgb), 0.4);
  z-index: 2;
}

/* Horizontal connector (dot → content) */
.achievements__item::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 2px;
  background: rgba(var(--white-rgb), 0.25);
}
.achievements__item--left::after {
  left: calc(50% - 24px);
}
.achievements__item--right::after {
  left: calc(50% + 7px);
}

/* Left item: content on col 1 */
.achievements__item--left .achievements__photo,
.achievements__item--left .achievements__bubble {
  grid-column: 1;
}

/* Right item: content on col 3 */
.achievements__item--right .achievements__photo,
.achievements__item--right .achievements__bubble {
  grid-column: 3;
}

/* ── Photo ── */
.achievements__photo {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 2;
}

.achievements__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Hover: image zoom */
.achievements__photo:hover .achievements__photo-img {
  transform: scale(1.05);
}

/* Hover: glass shine sweep */
.achievements__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(var(--white-rgb), 0.3) 50%,
    transparent 60%
  );
  translate: -100% -100%;
  transition: none;
  pointer-events: none;
  z-index: 1;
}
.achievements__photo:hover::after {
  translate: 100% 100%;
  transition: translate 0.8s ease;
}

/* Hover: timeline dot glow */
.achievements__item::before {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.achievements__item:hover::before {
  transform: translate(-50%, -50%) scale(1.3);
  box-shadow: 0 0 0 6px rgba(var(--cyan-rgb), 0.5), 0 0 16px rgba(var(--cyan-rgb), 0.3);
}

/* ── Bubble ── */
.achievements__bubble {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  gap: 16px;
  margin-top: 16px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: var(--shadow-glass-sm);
  background-color: rgba(var(--cyan-rgb), 0.20);
  border-radius: 20px;
}

.achievements__bubble-title {
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 24px;
  color: var(--white);
  line-height: normal;
}

.achievements__bubble-body {
  font-family: var(--f-book);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--white);
}


/* ══════════════════════════════════════════════
   5. FIELDS OF OPERATION
══════════════════════════════════════════════ */

.fields {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 1488px;
  max-width: calc(100% - var(--gutter-x) * 2);
  margin: 80px auto 0px;
  background: var(--white);
}

/* ── Shared column base ── */
.fields__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  flex: 1;
}

/* ── Section badge ── */
.fields__badge-label {
  padding: 16px 24px;
  font-size: 18px;
}

/* ── Typography ── */
.fields__intro {
  font-family: var(--f-bold);
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: var(--raisin-800);
}
.fields__intro strong {
  font-weight: 700;
}

.fields__body {
  font-family: var(--f-book);
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: var(--raisin-800);
}

/* ── Image wrappers ── */
.fields__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background-color: #503131;
  border-radius: 30px;
  overflow: hidden;
}
.fields__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Centre column: tall portrait fills height */
.fields__col--centre {
  width: 479px;
  flex: 0 0 479px;
}
.fields__portrait-wrap {
  width: 479px;
  height: 719px;
  background-color: #953535;
  border-radius: 30px;
  overflow: hidden;
}
.fields__portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ══════════════════════════════════════════════
   ABOUT PAGE — RESPONSIVE OVERRIDES
══════════════════════════════════════════════ */
@media (max-width: 1440px) {
  .about-hero__badge-label {
    font-size: 22px;
  }
}

/* ── Tablet (≤1023px) ── */
@media (max-width: 1023px) {
  /* 1. ABOUT HERO */
  .about-hero {
    --about-hero-radius: 32px;
    width: min(92vw, 100%);
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 140px auto 60px;
  }

  .about-hero__badge {
    --corner-plate-offset: 8px;
    --corner-plate-radius: 32px;
    --corner-plate-concave-r: 16px;
  }

  .about-hero__badge-label {
    padding: 20px 28px;
    font-size: 20px;
  }

  /* 2. VISION & MISSION */
  .vision__inner {
    width: 100%;
  }
  .vision__text {
    font-size: 28px;
    line-height: 44px;
  }
  .vision__badge-label {
    padding: 10px 16px;
    font-size: 20px;
  }

  /* 3. STATS */
  .stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
    width: min(92vw, 720px);
    margin: 60px auto;
  }
  .stats__item {
    width: 100%;
    gap: 12px;
    align-items: center;
  }
  .stats__number {
    font-size: 80px;
  }
  .stats__label {
    font-size: 18px;
  }

  /* 4. ACHIEVEMENTS — single-column timeline on tablet */
  .achievements {
    width: 92vw;
    padding: 60px var(--gutter-in) 60px calc(var(--gutter-in) + 40px);
    gap: 40px;
    margin-bottom: 60px;
  }
  /* Line moves to left side */
  .achievements::before {
    left: calc(var(--gutter-in) + 15px);
    top: 220px;
    transform: none;
  }
  .achievements__head {
    gap: 32px;
  }
  .achievements__head-text {
    font-size: 22px;
    line-height: 36px;
    text-align: left;
  }
  .achievements__head-badge-label {
    padding: 14px 20px;
    font-size: 20px;
  }

  .achievements__item {
    display: flex;
    flex-direction: column;
    max-width: 100%;
  }
  /* Dot repositioned to left timeline */
  .achievements__item::before {
    position: absolute;
    left: calc(-40px + 15px - 6px);
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
  }
  /* Horizontal connector — override desktop positioning */
  .achievements__item::after {
    left: calc(-40px + 15px + 6px);
    right: auto;
    top: 50%;
    width: calc(40px - 15px - 6px);
    background: rgba(var(--white-rgb), 0.25);
  }
  .achievements__item--left::after,
  .achievements__item--right::after {
    left: calc(-40px + 15px + 6px);
    right: auto;
  }
  .achievements__item--left .achievements__photo,
  .achievements__item--left .achievements__bubble,
  .achievements__item--right .achievements__photo,
  .achievements__item--right .achievements__bubble {
    grid-column: auto;
  }
  .achievements__photo {
    border-radius: 16px;
  }
  .achievements__bubble {
    border-radius: 16px;
    padding: 20px;
    gap: 12px;
  }
  .achievements__bubble-title {
    font-size: 22px;
  }
  .achievements__bubble-body {
    font-size: 18px;
    line-height: 26px;
  }

  /* 5. FIELDS */
  .fields {
    flex-direction: column;
    width: min(92vw, 720px);
    gap: 40px;
    margin: 60px auto 0;
  }
  .fields .fields__col {
    flex: none;
    width: 100%;
    gap: 0;
  }
  .fields .fields__col--centre {
    width: 100%;
    flex: none;
  }
  .fields .fields__col--centre .fields__portrait-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: var(--r-icon);
  }
  .fields .fields__image-wrap {
    border-radius: var(--r-icon);
  }

  .fields .fields__col .fields__badge {
    margin-bottom: 1.3em;
  }
}

/* ── Mobile (≤767px) ── */
@media (max-width: 767px) {
  /* 1. ABOUT HERO */
  .about-hero {
    width: calc(100% - var(--gutter-x) * 2);
    aspect-ratio: 16 / 9;
    margin: 110px auto 40px;
  }

  .about-hero__badge-label {
    padding: 12px 16px;
    font-size: 14px;
  }

  /* 2. VISION & MISSION */
  .vision__text {
    font-size: 20px;
    line-height: 34px;
  }
  .vision__text .badge {
    top: -2px;
  }
  .vision__badge-label {
    padding: 8px 12px;
    font-size: 14px;
  }

  /* 3. STATS */
  .stats {
    gap: 32px 24px;
    margin: 40px auto;
  }
  .stats__item {
    gap: 8px;
  }
  .stats__number {
    font-size: 56px;
  }
  .stats__label {
    font-size: 16px;
  }

  /* 4. ACHIEVEMENTS */
  .achievements {
    width: calc(100% - var(--gutter-x) * 2);
    padding: 40px 16px 40px calc(16px + 32px);
    border-radius: 20px;
    margin-bottom: 40px;
    gap: 32px;
  }
  .achievements::before {
    left: calc(16px + 11px);
    top: 160px;
    bottom: 40px;
  }
  .achievements__head {
    gap: 24px;
  }
  .achievements__head-text {
    font-size: 18px;
    line-height: 30px;
  }
  .achievements__head-badge-label {
    padding: 12px 16px;
    font-size: 16px;
  }
  .achievements__photo {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }
  .achievements__item::before {
    left: calc(-32px + 11px - 5px);
    width: 10px;
    height: 10px;
  }
  .achievements__item::after {
    left: calc(-32px + 11px + 5px);
    width: calc(32px - 11px - 5px);
  }
  .achievements__bubble {
    border-radius: 12px;
    padding: 16px;
    gap: 10px;
    margin-top: 12px;
  }
  .achievements__bubble-title {
    font-size: 20px;
  }
  .achievements__bubble-body {
    font-size: 16px;
    line-height: 24px;
  }

  /* 5. FIELDS */
  .fields {
    max-width: 100vw;
    gap: 32px;
    margin: 40px auto 0;
  }

  .fields .fields__col--centre .fields__portrait-wrap {
    aspect-ratio: 4 / 5;
    border-radius: 20px;
  }
  .fields .fields__image-wrap {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
  }
  .fields .fields__intro {
    font-size: 18px;
    line-height: 28px;
  }
  .fields .fields__body {
    font-size: 16px;
    line-height: 26px;
  }
  .fields .fields__badge-label {
    padding: 12px 18px;
    font-size: 16px;
  }
  .fields .fields__col--right .fields__image-wrap {
    order: 1;
  }
}

@media screen and (max-width: 480px) {
  .about-hero__bg {
    border-radius: 24px;
  }
}

/* ================================================
   NEXGEN BROS — Culture Page
================================================ */


/* ── Page wrapper ── */

.culture-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ══════════════════════════════════════════════
   1. CULTURE HERO
══════════════════════════════════════════════ */

.culture-hero {
  position: relative;
  width: 100%;
  max-width: var(--page-w);
  min-height: clamp(200px, 40vw, 534px);
  flex-shrink: 0;
  margin: 180px auto 0;
}

/* ── Concentric rings ──── */

.culture-hero__rings {
  position: absolute;
  left: 15.5%;
  top: 124px;
  width: 66.9%;
  height: 254px;
  pointer-events: none;
}

.culture-hero__ring {
  position: absolute;
  left: 0;
  width: 100%;
  height: 142px;
  border-radius: 310px;
  opacity: 0.8;
  border: 1px solid transparent;
  background: var(--gradient-brand) border-box;

  -webkit-mask: 
    linear-gradient(#fff 0 0) padding-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: 
    linear-gradient(#fff 0 0) padding-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.culture-hero__ring--1 { top: 0; }
.culture-hero__ring--2 { top: 28px; }
.culture-hero__ring--3 { top: 56px; }
.culture-hero__ring--4 { top: 84px; }
.culture-hero__ring--5 { top: 112px; }


/* ── Decorative blob — top centre ──*/
.culture-hero__blob--tc {
  position: absolute;
  left: 24.3%;
  top: 74px;
  width: 163px;
  height: 163px;
  object-fit: contain;
  pointer-events: none;
}

/* ── Blob group — right side ──*/
.culture-hero__blob-group--right {
  position: absolute;
  right: 0;
  top: 0;
  width: 419px;
  height: 419px;
  pointer-events: none;
}

/* Smaller, heavily blurred (blur-157) */
.culture-hero__blob-group--right .culture-hero__blob--sm {
  position: absolute;
  left: 87px;
  top: 241px;
  width: 298px;
  height: 298px;
  filter: blur(157px);
  transform: rotate(-8.82deg);
  object-fit: contain;
}

/* Larger, lightly blurred (blur-2) */
.culture-hero__blob-group--right .culture-hero__blob--lg {
  position: absolute;
  left: 0;
  top: 0;
  width: 419px;
  height: 419px;
  filter: blur(2px);
  transform: rotate(-8.82deg);
  object-fit: contain;
}

/* ── Blob group — bottom-right ── */
.culture-hero__blob-group--br {
  position: absolute;
  right: 28%;
  top: 152px;
  width: 295px;
  height: 295px;
  pointer-events: none;
}

/* Upper (blurred) */
.culture-hero__blob-group--br .culture-hero__blob--blurred {
  position: absolute;
  left: 0;
  top: 73px;
  width: 220px;
  height: 220px;
  filter: blur(100px);
  object-fit: contain;
}

/* Lower (sharp) */
.culture-hero__blob-group--br .culture-hero__blob--sharp {
  position: absolute;
  left: 19px;
  top: 0;
  width: 220px;
  height: 220px;
  object-fit: contain;
}

/* ── Blob group — left side (change-to-white glow) ──*/
.culture-hero__blob-group--left {
  position: absolute;
  left: 0;
  top: 68px;
  width: 466px;
  height: 466px;
  pointer-events: none;
}

/* Large outer glow (blur-4) */
.culture-hero__blob-group--left .culture-hero__blob--glow-lg {
  position: absolute;
  left: 0;
  top: 0;
  width: 402px;
  height: 402px;
  filter: blur(4px);
  transform: rotate(-10.16deg);
  object-fit: cover;
}

/* Inner focused glow (blur-100) */
.culture-hero__blob-group--left .culture-hero__blob--glow-sm {
  position: absolute;
  left: 92px;
  top: 188px;
  width: 216px;
  height: 216px;
  filter: blur(100px);
  transform: rotate(-10.16deg);
  object-fit: cover;
}

/* ── Page-title badge ── */
.culture-hero__badge {
  position: absolute;
  left: 50%;
  top: 195px;
  transform: translateX(-50%);
}

.culture-hero__badge-label {
  padding: 28px 36px;
  font-size: 44px;
}


/* ══════════════════════════════════════════════
   2. CULTURE NEWS
══════════════════════════════════════════════ */

.culture-news {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  width: 980px;
  max-width: calc(100% - var(--gutter-x) * 2);
  margin: 0 auto;
}


/* ── Featured article ── */

.culture-featured {
  --culture-featured-radius: 40px;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--white);
}

/* Full-coverage image */
.culture-featured__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--culture-featured-radius);
}

/* Gradient overlay at the bottom third */
.culture-featured__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to bottom, rgba(48, 44, 32, 0), #302c20);
  border-radius: 0 0 var(--culture-featured-radius) var(--culture-featured-radius);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-end;
}

.culture-featured__title {
  font-family: var(--f-bold);
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0;
  line-height: normal;
}

.culture-featured__excerpt {
  font-family: var(--f-medium);
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--white);
  letter-spacing: 0.8px;
  line-height: normal;
}

/* Date badge — top-left corner of the featured image */
.culture-featured__date {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  --corner-plate-offset: 10px;
  --corner-plate-radius: 36px;
  --corner-plate-concave-r: 26px;
  --corner-plate-layer: -1;
}

/* ── News card row ──*/

.culture-news__row {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  flex-shrink: 0;
}

/* Single card — grid so date overlays thumb */
.culture-news__card {
  max-width: calc(50% - 16px);
}

/* Thumbnail + date share same grid row */
.culture-news__card-thumbnail,
.culture-news__card-date {
  grid-row: 1;
  grid-column: 1;
}

.culture-news__card-date {
  justify-self: end;
  align-self: end;
  z-index: 12;
  position: relative;
}

.culture-news__card-date::before {
  background: var(--white);
}

.about-hero__badge-label,
.culture-featured__date .date-pill__label, 
.culture-news__card-date .date-pill__label {
  background: var(--gradient-brand);
  box-shadow: var(--shadow-glass-sm);
}

/* Thumbnail — background-image set via inline style */
.culture-news__card-thumbnail:hover {
  background-size: 108%;
}

.culture-news__card-thumbnail--1 {
  background-image: url('../images/Subtract-5.png');
}

.culture-news__card-thumbnail--2 {
  background-image: url('../images/Subtract 6.png');
}


/* Card text body */
.culture-news__card-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 12px;
  font-size: var(--fs-body);
  line-height: normal;
}

.culture-news__card-title {
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--raisin-800);
  letter-spacing: 0;
}

.culture-news__card-excerpt {
  font-family: var(--f-medium);
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--raisin-600);
  letter-spacing: 0.8px;
}

/* ── Pagination ── */
.culture-news__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
}

.culture-news__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-family: var(--f-bold);
  font-size: 16px;
  font-weight: 700;
  color: var(--raisin-400);
  background: var(--raisin-25);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.culture-news__pagination .page-numbers:hover ,
.culture-news__pagination .page-numbers.current {
  background: var(--moss-600);
  color: var(--white);
}

.culture-news__pagination .page-numbers.dots {
  pointer-events: none;
  color: var(--raisin-300);
}

.culture-news__pagination .page-numbers.prev,
.culture-news__pagination .page-numbers.next {
  font-size: 20px;
}

/* ================================================
   NEXGEN BROS — Culture Detail (Article) Page
================================================ */

/* ══════════════════════════════════════════════
   1. ARTICLE HERO
══════════════════════════════════════════════ */

.article-hero {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  padding-top: 180px;
}

.article-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}


/* ══════════════════════════════════════════════
   2. ARTICLE HEADER
══════════════════════════════════════════════ */

.article-header {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-self: center;
  width: 1000px;
  max-width: calc(100% - var(--gutter-x) * 2);
  margin: 0 auto;
}

.article-header__wrapper {
  display: flex;
  align-items: flex-start;
  align-self: center;
}

/* ── Date badge ── */
.article-header__date-badge {
  float: left;
  margin-right: 16px;
  margin-top: 16px;
}

.article-header__date-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  background-color: rgba(var(--black-rgb), 0.004);
  border-radius: 50px;
  backdrop-filter: blur(17px) brightness(100%) saturate(105%) hue-rotate(-3.8deg);
  -webkit-backdrop-filter: blur(17px) brightness(100%) saturate(105%) hue-rotate(-3.8deg);
  box-shadow: var(--shadow-glass);
}

.article-header__date-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 78% 58% at 7% 12%, rgba(var(--white-rgb),.50) 0%, transparent 60%),
    radial-gradient(ellipse 62% 46% at 93% 88%, rgba(var(--white-rgb),.26) 0%, transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.article-header__date-badge .date-pill__label {
  padding: 0;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-radius: 0;
}

.article-header__title {
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--raisin-800);
  width: 100%;
}

.article-body #article-title {
  display: none;
}

/* ══════════════════════════════════════════════
   3. ARTICLE BODY
══════════════════════════════════════════════ */

article .article-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 1000px;
  max-width: calc(100% - var(--gutter-x) * 2);
  margin-left: auto;
  margin-right: auto;
}

.article-body__lead {
  font-family: var(--f-medium);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.8px;
  line-height: 30px;
  color: var(--raisin-600);
  width: 100%;
}

/* ── Body paragraphs ── */
.article-body__text {
  font-family: var(--f-medium);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.8px;
  line-height: 30px;
  color: var(--raisin-600);
  width: 100%;
}

.article-body__closing {
  font-family: var(--f-medium);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.8px;
  line-height: 30px;
  color: var(--raisin-600);
  width: 100%;
}

.article-body__figure {
  width: 100%;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
}

.article-body__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* ── Share bar ── */
.article-body__share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 0;
  width: 100%;
  background-color: rgba(244, 245, 239, 0.20);
  border-radius: 12px;
  backdrop-filter: blur(2px) brightness(110%);
  -webkit-backdrop-filter: blur(2px) brightness(110%);
  box-shadow: var(--shadow-glass-sm);
}

.article-body__share-label {
  font-family: var(--f-medium);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.8px;
  line-height: 30px;
  color: var(--raisin-600);
  white-space: nowrap;
}

.article-body__share-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.article-body__share-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.article-body__share-link img {
  width: 20px;
  height: 20px;
  display: block;
  filter: grayscale(1) brightness(0.25);
  transition: filter 0.25s ease;
}

.article-body__share-link:hover img {
  filter: none;
}

.article-body p, .article-body li {
  font-family: var(--f-medium);
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: 0.8px;
  line-height: 1.7;
  color: var(--raisin-600);
  width: 100%;
}

/* ================================================
   NEXGEN BROS — Careers Page Styles
================================================ */
/* ══════════════════════════════════════════════
   0. PAGE BACKGROUND
══════════════════════════════════════════════ */

.careers-page-bg {
  padding-bottom: 0; /* footer handles its own spacing */
}


/* ══════════════════════════════════════════════
   1. CAREERS HERO
══════════════════════════════════════════════ */

.careers-hero {
    position: relative;
    width: 1488px;
    max-width: calc(100% - var(--gutter-x) * 2);
    margin: 0 auto var(--section-y);
    padding-top: 180px;
}

/* Cover image fills the rounded card */
.careers-hero__img {
    position: relative;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 60px;
    overflow: hidden;
    backdrop-filter: blur(2px) brightness(110%);
    -webkit-backdrop-filter: blur(2px) brightness(110%);
    box-shadow: var(--shadow-glass-sm);
    height: 300px;
}

/* Heading badge — left, sits 32px from top */
.careers-hero__badge {
    position: absolute;
    top: calc(180px + 32px);
    left: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    background-color: rgba(var(--black-rgb), 0.004);
    backdrop-filter: blur(8px) brightness(110%);
    -webkit-backdrop-filter: blur(2px) brightness(110%);
    box-shadow: var(--shadow-glass-sm);
    white-space: nowrap;
}

.careers-hero__badge-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 32px;
    border-radius: var(--r-pill);
    background-color: rgba(var(--black-rgb), 0.004);
    backdrop-filter: blur(2px) brightness(110%);
    -webkit-backdrop-filter: blur(2px) brightness(110%);
    box-shadow: var(--shadow-glass-sm);

    font-family: var(--f-bold);
    font-weight: 700;
    font-size: 34px;
    color: var(--white);
    letter-spacing: 0;
    line-height: normal;
    text-shadow: 0 1px 2px rgba(var(--black-rgb), 0.25);
}


/* ══════════════════════════════════════════════
   2. JOB LIST SECTION
══════════════════════════════════════════════ */

.job-list {
    width: 1488px;
    max-width: calc(100% - var(--gutter-x) * 2);
    margin: var(--section-y) auto 0;
}

/* ── 3-column grid ── */
.job-list__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}


/* ══════════════════════════════════════════════
   3. JOB CARD
══════════════════════════════════════════════ */

.job-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background-color: rgba(242, 240, 237, 0.50);
    border-radius: 16px;
    backdrop-filter: blur(2px) brightness(110%);
    -webkit-backdrop-filter: blur(2px) brightness(110%);
    box-shadow: var(--shadow-glass-sm);

    /* Smooth hover lift */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.job-card:hover {
    transform: translateY(-4px);
    box-shadow:
        var(--shadow-glass-sm),
        0 8px 24px rgba(var(--black-rgb), 0.08);
}

/* ── Card head: title + tags ── */
.job-card__head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.job-card__title {
    font-family: var(--f-bold);
    font-weight: 700;
    font-size: var(--fs-h3);
    letter-spacing: 0;
    line-height: normal;
    color: var(--raisin-800);
    margin: 0;
}

/* ── Tag pills row ── */
.job-card__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.job-card__tag {
    padding: 7px 14px;
    font-size: 16px;
}

/* ── Meta definition list ── */
.job-card__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.job-card__meta-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.job-card__meta-label {
    font-family: var(--f-book);
    font-weight: 400;
    font-size: var(--fs-small);
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--raisin-600);
    white-space: nowrap;
    margin: 0;
    float: none;
}

.job-card__meta-value {
    font-family: var(--f-medium);
    font-weight: 500;
    font-size: var(--fs-small);
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--raisin-600);
    white-space: nowrap;
    margin: 0;
}
/* ================================================
   NEXGEN BROS — Career Detail Page Styles
================================================ */
/* ══════════════════════════════════════════════
   1. CAREER DETAIL HERO
══════════════════════════════════════════════ */

.job-hero {
  position: relative;
  width: 1488px;
  max-width: calc(100% - var(--gutter-x) * 2);
  margin: 0 auto;
  padding-top: 180px;
  padding-bottom: 60px;
}

/* ── Left column: job info ── */
.job-hero__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  max-width: 750px;
}

/* Job title */
.job-hero__title {
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 48px;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--raisin-800);
  margin: 0;
}

/* Tags row */
.job-hero__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.job-hero__tag {
  padding: 14px 24px;
  font-size: 20px;
}

/* Meta info — 2-column grid */
.job-hero__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  padding: 16px;
  background-color: var(--moss-25);
  border-radius: 16px;
  margin-top: 24px;
  margin-bottom: 0;
}

.job-hero__meta-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.job-hero__meta-label {
  font-family: var(--f-book);
  font-weight: 400;
  font-size: var(--fs-body);
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--raisin-300);
  white-space: nowrap;
  margin: 0;
}

.job-hero__meta-value {
  font-family: var(--f-medium);
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--raisin-600);
  white-space: nowrap;
  margin: 0;
}


/* ── Right column: 3D visual — absolute so it doesn't push job-body down ── */
.job-hero__visual {
  position: absolute;
  top: 180px;
  right: 0;
  width: clamp(280px, 30vw, 480px);
  height: auto;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 900px;
}

.job-hero__visual-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

.job-hero__badge-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform-style: preserve-3d;
  animation: job-spin-3d 25s linear infinite;
}

.job-hero__badge-svg {
  width: 100%;
  height: 100%;
}

.job-hero__badge-text {
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 24px;
  fill: var(--raisin-800);
  letter-spacing: 7.5px;
  text-transform: uppercase;
}

@keyframes job-spin-3d {
  from { transform: rotateX(40deg) rotateZ(0deg); }
  to   { transform: rotateX(40deg) rotateZ(360deg); }
}


/* ══════════════════════════════════════════════
   2. CAREER DETAIL BODY
══════════════════════════════════════════════ */

.job-body {
  width: 1488px;
  max-width: calc(100% - var(--gutter-x) * 2);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.job-body__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.job-body__heading {
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: 0;
  line-height: normal;
  color: var(--raisin-800);
}

/* ── Bullet list ── */
.job-body__list, .job-body__content ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 24px;
  list-style: disc;
  margin-bottom: 36px;
}

.job-body__list-item, .job-body__content ul li {
  font-family: var(--f-medium);
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: 0.4px;
  line-height: 1.7;
}

/* ══════════════════════════════════════════════
   3. CTA BUTTON
══════════════════════════════════════════════ */

.job-body__cta {
  align-self: flex-start;
  cursor: pointer;
  border: none;
}

.job-body__cta-label {
  padding: 20px 24px;
  font-size: 14px;
}


/* ══════════════════════════════════════════════
   4. APPLY MODAL
══════════════════════════════════════════════ */

/* ── Overlay ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--black-rgb), 0.35);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay--visible {
  opacity: 1;
  visibility: visible;
}

/* ── Modal card ── */
.modal {
  width: 594px;
  max-width: calc(100vw - 32px);
  background: var(--white);
  border-radius: 40px;
  padding: 40px;
  box-shadow: 0 24px 80px rgba(var(--black-rgb), 0.18);
  transform: translateY(24px) scale(0.97);
  transition: transform 0.3s ease;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.modal-overlay--visible .modal {
  transform: translateY(0) scale(1);
}

/* ── Title ── */
.modal__title {
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0;
  line-height: normal;
  color: var(--raisin-800);
  margin: 0 0 32px;
}

/* ── Form ── */
.modal__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Field wrapper ── */
.modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal__label {
  font-family: var(--f-medium);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 21px;
  color: var(--raisin-600);
}

/* ── Text input ── */
.modal__input {
  padding: 12px 20px;
}

.modal__select, .modal__input {
  width: 100%;
  border-radius: 8px;
  background-color: var(--moss-25);
  font-family: var(--f-medium);
  font-weight: 500;
  font-size: 16px;
  color: var(--raisin-800);
  outline: none;
  transition: box-shadow 0.2s ease;
  border: 1px solid var(--moss-50);
}

.modal__input::placeholder {
  color: var(--raisin-300);
}

/* ── Select dropdown ── */
.modal__select-wrap {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.modal__select {
  padding: 12px 48px 12px 20px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.modal__select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--raisin-400);
}

/* ── Dropzone (file upload) ── */
.modal__dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 135px;
  border: 1px dashed var(--moss-100);
  border-radius: 8px;
  background-color: var(--moss-25);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.modal__dropzone:hover,
.modal__dropzone--hover {
  border-color: #26a9e0;
  background-color: rgba(38, 169, 224, 0.06);
}

.modal__file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.modal__dropzone-text {
  font-family: var(--f-medium);
  font-weight: 500;
  font-size: 16px;
  color: var(--raisin-400);
  pointer-events: none;
  text-align: center;
  padding: 16px;
}

/* ── Action buttons row ── */
.modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 16px;
}

.modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px 14px 24px;
  border-radius: var(--r-pill);
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
  border: none;
}

.modal__btn:hover {
  transform: translateY(-1px);
}

/* Cancel button — outlined */
.modal__btn--cancel {
  background: var(--white);
  color: var(--raisin-700);
  border: 1px solid var(--raisin-400);
}

.modal__btn--cancel:hover {
  border-color: var(--raisin-600);
}

/* Submit button — gradient */
.modal__btn--submit {
  color: var(--white);
}

.modal__btn--submit:hover {
  opacity: 0.88;
}

.modal__btn--submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Status message inside modal */
.modal__status {
  font-family: var(--f-medium);
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 8px;
  display: none;
}

.modal__status--success {
  display: block;
  background: rgba(var(--success-bg-rgb), 0.1);
  color: var(--success-text);
  border: 1px solid rgba(var(--success-bg-rgb), 0.3);
}

.modal__status--error {
  display: block;
  background: rgba(var(--error-bg-rgb), 0.08);
  color: var(--error-text);
  border: 1px solid rgba(var(--error-bg-rgb), 0.2);
}


/* ================================================
   FLICKITY SLIDER OVERRIDES
================================================ */

/* ── Community Posts Carousel ── */

.community__posts.flickity-enabled {
  display: block;
  width: 100%;
  max-width: 100%;
}

.community__posts.flickity-enabled .post-card {
  width: calc((100% - 64px) / 3);
  margin-right: 32px;
  flex: none;
  max-width: 100%;
}

/* ── Employee Stories Carousel ── */

.employee-stories__card.flickity-enabled {
  display: block;
  width: min(80vw, 1374px);
  max-width: 100%;
}

.employee-stories__card.flickity-enabled .employee-stories__panels {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  margin-right: 0;
}

.community__posts.flickity-enabled .flickity-viewport,
.community__posts.flickity-enabled .flickity-slider,
.employee-stories__card.flickity-enabled .flickity-viewport,
.employee-stories__card.flickity-enabled .flickity-slider {
  width: 100%;
  max-width: 100%;
}

/* ── Shared Flickity Prev/Next Buttons — bottom center ── */


.flickity-enabled .flickity-prev-next-button {
  position: absolute;
  top: auto;
  bottom: auto;
  transform: none;
  display: flex;
  padding: 16px 24px;
  align-items: center;
  gap: 10px;
  border-radius: 60px;
  background: rgba(36, 34, 30, 0.20);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  width: auto;
  height: auto;
  box-shadow: var(--shadow-glass-sm);
}

.flickity-enabled .flickity-prev-next-button:hover {
  background: rgba(36, 34, 30, 0.40);
}

.employee-stories-slider.flickity-enabled .flickity-prev-next-button {
  background: rgba(234, 232, 232, 0.25);
  bottom: -60px;
}
.employee-stories-slider.flickity-enabled .flickity-prev-next-button:hover {
  background: rgba(234, 232, 232, 0.80);
}
.community__posts.flickity-enabled .flickity-prev-next-button .flickity-button-icon {
  fill: var(--raisin-50);
} 

.flickity-enabled .flickity-prev-next-button .flickity-button-icon {
  width: 20px;
  height: 20px;
  fill: var(--raisin-300);
  position: static;
  left: auto;
  top: auto;
}

.flickity-enabled .flickity-prev-next-button.previous {
  left: calc(50% - 80px);
  right: auto;
}

.flickity-enabled .flickity-prev-next-button.next {
  right: calc(50% - 80px);
  left: auto;
}

.culture-banner__stack.flickity-enabled .flickity-prev-next-button {
  bottom: -80px;
}

/* ── Fix stretched-link inside Flickity cells ── */

.flickity-enabled .post-card {
  position: relative;
}



/* ── Clip expand — full-bleed sections (community, employee-stories) ── */
[data-reveal="clip"] {
  clip-path: inset(6% 3% 6% 3% round var(--r-card));
  opacity: 0.3;
  scale: 0.97;
  transition:
    clip-path 1s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    scale 1s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="clip"].is-revealed {
  clip-path: inset(0 0 0 0 round 0px);
  opacity: 1;
  scale: 1;
}

/* ── Rise — subtle scale + fade (about, culture-banner) ── */
[data-reveal="rise"] {
  opacity: 0;
  scale: 0.92;
  filter: blur(6px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    scale 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="rise"].is-revealed {
  opacity: 1;
  scale: 1;
  filter: blur(0);
}

/* ── Stagger — children cascade (partners, features) ── */
[data-reveal="stagger"] {
  opacity: 1;
}

[data-reveal="stagger"] > * {
  opacity: 0;
  scale: 0.85;
  filter: blur(4px);
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    scale 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="stagger"].is-revealed > * {
  opacity: 1;
  scale: 1;
  filter: blur(0);
}

/* ── Split — children slide from alternating sides (2-col layouts) ── */
[data-reveal="split"] {
  opacity: 1;
}

[data-reveal="split"] > * {
  opacity: 0;
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    translate 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="split"] > *:nth-child(odd) {
  translate: -80px 0;
}

[data-reveal="split"] > *:nth-child(even) {
  translate: 80px 0;
}

[data-reveal="split"].is-revealed > * {
  opacity: 1;
  translate: 0 0;
}

/* Stagger delays for up to 12 children */
[data-reveal~="stagger"].is-revealed > *:nth-child(1)  { transition-delay: 0s; }
[data-reveal~="stagger"].is-revealed > *:nth-child(2)  { transition-delay: 0.1s; }
[data-reveal~="stagger"].is-revealed > *:nth-child(3)  { transition-delay: 0.2s; }
[data-reveal~="stagger"].is-revealed > *:nth-child(4)  { transition-delay: 0.3s; }
[data-reveal~="stagger"].is-revealed > *:nth-child(5)  { transition-delay: 0.4s; }
[data-reveal~="stagger"].is-revealed > *:nth-child(6)  { transition-delay: 0.5s; }
[data-reveal~="stagger"].is-revealed > *:nth-child(7)  { transition-delay: 0.6s; }
[data-reveal~="stagger"].is-revealed > *:nth-child(8)  { transition-delay: 0.7s; }
[data-reveal~="stagger"].is-revealed > *:nth-child(9)  { transition-delay: 0.8s; }
[data-reveal~="stagger"].is-revealed > *:nth-child(10) { transition-delay: 0.9s; }
[data-reveal~="stagger"].is-revealed > *:nth-child(11) { transition-delay: 1.0s; }
[data-reveal~="stagger"].is-revealed > *:nth-child(12) { transition-delay: 1.1s; }

/* ================================================
   CONTACT PAGE
================================================ */

.contact-hero {
  padding: 180px var(--gutter-x) var(--section-y);
  text-align: center;
}

.contact-hero__title {
  font-size: clamp(32px, 4vw, 44px);
  margin-bottom: 0;
}

.contact-hero__subtitle {
  font-family: var(--f-medium);
  font-size: var(--fs-body);
  color: var(--raisin-400);
  letter-spacing: 2px;
}

.contact-section {
  width: 1488px;
  max-width: calc(100% - var(--gutter-x) * 2);
  margin: 0 auto;
}

.contact-section__inner {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.contact-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-form__row {
  display: flex;
  gap: 24px;
}

.contact-form__row > .contact-form__field {
  flex: 1;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form__label {
  font-family: var(--f-medium);
  font-size: 16px;
  color: var(--raisin-600);
}

.contact-form__required {
  color: var(--error-text);
}

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  width: 100%;
  padding: 14px 20px;
  border: 1px solid var(--moss-50);
  border-radius: 12px;
  background: var(--moss-25);
  font-family: var(--f-medium);
  font-size: 16px;
  color: var(--raisin-800);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), 0.15);
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--raisin-300);
}

.contact-form__select-wrap {
  position: relative;
}

.contact-form__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 48px;
}

.contact-form__select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--raisin-400);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 150px;
}

.contact-form__actions {
  display: flex;
  justify-content: center;
}

.contact-form__submit {
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}

.contact-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.contact-form__submit-label {
  padding: 18px 40px;
  font-size: 16px;
}

.contact-form__status {
  font-family: var(--f-medium);
  font-size: 16px;
  padding: 12px 20px;
  border-radius: 12px;
  display: none;
}

.contact-form__status--success {
  display: block;
  background: rgba(var(--success-bg-rgb), 0.1);
  color: var(--success-text);
  border: 1px solid rgba(var(--success-bg-rgb), 0.3);
}

.contact-form__status--error {
  display: block;
  background: rgba(var(--error-bg-rgb), 0.08);
  color: var(--error-text);
  border: 1px solid rgba(var(--error-bg-rgb), 0.2);
}

/* Dropzone */
.contact-form__dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border: 1px dashed var(--moss-100);
  border-radius: 12px;
  background: var(--moss-25);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.contact-form__dropzone:hover,
.contact-form__dropzone--hover {
  border-color: var(--cyan);
  background: rgba(var(--cyan-rgb), 0.04);
}

.contact-form__file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.contact-form__dropzone-text {
  font-family: var(--f-medium);
  font-size: 16px;
  color: var(--raisin-400);
  pointer-events: none;
  text-align: center;
  padding: 16px;
}

.contact-map {
  width: 480px;
  min-height: 500px;
  flex-shrink: 0;
  overflow: hidden;
}

.contact-map__iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 500px;
}

/* ================================================
   404 PAGE
================================================ */

.error-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  padding: 180px var(--gutter-x) 0;
  gap: 32px;
}

.error-404 .page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.error-404 .page-header::before {
  content: '404';
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: clamp(72px, 12vw, 140px);
  line-height: 1;
  background: var(--gradient-brand-diagonal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.error-404 .page-title {
  font-family: var(--f-bold);
  font-size: var(--fs-h2);
  color: var(--raisin-800);
  text-align: center;
}

.error-404 .page-content {
  max-width: 560px;
}

.error-404 .page-content p {
  font-family: var(--f-medium);
  font-size: var(--fs-body);
  color: var(--raisin-400);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Search form */
.error-404 .search-form {
  display: flex;
  gap: 8px;
  width: 100%;
}
.error-404 .search-form label {
  width: 100%;
}
.error-404 .search-field {
  flex: 1;
  padding: 14px 20px;
  border: 1px solid var(--moss-50);
  border-radius: var(--r-pill);
  background: var(--moss-25);
  font-family: var(--f-medium);
  font-size: 16px;
  color: var(--raisin-800);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}

.error-404 .search-field:focus {
  border-color: var(--cyan);
}

.error-404 .search-field::placeholder {
  color: var(--raisin-300);
}

.error-404 .search-submit {
  padding: 14px;
  border: none;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: var(--white);
  cursor: pointer;
  transition: opacity 0.2s;
  box-shadow: var(--shadow-glass-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.error-404 .search-submit:hover {
  opacity: 0.88;
}

@media (max-width: 767px) {
  .error-404 {
    padding-top: 120px;
    gap: 24px;
  }
  .error-404 .search-form {
    flex-direction: column;
  }
  .error-404 .search-submit {
    width: 100%;
  }
}

/* ================================================
   SEARCH RESULTS PAGE
================================================ */
.search-results #secondary {
  display: none;
}
.search-results .site-main {
  padding: 180px var(--gutter-x) var(--section-y);
  width: 100%;
  max-width: var(--page-w);
  margin: 0 auto;
}

.site-main > .page-header {
  margin-bottom: 40px;
}

.site-main > .page-header .page-title {
  font-family: var(--f-bold);
  font-size: var(--fs-h2);
  color: var(--raisin-800);
}

.site-main > .page-header .page-title span {
  color: var(--error-text);
}

/* ── Search result item ── */
.site-main article {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 0;
  border-bottom: 1px solid var(--moss-50);
}

.site-main article:last-of-type {
  border-bottom: none;
}

.site-main .entry-title {
  font-family: var(--f-bold);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--raisin-800);
  margin: 0;
}
.site-main .entry-meta {
  display: none;
} 
.site-main .entry-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.site-main .entry-title a:hover {
  color: var(--raisin-600);
}

.site-main .entry-summary p {
  font-family: var(--f-book);
  font-size: var(--fs-body);
  color: var(--raisin-600);
  line-height: 1.6;
  margin: 0;
}

.site-main .entry-footer {
  font-family: var(--f-medium);
  font-size: var(--fs-small);
  color: var(--raisin-300);
}

/* ── Posts navigation ── */
.posts-navigation {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--moss-50);
}

.posts-navigation .nav-links {
  display: flex;
  gap: 16px;
  width: 100%;
  justify-content: space-between;
}

.posts-navigation .nav-links a {
  font-family: var(--f-bold);
  font-size: var(--fs-body);
  color: var(--raisin-800);
  text-decoration: none;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: var(--moss-25);
  transition: background 0.2s;
}

.posts-navigation .nav-links a:hover {
  background: var(--moss-50);
}

/* ── No results ── */
.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 180px var(--gutter-x) var(--section-y);
  gap: 24px;
  min-height: 50vh;
}

.no-results .page-title {
  font-family: var(--f-bold);
  font-size: var(--fs-h2);
  color: var(--raisin-800);
}

.no-results .page-content {
  max-width: 560px;
}

.no-results .page-content p {
  font-family: var(--f-medium);
  font-size: var(--fs-body);
  color: var(--raisin-400);
  line-height: 1.6;
  margin-bottom: 24px;
}

.no-results .search-form {
  display: flex;
  gap: 8px;
  width: 100%;
}

.no-results .search-field {
  flex: 1;
  padding: 14px 20px;
  border: 1px solid var(--moss-50);
  border-radius: var(--r-pill);
  background: var(--moss-25);
  font-family: var(--f-medium);
  font-size: 16px;
  color: var(--raisin-800);
  outline: none;
  transition: border-color 0.2s;
}

.no-results .search-field:focus {
  border-color: var(--cyan);
}

.no-results .search-submit {
  padding: 14px;
  border: none;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: var(--white);
  cursor: pointer;
  transition: opacity 0.2s;
  box-shadow: var(--shadow-glass-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.no-results .search-submit:hover {
  opacity: 0.88;
}

@media (max-width: 1023px) {
  .site-main { padding-top: 140px; }
  .no-results { padding-top: 140px; }
}

@media (max-width: 767px) {
  .site-main { padding-top: 110px; }
  .no-results { padding-top: 110px; }
  .no-results .search-form { flex-direction: column; }
  .no-results .search-submit { width: 100%; }
}

/* ================================================
   SEARCH FORM — Global (shared by 404, no-results)
================================================ */

.search-form__wrap {
  position: relative;
  display: flex;
  gap: 8px;
  width: 100%;
}

/* ── Live search results dropdown ── */
.live-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(var(--black-rgb), 0.12);
  overflow: hidden;
  z-index: 50;
}

.live-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  text-decoration: none;
  transition: background 0.15s;
}

.live-search-item:hover {
  background: var(--moss-25);
}

.live-search-item__title {
  font-family: var(--f-medium);
  font-size: var(--fs-body);
  color: var(--raisin-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-search-item__type {
  font-family: var(--f-book);
  font-size: var(--fs-small);
  color: var(--raisin-300);
  white-space: nowrap;
  flex-shrink: 0;
}

.live-search-empty {
  padding: 16px 20px;
  font-family: var(--f-medium);
  font-size: var(--fs-body);
  color: var(--raisin-400);
  text-align: center;
}

/* ── Respect prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal="stagger"] > *,
  [data-reveal="split"] > * {
    clip-path: none !important;
    opacity: 1 !important;
    scale: 1 !important;
    filter: none !important;
    translate: none !important;
    transition: none !important;
  }
}


/* ================================================
   RESPONSIVE — Culture Page
================================================ */

/* ── Laptop (≤1440px) ── */
@media (max-width: 1440px) {
  .culture-hero {
    overflow: hidden;
  }
  .culture-hero__blob-group--right {
    width: 300px;
    height: 300px;
  }
  .culture-hero__blob-group--right .culture-hero__blob--lg {
    width: 300px;
    height: 300px;
  }
  .culture-hero__blob-group--right .culture-hero__blob--sm {
    width: 200px;
    height: 200px;
    top: 160px;
  }
  .culture-hero__blob-group--br {
    width: 220px;
    height: 220px;
  }
  .culture-hero__blob-group--br .culture-hero__blob--blurred,
  .culture-hero__blob-group--br .culture-hero__blob--sharp {
    width: 160px;
    height: 160px;
  }
}

@media (max-width: 1023px) {
  .culture-hero {
    min-height: auto;
    margin-top: 140px;
  }

  .culture-hero__rings,
  .culture-hero__blob-group--right,
  .culture-hero__blob-group--left,
  .culture-hero__blob-group--br,
  .culture-hero__blob--tc {
    display: none;
  }

  .culture-hero__badge {
    position: relative;
    left: 50%;
    top: auto;
    transform: translateX(-50%);
    margin: 60px 0 40px;
  }
  .culture-hero__badge-label {
    font-size: 32px;
    padding: 20px 28px;
  }

  .culture-news {
    gap: 40px;
  }
  .culture-featured__overlay {
    height: 40%;
    padding: 32px;
  }

  .culture-news__row {
    gap: 24px;
  }
  .date-pill--lg .date-pill__label {
    padding: 10px 24px;
    font-size: 24px;
  }
  .culture-featured {
    --culture-featured-radius: 32px;
  }
  .culture-featured__date {
    --corner-plate-concave-r: 20px;
  }
}

@media (max-width: 767px) {
  .culture-hero {
    margin-top: 110px;
  }

  .culture-hero__badge {
    margin: 20px auto 30px;
  }
  .culture-hero__badge-label {
    font-size: 24px;
    padding: 16px 24px;
  }

  .culture-news {
    gap: 32px;
  }
  .culture-featured {
    aspect-ratio: 3 / 4;
  }
  .culture-featured__overlay {
    padding: 20px;
    height: 50%;
    border-radius: 0 0 24px 24px;
    gap: 8px;
  }
  .culture-featured {
    --culture-featured-radius: 24px;
  }
  .culture-featured__date {
    --corner-plate-offset: 5px;
    --corner-plate-radius: 20px;
    --corner-plate-concave-r: 16px;
  }
  .culture-news__row {
    flex-direction: column;
    gap: 32px;
  }
  .culture-news__card {
    max-width: none;
  }
  .culture-news__card-thumbnail {
    border-radius: 20px;
  }
  .date-pill--sm .date-pill__label {
    padding: 8px 12px;
    font-size: 13px;
  }
  .date-pill--lg .date-pill__label {
    padding: 8px 20px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .culture-hero__badge-label {
    font-size: 20px;
    padding: 14px 20px;
  }
  .culture-featured__overlay {
    padding: 16px;
  }
  .culture-news__card-thumbnail {
    border-radius: 16px;
  }
  .article-header__date-badge {
    float: none;
    margin: 0;
  }
}


/* ================================================
   RESPONSIVE — Article Detail Page
================================================ */

@media (max-width: 1023px) {
  .article-hero {
    padding-top: 120px;
  }

  .article-header__wrapper {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .article-header__title {
    font-size: 28px;
  }
  .article-body__lead {
    font-size: 16px;
    line-height: 1.6;
  }
}


/* ================================================
   RESPONSIVE — Careers Page
================================================ */

@media (max-width: 1023px) {
  .careers-hero {
    padding-top: 140px;
  }
  .careers-hero__img {
    border-radius: 32px;
    height: 240px;
  }
  .careers-hero__badge {
    top: calc(140px + 24px);
    left: 24px;
  }
  .careers-hero__badge-label {
    font-size: 24px;
    padding: 16px 24px;
  }
  .job-list__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .careers-hero {
    padding-top: 120px;
  }
  .careers-hero__img {
    border-radius: 24px;
    height: 200px;
  }
  .careers-hero__badge {
    top: calc(110px + 16px);
    left: 16px;
  }
  .careers-hero__badge-label {
    font-size: 18px;
    padding: 12px 18px;
  }
  .job-list__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .job-card {
    padding: 20px;
    gap: 16px;
  }
  .job-card__tags {
    gap: 8px;
  }
  .job-card__tag {
    padding: 6px 12px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .careers-hero__img {
    border-radius: 20px;
  }
  .job-card {
    padding: 16px;
  }
}


/* ================================================
   RESPONSIVE — Job Detail Page
================================================ */

@media (max-width: 1023px) {
  .job-hero {
    padding-top: 140px;
  }
  .job-hero__visual {
    display: none;
  }
  .job-hero__content {
    max-width: 100%;
  }
  .job-hero__tag {
    padding: 12px 20px;
    font-size: 18px;
  }
  .job-hero__title {
    font-size: 36px;
  }
}

@media (max-width: 767px) {
  .job-hero {
    padding-top: 110px;
    padding-bottom: 32px;
  }
  .job-hero__content {
    gap: 16px;
  }
  .job-hero__tags {
    gap: 8px;
  }
  .job-hero__tag {
    padding: 8px 14px;
    font-size: 14px;
  }
  .job-hero__meta {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px;
    margin: 0;
    border-radius: 12px;
  }
  .job-body__list, .job-body__content ul {
    padding-left: 20px;
    margin-bottom: 24px;
  }
  /* Modal mobile */
  .modal {
    border-radius: 24px;
    padding: 24px;
  }
  .modal__title {
    font-size: 22px;
    margin-bottom: 20px;
  }
  .modal__actions {
    flex-direction: column;
    gap: 8px;
  }
  .modal__btn {
    width: 100%;
    justify-content: center;
  }
}


/* ================================================
   RESPONSIVE — Contact Page
================================================ */

@media (max-width: 1023px) {
  .contact-hero {
    padding-top: 140px;
  }
  .contact-section__inner {
    flex-direction: column;
    gap: 40px;
  }

  .contact-section__inner .contact-form {
    width: 100%;
  }

  .contact-map {
    width: 100%;
    max-width: 600px;
    min-height: 350px;
    align-self: center;
  }
  .contact-map iframe {
    min-height: 350px;
  }
}

@media (max-width: 767px) {
  .contact-hero {
    padding-top: 110px;
  }
  .contact-section__inner {
    gap: 32px;
  }
  .contact-form {
    gap: 16px;
  }
  .contact-form__input,
  .contact-form__select,
  .contact-form__textarea {
    padding: 12px 16px;
    font-size: 15px;
    border-radius: 10px;
  }
  .contact-form__label {
    font-size: 14px;
  }
  .contact-form__textarea {
    min-height: 120px;
  }
  .contact-form__dropzone {
    min-height: 100px;
    border-radius: 10px;
  }
  .contact-form__dropzone-text {
    font-size: 14px;
  }
  .contact-form__submit-label {
    padding: 14px 32px;
    font-size: 14px;
  }
  .contact-map {
    min-height: 250px;
  }
  .contact-map iframe {
    min-height: 250px;
  }
}

.wp-block-image .wp-element-caption {
  text-align: center;
}