/* ============================================================
   GNG main styles — pixel-perfect from Figma.
   Desktop values from 1440px frames; mobile (<768px) from 375px
   frames; tablets keep desktop structure fluid.
   Image/icon slots (.img-slot) are placeholders until client
   assets land in /images — each shows its expected file path.
   ============================================================ */

/* ---------- Base ---------- */

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: 1.1;
  letter-spacing: 0.16px;
  color: var(--text-main);
  background: var(--bg-main);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
}

p { margin: 0; }
a { text-decoration: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; }

.container-gng {
  max-width: calc(var(--container-max) + var(--page-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

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

/* ---------- Placeholder slots for client assets ---------- */

.img-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0 12px, rgba(0, 0, 0, 0.06) 12px 24px);
  outline: 1px dashed rgba(0, 0, 0, 0.18);
  outline-offset: -1px;
}

.img-slot::after {
  content: attr(data-asset);
  position: absolute;
  inset: auto 4px 4px 4px;
  font: 500 10px/1.2 ui-monospace, Menlo, monospace;
  letter-spacing: 0;
  color: rgba(0, 0, 0, 0.45);
  text-align: center;
  word-break: break-all;
  pointer-events: none;
}

/* slots sitting on red surfaces */
.img-slot--light,
.site-logo__ph, .footer-logo__ph,
.footer-social__item .img-slot, .site-footer__bg.img-slot,
.hero__bg-img.img-slot, .marquee__strip.img-slot {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 12px, rgba(255, 255, 255, 0.12) 12px 24px);
  outline-color: rgba(255, 255, 255, 0.35);
}

.site-logo__ph::after, .footer-logo__ph::after,
.footer-social__item .img-slot::after, .site-footer__bg.img-slot::after,
.hero__bg-img.img-slot::after, .marquee__strip.img-slot::after {
  color: rgba(255, 255, 255, 0.55);
}

.site-logo__ph::after, .footer-social__item .img-slot::after { content: none; }

/*
 * Real images, once uploaded (img_slot() in includes/helpers.php swaps the
 * placeholder <span> above for one of these <img> tags automatically).
 * Every call site already passes its own layout class for width/height, so
 * this only adds how the photo should fill that box: contain by default —
 * safe for logos and wordmarks, never crops — with cover opted into by name
 * for the boxes that are genuinely full-bleed photos.
 */
.img-real {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detail-card__image.img-real,
.story-split-detail__image.img-real,
.detail-gallery__item.img-real,
.article__image.img-real,
.team-card__photo.img-real,
.pillar-card__visual.img-real,
.news-card__img.img-real,
.principles__media.img-real,
.story-split__media.img-real {
  object-fit: cover;
}

/* ---------- Buttons (figma "button" component 1662:478/503) ---------- */

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 44px;
  padding: 4px 4px 4px 24px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 16px;
  line-height: 0.9;
  letter-spacing: -0.32px;
  white-space: nowrap;
}

.btn-pill__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: none;
}

.btn-pill__icon .icon-arrow { width: 14px; height: 14px; }

.btn-pill--primary {
  background: var(--white);
  color: var(--text-main);
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.03));
}

.btn-pill--primary .btn-pill__icon { background: var(--brand); color: var(--white); }

.btn-pill--secondary {
  background: var(--text-main);
  color: var(--white);
  border: 1.5px solid var(--border-soft);
}

.btn-pill--secondary .btn-pill__icon { background: var(--white); color: var(--text-main); }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  color: var(--brand);
  font-weight: 700;
  font-size: 16px;
  line-height: 0.9;
  letter-spacing: -0.32px;
  white-space: nowrap;
}

.btn-text .icon-arrow { width: 14px; height: 14px; }

/* Language switcher — only rendered on a multilingual site */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 16px;
}

.lang-switch__item {
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.28px;
}

.lang-switch--mobile { margin: 24px 0 0; }

.lang-switch__item.is-active {
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
}

/* ---------- Header (figma 3729:1392 / 3634:2644) ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(212, 24, 41, 0.85);
  -webkit-backdrop-filter: blur(17px);
  backdrop-filter: blur(17px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--page-pad);
}

.site-logo {
  position: relative;
  display: block;
  width: 85px;
  height: 32px;
  flex: none;
}

.site-logo__ph { position: absolute; inset: 0; }

.site-logo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-logo__text, .footer-logo__text {
  position: relative;
  font-family: var(--font-serif);
  color: var(--white);
  font-size: 24px;
  letter-spacing: 1px;
}

.site-nav__list {
  display: flex;
  align-items: center;
}

.site-nav__link {
  display: block;
  padding: 12px 16px;
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.14;
  letter-spacing: -0.32px;
  white-space: nowrap;
}

.menu-toggle { display: none; }

/* Mobile menu panel */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 100;
  background: rgba(212, 24, 41, 0.97);
  -webkit-backdrop-filter: blur(17px);
  backdrop-filter: blur(17px);
  padding: 24px 16px;
  overflow-y: auto;
}

.mobile-menu__link {
  display: block;
  padding: 12px 0;
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.14;
  letter-spacing: -0.32px;
}

@media (max-width: 767.98px) {
  .site-nav { display: none; }

  .site-header__inner {
    justify-content: flex-start;
    gap: 12px;
    padding: 20px 16px;
  }

  .menu-toggle {
    display: block;
    width: 36px;
    height: 36px;
    position: relative;
    flex: none;
  }

  .menu-toggle__icon i {
    position: absolute;
    left: 50%;
    width: 16px;
    height: 2px;
    margin-left: -8px;
    border-radius: 1px;
    background: var(--white);
    transition: transform 0.25s, opacity 0.25s;
  }

  .menu-toggle__icon i:nth-child(1) { top: 11px; }
  .menu-toggle__icon i:nth-child(2) { top: 17px; }
  .menu-toggle__icon i:nth-child(3) { top: 23px; }

  body.menu-open .menu-toggle__icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.menu-open .menu-toggle__icon i:nth-child(2) { opacity: 0; }
  body.menu-open .menu-toggle__icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

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

/* ---------- Hero (figma 1608:907 / 1614:596) ---------- */

.hero {
  position: relative;
  min-height: 740px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 160px var(--page-pad);
  overflow: hidden;
  color: var(--white);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--brand-deep);
}

.hero__bg-img {
  position: absolute;
  inset: 0;
  left: -5.8%;
  width: 121%;
  height: 100%;
  object-fit: cover;
}

.hero__bg-gradient {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(212, 24, 41, 0) 62.15%, rgb(212, 24, 41) 95%),
    linear-gradient(90deg, rgba(171, 0, 32, 0.6) 14.16%, rgba(171, 0, 32, 0) 57.7%);
}

.hero__inner { position: relative; z-index: 1; }

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  width: 612px;
  max-width: 100%;
}

.hero__title {
  font-size: var(--h1-size);
  line-height: 0.9;
  letter-spacing: -1.92px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 417px;
  max-width: 100%;
}

.hero__tagline {
  font-weight: 700;
  font-size: 16px;
  line-height: 0.9;
  letter-spacing: -0.32px;
}

.hero__desc {
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

/* Marquee — partner logo strip (2616x114 masked image) */
.hero__marquee {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 114px;
  z-index: 1;
  overflow: hidden;
}

.marquee__track {
  display: flex;
  gap: 24px;
  width: max-content;
  height: 100%;
  animation: marquee 40s linear infinite;
}

.marquee__strip {
  width: 2616px;
  height: 114px;
  flex: none;
}

@keyframes marquee {
  to { transform: translateX(-2640px); }
}

/* individually-picked logos (Pages → Home). The track renders the picked
   set twice back to back and loops by exactly -50%; each logo owns its
   trailing space via margin (not the track's gap) so the two halves are
   pixel-identical widths and the loop has no seam, regardless of how many
   logos are picked or how wide each one is. */
.marquee__track--logos {
  gap: 0;
  animation-name: marquee-logos;
}

.marquee__logo {
  height: 56px;
  width: auto;
  flex: none;
  margin-right: 48px;
}

@keyframes marquee-logos {
  to { transform: translateX(-50%); }
}

@media (max-width: 767.98px) {
  .hero {
    min-height: 740px;
    padding: 113px 16px 40px;
    justify-content: flex-start;
  }

  .hero__bg { background: var(--brand-deep); }

  .hero__bg-img {
    inset: auto 0 0 0;
    left: -50%;
    width: 200%;
    height: 50%;
  }

  .hero__bg-gradient {
    background-image:
      linear-gradient(180deg, rgba(212, 24, 41, 0) 62.15%, rgb(212, 24, 41) 95%),
      linear-gradient(180deg, rgb(184, 0, 34) 50.07%, rgba(171, 0, 32, 0) 61.74%);
  }

  .hero__content {
    align-items: center;
    gap: 28px;
    width: 100%;
    text-align: center;
  }

  .hero__title {
    font-size: var(--h1-size-m);
    letter-spacing: -0.96px;
    max-width: 309px;
  }

  .hero__text { gap: 12px; width: 309px; }

  .hero__desc { font-size: 14px; letter-spacing: 0.14px; }
}

/* ---------- Principles (figma 1608:908 / 1615:651) ---------- */

.principles {
  display: flex;
  align-items: center;
  /* no gap: the two columns are exactly 50% each, so the gutter lives in
     .principles__content's padding instead (otherwise 50+50+gap overflows) */
  gap: 0;
  padding: 80px 0;
}

/* two even columns: the photo bleeds off the left edge, the copy sits right.
   object-fit here (not via .img-real) because hero_image() renders the
   desktop/mobile pair without that marker class. */
.principles__media {
  width: 50%;
  height: auto;
  aspect-ratio: 660 / 389;
  flex: none;
  border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
  object-fit: cover;
}

.principles__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 50%;
  flex: none;
  padding-left: 80px;
  padding-right: var(--page-pad);
  box-sizing: border-box;
}

.principles__title {
  font-size: var(--h2-size);
  line-height: 0.9;
  letter-spacing: -1.12px;
  color: #000;
}

.principles__text {
  display: flex;
  flex-direction: column;
  gap: 17.6px; /* one empty 16px line at lh 1.1 in the design */
  width: 452px;
  max-width: 100%;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

@media (max-width: 1099.98px) {
  .principles__content { padding-left: 40px; }
}

@media (max-width: 767.98px) {
  .principles {
    flex-direction: column;
    align-items: stretch;
    gap: 27px;
    padding: 40px 0 0;
  }

  /* mobile stacks copy first, photo second (desktop keeps photo left) */
  .principles__content {
    order: 1;
    width: auto;
    padding: 0 16px;
  }

  .principles__title {
    font-size: var(--h2-size-m);
    letter-spacing: -0.64px;
  }

  .principles__media {
    order: 2;
    align-self: flex-end;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    margin-right: 0;
    border-radius: var(--radius-medium) 0 0 var(--radius-medium);
  }
}

/* ---------- Generic section & headers ---------- */

.section {
  position: relative;
  padding: 80px 0;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 48px;
}

.section-head__title {
  font-size: var(--h2-size);
  line-height: 0.9;
  letter-spacing: -1.12px;
  color: #000;
}

.section-head__sub {
  font-weight: 700;
  font-size: 16px;
  line-height: 0.9;
  letter-spacing: -0.32px;
  color: var(--text-muted);
}

@media (max-width: 767.98px) {
  .section { padding: 40px 0; }

  .section-head { gap: 16px; margin-bottom: 28px; }

  .section-head__title {
    font-size: var(--h2-size-m);
    letter-spacing: -0.64px;
  }

  .section-head__sub { font-size: 14px; line-height: 1; }
}

/* ---------- Cards (figma card 306x528 / brand 306x500) ---------- */

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: var(--card-w);
  height: 528px;
  padding: 28px;
  background: var(--white);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card);
  flex: none;
  box-sizing: border-box;
}

.card--brand { height: 500px; }

.card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  flex: 1;
  min-height: 0;
}

.card__img-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 248px;
  height: 248px;
  padding: 12px;
  box-sizing: border-box;
  flex: none;
}

.card__img, .card__logo {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.card__title {
  align-self: stretch;
  font-size: var(--h3-size);
  line-height: 0.9;
  letter-spacing: -0.64px;
  color: #000;
}

.card__text {
  align-self: stretch;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.224px;
}

.card--brand .card__text { -webkit-line-clamp: 5; }

/* ---------- Carousels ---------- */

.carousel__rows {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.carousel__viewport {
  overflow: hidden;
  /* card shadows bleed below the track */
  padding-bottom: 32px;
  margin-bottom: -32px;
}

.carousel__track {
  display: flex;
  gap: var(--card-gap);
  width: max-content;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
}

.carousel__nav {
  display: flex;
  align-items: center;
  padding: 4px;
  gap: 0;
  background: var(--control-bg);
  border-radius: 100px;
}

.carousel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--text-main);
  transition: background 0.2s;
}

.carousel__btn:hover { background: var(--white); }

.carousel__btn .icon-chevron { width: 16px; height: 16px; }

.carousel__btn[disabled] { opacity: 0.35; cursor: default; }

.carousel__btn[disabled]:hover { background: none; }

@media (max-width: 767.98px) {
  .carousel__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* full-bleed scroll area past the 16px page padding */
    margin-inline: calc(-1 * var(--page-pad));
    padding-inline: var(--page-pad);
  }

  .carousel__viewport::-webkit-scrollbar { display: none; }

  .carousel__track { transition: none; }

  .carousel__track > .card,
  .carousel__track > .detail-gallery__btn { scroll-snap-align: start; }

  .carousel__nav { display: none; }

  .carousel__controls { margin-top: 28px; }
}

/* ---------- Business section decor ---------- */

.business { overflow: hidden; }

.business__curve {
  position: absolute;
  top: 0;
  right: 0;
  width: 424px;
  height: 847px;
  z-index: -1;
}

.business .container-gng, .brands-section .container-gng, .news-section .container-gng {
  position: relative;
}

@media (max-width: 767.98px) {
  .business__curve {
    width: 346px;
    height: 691px;
    top: 88px;
    right: -183px;
  }
}

/* ---------- News (figma 1662:2083 / 1662:2210) ---------- */

.news-grid {
  display: flex;
  gap: 24px;
}

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 0 0;
  min-width: 0;
  height: 416px;
  border-radius: var(--radius-medium);
  overflow: hidden;
}

.news-card__img { position: absolute; inset: 0; }

.news-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 42.58%, rgba(0, 0, 0, 0.62) 56.97%, rgba(0, 0, 0, 0.85) 78.65%);
}

.news-card__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  color: var(--white);
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: 0.196px;
}

.news-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}

.news-card__title {
  font-size: var(--news-title-size);
  line-height: 0.9;
  letter-spacing: -0.18px;
  color: var(--white);
}

.news-card__tags {
  display: flex;
  gap: 12px;
}

.news-card__tag {
  padding: 4px 8px;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.27);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: 0.196px;
}

.news-section .btn-pill { margin-top: 48px; }

@media (max-width: 767.98px) {
  .news-grid {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--page-pad));
    padding-inline: var(--page-pad);
  }

  .news-grid::-webkit-scrollbar { display: none; }

  .news-card {
    flex: none;
    width: 306px;
    height: 367px;
    scroll-snap-align: start;
  }

  .news-card__title { font-size: 28px; }

  .news-section .btn-pill { margin-top: 28px; }
}

/* ---------- CTA (figma 4049:4970 / 4096:11914) ---------- */

.cta {
  position: relative;
  padding: 80px 120px;
  background: var(--bg-gray);
  overflow: hidden;
}

/* optional full-width background photo (Pages → Shared) */
.cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  max-width: 1296px;
  margin-inline: auto;
  text-align: center;
  z-index: 1;
}

.cta__title {
  font-size: var(--h2-size);
  line-height: 0.95;
  letter-spacing: -1.12px;
  color: var(--text-main);
}

.cta__title em {
  font-style: italic;
  color: var(--brand);
}

.cta__text {
  width: 598px;
  max-width: 100%;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
  margin-top: -16px; /* title→text 32 within 48 gap */
}

.cta__decor {
  position: absolute;
  top: -54px;
  width: 219px;
  height: 437px;
  z-index: 0;
}

.cta__decor--left { left: 0; }

.cta__decor--right { right: 0; transform: scaleX(-1); }

@media (max-width: 767.98px) {
  .cta { padding: 80px 16px; }

  .cta__bg { height: auto; }

  .cta__inner { gap: 28px; }

  .cta__title {
    font-size: 48px;
    letter-spacing: -0.96px;
  }

  .cta__text {
    width: 301px;
    font-size: 14px;
    letter-spacing: 0.14px;
    margin-top: -12px;
  }

  .cta__decor { width: 257px; height: 512px; }
  .cta__decor--right { top: -257px; right: -80px; }
  .cta__decor--left { top: auto; bottom: -180px; left: 110px; display: none; }
}

/* ---------- Footer (figma 1664:686 / 1664:796) ---------- */

.site-footer {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: linear-gradient(135deg, #D41829 0%, #B80022 55%, #AB0020 100%);
}

.site-footer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  outline: none;
  object-fit: cover;
}

.site-footer__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 80px;
  padding: 80px var(--page-pad);
}

.footer-logo {
  position: relative;
  display: block;
  width: 108px;
  height: 40px;
  flex: none;
}

.footer-logo__ph { position: absolute; inset: 0; }

.footer-logo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-nav {
  display: flex;
  gap: 48px;
  flex: 1;
  min-width: 0;
}

.footer-nav__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-nav__col a {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.14;
  letter-spacing: -0.32px;
  white-space: nowrap;
}

.footer-social {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  align-self: stretch;
}

.footer-social__item {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  overflow: hidden;
}

.footer-social__item .img-slot,
.footer-social__item .img-real {
  width: 100%;
  height: 100%;
}

.footer-copy {
  position: relative;
  padding: 0 var(--page-pad) 14px;
  text-align: center;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 767.98px) {
  .site-footer__inner {
    flex-direction: column;
    gap: 48px;
    padding: 40px 16px 32px;
  }

  .footer-nav { flex-direction: column; gap: 48px; }

  .footer-social { order: 2; align-self: flex-start; }

  .footer-nav { order: 3; }

  .footer-copy { padding-bottom: 24px; }
}

/* ---------- Cookie banner (figma 4375:5154) ---------- */

.cookie-banner {
  position: fixed;
  left: var(--page-pad);
  bottom: 30px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 343px;
  max-width: calc(100vw - 2 * var(--page-pad));
  padding: 24px;
  background: var(--white);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-banner);
  box-sizing: border-box;
}

.cookie-banner__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cookie-banner__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
}

.cookie-banner__title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.14;
  letter-spacing: -0.32px;
  color: #000;
}

.cookie-banner__text {
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.cookie-banner__text a { text-decoration: underline; }

.cookie-banner__close {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--text-tertiary);
}

.cookie-banner__close svg { width: 16px; height: 16px; }

@media (max-width: 767.98px) {
  .cookie-banner {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    max-width: none;
  }
}

/* ---------- Inner page hero (figma 3621:1009 / 3621:1124) ---------- */

.page-hero {
  position: relative;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px var(--page-pad) 0;
  overflow: hidden;
  color: var(--white);
  background: var(--brand);
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.page-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  width: 612px;
  max-width: 100%;
}

.page-hero__title {
  font-size: var(--h1-size);
  line-height: 0.9;
  letter-spacing: -1.92px;
}

.page-hero__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 417px;
  max-width: 100%;
}

.page-hero__tagline {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.14;
  letter-spacing: -0.32px;
}

.page-hero__desc {
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

@media (max-width: 767.98px) {
  .page-hero { min-height: 600px; padding: 96px 16px 40px; }

  .page-hero__title { font-size: var(--h1-size-m); letter-spacing: -0.96px; }

  .page-hero__desc { font-size: 14px; letter-spacing: 0.14px; }
}

/* ---------- Story split (figma 3621:1013 / 3621:1142) ---------- */

.story-split { padding: 80px 0; }

.story-split__inner {
  display: flex;
  gap: 80px;
  align-items: stretch;
}

.story-split__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
  flex: 1 0 0;
  min-width: 0;
}

.story-split__title {
  font-size: var(--h2-size);
  line-height: 0.9;
  letter-spacing: -1.12px;
  color: #000;
}

.story-split__text {
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.story-split__media {
  flex: 1 0 0;
  min-width: 0;
  min-height: 352px;
  border-radius: var(--radius-medium);
}

@media (max-width: 767.98px) {
  .story-split { padding: 40px 0; }

  .story-split__inner { flex-direction: column; gap: 28px; }

  .story-split__content { gap: 28px; }

  .story-split__title { font-size: var(--h2-size-m); letter-spacing: -0.64px; }

  .story-split__media { order: -1; min-height: 272px; width: 100%; }

  /* mobile-only title sits above the image */
  .story-split__inner > .story-split__title { order: -2; }
}

/* ---------- Section head description (figma 3775:2101) ---------- */

.section-head__desc {
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
  max-width: 668px;
}

/* ---------- Eyebrow label ---------- */

.eyebrow {
  color: var(--brand);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

/* ---------- GNG Numbers (figma 3930:5046 / 3930:5073) ---------- */

.numbers__head {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 48px;
}

.numbers__title {
  font-size: var(--h2-size);
  line-height: 0.9;
  letter-spacing: -1.12px;
  color: #000;
}

.numbers__title em, .cta__title em {
  font-style: italic;
  color: var(--brand);
}

.numbers__grid {
  display: flex;
  gap: 24px;
}

.num-card {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 360px;
  padding: 32px;
  box-sizing: border-box;
  background: var(--white);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.num-card__value {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 96px;
  line-height: 0.9;
  letter-spacing: -1.92px;
  color: var(--brand);
  margin-bottom: 16px;
}

.num-card__label {
  color: var(--text-soft);
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0.2px;
}

.num-card__img {
  position: absolute;
  border-radius: 8px;
}

/*
 * Sizes/positions re-derived from Figma's rendered screenshot (not the raw
 * frame bounding boxes — those included transparent padding around each
 * icon that isn't baked into the actual uploaded assets, which are tightly
 * cropped squares; using the frame boxes directly made every icon overlap
 * its card's label). All three sit at the same top so they align across
 * the row, sized square since all three source images are 1:1 canvases.
 */
.num-card__img--globe,
.num-card__img--products,
.num-card__img--people {
  width: 195px;
  height: 195px;
  top: 188px;
  left: 201px;
}

@media (max-width: 767.98px) {
  .numbers__head { align-items: center; text-align: center; gap: 28px; margin-bottom: 28px; }

  .numbers__title { font-size: var(--h2-size-m); letter-spacing: -0.64px; }

  .numbers__grid {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--page-pad));
    padding-inline: var(--page-pad);
  }

  .numbers__grid::-webkit-scrollbar { display: none; }

  .num-card { flex: none; width: 306px; scroll-snap-align: start; padding: 24px; }

  .num-card__img--globe,
  .num-card__img--products,
  .num-card__img--people {
    left: 95px;
    top: 190px;
  }
}

/* ---------- Mission / Vision / Purpose (figma 3630:934 / 3634:1842) ---------- */

.mvp {
  background: var(--bg-gray);
  padding: 80px 120px;
}

.mvp__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  margin-bottom: 80px;
}

.mvp__title {
  font-size: var(--h2-size);
  line-height: 0.95;
  letter-spacing: -1.12px;
  color: #000;
}

.mvp__grid {
  display: flex;
  justify-content: center;
  gap: 24px;
  max-width: 1200px;
  margin-inline: auto;
}

.advantage-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1 0 0;
  min-width: 0;
  padding: 32px;
  box-sizing: border-box;
  background: var(--white);
  border-radius: var(--radius-medium);
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.03));
}

.advantage-card__img {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  flex: none;
}

.advantage-card__img--wide { width: 266px; }

.advantage-card__title {
  font-size: 36px;
  line-height: 0.9;
  letter-spacing: -0.72px;
  color: #000;
}

.advantage-card__text {
  align-self: stretch;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

@media (max-width: 991.98px) {
  .mvp { padding: 80px var(--page-pad); }
}

@media (max-width: 767.98px) {
  .mvp { padding: 40px 16px; }

  .mvp__head { gap: 28px; margin-bottom: 28px; }

  .mvp__title { font-size: var(--h2-size-m); letter-spacing: -0.64px; }

  .mvp__grid { flex-direction: column; gap: 28px; }
}

/* ---------- Our People (figma 3633:1021 / 3786:2113) ---------- */

.people {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px var(--page-pad);
}

.people__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-bottom: 80px;
}

.people__strength {
  font-size: var(--h2-size);
  line-height: 0.95;
  letter-spacing: -1.12px;
  color: var(--text-main);
}

.people__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 96px;
  line-height: 0.9;
  letter-spacing: -1.92px;
  color: var(--brand);
}

.people__text {
  display: flex;
  flex-direction: column;
  gap: 17.6px;
  width: 646px;
  max-width: 100%;
  text-align: center;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
  margin-bottom: 80px;
}

.people__grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 1128px;
  max-width: 100%;
}

.people__row {
  display: flex;
  gap: 48px;
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  min-width: 0;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.03));
}

.team-card__photo {
  width: 100%;
  height: 432px;
  border-radius: var(--radius-medium);
}

.team-card__name {
  font-size: 36px;
  line-height: 0.9;
  letter-spacing: -0.72px;
  color: #000;
}

.team-card__role {
  color: var(--brand);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

@media (max-width: 767.98px) {
  .people { padding: 40px 16px; }

  .people__head { margin-bottom: 28px; }

  .people__strength { font-size: 36px; letter-spacing: -0.72px; }

  .people__title { font-size: 56px; letter-spacing: -1.12px; }

  .people__text { margin-bottom: 28px; }

  .people__grid, .people__row { flex-direction: column; gap: 28px; }
}

/* ---------- Strategic Compass hero (figma 1612:842 / 1619:867) ---------- */

.page-hero__title em {
  font-style: italic;
}

.page-hero--compass .page-hero__bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(171, 0, 32, 0.6) 14.16%, rgba(171, 0, 32, 0) 57.7%);
}

.page-hero__content--wide { width: 864px; }

.page-hero__desc--wide { width: 606px; max-width: 100%; }

/* ---------- Our Approach (figma 3775:2571 / 1619:625) ---------- */

.approach { padding: 80px 0; }

.approach__inner {
  display: flex;
  align-items: center;
  gap: 80px;
}

.approach__head {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.approach__title {
  font-size: var(--h2-size);
  line-height: 0.9;
  letter-spacing: -1.12px;
  color: #000;
}

.approach__title em {
  font-style: italic;
  color: var(--brand);
}

.approach__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  width: 618px;
  max-width: 100%;
  flex: none;
}

.approach__text {
  display: flex;
  flex-direction: column;
  gap: 17.6px;
  color: #4D4D51;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.approach__quote {
  display: flex;
  gap: 24px;
  margin: 0;
  border-left: 3px solid var(--brand);
  padding-left: 24px;
}

.approach__quote p {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0.18px;
  color: var(--text-main);
  max-width: 529px;
}

@media (max-width: 991.98px) {
  .approach__inner { flex-direction: column; align-items: flex-start; gap: 40px; }
  .approach__body { width: 100%; }
}

@media (max-width: 767.98px) {
  .approach { padding: 40px 0; }

  .approach__inner { gap: 28px; }

  .approach__head { gap: 28px; }

  .approach__title { font-size: var(--h2-size-m); letter-spacing: -0.64px; }
}

/* ---------- Our Philosophy (figma 1612:859 / 1619:632) ---------- */

.philosophy {
  position: relative;
  background: var(--bg-gray);
  padding: 80px 0;
  overflow: hidden;
}

/* optional full-width background photo (Pages → Strategic Compass), with a
   scrim so the dark heading and white cards stay readable over any photo */
.philosophy__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.philosophy--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  z-index: 0;
}

.eyebrow--lg { font-size: 20px; letter-spacing: 0.2px; }

.philosophy__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  margin-bottom: 80px;
  padding-inline: var(--page-pad);
  z-index: 1;
}

.philosophy__title {
  font-size: var(--h2-size);
  line-height: 0.9;
  letter-spacing: -1.12px;
  color: #000;
  max-width: 716px;
}

.philosophy__text {
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
  max-width: 662px;
}

.philosophy__decor {
  position: absolute;
  top: -95px;
  width: 236px;
  height: 470px;
  z-index: 0;
}

.philosophy__decor--left { left: -45px; }
.philosophy__decor--right { right: -45px; transform: scaleX(-1); }

.philosophy__cards {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--page-pad);
  z-index: 1;
}

.philosophy__row {
  display: flex;
  gap: 16px;
}

.phil-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 0 0;
  min-width: 0;
  min-height: 194px;
  padding: 32px;
  box-sizing: border-box;
  background: var(--white);
  border-radius: var(--radius-medium);
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.03));
}

.phil-card__title {
  font-size: 32px;
  line-height: 0.95;
  letter-spacing: -0.64px;
  color: #000;
}

.phil-card__title em {
  font-style: italic;
  color: var(--brand);
}

.phil-card__text {
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

@media (max-width: 991.98px) {
  .philosophy__cards { max-width: none; }
}

@media (max-width: 767.98px) {
  .philosophy { padding-top: 40px; }

  .philosophy__head {
    align-items: flex-start;
    text-align: left;
    gap: 28px;
    margin-bottom: 28px;
  }

  .philosophy__title { font-size: var(--h2-size-m); letter-spacing: -0.64px; }

  .philosophy__cards {
    flex-direction: row;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 16px;
  }

  .philosophy__cards::-webkit-scrollbar { display: none; }

  .philosophy__row { display: contents; }

  .phil-card {
    flex: none;
    width: 306px;
    min-height: 300px;
    padding: 28px;
    scroll-snap-align: start;
  }
}

/* ---------- The Pillars (figma 1613:559 / 1620:578) ---------- */

.pillars { padding-bottom: 80px; }

.pillars__inner {
  display: flex;
  align-items: stretch; /* intro must span full height so its sticky child works */
}

.pillars__intro {
  flex: 1 0 0;
  min-width: 0;
  padding-top: 200px;
}

.pillars__sticky {
  position: sticky;
  top: 138px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}

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

.pillars__heading-main {
  font-size: 96px;
  line-height: 0.9;
  letter-spacing: -1.92px;
  color: #000;
}

.pillars__heading-sub {
  font-style: italic;
  font-size: 66px;
  line-height: 0.9;
  letter-spacing: -1.32px;
  color: var(--brand);
}

.pillars__lead {
  width: 445px;
  max-width: 100%;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.pillars__list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 608px;
  max-width: 100%;
  flex: none;
  padding-top: 200px;
}

.pillar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 60px 32px 32px;
  background: var(--white);
  border-radius: var(--radius-medium);
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.03));
}

.pillar-card__visual {
  width: 400px;
  max-width: 100%;
  height: 293px;
  border-radius: 8px;
  flex: none;
}

.pillar-card__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  width: 100%;
}

.pillar-card__label {
  color: var(--brand);
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0.2px;
}

.pillar-card__title {
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: -0.96px;
  color: #000;
}

.pillar-card__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.pillar-card__body {
  display: flex;
  flex-direction: column;
  gap: 17.6px;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.pillar-card__focus {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pillar-card__focus-label {
  font-weight: 700;
  font-size: 16px;
  line-height: 0.9;
  letter-spacing: -0.32px;
  color: #000;
}

.pillar-card__focus-grid {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.focus-item {
  flex: 1 0 0;
  min-width: 0;
  padding: 16px;
  background: var(--white);
  border-radius: var(--radius-medium);
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.06));
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.practice-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--white);
  border-radius: var(--radius-medium);
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.06));
}

.practice-card__label {
  color: var(--brand);
  font-weight: 700;
  font-size: 16px;
  line-height: 0.9;
  letter-spacing: -0.32px;
}

.practice-card__text {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0.18px;
  color: var(--text-soft);
}

@media (max-width: 1099.98px) {
  .pillars__inner { flex-direction: column; gap: 48px; }

  .pillars__intro { padding-top: 80px; width: 100%; }

  .pillars__sticky { position: static; }

  .pillars__list { padding-top: 0; width: 100%; }
}

@media (max-width: 767.98px) {
  .pillars { padding-bottom: 40px; }

  .pillars__intro { padding-top: 40px; }

  .pillars__sticky { gap: 28px; align-items: center; text-align: center; width: 100%; }

  .pillars__heading { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 12px; }

  .pillars__heading-main { font-size: 48px; letter-spacing: -0.96px; }

  .pillars__heading-sub { font-size: 48px; letter-spacing: -0.96px; }

  .pillars__lead { text-align: left; width: 100%; }

  .pillars__list { gap: 28px; }

  .pillar-card { gap: 28px; padding: 48px 16px 16px; }

  .pillar-card__visual { width: 280px; height: 203px; }

  .pillar-card__label { font-size: 16px; letter-spacing: 0.16px; }

  .pillar-card__title { font-size: 32px; letter-spacing: -0.64px; }

  .pillar-card__focus-grid { flex-direction: column; }
}

/* ---------- CTA bare variant (compass 3775:2661) ---------- */

.cta--bare { background: var(--bg-main); }

.cta--bare .cta__title { line-height: 0.95; }

/* ---------- Listing hero (figma 3890:4791 / 3892:6762) ---------- */

.page-hero--listing {
  min-height: 600px;
  padding: 136px var(--page-pad) 80px;
}

@media (max-width: 767.98px) {
  .page-hero--listing {
    min-height: 340px;
    padding: 96px 16px 40px;
  }

  .page-hero--listing .page-hero__title { font-size: 48px; letter-spacing: -0.96px; }
}

/* ---------- Listing: sidebar + category sections
     (figma sidebar 4134:6353, sections 3890:4807 / mobile tabs 3892:6768) ---------- */

.listing__inner {
  display: flex;
  align-items: stretch;
  gap: 48px;
}

.listing__sidebar {
  width: 282px;
  flex: none;
  padding-top: 80px;
}

.tabs-vertical {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: flex;
  flex-direction: column;
}

.tabs-vertical__tab {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  color: #4D4D51;
  font-weight: 700;
  font-size: 16px;
  line-height: 0.9;
  letter-spacing: -0.32px;
  white-space: nowrap;
  border-right: 2px solid transparent;
  transition: background 0.2s, color 0.2s;
}

a.tabs-vertical__tab:hover { color: var(--brand); }

.tabs-vertical__tab.is-active {
  background: rgba(212, 24, 41, 0.08);
  border-right-color: var(--brand);
  color: var(--brand);
}

.tabs-vertical__tab--empty { opacity: 0.5; cursor: default; }

.listing__content {
  display: flex;
  flex-direction: column;
  gap: 80px;
  flex: 1 0 0;
  min-width: 0;
  padding: 80px 0;
}

.listing__section {
  display: flex;
  flex-direction: column;
  gap: 48px;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.listing__title {
  font-size: var(--h2-size);
  line-height: 0.95;
  letter-spacing: -1.12px;
  color: #000;
}

.listing__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

@media (max-width: 1199.98px) {
  .listing__sidebar { width: 220px; }
}

@media (max-width: 767.98px) {
  .listing__inner { flex-direction: column; gap: 0; }

  /* tabs become a horizontal scroller pinned under the header */
  .listing__sidebar {
    width: auto;
    padding-top: 0;
    position: sticky;
    top: var(--header-h);
    z-index: 50;
    background: var(--bg-main);
    margin-inline: calc(-1 * var(--page-pad));
    padding-block: 14px;
  }

  .tabs-vertical {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: var(--page-pad);
  }

  .tabs-vertical::-webkit-scrollbar { display: none; }

  .tabs-vertical__tab {
    padding: 0 16px;
    border-right: 0;
    border-bottom: 2px solid transparent;
  }

  .tabs-vertical__tab.is-active {
    background: none;
    border-bottom-color: var(--brand);
  }

  .listing__content { gap: 48px; padding: 28px 0 40px; }

  .listing__section { gap: 28px; scroll-margin-top: calc(var(--header-h) + 72px); }

  .listing__title { font-size: var(--h2-size-m); letter-spacing: -0.64px; }

  .listing__grid { flex-direction: column; }

  /* mobile cards fill the column (figma 343 within 375) */
  .listing__grid .card { width: 100%; }
}

/* ---------- Our Companies: card grid (figma 4149:5418 / 4178:7552) ---------- */

.card--company {
  width: auto;
  height: 500px;
}

/* company logos sit flush in the 248 box (no 12px inset like brand cards) */
.card__img-wrapper--flush { padding: 0; }

.card--company .card__title,
.card--company .card__text { color: var(--text-main); }

.companies-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1199.98px) {
  .companies-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .companies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .companies-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Our Companies: "Other GNG Companies" (figma 3989:5173) ---------- */

.other-companies__title {
  font-size: var(--h2-size);
  line-height: 0.95;
  letter-spacing: -1.12px;
  color: var(--text-main);
  margin-bottom: 48px;
}

.other-companies__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.other-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 550px;
  padding: 28px;
  box-sizing: border-box;
  background: var(--white);
  border-radius: var(--radius-medium);
  overflow: hidden;
}

.other-card__top {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.other-card__logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 113px;
  padding: 0 24px;
  box-sizing: border-box;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-medium);
  box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 0.03);
  flex: none;
}

.other-card__logo {
  width: 134px;
  height: 73px;
}

.other-card__name {
  font-size: 48px;
  line-height: 0.83;
  letter-spacing: -0.96px;
  color: var(--text-main);
}

.other-card__text {
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

@media (max-width: 991.98px) {
  .other-companies__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
  .other-companies__title {
    font-size: var(--h2-size-m);
    letter-spacing: -0.64px;
    margin-bottom: 28px;
  }

  .other-card { min-height: 0; }
}

/* ---------- Careers hero (figma 3912:4453 / 4156:6344) ---------- */

.page-hero--careers .page-hero__content { gap: 48px; }

.page-hero--careers .page-hero__title { width: 757px; max-width: 100%; }

.page-hero--careers .page-hero__tagline { line-height: 0.9; }

/* ---------- Career cards (figma "career cards" 508x374) ---------- */

.careers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.career-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  box-sizing: border-box;
  background: var(--white);
  border-radius: var(--radius-medium);
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.03));
}

.career-card__head {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.career-card__headings {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 0 0;
  min-width: 0;
}

.career-card__title {
  font-size: 32px;
  line-height: 1.04;
  letter-spacing: -0.64px;
  color: #000;
}

.career-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-medium);
  color: var(--text-main);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.14;
  letter-spacing: -0.32px;
  white-space: nowrap;
}

.icon-meta { width: 24px; height: 24px; flex: none; }

.career-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  flex: none;
  overflow: hidden;
}

.career-card__logo-img { width: 68px; height: 40px; }

.career-card__excerpt {
  height: 69px;
  overflow: hidden;
  color: #4D4D51;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.career-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.career-card__posted {
  color: var(--text-tertiary);
  font-weight: 500;
  font-size: 16px;
  line-height: 0.9;
  letter-spacing: -0.32px;
  white-space: nowrap;
}

.careers-empty {
  color: var(--text-tertiary);
  font-size: 16px;
  line-height: 1.1;
}

/* careers sidebar tabs are buttons, not anchors */
.listing--careers .tabs-vertical__tab {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

@media (max-width: 1099.98px) {
  .careers-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
  .page-hero--careers .page-hero__content { gap: 28px; }

  .careers-grid { gap: 16px; }

  .career-card { gap: 16px; padding: 24px; }

  .career-card__title { font-size: 28px; }

  .career-card__logo { width: 72px; height: 72px; }

  .career-card__foot { flex-direction: column; align-items: flex-start; }
}

/* ---------- Job modal (figma 6646:15442 / 6646:15447 / 6646:15449) ---------- */

.modal-job {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.modal-job__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.8);
}

.modal-job__dialog {
  position: relative;
  width: 865px;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 80px;
  box-sizing: border-box;
  background: var(--white);
  border-radius: var(--radius-medium);
  box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 0.04);
}

.modal-job__state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

.modal-job__close {
  position: sticky;
  top: 0;
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: -56px -56px 0 0;
  color: var(--text-tertiary);
  z-index: 2;
}

.modal-job__close svg { width: 16px; height: 16px; }

.modal-job__art {
  width: 160px;
  height: 138px;
  flex: none;
}

.modal-job__intro {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

.modal-job__title {
  font-size: var(--h2-size);
  line-height: 0.9;
  letter-spacing: -1.12px;
  color: #000;
}

.modal-job__job {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.modal-job__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  flex: none;
  overflow: hidden;
}

.modal-job__logo-img { width: 68px; height: 35px; }

.modal-job__job-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  flex: 1 0 0;
  min-width: 0;
}

.modal-job__job-title {
  font-size: 32px;
  line-height: 1.04;
  letter-spacing: -0.64px;
  color: #000;
}

.modal-job__desc {
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.modal-job__desc p { margin-bottom: 17.6px; }

.modal-job__desc ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 17.6px;
}

.modal-job__desc li { margin-bottom: 2px; }

.modal-job__desc-heading {
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.32px;
  color: var(--text-soft);
}

.modal-job__apply {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.modal-job__apply-title {
  font-size: 32px;
  line-height: 1.04;
  letter-spacing: -0.64px;
  color: #000;
}

.modal-job__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.form-row--half { max-width: 344px; }

.modal-job__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.modal-job__note {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.12px;
}

.modal-job__sent-text {
  width: 478px;
  max-width: 100%;
  color: #4D4D51;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

/* Resume dropzone (figma 3998:4973) */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 211px;
  padding: 24px 16px;
  box-sizing: border-box;
  background: rgba(212, 24, 41, 0.04);
  border: 1.5px dashed rgba(212, 24, 41, 0.5);
  border-radius: var(--radius-medium);
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
}

.dropzone.is-dragover {
  background: rgba(212, 24, 41, 0.08);
  border-color: var(--brand);
}

.dropzone__lead {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--brand);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.14;
  letter-spacing: -0.32px;
}

.dropzone__icon { width: 24px; height: 24px; flex: none; }

.dropzone__or {
  color: #4D4D51;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.dropzone__hint {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.12px;
}

@media (max-width: 767.98px) {
  .modal-job { padding: 16px; }

  .modal-job__dialog { padding: 32px; }

  .modal-job__state { gap: 28px; }

  .modal-job__close { margin: -16px -16px 0 0; }

  .modal-job__intro { gap: 28px; }

  .modal-job__title { font-size: 44px; letter-spacing: -0.88px; }

  .modal-job__job { flex-direction: column; }

  .modal-job__job-title, .modal-job__apply-title { font-size: 28px; }

  .modal-job__art { width: 120px; height: 104px; }
}

/* ---------- News listing (figma 3912:5004 / 3912:5047) ---------- */

.news-head {
  padding: calc(var(--header-h) + 102px) 0 0;
}

.news-head__title {
  font-size: var(--h1-size);
  line-height: 0.9;
  letter-spacing: -1.92px;
  color: var(--text-main);
  margin-bottom: 24px;
}

.news-head__sub {
  font-weight: 700;
  font-size: 16px;
  line-height: 0.9;
  letter-spacing: -0.32px;
  color: var(--text-muted);
}

/* the news sidebar spaces its tabs 12px apart (figma 3912:5008) */
.tabs-vertical--spaced { gap: 12px; }

.news-masonry {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.news-card--listing { height: 385px; }

.news-card--related { height: 384px; }

@media (max-width: 1199.98px) {
  .news-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .news-head { padding-top: calc(var(--header-h) + 72px); }

  .news-head__title { font-size: 48px; letter-spacing: -0.96px; margin-bottom: 0; }

  /* mobile head shows the title only (figma 3912:5048) */
  .news-head__sub { display: none; }

  .news-masonry { grid-template-columns: minmax(0, 1fr); }

  .news-card--listing { height: 343px; }
}

/* ---------- Single article (figma 3912:5522 / 3912:5565) ---------- */

.article-hero {
  position: relative;
  min-height: 621px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 160px 120px 80px;
  overflow: hidden;
  color: var(--white);
  background: var(--text-main);
}

.article-hero__bg { position: absolute; inset: 0; z-index: 0; }

.article-hero__img { position: absolute; inset: 0; }

.article-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.article-hero__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.article-hero__title {
  width: 1084px;
  max-width: 100%;
  font-size: var(--h1-size);
  line-height: 0.9;
  letter-spacing: -1.92px;
}

.article-hero__published {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.article-hero__published-label {
  color: #D7D7D7;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.article-hero__published-date {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.14;
  letter-spacing: -0.32px;
}

.article { padding: 48px 0 80px; }

.article__inner {
  max-width: calc(1200px + 240px);
  margin-inline: auto;
  padding-inline: 120px;
}

.article > .article__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.article__heading {
  width: 873px;
  max-width: 100%;
  font-size: 32px;
  line-height: 1.04;
  letter-spacing: -0.64px;
  color: #000;
}

.article__prose {
  width: 873px;
  max-width: 100%;
  color: #000;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.article__prose--narrow { width: 380px; }

.article__prose p + p { margin-top: 17.6px; }

.article__prose ul {
  list-style: disc;
  padding-left: 24px;
  margin-top: 2px;
}

.article__prose a { text-decoration: underline; }

.article__image {
  width: 100%;
  height: 295px;
  border-radius: var(--radius-medium);
}

.related-news .news-grid { margin-bottom: 48px; }

.related-news .btn-pill { margin-top: 0; }

@media (max-width: 1099.98px) {
  .article-hero { padding: 140px var(--page-pad) 60px; }
  .article__inner { padding-inline: var(--page-pad); }
}

@media (max-width: 767.98px) {
  .article-hero {
    min-height: 495px;
    padding: 120px 16px 40px;
  }

  .article-hero__content { gap: 24px; }

  .article-hero__title { font-size: 40px; letter-spacing: -0.8px; }

  .article { padding: 40px 0; }

  .article > .article__inner { gap: 24px; }

  .article__heading { font-size: 32px; }

  .article__prose--narrow { width: 100%; }

  .article__image { height: 149px; }

  .related-news .news-grid { margin-bottom: 28px; }
}

/* ---------- Legal pages (figma 4370:4999 / 4370:5035) ---------- */

.policy-head {
  padding: calc(var(--header-h) + 102px) 0 0;
}

.policy-head__title {
  font-size: var(--h1-size);
  line-height: 0.9;
  letter-spacing: -1.92px;
  color: var(--text-main);
}

/* legal sections: tighter than editorial, heading hugs its own copy */
.article--policy > .article__inner { gap: 16px; }

.article--policy .article__heading { margin-top: 32px; }

.article--policy .article__heading:first-child { margin-top: 0; }

@media (max-width: 767.98px) {
  .policy-head { padding-top: calc(var(--header-h) + 72px); }

  .policy-head__title { font-size: 40px; letter-spacing: -0.8px; }

  .article--policy .article__heading { margin-top: 24px; }
}

/* ---------- Brand / company detail page (figma 4452:5231 / 4452:5232) ---------- */

.detail { --detail-accent: var(--brand); }

.detail-hero {
  position: relative;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px var(--page-pad);
  overflow: hidden;
  color: var(--white);
  background: var(--detail-accent);
}

.detail-hero__bg { position: absolute; inset: 0; z-index: 0; }

/* width/height/object-fit only matter once this is a real <img> (a desktop
   cover file exists) rather than the placeholder <span> — harmless either way */
.detail-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.detail-hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(87deg, var(--detail-accent) 23.5%, transparent 74.6%);
}

.detail-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 635px;
  max-width: 100%;
}

.detail-hero__title {
  font-size: 72px;
  line-height: 0.9;
  letter-spacing: -1.44px;
}

.detail-hero__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 32px;
  line-height: 0.9;
  letter-spacing: -0.64px;
}

/* brands whose hero photo is light set the title in ink (figma 4452:5235) */
.detail-hero--ink { color: var(--text-main); background: var(--bg-main); }

.detail-hero--ink .detail-hero__gradient {
  background: linear-gradient(87deg, rgba(0, 0, 0, 0.03) 23.5%, rgba(0, 0, 0, 0) 74.6%);
}

/* the story card can carry the side image instead of the overview card */
.detail-card--story { background: var(--white); }

/* product cards with no description: image and name only */
.card--product-plain .card__body { justify-content: flex-start; }

.card--product-plain .card__title { flex: 1; }

/* --- body: grey band holding the info cards --- */

.detail-body {
  position: relative;
  background: var(--bg-gray);
  padding: 40px 0 80px;
}

.detail-body__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-logo {
  position: absolute;
  top: -120px;
  left: var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.03));
  z-index: 2;
}

.detail-logo__img { width: 134px; height: 112px; }

.detail-intro { display: none; }

.detail-body__cta {
  display: flex;
  justify-content: flex-end;
}

.detail-row--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.detail-card {
  display: flex;
  background: var(--bg-main);
  border-radius: 24px;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.03));
}

.detail-card__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 1 0 0;
  min-width: 0;
  padding: 40px;
}

.detail-card--wide .detail-card__body { padding: 64px 40px; gap: 40px; }

.detail-card--split { align-items: center; gap: 32px; }

.detail-card--split .detail-card__body { justify-content: center; }

.detail-card__media {
  flex: 1 0 0;
  min-width: 0;
  padding: 12px 12px 12px 0;
}

.detail-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-medium);
}

.detail-card__title {
  font-size: var(--h2-size);
  line-height: 0.9;
  letter-spacing: -1.12px;
  color: var(--text-main);
}

.detail-card__head {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}

.detail-card__brandmark { width: 158px; height: 39px; }

/* Side-by-side blocks inside a wide card (Siberia's NikoTek / Swedish Original). */
.detail-cols {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  width: 100%;
}

.detail-col {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}

.detail-col__title {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 0.9;
  letter-spacing: -0.64px;
  color: var(--text-main);
}

.detail-card__text {
  display: flex;
  flex-direction: column;
  gap: 17.6px;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.detail-card__text--wide { max-width: 676px; }

.detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.detail-chips--narrow { max-width: 530px; }

.detail-chip {
  padding: 12px;
  background: var(--white);
  border-radius: var(--radius-medium);
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.03));
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.detail-chip strong {
  font-weight: 500;
  color: var(--text-main);
}

/* --- product range / gallery / other brands --- */

.detail-others__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 48px;
}

/* product range now scrolls via the shared .carousel component — its own
   .carousel__track rule (display/gap/width) already applies here */

/* the "other …" strips are flex, so company cards need their width back
   (.card--company is width:auto for the CSS-grid listing page) */
.card--other {
  height: 516px;
  width: var(--card-w);
  flex: none;
}

/* services: cards that are a single serif statement, no image or button */
.service-grid {
  display: flex;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 48px;
}

/* consecutive rows of the same section sit 24px apart, not 48 */
.service-grid + .service-grid { margin-top: -24px; }

.service-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* widths follow the text, as in figma, rather than splitting evenly */
  flex: 1 1 auto;
  min-width: min(209px, 100%);
  padding: 32px;
  background: var(--white);
  border-radius: var(--radius-medium);
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.03));
}

.service-card p {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -0.56px;
  color: #000;
}

/* "Other Products": wide card with a boxed logo (figma 4507:14908) */
.product-feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
}

.product-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex: 0 1 615px;
  min-width: 0;
  padding: 28px;
  background: var(--white);
  border-radius: var(--radius-medium);
}

.product-feature__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 113px;
  padding-inline: 24px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-medium);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.03);
}

.product-feature__logo { width: 134px; height: 73px; }

.product-feature__title {
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 0.83;
  letter-spacing: -0.96px;
  color: var(--text-main);
}

.product-feature__text {
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.detail-services__note {
  max-width: 668px;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.detail-gallery__title { margin-bottom: 48px; }

.detail-gallery__btn {
  display: block;
  flex: none;
  border-radius: var(--radius-medium);
  cursor: pointer;
}

.detail-gallery__item {
  width: 306px;
  height: 306px;
  border-radius: var(--radius-medium);
  flex: none;
}

@media (max-width: 1199.98px) {
  .detail-row--two { grid-template-columns: minmax(0, 1fr); }

  .detail-card--split { flex-direction: column; align-items: stretch; }

  .detail-card--split .detail-card__media { padding: 0 12px 12px; }
}

@media (max-width: 767.98px) {
  .detail-hero {
    min-height: 340px;
    padding: 96px 16px 40px;
  }

  /* mobile shows the name inside the body, not over the hero (figma 0:91) */
  .detail-hero__content { display: none; }

  .detail-body { padding: 80px 0 40px; }

  .detail-body__inner { gap: 16px; }

  /* -141px = 80px body padding + 61px of the circle overlapping the hero,
     which keeps the name clear of the logo (figma 0:168 vs 0:91) */
  .detail-logo {
    top: -141px;
    left: 50%;
    transform: translateX(-50%);
    width: 122px;
    height: 122px;
  }

  .detail-logo__img { width: 111px; height: 93px; }

  .detail-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  .detail-intro__title {
    font-family: var(--font-serif);
    font-size: 40px;
    line-height: 0.9;
    letter-spacing: -0.8px;
    color: var(--text-main);
  }

  .detail-intro__tagline {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 32px;
    line-height: 0.9;
    letter-spacing: -0.64px;
    color: var(--text-main);
  }

  .detail-body__cta { justify-content: center; }

  .detail-card__body,
  .detail-card--wide .detail-card__body { padding: 28px; gap: 24px; }

  .detail-card__title { font-size: var(--h2-size-m); letter-spacing: -0.64px; }

  .detail-card--split { flex-direction: column-reverse; gap: 0; }

  .detail-card--split .detail-card__media { padding: 12px 12px 0; }

  .detail-card__brandmark { width: 107px; height: 26px; }

  .detail-cols { flex-direction: column; gap: 40px; }

  .product-feature { flex-basis: 100%; gap: 24px; }

  .product-feature__title { font-size: 32px; }

  .detail-col__title { font-size: 24px; }

  /* horizontal strip on mobile (figma 3653:1055) — products/gallery now
     scroll via the shared .carousel component instead (see above) */
  .detail-others__grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--page-pad));
    padding-inline: var(--page-pad);
  }

  .detail-others__grid::-webkit-scrollbar { display: none; }

  .detail-others__grid > .card { scroll-snap-align: start; }

  .detail-others__grid { margin-bottom: 28px; }

  .detail-gallery__title { margin-bottom: 28px; }

  .service-grid { flex-direction: column; gap: 16px; margin-bottom: 28px; }

  .service-card { padding: 28px; }

  .service-card p { font-size: 24px; letter-spacing: -0.48px; }
}

/* ---------- Company detail extras (figma 4485:19192 / 4485:19193) ---------- */

/* hero: photo only, no accent gradient, and a third lead line */
.detail-hero--company { background: var(--text-main); }

.detail-hero__content--company {
  width: 652px;
  gap: 16px;
}

.detail-hero__lead {
  width: 492px;
  max-width: 100%;
  color: #D7D7D7;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.14;
  letter-spacing: -0.32px;
}

.detail-body--company .detail-body__inner { gap: 32px; }

/* logo sits in a rounded square here, not a circle */
.detail-logo--square {
  border-radius: 24px;
  border: 0;
  padding-inline: 24px;
  box-sizing: border-box;
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.03));
  top: -112px; /* 32px body padding + 80px overlap */
}

.detail-logo__img--square { width: 120px; height: 104px; }

/* story: text column + tall image */
.story-split-detail {
  display: flex;
  align-items: center;
  gap: 48px;
  width: 100%;
}

.story-split-detail__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  width: 604px;
  flex: none;
}

.story-split-detail__media {
  flex: 1 0 0;
  min-width: 0;
}

.story-split-detail__image {
  width: 100%;
  height: 644px;
  border-radius: var(--radius-medium);
}

/* fact pills with red labels (figma "fact" 4488:12323) */
.fact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--white);
  border-radius: var(--radius-medium);
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.03));
}

.fact__label {
  color: var(--brand);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.14;
  letter-spacing: -0.32px;
}

.fact__value {
  color: var(--text-main);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.detail-quote {
  display: flex;
  margin: 0;
  border-left: 3px solid var(--brand);
  padding-left: 24px;
}

.detail-quote p {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0.18px;
  color: var(--text-soft);
}

/* centred head used by the company "Our Brands" block */
.detail-centered-head {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-bottom: 48px;
}

.detail-centered-head .section-head__title { text-align: center; }

.detail-centered-head__text {
  display: flex;
  flex-direction: column;
  gap: 17.6px;
  width: 611px;
  max-width: 100%;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.detail-company-brands { padding-top: 100px; }

/* ---------- 404 page — no Figma frame; assembled from shared parts ---------- */

.error-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 40px;
}

/* gallery as a stepped carousel on this page */
.detail-gallery__track { align-items: flex-start; }

@media (max-width: 1199.98px) {
  .story-split-detail { flex-direction: column; align-items: stretch; }
  .story-split-detail__text { width: auto; }
  .story-split-detail__image { height: 420px; }
}

@media (max-width: 767.98px) {
  .detail-hero--company .detail-hero__content { display: none; }

  .detail-hero__content--company { width: auto; }

  .detail-body--company { padding-top: 112px; }

  .detail-body--company .detail-body__inner { gap: 24px; }

  .detail-logo--square {
    top: -172px; /* 112px body padding + 60px overlap */
    width: 122px;
    height: 122px;
    border-radius: 20px;
    padding-inline: 16px;
  }

  .detail-logo__img--square { width: 90px; height: 78px; }

  .story-split-detail { gap: 24px; }

  .story-split-detail__text { gap: 24px; }

  .story-split-detail__image { height: 300px; }

  .detail-centered-head { gap: 24px; margin-bottom: 28px; }

  .detail-centered-head .section-head__title { text-align: left; }

  .detail-centered-head__text { width: 100%; }

  .detail-company-brands { padding-top: 40px; }
}

/* ---------- Contact modal (figma 3821:6787 / 3826:2991 / 3823:2666) ---------- */

.modal-contact {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.modal-contact__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.8);
}

.modal-contact__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 865px;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card);
  padding: 80px;
  box-sizing: border-box;
}

.modal-contact__state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.modal-contact__close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--text-tertiary);
  z-index: 1;
}

.modal-contact__close svg { width: 16px; height: 16px; }

.modal-contact__art {
  width: 120px;
  height: 122px;
  flex: none;
}

.modal-contact__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.modal-contact__title {
  font-size: var(--h2-size);
  line-height: 0.9;
  letter-spacing: -1.12px;
  color: #000;
}

.modal-contact__sub {
  width: 447px;
  max-width: 100%;
  color: #4D4D51;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.modal-contact__sub--dark { color: var(--text-soft); width: 478px; }

.modal-contact__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.form-row {
  display: flex;
  gap: 16px;
  width: 100%;
}

.form-row .input-field { flex: 1 0 0; min-width: 0; }

.input-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.input-field__label {
  color: #4D4D51;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.input-field__control {
  width: 100%;
  height: 44px;
  padding: 12px 16px;
  box-sizing: border-box;
  background: var(--bg-gray);
  border: 0;
  border-radius: var(--radius-medium);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
  color: var(--text-main);
  outline: none;
}

.input-field__control::placeholder { color: var(--text-tertiary); }

.input-field__control:focus { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.12); }

.input-field__control.is-invalid { box-shadow: inset 0 0 0 1.5px var(--brand); }

.input-field__control--area {
  height: 106px;
  resize: none;
}

.modal-contact__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.modal-contact__note {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.12px;
}

@media (max-width: 767.98px) {
  .modal-contact { padding: 16px; }

  .modal-contact__dialog { padding: 32px; }

  .modal-contact__state { gap: 16px; }

  .modal-contact__art { width: 80px; height: 81px; }

  .modal-contact__title { font-size: 44px; letter-spacing: -0.88px; }

  .form-row { flex-direction: column; gap: 16px; }
}

/* ---------- Gallery lightbox (opened from brand/company gallery carousels) ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 16px;
}

.lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.9);
}

.lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  z-index: 1;
}

.lightbox__close svg { width: 16px; height: 16px; }

.lightbox__nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  transition: background 0.2s;
}

.lightbox__nav:hover { background: rgba(255, 255, 255, 0.2); }

.lightbox__nav .icon-chevron { width: 18px; height: 18px; }

.lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(1100px, 84vw);
  max-height: calc(100vh - 96px);
}

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 96px);
  border-radius: var(--radius-medium);
  object-fit: contain;
}

.lightbox__counter {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  letter-spacing: 0.14px;
}

@media (max-width: 767.98px) {
  .lightbox { gap: 8px; padding: 16px; }

  .lightbox__nav { width: 40px; height: 40px; }
}