/* FONTS ARE SELF HOSTED. There is no font request to a third party any more.
   History, because it explains the shape of what follows. The Google stylesheet
   was first pulled in here with @import, which cannot even be discovered until
   this file has downloaded AND parsed, so the font sat at the end of a four deep
   chain: HTML, styles.css, fonts.googleapis.com, fonts.gstatic.com. Measured live
   on 2026-08-11: styles.css ran 564ms to 665ms, the Google CSS could not start
   until 669ms and the woff2 files not until 758ms. That @import became a plain
   <link> with preconnects, which removed the parse dependency but kept two third
   party origins on the critical path for text.
   Measured 2026-08-11 from this machine, three cold samples each: the
   fonts.googleapis.com stylesheet cost 228ms to 294ms and a fonts.gstatic.com
   woff2 a further 167ms to 299ms, and the second cannot start until the first has
   parsed because the woff2 URLs are only named inside it. Preconnect hides the DNS
   and TLS part of that, roughly 140ms to 195ms, but not the two round trips.
   Serving the four files from our own already open connection removes the whole
   chain, and it also stops every visitor's IP being handed to a third party, which
   is what the privacy section of /policies implies we do not do.

   The four files are Google's own, byte for byte, fetched from fonts.gstatic.com
   on 2026-08-11 and unmodified. Both families are genuine variable fonts, verified
   by decoding the woff2 table directories: fvar, gvar, HVAR and STAT are all
   present. That is why one @font-face per family per subset carries a weight RANGE
   and covers every weight the pages use, where Google's generated stylesheet
   listed the same file once per discrete weight. Rendering is identical.
   The subsets are latin and latin-ext only, exactly the two Google served for this
   content, with Google's own unicode-range values copied verbatim so the browser
   downloads latin-ext only if a page ever needs it. Today neither page does.
   Note the arrows in the markup, U+2192, U+2197 and U+2198, sit outside both
   ranges. They fell back to a system glyph under Google too, so nothing changed.

   If a family or a weight ever changes, change it HERE. There is no longer a
   <link> in index.html or policies.html to keep in step, and the CSP in
   netlify.toml no longer allows fonts.googleapis.com or fonts.gstatic.com, so a
   stray third party font URL will fail loudly in the console rather than quietly
   costing two round trips. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2026-08-11 dead rule sweep. Every selector in this file was matched against the
   DOM of / and /policies in a real browser, and 5,238 bytes of rules that matched
   nothing on either page were removed: the .platform, .platform-grid,
   .platform-layout, .platform-intro, .system-map, .system-status, .system-output,
   .pulse, .company, .company-layout, .bench, .proof-line, .proof-dot, .sun-mark,
   .section-index and .site-note families, their entries inside the three media
   queries, and the @keyframes pulse that only .pulse used. They are the residue of
   sections that were cut from index.html. Three media query rules had a mixed
   selector list and were trimmed rather than deleted, so .flagship-layout,
   .partners-layout, .partners h2 and the .operating-model, .flagship, .partners,
   .contact padding all still apply. .mobile-nav[open] was deliberately KEPT: it
   only looks dead because the menu is closed while the page is being read. */

:root {
  --font-display: "Cormorant Garamond";
  --font-sans: "Manrope";
  --ink: #08130f;
  --navy: #0b1b2a;
  --rimu: #174c3a;
  --rimu-deep: #0d2d24;
  --cream: #f4ebdd;
  --amber: #da8a3b;
  --amber-bright: #f0b45a;
  --stone: #a99e8c;
  --line: rgba(244, 235, 221, 0.14);
  --shell: min(1280px, calc(100vw - 80px));
  /* Height of the NZ Pie Fest notice bar. The bar, the fixed homepage header
     offset and the anchor scroll margins all read this one value, so they can
     never drift apart. rh-connect.js toggles .promo-open on <html>. */
  --promo-h: 44px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  background: var(--ink);
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-sans), "Avenir Next", "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
summary:focus-visible,
button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 5px;
}

/* The amber ring measures 6.92:1 on the ink ground and passes, but only 2.31:1 on
   the cream ground, under the 3:1 floor WCAG 1.4.11 sets for a focus indicator.
   The whole legal page is cream, so it takes the ink ring instead (16.01:1). The
   two dark blocks inside it take the amber ring back, because ink on ink is
   nothing at all. The homepage is not listed: every section there paints over the
   dark Tidal environment, cream or not, so it keeps the amber ring. */
.legal-page a:focus-visible,
.legal-page summary:focus-visible,
.legal-page button:focus-visible {
  outline-color: var(--ink);
}

.legal-contact a:focus-visible,
.legal-footer a:focus-visible {
  outline-color: var(--amber);
}

/* Seven focusable elements sit before <main> on the homepage. CSS only, no script:
   the CSP allows one whitelisted inline script and nothing else. */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  padding: 15px 22px;
  color: var(--ink);
  background: var(--amber-bright);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transform: translateY(-120%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

::selection {
  background: var(--amber-bright);
  color: var(--ink);
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: 92px;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 19, 15, 0.88);
  backdrop-filter: blur(14px);
  animation: header-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

main section[id] {
  scroll-margin-top: 88px;
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  white-space: nowrap;
}

.brand-mark {
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.brand-divider {
  width: 1px;
  height: 48px;
  margin-inline: 28px 24px;
  background: rgba(218, 138, 59, 0.58);
}

.brand-name {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.5vw, 42px);
}

.desktop-nav a {
  position: relative;
  padding-block: 14px;
  color: rgba(244, 235, 221, 0.86);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms ease;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.mobile-nav {
  display: none;
}

.hero {
  position: relative;
  min-height: max(820px, 100svh);
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
}

.hero-art,
.hero-shade,
.wind-lines {
  position: absolute;
  inset: 0;
}

/* .hero-art is HIDDEN in the Tidal Cinema layer (tidal.css, ".tidal-site .hero-art{display:none}")
   and index.html wraps the whole page in .tidal-site, so this rule never paints. The photographic
   hero was deliberately replaced by the tidal environment in the 2026-08 redesign. The dead
   background-image line was removed on 2026-08-04 so the code stops claiming to load a picture that
   no viewport can see. The element itself stays: it is still the navy ground behind the environment
   if the Tidal layer is ever removed. */
.hero-art {
  z-index: -4;
  background-color: var(--navy);
  background-position: center right;
  background-size: cover;
  transform: scale(1.015);
  animation: art-in 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-shade {
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(8, 19, 15, 0.94) 0%, rgba(8, 19, 15, 0.75) 35%, rgba(8, 19, 15, 0.18) 72%, rgba(8, 19, 15, 0.08) 100%),
    linear-gradient(180deg, rgba(8, 19, 15, 0.48) 0%, transparent 30%, rgba(8, 19, 15, 0.08) 66%, rgba(8, 19, 15, 0.8) 100%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.045;
  pointer-events: none;
  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='.65'/%3E%3C/svg%3E");
}

.wind-lines {
  z-index: -2;
  pointer-events: none;
}

.wind-lines i {
  position: absolute;
  right: -9vw;
  width: 73vw;
  height: 31vh;
  border-top: 1px solid rgba(218, 138, 59, 0.44);
  border-radius: 50%;
  transform: rotate(9deg);
  animation: wind 12s ease-in-out infinite alternate;
}

.wind-lines i:nth-child(1) { top: 18%; }
.wind-lines i:nth-child(2) { top: 25%; width: 67vw; animation-duration: 9s; animation-delay: -3s; opacity: 0.72; }
.wind-lines i:nth-child(3) { top: 34%; width: 59vw; animation-duration: 14s; animation-delay: -7s; opacity: 0.5; }
.wind-lines i:nth-child(4) { top: 54%; width: 80vw; animation-duration: 11s; animation-delay: -5s; opacity: 0.55; }
.wind-lines i:nth-child(5) { top: 66%; width: 61vw; animation-duration: 13s; animation-delay: -2s; opacity: 0.42; }

.hero-inner {
  position: relative;
  z-index: 2;
  min-height: max(820px, 100svh);
  display: flex;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 72px;
}

.hero-copy {
  width: min(720px, 58vw);
}

.eyebrow {
  margin: 0 0 24px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero-eyebrow {
  animation: rise-in 0.72s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.hero h1 {
  max-width: 760px;
  margin-bottom: 24px;
  color: var(--cream);
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: clamp(68px, 6.35vw, 100px);
  font-weight: 400;
  letter-spacing: -0.052em;
  line-height: 0.86;
  text-wrap: balance;
  animation: rise-in 0.82s 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-lead {
  max-width: 590px;
  margin-bottom: 30px;
  color: rgba(244, 235, 221, 0.86);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.55;
  animation: rise-in 0.76s 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
  animation: rise-in 0.76s 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.button {
  min-height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: var(--ink);
  background: var(--amber-bright);
}

.button-primary:hover {
  background: #f5bf70;
  box-shadow: 0 12px 36px rgba(218, 138, 59, 0.18);
}

.button-secondary {
  border-color: rgba(244, 235, 221, 0.56);
  background: rgba(8, 19, 15, 0.08);
}

.button-secondary:hover {
  border-color: var(--amber);
  background: rgba(218, 138, 59, 0.07);
}

.scroll-cue {
  position: absolute;
  right: 22px;
  bottom: 42px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(244, 235, 221, 0.5);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: rotate(90deg);
  transform-origin: right bottom;
}

.scroll-cue i {
  width: 52px;
  height: 1px;
  overflow: hidden;
  background: rgba(244, 235, 221, 0.2);
}

.scroll-cue i::after {
  content: "";
  display: block;
  width: 60%;
  height: 100%;
  background: var(--amber);
  animation: scroll-line 2s ease-in-out infinite;
}

.section-dark {
  position: relative;
  background: var(--ink);
}

.premise {
  padding: clamp(100px, 12vw, 180px) 0;
  border-top: 1px solid rgba(244, 235, 221, 0.08);
}

.premise-grid {
  display: grid;
  grid-template-columns: 0.55fr 2fr 0.8fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

/* The eyebrow is its own grid child: it fills the narrow 0.55fr label column so
   the heading and body copy get the wide 2fr column they were sized for. */
.premise-eyebrow {
  margin-bottom: 0;
  padding-top: 14px;
}

.premise h2 {
  margin-bottom: 38px;
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: clamp(48px, 5vw, 78px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.large-copy {
  max-width: 720px;
  margin-bottom: 0;
  color: rgba(244, 235, 221, 0.7);
  font-size: clamp(18px, 1.8vw, 25px);
  line-height: 1.55;
}

.premise-note {
  padding-top: 42px;
  border-top: 1px solid var(--amber);
}

.premise-note span {
  display: block;
  margin-bottom: 18px;
  color: var(--amber);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.premise-note p {
  margin-bottom: 0;
  color: var(--stone);
  font-size: 13px;
  line-height: 1.75;
}

.operating-model {
  padding: clamp(110px, 13vw, 190px) 0;
  color: var(--ink);
  background: var(--cream);
}

.section-heading {
  display: grid;
  grid-template-columns: 0.56fr 2.8fr;
  gap: clamp(32px, 5vw, 76px);
  margin-bottom: clamp(70px, 9vw, 122px);
}

.operating-model .eyebrow {
  color: #a4571f;
}

.section-heading h2 {
  max-width: 940px;
  margin: 0;
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: clamp(54px, 6vw, 88px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.94;
}

.model-list {
  border-top: 1px solid rgba(8, 19, 15, 0.24);
}

.model-row {
  display: grid;
  grid-template-columns: 0.4fr 1.05fr 1.5fr 44px;
  gap: clamp(22px, 3.5vw, 58px);
  align-items: start;
  min-height: 190px;
  padding: 38px 0;
  border-bottom: 1px solid rgba(8, 19, 15, 0.24);
  transition: padding 240ms ease, background 240ms ease;
}

.model-row:hover {
  padding-inline: 18px;
  background: rgba(218, 138, 59, 0.07);
}

.model-number {
  color: #a4571f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.model-row h3 {
  margin: -8px 0 0;
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: clamp(32px, 3vw, 48px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.model-row p {
  max-width: 590px;
  margin: 0;
  color: rgba(8, 19, 15, 0.68);
  font-size: 15px;
  line-height: 1.8;
}

.row-arrow {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(8, 19, 15, 0.32);
  font-size: 18px;
  transition: transform 220ms ease, background 220ms ease;
}

.model-row:hover .row-arrow {
  color: var(--cream);
  background: var(--ink);
  transform: rotate(-45deg);
}

.flagship {
  position: relative;
  padding: clamp(110px, 13vw, 190px) 0;
  color: var(--ink);
  background: var(--amber-bright);
}

.flagship::after {
  content: "FIRST PROPERTY";
  position: absolute;
  right: -20px;
  bottom: -56px;
  color: rgba(8, 19, 15, 0.055);
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: clamp(110px, 17vw, 280px);
  font-weight: 600;
  letter-spacing: -0.07em;
  line-height: 0.8;
  pointer-events: none;
  white-space: nowrap;
}

.flagship-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(70px, 11vw, 160px);
}

.flagship .eyebrow {
  color: rgba(8, 19, 15, 0.6);
}

.flagship h2 {
  margin-bottom: 0;
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: clamp(80px, 10vw, 154px);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.8;
}

.flagship-lead {
  margin-bottom: 44px;
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.flagship dl {
  margin: 0 0 44px;
  border-top: 1px solid rgba(8, 19, 15, 0.34);
}

.flagship dl > div {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 24px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(8, 19, 15, 0.26);
}

.flagship dt {
  color: rgba(8, 19, 15, 0.58);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.flagship dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.text-link,
.contact-email {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  font-weight: 700;
}

.text-link span,
.contact-email span {
  transition: transform 180ms ease;
}

.text-link:hover span,
.contact-email:hover span {
  transform: translate(3px, -3px);
}

.partners {
  padding: clamp(110px, 13vw, 190px) 0;
  color: var(--ink);
  background: var(--cream);
}

.partners-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(60px, 10vw, 140px);
}

.partners .eyebrow {
  color: #a4571f;
}

.partners h2 {
  margin-bottom: 0;
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: clamp(56px, 5.5vw, 84px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.94;
}

.partner-paths {
  border-top: 1px solid rgba(8, 19, 15, 0.25);
}

.partner-paths a {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 154px;
  padding: 30px 56px 30px 0;
  border-bottom: 1px solid rgba(8, 19, 15, 0.25);
  transition: padding 220ms ease, background 220ms ease;
}

.partner-paths a:hover {
  padding-left: 20px;
  background: rgba(218, 138, 59, 0.08);
}

.partner-paths span {
  color: #a4571f;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.partner-paths strong {
  max-width: 520px;
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: clamp(27px, 2.5vw, 38px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

/* Two of the three partner paths are mailto links. Without the address on the face
   of the row, a machine with no mail client set up gives the reader a dead click and
   no way to recover the address. */
.partner-paths small {
  color: rgba(8, 19, 15, 0.68);
  font-size: 12px;
  letter-spacing: 0.01em;
}

.partner-paths i {
  position: absolute;
  top: 50%;
  right: 4px;
  font-size: 22px;
  font-style: normal;
  transform: translateY(-50%);
  transition: transform 180ms ease;
}

.partner-paths a:hover i {
  transform: translate(4px, calc(-50% - 4px));
}

.contact {
  position: relative;
  overflow: hidden;
  padding: clamp(110px, 14vw, 210px) 0;
  /* The image layer that used to sit under this gradient is cancelled by tidal.css
     (".tidal-site .contact{background:transparent}") and never painted. The rule was
     removed 2026-08-04 with the matching dead rule on .hero-art above, and the file
     itself (harbour-hero.webp, 43,748 bytes) was deleted from the publish root on
     2026-08-11: nothing referenced it and it was answering 200 to anyone who asked. */
  background:
    linear-gradient(110deg, rgba(8, 19, 15, 0.98), rgba(11, 27, 42, 0.87));
}

.contact::after {
  content: "";
  position: absolute;
  right: -10%;
  bottom: -40%;
  width: 55vw;
  aspect-ratio: 1;
  border: 1px solid rgba(218, 138, 59, 0.25);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(218, 138, 59, 0.03), 0 0 0 140px rgba(218, 138, 59, 0.02);
}

.contact-layout {
  position: relative;
  z-index: 2;
}

.contact h2 {
  max-width: 960px;
  margin-bottom: 54px;
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: clamp(64px, 8vw, 120px);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.88;
}

.contact-email {
  color: var(--amber-bright);
  font-size: clamp(15px, 1.6vw, 21px);
}

/* Checkout says "sold by Rimu and Harbour Limited", so a ticket buyer who does not
   recognise the charge lands here, on a page that had no ticket link and no festival
   address. That is how a chargeback starts. */
.contact-note {
  max-width: 620px;
  margin: 34px 0 0;
  color: rgba(244, 235, 221, 0.62);
  font-size: 13px;
  line-height: 1.75;
}

.contact-note a {
  color: var(--amber-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.site-footer {
  padding: 74px 0 30px;
  background: #050d0a;
}

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 50px;
  padding-bottom: 70px;
}

.footer-top .brand-mark {
  font-size: 56px;
}

.footer-top p {
  max-width: 390px;
  margin: 0;
  color: rgba(244, 235, 221, 0.5);
  font-size: 13px;
  line-height: 1.7;
  text-align: right;
}

.footer-bottom {
  display: grid;
  /* Five children since the plain mailto fallback joined the row (the partner
     paths and the contact section now open the intake modal instead). */
  grid-template-columns: 1.3fr 1fr 1fr 1.3fr auto;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(244, 235, 221, 0.12);
  color: rgba(244, 235, 221, 0.62);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* :hover was the only state these two links had, and hover never fires on a phone,
   which is where they are hardest to hit. */
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: var(--amber);
}

.legal-page {
  min-height: 100svh;
  background: var(--cream);
  color: var(--ink);
}

.legal-shell {
  width: min(1040px, calc(100% - 48px));
  margin-inline: auto;
}

.legal-header {
  height: 88px;
  border-bottom: 1px solid rgba(8, 19, 15, 0.18);
  background: rgba(244, 235, 221, 0.92);
  backdrop-filter: blur(14px);
}

.legal-header .legal-shell {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.legal-header .brand-mark {
  font-size: 38px;
}

.legal-header .brand-divider {
  height: 34px;
  background: rgba(8, 19, 15, 0.28);
}

.legal-back {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-content {
  padding: clamp(80px, 10vw, 130px) 0;
}

.legal-title {
  padding-bottom: 72px;
  border-bottom: 1px solid rgba(8, 19, 15, 0.22);
}

.legal-title .eyebrow {
  color: #a4571f;
}

.legal-title h1 {
  max-width: 820px;
  margin-bottom: 26px;
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: clamp(66px, 9vw, 116px);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.86;
}

.legal-title > p:last-child {
  margin: 0;
  color: rgba(8, 19, 15, 0.5);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.legal-intro {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 70px;
  padding: 64px 0 90px;
}

.legal-intro > p {
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: clamp(27px, 3vw, 38px);
  letter-spacing: -0.03em;
  line-height: 1.24;
}

.legal-intro aside {
  align-self: start;
  padding: 24px 0;
  border-top: 1px solid #a4571f;
  border-bottom: 1px solid rgba(8, 19, 15, 0.2);
  color: rgba(8, 19, 15, 0.65);
  font-size: 12px;
  line-height: 1.75;
}

.legal-intro aside a,
.legal-section a,
.legal-contact a {
  color: #8d4819;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.legal-section {
  display: grid;
  grid-template-columns: 0.45fr 1.55fr;
  gap: 70px;
  padding: 74px 0;
  border-top: 1px solid rgba(8, 19, 15, 0.24);
}

.legal-section-label {
  padding-top: 7px;
  color: rgba(8, 19, 15, 0.48);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.legal-section h2,
.legal-contact h2 {
  margin-bottom: 50px;
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: clamp(50px, 5.5vw, 76px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.94;
}

.legal-section h3 {
  margin: 46px 0 13px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal-section p,
.legal-section li {
  color: rgba(8, 19, 15, 0.68);
  font-size: 14px;
  line-height: 1.85;
}

.legal-section ul {
  padding-left: 20px;
}

.legal-contact {
  margin-top: 50px;
  padding: 70px;
  background: var(--ink);
  color: var(--cream);
}

.legal-contact h2 {
  max-width: 680px;
  margin-bottom: 28px;
}

.legal-contact > p:not(.eyebrow) {
  color: rgba(244, 235, 221, 0.58);
  font-size: 12px;
}

.legal-contact a {
  display: inline-block;
  margin-top: 12px;
  color: var(--amber-bright);
}

.legal-footer {
  padding: 28px 0;
  color: rgba(244, 235, 221, 0.62);
  background: #050d0a;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal-footer .legal-shell {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.reveal {
  animation: reveal-up both linear;
  animation-timeline: view();
  animation-range: entry 12% cover 34%;
}

@keyframes header-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes art-in {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1.015); }
}

@keyframes wind {
  from { transform: translate(0, 0) rotate(9deg); }
  to { transform: translate(-24px, 4px) rotate(9deg); }
}

@keyframes scroll-line {
  0%, 100% { transform: translateX(-110%); }
  50% { transform: translateX(165%); }
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  :root { --shell: min(100% - 48px, 1280px); }
  .desktop-nav { gap: 20px; }
  .desktop-nav a { font-size: 13px; }
  .brand-divider { margin-inline: 20px 18px; }
  .premise-grid { grid-template-columns: 0.4fr 1.8fr 0.8fr; }
}

@media (max-width: 860px) {
  :root { --shell: min(100% - 36px, 1280px); }
  .site-header { height: 76px; }
  .brand-mark { font-size: 39px; }
  .brand-divider { height: 36px; margin-inline: 15px 14px; }
  .brand-name { font-size: 14px; }
  .desktop-nav { display: none; }
  .mobile-nav { display: block; position: relative; }
  .mobile-nav summary {
    width: 48px;
    height: 48px;
    display: grid;
    place-content: center;
    gap: 7px;
    cursor: pointer;
    list-style: none;
  }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary span { width: 25px; height: 1px; background: var(--cream); transition: transform 180ms ease; }
  .mobile-nav[open] summary span:first-child { transform: translateY(4px) rotate(45deg); }
  .mobile-nav[open] summary span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mobile-nav nav {
    position: absolute;
    top: 60px;
    right: 0;
    width: min(310px, calc(100vw - 36px));
    display: grid;
    padding: 18px;
    border: 1px solid rgba(244, 235, 221, 0.18);
    /* Solid, not 0.96. The panel sits directly over the 82px hero headline, and
       backdrop-filter is not honoured here (the blur never lands, verified in the
       browser at 375px: the letterforms behind the panel stay sharp), so the four
       percent that showed through read as ghost text across every menu item.
       Same colour, full alpha. The blur stays as a progressive nicety. */
    background: #08130f;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
  }
  .mobile-nav nav a { min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid rgba(244, 235, 221, 0.09); }
  .mobile-nav nav a:last-child { border-bottom: 0; }
  .hero, .hero-inner { min-height: max(760px, 100svh); }
  .hero-inner { padding-top: 112px; align-items: center; }
  .hero-copy { width: min(680px, 92vw); }
  .hero h1 { font-size: clamp(58px, 11vw, 82px); }
  .hero-shade { background: linear-gradient(90deg, rgba(8,19,15,.96) 0%, rgba(8,19,15,.7) 70%, rgba(8,19,15,.25) 100%), linear-gradient(180deg, rgba(8,19,15,.35), transparent 48%, rgba(8,19,15,.82)); }
  .hero-art { background-position: 62% center; }
  .scroll-cue { display: none; }
  .premise-grid { grid-template-columns: 1fr; }
  .premise-eyebrow { padding-top: 0; }
  .premise-note { max-width: 460px; }
  .section-heading { grid-template-columns: 1fr; }
  .model-row { grid-template-columns: 42px 0.95fr 1.35fr 42px; gap: 20px; }
  .flagship-layout, .partners-layout { grid-template-columns: 1fr; }
  .flagship-title { display: grid; grid-template-columns: 0.5fr 1.5fr; gap: 30px; align-items: end; }
  .flagship-story { max-width: 750px; margin-left: auto; }
  .partner-paths { max-width: 760px; }
  .footer-bottom { grid-template-columns: 1fr 1fr; }
  .legal-intro { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 560px) {
  :root { --shell: calc(100% - 30px); }
  .brand-name { display: none; }
  .brand-divider { display: none; }
  .hero, .hero-inner { min-height: 780px; }
  .hero-inner { padding-top: 98px; padding-bottom: 40px; align-items: center; }
  .hero h1 { font-size: clamp(50px, 15.8vw, 68px); line-height: 0.9; }
  .hero h1 br { display: none; }
  .hero-lead { max-width: 95%; font-size: 16px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; max-width: 420px; }
  .button { width: 100%; min-height: 58px; }
  .hero-art { background-position: 69% center; }
  .wind-lines { opacity: 0.55; }
  .premise { padding-block: 96px; }
  .premise h2 { font-size: clamp(44px, 13vw, 62px); }
  .operating-model, .flagship, .partners, .contact { padding-block: 96px; }
  .section-heading { margin-bottom: 58px; }
  .section-heading h2 { font-size: clamp(46px, 13vw, 66px); }
  .model-row { grid-template-columns: 34px 1fr 34px; min-height: 0; padding: 28px 0; }
  .model-row p { grid-column: 2 / 4; }
  .model-row h3 { font-size: 36px; }
  .row-arrow { width: 34px; height: 34px; }
  .flagship-title { display: block; }
  .flagship h2 { font-size: clamp(76px, 25vw, 118px); }
  .flagship-lead { font-size: 31px; }
  .flagship dl > div { grid-template-columns: 1fr; gap: 4px; }
  .partners h2 { font-size: clamp(48px, 14vw, 66px); }
  .partners-layout { gap: 70px; }
  .partner-paths a { min-height: 140px; }
  .contact h2 { font-size: clamp(58px, 17vw, 82px); }
  .contact-email { font-size: 13px; word-break: break-word; }
  .footer-top { display: grid; padding-bottom: 50px; }
  .footer-top p { text-align: left; }
  .footer-bottom { grid-template-columns: 1fr; gap: 14px; }
  .legal-shell { width: calc(100% - 30px); }
  .legal-header { height: 72px; }
  .legal-header .brand-divider, .legal-header .brand-name { display: none; }
  .legal-content { padding-block: 72px; }
  .legal-title { padding-bottom: 50px; }
  .legal-title h1 { font-size: clamp(60px, 20vw, 84px); }
  .legal-intro { padding-block: 52px 70px; }
  .legal-section { grid-template-columns: 1fr; gap: 30px; padding-block: 58px; }
  .legal-section h2 { font-size: 52px; margin-bottom: 36px; }
  .legal-contact { padding: 48px 24px; }
  .legal-footer .legal-shell { display: grid; }
  /* Phone sized targets. Measured at 375x812 on 2026-08-11: the two footer links were
     345x14, "Visit nzpiefest.co.nz" 170x31 and "office@rimuandharbour.com" 211x30, all
     under the 44px WCAG 2.5.5 target. The footer type was also 9px uppercase at 0.12em
     tracking, the smallest on either page. Size and padding only: tracking, weight,
     colour, layout and the underline position are all unchanged. */
  .footer-bottom, .legal-footer { font-size: 12px; }
  .footer-bottom a, .legal-footer a { display: inline-block; padding: 14px 0; }
  .text-link, .contact-email { padding-top: 15px; }
  /* Same measurement found two more standalone controls short on /policies: the header
     link back to the company at 157x18 and the contact address in the dark panel at
     241x26. The links that sit inside a sentence are left alone, 2.5.5 exempts them. */
  .legal-back, .legal-contact a { padding-block: 14px; }
}

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

/* ---- NZ PIE FEST NOTICE BAR (added 2026-08-25) ------------------------------
   Sticky, in flow, direct child of <body> on both pages, so the first paint
   already includes it: rh-connect.js decides shown or dismissed in the <head>,
   before the body renders, which is what prevents any content jump. On the
   homepage the fixed .site-header drops by --promo-h while the bar is open. */
.promo-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: none;
  height: var(--promo-h);
  background: var(--amber-bright);
  color: var(--ink);
}

html.promo-open .promo-bar {
  display: flex;
}

html.promo-open .site-header {
  top: var(--promo-h);
}

html.promo-open main section[id] {
  scroll-margin-top: calc(88px + var(--promo-h));
}

.promo-link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-inline: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.promo-copy {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.promo-copy strong {
  font-weight: 800;
}

.promo-link:hover .promo-copy {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.promo-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--cream);
  font-size: 12px;
  font-weight: 700;
}

.promo-cta i {
  font-style: normal;
  transition: transform 160ms ease;
}

.promo-link:hover .promo-cta i {
  transform: translate(2px, -2px);
}

.promo-close {
  flex: none;
  width: var(--promo-h);
  height: var(--promo-h);
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.promo-close:hover {
  background: rgba(8, 19, 15, 0.12);
}

/* The bar ground is amber, where the site wide amber focus ring disappears. */
.promo-bar :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}

/* ---- PARTNER INTAKE (added 2026-08-25) --------------------------------------
   The two partner path mailto rows and the big contact CTA now open the intake
   modal; the plain mailto fallback lives in the footer. Buttons restyled to sit
   in the same grid the anchors used, same measurements. */
.partner-paths button {
  position: relative;
  display: grid;
  gap: 10px;
  width: 100%;
  min-height: 154px;
  margin: 0;
  padding: 30px 56px 30px 0;
  border: 0;
  border-bottom: 1px solid rgba(8, 19, 15, 0.25);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: padding 220ms ease, background 220ms ease;
}

.partner-paths button:hover {
  padding-left: 20px;
  background: rgba(218, 138, 59, 0.08);
}

.partner-paths button:hover i {
  transform: translate(4px, calc(-50% - 4px));
}

.contact-cta {
  font-family: inherit;
  cursor: pointer;
}

.footer-bottom .footer-mail {
  text-transform: none;
  letter-spacing: 0.06em;
}

.pi-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 19, 15, 0.66);
  backdrop-filter: blur(6px);
}

.pi-overlay[hidden] {
  display: none;
}

html.pi-lock,
html.pi-lock body {
  overflow: hidden;
}

.pi-dialog {
  width: min(620px, 100%);
  max-height: min(780px, calc(100svh - 40px));
  overflow-y: auto;
  padding: clamp(26px, 4vw, 44px);
  border-radius: 6px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}

/* Cream ground again: the amber ring fails contrast here, the deep amber the
   cream sections already use for eyebrows passes. */
.pi-dialog :focus-visible {
  outline: 2px solid #a4571f;
  outline-offset: 3px;
}

.pi-head {
  position: relative;
  padding-right: 52px;
}

.pi-head .eyebrow {
  margin-bottom: 14px;
  color: #a4571f;
}

.pi-title {
  margin: 0;
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.pi-title:focus {
  outline: none;
}

.pi-close {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(8, 19, 15, 0.3);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.pi-close:hover {
  background: rgba(8, 19, 15, 0.08);
}

.pi-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 26px;
}

.pi-progress-text {
  margin: 0;
  color: rgba(8, 19, 15, 0.55);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pi-progress-track {
  flex: 1;
  display: flex;
  gap: 6px;
}

.pi-progress-track i {
  flex: 1;
  height: 3px;
  background: rgba(8, 19, 15, 0.16);
}

.pi-progress-track i.on {
  background: #a4571f;
}

.pi-step-heading {
  display: block;
  margin: 0 0 20px;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pi-step-heading:focus {
  outline: none;
}

.pi-roles {
  margin: 0;
  padding: 0;
  border: 0;
}

.pi-role-list {
  display: grid;
  gap: 12px;
}

.pi-role {
  position: relative;
  display: block;
  cursor: pointer;
}

/* Visually hidden, still focusable, so the radios keep native keyboard and
   screen reader behaviour while the card takes the styling. */
.pi-role input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.pi-role-body {
  display: grid;
  gap: 6px;
  min-height: 76px;
  padding: 16px 18px;
  border: 1px solid rgba(8, 19, 15, 0.3);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  transition: border-color 160ms ease, background 160ms ease;
}

.pi-role:hover .pi-role-body {
  border-color: rgba(8, 19, 15, 0.6);
}

.pi-role-body strong {
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.pi-role-body > span {
  color: rgba(8, 19, 15, 0.66);
  font-size: 12.5px;
  line-height: 1.6;
}

.pi-role input:checked + .pi-role-body {
  border-color: #a4571f;
  background: rgba(218, 138, 59, 0.14);
  box-shadow: inset 0 0 0 1px #a4571f;
}

.pi-role input:focus-visible + .pi-role-body {
  outline: 2px solid #a4571f;
  outline-offset: 3px;
}

.pi-field {
  margin-bottom: 18px;
}

.pi-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pi-optional {
  color: rgba(8, 19, 15, 0.5);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
}

/* 16px inputs on purpose: below that iOS zooms the page on focus. */
.pi-field input,
.pi-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(8, 19, 15, 0.34);
  border-radius: 4px;
  background: #fffdf9;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
}

.pi-field textarea {
  min-height: 140px;
  resize: vertical;
}

.pi-field input:focus-visible,
.pi-field textarea:focus-visible {
  border-color: #a4571f;
  outline-offset: 2px;
}

.pi-field input[aria-invalid="true"],
.pi-field textarea[aria-invalid="true"] {
  border-color: #8f2f1f;
}

.pi-error {
  margin: 8px 0 0;
  color: #8f2f1f;
  font-size: 12.5px;
  font-weight: 600;
}

.pi-error:empty {
  margin: 0;
}

.pi-form-error {
  margin-top: 14px;
}

.pi-actions {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 28px;
}

.pi-btn {
  min-height: 48px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.pi-btn:hover {
  transform: translateY(-1px);
}

.pi-btn-solid {
  background: var(--ink);
  color: var(--cream);
}

.pi-btn-solid:hover {
  background: #12241d;
}

.pi-btn-ghost {
  border-color: rgba(8, 19, 15, 0.35);
  background: transparent;
  color: var(--ink);
}

.pi-btn-ghost:hover {
  border-color: var(--ink);
}

.pi-btn[disabled] {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* The honeypot. Off screen, hidden from assistive tech, unreachable by Tab:
   only a bot filling every field it can parse will ever write into it. */
.pi-hp {
  position: absolute;
  left: -9999px;
}

.pi-success p {
  margin: 0 0 6px;
  color: rgba(8, 19, 15, 0.72);
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 880px) {
  .promo-mid { display: none; }
}

@media (max-width: 560px) {
  .promo-tail { display: none; }
  .promo-link { gap: 10px; font-size: 12px; }
  .promo-cta { padding: 0 12px; }
  .partner-paths button { min-height: 140px; }
  .pi-overlay { padding: 12px; }
  .pi-actions { margin-top: 22px; }
  .pi-btn { flex: 1; padding: 0 16px; }
}

/* ---- EVENT INFRASTRUCTURE (added 2026-08-25) --------------------------------
   Dark showcase of the in house event platform, between the operating model and
   the partnership paths. Same vocabulary as the neighbouring sections: label
   column heading like .premise-grid, cards built like .premise-note (thin amber
   rule, uppercase label, serif heading). The CTA is a real <button> opening the
   partner intake modal, so it restores font and cursor the way .contact-cta
   does; the Tidal Cinema veil for this section lives in tidal.css. */
.infrastructure {
  padding: clamp(110px, 13vw, 190px) 0;
  border-top: 1px solid rgba(244, 235, 221, 0.08);
}

.infra-heading {
  display: grid;
  grid-template-columns: 0.56fr 2.8fr;
  gap: clamp(32px, 5vw, 76px);
  margin-bottom: clamp(64px, 8vw, 110px);
}

.infra-heading .eyebrow {
  margin-bottom: 0;
  padding-top: 14px;
}

.infra-heading h2 {
  margin: 0 0 28px;
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: clamp(54px, 6vw, 88px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.94;
}

.infra-intro {
  max-width: 680px;
  margin: 0;
  color: rgba(244, 235, 221, 0.7);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
}

.infra-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 4vw, 60px);
}

.infra-card {
  padding-top: 34px;
  border-top: 1px solid var(--amber);
}

.infra-card span {
  display: block;
  margin-bottom: 18px;
  color: var(--amber);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.infra-card h3 {
  margin: 0 0 18px;
  max-width: 330px;
  font-family: var(--font-display), "Iowan Old Style", Baskerville, serif;
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.infra-card p {
  margin: 0;
  color: rgba(244, 235, 221, 0.62);
  font-size: 14px;
  line-height: 1.8;
}

.infra-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 40px;
  margin-top: clamp(60px, 7vw, 100px);
}

.infra-cta .button {
  font-family: inherit;
  cursor: pointer;
}

.infra-cta-note {
  margin: 0;
  color: rgba(244, 235, 221, 0.55);
  font-size: 13px;
  line-height: 1.7;
}

@media (max-width: 1100px) {
  .infra-heading { grid-template-columns: 0.4fr 1.8fr; }
}

@media (max-width: 860px) {
  .infra-heading { grid-template-columns: 1fr; gap: 0; }
  .infra-heading .eyebrow { margin-bottom: 24px; padding-top: 0; }
  .infra-grid { grid-template-columns: 1fr; gap: 40px; }
  .infra-card h3 { max-width: none; }
}

@media (max-width: 560px) {
  .infrastructure { padding-block: 96px; }
  .infra-heading h2 { font-size: clamp(46px, 13vw, 66px); }
  .infra-card h3 { font-size: 30px; }
  .infra-cta .button { width: 100%; min-height: 58px; }
}