/* Akaru closing/footer composition mapped into the existing Paak system.
   Restored from saved V2; remaining Design 1 styles stay unchanged. */
:root {
  --paak-contact-measure: 26ch;
  --paak-contact-button-height: 6.3rem;
  --paak-contact-button-radius: 10.5rem;
  --paak-contact-button-start: 3rem;
  --paak-contact-button-end: 1rem;
  --paak-contact-icon-size: 1.8rem;
  --paak-contact-grid: repeat(3, minmax(0, 1fr));
  --paak-contact-motion: 180ms;
}
.paak-contact-close {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--paak-lower-section-space) var(--paak-lower-gutter)
    var(--paak-lower-gap);
  text-align: center;
}
.paak-contact-close .paak-statement {
  max-width: var(--paak-contact-measure);
  text-wrap: balance;
}
.paak-contact-close h2 > span {
  display: block;
}
.paak-content .paak-contact-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--paak-lower-gap);
  min-height: max(var(--paak-hit-target), var(--paak-contact-button-height));
  max-width: 100%;
  margin-top: var(--paak-lower-row-space);
  padding-inline: var(--paak-contact-button-start)
    var(--paak-contact-button-end);
  border: 1px solid currentColor;
  border-radius: var(--paak-contact-button-radius);
  text-decoration: none;
  transition:
    background-color var(--paak-contact-motion),
    color var(--paak-contact-motion);
}
.paak-contact-icon {
  flex-shrink: 0;
  width: var(--paak-contact-icon-size);
  height: var(--paak-contact-icon-size);
  margin-inline: var(--paak-contact-button-end);
}
.paak-content .paak-contact-cta:hover {
  background: var(--paak-surface-light);
  color: var(--paak-surface-dark);
}
.paak-content .paak-contact-cta:focus-visible {
  outline-color: var(--paak-surface-light);
}
/* The inherited controller targets the wrapper for the old 20% reveal.
   Keep its hook for other controls; this composition needs a stable footer. */
.paak-contact-footer {
  transform: none !important;
  padding: 0 var(--paak-lower-gutter) var(--paak-lower-row-space);
  font-size: var(--paak-type-small);
  line-height: var(--paak-leading-small);
}
.paak-contact-details {
  display: grid;
  grid-template-columns: var(--paak-contact-grid);
  gap: var(--paak-lower-gap);
  padding-block: var(--paak-lower-gap);
  align-items: start;
}
.paak-contact-details > * {
  min-width: 0;
}
.paak-contact-details address {
  font-style: normal;
}
.paak-contact-details a {
  display: table;
  max-width: 100%;
  min-height: 24px;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.paak-contact-details a:hover {
  text-decoration: underline;
}
.paak-contact-details ul {
  list-style: none;
}
.paak-contact-direct,
.paak-contact-social {
  display: flex;
  flex-direction: column;
}
.paak-contact-location,
.paak-contact-reach {
  margin: 0;
  padding: 0;
  min-height: 24px;
}
.paak-contact-social {
  text-align: right;
}
.paak-contact-social a {
  margin-left: auto;
}
.paak-contact-networks a {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 0.4em;
}
.paak-contact-networks a:hover {
  text-decoration: none;
}
.paak-contact-networks a:hover > span {
  text-decoration: underline;
}
.paak-contact-copyright {
  display: block;
  margin: 0;
  padding: 0;
  min-height: 24px;
}
.paak-contact-brand {
  border-top: 1px solid var(--paak-border-on-dark);
  padding-top: var(--paak-lower-gap);
}
.paak-contact-brand img {
  display: block;
  width: 100%;
  height: auto;
}
@media (width >= 768px) {
  .paak-contact-close {
    padding-bottom: calc(var(--paak-lower-row-space) + var(--paak-lower-gap));
  }
}
@media (width < 768px) {
  :root {
    --paak-contact-grid: repeat(2, minmax(0, 1fr));
  }
  .paak-contact-close {
    padding-top: var(--paak-lower-section-compact);
  }
  .paak-contact-details {
    row-gap: var(--paak-lower-gap);
  }
  .paak-contact-details > nav {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .paak-contact-direct {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }
  .paak-contact-direct a {
    margin-left: auto;
  }
  .paak-contact-social {
    grid-column: 2;
    grid-row: 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .paak-content .paak-contact-cta {
    transition: none;
  }
}

/* Contain V2 typography and spacing to this ending. */
.paak-contact-close,
.paak-contact-footer {
  --paak-type-statement-390: 40px;
  --paak-type-statement-1512: 77.6992px;
  --paak-type-statement-2000: 84px;
  --paak-type-statement-wide: 4.2vw;
  --paak-tracking-statement: -0.035em;
  --paak-lower-section-space: clamp(80px, 7.94vw, 160px);
}
@media (width < 1512px) {
  .paak-contact-close,
  .paak-contact-footer {
    --paak-type-statement: clamp(
      min(var(--paak-type-statement-390), var(--paak-type-statement-1512)),
      calc(
        var(--paak-type-statement-390) +
          (var(--paak-type-statement-1512) - var(--paak-type-statement-390)) *
          (100vw - 390px) / (1512px - 390px)
      ),
      max(var(--paak-type-statement-390), var(--paak-type-statement-1512))
    );
  }
}
@media (width >= 1512px) {
  .paak-contact-close,
  .paak-contact-footer {
    --paak-type-statement: clamp(
      var(--paak-type-statement-1512),
      calc(
        var(--paak-type-statement-1512) +
          (var(--paak-type-statement-2000) - var(--paak-type-statement-1512)) *
          (100vw - 1512px) / (2000px - 1512px)
      ),
      var(--paak-type-statement-2000)
    );
  }
}
@media (width > 2000px) {
  .paak-contact-close,
  .paak-contact-footer {
    --paak-type-statement: min(
      var(--paak-type-statement-wide),
      calc(var(--paak-type-statement-2000) * 2560 / 2000)
    );
  }
}

/* TJ selected the Home social marks; inner shells need the same sizing. */
.paak-contact-footer .paak-link-arrow {
  display: block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  pointer-events: none;
}
/* Footer owns its reset so the imported shell and inner shell render identically. */
.paak-contact-details ul {
  margin: 0;
  padding: 0;
}
@media (width < 768px) {
  .paak-contact-close,
  .paak-contact-footer {
    --paak-lower-gutter: 20px;
  }
  .paak-contact-close {
    padding-top: 80px;
    --paak-type-statement: clamp(30px, calc(8.57vw + 2.57px), 40px);
  }
  .paak-contact-footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  .paak-contact-details {
    column-gap: 16px;
    row-gap: 24px;
    padding-block: 24px;
  }
  .paak-contact-direct a,
  .paak-contact-social a {
    justify-content: flex-end;
  }
}
@media (width < 1024px) {
  .paak-contact-details a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}
@media (768px <= width < 1024px) {
  .paak-contact-close,
  .paak-contact-footer {
    --paak-lower-gutter: 32px;
  }
}
