/* IOP — styles the Elementor builder cannot express.
   Everything else lives in Elementor global classes and variables.
   Scoped to .iop-* class names so nothing here can leak into the theme. */

:root {
  --iop-black: #0a0a0a;
  --iop-charcoal: #121212;
  --iop-graphite: #1b1b1b;
  --iop-white: #f5f4f0;
  --iop-mist: #bdbbb5;
  --iop-stone: #8f8d88;
  --iop-accent: #ff4f00;
  --iop-line: rgba(245, 244, 240, 0.14);
  --iop-line-strong: rgba(245, 244, 240, 0.34);
  --iop-panel-dim: rgba(10, 10, 10, 0.62);
  --iop-panel-hover: rgba(10, 10, 10, 0.42);
  /* The design carries four scrim colours (top .6, soft .25, mid .04,
     bottom .92) but not their positions. These stops put the dark where the
     brand content actually sits — the logo occupies 43%–65% of the panel —
     so light artwork reads over a bright photograph. */
  --iop-scrim: linear-gradient(180deg, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.25) 18%, rgba(10,10,10,0.35) 38%, rgba(10,10,10,0.78) 62%, rgba(10,10,10,0.92) 100%);
  --iop-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --iop-dur-fast: 400ms;
  --iop-dur-medium: 900ms;
  --iop-autoplay: 7000ms;
  --iop-track-h: 680px;
  --iop-panel-collapsed: 100px;
  --iop-panel-pad: 48px;
}

/* Elementor inlines SVGs with fill="currentColor" on the root element, which
   would flood every stroked icon. Shapes that declare their own fill win. */
.iop-pillar-icon svg [fill="none"],
.iop-icon-inline svg [fill="none"] { fill: none; }

/* ---------- brand slider ------------------------------------------------ */
.iop-brand-track {
  display: flex;
  gap: 8px;
  height: var(--iop-track-h);
  flex-shrink: 0;
  width: 100%;
}

.iop-brand-panel {
  position: relative;
  flex: 0 1 var(--iop-panel-collapsed);
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--iop-graphite);
  cursor: pointer;
}
/* The transition is added only once the slider has initialised. A browser
   will not run a transition on content that is still off-screen, so the
   opening panel would stay collapsed until the page was scrolled to it —
   six equal strips, which reads as the old version. Applying the first
   state without a transition makes it correct from the start. */
.iop-brands.is-ready .iop-brand-panel {
  transition: flex-grow var(--iop-dur-medium) var(--iop-ease);
}
.iop-brand-panel.is-active { flex-grow: 1; cursor: default; }

.iop-brand-panel > .iop-cover-image,
.iop-brand-panel > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.iop-brand-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background-color: var(--iop-panel-dim);
  background-image: var(--iop-scrim);
  transition: background-color var(--iop-dur-medium) var(--iop-ease);
}
.iop-brand-panel.is-active > .iop-brand-shade { background-color: transparent; }
.iop-brand-panel:not(.is-active):hover > .iop-brand-shade { background-color: var(--iop-panel-hover); }

/* collapsed strip */
.iop-brand-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 0;
}
.iop-brand-panel.is-active > .iop-brand-shade > .iop-brand-tab { display: none; }

.iop-brand-tab-name {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  transition: color var(--iop-dur-fast) var(--iop-ease);
}
.iop-brand-panel:hover .iop-brand-tab-name { color: var(--iop-accent); }

/* opened panel */
.iop-brand-content {
  display: none;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 24px;
  padding: var(--iop-panel-pad);
  min-height: 0;
}
.iop-brand-panel.is-active > .iop-brand-shade > .iop-brand-content {
  display: flex;
  animation: iop-rise var(--iop-dur-medium) var(--iop-ease) 120ms both;
}
@keyframes iop-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

.iop-brand-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.iop-meta-rule { width: 48px; height: 1px; background: var(--iop-line-strong); flex-shrink: 0; }

/* progress bar */
.iop-slider-progress { display: flex; gap: 8px; width: 100%; }
.iop-progress-seg { flex: 1; display: flex; height: 2px; background: var(--iop-line); }
.iop-progress-fill { flex: 0 0 auto; width: 0; height: 100%; background: var(--iop-accent); }
.iop-progress-seg.is-current .iop-progress-fill {
  animation: iop-fill var(--iop-autoplay) linear both;
}
.iop-brands.is-paused .iop-progress-fill { animation-play-state: paused; }
@keyframes iop-fill { from { width: 0; } to { width: 100%; } }

/* controls */
.iop-slider-controls { display: flex; align-items: center; gap: 16px; }
.iop-slider-count {
  display: flex; gap: 8px; margin-right: 16px;
  font-variant-numeric: tabular-nums;
}
.iop-control-button {
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--iop-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--iop-white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color var(--iop-dur-fast) var(--iop-ease),
              color var(--iop-dur-fast) var(--iop-ease);
}
.iop-control-button:hover { border-color: var(--iop-accent); color: var(--iop-accent); }

@media (max-width: 1024px) {
  .iop-brand-track { height: 600px; }
  :root { --iop-panel-collapsed: 72px; --iop-panel-pad: 32px; }
}

/* the strip cannot hold vertical type at phone width, so the track stacks */
@media (max-width: 767px) {
  .iop-brand-track { flex-direction: column; height: auto; }
  .iop-brand-panel { flex: 0 0 72px; height: 72px; }
  .iop-brand-panel.is-active { flex: 0 0 460px; height: 460px; }
  .iop-brand-tab { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 0 24px; }
  .iop-brand-tab-name { writing-mode: horizontal-tb; transform: none; }
  .iop-slider-controls { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .iop-brand-panel,
  .iop-brand-shade { transition: none; }
  .iop-brand-panel.is-active > .iop-brand-shade > .iop-brand-content { animation: none; }
  .iop-progress-seg.is-current .iop-progress-fill { animation: none; width: 100%; }
}

/* ======================================================================
   HEADER AND FOOTER
   The theme owns these, so they cannot be Elementor global classes.
   Colours and fonts below reference Elementor's own global variables,
   which it emits on :root, so there is still one source of truth for them.
   Sizes are mirrored here because Elementor 4.2.4 registers CSS
   transformers for colour and font variables only — its size variables
   never reach the page. Every value below is the design's own token,
   named after it.
   ====================================================================== */

:root {
  --iop-nav-h: 104px;
  --iop-gutter: 80px;
  --iop-dot: 6px;
  --iop-size-small: 13px;
  --iop-size-micro: 11px;
  --iop-size-eyebrow: 12px;
  --iop-size-footer-link: 22px;
  --iop-tracking-label: 0.18em;
  --iop-tracking-eyebrow: 0.28em;
  --iop-logo-w-footer: 360px;
  --iop-blur-nav: 16px;
  --iop-icon-inline: 16px;
  --iop-blur-in: 14px;
  --iop-lift: 28px;
  --iop-zoom: 1.08;
  --iop-space-4: 4px;
  --iop-space-8: 8px;
  --iop-space-12: 12px;
  --iop-space-24: 24px;
  --iop-space-32: 32px;
  --iop-space-48: 48px;
  --iop-space-64: 64px;
  --iop-space-128: 128px;
}

/* ---------- hero and pillars -------------------------------------------- */
/* Elementor gives every container width:100%. That is right for a column but
   wrong for an item in a centred row: each pillar stretches to a third of the
   row and the three icons end up far apart. Content width restores the
   grouping the design has. Elementor has no 'auto' for a size property, so
   this cannot live in the global class. */
.iop-pillar { width: auto; }

/* The headline arrives rather than appearing: the design's blur-in and lift. */
@keyframes iop-title-in {
  from { opacity: 0; filter: blur(var(--iop-blur-in)); transform: translateY(var(--iop-lift)); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
.iop-hero-title {
  animation: iop-title-in var(--iop-dur-slow, 1200ms) var(--iop-ease) 120ms both;
}

/* The hero image drifts slowly inwards, so the scene is never quite still. */
@keyframes iop-hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(var(--iop-zoom)); }
}
/* The hero media is a self-hosted video element, not an image. */
.iop-hero-media {
  animation: iop-hero-zoom 18s var(--iop-ease) both;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .iop-hero-title,
  .iop-hero-media { animation: none; }
}

/* ---------- header ------------------------------------------------------ */
/* Astra pads its own header container from an id selector
   (#masthead .ast-container), so this has to carry an id too. The design's
   gutter is the only one; it lives on the row below. */
#masthead .site-primary-header-wrap,
#masthead .ast-container.site-primary-header-wrap,
#colophon .ast-builder-grid-row-container-inner {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
/* Below the break point Astra pads the bar itself, from a four-part
   selector, so this one has to be at least as specific. */
.ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar.site-primary-header-wrap {
  padding-left: 0;
  padding-right: 0;
}
.ast-primary-header-bar .ast-builder-grid-row {
  padding-left: var(--iop-gutter);
  padding-right: var(--iop-gutter);
}
#colophon .ast-builder-footer-grid-columns.site-primary-footer-inner-wrap,
#colophon .ast-builder-footer-grid-columns.site-below-footer-inner-wrap {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

.ast-primary-header-bar {
  transition: background-color var(--iop-dur-fast) var(--iop-ease);
}
body.iop-scrolled .ast-primary-header-bar {
  background-color: var(--color-nav-solid, rgba(10, 10, 10, 0.78));
  backdrop-filter: blur(var(--iop-blur-nav));
  -webkit-backdrop-filter: blur(var(--iop-blur-nav));
}

.iop-nav {
  display: flex;
  align-items: center;
  gap: var(--iop-space-32);
}
.iop-nav-link {
  display: flex;
  align-items: center;
  gap: var(--iop-space-8);
  font-family: var(--font-body), sans-serif;
  font-size: var(--iop-size-small);
  font-weight: 500;
  letter-spacing: var(--iop-tracking-label);
  text-transform: uppercase;
  color: var(--color-white, var(--iop-white));
  text-decoration: none;
  transition: color var(--iop-dur-fast) var(--iop-ease);
}
.iop-nav-link:hover,
.iop-nav-link:focus { color: var(--color-accent, var(--iop-accent)); }
.iop-nav-dot {
  width: var(--iop-dot);
  height: var(--iop-dot);
  border-radius: 999px;
  background: var(--color-accent, var(--iop-accent));
  flex: 0 0 var(--iop-dot);
}

/* ---------- footer ------------------------------------------------------ */
/* Astra's own footer background settings carry the black; this only stops
   footer text inheriting the theme's default slate. */
#colophon { color: var(--color-white, var(--iop-white)); }

.site-primary-footer-wrap {
  padding: var(--iop-space-128) var(--iop-gutter);
}
.site-below-footer-wrap {
  padding: 0 var(--iop-gutter) var(--iop-space-48);
}
/* Alignment is Astra's own footer-html-N-alignment setting, not set here. */
.site-footer .ast-header-html,
.site-footer .footer-widget-area,
.site-footer .ast-builder-html-element { width: 100%; }

/* Logo left, the three links as columns along the same row, flush right.
   Label above value, with a small diagonal arrow inline after the text. */
.iop-foot {
  display: flex;
  align-items: flex-end;
  gap: var(--iop-space-64);
  width: 100%;
}
.iop-foot-logo-wrap { flex: 0 0 auto; }
.iop-foot-logo {
  width: var(--iop-logo-w-footer);
  max-width: 100%;
  height: auto;
  display: block;
}
.iop-foot-links {
  display: flex;
  align-items: flex-end;
  gap: var(--iop-space-64);
  margin-left: auto;
}
.iop-foot-col {
  display: flex;
  flex-direction: column;
  gap: var(--iop-space-12);
}

.iop-foot-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--iop-space-8);
  color: var(--color-white, var(--iop-white));
  text-decoration: none;
  transition: color var(--iop-dur-fast) var(--iop-ease);
}
a.iop-foot-link:hover,
a.iop-foot-link:focus { color: var(--color-accent, var(--iop-accent)); }

.iop-row-label {
  font-family: var(--font-body), sans-serif;
  font-size: var(--iop-size-micro);
  font-weight: 500;
  letter-spacing: var(--iop-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-stone, var(--iop-stone));
}
.iop-row-value {
  font-family: var(--font-display), sans-serif;
  font-size: var(--iop-size-footer-link);
  white-space: nowrap;
  color: inherit;
}
.iop-row-arrow {
  flex: 0 0 auto;
  width: var(--iop-icon-inline);
  height: var(--iop-icon-inline);
  color: inherit;
  transition: transform var(--iop-dur-fast) var(--iop-ease);
}
a.iop-foot-link:hover .iop-row-arrow { transform: translate(2px, -2px); }
.iop-foot-link.is-pending .iop-row-arrow { opacity: 0.35; }

.iop-foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iop-space-12);
  width: 100%;
  border-top: 1px solid var(--iop-line);
  padding-top: var(--iop-space-64);
  font-family: var(--font-body), sans-serif;
  font-size: var(--iop-size-micro);
  letter-spacing: var(--iop-tracking-label);
  text-transform: uppercase;
  color: var(--color-stone, var(--iop-stone));
}
.iop-sep { color: var(--color-accent, var(--iop-accent)); }
.iop-foot-legal-link {
  margin-left: auto;
  color: var(--color-white, var(--iop-white));
  text-decoration: none;
  transition: color var(--iop-dur-fast) var(--iop-ease);
}
.iop-foot-legal-link:hover,
.iop-foot-legal-link:focus { color: var(--color-accent, var(--iop-accent)); }

/* The base line is one line. At the design's 1440 it fits at full tracking
   with no slack, so below that the tracking tightens rather than the line
   breaking. Only once a phone cannot hold it at all does it stack. */
.iop-foot-base { flex-wrap: nowrap; }
.iop-foot-base > * { white-space: nowrap; }

@media (max-width: 1320px) {
  .iop-foot-base { letter-spacing: 0.1em; gap: var(--iop-space-8); }
}
@media (max-width: 1100px) {
  .iop-foot-base { font-size: 10px; letter-spacing: 0.05em; }
}
@media (max-width: 880px) {
  .iop-foot-base { flex-wrap: wrap; font-size: var(--iop-size-micro); letter-spacing: var(--iop-tracking-label); }
  .iop-foot-base > * { white-space: normal; }
}

/* The logo and three link columns share one row until they no longer fit,
   then the links drop beneath the logo, still as a row. */
@media (max-width: 1200px) {
  .iop-foot { flex-wrap: wrap; gap: var(--iop-space-48); }
  .iop-foot-links { margin-left: 0; width: 100%; justify-content: space-between; gap: var(--iop-space-32); }
}

@media (max-width: 1024px) {
  :root { --iop-gutter: 48px; --iop-logo-w-footer: 280px; }
  .site-primary-footer-wrap { padding: var(--iop-space-96, 96px) var(--iop-gutter); }
  .iop-foot-base { padding-top: var(--iop-space-48); }
}

@media (max-width: 767px) {
  :root { --iop-gutter: 24px; --iop-logo-w-footer: 220px; }
  .iop-nav { gap: var(--iop-space-24); }
  .iop-nav-link { font-size: var(--iop-size-micro); }
  .iop-foot-links { flex-direction: column; align-items: flex-start; gap: var(--iop-space-32); }
  .iop-row-value { white-space: normal; }
  /* No width can hold the base line on a phone, so it stacks deliberately:
     one statement per line, and the separators go rather than hang loose. */
  .iop-foot-base { flex-direction: column; align-items: flex-start; gap: var(--iop-space-4); }
  .iop-foot-base .iop-sep { display: none; }
  .iop-foot-legal-link { margin-left: 0; margin-top: var(--iop-space-8); }
}


/* back links: smooth hover to orange (the orange itself is set in the iop-back-link class) */
.iop-back-link { transition: color var(--iop-dur-fast) var(--iop-ease); }


/* The interlude image between the pillars and the slider breathes: a slow
   scale in and back out, forever, so the still frame is never quite still.
   Scoped to the interlude so the journal and article covers stay static. */
@keyframes iop-interlude-drift {
  from { transform: scale(1); }
  to   { transform: scale(var(--iop-zoom)); }
}
.iop-interlude > .iop-cover-image {
  animation: iop-interlude-drift 24s var(--iop-ease, ease-in-out) infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .iop-interlude > .iop-cover-image { animation: none; }
}