/* iM Media Labs — shared shell. Header, nav, footer, buttons, tokens, typography.
   Loaded by every page. Page-specific rules live in /assets/page-*.css */

/* Type and spacing scale.
   Fluid between a 360px and a 1120px viewport, so every page scales
   continuously instead of stepping at breakpoints. Previously each page
   redefined these in its own media queries, which is why /press never
   scaled at all and the homepage jumped straight to phone sizes at 920px. */
:root {
--text-shadow: 0 4px 12px rgba(0,0,0,.15);
--bg: #141e32;
--text: rgba(255,255,255,.95);
--muted: rgba(255,255,255,.85);
--muted2: rgba(255,255,255,.65);
--line: rgba(255,255,255,.15);
--accent:#F08C00; 
--max: 1120px;
--radius: 10px;

      
      --page-pad: 24px;
--space-1: 12px;
--space-1_5: 20px;
--space-2: 24px;
--space-3: 28px;
--space-4: 36px;
--space-5: clamp(32px, 26.32px + 1.579vw, 44px);
--space-6: clamp(48px, 29.05px + 5.263vw, 88px);
--section-pad: clamp(40px, 24.84px + 4.211vw, 72px);
--section-pad-y: var(--section-pad);
--section-pad-x: 0px;
--hero-pad: clamp(48px, 25.26px + 6.316vw, 96px);
--panel-pad: clamp(20px, 16.21px + 1.053vw, 28px);

      
      --hue-cycle: 20s;
--hue-start: 22.5deg; 
--sync-delay: 0s; 

      
      --header-h: 72px;
--header-gap: clamp(24px, 16.42px + 2.105vw, 40px);

      
      /* One step below --fs-xs, for metadata that should sit under the reading
         line entirely: source notes, credits. Same 360px -> 1120px interpolation
         and the same 1px of travel as every other step, so it stays on the
         scale rather than being an ad-hoc size. 12px is the floor -- below that
         it stops being small and starts being unreadable. */
      --fs-2xs: clamp(12px, 11.53px + 0.132vw, 13px);
      --fs-xs: clamp(13px, 12.53px + 0.132vw, 14px);
--fs-sm: clamp(15px, 14.53px + 0.132vw, 16px);
--fs-md: clamp(16px, 14.11px + 0.526vw, 20px);
--fs-h3: clamp(18px, 14.21px + 1.053vw, 26px); 
--fs-lg: clamp(24px, 20.21px + 1.053vw, 32px);
--fs-xl: clamp(34px, 25.47px + 2.368vw, 52px);

      
      --fw-regular: 360;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 600;

      
      --hue: var(--hue-start);

  
  --cycle-solid: hsl(calc(236deg + var(--hue)) 50% 40%);
--cycle-solid-80: color-mix(in srgb, var(--cycle-solid) 80%, transparent);
}

@property --hue {
syntax: '<angle>';
inherits: true;
initial-value: 0deg;
}

@keyframes hueCycle {
0% {
--hue: var(--hue-start);
}
100% {
--hue: calc(var(--hue-start) + 360deg);
}
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--header-gap) + 12px);
    

    background: #000000;
    background-color: #000000;
}

html, body {
    margin: 0;
    font-weight: var(--fw-regular);
    font-family: "Noto Sans Display", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: var(--fs-md);
    color: var(--text);
    line-height: 1.5;
    text-shadow: var(--text-shadow);
    background: #141e32;
    background-color: #141e32;
    padding-top: 0;
    min-height: 100svh;
    letter-spacing: .2px;
    position: relative;
    z-index: 0;
    isolation: isolate;
    padding-bottom: env(safe-area-inset-bottom);
}

/* Form controls do not inherit font-family from body - every browser
   substitutes its own UI font, which is Arial or Helvetica on most systems.
   Without this every <button> on the site, including "Copy" and
   "Send message", renders in the wrong typeface. */
button,
input,
select,
textarea {
    font-family: inherit;
    letter-spacing: inherit;
}

.bg-solid, .bg-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.bg-solid {
    z-index: -3;
    background: var(--cycle-solid);
    opacity: 1;
}

.bg-overlay {
    z-index: -2;
    background: linear-gradient( to top, rgba(20, 30, 50, 1) 0%, rgba(20, 30, 50, 0) 65% ), radial-gradient( circle at 50% 40%, rgba(20, 30, 50, 0) 0%, rgba(20, 30, 50, 1) 100% );
}

a {
    color: inherit;
    text-decoration: none;
}

a.link {
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--text);
    opacity: .9;
}

a.link:hover {
    opacity: 1;
}

.container {
width: min(var(--max), calc(100% - (var(--page-pad) * 2)));
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    left: 16px;
    top: 16px;
    width: auto;
    height: auto;
    padding: 10px 12px;
    background: rgba(18,27,43,.9);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.header-spacer {
    height: calc(var(--header-h) + var(--header-gap));
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: linear-gradient( to top, rgba(20, 30, 50, 0) 0%, rgba(20, 30, 50, 100) 100% );
    outline: 1px solid rgba(255,255,255,.1);
    transform: translateZ(0);
}

/* Uppercase applies to every button variant, primary and secondary alike. */
.btn {
    text-transform: uppercase;
}

.btn:not(.btn-ghost) {
    transition: box-shadow 220ms ease, transform 220ms ease;
    text-transform: uppercase;
    font-weight: var(--fw-bold);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1_5) 0;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    min-width: 220px;
}

.brand-logo {
    width: 44px;
    height: 44px;
    display: block;
    flex: 0 0 auto;
    filter: drop-shadow(0 16px 40px rgba(0,0,0,.36));
}

.brand-name {
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.nav a:not(.btn) {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--muted);
    padding: 8px 18px;
    border-radius: 10px;
    white-space: nowrap;
    transition: color 180ms ease, background-color 180ms ease, border-radius 180ms ease;
}

.nav a:not(.btn):hover {
    color: var(--text);
    background: rgba(255,255,255,.10);
    border-radius: 999px;
}

.nav a:not(.btn):focus-visible {
outline: none;
color: var(--text);
background: rgba(255,255,255,.10);
border-radius: 999px;
}

.nav-toggle {
    display: none;
    padding: 10px 14px;
}

.hamburger {
    position: relative;
    width: 22px;
    height: 14px;
    display: inline-block;
}

.hamburger .bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    transform-origin: 50% 50%;
    transition: transform 240ms ease, top 240ms ease, opacity 240ms ease;
}

.hamburger .bar.top {
    top: 3px;
}

.hamburger .bar.bottom {
    top: 11px;
}

body.nav-open .hamburger .bar.top {
    top: 7px;
    transform: rotate(45deg);
}

body.nav-open .hamburger .bar.bottom {
    top: 7px;
    transform: rotate(-45deg);
}

.nav-drawer {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h);
    z-index: 49;
    padding: 14px 0 18px;
    backdrop-filter: blur(14px);
    outline: 1px solid rgba(255,255,255,.1);
    transform: translate3d(0, -8px, 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
    backdrop-filter: blur(14px);
}

body.nav-open .nav-drawer {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

.nav-drawer-inner {
    display: grid;
    gap: 10px;
}

.nav-drawer a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.92);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    box-shadow: 0 14px 36px rgba(0,0,0,.10);
    transition: background-color 180ms ease, transform 180ms ease;
}

.nav-drawer a:hover {
    background: rgba(255,255,255,.12);
    transform: translateY(-1px);
}

.nav-drawer a:active {
    transform: translateY(0);
}

.nav-drawer a.drawer-cta {
    background: rgba(255,255,255,.10);
}

.btn.nav-toggle {
    display: none;
}

.btn {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 32px;
    border-radius: 999px; 
    border: none;
    background: var(--cycle-solid);
    background: var(--cycle-solid-80);
    color: #FFFFFF;
    box-shadow: 0 16px 40px rgba(0,0,0,.36), inset 0 -1px 0 rgba(255,255,255,.10),   inset 0 1px 0 rgba(0,0,0,.22);        
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate; 
    text-shadow: var(--text-shadow);
    transform: translateZ(0);
}

.btn:hover {
    box-shadow: 0 18px 46px rgba(0,0,0,.44);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(1px);
}

.btn-small {
    padding: 12px 18px;
    border-radius: 999px;
    font-size: var(--fs-sm);
}

.btn.btn-ghost {
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
    box-shadow: none;
    border-radius: 999px;
    text-shadow: none;
}

.btn.btn-ghost::before {
    content: none;
}

.btn.btn-ghost:hover {
    background: rgba(255,255,255,.14);
}

strong {
    font-weight: var(--fw-semibold);
}

.muted {
    color: var(--muted);
}

.small {
    font-size: var(--fs-sm);
}

.eyebrow {
    text-transform: uppercase;
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
    color: var(--muted);
    margin: 0 0 10px;
    letter-spacing: 0.1em; 
}

.lead {
    margin: 0 0 var(--space-2);
    color: rgba(255,255,255,.92);
    font-size: var(--fs-md);
    width: 100%;
    max-width: 90ch;
}

.icon-inline {
    width: 60px;
    height: 60px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.88);
    margin-top: 2px;
}

.hero {
    padding: var(--hero-pad) 0 var(--space-3);
}

.hero h1 {
    margin: 0 0 28px;
    font-weight: var(--fw-bold);
    font-size: var(--fs-xl);
    line-height: 1.15;
}

.hero h1.hero-blur-in {
    animation: heroBlurIn 920ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes heroBlurIn {
0% {
opacity: 0;
transform: translate3d(0, 10px, 0);
filter: blur(14px);
}
65% {
opacity: 1;
transform: translate3d(0, 0, 0);
filter: blur(3px);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
filter: blur(0);
}
}

.cta-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ph-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;     
    object-position: center;
}

.ph-img.contain {
    object-fit: contain;
}

.visual-caption {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.95);
}

.icon-ph {
    width: 60px;
    height: 60px;
    border-radius: 999px;
    flex: 0 0 auto;
    background: rgba(255,255,255,.14);
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.88);
}

.icon-ph svg, .resource-icon svg, .icon-inline svg {
    width: 60%;
    height: 60%;
    display: block;
}

.section {
    padding: var(--section-pad-y) var(--section-pad-x);
}

.section-alt {
    background: transparent;
    border-top: none;
    border-bottom: none;
}

.section-head {
    display: block;
    margin-bottom: var(--space-3);
}

.section-head .subhead {
    margin: 8px 0 0;
    font-weight: var(--fw-medium);
    color: var(--muted);
}

/* A page-level h1 sits in a section head on /press and /press/kit and must
   read identically to the section h2s around it. */
.section h1,
.section h2 {
    margin: 0;
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
}

.two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3);
}

.panel {
    border: none;
    background: rgba(255,255,255,.07);
    border-radius: 16px;
    padding: var(--panel-pad);
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
}

.panel h3 {
    margin: 0 0 12px;
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
}

.list {
    margin: 12px 0 0;
    padding-left: 18px;
    color: rgba(255,255,255,.88);
}

.list li {
    margin: 8px 0;
}

.list strong {
    color: rgba(255,255,255,.98);
}

.split-block {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "head head" "main side";
    gap: var(--space-4);
    align-items: start;
}

.split-head {
    grid-area: head;
}

.split-main {
    grid-area: main;
}

.split-side {
    grid-area: side;
}

.split-head h3 {
    margin: 0;
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
}

.split-main p {
    margin: 0;
    color: rgba(255,255,255,.86);
}

.split-main .list {
    margin-top: 12px;
}

.split-side h4 {
    margin: 0 0 10px;
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    color: rgba(255,255,255,.92);
}


/* Consent notice under the submit button. Quiet, but not so quiet it reads
   as decoration - this is the disclosure the submission relies on. Capped at
   two thirds on desktop so the line length stays readable; released to full
   width below the breakpoint, where two thirds would be too narrow. */
.form-consent {
    margin: 14px 0 0;
    max-width: 66%;
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--muted2);
}

.site-footer {
    padding: var(--space-3) 0;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.footer-logo {
    width: 44px;
    height: 44px;
    display: block;
    flex: 0 0 auto;
    filter: drop-shadow(0 16px 40px rgba(0,0,0,.36));
}

.footer-brand-name {
    font-weight: var(--fw-semibold);
    color: rgba(255,255,255,.92);
    line-height: 1.1;
}

/* Legal line: the smallest step on the page, and de-emphasized. Sized here
   rather than by utility classes in the markup, which is why it rendered at
   body size (20px) on the press pages that did not carry .small. */
/* Footer navigation mirrors the header, so every page keeps a full set of
   links even where the top nav has collapsed to a hamburger. */
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
}

.footer-nav a {
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    padding: 4px 2px;
    transition: color 180ms ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
    color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
.footer-nav a { transition: none; }
}

.footer-copy {
    text-align: center;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--muted2);
}

/* The policy link sits in the legal line rather than the nav. Kept at the
   same size and colour as the copyright so it reads as fine print - but with
   a faint underline, because a link with no visual cue at all is one nobody
   can find. */
.footer-copy a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.22);
    padding-bottom: 1px;
    transition: color 180ms ease, border-color 180ms ease;
}

.footer-copy a:hover,
.footer-copy a:focus-visible {
    color: var(--text);
    border-bottom-color: rgba(255,255,255,.55);
}

.footer-legal-sep {
    padding: 0 4px;
    opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
.footer-copy a { transition: none; }
}

@keyframes bgDrift2 {
0% {
background-position: 20% 10%;
}
50% {
background-position: 85% 55%;
}
100% {
background-position: 5% 80%;
}
}

@keyframes bgRotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}

[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    filter: blur(3px);
    transition: opacity 720ms cubic-bezier(.2, .8, .2, 1), transform 720ms cubic-bezier(.2, .8, .2, 1), filter 720ms cubic-bezier(.2, .8, .2, 1);
    will-change: opacity, transform, filter;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.delay-1 {
    transition-delay: 90ms;
}

.delay-2 {
    transition-delay: 180ms;
}

.btn-primary, .btn--primary, .btn.primary {
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
}

/* The header blur used to be switched off on iOS via an -webkit-touch-callout
   probe, because a full-screen animated, hue-rotating background sat behind it
   and forced the blur to recompute every frame. That background animation no
   longer exists, and --hue is now driven from JS at 12fps, so the cost is gone
   and the blur is enabled everywhere.

   Feature-test rather than device-sniff: browsers that cannot do backdrop-filter
   get a near-solid header instead of a transparent one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header {
    background: rgba(20,30,50,.94);
}
}

/* ---- Responsive shell: mobile nav. Unified breakpoint (was 920px on home,
   768px on connect/video). Change the 920px here to move it everywhere. ---- */
@media (max-width: 920px){
.form-consent{ max-width: none; }
.header-inner{ padding:14px 0; }
.brand{ min-width:0; gap:12px; }
.brand-logo{ width:42px; height:42px; }
.nav{ display:none; }
.btn.nav-toggle{ display:inline-flex; }
body.nav-open{ overflow:hidden; }
}

/* Phone widths: five links need roughly 354px on one line, which most phones
   do not have once page padding is taken off - so the last item drops alone
   onto a second row. Stack them instead: predictable, and a bigger tap
   target than a cramped row. */
@media (max-width: 560px) {
.footer-nav {
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* 6px top and bottom gives a ~35px row: tight enough that the list reads as
   one group rather than five scattered items, and still well clear of the
   24px WCAG minimum tap target. */
.footer-nav a {
    padding: 6px 4px;
}
}

/* Reveal-on-scroll, no-JS-safe variant (was video-page only) */
[data-reveal-safe] {
  opacity: 0;
  transform: translate3d(0,14px,0);
  transition: opacity 720ms cubic-bezier(.2,.8,.2,1), transform 720ms cubic-bezier(.2,.8,.2,1);
}

[data-reveal-safe].is-visible {
  opacity: 1;
  transform: translate3d(0,0,0);
}