/* ============================================================
   SPEED PACK — design system
   Because speed is the product itself.
   Tokens, base, components. Layout utilities come from Tailwind.
   ============================================================ */

:root {
  --c-blue: #0049a5;
  --c-blue-deep: #00397f;
  --c-sky: #9fc0e8;
  --c-ink: #0d1321;
  --c-ink-2: #121b2f;
  --c-white: #ffffff;
  --c-paper: #f4f7fb;
  --line-light: rgba(13, 19, 33, 0.1);
  --line-dark: rgba(255, 255, 255, 0.14);
  --shadow-soft: 0 20px 60px -20px rgba(13, 19, 33, 0.25);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.3s;
  --radius: 1rem;
  --section-pad: clamp(4.5rem, 9vw, 8rem);
}

/* ---------- base ---------- */

html {
  scroll-behavior: auto; /* Lenis owns smooth scroll; native jump as fallback */
}

body {
  font-family: "Archivo", system-ui, -apple-system, sans-serif;
  font-optical-sizing: auto;
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection {
  background: var(--c-blue);
  color: var(--c-white);
}

:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.dark-band :focus-visible {
  outline-color: var(--c-sky);
}

img {
  max-width: 100%;
  height: auto;
}

/* Reveal system: elements are hidden only when JS + motion are active.
   The `js` class is added by an inline head script guarded by
   prefers-reduced-motion, and removed again if GSAP fails to load. */
html.js [data-reveal],
html.js [data-reveal-child] > * {
  opacity: 0;
}

/* Hero copy is hidden pre-JS too, so it can never flash in all at once
   before GSAP starts the cascade. Same fallback: no JS/GSAP → visible. */
html.js [data-hero-item] {
  opacity: 0;
}

html.js [data-hero-line] > * {
  transform: translateY(115%);
}

/* ---------- typography voices ---------- */

.display {
  font-style: italic;
  font-stretch: 68%;
  font-weight: 880;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.94;
}

.display-lg {
  font-size: clamp(2.9rem, 8.2vw, 7.25rem);
}

.display-md {
  font-size: clamp(2.1rem, 4.8vw, 3.75rem);
}

.display-sm {
  font-size: clamp(1.65rem, 3.2vw, 2.5rem);
}

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.65;
}

.label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.label-tick::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  margin-right: 0.75rem;
  vertical-align: middle;
  background: currentColor;
  opacity: 0.6;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  will-change: transform;
}

.btn .btn-arrow {
  display: inline-block;
  transition: transform var(--dur) var(--ease-out);
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

.btn-solid {
  background: var(--c-blue);
  color: var(--c-white);
}

.btn-solid:hover {
  background: var(--c-blue-deep);
  box-shadow: 0 12px 30px -10px rgba(0, 73, 165, 0.55);
}

.btn-solid-light {
  background: var(--c-white);
  color: var(--c-blue);
}

.btn-solid-light:hover {
  background: var(--c-sky);
  color: var(--c-ink);
}

.btn-ghost {
  background: transparent;
  color: currentColor;
  border: 1.5px solid currentColor;
}

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

.light-ctx .btn-ghost:hover {
  background: rgba(0, 73, 165, 0.07);
}

/* ---------- header / nav ---------- */

.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background-color 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
  border-bottom: 1px solid transparent;
  background: transparent;
}

.site-nav.nav-scrolled {
  background: rgba(13, 19, 33, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.nav-inner {
  transition: padding 0.35s var(--ease-out);
}

.nav-link {
  position: relative;
  font-size: 0.875rem;
  font-weight: 550;
  color: rgba(255, 255, 255, 0.78);
  padding: 0.4rem 0;
  transition: color var(--dur) var(--ease-out);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--c-sky);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}

.nav-link:hover {
  color: var(--c-white);
}

.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-link[aria-current="page"] {
  color: var(--c-white);
}

.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* logo lockup */
.logo-mark {
  display: block;
  width: 48px;
  height: 48px;
  flex: none;
}

/* mobile menu */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--c-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 1.5rem 3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease-out);
}

.menu-overlay .menu-link {
  display: block;
  padding: 0.55rem 0;
  color: var(--c-white);
  transform: translateY(28px);
  opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out),
    color var(--dur);
}

.menu-overlay.open .menu-link {
  transform: translateY(0);
  opacity: 1;
}

.menu-overlay .menu-link:hover,
.menu-overlay .menu-link[aria-current="page"] {
  color: var(--c-sky);
}

.burger {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.burger span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: #fff;
  transition: transform 0.35s var(--ease-out), opacity 0.25s;
}

.burger span:nth-child(1) {
  top: 16px;
}

.burger span:nth-child(2) {
  top: 21px;
}

.burger span:nth-child(3) {
  top: 26px;
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* ---------- ghost wordmark ---------- */

.ghost-word {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  font-weight: 900;
  font-stretch: 75%;
  text-transform: lowercase;
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.035);
  font-size: clamp(9rem, 26vw, 24rem);
  white-space: nowrap;
}

.ghost-word--blue {
  color: rgba(13, 19, 33, 0.06);
}

/* ---------- marquee ---------- */

.marquee {
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 26s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  white-space: nowrap;
}

/* ---------- cards ---------- */

.lift-card {
  background: var(--c-white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out);
}

.lift-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(0, 73, 165, 0.25);
}

.lift-card .card-img {
  overflow: hidden;
}

.lift-card .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.lift-card:hover .card-img img {
  transform: scale(1.06);
}

.dark-card {
  background: var(--c-ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  transition: transform 0.45s var(--ease-out), border-color 0.45s var(--ease-out),
    background-color 0.45s var(--ease-out);
}

.dark-card:hover {
  transform: translateY(-4px);
  border-color: rgba(159, 192, 232, 0.4);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--line-light);
  color: rgba(13, 19, 33, 0.72);
  background: var(--c-paper);
}

/* ---------- stats / counters ---------- */

.stat-value {
  font-style: italic;
  font-stretch: 70%;
  font-weight: 880;
  line-height: 1;
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* ---------- process timeline ---------- */

.process-step {
  position: relative;
}

.process-num {
  font-style: italic;
  font-stretch: 68%;
  font-weight: 880;
  font-size: clamp(3.5rem, 7vw, 6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(159, 192, 232, 0.45);
}

.process-line {
  position: absolute;
  top: 2.6rem;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, rgba(159, 192, 232, 0.5), rgba(159, 192, 232, 0.08));
}

/* ---------- forms ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.field label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(13, 19, 33, 0.16);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: 0.9375rem;
  transition: border-color var(--dur), box-shadow var(--dur), background-color var(--dur);
}

.field textarea {
  min-height: 7rem;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(0, 73, 165, 0.18);
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230049A5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* dark variant (pre-footer band) */
.field-dark input,
.field-dark select,
.field-dark textarea {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--c-white);
}

.field-dark input::placeholder,
.field-dark textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.field-dark select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239FC0E8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.field-dark select option {
  color: var(--c-ink);
  background: var(--c-white);
}

.field-dark input:focus,
.field-dark select:focus,
.field-dark textarea:focus {
  border-color: var(--c-sky);
  box-shadow: 0 0 0 3px rgba(159, 192, 232, 0.22);
}

.field-dark label {
  color: var(--c-sky);
  opacity: 1;
}

/* ---------- Product-type texture tiles (quote forms) ----------
   Replaces the native <select>: each product is a darkened cardboard/
   material texture (pure CSS, no external assets) with its name kept
   legible on the very front. */
.field-cap {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}
.field-dark .field-cap {
  color: var(--c-sky);
  opacity: 1;
}
/* sub-caption under a field caption — e.g. "pick as many as you need" */
.field-hint {
  display: block;
  margin-top: -0.2rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.55;
}
.field-dark .field-hint {
  color: rgba(255, 255, 255, 0.65);
  opacity: 1;
}
/* validation message, injected by js/main.js when nothing is selected */
.field-error {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #c02626;
}
.field-dark .field-error {
  color: #ffb0b0;
}
.product-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
@media (min-width: 480px) {
  .product-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.product-tiles .product-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 96px;
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 0.8rem;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  background-color: #1c1610;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
  /* neutralise inherited .field label styles */
  opacity: 1;
  letter-spacing: normal;
  text-transform: none;
}
.product-tile > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* darkening veil — keeps every label readable over its photo */
.product-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 10, 16, 0.28) 0%, rgba(8, 10, 16, 0.78) 100%);
  transition: background 0.25s var(--ease-out);
}
/* checkmark badge on the selected tile — square, because the tiles multi-select */
.product-tile::before {
  content: "\2713";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 0.4rem;
  display: grid;
  place-items: center;
  background: var(--c-sky);
  color: #0d1321;
  font-size: 0.8rem;
  font-weight: 800;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.product-tile-name {
  position: relative;
  z-index: 2; /* wording sent to the front */
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-transform: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.product-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.35);
}
.product-tile:hover::after {
  background: linear-gradient(180deg, rgba(8, 10, 16, 0.18) 0%, rgba(8, 10, 16, 0.68) 100%);
}
.product-tile:has(> input:focus-visible) {
  outline: 2px solid var(--c-sky);
  outline-offset: 2px;
}
.product-tile:has(> input:checked) {
  border-color: var(--c-sky);
  box-shadow: 0 0 0 2px var(--c-sky), 0 12px 24px -14px rgba(0, 0, 0, 0.7);
}
.product-tile:has(> input:checked)::before {
  opacity: 1;
  transform: scale(1);
}
.product-tile:has(> input:checked)::after {
  background: linear-gradient(180deg, rgba(0, 44, 96, 0.3) 0%, rgba(6, 9, 14, 0.72) 100%);
}

/* per-product photo textures (profile-derived product renders and factory photography) */
.product-tile[data-tex="rsc"] {
  background-image: url("../img/speedpack-rsc-cartons-600.jpg");
}
.product-tile[data-tex="diecut"] {
  background-image: url("../img/speedpack-die-cut-boxes-600.jpg");
}
.product-tile[data-tex="srp"] {
  background-image: url("../img/speedpack-shelf-ready-packaging-600.jpg");
}
.product-tile[data-tex="ecom"] {
  background-image: url("../img/speedpack-ecommerce-boxes-600.jpg");
}
.product-tile[data-tex="jumbo"] {
  background-image: url("../img/speedpack-jumbo-bin-boxes-600.jpg");
}
.product-tile[data-tex="pizza"] {
  background-image: url("../img/speedpack-pizza-boxes-600.jpg");
}
.product-tile[data-tex="pallet"] {
  background-image: url("../img/speedpack-pallets-stacked-600.jpg");
}
.product-tile[data-tex="produce"] {
  background-image: url("../img/speedpack-citrus-export-trays-600.jpg");
}
.product-tile[data-tex="other"] {
  background-image: url("../img/speedpack-corrugated-sheets-600.jpg");
}

/* form success panel */
.form-success {
  display: none;
}

form.submitted .form-fields {
  display: none;
}

form.submitted .form-success {
  display: block;
  animation: success-in 0.6s var(--ease-out);
}

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

/* ---------- WhatsApp FAB ---------- */

.wa-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: var(--c-blue);
  color: var(--c-white);
  box-shadow: 0 10px 30px -8px rgba(0, 73, 165, 0.65),
    0 0 0 1.5px rgba(255, 255, 255, 0.35) inset;
  transition: transform 0.35s var(--ease-out), background-color 0.35s;
}

.wa-fab:hover {
  transform: translateY(-4px) scale(1.05);
  background: var(--c-blue-deep);
}

.wa-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(0, 73, 165, 0.45);
  animation: wa-pulse 2.6s ease-out infinite;
}

@keyframes wa-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 73, 165, 0.4);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(0, 73, 165, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 73, 165, 0);
  }
}

.wa-fab .wa-tip {
  position: absolute;
  right: calc(100% + 0.75rem);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--c-ink);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.45rem 0.8rem;
  border-radius: 0.5rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.wa-fab:hover .wa-tip,
.wa-fab:focus-visible .wa-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ---------- PPWR seal (shared, bottom-left) ----------
   The client's EU PPWR commitment, on screen on every page. It mirrors the
   WhatsApp FAB in the opposite corner and wears the scrolled nav's ink glass,
   so it reads as site chrome rather than a sticker. Expanded near the top of
   a page, it glides to a compact seal while reading down and opens again on
   scroll-up or hover. The seal opens the commitment card above it.
   Behaviour lives in js/main.js ("PPWR seal"). */

.ppwr {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 66;
  transition: opacity 0.8s var(--ease-out), transform 1s var(--ease-out),
    bottom 0.45s var(--ease-out);
}

/* Pre-entrance: hidden only when JS + motion are on (same contract as the
   reveal system), so reduced-motion and no-GSAP visitors see it at once. */
html.js .ppwr:not(.is-in) {
  opacity: 0;
  transform: translateY(1.5rem);
  pointer-events: none;
}

.ppwr :focus-visible {
  outline-color: var(--c-sky);
}

.ppwr-seal {
  display: inline-flex;
  align-items: center;
  height: 3.5rem; /* matches the FAB */
  padding: 0 1.15rem 0 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line-dark);
  background: rgba(13, 19, 33, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: var(--c-white);
  box-shadow: 0 16px 40px -16px rgba(13, 19, 33, 0.7);
  cursor: pointer;
  transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out),
    background-color 0.35s var(--ease-out);
}

.ppwr-seal:hover {
  transform: translateY(-2px);
  border-color: rgba(159, 192, 232, 0.45);
  background: rgba(13, 19, 33, 0.94);
}

/* ring of twelve brand squares around a check: a nod to the EU star ring
   without borrowing the EU emblem itself */
.ppwr-ring {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 0.55rem;
  overflow: visible;
}

.ppwr-ring rect,
.ppwr-card-ghost rect {
  fill: var(--c-sky);
}

.ppwr-ring-check {
  fill: none;
  stroke: var(--c-white);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* entrance: the ring assembles square by square, then the check draws */
html.js .ppwr-ring rect {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
  transition-delay: calc(0.3s + var(--i) * 45ms);
}

html.js .ppwr:not(.is-in) .ppwr-ring rect {
  transform: scale(0);
  opacity: 0;
}

html.js .ppwr-ring-check {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.6s var(--ease-out) 0.95s;
}

html.js .ppwr:not(.is-in) .ppwr-ring-check {
  stroke-dashoffset: 1;
}

.ppwr-name {
  font-style: italic;
  font-stretch: 68%;
  font-weight: 880;
  text-transform: uppercase;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

/* expanded tail: width animates on a 0fr ↔ 1fr grid track, so the pill
   glides between states without measuring anything */
.ppwr-more {
  display: grid;
  grid-template-columns: 1fr;
  transition: grid-template-columns 0.7s var(--ease-out), opacity 0.45s var(--ease-out);
}

.ppwr-more-inner {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.ppwr.is-compact .ppwr-more {
  grid-template-columns: 0fr;
  opacity: 0;
}

@media (hover: hover) {
  .ppwr.is-compact .ppwr-seal:hover .ppwr-more {
    grid-template-columns: 1fr;
    opacity: 1;
  }
}

.ppwr.is-compact .ppwr-seal:focus-visible .ppwr-more {
  grid-template-columns: 1fr;
  opacity: 1;
}

/* phones keep the compact seal: the tail would run into the FAB */
@media (max-width: 639.98px) {
  .ppwr-more {
    display: none;
  }
}

.ppwr-divider {
  flex: none;
  width: 1px;
  height: 1.25rem;
  margin: 0 0.9rem;
  background: rgba(255, 255, 255, 0.2);
}

/* the three pillar names share one grid cell, so the slot is always as wide
   as the longest and the pill never jumps as they cycle */
.ppwr-cycle {
  display: grid;
  overflow: hidden;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--c-sky);
}

.ppwr-cycle > span {
  grid-area: 1 / 1;
  justify-self: center; /* shorter names sit centred between rule and arrow */
  opacity: 0;
  transform: translateY(110%);
  transition: transform 0.6s var(--ease-out), opacity 0.45s var(--ease-out);
}

.ppwr-cycle > .is-on {
  opacity: 1;
  transform: none;
}

.ppwr-cycle > .is-out {
  opacity: 0;
  transform: translateY(-110%);
}

.ppwr-arrow {
  margin-left: 0.75rem;
  color: var(--c-sky);
  transition: transform var(--dur) var(--ease-out);
}

.ppwr-seal:hover .ppwr-arrow {
  transform: translateX(3px);
}

/* commitment card */
.ppwr-card {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.75rem);
  width: min(26rem, calc(100vw - 2.5rem));
  /* stays below the fixed nav: seal + gaps underneath, nav bar above */
  max-height: calc(100vh - 11rem);
  max-height: calc(100dvh - 11rem);
  overflow: hidden auto;
  overscroll-behavior: contain;
  padding: 1.75rem 1.75rem 1.6rem;
  border-radius: 1.25rem;
  border: 1px solid var(--line-dark);
  background: var(--c-ink);
  color: var(--c-white);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.6);
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.9rem) scale(0.97);
  transform-origin: 1.75rem 100%;
  transition: opacity 0.3s var(--ease-out), transform 0.5s var(--ease-out),
    visibility 0s linear 0.5s;
}

.ppwr.is-open .ppwr-card {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s var(--ease-out), transform 0.6s var(--ease-out),
    visibility 0s;
}

.ppwr-card:focus {
  outline: none;
}

@media (max-width: 639.98px) {
  .ppwr-card {
    padding: 1.5rem 1.35rem 1.35rem;
  }
}

/* card content rises in after the card, one step at a time */
.ppwr-card [data-ppwr-step] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out);
}

.ppwr.is-open .ppwr-card [data-ppwr-step] {
  opacity: 1;
  transform: none;
  transition-delay: calc(90ms + var(--s) * 55ms);
}

.ppwr-card-ghost {
  position: absolute;
  z-index: -1;
  top: -4.5rem;
  right: -4.5rem;
  width: 15rem;
  height: 15rem;
  opacity: 0.07;
  pointer-events: none;
}

.ppwr-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--dur), background-color var(--dur);
}

.ppwr-close:hover {
  color: var(--c-white);
  background: rgba(255, 255, 255, 0.08);
}

.ppwr-title {
  margin-top: 0.6rem;
  font-size: clamp(2rem, 3.2vw, 2.5rem);
}

.ppwr-lead {
  margin-top: 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.ppwr-pillars {
  margin-top: 1.35rem;
  border-top: 1px solid var(--line-dark);
}

.ppwr-pillars li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-dark);
}

.ppwr-num {
  grid-row: span 2;
  font-style: italic;
  font-stretch: 68%;
  font-weight: 880;
  font-size: 1.4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(159, 192, 232, 0.6);
}

.ppwr-pillar-name {
  font-size: 0.9375rem;
  font-weight: 700;
}

.ppwr-pillar-body {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

.ppwr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
  margin-top: 1.4rem;
}

.ppwr-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-sky);
  text-decoration: underline;
  text-decoration-color: rgba(159, 192, 232, 0.4);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur);
}

.ppwr-link:hover {
  text-decoration-color: currentColor;
}

/* live editor: lift clear of its entry button and its bottom toolbar */
body:has(> .sp-fab) .ppwr,
html.sp-edit-on .ppwr {
  bottom: 5.5rem;
}

/* ---------- spec tables (products) ---------- */

.spec-table {
  border-top: 1px solid var(--line-light);
}

.spec-table > div {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-light);
}

.spec-table dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(13, 19, 33, 0.55);
  align-self: center;
}

.spec-table dd {
  font-size: 0.9375rem;
  font-weight: 550;
}

/* anchored sections land below the fixed nav */
section[id],
[id][data-anchor] {
  scroll-margin-top: 6rem;
}

/* ---------- misc ---------- */

.dark-band {
  background: var(--c-ink);
  color: var(--c-white);
}

.rule-dark {
  border-color: var(--line-dark);
}

.img-frame {
  border-radius: var(--radius);
  overflow: hidden;
}

.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kicker-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.scroll-cue {
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7));
  position: relative;
  overflow: hidden;
}

.scroll-cue::after {
  content: "";
  position: absolute;
  top: -40%;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--c-sky);
  animation: cue-drop 2.2s var(--ease-out) infinite;
}

@keyframes cue-drop {
  0% {
    top: -40%;
  }
  60%,
  100% {
    top: 110%;
  }
}

/* footer giant word */
.footer-word {
  font-weight: 900;
  font-stretch: 72%;
  text-transform: lowercase;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.05);
  font-size: clamp(4.5rem, 14vw, 13rem);
  white-space: nowrap;
}

.footer-link {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9375rem;
  transition: color var(--dur);
}

.footer-link:hover {
  color: var(--c-sky);
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal-child] > *,
  html.js [data-hero-item] {
    opacity: 1;
  }

  html.js [data-hero-line] > * {
    transform: none;
  }

  .marquee-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
  }

  .wa-fab::before,
  .scroll-cue::after {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}