/*
 * UNIFY Network, supplementary styles.
 *
 * theme.json emits every token as a CSS custom property, for example
 * var(--wp--preset--color--primary). Use those here, never raw hex values.
 *
 * Only add rules that genuinely cannot be expressed in theme.json.
 */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Scroll reveal.
   The hiding is gated behind .pits-js, which theme.js adds to <html> as soon as
   it runs. Without JavaScript, or if the script fails or is blocked, nothing is
   ever hidden and the page renders normally. Content must never depend on
   JavaScript to be visible. */
.pits-js .pits-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pits-js .pits-reveal.is-visible { opacity: 1; transform: none; }

.pits-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Geometric accent, shapes injected as inline SVG by assets/js/theme.js. */
.pits-accent { position: absolute; pointer-events: none; z-index: 0; height: auto; }
.pits-js .pits-accent__cell {
  opacity: 0;
  transform: scale(0.4);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.pits-js .pits-accent.is-visible .pits-accent__cell { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ *
 * UNIFY specific
 * ------------------------------------------------------------------ */

/* Sections need to contain the triangle clusters that bleed off their edges. */
.unify-section { position: relative; overflow: hidden; }

/* Diagonal section edges, the angular equivalent of a divider. */
.unify-cut-top    { clip-path: polygon(0 0, 100% 4.5vw, 100% 100%, 0 100%); }
.unify-cut-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4.5vw), 0 100%); }
.unify-cut-both   { clip-path: polygon(0 4.5vw, 100% 0, 100% calc(100% - 4.5vw), 0 100%); }

/* Strapline chips: Career | Culture | Network | Mentor */
.unify-strap {
  display: flex; gap: 1.15rem 1.5rem; flex-wrap: wrap; align-items: center;
  margin-top: var(--wp--preset--spacing--40);
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid var(--wp--preset--color--line);
  max-width: 30rem;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  list-style: none; margin: 0; padding: 0;
}
.unify-strap li { display: inline-flex; align-items: center; gap: 0.55rem; }
.unify-strap li::before {
  content: ""; width: 0; height: 0; flex: 0 0 auto;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 9px solid currentColor;
}
.unify-strap li:nth-child(1)::before { color: var(--wp--preset--color--primary); }
.unify-strap li:nth-child(2)::before { color: var(--wp--preset--color--accent-2); }
.unify-strap li:nth-child(3)::before { color: var(--wp--preset--color--accent-1); }
.unify-strap li:nth-child(4)::before { color: var(--wp--preset--color--accent-3); }

/* Eyebrow label, per the brand guide's small bold uppercase treatment. */
.unify-eyebrow {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--wp--preset--color--primary);
  margin: 0 0 var(--wp--preset--spacing--20);
}
.has-contrast-background-color .unify-eyebrow { color: var(--wp--preset--color--accent-1); }

/* Section headings, bold uppercase navy, matching the brand guide's own headings. */
.unify-shead {
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
}

/* Angular image frame, one corner cut, echoing the logo mark. */
.unify-frame { overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%); }
.unify-frame img { width: 100%; height: auto; display: block; }

/* Logo minimum size, per the brand guide: 150px wide on web. */
.wp-block-site-logo img { min-width: 172px; }
.wp-block-site-logo.is-default-size img { width: 172px; }

/* Hero triangle cluster.
   There is not enough side margin to hold a large cluster beside 1200px of
   content until the viewport is very wide, so it lives in the section's top
   padding instead: bleeding off the top left corner, finishing above the first
   line of text rather than beside it. The hero carries extra top padding to
   make room. Narrow screens move it to the top right, clear of the headline. */
.unify-accent--hero {
  width: min(230px, 19vw);
  left: max(0px, calc(50% - (var(--wp--style--global--wide-size, 1200px) / 2) - 130px));
  top: 0;
  transform: translateY(-56%);
}
@media (max-width: 1100px) {
  .unify-accent--hero {
    left: auto;
    right: 0;
    width: min(130px, 26vw);
    transform: translate(42%, -30%);
  }
}
@media (max-width: 600px) {
  .unify-accent--hero { width: min(104px, 28vw); transform: translate(44%, -26%); }
}

/* The hero needs headroom for the cluster above its first line. */
.unify-hero { padding-top: var(--wp--preset--spacing--60) !important; }

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */

.unify-header { position: sticky; top: 0; z-index: 60; }

/* Brand guide: the logo is never smaller than 150px wide on the web. */
.unify-header .wp-block-site-logo img { min-width: 172px; height: auto; }

.unify-nav a {
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.unify-nav a:hover,
.unify-nav .current-menu-item > a {
  border-bottom-color: var(--wp--preset--color--primary);
}
.unify-nav .wp-block-navigation__responsive-container-open,
.unify-nav .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--contrast); }
.unify-nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  padding-top: var(--wp--preset--spacing--50);
}
.unify-nav .wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--base); }

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */

.unify-footer__head {
  font-weight: 700 !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-1);
  margin-bottom: var(--wp--preset--spacing--20) !important;
}
.unify-footer__list { list-style: none; padding: 0; margin: 0; line-height: 2.05; }
.unify-footer__list a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.unify-footer__list a:hover { color: #fff; text-decoration: underline; }

/* Whiteout logo, shipped with the theme rather than uploaded, so the footer is
   deterministic on any install. The official artwork is used unmodified: no
   filters, no recolouring, per the brand guide's restrictions. The path is
   relative to this stylesheet at assets/css/. */
.unify-footer__logo {
  width: 190px;
  max-width: 100%;
  aspect-ratio: 2614 / 910;
  margin-bottom: var(--wp--preset--spacing--20);
  background: url("../images/unify-logo-white.png") no-repeat left center;
  background-size: contain;
}

.unify-footer__rule { border-color: rgba(255, 255, 255, 0.18); opacity: 1; }
.unify-footer__legal { color: rgba(255, 255, 255, 0.55); }
.unify-footer__legal p { margin: 0; }
.unify-footer__legal a { color: inherit; text-decoration: none; }
.unify-footer__legal a:hover { color: #fff; }

/* Footer accent cluster, bleeding off the top right corner. */
.unify-accent--footer {
  width: min(240px, 20vw);
  right: max(0px, calc(50% - (var(--wp--style--global--wide-size, 1200px) / 2) - 150px));
  top: 0;
  transform: translateY(-38%);
  opacity: 0.55;
}
@media (max-width: 900px) { .unify-accent--footer { display: none; } }

/* ================================================================== *
 * Homepage sections
 * ================================================================== */

/* ---- Statistics band --------------------------------------------- */

.unify-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3.4vw, 44px); }
@media (max-width: 900px) { .unify-stats { grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 5vw, 40px); } }
@media (max-width: 460px) { .unify-stats { grid-template-columns: 1fr; } }

.unify-stat__marker {
  width: 0; height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 24px solid var(--wp--preset--color--accent-1);
  margin-bottom: var(--wp--preset--spacing--20);
  transition: transform 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.unify-stat:nth-child(2) .unify-stat__marker { border-bottom-color: var(--wp--preset--color--accent-2); }
.unify-stat:nth-child(3) .unify-stat__marker { border-bottom-color: var(--wp--preset--color--primary); }
.unify-stat:nth-child(4) .unify-stat__marker { border-bottom-color: var(--wp--preset--color--accent-3); }
.unify-stat:hover .unify-stat__marker { transform: translateY(-6px) scale(1.15); }

.unify-stat__figure {
  display: block;
  font-size: var(--wp--preset--font-size--xxxl);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.045em;
  margin-bottom: var(--wp--preset--spacing--10);
  color: var(--wp--preset--color--accent-1);
}
.unify-stat:nth-child(2) .unify-stat__figure { color: var(--wp--preset--color--accent-2); }
.unify-stat:nth-child(3) .unify-stat__figure { color: var(--wp--preset--color--primary); }
.unify-stat:nth-child(4) .unify-stat__figure { color: var(--wp--preset--color--accent-3); }

.unify-stat__label { font-size: var(--wp--preset--font-size--sm); margin: 0; max-width: 22ch; line-height: 1.5; }

/* ---- Programme rows ---------------------------------------------- */

.unify-prog { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 5vw, 76px); align-items: center; }
.unify-prog + .unify-prog { margin-top: clamp(48px, 7vw, 104px); }
@media (max-width: 880px) { .unify-prog { grid-template-columns: 1fr; gap: 24px; } .unify-prog + .unify-prog { margin-top: 56px; } }

.unify-prog--flip .unify-prog__media { order: 2; }
@media (max-width: 880px) { .unify-prog--flip .unify-prog__media { order: 0; } }

.unify-prog__media { position: relative; }
.unify-prog__frame {
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 82% 100%, 0 100%);
  position: relative; z-index: 2;
}
.unify-prog--flip .unify-prog__frame { clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%, 0 82%); }
.unify-prog__frame img { width: 100%; height: auto; display: block; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.unify-prog__media:hover .unify-prog__frame img { transform: scale(1.06); }

.unify-prog__tab {
  position: absolute; z-index: 3; top: 0; left: 0;
  width: 0; height: 0;
  border-top: 66px solid var(--wp--preset--color--accent-1);
  border-right: 66px solid transparent;
}
.unify-prog:nth-of-type(2) .unify-prog__tab { border-top-color: var(--wp--preset--color--accent-2); }
.unify-prog:nth-of-type(3) .unify-prog__tab { border-top-color: var(--wp--preset--color--primary); }
.unify-prog__no { position: absolute; z-index: 4; top: 7px; left: 9px; font-size: 0.9rem; font-weight: 700; color: #fff; }

.unify-prog__tag {
  font-size: var(--wp--preset--font-size--xs); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--wp--preset--color--primary);
  display: block; margin-bottom: var(--wp--preset--spacing--20);
}
.unify-link { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 500; text-decoration: none; }
.unify-link::after {
  content: ""; width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 10px solid currentColor;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.unify-link:hover::after { transform: translateX(7px); }
.unify-link:hover { text-decoration: underline; }

/* ---- Challenge --------------------------------------------------- */

.unify-challenge { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 74px); align-items: center; }
@media (max-width: 880px) { .unify-challenge { grid-template-columns: 1fr; } }
.unify-arc { width: 100%; max-width: 440px; height: auto; }
.pits-js .unify-arc__line {
  fill: none; stroke: var(--wp--preset--color--primary);
  stroke-width: 3.6; stroke-linecap: square;
  stroke-dasharray: 700; stroke-dashoffset: 700;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.35, 0.65, 0.2, 1) 0.2s;
}
.pits-js .unify-arc.is-visible .unify-arc__line { stroke-dashoffset: 0; }
.pits-js .unify-arc__head { fill: var(--wp--preset--color--primary); opacity: 0; transition: opacity 0.45s ease 1.6s; }
.pits-js .unify-arc.is-visible .unify-arc__head { opacity: 1; }

/* ---- Timeline ---------------------------------------------------- */

.unify-tl { margin-top: var(--wp--preset--spacing--40); }
.unify-tl__zig { width: 100%; height: clamp(80px, 11vw, 140px); display: block; }
.pits-js .unify-tl__zig .p {
  fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 2.6;
  stroke-dasharray: 2200; stroke-dashoffset: 2200;
  transition: stroke-dashoffset 2.1s cubic-bezier(0.25, 0.7, 0.2, 1) 0.15s;
}
.pits-js .unify-tl.is-visible .unify-tl__zig .p { stroke-dashoffset: 0; }
.pits-js .unify-tl__zig polygon { opacity: 0; transition: opacity 0.45s ease 1.35s; }
.pits-js .unify-tl.is-visible .unify-tl__zig polygon { opacity: 1; }
@media (max-width: 820px) { .unify-tl__zig { display: none; } }

.unify-tl__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.6vw, 34px); }
@media (max-width: 820px) { .unify-tl__grid { grid-template-columns: repeat(2, 1fr); row-gap: 30px; } }
@media (max-width: 460px) { .unify-tl__grid { grid-template-columns: 1fr; } }
.unify-tl__year { display: block; font-size: var(--wp--preset--font-size--xl); font-weight: 300; letter-spacing: -0.03em; margin-bottom: 0.25rem; }
.unify-tl__grid > div:nth-child(1) .unify-tl__year { color: var(--wp--preset--color--accent-1); }
.unify-tl__grid > div:nth-child(2) .unify-tl__year { color: var(--wp--preset--color--accent-2); }
.unify-tl__grid > div:nth-child(3) .unify-tl__year { color: var(--wp--preset--color--primary); }
.unify-tl__grid > div:nth-child(4) .unify-tl__year { color: var(--wp--preset--color--accent-3); }
.unify-tl__grid p { font-size: var(--wp--preset--font-size--sm); margin: 0; max-width: 27ch; color: rgba(255,255,255,0.72); }

/* ---- Partner marquee --------------------------------------------- */

.unify-marquee {
  overflow: hidden; padding: var(--wp--preset--spacing--30) 0;
  border-block: 1px solid rgba(255, 255, 255, 0.15);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.unify-marquee__track { display: flex; gap: 2.4rem; width: max-content; align-items: center; animation: unify-marquee 48s linear infinite; }
.unify-marquee:hover .unify-marquee__track,
.unify-marquee:focus-within .unify-marquee__track { animation-play-state: paused; }
@keyframes unify-marquee { to { transform: translateX(-50%); } }
.unify-marquee span { font-size: var(--wp--preset--font-size--lg); font-weight: 300; color: rgba(255, 255, 255, 0.66); white-space: nowrap; }
.unify-marquee i {
  width: 0; height: 0; flex: 0 0 auto;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 12px solid var(--wp--preset--color--primary);
}

/* ---- Forced colours ---------------------------------------------- *
 * Windows High Contrast Mode drops background colours and SVG fills, so
 * decorative shapes disappear. Hide them rather than leave empty gaps, and
 * make sure structural edges survive.                                 */

@media (forced-colors: active) {
  .pits-accent,
  .unify-tl__zig,
  .unify-marquee i { display: none; }

  .unify-stat__marker,
  .unify-prog__tab { forced-color-adjust: none; }

  .unify-footer__logo {
    background: none;
    forced-color-adjust: none;
  }
  .unify-footer__logo::after {
    content: "UNIFY Network";
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .unify-cut-top, .unify-cut-bottom, .unify-cut-both { clip-path: none; }
  .unify-footer, .unify-header { border: 1px solid; }
  .wp-element-button { border: 2px solid; }
}

/* ---- Newsletter sign-up ------------------------------------------ */

.unify-signup { margin-top: var(--wp--preset--spacing--30); max-width: 620px; }
.unify-signup__label {
  display: block;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-bottom: var(--wp--preset--spacing--10);
}
.unify-signup__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.unify-signup__input {
  flex: 1 1 260px;
  font-family: inherit; font-size: var(--wp--preset--font-size--md);
  padding: 0.92em 1.2em;
  border: 2px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}
.unify-signup__input:focus-visible { outline: 3px solid var(--wp--preset--color--primary); outline-offset: 2px; border-color: var(--wp--preset--color--contrast); }
.unify-signup__note { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); margin-top: var(--wp--preset--spacing--20); }

/* A focus indicator that survives on both the white and navy grounds. */
:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}
.has-contrast-background-color :where(a, button, input, summary):focus-visible {
  outline-color: var(--wp--preset--color--accent-3);
}

/* ================================================================== *
 * Background texture
 *
 * The brand guide frames its own pages with grouped triangles bleeding off
 * the corners. Reused here at large scale and low opacity so sections read
 * as textured rather than as flat slabs. Decorative only: hidden from
 * assistive technology, dropped on small screens and in forced colours.
 * ================================================================== */

.unify-accent--wm {
  width: min(560px, 42vw);
  opacity: 0.085;
}
.unify-accent--wm.is-visible { opacity: 0.085; }
.unify-accent--wm-on-dark,
.unify-accent--wm-on-dark.is-visible { opacity: 0.16; }

.unify-accent--wm-tr { right: 0; top: 0;    transform: translate(32%, -24%); }
.unify-accent--wm-bl { left: 0;  bottom: 0; transform: translate(-32%, 26%); }
.unify-accent--wm-br { right: 0; bottom: 0; transform: translate(30%, 26%); }
.unify-accent--wm-tl { left: 0;  top: 0;    transform: translate(-30%, -24%); }

@media (max-width: 780px) { .unify-accent--wm { display: none; } }
@media (forced-colors: active) { .unify-accent--wm { display: none; } }

/* ---- Statistics and partners, one continuous navy region ---------- */

.unify-statband__rule {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin: var(--wp--preset--spacing--40) 0 0;
}
.unify-statband .unify-marquee {
  border: 0;
  padding-bottom: 0;
  margin-top: var(--wp--preset--spacing--20);
}

/* ================================================================== *
 * Interior page hero
 * ================================================================== */

.unify-phero__title { max-width: 18ch; }

/* A full strength cluster in the empty right hand column, rather than a
   watermark. At low opacity in an empty area a watermark reads as a printing
   fault rather than as a deliberate mark. */
.unify-accent--phero {
  width: min(300px, 23vw);
  right: max(0px, calc(50% - (var(--wp--style--global--wide-size, 1200px) / 2) - 60px));
  top: 50%;
  transform: translateY(-46%);
}
@media (max-width: 900px) {
  .unify-accent--phero { width: min(150px, 30vw); top: 0; transform: translate(34%, -22%); }
}
.unify-phero__lede  { max-width: 56ch; margin-top: var(--wp--preset--spacing--20); }
/* The title and lede are narrower than the content column, and a constrained
   layout centres anything narrower, so on a wide screen they drifted right of
   the eyebrow in a stagger. Pin them to the column's left edge instead. */
.unify-phero :is(.unify-phero__title, .unify-phero__lede) {
  margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
}

/* ================================================================== *
 * Founding story
 * ================================================================== */

.unify-story .unify-shead { position: sticky; top: var(--wp--preset--spacing--40); }
@media (max-width: 781px) { .unify-story .unify-shead { position: static; } }

.unify-quote {
  margin: var(--wp--preset--spacing--40) 0;
  padding-left: var(--wp--preset--spacing--30);
  border-left: 3px solid var(--wp--preset--color--primary);
}
.unify-quote p {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 300; line-height: 1.28; letter-spacing: -0.02em;
  margin: 0 0 var(--wp--preset--spacing--10);
}
.unify-quote cite {
  font-style: normal; font-size: var(--wp--preset--font-size--xs);
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

/* ================================================================== *
 * Core aims
 * ================================================================== */

.unify-aims {
  display: grid; gap: var(--wp--preset--spacing--40);
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--wp--preset--spacing--40);
}
@media (max-width: 900px) { .unify-aims { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); } }

.unify-aims-band { background: var(--wp--preset--color--base); }
.unify-aim { padding-top: var(--wp--preset--spacing--20); border-top: 2px solid var(--wp--preset--color--line); }
.unify-aim__no {
  display: block; font-size: var(--wp--preset--font-size--xs); font-weight: 700;
  letter-spacing: 0.2em; color: var(--wp--preset--color--primary-deep);
  margin-bottom: var(--wp--preset--spacing--20);
}
.unify-aim__head {
  font-size: var(--wp--preset--font-size--xl); font-weight: 300;
  line-height: 1.1; margin: 0 0 0.75rem; color: var(--wp--preset--color--contrast);
}
.unify-aim p { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); margin: 0; }

.unify-aim:nth-child(2) .unify-aim__no { color: var(--wp--preset--color--accent-4); }
.unify-aim:nth-child(3) .unify-aim__no { color: var(--wp--preset--color--contrast); }

.unify-aims__note {
  margin-top: var(--wp--preset--spacing--40);
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid var(--wp--preset--color--line);
  max-width: 62ch; color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--sm);
}

/* ================================================================== *
 * Team grid
 *
 * Photographs are not available yet, so each person gets a coloured
 * initials tile. The tile and the photograph occupy the same square, so
 * swapping one for the other does not move the layout.
 * ================================================================== */

.unify-team__intro { max-width: 60ch; }

.unify-team {
  list-style: none; margin: var(--wp--preset--spacing--40) 0 0; padding: 0;
  display: grid; gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1000px) { .unify-team { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .unify-team { grid-template-columns: repeat(2, 1fr); gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20); } }

.unify-person { display: flex; flex-direction: column; }

.unify-person__pic,
.unify-person__tile {
  aspect-ratio: 1 / 1; width: 100%; display: block;
  object-fit: cover; margin-bottom: var(--wp--preset--spacing--20);
}

.unify-person__tile {
  display: grid; place-items: center;
  font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 300; letter-spacing: 0.02em;
  background: var(--wp--preset--color--contrast);
}
/* Five steps, not four, so the colour does not line up with the grid columns
   and read as a code that means something. Text colour is chosen per tile:
   white on the dark grounds, navy on teal and orange, which are too light to
   carry white legibly. */
.unify-person__tile--0 { background: var(--wp--preset--color--contrast);     color: #fff; }
.unify-person__tile--1 { background: var(--wp--preset--color--accent-1);     color: var(--wp--preset--color--contrast); }
.unify-person__tile--2 { background: var(--wp--preset--color--accent-4);     color: #fff; }
.unify-person__tile--3 { background: var(--wp--preset--color--accent-2);     color: var(--wp--preset--color--contrast); }
.unify-person__tile--4 { background: var(--wp--preset--color--primary-deep); color: #fff; }

.unify-person__name {
  font-size: var(--wp--preset--font-size--md); font-weight: 500; line-height: 1.25;
}
.unify-person__role {
  font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted);
  margin-top: 0.15rem;
}

/* The three co-chairs carry a marker so the structure reads at a glance. */
.unify-person--lead .unify-person__name { position: relative; padding-left: 1rem; }
.unify-person--lead .unify-person__name::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 8px solid var(--wp--preset--color--primary);
}

@media (forced-colors: active) {
  .unify-person__tile { border: 1px solid; }
  .unify-aim { border-top: 2px solid; }
}

/* The member list needs a label, otherwise the scrolling names are left to
   guesswork. Violet asked for this on 2 September 2026. */
.unify-statband__memlabel {
  color: var(--wp--preset--color--accent-1);
  margin: var(--wp--preset--spacing--30) 0 0;
}

/* A constrained group sizes plain children to contentSize, which would squeeze
   the scrolling list into the middle of the band. It is a full width element,
   so say so explicitly rather than relying on the layout. */
.unify-statband .unify-marquee {
  max-width: none !important;
  width: 100%;
  border-top: 0;
  padding-top: 0.55rem;
  margin-inline: 0;
}


/* Partner logos sit below the members, on white tiles. The logos arrive in
   their own colours, several of them dark, so a tile keeps every one legible
   on the navy without recolouring anything, which the brand rules forbid. */
.unify-partners {
  margin-top: var(--wp--preset--spacing--30);
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.unify-partners__label {
  color: var(--wp--preset--color--accent-1);
  margin: 0 0 var(--wp--preset--spacing--20);
}
.unify-partners__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1rem;
}
.unify-partners__tile {
  display: flex; align-items: center; justify-content: center;
  height: 5rem; min-width: 10rem; padding: 0.9rem 1.5rem;
  background: var(--wp--preset--color--base);
  border-radius: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.unify-partners__item a.unify-partners__tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px var(--wp--preset--color--accent-1);
}
.unify-partners__item img { display: block; max-height: 100%; width: auto; max-width: 11rem; }

/* On a phone the tiles share one row rather than stacking into a tall column. */
@media (max-width: 600px) {
  .unify-partners__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: 0.6rem; }
  .unify-partners__tile { min-width: 0; height: 3.75rem; padding: 0.6rem 0.75rem; }
  .unify-partners__item img { max-width: 100%; }
}

/* ================================================================== *
 * Photo strip: three photographs on the interior pages
 * ================================================================== */

.unify-photos {
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr;
  gap: var(--wp--preset--spacing--20);
  height: clamp(20rem, 38vw, 30rem);
  margin-left: auto; margin-right: auto;
}
.unify-photos__item { margin: 0; overflow: hidden; min-height: 0; }
.unify-photos__item:first-child { grid-row: 1 / span 2; clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 86%); }
.unify-photos__item:last-child { clip-path: polygon(0 0, 100% 0, 100% 72%, 84% 100%, 0 100%); }
.unify-photos--flip { grid-template-columns: 1fr 2fr; }
.unify-photos--flip .unify-photos__item:first-child { grid-column: 2; clip-path: polygon(0 0, 100% 0, 100% 86%, 88% 100%, 0 100%); }
.unify-photos--flip .unify-photos__item:not(:first-child) { grid-column: 1; }
.unify-photos--flip .unify-photos__item:nth-child(2) { grid-row: 1; }
.unify-photos--flip .unify-photos__item:last-child { grid-row: 2; clip-path: polygon(0 0, 100% 0, 100% 100%, 16% 100%, 0 72%); }
.unify-photos__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.unify-photos__item:hover img { transform: scale(1.04); }

/* On a phone: the large photograph full width, the other two side by side. */
@media (max-width: 600px) {
  .unify-photos, .unify-photos--flip {
    grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto;
  }
  .unify-photos__item, .unify-photos--flip .unify-photos__item:not(:first-child) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
  .unify-photos__item:first-child, .unify-photos--flip .unify-photos__item:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) {
  .unify-photos__item img { transition: none; }
  .unify-photos__item:hover img { transform: none; }
}

/* ================================================================== *
 * Membership: the cap, stated as a figure
 * ================================================================== */

.unify-cap {
  display: flex; align-items: baseline; gap: var(--wp--preset--spacing--30);
  margin: var(--wp--preset--spacing--40) 0 0;
  padding-top: var(--wp--preset--spacing--30);
  border-top: 2px solid var(--wp--preset--color--line);
  max-width: 62ch;
}
.unify-cap__fig {
  font-size: var(--wp--preset--font-size--xxl); font-weight: 300; line-height: 1;
  color: var(--wp--preset--color--primary); flex: 0 0 auto; letter-spacing: -0.03em;
}
.unify-cap__txt { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); }
@media (max-width: 600px) { .unify-cap { flex-direction: column; gap: var(--wp--preset--spacing--10); } }

/* ---- The five benefits ------------------------------------------- */

.unify-benefits {
  list-style: none; margin: var(--wp--preset--spacing--40) 0 0; padding: 0;
  display: grid; gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) { .unify-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .unify-benefits { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); } }

.unify-benefit { padding-top: var(--wp--preset--spacing--20); border-top: 2px solid var(--wp--preset--color--line); }
.unify-benefit__tag {
  display: block; font-size: var(--wp--preset--font-size--xs); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: var(--wp--preset--spacing--20);
}
.unify-benefit:nth-child(5n+1) .unify-benefit__tag { color: var(--wp--preset--color--primary-deep); }
.unify-benefit:nth-child(5n+2) .unify-benefit__tag { color: var(--wp--preset--color--accent-4); }
.unify-benefit:nth-child(5n+3) .unify-benefit__tag { color: var(--wp--preset--color--contrast); }
.unify-benefit:nth-child(5n+4) .unify-benefit__tag { color: var(--wp--preset--color--accent-2); }
.unify-benefit:nth-child(5n+5) .unify-benefit__tag { color: var(--wp--preset--color--accent-1); }

.unify-benefit__head {
  font-size: var(--wp--preset--font-size--xl); font-weight: 300; line-height: 1.1;
  margin: 0 0 0.7rem;
}
.unify-benefit p { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); margin: 0; }

/* ================================================================== *
 * Membership journey, the vertical timeline
 *
 * Replaces the horizontal scrolling section on the current site. Vertical
 * because the history keeps growing, and a horizontal scroller gets worse
 * with every entry added while a vertical list simply gets longer.
 * ================================================================== */

.unify-journey {
  list-style: none; margin: var(--wp--preset--spacing--40) 0 0; padding: 0;
  position: relative;
}

/* The spine. Decorative, so it is hidden from assistive technology and
   dropped in forced colours, where a border would fight the user's palette. */
.unify-journey::before {
  content: ""; position: absolute; left: 0; top: 0.7em; bottom: 0.7em;
  width: 2px; background: rgba(255, 255, 255, 0.18);
}

.unify-journey__item {
  position: relative; padding-left: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40);
}
.unify-journey__item:last-child { padding-bottom: 0; }

/* A triangle on the spine, from the logo mark, rather than a dot. */
.unify-journey__item::before {
  content: ""; position: absolute; left: -6px; top: 0.55em;
  width: 0; height: 0;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 12px solid var(--wp--preset--color--primary);
}
.unify-journey__item:nth-child(4n+2)::before { border-left-color: var(--wp--preset--color--accent-1); }
.unify-journey__item:nth-child(4n+3)::before { border-left-color: var(--wp--preset--color--accent-2); }
.unify-journey__item:nth-child(4n+4)::before { border-left-color: var(--wp--preset--color--accent-3); }

.unify-journey__year {
  display: block; font-size: var(--wp--preset--font-size--xl);
  font-weight: 300; line-height: 1; letter-spacing: -0.02em;
  color: #fff; margin-bottom: 0.4rem;
}
.unify-journey__head {
  font-size: var(--wp--preset--font-size--lg); font-weight: 500; line-height: 1.25;
  color: #fff; margin: 0 0 0.4rem;
}
.unify-journey__body p {
  margin: 0; max-width: 58ch;
  font-size: var(--wp--preset--font-size--sm); color: rgba(255, 255, 255, 0.74);
}

.unify-journey__orgs {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: var(--wp--preset--spacing--20) 0 0; padding: 0;
}
.unify-journey__orgs li {
  font-size: var(--wp--preset--font-size--xs); font-weight: 500;
  padding: 0.32rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.86);
}

/* Two columns once there is room, so a long history does not become a
   single very tall stripe. */
@media (min-width: 1000px) {
  .unify-journey__item { padding-left: var(--wp--preset--spacing--50); }
  .unify-journey__year {
    position: absolute; left: var(--wp--preset--spacing--40); top: 0;
    font-size: var(--wp--preset--font-size--xxl); color: var(--wp--preset--color--accent-3);
  }
  .unify-journey__body { margin-left: 7.5rem; }
}

@media (forced-colors: active) {
  .unify-journey::before { display: none; }
  .unify-benefit { border-top: 2px solid; }
}

/* ================================================================== *
 * Contact page
 * ================================================================== */

/* Form and the other ways in, side by side once there is room. */
.unify-contact {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .unify-contact { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.unify-contact__aside {
  border-top: 4px solid var(--wp--preset--color--accent-1);
  padding-top: var(--wp--preset--spacing--30);
}
.unify-contact__h { margin-top: var(--wp--preset--spacing--30); margin-bottom: 0.25em; }
.unify-contact__h:first-child { margin-top: 0; }
.unify-contact__social { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }

/* Contact Form 7 markup, styled to match the newsletter sign-up. */
.unify-cf__row { display: grid; gap: 0 var(--wp--preset--spacing--30); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .unify-cf__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.unify-cf__field { margin: 0 0 var(--wp--preset--spacing--30); }
.unify-cf__field label {
  display: block;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-bottom: var(--wp--preset--spacing--10);
}
.unify-cf__req { color: var(--wp--preset--color--primary-deep); }
.unify-cf :is(input[type="text"], input[type="email"], select, textarea) {
  box-sizing: border-box; width: 100%;
  font-family: inherit; font-size: var(--wp--preset--font-size--md);
  padding: 0.92em 1.2em;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 0;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}
.unify-cf textarea { min-height: 10em; resize: vertical; }
.unify-cf :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--wp--preset--color--primary); outline-offset: 2px;
  border-color: var(--wp--preset--color--contrast);
}
.unify-cf [aria-invalid="true"] { border-color: var(--wp--preset--color--primary-deep); }
.unify-cf .wpcf7-not-valid-tip { color: var(--wp--preset--color--primary-deep); font-size: var(--wp--preset--font-size--sm); margin-top: 0.3em; }
.unify-cf__note { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }
.unify-cf__submit { margin-top: var(--wp--preset--spacing--20); display: flex; align-items: center; gap: 1rem; }
.unify-cf .wpcf7-spinner { margin: 0; }

/* The honeypot. Off screen rather than display:none, which some bots skip. */
.unify-cf__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The message after sending, in the brand's own terms rather than the plugin's. */
.wpcf7 form .wpcf7-response-output {
  margin: var(--wp--preset--spacing--20) 0 0;
  padding: 1em 1.2em;
  border: 0; border-left: 4px solid var(--wp--preset--color--accent-1);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--contrast);
}
.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output {
  border-left-color: var(--wp--preset--color--primary-deep);
}

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; width: 1px; word-wrap: normal !important;
}