:root {
  --neutral: #e7e2da;
  --sand: #d4c8b9;
  --taupe: #b6a796;
  --terracotta: #a85335;
  --wood: #76533f;
  --ink: #11100f;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--neutral);
  color: var(--ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

.landing {
  position: relative;
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .48), transparent 44%),
    var(--neutral);
}

.landingViewport {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
}

.landingViewport.cookieOpen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.cookieOpen .heroFrame { min-height: 0; }

.cookieBanner {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid rgba(17, 16, 15, .1);
  background: rgba(231, 226, 218, .78);
  padding: .65rem clamp(1.35rem, 4vw, 4rem);
  backdrop-filter: blur(16px);
}

.cookieBannerInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
}

.cookieMessage {
  margin: 0;
  color: rgba(17, 16, 15, .64);
  font-size: clamp(.64rem, .72vw, .75rem);
  line-height: 1.45;
}

.cookieTitle {
  margin-right: .38rem;
  color: var(--ink);
  font-weight: 680;
}

.cookieActions {
  display: flex;
  flex: 0 0 auto;
  gap: .4rem;
}

.cookieButton {
  appearance: none;
  min-width: 4rem;
  border: 1px solid rgba(17, 16, 15, .22);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  padding: .38rem .72rem;
  font: inherit;
  font-size: clamp(.61rem, .66vw, .69rem);
  font-weight: 620;
  line-height: 1;
  cursor: pointer;
}

.cookieAccept {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--neutral);
}

.cookieButton:hover { border-color: var(--terracotta); }
.cookieAccept:hover { background: var(--terracotta); }

.cookieButton:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.heroFrame {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: clamp(2rem, 7vw, 6rem) 1.5rem;
}

.ambient {
  position: absolute;
  z-index: -3;
  border-radius: 999px;
  filter: blur(90px);
  opacity: .48;
  will-change: transform;
}

.ambientOne {
  width: 65vw;
  height: 52vw;
  top: -26vw;
  left: -13vw;
  background: var(--sand);
  animation: drift-one 38s ease-in-out infinite alternate;
}

.ambientTwo {
  width: 48vw;
  height: 48vw;
  right: -18vw;
  bottom: -20vw;
  background: color-mix(in srgb, var(--terracotta) 58%, var(--taupe));
  opacity: .23;
  animation: drift-two 44s ease-in-out infinite alternate;
}

.ambientThree {
  width: 34vw;
  height: 36vw;
  right: 5vw;
  top: 0;
  background: var(--wood);
  opacity: .13;
  animation: drift-three 34s ease-in-out infinite alternate;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.content {
  width: min(100%, 49rem);
  text-align: center;
}

.siteFooter {
  position: absolute;
  right: clamp(1.35rem, 4vw, 4rem);
  bottom: clamp(1.5rem, 4vh, 3rem);
  left: clamp(1.35rem, 4vw, 4rem);
  display: flex;
  align-items: center;
}

.wordmark {
  font-size: clamp(.78rem, .9vw, .9rem);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1;
  text-transform: uppercase;
  animation: arrive .7s .32s cubic-bezier(.22, 1, .36, 1) both;
}

.footerIdentity {
  display: grid;
  gap: .55rem;
}

.legal {
  margin: 0;
  color: rgba(17, 16, 15, .54);
  font-size: clamp(.56rem, .6vw, .64rem);
  font-weight: 500;
  letter-spacing: .055em;
  line-height: 1.2;
  animation: arrive .7s .38s cubic-bezier(.22, 1, .36, 1) both;
}

.accent { color: var(--terracotta); }

h1 {
  margin: 0;
  font-size: clamp(2.25rem, 5.15vw, 4.85rem);
  font-weight: 600;
  letter-spacing: -.052em;
  line-height: 1.02;
  text-wrap: balance;
  animation: arrive .8s .12s cubic-bezier(.22, 1, .36, 1) both;
}

.strapline {
  max-width: 44rem;
  margin: clamp(2rem, 5vh, 3.25rem) auto 0;
  color: rgba(17, 16, 15, .78);
  font-size: clamp(.96rem, 1.35vw, 1.1rem);
  font-weight: 400;
  line-height: 1.72;
  text-wrap: pretty;
  animation: arrive .8s .24s cubic-bezier(.22, 1, .36, 1) both;
}

.strapline > span { display: block; }

.straplineFinal {
  margin-top: .55rem;
  font-weight: 560;
}

.privacyLink,
.privacyClose,
.footerLink {
  appearance: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.privacyLink {
  padding: 0;
  background: transparent;
  text-decoration: none;
}

.footerLink,
.wordmarkHome {
  color: inherit;
  text-decoration: none;
}

.wordmarkHome {
  display: inline-flex;
  width: fit-content;
}

.privacyLink:hover,
.privacyLink:focus-visible,
.footerLink:hover,
.footerLink:focus-visible,
.wordmarkHome:hover,
.wordmarkHome:focus-visible,
.privacyContent a:hover,
.privacyContent a:focus-visible {
  color: var(--terracotta);
}

.privacyLink:focus-visible,
.footerLink:focus-visible,
.wordmarkHome:focus-visible,
.privacyClose:focus-visible,
.privacyContent a:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.privacyPanel {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(17, 16, 15, .12);
  background: rgba(231, 226, 218, .94);
  padding: clamp(3rem, 7vw, 6rem) clamp(1.35rem, 7vw, 7rem);
}

.privacyContent {
  width: min(100%, 48rem);
  color: rgba(17, 16, 15, .72);
  font-size: clamp(.72rem, .86vw, .84rem);
  line-height: 1.7;
}

.privacyContent h2 {
  margin: 0 0 1.5rem;
  color: var(--ink);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 650;
  letter-spacing: -.02em;
}

.privacyContent p { margin: 0 0 1rem; }

.privacyContent a {
  color: inherit;
  text-decoration-thickness: .08em;
  text-underline-offset: .2em;
}

.privacyClose {
  margin-top: .7rem;
  padding: .55rem 0;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .22em;
}

.privacyClose:hover { color: var(--terracotta); }

.demosFrame {
  place-items: start center;
  padding-top: clamp(5.5rem, 11vh, 8rem);
  padding-bottom: clamp(8rem, 18vh, 12rem);
}

.demosContent {
  width: min(66.666vw, 76rem);
}

.demosHeading {
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

.demosHeading h1 {
  font-size: clamp(2.5rem, 4.2vw, 4.5rem);
  text-align: left;
}

.demosEyebrow {
  margin: 0 0 .7rem;
  color: var(--terracotta);
  font-size: clamp(.62rem, .7vw, .72rem);
  font-weight: 680;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.passwordGate {
  width: min(100%, 25rem);
  animation: arrive .7s .2s cubic-bezier(.22, 1, .36, 1) both;
}

.passwordGate label {
  display: block;
  margin-bottom: .65rem;
  color: rgba(17, 16, 15, .62);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .025em;
}

.passwordRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border-bottom: 1px solid rgba(17, 16, 15, .36);
}

.passwordRow input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: .72rem .2rem .72rem 0;
  font: inherit;
  font-size: 1rem;
  outline: 0;
}

.passwordRow:focus-within { border-color: var(--terracotta); }

.passwordRow button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: .72rem 0 .72rem 1rem;
  font: inherit;
  font-size: .74rem;
  font-weight: 680;
  cursor: pointer;
}

.passwordRow button:hover,
.passwordRow button:focus-visible { color: var(--terracotta); }

.passwordRow button:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.passwordError {
  margin: .65rem 0 0;
  color: var(--terracotta);
  font-size: .7rem;
}

.notFoundFrame { place-items: center; }

.notFoundContent {
  width: min(100%, 42rem);
  text-align: center;
}

.notFoundContent h1 { font-size: clamp(2.5rem, 5vw, 4.75rem); }

.returnHome {
  display: inline-block;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  color: rgba(17, 16, 15, .72);
  font-size: clamp(.72rem, .82vw, .82rem);
  font-weight: 620;
  text-decoration: none;
}

.returnHome:hover,
.returnHome:focus-visible { color: var(--terracotta); }

.returnHome:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes drift-one {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(18%, 14%, 0) scale(1.08); }
}

@keyframes drift-two {
  from { transform: translate3d(5%, 4%, 0) scale(1.05); }
  to { transform: translate3d(-22%, -15%, 0) scale(.93); }
}

@keyframes drift-three {
  from { transform: translate3d(3%, -7%, 0); }
  to { transform: translate3d(-20%, 22%, 0); }
}

@media (max-width: 640px) {
  .heroFrame { padding: 2rem 1.35rem 5rem; }
  .cookieBanner { padding-block: .72rem; }
  .cookieBannerInner { align-items: flex-start; gap: .75rem; }
  .cookieMessage { max-width: 17rem; }
  .cookieActions { gap: .3rem; }
  .cookieButton { min-width: auto; padding-inline: .58rem; }
  h1 { font-size: clamp(2.25rem, 11.5vw, 3rem); }
  .strapline { max-width: 32rem; line-height: 1.64; }
  .ambient { filter: blur(64px); }
  .ambientOne { width: 110vw; height: 90vw; }
  .ambientTwo { width: 90vw; height: 90vw; }
  .ambientThree { width: 70vw; height: 80vw; }
  .demosFrame { padding-top: 4rem; padding-bottom: 9rem; }
  .demosContent { width: 100%; }
  .demosHeading { margin-bottom: 2rem; }
  .legal { max-width: 21rem; line-height: 1.5; }
}

@media (min-width: 1024px) {
  .content { width: min(100%, 54rem); }
  .strapline { max-width: 48rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient, .wordmark, .legal, h1, .strapline { animation: none; }
  html:focus-within { scroll-behavior: auto; }
}