/* ==========================================================================
   Pure Athletics Club — Landing Page
   Design source: Figma "Pure" (X-Large 1440 / Large 992 / Medium 768 / Small 460)
   Built on Bootstrap 5.3 — this sheet holds the brand layer only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --pac-bg:            #E9E5DF;
  --pac-ink:           #000000;
  --pac-ink-72:        rgba(0, 0, 0, .72);
  --pac-ink-70:        rgba(0, 0, 0, .70);
  --pac-ink-60:        rgba(0, 0, 0, .60);
  --pac-rule:          rgba(19, 19, 19, .16);
  --pac-cream:         #F2EFE8;
  --pac-glass:         rgba(108, 108, 108, .32);
  --pac-glass-ink:     #E8E5E1;
  --pac-success:       #40C32F;

  /* Interaction tints (from the Figma form-field / nav state sheet) */
  --pac-tint-hover:    rgba(0, 0, 0, .10);
  --pac-tint-press:    rgba(0, 0, 0, .20);
  --pac-send-idle:     rgba(0, 0, 0, .10);
  --pac-send-hover-bg: rgba(0, 0, 0, .15);
  --pac-send-active:   rgba(0, 0, 0, .80);
  --pac-field-idle:    rgba(255, 255, 255, .40);
  --pac-field-hover:   rgba(255, 255, 255, .80);
  --pac-field-focus:   rgba(255, 255, 255, .70);

  /* Type */
  --pac-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              Helvetica, Arial, "Helvetica Neue", sans-serif;
  --pac-font-display: "Urbanist", var(--pac-font);

  /* Shape */
  --pac-r-hero: clamp(24px, 5vw, 72px);
  --pac-r-tile: clamp(16px, 2.5vw, 36px);
  --pac-r-pill: 100px;

  /* Motion */
  --pac-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  /* `clip` keeps the collage bleed from creating a horizontal scrollbar without
     turning the element into a scroll container the way `hidden` would. */
  overflow-x: clip;
}

body {
  background-color: var(--pac-bg);
  color: var(--pac-ink);
  font-family: var(--pac-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg { max-width: 100%; }

::selection { background: rgba(0, 0, 0, .82); color: var(--pac-cream); }

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 100;
  padding: 12px 24px;
  border-radius: var(--pac-r-pill);
  background: var(--pac-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--pac-ease);
}
.skip-link:focus-visible { top: 16px; color: #fff; }

/* Layout shell — reproduces the Figma page margins at every frame width */
.shell {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(20px, 8.7vw, 40px);
}

.rule {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--pac-rule);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   3. Shared components — pills
   -------------------------------------------------------------------------- */

/* Frosted category pill, sits on the hero image */
.pill-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, .95cqw, 10px) clamp(10px, 1.3cqw, 16px);
  border-radius: var(--pac-r-pill);
  background: var(--pac-glass);
  color: var(--pac-glass-ink);
  font-size: clamp(11px, 1.6cqw, 20px);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Solid section-label pill */
.pill-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px;
  padding: clamp(7px, .8vw, 10px) 16px;
  border-radius: var(--pac-r-pill);
  background: var(--pac-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.site-header { padding-top: clamp(20px, 2.6vw, 32px); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  color: var(--pac-ink);
  line-height: 0;
  text-decoration: none;
}
.brand__mark {
  display: block;
  width: 56px;                            /* Small frame */
  height: auto;
}
.brand__mark--footer { width: 103px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding-inline: clamp(14px, 1.7vw, 24px);
  border-radius: var(--pac-r-pill);
  background: transparent;
  color: var(--pac-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s var(--pac-ease);
}
.nav-link:hover  { background: var(--pac-tint-hover); color: var(--pac-ink); }
.nav-link:active { background: var(--pac-tint-press); }

/* Small frame shows Contact Us only */
@media (max-width: 575.98px) {
  .nav-link:not(.nav-link--contact) { display: none; }
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero { margin-top: clamp(8px, 2vw, 24px); }

.hero__frame {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 380 / 224;               /* Small */
  border-radius: var(--pac-r-hero);
  overflow: hidden;
  background: #2c2f2a;
  isolation: isolate;
}

/* The hero and every collage tile are zoomed crops in Figma. Rather than
   approximate them with object-fit, the image is over-sized and offset by the
   exact percentages the masks describe — so the framing survives every width.
   Values generated from the Figma mask + image-fill geometry per frame. */
.hero__img {
  position: absolute;
  height: auto;
  max-width: none;
  width: 165.75%;                        /* Small */
  left: -23.13%;
  top: -10.82%;
}

.hero__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 29.3%;
  background: linear-gradient(to top, rgba(0, 0, 0, .39), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.hero__lockup {
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translateX(-50%);
  width: 36.84%;                          /* Small */
  text-align: center;
  z-index: 1;
}

.hero__wordmark { display: block; width: 100%; height: auto; }

.hero__sub {
  display: block;
  margin-top: .28em;
  margin-right: -.52em;                   /* cancels trailing letter-spacing */
  color: var(--pac-cream);
  font-family: var(--pac-font-display);
  font-weight: 700;
  font-size: 2.87vw;                      /* fallback for no container queries */
  font-size: 2.869cqw;
  letter-spacing: .52em;
  line-height: 1.4;
  text-transform: lowercase;
  white-space: nowrap;
}

.hero__pills {
  position: absolute;
  inset: auto 0 11% 0;
  display: none;                          /* hidden on the Small frame */
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 2.7cqw, 36px);
  margin: 0;
  padding-inline: 4%;
  list-style: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   6. Problem / Vision
   -------------------------------------------------------------------------- */
.pillars { padding-top: clamp(17px, 5.1vw, 74px); }

.pillar { text-align: center; }

.pillar__title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.pillar__body {
  margin: 0;
  max-width: 60ch;
  margin-inline: auto;
  color: var(--pac-ink-60);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.pillars + .shell .rule { margin-top: clamp(9px, 3.2vw, 46px); }

/* --------------------------------------------------------------------------
   7. Showcase — collage stage
   -------------------------------------------------------------------------- */
.showcase { padding-top: clamp(41px, 6.7vw, 97px); }

.tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--pac-r-tile);
  background: rgba(0, 0, 0, .06);
}
.tile img {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
}

/* Crop geometry — Small frame */
.tile--gym       img { width: 605.78%; left:  -64.36%; top: -43.63%; }
.tile--pool      img { width: 223.39%; left:   -6.13%; top: -51.81%; }
.tile--yoga      img { width: 208.74%; left:  -37.77%; top: -16.39%; }
.tile--longevity img { width: 187.92%; left:   -0.19%; top: -27.15%; }

.stage__content {
  text-align: center;
  z-index: 2;
}

.showcase__title {
  margin: 0 0 17px;
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.2;
}

.showcase__body {
  margin: 0 auto;
  max-width: 385px;                       /* paragraph measure, per Figma */
  color: var(--pac-ink-70);
  font-size: 13px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.75;
}

/* --------------------------------------------------------------------------
   8. Subscribe form
   -------------------------------------------------------------------------- */
.subscribe {
  margin-top: clamp(24px, 3.2vw, 47px);
}

.subscribe__field {
  position: relative;
  width: 100%;
  max-width: 396px;
  height: 56px;
  margin-inline: auto;
  border: 2px solid #fff;
  border-radius: var(--pac-r-pill);
  background: var(--pac-field-idle);
  transition: background-color .2s var(--pac-ease), box-shadow .2s var(--pac-ease);
}
.subscribe__field:hover { background: var(--pac-field-hover); }
.subscribe__field:focus-within {
  background: var(--pac-field-focus);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .06);
}

.subscribe__input {
  width: 100%;
  height: 100%;
  padding: 0 136px 0 24px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--pac-ink-72);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.03em;
}
.subscribe__input::placeholder { color: var(--pac-ink-60); opacity: 1; }
.subscribe__input:focus { outline: none; }

.subscribe__btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--pac-r-pill);
  background: var(--pac-send-idle);
  color: var(--pac-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.03em;
  cursor: pointer;
  transition: background-color .2s var(--pac-ease),
              color .2s var(--pac-ease),
              width .3s var(--pac-ease);
}
.subscribe__btn:hover  { background: var(--pac-ink); color: #fff; }
.subscribe__btn:active { background: var(--pac-send-active); color: #fff; }

.subscribe__btn-icon { display: none; width: 24px; height: 24px; }

/* --- sending --- */
.subscribe.is-sending .subscribe__btn {
  width: 40px;
  padding: 0;
  background: var(--pac-send-active);
  cursor: progress;
}
.subscribe.is-sending .subscribe__btn-label { display: none; }
.subscribe.is-sending .subscribe__btn-icon--busy {
  display: block;
  animation: pac-spin 1s linear infinite;
}
.subscribe.is-sending .subscribe__input { pointer-events: none; }

/* --- sent --- */
.subscribe.is-sent .subscribe__field { pointer-events: none; }
.subscribe.is-sent .subscribe__btn {
  width: 40px;
  padding: 0;
  background: var(--pac-success);
  cursor: default;
}
.subscribe.is-sent .subscribe__btn-label { display: none; }
.subscribe.is-sent .subscribe__btn-icon--done { display: block; }
.subscribe.is-sent .subscribe__input::placeholder { color: var(--pac-ink-60); }

/* --- error --- */
.subscribe.is-error .subscribe__field {
  border-color: #C0392B;
  animation: pac-shake .4s var(--pac-ease);
}

/* Honeypot. Moved off-screen rather than display:none — bots commonly skip
   fields they can detect as hidden, and this one needs to look fillable. */
.subscribe__trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.subscribe__status {
  min-height: 1.4em;
  margin: 10px 0 0;
  color: var(--pac-ink-60);
  font-size: 13px;
  font-weight: 500;
}
.subscribe.is-error .subscribe__status { color: #A2321F; }
.subscribe.is-sent  .subscribe__status { color: #2C7A22; }

@keyframes pac-spin { to { transform: rotate(360deg); } }
@keyframes pac-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: clamp(47px, 10.6vw, 153px);
  padding-bottom: clamp(40px, 4vw, 60px);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: clamp(32px, 2.5vw, 36px);
}

.site-footer__legal {
  margin: 0;
  color: var(--pac-ink-60);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.03em;
}

@media (max-width: 575.98px) {
  .site-footer__inner {
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   10. Stage layout — SMALL (< 768px)
        Reflows the collage to the Small Figma frame: two tiles, copy, two tiles.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .stage {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: clamp(28px, 7vw, 44px);
    align-items: start;
  }

  .stage__collage { display: contents; }

  .tile--gym       { grid-area: 1 / 1 / 2 / 5;  aspect-ratio: 130 / 153; }
  .tile--pool      { grid-area: 1 / 6 / 2 / 13; aspect-ratio: 236 / 131; align-self: center; }
  .stage__content  { grid-area: 2 / 1 / 3 / 13; margin-top: clamp(8px, 2vw, 16px); }
  .tile--yoga      { grid-area: 3 / 1 / 4 / 6;  aspect-ratio: 155 / 244; }
  .tile--longevity { grid-area: 3 / 7 / 4 / 13; aspect-ratio: 213 / 122; align-self: start; }

  .tile--pilates,
  .tile--racket,
  .tile--recovery { display: none; }
}

/* --------------------------------------------------------------------------
   11. Stage layout — MEDIUM and up (>= 768px)
        Scattered collage, positioned as a percentage of an aspect-locked stage
        so it scales exactly the way the Figma frames do.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .stage {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 636 / 692;              /* Medium */
  }

  /* The stage scales with the viewport but the copy block would not, so it
     would swallow the clearance between the cards as the window narrows within
     a band. Sizing it in cqw — capped at each frame's drawn value — keeps the
     whole composition a true proportional scale of the Figma frame. */

  .stage__collage { position: absolute; inset: 0; }

  .tile { position: absolute; }

  .stage__content {
    position: absolute;
    left: 47.9%;
    top: 42%;                             /* nudged down off the top card row */
    transform: translate(-50%, -50%);
    width: 77.8%;
  }

  /* --- Medium (768) --- */
  .tile--gym       { left: -4.403%; top:  2.168%; width: 21.226%; height: 30.780%; }
  .tile--pool      { left: 29.403%; top:  0%;     width: 37.056%; height: 18.931%; }
  .tile--pilates   { left: 79.088%; top:  2.168%; width: 19.580%; height: 38.439%; }
  .tile--racket    { left: -4.403%; top: 59.104%; width: 30.346%; height: 18.064%; }
  .tile--yoga      { left: 37.264%; top: 59.104%; width: 21.226%; height: 40.893%; }
  .tile--longevity { left: 68.082%; top: 59.104%; width: 34.906%; height: 18.379%; }
  .tile--recovery  { display: none; }

  /* Crop geometry — Medium frame */
  .tile--gym       img { width: 701.30%; left: -112.11%; top: -28.64%; }
  .tile--pool      img { width: 223.39%; left:   -6.13%; top: -51.81%; }
  .tile--pilates   img { width: 269.43%; left:  -32.72%; top: -13.09%; }
  .tile--racket    img { width: 253.98%; left:  -57.67%; top: -57.08%; }
  .tile--yoga      img { width: 241.03%; left:  -35.26%; top:  -7.50%; }
  .tile--longevity img { width: 187.92%; left:   -0.19%; top: -27.15%; }

  /* Hero + nav pick up the Medium frame values */
  .shell        { padding-inline: 66px; }
  .brand__mark  { width: 103px; }
  .hero__frame  { aspect-ratio: 636 / 342; }
  .hero__img    { width: 158.31%; left: -19.88%; top: -14.41%; }
  .hero__lockup { top: 32%; width: 34.59%; }
  .hero__sub    { font-size: 2.69vw; font-size: 2.694cqw; }
  .hero__pills  { display: flex; inset: auto 0 7% 0; }

  .pillar { text-align: left; }
  .pillar__body { margin-inline: 0; max-width: none; font-size: 16px; }
  .pill-solid       { font-size: 14px; }
  .pillar__title    { font-size: 19px; }
  .showcase__title  { font-size: clamp(16px, 3.145cqw, 20px);
                      margin-bottom: clamp(10px, 2.673cqw, 17px); }
  .showcase__body   { font-size: clamp(12px, 2.201cqw, 14px); }
  .subscribe        { margin-top: clamp(16px, 3.774cqw, 24px); }
}

/* --------------------------------------------------------------------------
   12. Stage layout — LARGE (>= 992px)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .stage { aspect-ratio: 860 / 838; }

  .stage__content { left: 49.94%; top: 42.4%; width: 57.56%; }

  .tile--gym       { left:  5.233%; top:  0%;     width: 20.000%; height: 29.833%; }
  .tile--pool      { left: 39.651%; top:  1.432%; width: 36.512%; height: 18.616%; }
  .tile--pilates   { left: 82.791%; top: 10.740%; width: 19.651%; height: 43.079%; }
  .tile--racket    { left: -5.116%; top: 47.136%; width: 27.442%; height: 22.986%; }
  .tile--yoga      { left: 29.070%; top: 60.980%; width: 18.140%; height: 39.021%; }
  .tile--longevity { left: 57.558%; top: 58.592%; width: 29.070%; height: 18.328%; }

  /* Crop geometry — Large frame */
  .tile--gym       img { width: 673.11%; left: -118.08%; top: -30.05%; }
  .tile--pool      img { width: 211.18%; left:   -5.75%; top: -58.33%; }
  .tile--pilates   img { width: 269.43%; left:  -32.72%; top: -13.09%; }
  .tile--racket    img { width: 285.11%; left:  -62.77%; top: -45.05%; }
  .tile--yoga      img { width: 241.03%; left:  -35.26%; top:  -7.50%; }
  .tile--longevity img { width: 194.61%; left:   -4.12%; top: -25.11%; }

  .hero__frame  { aspect-ratio: 860 / 472.38; }
  .hero__img    { width: 160.00%; left: -20.72%; top: -13.57%; }

  .pillar__title  { font-size: 26px; }
  .showcase__title{ font-size: clamp(20px, 3.256cqw, 28px);
                    margin-bottom: clamp(10px, 1.977cqw, 17px); }
  .showcase__body { font-size: clamp(13px, 1.860cqw, 16px); max-width: none; }
  .subscribe      { margin-top: clamp(16px, 2.791cqw, 24px); }
  .hero__lockup { top: 35.8%; width: 30.12%; }
  .hero__sub    { font-size: 2.35vw; font-size: 2.346cqw; }
  .hero__pills  { inset: auto 0 11.5% 0; }
}

/* --------------------------------------------------------------------------
   13. Stage layout — X-LARGE (>= 1200px)
        Adds the seventh tile and opens the collage to the full 1440 frame.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .shell { padding-inline: 60px; }

  .stage { aspect-ratio: 1320 / 900; }

  .stage__content { left: 48.83%; top: 38.8%; width: 47.803%; }

  .tile--gym       { left: 11.591%; top:  5.444%; width: 20.606%; height: 17.333%; }
  .tile--pool      { left: 42.879%; top:  1.111%; width: 23.788%; height: 17.333%; }
  .tile--pilates   { left: 75.076%; top:  0%;     width: 11.818%; height: 45.556%; }
  .tile--racket    { left:  7.652%; top: 38.444%; width: 20.606%; height: 24.667%; }
  .tile--yoga      { left: 32.197%; top: 54.444%; width: 11.818%; height: 45.556%; }
  .tile--longevity { left: 48.939%; top: 53.556%; width: 23.182%; height: 20.889%; }
  .tile--recovery  { display: block; left: 76.970%; top: 49.333%; width: 15.379%; height: 16.111%; }

  /* Crop geometry — X-Large frame */
  .tile--gym       img { width: 422.84%; left:  -8.66%; top: -84.62%; }
  .tile--pool      img { width: 211.18%; left: -18.49%; top: -58.33%; }
  .tile--pilates   img { width: 298.72%; left: -71.15%; top:  -6.83%; }
  .tile--racket    img { width: 285.11%; left: -62.77%; top: -45.05%; }
  .tile--yoga      img { width: 269.87%; left: -49.36%; top:  -1.34%; }
  .tile--longevity img { width: 194.61%; left: -10.81%; top: -25.11%; }
  .tile--recovery  img { width: 293.78%; left: -90.46%; top: -65.15%; }

  .hero__frame  { aspect-ratio: 1310 / 648; }
  .hero__img    { width: 151.84%; left: -16.65%; top: -10.19%; }

  .pill-solid     { font-size: 16px; }
  .pillar__title  { font-size: 32px; }
  .pillar__body   { font-size: 20px; }
  .showcase__title{ font-size: clamp(24px, 2.727cqw, 36px);
                    margin-bottom: clamp(10px, 1.288cqw, 17px); }
  .showcase__body { font-size: clamp(13px, 1.212cqw, 16px); }
  .subscribe      { margin-top: clamp(20px, 3.561cqw, 47px); }
  .hero__lockup { top: 36%; width: 31.37%; }
  .hero__sub    { font-size: 2.44vw; font-size: 2.443cqw; }
  .hero__pills  { inset: auto 0 11.3% 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .subscribe.is-sending .subscribe__btn-icon--busy { animation: none; }
  .subscribe.is-error .subscribe__field { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}