/* ============================================================
   footer.css — the site footer, hand-written.

   assets/css/styles.css is a COMPILED Tailwind bundle and this
   repo has no build tooling, so a new utility class in the markup
   would do nothing. Everything below is therefore plain CSS on a
   .ft- prefix, using the :root tokens already defined by the
   bundle (--cream, --oil, --forest, --charcoal, ...).

   Loaded after responsive.css. The old footer's rules were keyed
   to Tailwind classes that no longer exist in this markup and
   have been deleted from responsive.css section 3/6/10/13 — if
   you reintroduce a `footer ...` rule there, check it does not
   fight the .ft- classes here.
   ============================================================ */

.ft {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--charcoal);
  color: var(--cream);
}

/* a single warm glow so the slab is not a flat black rectangle */
.ft::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 420px at 12% 0%, oklch(70% 0.17 65 / 0.16), transparent 62%),
    radial-gradient(720px 380px at 88% 12%, oklch(32% 0.06 145 / 0.42), transparent 64%);
  pointer-events: none;
}

/* top hairline in brand gold, drawn edge to edge */
.ft::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, oklch(82% 0.16 82 / 0.55), transparent);
  pointer-events: none;
}

.ft-inner {
  margin-inline: auto;
  width: 100%;
  max-width: 80rem;
  padding-inline: 1.25rem;
}

.ft-body {
  padding-block: 3.25rem 2.5rem;
}


/* ------------------------------------------------------------
   1. Conversion card
   ------------------------------------------------------------ */

.ft-cta {
  position: relative;
  border: 1px solid oklch(82% 0.16 82 / 0.28);
  border-radius: 1.75rem;
  background: var(--gradient-forest);
  box-shadow: var(--shadow-soft);
  padding: 1.75rem 1.35rem;
  text-align: center;
}

.ft-eyebrow {
  margin: 0;
  color: var(--oil);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.ft-cta-title {
  margin: 0.75rem 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  /* ramps continuously instead of stepping at a breakpoint */
  font-size: clamp(1.6rem, 1.15rem + 2.1vw, 2.6rem);
}

.ft-cta-title em {
  font-style: italic;
  color: var(--oil);
}

.ft-cta-sub {
  margin: 0.85rem auto 0;
  max-width: 34rem;
  color: oklch(97.5% 0.018 85 / 0.74);
  font-size: 0.95rem;
  line-height: 1.6;
}

.ft-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

.ft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding-inline: 1.4rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease,
              border-color 0.25s ease, color 0.25s ease;
}

.ft-btn svg {
  height: 1.05rem;
  width: 1.05rem;
  flex: 0 0 auto;
}

.ft-btn-primary {
  border: 1px solid transparent;
  background: var(--gradient-oil);
  color: var(--charcoal);
}

.ft-btn-ghost {
  border: 1px solid oklch(97.5% 0.018 85 / 0.34);
  background: oklch(97.5% 0.018 85 / 0.06);
  color: var(--cream);
}

.ft-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.ft-btn-ghost:hover {
  border-color: var(--oil);
  color: var(--oil);
}

.ft-btn:focus-visible {
  outline: 2px solid var(--oil);
  outline-offset: 3px;
}

.ft-cta-note {
  margin: 1.05rem 0 0;
  /* .74 alpha, not .45 — the quieter tier failed AA on this ground */
  color: oklch(97.5% 0.018 85 / 0.62);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}


/* ------------------------------------------------------------
   2. Pack-size rail
   The four things you can actually buy, typeset as a price list:
   the size is the headline, not a link label.
   ------------------------------------------------------------ */

.ft-skus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.ft-sku {
  display: block;
  min-height: 44px;
  padding: 0.9rem 0.85rem;
  border: 1px solid oklch(97.5% 0.018 85 / 0.13);
  border-radius: 1.1rem;
  background: oklch(97.5% 0.018 85 / 0.04);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.ft-sku:hover {
  transform: translateY(-2px);
  border-color: oklch(82% 0.16 82 / 0.5);
  background: oklch(97.5% 0.018 85 / 0.07);
}

.ft-sku:focus-visible {
  outline: 2px solid var(--oil);
  outline-offset: 2px;
}

.ft-sku b {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--oil);
}

.ft-sku span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: oklch(97.5% 0.018 85 / 0.66);
}

.ft-sku small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.74rem;
  line-height: 1.35;
  color: oklch(97.5% 0.018 85 / 0.5);
}


/* ------------------------------------------------------------
   3. Body — brand, nav, contact
   ------------------------------------------------------------ */

.ft-main {
  display: grid;
  gap: 2.25rem;
  margin-top: 2.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid oklch(97.5% 0.018 85 / 0.1);
}

.ft-lockup {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.ft-lockup img {
  height: 62px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}

.ft-wordmark {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.24rem;
  line-height: 1.1;
  color: var(--cream);
}

.ft-tagline {
  margin-top: 0.28rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: oklch(82% 0.16 82 / 0.92);
}

.ft-blurb {
  margin: 1.1rem 0 0;
  max-width: 30rem;
  color: oklch(97.5% 0.018 85 / 0.62);
  font-size: 0.88rem;
  line-height: 1.65;
}

.ft-address {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 1.1rem;
  max-width: 26rem;
  font-style: normal;
  font-size: 0.85rem;
  line-height: 1.6;
  color: oklch(97.5% 0.018 85 / 0.62);
}

.ft-address svg {
  height: 1rem;
  width: 1rem;
  flex: 0 0 auto;
  margin-top: 0.2rem;
  color: var(--oil);
}

/* long unbroken address/email strings must never widen the track */
.ft-address span,
.ft-contact-val {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ft-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.35rem;
}

.ft-social a {
  display: grid;
  place-items: center;
  height: 44px;
  width: 44px;
  border: 1px solid oklch(97.5% 0.018 85 / 0.2);
  border-radius: 999px;
  color: var(--cream);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.ft-social a svg { height: 1.05rem; width: 1.05rem; }

.ft-social a:hover {
  border-color: var(--oil);
  color: var(--oil);
  background: oklch(82% 0.16 82 / 0.1);
}

.ft-social a:focus-visible {
  outline: 2px solid var(--oil);
  outline-offset: 2px;
}

/* --- column headings, capped by a small gold printer's rule --- */
.ft-h {
  margin: 0 0 1.05rem;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: oklch(97.5% 0.018 85 / 0.55);
}

.ft-h::after {
  content: "";
  display: block;
  height: 2px;
  width: 18px;
  margin-top: 0.6rem;
  border-radius: 2px;
  background: var(--gradient-oil);
}

.ft-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ft-links li + li { margin-top: 0.12rem; }

/* the underline is drawn rather than toggled — a 1px gradient grown
   from 0 to 100% background-size, so it reads as a pen stroke */
.ft-link {
  display: inline-block;
  padding-block: 0.42rem;
  color: oklch(97.5% 0.018 85 / 0.82);
  font-size: 0.88rem;
  text-decoration: none;
  background-image: linear-gradient(var(--oil), var(--oil));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 0.35rem);
  background-size: 0% 1px;
  transition: color 0.25s ease, background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-link:hover,
.ft-link:focus-visible {
  color: var(--oil);
  background-size: 100% 1px;
}

.ft-link:focus-visible {
  outline: 2px solid var(--oil);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- contact rows: targets, not text --- */
.ft-contact {
  display: grid;
  gap: 0.5rem;
}

.ft-contact-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 56px;
  padding: 0.5rem 0.85rem;
  border: 1px solid oklch(97.5% 0.018 85 / 0.12);
  border-radius: 0.95rem;
  background: oklch(97.5% 0.018 85 / 0.04);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.ft-contact-row:hover {
  border-color: oklch(82% 0.16 82 / 0.5);
  background: oklch(97.5% 0.018 85 / 0.07);
}

.ft-contact-row:focus-visible {
  outline: 2px solid var(--oil);
  outline-offset: 2px;
}

.ft-contact-ic {
  display: grid;
  place-items: center;
  height: 34px;
  width: 34px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: oklch(82% 0.16 82 / 0.14);
  color: var(--oil);
}

.ft-contact-ic svg { height: 1rem; width: 1rem; }

.ft-contact-tx { min-width: 0; }

.ft-contact-lb {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: oklch(97.5% 0.018 85 / 0.55);
}

.ft-contact-val {
  display: block;
  margin-top: 0.14rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cream);
}

/* the phone number is promoted to display type — a contact detail
   set as typography is what separates this from a link dump */
.ft-contact-row--tel .ft-contact-val {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
}


/* ------------------------------------------------------------
   4. Trust strip
   ------------------------------------------------------------ */

.ft-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid oklch(97.5% 0.018 85 / 0.1);
}

.ft-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.8rem;
  border: 1px solid oklch(82% 0.16 82 / 0.28);
  border-radius: 999px;
  background: oklch(82% 0.16 82 / 0.07);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: oklch(97.5% 0.018 85 / 0.82);
}

.ft-pill svg { height: 0.85rem; width: 0.85rem; color: var(--oil); }


/* ------------------------------------------------------------
   5. Base bar
   ------------------------------------------------------------ */

.ft-base {
  border-top: 1px solid oklch(97.5% 0.018 85 / 0.1);
  background: oklch(18% 0.02 60 / 0.6);
}

.ft-base-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  /* .vs-motion-toggle (story.css) is position:fixed at left:1rem /
     bottom:1rem, so at the end of the page it lands straight on top of
     the copyright and the studio credit. The extra bottom padding lifts
     this bar clear of it without shifting it horizontally out of line
     with the rest of the footer. */
  padding-block: 1.35rem 3.9rem;
  text-align: center;
  font-size: 0.74rem;
  color: oklch(97.5% 0.018 85 / 0.58);
}

.ft-colophon em {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  color: oklch(82% 0.16 82 / 0.85);
}

.ft-base-left {
  display: grid;
  gap: 0.2rem;
}

.ft-base-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 1.4rem;
}

/* studio credit — set in the same tracked micro-caps as the other
   labels in this footer so it reads as a colophon mark rather than
   competing with the nav links */
.ft-credit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* uppercase + 0.16em tracking makes this 293px on one line, wider than
     the 280px content box at 320px. Wrapping the prefix above the studio
     name keeps it inside its container instead of relying on the
     viewport edge for slack. */
  flex-wrap: wrap;
  gap: 0 0.35rem;
  min-height: 44px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  color: oklch(97.5% 0.018 85 / 0.52);
  text-decoration: none;
  transition: color 0.25s ease;
}

/* the studio name itself must never break mid-phrase */
.ft-credit span {
  white-space: nowrap;
  color: oklch(82% 0.16 82 / 0.9);
  transition: color 0.25s ease;
}

.ft-credit:hover { color: oklch(97.5% 0.018 85 / 0.78); }
.ft-credit:hover span { color: var(--oil); }

.ft-credit:focus-visible {
  outline: 2px solid var(--oil);
  outline-offset: 3px;
  border-radius: 4px;
}

.ft-top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: oklch(97.5% 0.018 85 / 0.72);
  text-decoration: none;
  transition: color 0.25s ease;
}

.ft-top:hover { color: var(--oil); }
.ft-top:focus-visible { outline: 2px solid var(--oil); outline-offset: 3px; border-radius: 4px; }
.ft-top svg { height: 0.9rem; width: 0.9rem; }


/* ------------------------------------------------------------
   6. Wider viewports
   ------------------------------------------------------------ */

/* Commerce density has a vertical cost: at 375px the full stack came to
   1980px — 2.4 phone screens — which puts the copyright a long way from
   the CTA. Tighten the rhythm and run the Explore list two-up so the
   footer lands nearer two screens without dropping any content. */
@media (max-width: 639.98px) {
  .ft-body { padding-block: 2.5rem 2rem; }
  .ft-cta { padding: 1.5rem 1.15rem; }
  .ft-cta-sub { margin-top: 0.7rem; font-size: 0.9rem; }
  .ft-cta-actions { margin-top: 1.15rem; }
  .ft-cta-note { margin-top: 0.9rem; }
  .ft-skus { margin-top: 1.15rem; }

  .ft-main {
    margin-top: 2rem;
    padding-top: 1.75rem;
    gap: 1.75rem;
  }
  .ft-blurb { margin-top: 0.9rem; }
  .ft-address { margin-top: 0.9rem; }
  .ft-social { margin-top: 1.1rem; }

  /* six single-file rows at 44px each cost 264px; two-up halves that
     and the longest label ("How It's Pressed") still fits a ~160px track */
  .ft-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }
  .ft-links li + li { margin-top: 0; }

  .ft-trust { margin-top: 1.75rem; padding-top: 1.4rem; }
}

/* the third line is the first thing to go on the narrowest phones */
@media (max-width: 399.98px) {
  .ft-sku small { display: none; }
  .ft-sku { padding: 0.8rem 0.75rem; }
}

@media (min-width: 480px) {
  .ft-skus { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
  .ft-inner { padding-inline: 1.75rem; }
  .ft-body { padding-block: 4rem 3rem; }
  .ft-cta { padding: 2.5rem 2rem; }
  .ft-skus { gap: 0.75rem; }
  .ft-sku { padding: 1.05rem 1rem; }
  .ft-sku b { font-size: 1.55rem; }

  .ft-base-in {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    gap: 1rem;
  }
  .ft-base-right { justify-content: flex-end; }
}

@media (min-width: 768px) {
  .ft-main {
    grid-template-columns: 1.35fr 1fr;
    gap: 2.5rem 2.75rem;
  }
  /* brand spans the full first row, the two stacks share the second */
  .ft-brand { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .ft-body { padding-block: 5rem 3.5rem; }
  .ft-cta { padding: 3.25rem 3rem; }
  .ft-main {
    grid-template-columns: 1.6fr 1fr 1.15fr;
    gap: 3rem;
    margin-top: 3.25rem;
    padding-top: 3rem;
  }
  .ft-brand { grid-column: auto; }
  .ft-lockup img { height: 72px; }
  .ft-sku b { font-size: 1.7rem; }
}

@media (min-width: 1536px) {
  .ft-inner { max-width: 88rem; }
}


/* ------------------------------------------------------------
   7. Touch and reduced motion
   ------------------------------------------------------------ */

@media (hover: none) {
  /* WCAG 2.5.8 — the link rows are the only sub-44px targets here */
  .ft-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* no hover state to reveal it, so the underline is always drawn */
  .ft-btn:hover,
  .ft-sku:hover { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-btn,
  .ft-sku,
  .ft-link,
  .ft-social a,
  .ft-contact-row,
  .ft-credit,
  .ft-credit span,
  .ft-top {
    transition-duration: 0.01ms;
  }
  .ft-btn:hover,
  .ft-sku:hover { transform: none; }
}

/* ==========================================================================
   Floating WhatsApp button (.wa-float)
   Site-wide chat entry point. Lives here because footer.css is the last
   stylesheet in the cascade, so these rules win without !important.

   Positioned bottom-RIGHT on purpose: .vs-motion-toggle (story.css) is
   fixed at left:1rem/bottom:1rem, so the two never overlap. z-index 70
   sits above the header (50) and the motion toggle (60) but below the
   inquiry modal (100), so it can never cover a form the visitor is filling.
   ========================================================================== */
.wa-float {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 70;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: #25d366;                 /* WhatsApp brand green */
  color: #fff;
  box-shadow: 0 6px 18px oklch(22% 0.02 60 / 0.28);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s ease;
  -webkit-tap-highlight-color: transparent;
}

.wa-float-ic {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
}
.wa-float-ic svg { width: 100%; height: 100%; display: block; }

/* Attention ring. Sits behind the button and pulses outward. It is a
   sibling rather than a ::before so the label transition below cannot
   inherit its animation timing. */
.wa-float-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #25d366;
  opacity: 0.65;
  z-index: -1;
  animation: wa-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes wa-pulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.75); opacity: 0;    }
  100% { transform: scale(1.75); opacity: 0;    }
}

/* Label slides out of the button on hover/focus. Width (not opacity alone)
   is animated so it takes no pointer area while collapsed. */
.wa-float-label {
  position: absolute;
  right: calc(100% + 0.6rem);
  white-space: nowrap;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: oklch(22% 0.02 60 / 0.92);
  color: oklch(97.5% 0.018 85);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateX(0.4rem);
  pointer-events: none;
  transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.wa-float:hover,
.wa-float:focus-visible {
  transform: scale(1.09);
  box-shadow: 0 10px 26px oklch(22% 0.02 60 / 0.36);
}
.wa-float:hover .wa-float-label,
.wa-float:focus-visible .wa-float-label {
  opacity: 1;
  transform: translateX(0);
}
.wa-float:active { transform: scale(0.97); }

.wa-float:focus-visible {
  outline: 2px solid oklch(97.5% 0.018 85);
  outline-offset: 3px;
}

/* Pausing the ring while hovered keeps the hover state readable. */
.wa-float:hover .wa-float-ring { animation-play-state: paused; }

@media (max-width: 767.98px) {
  /* Slightly smaller, and lifted clear of the iOS Safari toolbar. */
  .wa-float {
    width: 3.25rem;
    height: 3.25rem;
    right: 0.85rem;
    bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }
  .wa-float-ic { width: 1.7rem; height: 1.7rem; }
  /* No hover on touch, so the label would never show — hide it entirely
     rather than leave an element that only appears on a sticky :hover. */
  .wa-float-label { display: none; }
}

/* The site's static escape hatch (?vsmotion=0 -> html.cine-static) and the
   OS reduced-motion setting both stop the pulse. The button itself stays
   fully visible and clickable in either case. */
html.cine-static .wa-float-ring { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  /* Drop the never-ending pulse — continuous unprompted motion is what
     this setting actually asks us to stop. The hover response is discrete
     and user-initiated, so it stays (just quicker); removing it too would
     leave the button looking inert for anyone with the OS setting on,
     which is a large share of phones. */
  .wa-float-ring { animation: none; opacity: 0; }
  .wa-float { transition-duration: 0.12s; }
}