/* ======================================================================
   One PulseWave - One Team page (pages/oneteam.html). Loaded after style.css and only on this page.
   Layout, fonts, sizes, spacing and hovers measured from the One Cadence - One Team page on cadence.com at 1920px.
   Colours follow the PulseWave theme.
   ====================================================================== */
[data-page="oneteam"] { --font-head: var(--font-nav); --font-body: var(--font-nav); --ot-grad: linear-gradient(238.25deg, var(--accent-2) 0%, var(--accent) 103.82%); }
[data-page="oneteam"] main { font-family: var(--font-nav); color: var(--nav-ink); background: #fff; }

/* ---------- culture & careers row: white, 48px, 14px Medium capitals; first item dark ---------- */
.ot-family .container { height: 48px; justify-content: flex-start; }
.ot-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: uppercase; color: #707070; transition: background-color .2s, color .2s; }
.ot-family a:first-child { margin-left: -15px; }
.ot-family a:hover { background: #f5f5f5; color: #707070; }
.ot-family a.ot-family__home { color: var(--nav-ink); }
.ot-family a.is-active { color: #707070; }

/* ---------- hero: 560px light band, dark 48.6px title, hexagon collage on the right ---------- */
.ot-hero { position: relative; display: flex; align-items: flex-end; min-height: 560px; overflow: hidden;
  background: linear-gradient(90deg, #f7f7f8 0%, #f3f4f7 55%, color-mix(in srgb, var(--accent) 6%, #fff) 100%); }
.ot-hero__cubes { position: absolute; top: -40px; left: 34%; width: 170px; opacity: .8; pointer-events: none; }
.ot-hero__inner { position: relative; z-index: 2; width: min(1290px, calc(100% - 2 * var(--gutter))); margin: 0 auto; padding-bottom: 145px; }
.ot-hero__title { max-width: 620px; margin: 0; font: 300 48.6px/72.9px var(--font-nav); letter-spacing: -0.972px; color: #222; }

/* collage: seven pointy-top hexagons (2 / 3 / 2), each a photo over a PulseWave-colour tile */
.ot-hero__hexes { position: absolute; z-index: 1; top: -12px; left: calc(50% + 10px); width: 632px; height: 600px; }
.ot-hex { position: absolute; width: 204px; height: 236px; padding: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--grad); }
.ot-hex img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; mix-blend-mode: normal; }
.ot-hex--1 { left: 106px; top: 0; }
.ot-hex--2 { left: 318px; top: 0; }
.ot-hex--3 { left: 0; top: 182px; }
.ot-hex--4 { left: 212px; top: 182px; }
.ot-hex--5 { left: 424px; top: 182px; }
.ot-hex--6 { left: 106px; top: 364px; }
.ot-hex--7 { left: 318px; top: 364px; }
/* the scene photos sit on a colour wash so the collage reads as one set, like Cadence's coloured tiles */
.ot-hex--2 img, .ot-hex--3 img, .ot-hex--5 img, .ot-hex--7 img { opacity: .78; }
.ot-hex--2 { background: linear-gradient(160deg, #5a7cf0, #3a5fd6); }
.ot-hex--3 { background: linear-gradient(160deg, #3d8ef3, #1f63c4); }
.ot-hex--5 { background: linear-gradient(160deg, #955af6, #7a3ce6); }
.ot-hex--7 { background: linear-gradient(160deg, #b04af9, #8e22d8); }

/* ---------- shared section type: centred 850px column, 36px Light heading, 18px Light body ---------- */
.ot-sec { padding: 48px 0; }
.ot-col { width: min(850px, calc(100% - 2 * var(--gutter))); margin: 0 auto; text-align: center; }
.ot-wide { width: min(1070px, calc(100% - 2 * var(--gutter))); margin: 0 auto; }
.ot-h2 { margin: 8px 0 24px; font: 300 36px/43.2px var(--font-nav); letter-spacing: -0.72px; color: var(--nav-ink); }
.ot p { margin: 0 0 16px; font: 300 18px/28.8px var(--font-nav); letter-spacing: 0.72px; color: var(--nav-ink); }
.ot p.ot-strong { margin-bottom: 0; font-weight: 500; }
.ot-sec--intro { padding-bottom: 64px; }

/* ---------- voices: three 335px grey cards, 240px image, VIDEO label, Watch Video link ---------- */
.ot-sec--voices { padding-bottom: 80px; }
.ot-sec--voices .ot-col p { margin-bottom: 0; }
.ot-voices { display: grid; grid-template-columns: repeat(3, minmax(0, 335px)); justify-content: center; gap: 31px; margin-top: 40px; padding: 0 var(--gutter); }
.ot-voice { display: flex; flex-direction: column; min-height: 617px; background: #f5f5f5; border: 0.8px solid #e2e2e2; }
.ot-voice__media { position: relative; display: block; height: 240px; background-size: cover; background-position: center; }
.ot-voice__media::before { content: ""; position: absolute; inset: 0; background: transparent; transition: background .25s; }
.ot-voice__body { display: flex; flex: 1; flex-direction: column; padding: 32px 32px 45px; }
.ot-label { display: block; font: 400 12px/24px var(--font-nav); letter-spacing: 2.88px; text-transform: uppercase; color: #707070; }
.ot-voice h5 { margin: 32px 0 16px; font: 500 18px/25.2px var(--font-nav); color: var(--nav-ink); transition: color .25s; }
.ot-voice__text { display: block; font: 300 16.2px/25.92px var(--font-nav); letter-spacing: 0.648px; color: var(--nav-ink); }
.ot-voice__cta { display: inline-flex; align-items: center; margin-top: auto; padding-top: 24px; font: 500 14.4px/23.04px var(--font-nav); letter-spacing: 1.728px;
  text-transform: uppercase; color: var(--nav-ink); transition: color .25s; }
.ot-voice__cta svg { width: 18px; height: 18px; margin-left: 8px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: transform .25s; }
.ot-voice:hover .ot-voice__media::before { background: rgba(0, 0, 0, .15); }
.ot-voice:hover h5, .ot-voice:hover .ot-voice__cta { color: var(--accent); }
.ot-voice:hover .ot-voice__cta svg { transform: translateX(5px); }
.ot-voice:focus-visible { outline: 4px solid var(--accent); outline-offset: 1px; }

/* ---------- inclusion groups: 100px marks, 14px capitals; 4 across (220px slots), then 3 (293.5px slots) ---------- */
.ot-sec--groups { padding-bottom: 112px; }
.ot-groups { display: grid; row-gap: 81px; width: min(1180px, calc(100% - 2 * var(--gutter))); margin: 88px auto 0; }
.ot-groups__row { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 40px; }
.ot-group { display: flex; flex-direction: column; align-items: center; width: 220px; text-align: center; }
.ot-group--wide { width: 293.5px; }
.ot-group__icon { display: grid; place-items: center; width: 100px; height: 100px; }
.ot-group__icon .icon { width: 100px; height: 100px; stroke-width: .9; }
.ot-group__icon--1 { color: #e2457a; } .ot-group__icon--2 { color: var(--accent-2); } .ot-group__icon--3 { color: var(--accent); }
.ot-group__icon--4 { color: #f08a24; } .ot-group__icon--5 { color: #7a3ce6; } .ot-group__icon--6 { color: #1f63c4; } .ot-group__icon--7 { color: #1aa59a; }
.ot .ot-group p { width: 140px; margin: 15px 0 0; font: 300 14px/20px var(--font-nav); letter-spacing: 0.56px; text-transform: uppercase; color: var(--nav-ink); }
.ot .ot-group--wide p { width: 213px; }

/* ---------- make your mark banner: 305px, white 36px title + Apply Now ---------- */
.ot-banner { position: relative; min-height: 305px; overflow: hidden; background: #333; }
.ot-banner__art { position: absolute; inset: 0; background-size: cover; background-position: center 35%; }
.ot-banner__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 17, 29, .85) 0%, rgba(12, 17, 29, .45) 45%, rgba(12, 17, 29, .1) 100%); }
.ot-banner__cubes { position: absolute; top: -30px; left: 2%; width: 150px; opacity: .25; pointer-events: none; }
.ot-banner__inner { position: relative; width: min(1290px, calc(100% - 2 * var(--gutter))); margin: 0 auto; padding: 91px 0 64px; }
.ot-banner__title { margin: 0 0 15px; font: 300 36px/54px var(--font-nav); letter-spacing: -0.72px; color: #fff; }

/* buttons: 220px, 47px, 14.4px Medium capitals; outline version for Related Content */
.ot-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; height: 47px; padding: 12px 30px 10px;
  font: 500 14.4px/23.04px var(--font-nav); letter-spacing: 1.728px; text-transform: uppercase; }
.ot-btn--line { border: 1px solid var(--nav-ink); background: #fff; color: var(--nav-ink); transition: background-color .3s, color .3s; }
.ot-btn--line:hover { background: var(--nav-ink); color: #fff; }

/* ---------- related content: left heading, three 337px items (50px icon, 23.4px title, outline button) ---------- */
.ot-sec--related { padding: 96px 0 112px; }
.ot-sec--related .ot-h2 { text-align: left; margin-bottom: 0; }
.ot-related { display: grid; grid-template-columns: repeat(3, minmax(0, 337px)); gap: 30px; margin-top: 51px; }
.ot-rel { display: flex; flex-direction: column; align-items: flex-start; padding: 16px; }
.ot-rel > .icon { font-size: 50px; stroke-width: 1.1; color: var(--nav-ink); }
.ot-rel h4 { margin: 40px 0 16px; font: 400 23.4px/32.76px var(--font-nav); color: var(--nav-ink); }
.ot .ot-rel p { margin: 0 0 24px; font: 300 16.2px/25.92px var(--font-nav); letter-spacing: 0.648px; }
.ot-rel .ot-btn { margin-top: auto; }

/* ---------- smaller screens ---------- */
@media (max-width: 1280px) {
  .ot-hero__hexes { left: auto; right: -60px; transform: scale(.85); transform-origin: right top; }
}
@media (max-width: 1100px) {
  .ot-voices { grid-template-columns: repeat(2, minmax(0, 335px)); }
  .ot-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ot-hero { min-height: 520px; align-items: flex-end; }
  .ot-hero__hexes { top: 0; right: 50%; transform: translateX(50%) scale(.55); transform-origin: center top; }
  .ot-hero__cubes { display: none; }
  .ot-hero__inner { padding-bottom: 40px; }
  .ot-hero__title { font-size: 34px; line-height: 44px; }
  .ot-h2 { font-size: 28px; line-height: 36px; }
  .ot-voices { grid-template-columns: minmax(0, 335px); }
  .ot-voice { min-height: 0; }
  .ot-groups { row-gap: 40px; margin-top: 48px; }
  .ot-group, .ot-group--wide { width: 50%; }
  .ot .ot-group p, .ot .ot-group--wide p { width: auto; max-width: 160px; }
  .ot-related { grid-template-columns: minmax(0, 1fr); }
  .ot-sec--related { padding: 56px 0; }
}

/* measured fixes: voice cards 617px (link 24px under the text, 45px from the bottom); related text block 115px tall
   so the buttons line up like Cadence's; 112px below the buttons */
.ot-voice__text { margin-bottom: 24px; }
.ot-voice__cta { padding-top: 0; }
.ot .ot-rel p { min-height: 115px; }
.ot-sec--related { padding-bottom: 96px; }
@media (max-width: 760px) { .ot .ot-rel p { min-height: 0; } }

/* ---------- hero background: outlined gradient cubes + confetti, sitting behind the hexagons ---------- */
.ot-hero__deco { position: absolute; z-index: -1; left: -300px; top: 0; width: 1150px; height: 800px; max-width: none; pointer-events: none; }
.ot-hero__hexes { z-index: 1; }
.ot-hero__hexes .ot-hex { z-index: 1; }

/* ---------- voices hover, as on cadence.com: 8px bar drops in at the top, image darkens with a white play icon,
   title and link turn blue, arrow moves 8px ---------- */
.ot-voice { position: relative; }
.ot-voice::before { content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 8px; background: var(--grad);
  transform: scaleY(0); transform-origin: 100% 0; transition: transform .3s cubic-bezier(.19, 1, .22, 1); }
.ot-voice:hover::before, .ot-voice:focus-visible::before { transform: scaleY(1); }
.ot-voice__media::after { content: ""; position: absolute; left: 50%; top: 50%; width: 45px; height: 45px; transform: translate(-50%, -50%); opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E") center/45px no-repeat;
  transition: opacity .25s; }
.ot-voice:hover .ot-voice__media::after { opacity: 1; }
.ot-voice:hover .ot-voice__cta svg { transform: translateX(8px); }

/* ---------- inclusion groups: the 96% line sits one line lower (Cadence's leading blank line), mosaic marks ---------- */
.ot .ot-sec--groups p.ot-strong { margin-top: 45px; }   /* 45px after the paragraph, as on Cadence */
img.ot-group__icon { display: block; width: 100px; height: 100px; }

/* ---------- related content icons: 50px line drawings ---------- */
.ot-rel__icon { width: 50px; height: 50px; fill: none; stroke: var(--nav-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 760px) {
  .ot-hero__deco { display: none; }
}