/* Marcos Rocha — inner pages (/gear, /pricing): page header, gear list, van tour, pricing tiers.
   Loaded after base.css. */

/* ---------- Page header ---------- */
.page-hero { padding: clamp(96px, 16vh, 150px) var(--gutter) clamp(40px, 7vh, 72px); }
.back-link {
  display: inline-flex; align-items: center; gap: .6em; min-height: 48px; margin-bottom: clamp(16px, 3vh, 32px);
  padding: .85em 1.4em .87em .95em; border-radius: 999px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--lime);
  font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none;
  transition: background-color .3s, color .3s, transform .5s var(--ease-out);
}
.back-link__arrow { font-size: 1.15em; transition: transform .4s var(--ease-out); }
.back-link:hover { background: var(--lime); color: var(--ink); transform: scale(1.04); }
.back-link:hover .back-link__arrow { transform: translateX(-4px); }
.page-hero__title { font-size: clamp(4.5rem, 2rem + 14vw, 15rem); }
.page-hero__row {
  display: flex; justify-content: space-between; align-items: end; gap: 1.5rem 4vw; flex-wrap: wrap;
  margin-top: clamp(20px, 4vh, 40px);
}
.page-hero__lead { max-width: 36ch; font-size: var(--t-lead); font-weight: 500; line-height: 1.16; letter-spacing: -.012em; }

/* ---------- Closing call to action (black panel) ---------- */
.page-cta { padding: clamp(40px, 6vw, 88px) clamp(24px, 4vw, 56px); }
.page-cta__title { font-size: clamp(2.8rem, 1.4rem + 5.6vw, 8rem); max-width: 12ch; }
.page-cta p { margin-top: 1.4rem; max-width: 40ch; font-size: 1.125rem; opacity: .85; }
.page-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }
.page-cta__email { font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.page-cta__email:hover { text-decoration: underline; }

/* 404: the page fills the screen so the footer sits at the bottom */
.not-found-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.not-found-page main { flex: 1; }

/* Gentle rise, added by pages.js only when motion is allowed */
.will-rise { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.will-rise.is-risen { opacity: 1; transform: none; }

/* Checklists shared by the gear list and the pricing tiers */
.gear-list li, .tier__list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  font-size: 1.0625rem; font-weight: 500; line-height: 1.35;
}
.gear-list li span, .tier__list li span { font-weight: 400; opacity: .7; }

/* ======================================================================
   Gear (/gear)
   ====================================================================== */
/* Row of outlined page links: gear categories, and the 404 page's suggestions */
.gear-index, .not-found__links { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.gear-index a, .not-found__links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1em;
  border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 600; font-size: .9375rem;
  text-decoration: none; transition: background-color .3s, color .3s;
}
.gear-index a:hover, .not-found__links a:hover { background: var(--ink); color: var(--lime); }

.gear-kit {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 7vw, 96px) clamp(24px, 4vw, 64px);
  padding: clamp(24px, 4vh, 48px) var(--gutter) clamp(64px, 10vh, 120px);
}
.gear-group { scroll-margin-top: 90px; }
.gear-group__title {
  font-stretch: 75%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.75rem); line-height: .9; letter-spacing: -.01em;
  padding-bottom: 14px; border-bottom: 2px solid var(--ink);
}
.gear-group__note { margin-top: 14px; font-weight: 600; }
.gear-list li { padding: .8rem 0; }
.gear-list .qty {
  display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .4em;
  border-radius: 999px; background: var(--ink); color: var(--lime);
  font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.gear-tour { padding: clamp(28px, 4vw, 56px); margin-bottom: clamp(48px, 7vh, 80px); }
.gear-tour__head { display: flex; justify-content: space-between; align-items: end; gap: 1rem 3rem; flex-wrap: wrap; margin-bottom: clamp(24px, 4vw, 48px); }
.gear-tour__title { font-size: clamp(2.8rem, 1.4rem + 5vw, 7rem); }
.gear-tour__head p { max-width: 40ch; opacity: .85; }
.gear-tour__media {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-media); background: var(--ink);
}
.gear-tour__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.gear-tour__media:hover img { transform: scale(1.03); }
.gear-tour__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gear-tour__play { position: absolute; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); }
.gear-tour__media:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; }

.gear-page .footer { padding-top: clamp(32px, 5vh, 56px); }

@media (max-width: 900px) {
  .gear-kit { grid-template-columns: 1fr; }
}

/* ======================================================================
   Pricing (/pricing) — not linked in the menu; shared directly with clients
   ====================================================================== */
.tiers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px);
  padding: clamp(24px, 4vh, 48px) var(--gutter) 0;
}
.tier {
  display: flex; flex-direction: column; gap: 1.2rem;
  padding: clamp(24px, 2.6vw, 40px); border: 2px solid var(--ink); border-radius: var(--radius-panel);
}
.tier__name {
  font-stretch: 75%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.75rem); line-height: .9; letter-spacing: -.01em;
}
.tier__price {
  font-stretch: 75%; font-weight: 800; font-size: clamp(3.4rem, 2rem + 4vw, 6rem); line-height: .85;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  padding-bottom: 1.2rem; border-bottom: 2px solid var(--ink);
}
.tier__unit { font-size: .3em; font-weight: 600; letter-spacing: 0; margin-left: .15em; }
.tier__list { flex: 1; }
.tier__list li { position: relative; padding: .75rem 0 .75rem 1.6rem; }
.tier__list li::before {
  content: ""; position: absolute; left: .1rem; top: 1.05rem; width: .7rem; height: .38rem;
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg);
}
.tier__crew {
  display: grid; gap: .25rem; padding: 1rem 1.1rem; border-radius: var(--radius-media);
  background: var(--ink); color: var(--lime); font-weight: 600; font-size: 1.0625rem; line-height: 1.3;
}
.tier__crew span { font-size: .8125rem; font-weight: 500; opacity: .75; }
.tiers-note {
  max-width: 64ch; padding: clamp(24px, 3vh, 36px) var(--gutter) clamp(64px, 10vh, 120px);
  font-size: 1rem; line-height: 1.5;
}
.tiers-note strong { font-weight: 700; }

@media (max-width: 1000px) {
  .tiers { grid-template-columns: 1fr; max-width: 560px; }
  .tiers-note { max-width: 560px; }
}