/* ======================================================================
   Culture page (pages/culture.html). Loaded after style.css and only on this page.
   Restyles the existing PulseWave content to the Life at Cadence page on cadence.com (measured at 1920px):
   fonts, sizes, spacing and hovers. Colours follow the PulseWave theme. No content is added or removed.
   ====================================================================== */
[data-page="culture"] { --font-head: var(--font-nav); --font-body: var(--font-nav); --cu-col: min(1070px, calc(100% - 2 * var(--gutter))); }
[data-page="culture"] main { font-family: var(--font-nav); color: var(--nav-ink); }
[data-page="culture"] main .section { padding-block: 0; background: #fff; }
[data-page="culture"] main .section > .container { max-width: none; width: var(--cu-col); padding-inline: 0; }
[data-page="culture"] .deco--dots::after { content: none; }

/* shared type */
[data-page="culture"] main .h2 { margin: 0 0 24px; font: 300 36px/43.2px var(--font-nav); letter-spacing: -0.72px; color: var(--nav-ink); }
[data-page="culture"] main .section p { font: 300 18px/28.8px var(--font-nav); letter-spacing: 0.72px; color: var(--nav-ink); }
[data-page="culture"] .section-head { display: block; margin: 0; }
[data-page="culture"] .section-head__text { max-width: none; }

/* shared buttons: 220px+, 47px, 14.4px Medium capitals */
[data-page="culture"] main .btn:not(.btn--sm) { min-width: 220px; height: 47px; padding: 12px 30px 10px; justify-content: center;
  font: 500 14.4px/23.04px var(--font-nav); letter-spacing: 1.728px; text-transform: uppercase; }

/* ---------- top bars (same as the Careers page) ---------- */
[data-page="culture"] .subnav--family .container { height: 48px; justify-content: flex-start; }
[data-page="culture"] .subnav--family a { display: flex; align-items: center; height: 48px; margin: 0; padding: 0 15px; font: 500 14px/16px var(--font-nav);
  letter-spacing: normal; text-transform: none; color: #707070; transition: background-color .2s, color .2s; }
[data-page="culture"] .subnav--family a:first-child { margin-left: -15px; }
[data-page="culture"] .subnav--family a:hover { background: #f5f5f5; color: #707070; }
[data-page="culture"] .subnav--family a.is-active { color: var(--nav-ink); }
[data-page="culture"] .subnav--page { background: #f5f5f5; border-bottom: 0; }
[data-page="culture"] .subnav--page .container { height: 50px; min-height: 0; }
[data-page="culture"] .subnav--page .subnav__links { gap: 0; }
[data-page="culture"] .subnav--page .subnav__links a { position: relative; display: flex; align-items: center; height: 50px; margin: 0; padding: 0 15px;
  border: 0; font: 500 14px/16px var(--font-nav); letter-spacing: 0.72px; color: #707070; }
[data-page="culture"] .subnav--page .subnav__links a:first-child { margin-left: -15px; }
[data-page="culture"] .subnav--page .subnav__links a::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 0; height: 2px; background: var(--accent);
  transform: scaleX(0); transition: transform .25s; }
[data-page="culture"] .subnav--page .subnav__links a:hover { color: var(--accent); }
[data-page="culture"] .subnav--page .subnav__links a.is-active { color: var(--nav-ink); }
[data-page="culture"] .subnav--page .subnav__links a.is-active::after { transform: scaleX(1); }
[data-page="culture"] .subnav--page .btn--sm { min-width: 160px; height: 32px; padding: 6px 16px; justify-content: center;
  font: 500 14px/20px var(--font-nav); letter-spacing: 1.68px; text-transform: uppercase; }

/* ---------- hero: 560px, text bottom-left ---------- */
[data-page="culture"] .page-hero { display: flex; align-items: flex-end; min-height: 560px; padding: 0 0 80px; }
[data-page="culture"] .page-hero .h1 { margin: 0 0 14px; font: 300 48.6px/72.9px var(--font-nav); letter-spacing: -0.972px; color: #fff; }
[data-page="culture"] .page-hero .lead { margin: 0 0 12px; font: 300 18px/27px var(--font-nav); letter-spacing: 0.72px; color: #fff; }
[data-page="culture"] .page-hero .btn-row { margin: 0; }

/* ---------- intro: 795px text + 202px art on the right; then tabs ---------- */
[data-page="culture"] #place { padding: 72px 0 0; }
[data-page="culture"] .intro-split { grid-template-columns: 795px 202px; justify-content: start; gap: 30px; align-items: start; }
[data-page="culture"] .intro-split .h2 { margin-top: 8px; }
[data-page="culture"] main .intro-split p { margin: 0 0 16px; }
[data-page="culture"] .intro-split p:last-child { margin-bottom: 0; }
[data-page="culture"] .intro-split .overview__art { width: 202px; margin-top: 0; }

/* tabs: 18px, grey, dark + 2px underline when current, blue on hover; thin full-width line under the row */
[data-page="culture"] .line-tabs { gap: 0; margin: 65px 15px 0; border-bottom: 1px solid #d7dde0; }
[data-page="culture"] .line-tab { margin: 0 42px -1px 0; padding: 10px 0 12px; border-bottom: 2px solid transparent;
  font: 400 18px/28.8px var(--font-nav); letter-spacing: 0.72px; color: #707070; transition: color .2s, border-color .2s; }
[data-page="culture"] .line-tab:hover:not(.is-active) { color: var(--accent); border-bottom-color: var(--accent); }
[data-page="culture"] .line-tab.is-active { color: var(--nav-ink); border-bottom-color: var(--nav-ink); }

/* panel: 1040px; 28.8px heading, body, two-column tick list, 1040x435 image ending the section */
[data-page="culture"] .line-panel { margin: 0 15px; }
[data-page="culture"] .line-panel h3 { margin: 40px 0 25px; font: 400 28.8px/40.32px var(--font-nav); letter-spacing: -0.576px; color: var(--nav-ink); }
[data-page="culture"] main .line-panel > p { max-width: none; margin: 0; }
[data-page="culture"] .ticks { display: block; columns: 2; column-gap: 0; margin: 16px 0 0; padding-left: 15px; }
[data-page="culture"] .ticks li { position: relative; display: block; margin: 0 49px 16px 0; padding-left: 46px; break-inside: avoid-column;
  font: 300 18px/28.8px var(--font-nav); letter-spacing: 0.72px; color: var(--nav-ink); }
[data-page="culture"] .ticks li::before { position: absolute; left: 4px; top: 7px; width: 12px; height: 6px; border-left: 1.8px solid var(--nav-ink); border-bottom: 1.8px solid var(--nav-ink);
  transform: rotate(-45deg); }
[data-page="culture"] .ticks li span { color: var(--nav-ink); }
[data-page="culture"] .line-panel__media { margin-top: 35px; aspect-ratio: 1040 / 435; }
[data-page="culture"] .line-panel > p + .line-panel__media { margin-top: 51px; }

/* ---------- card sections: Make Your Mark (left heading) and Insights (centred heading) ---------- */
[data-page="culture"] #mark { padding: 80px 0 73px; }
[data-page="culture"] #insights { padding: 80px 0 73px; }
[data-page="culture"] #mark .section-head__text { text-align: left; }
[data-page="culture"] #insights .section-head__text { text-align: center; }
[data-page="culture"] #mark .h2, [data-page="culture"] #insights .h2 { margin: 0; }
[data-page="culture"] main .grid--3 { grid-template-columns: repeat(3, minmax(0, 335px)); justify-content: space-between; gap: 32px; margin-top: 49px; }
[data-page="culture"] #insights .grid--3 { margin-top: 57px; }

/* card: thin grey border, 195px image, 32px text padding; hover = gradient border + gradient title (as on Cadence) */
[data-page="culture"] .post-card { border: 0.8px solid #d7dde0; border-radius: 0; background: #fff; transition: none; }
[data-page="culture"] .post-card:hover { box-shadow: none; border: 0.8px solid transparent; border-image: linear-gradient(238.25deg, var(--accent-2) 0%, var(--accent) 103.82%) 1; }
[data-page="culture"] .post-card__media { aspect-ratio: auto; height: 195px; }
[data-page="culture"] .post-card__media .tile__bg { z-index: 0; background-size: cover; background-position: center; transition: none; }   /* image shows (was behind the card) */
[data-page="culture"] .post-card:hover .tile__bg { transform: none; }
[data-page="culture"] .post-card__body { padding: 32px 32px 40px; }
[data-page="culture"] .post-card__label { margin: 0; font: 400 14.4px/18px var(--font-nav); letter-spacing: 0.648px; text-transform: uppercase; color: #707070; }
[data-page="culture"] .post-card__body h3 { flex: 0; margin: 16px 0; font: 500 18px/25.2px var(--font-nav); color: var(--nav-ink); }
[data-page="culture"] .post-card__label + h3 { margin-top: 8px; }
[data-page="culture"] .post-card:hover h3 { background: linear-gradient(238.25deg, var(--accent-2) 0%, var(--accent) 103.82%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
[data-page="culture"] main .post-card__body p { flex: 1; margin: 0 0 16px; font: 300 16.2px/25.92px var(--font-nav); letter-spacing: 0.648px; color: #707070; }
[data-page="culture"] .post-card .link-arrow { margin-top: auto; font: 500 14.4px/23.04px var(--font-nav); letter-spacing: 1.728px; color: var(--nav-ink); }
[data-page="culture"] .post-card:hover .link-arrow { color: var(--accent); }
[data-page="culture"] .post-card:hover .link-arrow .icon { transform: translateX(5px); }

/* "View all" under Insights: Cadence-style dark button that empties on hover */
[data-page="culture"] #insights .btn-row { margin-top: 48px; }
[data-page="culture"] #insights .btn--stack { border: 1.6px solid var(--nav-ink); background: var(--nav-ink); color: #fff; box-shadow: none; transition: background-color .3s, color .3s; }
[data-page="culture"] #insights .btn--stack:hover { background: transparent; color: var(--nav-ink); box-shadow: none; }

/* ---------- connect bar: 91px light-blue band, 20.25px label, 30px dark icons 18px apart; brand colour on hover ---------- */
[data-page="culture"] .social-bar { background: color-mix(in srgb, var(--accent) 24%, #ffffff); }
[data-page="culture"] .social-bar .container { width: var(--cu-col); max-width: none; padding: 26px 0; gap: 18px; flex-wrap: nowrap; }
[data-page="culture"] .social-bar strong { margin: 0 -2px 0 0; font: 400 20.25px/32.4px var(--font-nav); letter-spacing: 0.81px; color: #262729; }
[data-page="culture"] .social-bar a { width: 30px; height: 39px; font-size: 30px; color: #262729; transition: color .2s; }
[data-page="culture"] .social-bar a .icon { width: 30px; height: 30px; stroke-width: 1.6; }
[data-page="culture"] .social-bar a[aria-label="LinkedIn"]:hover { color: #0a66c2; }
[data-page="culture"] .social-bar a[aria-label="YouTube"]:hover { color: #e00732; }
[data-page="culture"] .social-bar a[aria-label="X"]:hover { color: #262729; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  [data-page="culture"] .intro-split { grid-template-columns: minmax(0, 1fr); }
  [data-page="culture"] .intro-split .overview__art { display: none; }
  [data-page="culture"] main .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
}
@media (max-width: 760px) {
  [data-page="culture"] #place { padding-top: 56px; }
  [data-page="culture"] #mark, [data-page="culture"] #insights { padding: 56px 0; }
  [data-page="culture"] main .h2 { font-size: 28px; line-height: 36px; }
  [data-page="culture"] .page-hero { min-height: 420px; padding-bottom: 48px; }
  [data-page="culture"] .page-hero .h1 { font-size: 36px; line-height: 48px; }
  [data-page="culture"] .line-tabs { margin: 40px 0 0; }
  [data-page="culture"] .line-tab { margin-right: 24px; }
  [data-page="culture"] .line-panel { margin: 0; }
  [data-page="culture"] .ticks { columns: 1; }
  [data-page="culture"] main .grid--3 { grid-template-columns: minmax(0, 1fr); }
  [data-page="culture"] .social-bar .container { flex-wrap: wrap; }
}

/* ---------- fixes ---------- */
/* tabs: Cadence sets these in "Rubik-Normal", a face it never loads, so they render in its fallback stack
   (Meiryo / Osaka / Arial); use the same stack so they look identical. 2px dark underline on the current tab. */
[data-page="culture"] .line-tab { font-family: "Rubik-Normal", Meiryo, Osaka, Arial, sans-serif; font-weight: 400; }
[data-page="culture"] .line-tabs { border-bottom: 1px solid #ddd; }
[data-page="culture"] .line-tab.is-active { padding-bottom: 10px; border-bottom: 2px solid var(--nav-ink); }
[data-page="culture"] .line-tab:hover:not(.is-active) { padding-bottom: 10px; border-bottom-width: 2px; }

/* Make Your Mark: centred heading + description (1070px), cards 49px below */
[data-page="culture"] #mark .section-head__text { text-align: center; }
[data-page="culture"] #mark .h2 { margin-bottom: 24px; }
[data-page="culture"] main #mark .section-head__text p { margin: 0; }

/* connect bar: lighter band; footer-style marks at 30px, brand colour on hover (X fills in) */
[data-page="culture"] .social-bar { background: color-mix(in srgb, var(--accent) 13%, #ffffff); }
[data-page="culture"] .social-bar a { width: auto; height: 39px; display: flex; align-items: center; color: #262729; }
[data-page="culture"] .social-bar a svg { display: block; width: 26px; height: 26px; }
[data-page="culture"] .social-bar .social-yt svg { width: 30px; height: 30px; }
[data-page="culture"] .social-bar .social-fb { margin-right: -6px; }
[data-page="culture"] .social-bar .social-x svg path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: fill .2s; }
[data-page="culture"] .social-bar .social-fb:hover { color: #3b5998; }
[data-page="culture"] .social-bar .social-in:hover { color: #0077b5; }
[data-page="culture"] .social-bar .social-yt:hover { color: #c4302b; }
[data-page="culture"] .social-bar .social-x:hover { color: #262729; }
[data-page="culture"] .social-bar .social-x:hover .social-x__outline { fill: currentColor; }
/* icons in 30px slots, 48px apart, first one 16px after the label (Cadence positions) */
[data-page="culture"] .social-bar strong { margin-right: 2px; }
[data-page="culture"] .social-bar a { width: 30px; justify-content: center; }
[data-page="culture"] .social-bar .social-fb { margin-right: 0; }

/* Why Engineers Choose PulseWave: chip illustration aligned with the text like the RTL Design overview,
   i.e. ~100px right of the text column, 240px wide, centred vertically on the text */
@media (min-width: 1101px) {
  [data-page="culture"] .intro-split { grid-template-columns: minmax(0, 795px) 240px; column-gap: 100px; }
  [data-page="culture"] .intro-split .overview__art { width: 240px; align-self: center; }
}