/**
 * Override layer for the ported Squarespace replica.
 * The original site CSS lives in /sqs/assets/static1.squarespace.com/*.css.
 * Everything here patches what was previously injected at runtime by
 * Squarespace's visitor JS (palette colors, header theme) and adapts the
 * ported DOM to this app's shell.
 */

:root {
  /* Site palette — sampled from the live site (pink accent; dark navy canvas).
     The other palette slots already carry the correct defaults in site.css
     (white #FAFAFA, light #FFF, dark #000D2F). */
  --accent-hsl: 326.02, 100%, 67.45%;
}

/* Squarespace sets scroll padding only via JS; smooth-ish anchor is fine */
html {
  scroll-behavior: smooth;
}

/* ── Reveal animations (port of Squarespace's global entrance animation:
      fade + 0.9 scale, 0.65s, staggered per block within a section) ── */
.preFade,
.preScale,
.preSlide,
.preClip {
  opacity: 0;
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: 0.65s;
}
.preScale {
  transform: scale(0.9);
}
.preFade.in,
.preScale.in,
.preSlide.in {
  opacity: 1;
  transform: none;
}
.preClip.in {
  opacity: 1;
}

/* Body-level base (the Squarespace theme was generated for body classes the
   saved page carries; replicate the important bits) */
.replica-body,
.sqs-button-element--primary,
.sqs-button-element--secondary,
.sqs-button-element--tertiary {
  font-family: "Space Grotesk", sans-serif;
}

/* ─── React replica header (matches the live site's solid header) ─── */
.ne-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: calc(1.1vw * 2 + 24px);
  background-color: hsla(223.4, 100%, 9.22%, 1);
}
/* Squarespace's visitor JS applies background-image "fx" effects then flips
   visibility; the ported page ships the plain image, so enable it. */
.background-image-fx {
  visibility: visible !important;
}

/* Squarespace's core CSS hides .content-wrapper behind a 2s JS-driven
   "hideContent" keyframe; the replica's own reveal system (useReveal) does
   the per-block stagger instead, so disable the wrapper-level animation. */
.content-wrapper {
  animation: none !important;
}

/* The Squarespace core hides header/footer until its visitor JS boots
   (hideContent keyframe); we render SSR-first, so expose them. */
header.ne-header,
footer.sections,
footer .page-section,
main,
.content-wrapper {
  animation: none !important;
}
.ne-header {
  opacity: 1 !important;
}

/* Squarespace's visitor JS measures the header and sets --header-height; the
   first page section pads by it (site.css). Provide the same value. */
:root {
  --header-height: calc(2.2vw + 24px);
}

/* The original site renders the h1 "text highlight" via its TextShape
   (SVG stroke) script: a black bar under each line at the line-box bottom.
   Emulated with a thick black text-decoration line on the span. */
.sqs-html-content .sqsrte-text-highlight {
  text-decoration: underline;
  text-decoration-color: #000000;
  text-decoration-thickness: max(3px, 0.074em);
  text-underline-offset: 0.4em;
}
.sqsrte-text-highlight a:link,
.sqsrte-text-highlight a:visited {
  text-decoration: underline;
  text-decoration-color: #000000;
}

/* Shape blocks: the original site builds their SVG paths at runtime via
   website.components.shape.visitor.js; on the ported page the shape
   container itself carries the fill + corner radius. */
.sqs-shape-block-container {
  background-color: var(--shape-block-background-color, transparent);
  border-radius: 20px;
  width: 100%;
  height: 100%;
}
.sqs-shape path {
  fill: var(--shape-block-background-color, transparent);
}

/* Tailwind preflight zeroes blockquote margins; the Squarespace theme relies
   on the UA default (1em 40px) for the benefit-card text insets. */
.sqs-html-content blockquote {
  margin: 1em 40px;
  padding: 0;
}

/* The stats h1 (scaled text) is resized at runtime to fill its block; give it
   the live site's white underline bar (hero keeps the black bars). */
#block-9087a508e6193428f71e .sqsrte-text-highlight {
  text-decoration-color: #fafafa;
  text-decoration-thickness: max(1px, 0.033em);
  text-underline-offset: 0.09em;
}

/* ── /contact-1 form (measured live: mono 16px labels #FFF, transparent
      pill inputs, mono 19.456px, black full-width SEND MESSAGE pill) ── */
.ne-form-label {
  display: block;
  font-family: "Space Mono", monospace;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  padding-bottom: 2px;
  margin-bottom: 8px;
}
.ne-form-required {
  display: inline;
  padding-left: 0.35em;
}
.ne-form-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: "Space Mono", monospace;
  font-size: 19.456px;
  line-height: 29.184px;
  color: #000000;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 24.2614px;
  padding: 5px 10px;
}
.ne-form-input:focus {
  outline: none;
  border-color: rgba(0, 0, 0, 0.35);
}
.ne-form-textarea {
  resize: vertical;
  min-height: 96px;
  border-radius: 24.2614px;
}
.ne-form-submit {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: "Space Grotesk", sans-serif;
  font-size: 20.32px;
  font-weight: 700;
  letter-spacing: 2.032px;
  text-transform: uppercase;
  color: rgb(250, 250, 250);
  background-color: #000000;
  border: 0;
  border-radius: 300px;
  padding: 24px 35.2px;
  cursor: pointer;
}
.ne-form-submit:hover {
  opacity: 0.92;
}
.ne-form-error {
  font-family: "Space Mono", monospace;
  font-size: 14px;
  color: #cc3b3b;
  margin: 0;
}

/* The original visitor JS tags images with data-component-layout-flow="normal"
   and computes container sizes; replicate the settled fit-mode state. */
.sqs-block[data-definition-name="website.components.imageFluid"]
  .design-layout-fluid.image-component-container-fit
  .fluid-image-container {
  --image-component-container-width: initial;
  --image-component-container-height: initial;
}
.sqs-block[data-definition-name="website.components.imageFluid"]
  .design-layout-fluid.image-component-container-fit
  .fluid-image-container
  .content-fit
  img {
  aspect-ratio: var(--image-component-native-aspect-ratio);
  position: static;
}

/* The live site's runtime maps the maxPageWidth tweak onto the fluid grid's
   site-max-width var (site.css only carries the 1657px value as
   --maxPageWidth). Without this the grid caps content at 1500px on wide
   viewports, unlike the original. */
:root {
  --sqs-site-max-width: 1657px;
}

/* Squarespace's visitor JS also rewrites --container-width on every fluid
   grid (measured live: min(1657px, 100vw - 2*1.5vw - inset)); the static
   fallback subtracts 4vw gutters instead, which shrinks row heights on
   narrower viewports. Replicate the live value. */
.fluid-engine {
  --container-width: min(
    var(--sqs-site-max-width, 1657px),
    calc(100vw - (var(--pagePadding, 1.5vw) * 2) - var(--inset-padding, 0px))
  );
}

/* Squarespace's header mobile breakpoint: max-width 799px */
@media (max-width: 799px) {
  .ne-header {
    height: calc(6vw * 2 + 20px);
  }
  .ne-header img {
    height: 20px !important; /* the header renders the logo inline at 24px otherwise */
  }
  :root {
    --header-height: calc(6vw * 2 + 20px);
  }
}