/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
  /* colors */
  --background-color: white;
  --light-color: #f8f8f8;
  --dark-color: #505050;
  --text-color: #121212; /* DEPT® richBlack */
  --link-color: #ff4901;
  --link-hover-color: #e64001;
  --refreshed-cyan: #00e0c7; /* DEPT® "refreshed cyan" badge bg — adjust if brand value differs */
  --refreshed-purple: #888eff; /* DEPT® "refreshed purple" badge bg — confirmed via computed styles on a live case page */

  /* layout — matches live's --dept-h-gutter (constant across breakpoints) */
  --dept-h-gutter: 1.25rem;

  /* fonts — Inter variable (100–900) is loaded from Google Fonts in head.html,
     so weight 200 renders truly thin like live (the old rsms.me InterVariable
     @font-face wasn't loading, which made 200 snap to a heavy 400 fallback). */
  --body-font-family: inter, system-ui, sans-serif;
  --heading-font-family: inter, system-ui, sans-serif;

  /* body sizes */
  --body-font-size-m: 18px;
  --body-font-size-s: 16px;
  --body-font-size-xs: 14px;

  /* heading sizes */
  --heading-font-size-xxl: 55px;
  --heading-font-size-xl: 44px;
  --heading-font-size-l: 34px;
  --heading-font-size-m: 27px;
  --heading-font-size-s: 24px;
  --heading-font-size-xs: 22px;

  /* nav height */
  --nav-height: 64px;
}

/* fallback fonts */
@font-face {
  font-family: roboto-condensed-fallback;
  size-adjust: 88.82%;
  src: local('Arial');
}

@font-face {
  font-family: roboto-fallback;
  size-adjust: 99.529%;
  src: local('Arial');
}

@media (width >= 900px) {
  :root {
    /* body sizes */
    --body-font-size-m: 16px;
    --body-font-size-s: 16px;
    --body-font-size-xs: 14px;

    /* heading sizes */
    --heading-font-size-xxl: 45px;
    --heading-font-size-xl: 36px;
    --heading-font-size-l: 28px;
    --heading-font-size-m: 22px;
    --heading-font-size-s: 20px;
    --heading-font-size-xs: 18px;
  }
}

body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-s);
  line-height: 1.5;
}

body.appear {
  display: block;
}

header {
  height: var(--nav-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.25em;
  font-family: var(--heading-font-family);
  font-weight: 700;
  line-height: 1.1;
  scroll-margin: 40px;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--heading-font-size-xxl); }
h2 { font-size: var(--heading-font-size-xl); }
h3 { font-size: var(--heading-font-size-l); }
h4 { font-size: var(--heading-font-size-m); }
h5 { font-size: var(--heading-font-size-s); }
h6 { font-size: var(--heading-font-size-xs); }

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.5em;
  margin-bottom: 0.25em;
}

code,
pre {
  font-size: var(--body-font-size-s);
}

pre {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

main > div {
  margin: 0;
}

input,
textarea,
select,
button {
  font: inherit;
}

/* links */
a:any-link {
  color: var(--text-color);
  text-decoration: none;
  overflow-wrap: break-word;
}

a:hover {
  color: var(--link-color);
  text-decoration: underline;
}

/* buttons */
a.button:any-link,
button {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  margin: 12px 0;
  border: 2px solid transparent;
  border-radius: 2.4em;
  padding: 0.5em 1.2em;
  font-family: var(--body-font-family);
  font-style: normal;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  color: var(--background-color);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.button:hover,
a.button:focus,
button:hover,
button:focus {
  cursor: pointer;
}

button:disabled,
button:disabled:hover {
  background-color: var(--light-color);
  cursor: unset;
}

a.button.secondary,
button.secondary {
  background-color: unset;
  border: 2px solid currentcolor;
  color: var(--text-color);
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* sections */
main > .section {
  margin: 0;
}

main > .section > div {
  padding: 0;
}

/* full-bleed media (e.g. case full-width images) — edge-to-edge, no side padding */
main .section.full-bleed > div {
  padding: 0;
  max-width: none;
}

main .section.full-bleed p {
  margin: 0;
}

main .section.full-bleed img {
  width: 100%;
  height: auto;
  display: block;
}

/* case standalone images with a side gutter (NOT edge-to-edge) — matches live's
   block-assets-and-copy[data-variant="full-width-content"] standalone image
   (as opposed to block-full-width-image, which IS edge-to-edge / .full-bleed
   above). Confirmed via computed styles on a live case page: flat 20px side
   gutter and 40px vertical padding at every breakpoint (375/768/1440px),
   not full-bleed and not fluid/responsive. */
main .section.image-with-padding > div {
  padding: 40px 20px;
  max-width: none;
}

main .section.image-with-padding img {
  width: 100%;
  height: auto;
  display: block;
}

main > .section:first-of-type {
  margin-top: 0;
}

/* horizontal dividers between key sections — matches live site text-divider style */
.work-container,
.invent-growth-container {
  border-top: 0.8px solid rgb(118 118 118);
  padding-top: 20px;
}

@media (width >= 900px) {
  main > .section > div {
    padding: 0;
  }
}

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);
  margin: 0;
  padding: 40px 0;
}

/* ---- Section heading typography (matches DEPT® clean style) ---- */
main .section .default-content-wrapper h2 {
  font-family: var(--body-font-family);
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 2.375rem);
  line-height: 1.2;
  margin-top: 0;
}

main .section .default-content-wrapper h3 {
  font-family: var(--body-font-family);
  font-weight: 400;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.3;
}

main .section .default-content-wrapper p {
  font-size: var(--body-font-size-s);
  line-height: 1.75;
  font-weight: 400;
}

/* ---- Pill/outline link style ---- */
main .section a.button:any-link {
  border: 1px solid #121212;
  border-radius: 32px;
  padding: 10px 20px;
  font-size: var(--body-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-color);
  background-color: transparent;
  transition: background-color 0.2s, color 0.2s;
}

main .section a.button:hover {
  background-color: var(--text-color);
  color: var(--background-color);
  text-decoration: none;
}

/* ---- Section images (full bleed, no border radius) ---- */
main .section .default-content-wrapper picture {
  display: block;
}

main .section .default-content-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---- Dark section ---- */
main .section.dark {
  background-color: var(--text-color);
  color: var(--background-color);
  margin: 0;
  padding: 40px 0 0;
}

main .section.dark a:any-link {
  color: var(--background-color);
}

main .section.dark a.button:any-link {
  border-color: var(--background-color);
  color: var(--background-color);
  background-color: transparent;
}

main .section.dark a.button:hover {
  background-color: var(--background-color);
  color: var(--text-color);
}

main .section.dark a.button.secondary {
  color: var(--background-color);
  background-color: transparent;
  border-color: var(--background-color);
}

/* Social Links — a core text component (row of links: Copy / Facebook /
   WhatsApp / Twitter / LinkedIn) that shares the FIRST content section. Icons
   are background-images keyed off each link's href (EDS strips inline icon
   markup inside links); link text is hidden. On desktop the links become a
   vertical rail absolutely centered on the right of the (shared) section. */
main .section.social-links {
   position: relative;
   padding-top: 80px;
   padding-bottom: 80px;
  }

main .section.social-links .default-content-wrapper p {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
}

main .section.social-links .default-content-wrapper a {
  display: inline-block;
  width: 24px;
  height: 24px;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

main .section.social-links .default-content-wrapper a[href*="/insight/"] { background-image: url('/icons/link.svg'); }
main .section.social-links .default-content-wrapper a[href*="facebook.com"] { background-image: url('/icons/facebook.svg'); }
main .section.social-links .default-content-wrapper a[href*="whatsapp"] { background-image: url('/icons/whatsapp.svg'); }
main .section.social-links .default-content-wrapper a[href*="twitter.com"] { background-image: url('/icons/twitter.svg'); }
main .section.social-links .default-content-wrapper a[href*="linkedin.com"] { background-image: url('/icons/linkedin.svg'); }

/* On a dark section the #121212 share icons are invisible — invert them to white. */
main .section.dark.social-links .default-content-wrapper a {
  filter: invert(1) brightness(2);
}

@media (width >= 900px) {
  /* vertical rail, centered on the right of the shared content section */
  main .section.social-links .default-content-wrapper {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    margin: 0;
    z-index: 2;
  }

  main .section.social-links .default-content-wrapper p {
    flex-direction: column;
    gap: 20px;
  }
}

main .card-meta,
main .section.card-meta-container {
  display: none !important;
}

/*
 * Scroll reveal — matches the live site's "scale-fade" motion: text rises a
 * little and fades/scales in as it enters the viewport. Applied to text
 * elements only (images are intentionally excluded). `.reveal-in` is added by
 * decorateScrollReveal() in scripts.js via IntersectionObserver. Honours
 * reduced-motion: when set, the base rules below don't apply so content is
 * fully visible from the start.
 */
@media (prefers-reduced-motion: no-preference) {
  main .reveal {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }

  main .reveal.reveal-in {
    opacity: 1;
    transform: none;
  }
}


/* ── Vacancy page section overrides ────────────────────────── */
main > .section.vacancy-hero-container,
main > .section.culture-teaser-container {
  margin: 0;
}

/* Vacancy meta: override default-content-wrapper for the meta section */
main > .section:has(.vacancy-meta),
main > .section:has(.vacancy-description) {
  margin: 0;
}

/* ── Two videos + one image, equal thirds (case pages) ────────────────
   Matches live block-assets-and-copy[data-variant="three-up-asset-three"]
   when the row mixes two video assets with one image asset. Each item is
   its own jumbotron block (video or image fallback), so this grids the
   section's direct block wrappers rather than a default-content-wrapper.
   Breakpoints match the other equal-thirds grid (three-images-one). ── */
main .section.two-images-video {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
  margin-inline: var(--dept-h-gutter);
}

main .section.two-images-video > div {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

main .section.two-images-video .jumbotron-video,
main .section.two-images-video .jumbotron-image,
main .section.two-images-video .jumbotron-image img {
  width: 100%;
  height: 100%;
}

main .section.two-images-video .jumbotron-image img {
  object-fit: cover;
}

@media (width < 1200px) {
  main .section.two-images-video {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width < 768px) {
  main .section.two-images-video {
    grid-template-columns: 1fr;
    margin-inline: 0;
    padding: 0 var(--dept-h-gutter);
  }
}

/* ── Three-image section layout (case pages) ────────────────────────── */
main .section.three-images-one {
  padding: 0;
  margin: 0;
}

main .section.three-images-one .default-content-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  margin-inline: var(--dept-h-gutter);
}

main .section.three-images-one .default-content-wrapper p {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  box-sizing: border-box;
}

main .section.hub-contact .default-content-wrapper picture,
main .section.hub-contact .default-content-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
  color: transparent;
}

main .section.three-images-one .default-content-wrapper p picture,
main .section.three-images-one .default-content-wrapper p img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

@media (width < 1200px) {
  main .section.three-images-one .default-content-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (width < 768px) {
  main .section.three-images-one .default-content-wrapper {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 0 var(--dept-h-gutter);
  }

  main .section.three-images-one .default-content-wrapper p {
    min-height: 20rem;
  }
}

/* ── Two-image section layout - Equal 50/50 (rituals pattern) ────────────────────────── */
main .section.two-images-equal {
  padding: 0;
  margin: 0;
}

main .section.two-images-equal .default-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  margin-inline: var(--dept-h-gutter);
}

main .section.two-images-equal .default-content-wrapper p {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  box-sizing: border-box;
  aspect-ratio: 4/5;
}

main .section.two-images-equal .default-content-wrapper p picture,
main .section.two-images-equal .default-content-wrapper p img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

@media (width < 900px) {
  main .section.two-images-equal .default-content-wrapper {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 0 var(--dept-h-gutter);
  }

  main .section.two-images-equal .default-content-wrapper p {
    aspect-ratio: auto;
    min-height: 20rem;
  }
}

/* ── Two-image section layout (case pages) ────────────────────────── */
main .section.two-images-one {
  padding: 0;
  margin: 0;
}

main .section.two-images-one .default-content-wrapper {
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: stretch;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

main .section.two-images-one .default-content-wrapper p {
  flex: 0 0 50%;
  width: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  box-sizing: border-box;
}

/* Hub-contact paragraph styles are now fully defined in the main hub-contact block below */

main .section.two-images-one .default-content-wrapper p:first-child {
  padding: 0;
}

main .section.two-images-one .default-content-wrapper p:first-child picture,
main .section.two-images-one .default-content-wrapper p:first-child img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

main .section.two-images-one .default-content-wrapper p:last-child {
  padding: 10rem;
  background-color: var(--background-color);
  box-sizing: border-box;
}

main .section.two-images-one .default-content-wrapper p:last-child picture,
main .section.two-images-one .default-content-wrapper p:last-child img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@media (width < 900px) {
  main .section.two-images-one .default-content-wrapper p:last-child {
    padding: 5rem;
  }
}

@media (width < 768px) {
  main .section.two-images-one .default-content-wrapper p:last-child {
    padding: 2.5rem;
  }
}


/* ===== Hub Contact Card (loreal-content) — variant overrides hub-contact ===== */
/* stylelint-disable-next-line no-descending-specificity */
main .section.hub-contact.loreal-content .default-content-wrapper::before {
  content: 'US ';
  order: 1;
  flex: 0 0 100%;
  display: block;
  font-weight: 400;
  font-size: 50px;
  margin-bottom: 40px;
  line-height: 55px;
  color: rgb(0 229 37 / 100%);
  font-family: 'custom_135706', serif;
  text-align: center;
  font-style: italic;
  text-transform: none;
}

main .section.hub-contact.loreal-content .default-content-wrapper::after {
  content: 'Contact';
  font-size: 68px;
  font-style: normal;
  line-height: 0;
  font-weight: 700;
  color: rgb(0 0 0 / 100%);
  text-transform: uppercase;
}

main .section.hub-contact.loreal-content .default-content-wrapper {
  max-width: 225px;
  margin: 0 auto;
  text-align: center;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.hub-contact.loreal-content .default-content-wrapper p:has(picture),
main .section.hub-contact.loreal-content .default-content-wrapper p:has(img) {
  max-width: 220px;
  max-height: 220px;
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

main .section.hub-contact.loreal-content .default-content-wrapper p:not(.button-container, :has(picture), :has(img)) {
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  font-style: normal;
  color: rgb(0 0 0 / 100%);
  text-align: left;
  letter-spacing: -0.7px;
  font-variation-settings: unset;
  zoom: 1;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.hub-contact.loreal-content .default-content-wrapper h2 {
  font-weight: 700;
  font-size: 12px;
  line-height: 17px;
  font-style: normal;
  color: rgb(0 0 0 / 100%);
  text-align: left;
  letter-spacing: -0.7px;
  font-variation-settings: unset;
  margin-bottom: 0;
  zoom: 1;
}

main .section.hub-contact.loreal-content .default-content-wrapper a:any-link {
  color: rgb(0 0 0 / 100%);
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  text-align: left;
  align-items: flex-start;
  letter-spacing: -0.7px;
  margin: 0;
  font-variation-settings: unset;
  text-transform: none;
  width: 100%;
  zoom: 1;
}

main .section.hub-contact.loreal-content .default-content-wrapper a:any-link:hover{
  color: rgb(0 229 37 / 80%)
}

main .section.hub-contact.loreal-content .default-content-wrapper .button-container {
  display: block;
  margin: 0;
  width: 100%;
  font-variation-settings: unset
}

main .section.hub-contact.loreal-content .button[href^="mailto:"]::before {
  content: '✉️ ';
}

/* Responsive: Tablet (600px - 900px) */
@media (width >= 600px) and (width < 900px) {
  main .section.hub-contact.loreal-content .default-content-wrapper {
    max-width: 225px;
  }

  main .section.hub-contact.loreal-content .default-content-wrapper p:has(picture),
  main .section.hub-contact.loreal-content .default-content-wrapper p:has(img) {
    max-width: 280px;
    max-height: 280px;
  }
}

/* Responsive: Mobile (< 600px) */
@media (width < 600px) {
  main .section.hub-contact.loreal-content{
    margin-top: 50px;
  }

  main .section.hub-contact.loreal-content .default-content-wrapper {
    max-width: 225px;
    padding: 30px 20px;
  }

  main .section.hub-contact.loreal-content .default-content-wrapper::before {
    font-size: 28px;
    line-height: 0;
    margin-bottom: 20px;
  }

  main .section.hub-contact.loreal-content .default-content-wrapper::after {
    font-size: 32px;
    line-height: 35px;
  }

  main .section.hub-contact.loreal-content .default-content-wrapper h2 {
    font-size: 16px;
  }

  main .section.hub-contact.loreal-content .default-content-wrapper p:has(picture),
  main .section.hub-contact.loreal-content .default-content-wrapper p:has(img) {
    max-width: 220px;
    max-height: 220px;
  }

  main .section.hub-contact.loreal-content .default-content-wrapper > p:nth-of-type(1) {
    font-size: 11px;
    margin: 0 0 1rem;
  }

  main .section.hub-contact.loreal-content .button-container {
    margin: 0.5rem 0;
  }

  main .section.hub-contact.loreal-content .button {
    padding: 10px 16px;
    font-size: 11px;
  }
}

/* ================================================================
   Hub Contact — WHITE background, centered single-column layout.
   Matches readymag design:
     · Large decorative "GET IN TOUCH" heading (warm tan, via ::before)
     · Portrait photo
     · Name + role below photo (centered, dark)
     · Thin separator line
     · EMAIL | LINKEDIN side-by-side text links
   ================================================================ */

main .section.hub-contact {
  background: #fff;
  color: #121212;
  padding: 0;
}

main .section.hub-contact > div {
  max-width: unset;
  padding: 0;
}

/* Flex-wrap row layout: full-width items wrap to own line,
   button-containers (auto-width) share a line for EMAIL | LINKEDIN */
/* stylelint-disable-next-line no-descending-specificity */
main .section.hub-contact .default-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  place-content: flex-start center;
  text-align: center;
  padding: 150px 0 72px;
  margin: 0 auto;
  gap: 0;
  position: relative;
}

/* ── Decorative "GET IN TOUCH" heading (generated, not authored) ── */
/* stylelint-disable-next-line no-descending-specificity */
main .section.hub-contact .default-content-wrapper::before {
  content: 'GET IN TOUCH';
  order: 1;
  flex: 0 0 100%;
  display: block;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  font-feature-settings: "smcp";
  font-variation-settings: 'wght' 800, 'wght' 800;
  font-size: clamp(28px, 5vw, 70px);
  color: rgb(196 185 176 / 100%);
  text-transform: uppercase;
  zoom: 1.4;
}

/* ── Portrait image ── */
/* stylelint-disable no-descending-specificity */
main .section.hub-contact .default-content-wrapper p:has(picture),
main .section.hub-contact .default-content-wrapper p:has(img) {
  order: 2;
  flex: 0 0 100%;
  max-width: calc(100% - 40px);
  max-height: 300px;
  margin: 0 auto 32px;
  padding: 0;
  align-self: center;
}

main .section.hub-contact .default-content-wrapper p:has(picture) picture,
main .section.hub-contact .default-content-wrapper p:has(img) img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: unset;
  object-fit: cover;
  object-position: top center;
  color: transparent;
}
/* stylelint-enable no-descending-specificity */

/* ── Name (h2) ── */
/* stylelint-disable-next-line no-descending-specificity */
main .section.hub-contact .default-content-wrapper h2,
main .section.hub-contact .default-content-wrapper h3 {
  order: 3;
  flex: 0 0 100%;
  color: rgb(0 0 0 / 100%);
  font-variation-settings: 'wght' 750, 'wght' 750;
  font-weight: 400;
  font-style: normal;
  line-height: 16px;
  font-size: 16px;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  zoom: 1.4;
}

/* ── Role paragraph ── */
/* stylelint-disable-next-line no-descending-specificity */
main .section.hub-contact .default-content-wrapper p:not(.button-container, :has(picture), :has(img)) {
  order: 4;
  flex: 0 0 100%;
  color: rgb(84 79 74 / 100%);
  font-variation-settings: 'wght' 600, 'wght' 600;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 16px;
  margin: 0;
  padding: 0;
  zoom: 1.4;
}

/* ── EMAIL / LINKEDIN — side by side text links ── */
main .section.hub-contact .default-content-wrapper p.button-container {
  order: 6;
  flex: 0 0 auto;
  margin: 10px 20px;
  padding: 0;
  font-weight: 400;
  font-style: normal;
  line-height: 10px;
  color: rgb(0 0 0 / 100%);
  font-size: 10px;
  font-variation-settings: 'wght' 750, 'wght' 750;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.hub-contact .default-content-wrapper a:any-link {
  display: inline-block;
  text-transform: uppercase;
  color: #121212;
  text-decoration: none;
  border: none;
  font-size: 10px;
  padding: 0;
  background: none;
  border-radius: 0;
  transition: opacity 0.15s ease;
  font-weight: 400;
  font-style: normal;
  line-height: 10px;
  zoom: 1.5;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.hub-contact .default-content-wrapper a:hover {
  color: rgb(255 73 1 / 100%);
  text-decoration: none;
}

/* ── Mobile: reduced padding ── */
@media (width < 600px) {
  main .section.hub-contact .default-content-wrapper {
    padding: 40px 10px 32px;
  }

  main .section.hub-contact .default-content-wrapper p:has(img) img {
    max-height: 300px;
  }
}

/* ── Tablet: responsive image sizing and reduced padding ── */
@media (width >= 600px) and (width < 900px) {
  main .section.hub-contact .default-content-wrapper {
    padding: 60px 0 48px;
  }

  main .section.hub-contact .default-content-wrapper p:has(picture),
  main .section.hub-contact .default-content-wrapper p:has(img) {
    max-width: 90vw;
    max-height: 350px;
    margin: 0 auto 32px;
  }

  main .section.hub-contact .default-content-wrapper p:has(picture) picture,
  main .section.hub-contact .default-content-wrapper p:has(img) img {
    max-width: 100%;
    max-height: 350px;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* ── Desktop: wider padding and slightly larger "GET IN TOUCH" ── */
@media (width >= 900px) {
  main .section.hub-contact .default-content-wrapper {
    padding: 100px 0 80px;
  }

  main .section.hub-contact .default-content-wrapper p:has(picture),
  main .section.hub-contact .default-content-wrapper p:has(img) {
    max-width: 724px;
    max-height: 476px;
  }
}

@media (width >= 1280px) {
  main .section.hub-contact .default-content-wrapper {
    padding: 110px 0 100px;
  }
}

.marks-spencer-page {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px) clamp(20px, 4vw, 65px);
  align-items: start;
  border-top: 1px solid #bdbdbd;
  padding: clamp(20px, 3vw, 38px) clamp(16px, 2vw, 30px);
}

/* stylelint-disable-next-line no-descending-specificity */
.marks-spencer-page > .default-content-wrapper {
  display: contents;
}

/* stylelint-disable-next-line no-descending-specificity */
.marks-spencer-page > .default-content-wrapper p:first-child {
  grid-column: 1;
  margin: 0;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(18px, 1.4vw, 24px);
  font-variation-settings: 'wght' 900, 'wght' 900;
  color: rgb(255 73 1 / 100%);
  zoom: 1.4;
  line-height: clamp(26px, 2vw, 36px);
}

/* stylelint-disable-next-line no-descending-specificity */
.marks-spencer-page > .default-content-wrapper p:nth-child(2) {
  grid-column: 2 / 5;
  margin: 0;
  font-weight: 400;
  font-style: normal;
  color: rgb(0 0 0 / 100%);
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: clamp(26px, 2vw, 36px);
  text-transform: uppercase;
  font-variation-settings: 'wght' 572, 'wght' 572;
  zoom: 1.4;
}

/* Video */
.marks-spencer-page .embed-wrapper .embed {
  width: 100%;
  max-width: min(711px, 100%);
  margin: clamp(20px, 3vw, 40px) auto 0;

}

.marks-spencer-page .embed-wrapper {
  grid-column: 6 / 12;
  width: 100%;
}

.marks-spencer-page .embed-video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.marks-spencer-page .embed-video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;
}

/* Position the rich text */
.marks-spencer-page > .rich-text-wrapper {
    grid-column: 6 / 13;
    grid-row: 1;
    align-self: start;
}

/* stylelint-disable-next-line no-descending-specificity */
.marks-spencer-page > .rich-text-wrapper .rich-text-body p:not(.button-container) {
    margin: 0;
    font-weight: 700;
    color: rgb(51 51 51 / 100%);
    font-style: normal;
    font-size: 18px;
    line-height: 18px;
    font-variation-settings: 'wght' 600;
    zoom: 1.4;
    letter-spacing: -0.2px;
}

/* stylelint-disable-next-line no-descending-specificity */
.marks-spencer-page > .rich-text-wrapper .button-container {
    margin: 0 0 56px;
}

.marks-spencer-page > .rich-text-wrapper .button-container .button {
  padding: 0;
  text-decoration: none;
  padding-bottom: 1px;
  background: linear-gradient(to right, rgb(255 70 57 / 100%) 0%, rgb(255 70 57 / 100%) 100%) 0 100% / 1px 1px repeat-x;
  color: rgb(255 70 57 / 100%);
  font-style: normal;
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  font-variation-settings: 'wght' 600;
  border-radius: 0;
  border: none;
  margin: 0;
  text-transform: none;
  zoom: 1.4;
  letter-spacing: -0.2px;
}

.marks-spencer-page .cards-wrapper {
    grid-column: 5 / 13;
  }

  .marks-spencer-page .cards > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: clamp(24px, 3vw, 48px);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .marks-spencer-page .cards > ul > li{
    border: none;
    width: 100%;
    max-width: none;
  }

  .marks-spencer-page .cards-card-body {
    margin-top: 18px;
}

/* stylelint-disable-next-line no-descending-specificity */
.marks-spencer-page .cards > ul > li .cards-card-body p a {
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  font-feature-settings: "smcp";
  color: rgb(0 0 0 / 100%);
  font-size: 13px;
  line-height: 22px;
  border:none;
  border-radius: 0;
  zoom: 1.4;
  font-variation-settings: 'wght' 572, 'wght' 572;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

/* stylelint-disable-next-line no-descending-specificity */
.marks-spencer-page .cards > ul > li .cards-card-body p a:hover{
  color: rgb(255 73 1 / 100%);
  text-decoration: none;
  text-transform: none;
  background: transparent;
}


.marks-spencer-page .cards-card-image {
    width: 100%;
}

/* stylelint-disable-next-line no-descending-specificity */
.marks-spencer-page .cards-card-image picture,.marks-spencer-page .cards-card-image img {
    display: block;
    width: 100%;
}

/* stylelint-disable-next-line no-descending-specificity */
.marks-spencer-page .cards-card-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: contain;
}


@media (width < 992px) {
  .marks-spencer-page {
    grid-template-columns: repeat(6, 1fr);
    row-gap: 32px;
  }

  
  .marks-spencer-page > .default-content-wrapper p:first-child {
    grid-column: 1;
  }

  .marks-spencer-page > .default-content-wrapper p:nth-child(2) {
    grid-column: 2 / 7;
  }

  .marks-spencer-page .embed-wrapper,
  .marks-spencer-page .cards-wrapper,
  .marks-spencer-page > .rich-text-wrapper {
    grid-column: 2 / 7;
  }

  .marks-spencer-page .cards > ul {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (width < 768px) {
  .marks-spencer-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 0 60px 20px;

  }

  .marks-spencer-page .rich-text {
    padding: 40px 0;
    align-items: flex-start;
    margin: 0;
  }

  .marks-spencer-page .rich-text-body{
    padding: 0;
  }

  .marks-spencer-page .cards > ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .marks-spencer-page .cards-wrapper{
    margin: 0 auto;
  }

  .marks-spencer-page > .default-content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }

  .marks-spencer-page > .default-content-wrapper p:first-child {
    font-size: 28px;
  }

  .marks-spencer-page > .default-content-wrapper p:nth-child(2) {
    font-size: 28px;
  }

  .marks-spencer-page .embed-wrapper {
    width: 100%;
    box-sizing: border-box;
  }

  .marks-spencer-page .embed {
    width: 100%;
    max-width: 100%;
    margin: 20px 0 0;
    box-sizing: border-box;
  }

  .marks-spencer-page .embed-video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    box-sizing: border-box;
  }
}

@media (width < 1440px) {
  .marks-spencer-page {
    grid-template-columns: repeat(12, 1fr);
  }

  .marks-spencer-page > .default-content-wrapper p:nth-child(2) {
    grid-column: 2 / 4;
  }

  .marks-spencer-page .embed-wrapper,
  .marks-spencer-page .cards-wrapper,
  .marks-spencer-page > .rich-text-wrapper {
    grid-column: 4 / 13;
  }

  .marks-spencer-page .cards > ul {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

@media (width < 600px) {
  .marks-spencer-page {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 24px 20px 60px;
  }

  .marks-spencer-page > .default-content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }

  .marks-spencer-page > .default-content-wrapper p:first-child {
    font-size: 18px;
    font-weight: 900;
    color: rgb(255 73 1 / 100%);
    margin: 0;
    line-height: 1;
  }

  .marks-spencer-page > .default-content-wrapper p:nth-child(2) {
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
  }

  .marks-spencer-page .cards-wrapper {
    width: 100%;
    margin: 0;
  }

  .marks-spencer-page .cards > ul {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .marks-spencer-page .cards > ul > li {
    width: 100%;
    max-width: none;
  }

  .marks-spencer-page .cards-card-image,
  .marks-spencer-page .cards-card-image picture,
  .marks-spencer-page .cards-card-image img {
    width: 100%;
    display: block;
  }

  .marks-spencer-page .cards-card-image img {
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }

  .marks-spencer-page .cards-card-body {
    margin-top: 16px;
  }

  .marks-spencer-page .cards > ul > li .cards-card-body p a {
    font-size: 12px;
    line-height: 1.4;
    justify-content: center;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .marks-spencer-page .embed-wrapper,
  .marks-spencer-page > .rich-text-wrapper {
    width: 100%;
  }

  .marks-spencer-page .rich-text-body .button-container .button {
    font-size: 12px !important;
    overflow: visible ;
    text-overflow: clip ;
    white-space: normal ;
  }
}

@media (width < 600px) {
    .marks-spencer-page > .rich-text-wrapper {
        width: 100%;
    }

    .marks-spencer-page > .rich-text-wrapper .rich-text-body {
        width: 100%;
    }

    .marks-spencer-page > .rich-text-wrapper .rich-text-body p:not(.button-container) {
        font-size: 16px;
        line-height: 22px;
    }

    .marks-spencer-page > .rich-text-wrapper .button-container .button {
        font-size: 16px;
        line-height: 22px;
    }

    .marks-spencer-page > .rich-text-wrapper .button-container {
        margin-bottom: 32px;
    }

    .marks-spencer-page .embed-wrapper {
        width: 100%;
        box-sizing: border-box;
    }

    .marks-spencer-page .embed {
        width: 100%;
        max-width: 100%;
        margin: 20px 0 0;
        box-sizing: border-box;
    }

    .marks-spencer-page .embed-video-wrapper {
        width: 100%;
        height: 0;
        overflow: hidden;
        padding-bottom: 56.25%;
        box-sizing: border-box;
    }
}

/* ── Clickable card images ── */
.marks-spencer-page .cards-card-link {
  text-decoration: none;
  display: block;
}

.marks-spencer-page .cards-card-link:hover {
  opacity: 0.85;
  transition: opacity 0.3s ease;
}