/* ============================================
   UNIGRID Site plugin: the site-wide footer (Aaron, 2026-10-16; designed in
   Site_CSS/footer-lab/). Curtain reveal + Order Samples call to action +
   giant logo. Replaces the Order Samples photo band (home, Products, Team)
   and the theme's footer (#colophon). Printed by unigrid-site.php.

   Curtain: the footer is fixed to the bottom of the screen BEHIND the page
   (#page lifted above it with a white background and rounded bottom
   corners); the page keeps a bottom margin as tall as the footer, so
   scrolling to the end slides the page up like a curtain and uncovers it.
   If the footer is taller than the screen (small phones), it just sits in
   the flow (ug-footer.js adds .is-static).
   ============================================ */

/* Hide what it replaces. */
#colophon,
section.order-samples,
section.tp-banner {
  display: none !important;
}

/* No rubber-band bounce past the end of the page (Mac trackpads, phones):
   the bounce lifted the page further and showed a blank strip under the
   footer. Aaron, 2026-10-16. */
html,
body {
  overscroll-behavior-y: none;
}

#page {
  position: relative;
  z-index: 1;
  background-color: #FFFFFF;
  margin-block-end: var(--ug-foot-h, 0px);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.25);
}

.ug-foot {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #002B2E;
  color: #FFFFFF;
  font-family: 'Lato', sans-serif;
}

body.ug-foot-static #page {
  margin-block-end: 0;
}

.ug-foot.is-static {
  position: relative;
}

.ug-foot__inner {
  max-inline-size: 1104px;
  margin-inline: auto;
  /* Bottom: the gap above the logo, like 360lexingtonave.com (about 88px
     from the copyright line to the top of the letters at 1440 wide). */
  padding: 3.5rem 1.75rem clamp(2.5rem, 6vw, 5.5rem);
  /* Parallax: the content starts a little low and settles as the curtain
     lifts (ug-footer.js sets --ug-reveal from 0 to 1). */
  transform: translateY(calc((1 - var(--ug-reveal, 1)) * 18%));
  opacity: calc(0.35 + var(--ug-reveal, 1) * 0.65);
  will-change: transform, opacity;
}

/* ---------- Order Samples call to action ---------- */

.ug-foot__eyebrow {
  margin: 0 0 1rem;
  font-family: 'Exo 2', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00B03C;
}

.ug-foot__title {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.5rem);
  line-height: 1.05;
  color: #FFFFFF;
}

.ug-foot__title sup {
  position: relative;
  inset-block-start: -0.9em;
  vertical-align: baseline;
  font-size: 0.35em;
  line-height: 0;
}

/* The headline's lines rise and straighten as the footer is uncovered,
   the same line rise as the Technology section. */
.ug-foot__line {
  display: block;
  overflow: hidden;
  /* Room for the descenders and the rotated start position. */
  padding-block-end: 0.08em;
}

@media (min-width: 30rem) {
  .ug-foot__line {
    white-space: nowrap;
  }
}

.ug-foot__line > span {
  display: block;
  transform-origin: 0 0;
  transform: translateY(80%) rotate(4.6deg);
  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.ug-foot__line + .ug-foot__line > span {
  transition-delay: 0.1s;
}

.ug-foot.is-in .ug-foot__line > span {
  transform: none;
}

/* The top nav's Order Samples ghost button (Site_CSS/additional-css.css):
   transparent pill, 2px UG Green outline, white Exo 2 600 1rem, quick
   0.15s fill to UG Green on hover, 97% while pressed. */
.ug-foot__button {
  display: inline-block;
  margin-block-start: 1.75rem;
  padding: 0.375rem 2.75rem;
  border: 0.125rem solid #00B03C;
  border-radius: 100px;
  background-color: transparent;
  color: #FFFFFF;
  font-family: 'Exo 2', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.375;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.ug-foot__button:hover {
  background-color: #00B03C;
  color: #FFFFFF;
}

.ug-foot__button:active {
  transform: scale(0.97);
}

.ug-foot a:focus-visible {
  outline: 2px solid #00B03C;
  outline-offset: 3px;
}

/* ---------- Links ---------- */

.ug-foot__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 1.5rem;
  margin-block-start: 2.5rem;
  padding-block-start: 1.75rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.15);
}

.ug-foot__col--brand {
  grid-column: 1 / -1;
}

.ug-foot__tagline {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
}

.ug-foot__col h3 {
  margin: 0 0 0.75rem;
  font-family: 'Exo 2', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.ug-foot__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ug-foot__col li + li {
  margin-block-start: 0.4rem;
}

.ug-foot__col p {
  margin: 0;
  line-height: 1.5;
  white-space: nowrap;
}

.ug-foot a {
  color: #FFFFFF;
  text-decoration: none;
}

.ug-foot__col a {
  background-image: linear-gradient(#00B03C, #00B03C);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s cubic-bezier(0.65, 0, 0.35, 1), color 0.3s ease;
}

.ug-foot__col a:hover {
  background-size: 100% 1px;
  color: #00B03C;
}

.ug-foot__legal {
  display: flex;
  gap: 1.5rem;
  margin-block-start: 2rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
}

/* The copy under the tagline shows on desktop only; the one at the end
   shows below 1024px. */
/* Copyright line: under the tagline from 768px (Aaron); on phones it
   goes at the very end, under the address. */
.ug-foot__legal--brand {
  display: none;
}

@media (min-width: 48rem) {
  .ug-foot__legal--brand {
    display: flex;
    margin-block-start: 1.25rem;
  }

  .ug-foot__legal--end {
    display: none;
  }
}

.ug-foot__legal a {
  color: rgba(255, 255, 255, 0.55);
}

.ug-foot__legal a:hover {
  color: #FFFFFF;
}

/* ---------- Giant logo ---------- */

/* The logo: cut off at the bottom from 1024px, whole below (see the
   1024px rule; -5% of the width hides 34% of its 14.8%-of-width height).
   The gap above it is the content's bottom padding. Aaron, 2026-10-16. */
.ug-foot__mark {
  padding: 0 1.75rem;
  line-height: 0;
}

.ug-foot__mark svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}

/* The logo rises with the curtain (Aaron picked it, 2026-10-16): it starts
   60% below the screen edge and comes up into place over the first half of
   the reveal (the logo is the first part of the footer to be uncovered).
   Tied to the scroll, so it moves only as you do. */
.ug-foot__mark svg {
  transform: translateY(calc((1 - min(1, var(--ug-reveal, 1) * 2)) * 60%));
  will-change: transform;
}

/* ---------- Wider screens ---------- */

@media (min-width: 48rem) {
  .ug-foot__cols {
    grid-template-columns: 2fr 1fr 1.4fr 1fr;
  }

  .ug-foot__col--brand {
    grid-column: auto;
  }
}

@media (min-width: 64rem) {
  .ug-foot__inner {
    padding: 4.5rem 3rem clamp(2.5rem, 6vw, 5.5rem);
  }

  /* Desktop: the headline on the left, the button level with its last
     line on the right; the links in four columns below. */
  .ug-foot__cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 2rem;
  }

  .ug-foot__eyebrow {
    grid-column: 1 / -1;
  }

  .ug-foot__button {
    margin-block: 0 0.5rem;
  }

  .ug-foot__mark {
    padding-inline: 3rem;
  }

  /* From 1024px the logo is cut off at the screen edge (like
     360lexingtonave.com: a third hidden at 1440). Below 1024px the whole
     logo shows, sitting on the bottom edge, as on their phone/tablet view. */
  .ug-foot__mark svg {
    margin-block-end: -5%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ug-foot__inner {
    transform: none;
    opacity: 1;
  }

  .ug-foot__mark svg {
    transform: none;
  }

  .ug-foot__line > span {
    transform: none;
    transition: none;
  }
}