/* Tidal Cinema, the corporate site is staged over one continuous harbour scene. */

:root {
  --tidal-progress: 0;
  --tidal-image-shift: 0vh;
  --tidal-depth-shift: 0vh;
  --tidal-contour-shift: 0vh;
  --tidal-contour-rotate: 0deg;
  --tidal-contour-dash: 0px;
  --tidal-light-shift: 0vw;
  --tidal-pointer-x: 0px;
  --tidal-pointer-y: 0px;
  --tidal-contour-color: rgb(218 138 59);
}

.tidal-environment {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--ink);
}

.tidal-art,
.tidal-atmosphere,
.tidal-light,
.tidal-vignette,
.tidal-grain,
.tidal-contours {
  position: absolute;
  inset: 0;
}

.tidal-art {
  inset: -7vh -4vw;
  background:
    linear-gradient(180deg, rgba(8, 19, 15, 0.16), rgba(8, 19, 15, 0.04) 53%, rgba(8, 19, 15, 0.38)),
    url("/tidal-environment.webp") center / cover no-repeat;
  transform: translate3d(
      var(--tidal-pointer-x),
      calc(var(--tidal-image-shift) + var(--tidal-pointer-y)),
      0
    )
    scale(1.055);
  transform-origin: center;
  will-change: transform;
}

/* No will-change on this layer or on .tidal-light. Six full viewport layers are
   stacked in the fixed container above, and every promoted layer is its own
   composited surface held in memory for the whole session. These two travel the
   least of the four moving layers, 8vh and 9vw, so the promotion bought little and
   cost a surface each. .tidal-art and .tidal-contours, which travel furthest, keep
   theirs. Removed 2026-08-11. */
.tidal-atmosphere {
  inset: -10vh -8vw;
  background:
    radial-gradient(circle at 86% 44%, rgba(240, 180, 90, 0.1), transparent 27%),
    radial-gradient(circle at 42% 70%, rgba(23, 76, 58, 0.24), transparent 44%),
    linear-gradient(90deg, rgba(8, 19, 15, 0.48), transparent 58%);
  transform: translate3d(0, var(--tidal-depth-shift), 0);
  transition: filter 600ms ease;
}

.tidal-light {
  inset: auto -10vw -28vh auto;
  width: min(74vw, 1100px);
  aspect-ratio: 1.35;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(240, 180, 90, 0.22),
    rgba(218, 138, 59, 0.07) 36%,
    transparent 70%
  );
  filter: blur(24px);
  mix-blend-mode: screen;
  transform: translate3d(var(--tidal-light-shift), 0, 0);
}

.tidal-contours {
  inset: -6vh -4vw -14vh -4vw;
  width: 108vw;
  height: 120vh;
  overflow: visible;
  fill: none;
  stroke: var(--tidal-contour-color);
  stroke-opacity: 0.58;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform: translate3d(
      var(--tidal-pointer-x),
      calc(var(--tidal-contour-shift) + var(--tidal-pointer-y)),
      0
    )
    rotate(var(--tidal-contour-rotate));
  transform-origin: 72% 58%;
  will-change: transform;
}

.tidal-contours path {
  stroke-dasharray: 1760 80;
  stroke-dashoffset: var(--tidal-contour-dash);
  transition: stroke 700ms ease;
}

.tidal-contours path:nth-child(2n) {
  stroke: var(--tidal-contour-color);
  stroke-opacity: 0.38;
}

.tidal-contours path:nth-child(3n) {
  stroke: var(--tidal-contour-color);
  stroke-opacity: 0.48;
}

.tidal-contours .tidal-primary {
  stroke: var(--tidal-contour-color);
  stroke-opacity: 0.92;
  stroke-width: 1.45;
  filter: drop-shadow(0 0 6px rgba(240, 180, 90, 0.28));
}

.tidal-vignette {
  background:
    linear-gradient(180deg, rgba(8, 19, 15, 0.2), transparent 27%, rgba(8, 19, 15, 0.27)),
    linear-gradient(90deg, rgba(8, 19, 15, 0.4), transparent 54%, rgba(8, 19, 15, 0.05));
}

.tidal-grain {
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
}

.tidal-site {
  position: relative;
  z-index: 1;
  color: var(--cream);
  background: transparent;
}

.tidal-site .shell {
  width: min(1320px, calc(100vw - 120px));
}

.tidal-site .site-header {
  height: 96px;
  border: 0;
  background: linear-gradient(180deg, rgba(8, 19, 15, 0.46), rgba(8, 19, 15, 0.1) 72%, transparent);
  backdrop-filter: blur(6px);
}

.tidal-site .header-inner {
  gap: 32px;
}

.tidal-site .brand-mark {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.045em;
}

.tidal-site .brand-divider {
  height: 32px;
  margin-inline: 18px 16px;
  background: rgba(240, 180, 90, 0.74);
}

.tidal-site .brand-name {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.tidal-site .desktop-nav {
  margin-left: auto;
  gap: clamp(30px, 3.8vw, 56px);
}

.tidal-site .desktop-nav a {
  color: rgba(244, 235, 221, 0.9);
  font-size: 14px;
  font-weight: 500;
}

.tidal-site .desktop-nav a:hover,
.tidal-site .desktop-nav a:focus-visible {
  color: var(--amber-bright);
}

.tidal-site .nav-utility {
  display: inline-flex;
  min-width: 64px;
  min-height: 44px;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  color: var(--amber);
}

/* The dot used to BE the span, which meant the header contact control showed a
   sighted desktop reader a 9px amber dot and an arrow and nothing else: the only
   label was an aria-label, so it read as a control to a screen reader and as
   decoration to everyone else. The span now carries the word Contact and the dot
   moved to ::before, same size, same colour, same hover. 2026-08-11. */
.tidal-site .nav-utility::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(240, 180, 90, 0.22);
  transition: box-shadow 220ms ease, background 220ms ease;
}

.tidal-site .nav-utility span {
  font-size: 14px;
  font-weight: 500;
}

.tidal-site .nav-utility i {
  font-size: 26px;
  font-style: normal;
  font-weight: 300;
  transition: transform 180ms ease;
}

.tidal-site .nav-utility:hover::before {
  background: var(--amber-bright);
  box-shadow: 0 0 0 7px rgba(240, 180, 90, 0.1);
}

.tidal-site .nav-utility:hover i {
  transform: translateX(4px);
}

.tidal-site main,
.tidal-site .site-footer {
  position: relative;
  z-index: 1;
}

.tidal-site main section {
  position: relative;
  isolation: isolate;
  color: var(--cream);
  background: transparent;
}

.tidal-site main section > .shell {
  position: relative;
  z-index: 2;
}

.tidal-site .hero {
  min-height: max(820px, 100svh);
  overflow: hidden;
  background: transparent;
}

.tidal-site .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(8, 19, 15, 0.27), rgba(8, 19, 15, 0.03) 66%),
    linear-gradient(180deg, transparent 65%, rgba(8, 19, 15, 0.18));
  pointer-events: none;
}

.tidal-site .hero::after,
.tidal-site .hero-art,
.tidal-site .hero-shade,
.tidal-site .wind-lines {
  display: none;
}

.tidal-site .hero-inner {
  min-height: max(820px, 100svh);
  display: block;
  padding-top: clamp(168px, 22vh, 204px);
  padding-bottom: 72px;
}

.tidal-site .hero-copy {
  width: min(680px, 54vw);
}

.tidal-site .hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-bottom: 38px;
  color: var(--cream);
  font-size: 11px;
  letter-spacing: 0.32em;
}

.tidal-site .hero-eyebrow::after {
  content: "";
  width: 70px;
  height: 1px;
  background: var(--amber);
}

.tidal-site .hero h1 {
  max-width: 660px;
  margin-bottom: 26px;
  font-size: clamp(64px, 6.1vw, 88px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.96;
  text-wrap: initial;
}

.tidal-site .hero-lead {
  max-width: 565px;
  margin-bottom: 28px;
  color: rgba(244, 235, 221, 0.86);
  font-size: 18px;
  line-height: 1.55;
}

.tidal-site .hero-actions {
  gap: 42px;
  align-items: center;
  margin-bottom: 52px;
}

.tidal-site .button {
  min-height: 64px;
  border-radius: 2px;
  font-size: 16px;
}

.tidal-site .button-primary {
  min-width: 264px;
  justify-content: space-between;
  color: var(--ink);
  background: var(--cream);
}

.tidal-site .button-primary:hover {
  color: var(--ink);
  background: var(--amber-bright);
  box-shadow: 0 14px 42px rgba(218, 138, 59, 0.16);
}

.tidal-site .button-primary span {
  /* 2026-08-04: was var(--amber), which put the arrow at 2.31:1 on the cream button fill. At 20px
     it is not large text, so it needed 4.5:1, and even as a non text graphic it missed 3:1. It now
     matches the button label it sits beside: ink is 16.01:1 on the cream fill and still 10.25:1 on
     the amber-bright hover fill below. */
  color: var(--ink);
  font-size: 20px;
  transition: transform 180ms ease;
}

.tidal-site .button-primary:hover span {
  transform: translate(4px, 4px);
}

.tidal-site .button-secondary {
  position: relative;
  min-height: 44px;
  padding: 0 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.tidal-site .button-secondary::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--amber);
  transform-origin: left;
  transition: right 180ms ease;
}

.tidal-site .button-secondary:hover {
  color: var(--amber-bright);
  border-color: transparent;
  background: transparent;
}

.tidal-site .button-secondary:hover::after {
  right: -12px;
}

/* 2026-08-11 dead rule sweep, part two. The same sweep was run over styles.css
   (see the note at the top of that file) but tidal.css was never finished, so the
   Tidal Cinema overrides for sections that no longer exist in index.html were still
   shipping. Every class named below was checked against the parsed class list of
   BOTH pages before deletion, and none of them appears in either: .proof-line,
   .proof-dot, .sun-mark, .platform, .platform-grid, .platform-intro, .company,
   .section-index, .system-map, .bench, .site-note. tidal.css is loaded ONLY by
   index.html, policies.html does not reference it at all, so a rule that matches
   nothing on index matches nothing anywhere.
   Where a dead class shared a selector list with live ones the list was TRIMMED,
   not deleted, so .premise, .operating-model, .flagship, .partners, .contact,
   .large-copy, .model-row p and the .flagship dt/.eyebrow colours all still apply.
   One removal is worth naming: the old .section-index block carried a note about
   lifting eyebrow contrast from 3.75:1 to 6.60:1. That class is gone from the
   markup, so the rule was dead; the live eyebrows are coloured by .tidal-site
   .eyebrow just below, which is untouched, so nothing regressed. */

.tidal-site .scroll-cue {
  right: 28px;
  bottom: 22px;
  color: rgba(244, 235, 221, 0.74);
  letter-spacing: 0.2em;
}

.tidal-site .scroll-cue i {
  display: none;
}

.tidal-site .premise,
.tidal-site .operating-model,
.tidal-site .flagship,
.tidal-site .partners,
.tidal-site .contact {
  overflow: hidden;
  padding: clamp(118px, 13vw, 190px) 0;
  border-top: 1px solid rgba(244, 235, 221, 0.08);
}

.tidal-site .premise::before,
.tidal-site .operating-model::before,
.tidal-site .flagship::before,
.tidal-site .partners::before,
.tidal-site .contact::before {
  content: "";
  position: absolute;
  inset: -1px 0;
  z-index: 0;
  pointer-events: none;
}

.tidal-site .premise::before {
  background: linear-gradient(180deg, rgba(8, 19, 15, 0.18), rgba(8, 19, 15, 0.68) 42%, rgba(8, 19, 15, 0.58));
}

.tidal-site .operating-model::before {
  background:
    radial-gradient(circle at 12% 35%, rgba(23, 76, 58, 0.3), transparent 37%),
    linear-gradient(180deg, rgba(8, 19, 15, 0.58), rgba(8, 19, 15, 0.78) 50%, rgba(11, 27, 42, 0.6));
}

.tidal-site .flagship::before {
  background:
    radial-gradient(circle at 82% 34%, rgba(240, 180, 90, 0.2), transparent 37%),
    linear-gradient(180deg, rgba(13, 45, 36, 0.58), rgba(8, 19, 15, 0.68) 53%, rgba(8, 19, 15, 0.62));
}

.tidal-site .partners::before {
  background:
    radial-gradient(circle at 14% 22%, rgba(218, 138, 59, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(8, 19, 15, 0.68), rgba(8, 19, 15, 0.8));
}

.tidal-site .contact::before {
  background:
    radial-gradient(circle at 78% 35%, rgba(218, 138, 59, 0.17), transparent 38%),
    linear-gradient(180deg, rgba(8, 19, 15, 0.78), rgba(5, 13, 10, 0.94));
}

.tidal-site .eyebrow,
.tidal-site .operating-model .eyebrow,
.tidal-site .flagship .eyebrow,
.tidal-site .partners .eyebrow {
  color: var(--amber);
}

.tidal-site .large-copy,
.tidal-site .model-row p {
  color: rgba(244, 235, 221, 0.68);
}

.tidal-site .premise-note p {
  color: rgba(244, 235, 221, 0.55);
}

.tidal-site .model-list,
.tidal-site .partner-paths {
  border-top-color: rgba(244, 235, 221, 0.22);
}

.tidal-site .model-row,
.tidal-site .partner-paths a,
.tidal-site .flagship dl,
.tidal-site .flagship dl > div {
  border-color: rgba(244, 235, 221, 0.18);
}

.tidal-site .model-number,
.tidal-site .partner-paths span {
  color: var(--amber);
}

.tidal-site .model-row:hover,
.tidal-site .partner-paths a:hover {
  background: rgba(240, 180, 90, 0.07);
}

.tidal-site .row-arrow {
  border-color: rgba(244, 235, 221, 0.28);
}

.tidal-site .model-row:hover .row-arrow {
  color: var(--ink);
  background: var(--amber-bright);
}

.tidal-site .flagship::after {
  z-index: 1;
  color: rgba(244, 235, 221, 0.035);
}

.tidal-site .flagship dt,
.tidal-site .flagship .eyebrow {
  color: rgba(244, 235, 221, 0.55);
}

.tidal-site .flagship dd,
.tidal-site .flagship-lead {
  color: var(--cream);
}

.tidal-site .contact {
  background: transparent;
}

.tidal-site .contact::after {
  z-index: 1;
  border-color: rgba(240, 180, 90, 0.18);
  box-shadow: 0 0 0 70px rgba(218, 138, 59, 0.025), 0 0 0 140px rgba(218, 138, 59, 0.015);
}

.tidal-site .site-footer {
  border-top: 1px solid rgba(244, 235, 221, 0.09);
  background: rgba(5, 13, 10, 0.96);
}

@media (max-width: 1100px) {
  .tidal-site .shell {
    width: min(100% - 56px, 1320px);
  }

  .tidal-site .desktop-nav {
    gap: 26px;
  }

  .tidal-site .hero-copy {
    width: min(680px, 62vw);
  }

  .tidal-site .hero h1 {
    font-size: clamp(58px, 7vw, 78px);
  }
}

@media (max-width: 860px) {
  .tidal-site .shell {
    width: min(100% - 40px, 1320px);
  }

  /* tidal-environment.webp is 1920x1200 and 50,032 bytes, and it is preloaded, so it
     sits on the critical path. A 375px viewport at dpr 2 needs about 750 device px,
     so the desktop file was roughly 2.5x oversized on a phone. The 960px variant is
     20,376 bytes, 29,656 fewer, and measures 41.7dB PSNR against the downscaled
     original, which is invisible under the gradient this layer carries. The preload
     in index.html carries the matching media attribute, so a phone never fetches the
     desktop file. Only the image swaps: position, size and repeat still come from the
     shorthand above. */
  .tidal-art {
    background-image:
      linear-gradient(180deg, rgba(8, 19, 15, 0.16), rgba(8, 19, 15, 0.04) 53%, rgba(8, 19, 15, 0.38)),
      url("/tidal-environment-960.webp");
  }

  .tidal-site .site-header {
    height: 76px;
    background: rgba(8, 19, 15, 0.34);
    backdrop-filter: blur(10px);
  }

  .tidal-site .nav-utility {
    display: none;
  }

  .tidal-site .mobile-nav nav {
    border-color: rgba(240, 180, 90, 0.25);
    /* Solid. This rule was overriding the base panel back down to 0.95 and
       putting the ghost headline back. Same colour, full alpha. */
    background: #08130f;
  }

  .tidal-site .hero,
  .tidal-site .hero-inner {
    min-height: max(760px, 100svh);
  }

  .tidal-site .hero-inner {
    padding-top: clamp(135px, 19vh, 175px);
  }

  .tidal-site .hero-copy {
    width: min(690px, 92vw);
  }

  .tidal-site .hero h1 {
    font-size: clamp(56px, 10vw, 78px);
  }

  .tidal-contours {
    left: -25vw;
    width: 135vw;
  }
}

@media (max-width: 560px) {
  .tidal-site .shell {
    width: calc(100% - 30px);
  }

  .tidal-art {
    inset: -5vh -24vw;
    background-position: 63% center;
  }

  .tidal-contours {
    left: -54vw;
    width: 170vw;
    opacity: 0.74;
  }

  .tidal-contours path:nth-child(n + 6) {
    display: none;
  }

  .tidal-site .hero,
  .tidal-site .hero-inner {
    min-height: max(800px, 100svh);
  }

  .tidal-site .hero-inner {
    padding-top: 132px;
    padding-bottom: 48px;
  }

  .tidal-site .hero-copy {
    width: 100%;
  }

  .tidal-site .hero-eyebrow {
    gap: 16px;
    margin-bottom: 30px;
    font-size: 9px;
  }

  .tidal-site .hero-eyebrow::after {
    width: 44px;
  }

  .tidal-site .hero h1 {
    font-size: clamp(48px, 15vw, 64px);
    line-height: 0.94;
  }

  .tidal-site .hero h1 br {
    display: none;
  }

  .tidal-site .hero-lead {
    font-size: 16px;
  }

  .tidal-site .hero-actions {
    gap: 14px;
    margin-bottom: 38px;
  }

  .tidal-site .button-secondary {
    justify-self: start;
    width: auto;
  }

  .tidal-site .premise,
  .tidal-site .operating-model,
  .tidal-site .flagship,
  .tidal-site .partners,
  .tidal-site .contact {
    padding-block: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* This block used to stop the movement and leave the cost: the layers still asked
     to be promoted, and the 74vw blurred ellipse still ran a blur pass on a fixed
     full viewport surface. A reader who has asked the operating system for less
     motion is usually on a machine that wants less work too, so nothing here has a
     reason to hold a composited surface once it cannot move. */
  .tidal-art,
  .tidal-atmosphere,
  .tidal-light,
  .tidal-contours {
    transform: none !important;
    will-change: auto !important;
    filter: none !important;
  }

  .tidal-contours path {
    stroke-dashoffset: 0 !important;
  }
}

/* ---- PARTNER INTAKE ROWS (added 2026-08-25) ---------------------------------
   Two partner path rows became intake modal buttons. Same skin the anchor rows
   get above, plus a readable small line: the base .partner-paths small colour
   in styles.css is ink on the cream design, invisible on this dark ground. */
.tidal-site .partner-paths button {
  border-color: rgba(244, 235, 221, 0.18);
}

.tidal-site .partner-paths button:hover {
  background: rgba(240, 180, 90, 0.07);
}

.tidal-site .partner-paths small {
  color: rgba(244, 235, 221, 0.6);
}

/* ---- EVENT INFRASTRUCTURE (added 2026-08-25) --------------------------------
   The new section between the operating model and the partner paths. The generic
   ".tidal-site main section" rules above already make it transparent and stack
   its .shell over the art; this block gives it the same padding, hairline and a
   veil in the family of its neighbours, bridging the operating model's tail
   into the partners' head. */
.tidal-site .infrastructure {
  overflow: hidden;
  padding: clamp(118px, 13vw, 190px) 0;
  border-top: 1px solid rgba(244, 235, 221, 0.08);
}

.tidal-site .infrastructure::before {
  content: "";
  position: absolute;
  inset: -1px 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 26%, rgba(23, 76, 58, 0.26), transparent 34%),
    linear-gradient(180deg, rgba(11, 27, 42, 0.6), rgba(8, 19, 15, 0.74) 48%, rgba(8, 19, 15, 0.68));
}

@media (max-width: 560px) {
  .tidal-site .infrastructure {
    padding-block: 104px;
  }
}