/* ==========================================================================
   Nail Your Marketing farewell page
   Brand palette pulled from nailyourmarketing.com

   Layout goal: the whole page fits in one viewport with no scrolling.
   Every vertical value is expressed against vh (or min() of vw and vh) so
   the design compresses on short screens instead of overflowing, and the
   content splits into two columns once the viewport is wide enough that
   stacking would push the footer off-screen.
   ========================================================================== */

:root {
  /* Brand */
  --nym-indigo-deep: #21116A;
  --nym-indigo:      #302CA6;
  --nym-violet:      #3D39AC;
  --nym-lime:        #BFEF4D;
  --nym-green:       #88D840;
  --nym-green-dark:  #4E990A;

  /* Neutrals */
  --white:           #FFFFFF;
  --white-80:        rgba(255, 255, 255, 0.80);
  --white-60:        rgba(255, 255, 255, 0.60);
  --white-40:        rgba(255, 255, 255, 0.40);
  --white-12:        rgba(255, 255, 255, 0.12);
  --white-06:        rgba(255, 255, 255, 0.06);

  /* Type */
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Rhythm: one shared vertical unit that shrinks with viewport height */
  --gap: clamp(0.5rem, 1.6vh, 1.25rem);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1, p, figure, figcaption {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.5;
  color: var(--white-80);
  background-color: var(--nym-indigo-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Page shell + ambient glows
   -------------------------------------------------------------------------- */

.page {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3.5vh, 3rem) clamp(1rem, 4vw, 2.5rem);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--nym-violet) 0%, transparent 55%),
    linear-gradient(180deg, var(--nym-indigo) 0%, var(--nym-indigo-deep) 60%, #180C4E 100%);
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.glow--one {
  top: -12rem;
  left: -8rem;
  width: 34rem;
  height: 34rem;
  background: rgba(191, 239, 77, 0.14);
}

.glow--two {
  bottom: -16rem;
  right: -10rem;
  width: 40rem;
  height: 40rem;
  background: rgba(61, 57, 172, 0.55);
}

.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  max-height: 100%;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Brand
   -------------------------------------------------------------------------- */

.brand {
  margin-bottom: calc(var(--gap) * 1.75);
}

.brand__logo {
  width: clamp(112px, min(20vw, 13vh), 180px);
  height: auto;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: clamp(0.6875rem, 1.4vh, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nym-lime);
  margin-bottom: calc(var(--gap) * 0.6);
}

.hero__title {
  font-size: clamp(1.75rem, min(7vw, 6.5vh), 3.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: var(--gap);
}

.accent {
  color: var(--nym-lime);
}

.hero__lede {
  font-size: clamp(0.9375rem, min(2.2vw, 2.2vh), 1.25rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--white);
  max-width: 34ch;
  margin: 0 auto var(--gap);
}

.hero__body {
  font-size: clamp(0.8125rem, min(1.6vw, 1.85vh), 1rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--white-60);
  max-width: 56ch;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Team photo
   -------------------------------------------------------------------------- */

.team {
  margin: calc(var(--gap) * 1.5) auto 0;
  max-width: 560px;
}

.team__photo {
  width: 100%;
  height: auto;
  /* The photo is the one flexible element, so it absorbs the leftover
     height rather than forcing the page to scroll. */
  max-height: clamp(96px, 26vh, 260px);
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid var(--white-12);
  background: var(--white-06);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.55);
}

.team__caption {
  margin-top: calc(var(--gap) * 0.6);
  font-size: clamp(0.6875rem, 1.5vh, 0.875rem);
  font-weight: 300;
  color: var(--white-40);
}

/* --------------------------------------------------------------------------
   Sign-off
   -------------------------------------------------------------------------- */

.signoff {
  margin-top: calc(var(--gap) * 1.5);
  padding: calc(var(--gap) * 1.1) 1rem;
  border-top: 1px solid var(--white-12);
  border-bottom: 1px solid var(--white-12);
}

.signoff__line {
  font-size: clamp(0.875rem, min(1.9vw, 2vh), 1.1875rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
  letter-spacing: -0.01em;
}

.signoff__sub {
  margin-top: calc(var(--gap) * 0.25);
  font-size: clamp(0.75rem, 1.6vh, 0.9375rem);
  font-weight: 300;
  color: var(--nym-lime);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  margin-top: calc(var(--gap) * 1.35);
}

.footer__note {
  font-size: clamp(0.75rem, 1.6vh, 0.9375rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--white-60);
  max-width: 52ch;
  margin: 0 auto;
}

.footer__link {
  color: var(--nym-lime);
  text-decoration: none;
  border-bottom: 1px solid rgba(191, 239, 77, 0.35);
  white-space: nowrap;
  transition: border-color 0.2s ease;
}

.footer__link:hover,
.footer__link:focus-visible {
  border-bottom-color: var(--nym-lime);
}

.footer__legal {
  margin-top: calc(var(--gap) * 0.85);
  font-size: clamp(0.6875rem, 1.4vh, 0.8125rem);
  font-weight: 300;
  color: var(--white-40);
}

/* --------------------------------------------------------------------------
   Wide viewports: go two-column so the stack doesn't run past the fold
   -------------------------------------------------------------------------- */

@media (min-width: 860px) {
  .container {
    max-width: 1080px;
  }

  .layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    text-align: left;
  }

  .hero__lede,
  .hero__body {
    margin-left: 0;
    margin-right: 0;
  }

  .team {
    margin: 0;
    max-width: none;
  }

  .team__photo {
    max-height: min(38vh, 320px);
  }

  .team__caption {
    text-align: center;
  }
}

/* Short landscape screens: drop the photo rather than clip the message */
@media (max-height: 460px) and (orientation: landscape) {
  .team,
  .brand {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--nym-lime);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}