/* ============================================================
   Ultimate Football Performance, design tokens
   Style:   monochrome sports-editorial, dark mode, yellow accent
   Colour:  layered charcoal grays (not flat black) for section depth,
            near-white text, --yellow #FFDC00 accent used sparingly
   Type:    Display = Bebas Neue (condensed stadium-signage caps)
            Body    = Inter Tight (clean geometric sans)
   Shape:   pill buttons, rounded-xl cards/images, hairline dividers
   ============================================================ */

:root{
  --bg-0:#101113;   /* deepest layer: hero, why, film */
  --bg-1:#17181C;   /* mid layer: about, services, testimonial, register */
  --bg-2:#1F2126;   /* card / elevated surface */
  --bg-3:#292B31;   /* accent card / highest elevation */
  --card-bg:#0A0B0D;        /* recessed card, darker than page bg */
  --card-bg-accent:#060607; /* recessed accent card, deepest of all */
  --yellow:#FFDC00;
  --text-1:#F4F4F3; /* primary, near white */
  --text-2:#AFB0B4; /* secondary, muted */
  --text-3:#84858B; /* tertiary, faint */
  --hairline:rgba(255,255,255,.10);
  --hairline-soft:rgba(255,255,255,.07);
  --radius:22px;
  --radius-sm:12px;
  --font-display:'Bebas Neue', Impact, sans-serif;
  --font-body:'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease:cubic-bezier(.16,.8,.24,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg-0);
  color:var(--text-1);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-weight:400;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
.section__inner{max-width:1200px;margin:0 auto;padding:0 40px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

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

/* ---------- typography ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--text-2);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:7px;height:7px;border-radius:50%;
  background:var(--yellow);
  flex-shrink:0;
}
.h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.4rem,4.6vw,3.8rem);
  line-height:.98;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--text-1);
  margin:.4em 0 .55em;
}
.lead{font-size:1.2rem;line-height:1.6;color:var(--text-2);max-width:52ch;font-weight:400;}

/* ---------- buttons (pill) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:17px 34px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.02em;
  border-radius:999px;
  border:1.5px solid transparent;
  transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn--primary{background:var(--yellow);color:var(--bg-0);}
.btn--primary:hover{background:var(--text-1);transform:translateY(-2px);}
.btn--ghost{border-color:rgba(255,255,255,.35);color:var(--text-1);}
.btn--ghost:hover{border-color:var(--text-1);background:rgba(255,255,255,.06);transform:translateY(-2px);}
.btn--lg{padding:20px 42px;font-size:.95rem;}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(16,17,19,.6);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s;
}
/* backdrop-filter only above the mobile breakpoint: on an ancestor it becomes the
   containing block for position:fixed descendants, which breaks the full-height
   mobile menu panel below 760px, so it's scoped out there entirely. */
@media (min-width:761px){
  .nav{backdrop-filter:blur(14px) saturate(140%);}
}
.nav.is-scrolled{border-bottom-color:var(--hairline);background:rgba(16,17,19,.88);}
.topbar{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--hairline-soft);
}
.topbar__eyebrow{
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
}
.topbar__logo{height:32px;width:auto;display:block;}
.topbar__logo-text{
  display:none;
  font-family:var(--font-display);
  font-size:1rem;
  letter-spacing:.08em;
  color:var(--text-2);
}
.nav__inner{
  max-width:1200px;margin:0 auto;padding:20px 40px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav__logo{
  display:flex;align-items:center;gap:8px;
}
.nav__logo-img{height:60px;width:auto;display:block;}
.nav__logo-text{
  display:none;
  font-family:var(--font-display);
  font-size:2.1rem;
  letter-spacing:.03em;
  color:var(--text-1);
}
.nav__logo-text .dot{color:var(--yellow);}
.nav__links{display:flex;align-items:center;gap:8px;}
.nav__links a{
  font-size:.82rem;font-weight:500;letter-spacing:.02em;
  color:var(--text-2);
  padding:10px 16px;
  border-radius:999px;
  transition:color .25s,background .25s;
}
.nav__links a:not(.nav__cta):hover{color:var(--text-1);background:rgba(255,255,255,.07);}
.nav__links a.nav__cta{
  background:var(--yellow);color:var(--bg-0);padding:10px 22px;border-radius:999px;
  font-weight:700;margin-left:8px;
  transition:background .3s,transform .3s;
}
.nav__links a.nav__cta:hover{background:var(--text-1);color:var(--bg-0);transform:translateY(-1px);}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;}
.nav__burger span{width:24px;height:2px;background:var(--text-1);border-radius:2px;transition:transform .3s,opacity .3s;}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  background:var(--bg-0);
}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 100% at 15% 0%, rgba(41,43,49,.7) 0%, rgba(16,17,19,0) 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(31,33,38,.55) 0%, rgba(16,17,19,0) 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
}
.hero__grain{
  position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__inner{
  position:relative;z-index:1;
  max-width:1200px;margin:0 auto;padding:190px 40px 120px;
  width:100%;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:64px;
  align-items:stretch;
}
.hero__gallery{order:1;}
.hero__content{order:2;}
.hero__content .eyebrow{margin-bottom:22px;}
.hero__title{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(2.8rem,6.2vw,5.6rem);
  line-height:.92;
  letter-spacing:.005em;
  color:var(--text-1);
}
/* The hero photo (.hero__frame / .hero__slideshow) caps out at max-width:400px around
   this viewport width. Past that point the image stops growing, so the title is locked
   at its max size too instead of continuing to scale via vw, keeping everything in the
   hero visually in sync rather than the text outgrowing the now-static photo. */
@media (min-width:1086px){
  .hero__title{font-size:5.6rem;}
}
.hero__title--accent{color:var(--yellow);}
.hero__sub{
  margin-top:30px;
  max-width:44ch;
  font-size:1.15rem;line-height:1.6;
  color:var(--text-2);
  font-weight:400;
}
.hero__actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:44px;}
.hero__gallery{display:flex;justify-content:flex-end;align-items:stretch;}
.hero__slideshow{
  position:relative;
  width:100%;
  max-width:400px;
  aspect-ratio:4/5;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-2);
  border:1px solid var(--hairline);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
}
/* Fills the full About media column instead of the hero's capped width */
.about__media .hero__slideshow{max-width:none;}
.hero__frame{
  position:relative;
  width:100%;
  max-width:400px;
  aspect-ratio:4/5;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-2);
  border:1px solid var(--hairline);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
}
/* Above the mobile breakpoint, match the photo's height to the text column instead of
   capping its width: the flex parent stretches it to the row height, aspect-ratio derives
   the width from that, and max-height stops it getting oversized on very wide screens. */
@media (min-width:761px){
  .hero__frame{
    width:auto;
    max-width:none;
    height:100%;
    max-height:560px;
  }
}
.hero__frame img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.hero__frame:hover img{transform:scale(1.05);}
.hero__frame::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(16,17,19,0) 55%, rgba(16,17,19,.55) 100%);
  pointer-events:none;
}
.hero__slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.1s ease;
}
.hero__slide.is-active{opacity:1;}
.hero__slide img{width:100%;height:100%;object-fit:cover;}
.hero__slide.img-fallback .img-fallback__label{padding:14px;font-size:.72rem;}
.hero__slide-dots{
  position:absolute;left:0;right:0;bottom:14px;z-index:2;
  display:flex;justify-content:center;align-items:center;gap:2px;
}
.hero__dot{
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:none;padding:0;
  cursor:pointer;
}
.hero__dot::after{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.35);
  transition:background .3s,transform .3s;
}
.hero__dot:hover::after{background:rgba(255,255,255,.6);}
.hero__dot.is-active::after{background:var(--yellow);transform:scale(1.3);}
.hero__scroll{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:1;
  width:28px;height:44px;border:1.5px solid rgba(255,255,255,.35);border-radius:999px;
}
.hero__scroll span{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:4px;height:8px;background:var(--yellow);border-radius:2px;
  animation:scrollDot 1.8s infinite;
}
@keyframes scrollDot{
  0%{opacity:1;top:8px;}
  70%{opacity:0;top:24px;}
  100%{opacity:0;top:8px;}
}

/* ============ MARQUEE ============ */
.marquee{
  background:var(--bg-1);
  color:var(--text-1);
  overflow:hidden;
  white-space:nowrap;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.marquee__track{
  display:inline-flex;
  gap:52px;
  padding:16px 0;
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:.06em;
  font-weight:400;
  /* !important on every sub-property: the site-wide prefers-reduced-motion rule forces
     animation-iteration-count:1 and a near-zero duration on every element via the universal
     selector, which would otherwise make this marquee play once and stop. This ticker is
     purely decorative (no motion sickness risk), so it's deliberately exempted and always loops. */
  animation-name:marquee !important;
  animation-duration:24s !important;
  animation-timing-function:linear !important;
  animation-iteration-count:infinite !important;
  animation-play-state:running !important;
}
.marquee__track span::after{content:'\2022';margin-left:52px;color:var(--yellow);}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ============ SHARED SECTION ============ */
.section{padding:150px 0;}

/* ============ ABOUT ============ */
.about{background:var(--bg-0);}
.about__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:96px;align-items:center;}
.about__body{color:var(--text-2);line-height:1.65;font-size:1.02rem;}
.about__body + .about__body{margin-top:20px;}
.about__copy .lead{margin-bottom:28px;}
.about__stats{display:flex;gap:40px;margin-top:48px;flex-wrap:wrap;}
.stat{display:flex;flex-direction:column;gap:6px;padding-top:20px;border-top:1px solid var(--hairline);}
.stat__num{font-family:var(--font-display);font-size:1.6rem;text-transform:uppercase;letter-spacing:.01em;color:var(--text-1);}
.stat__label{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);}
/* image placeholder fallback */
.img-fallback{display:flex;align-items:center;justify-content:center;background:var(--bg-2);}
.img-fallback img{display:none;}
.img-fallback::after{display:none;}
.img-fallback__label{display:none;font-family:var(--font-body);font-size:.8rem;color:var(--text-2);text-align:center;padding:24px;letter-spacing:.02em;}
.img-fallback .img-fallback__label{display:block;}

/* ============ SERVICES ============ */
.services{background:var(--bg-0);}
.services .h2{max-width:16ch;}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:72px;}
.card{
  background:var(--card-bg);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.card--accent{background:var(--card-bg-accent);border-color:var(--hairline);}
.card__image{
  position:relative;
  aspect-ratio:4/3;
  background:var(--bg-2);
  overflow:hidden;
}
.card__image.img-fallback{background:var(--bg-2);}
.card__image img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);will-change:transform;backface-visibility:hidden;}
.card__image::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(11,12,14,0) 60%, rgba(11,12,14,.5) 100%);
  pointer-events:none;
}
.card:hover .card__image img{transform:scale(1.06);}
.card__body{padding:34px 36px 40px;}
.card__mark{
  font-family:var(--font-display);
  font-size:1rem;
  color:var(--yellow);
  letter-spacing:.05em;
}
.card h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.5rem;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--text-1);
  margin:20px 0 14px;
}
.card p{color:var(--text-2);line-height:1.6;font-size:.98rem;}
.card__list{margin-top:22px;display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--hairline);}
.card__list li{
  font-size:.86rem;font-weight:500;letter-spacing:.01em;
  padding-left:20px;position:relative;
  color:var(--text-1);
}
.card__list li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--yellow);}
.card:hover{box-shadow:0 20px 40px -24px rgba(0,0,0,.5);}

/* ============ WHY ============ */
.why{background:var(--bg-1);}
.why__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:96px;}
.why__list{display:grid;grid-template-columns:1fr 1fr;gap:44px 48px;}
.why__item{border-top:1px solid var(--hairline);padding-top:20px;}
.why__item h3{font-family:var(--font-display);font-weight:400;font-size:1.2rem;text-transform:uppercase;letter-spacing:.01em;color:var(--yellow);margin-bottom:10px;}
.why__item p{color:var(--text-2);line-height:1.55;font-size:.96rem;}

/* ============ COACHES ============ */
.coaches{background:var(--bg-0);}
.coaches .h2{max-width:18ch;}
.coach-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:56px;margin-top:72px;}
.coach__photo{aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:var(--bg-2);margin-bottom:28px;position:relative;}
.coach__photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.coach__photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(16,17,19,0) 60%, rgba(16,17,19,.6) 100%);
  pointer-events:none;
}
.coach__photo:hover img{transform:scale(1.06);}
.coach h3{font-family:var(--font-display);font-weight:400;font-size:1.8rem;text-transform:uppercase;letter-spacing:.01em;color:var(--text-1);}
.coach__role{color:var(--yellow);font-weight:600;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;margin:8px 0 16px;}
.coach p:not(.coach__role){color:var(--text-2);line-height:1.6;}

/* ============ FILM ============ */
.film{background:var(--bg-1);text-align:left;}
.film__lead{margin-top:8px;}
.film__player{margin-top:60px;}
.film__player--standalone{margin-top:0;}
.film__frame{
  position:relative;width:100%;aspect-ratio:16/9;
  background:var(--bg-2);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--hairline);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.5);
}
.film__frame--video wistia-player{position:absolute;inset:0;width:100%;height:100%;display:block;}
.film__frame iframe,.film__frame video{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ============ TESTIMONIAL ============ */
.testimonial{background:var(--bg-1);}
.testimonial .h2{max-width:16ch;}
.testimonial__inner{
  max-width:900px;
  margin-top:56px;
  display:flex;
  align-items:center;
  gap:52px;
  text-align:left;
  padding:56px;
  background:var(--bg-2);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
}
.testimonial__photo{
  flex:none;
  width:160px;height:160px;
  border-radius:50%;
  overflow:hidden;
  background:var(--bg-3);
  position:relative;
}
.testimonial__photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.testimonial__photo:hover img{transform:scale(1.08);}
.testimonial__photo.img-fallback .img-fallback__label{padding:12px;font-size:.7rem;}
.testimonial__content{flex:1;min-width:0;}
.testimonial__mark{font-family:var(--font-display);font-size:3.6rem;line-height:0;display:block;color:var(--yellow);margin-bottom:20px;}
.testimonial blockquote{
  font-family:var(--font-body);
  font-weight:500;
  font-size:clamp(1.05rem,1.7vw,1.3rem);
  line-height:1.6;
  letter-spacing:.002em;
  color:var(--text-1);
}
.testimonial cite{display:block;margin-top:26px;font-style:normal;}
.cite__name{display:block;font-weight:700;font-size:1rem;letter-spacing:.01em;color:var(--text-1);}
.cite__role{display:block;font-size:.82rem;color:var(--text-3);margin-top:6px;}

/* ============ REGISTER ============ */
.register{background:var(--bg-0);}
.register__inner{text-align:center;max-width:720px;}
.register .lead{margin:0 auto;}
.steps{
  display:flex;justify-content:center;gap:44px;flex-wrap:wrap;
  margin:56px 0 52px;
}
.steps li{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  font-size:.86rem;color:var(--text-2);max-width:180px;font-weight:500;
}
.steps li span{
  width:42px;height:42px;border-radius:50%;
  border:1.5px solid var(--yellow);color:var(--yellow);
  font-family:var(--font-display);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}

/* ---------- registration form ---------- */
.register__form-wrap{max-width:720px;margin-top:8px;}
.register-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 20px;
  text-align:left;
  background:var(--bg-2);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:40px;
}
.register-form__botcheck{display:none;}
.register-form__row{grid-column:1 / -1;display:flex;flex-direction:column;gap:8px;}
.register-form__row--half{grid-column:span 1;}
.register-form label{
  font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--text-2);
}
.register-form .required{color:var(--yellow);margin-left:3px;}
.register-form__hint{font-weight:400;color:var(--text-3);}
.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="tel"],
.register-form select,
.register-form textarea{
  width:100%;
  background:var(--bg-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-sm);
  padding:13px 16px;
  font-family:var(--font-body);
  font-size:.95rem;
  color:var(--text-1);
  transition:border-color .25s;
}
.register-form textarea{resize:vertical;min-height:100px;}
.register-form input:focus,
.register-form select:focus,
.register-form textarea:focus{
  outline:none;
  border-color:var(--yellow);
}
.register-form select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23AFB0B4' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;
}
.register-form__actions{align-items:flex-start;gap:16px;}
.register-form__status{font-size:.88rem;line-height:1.5;}
.register-form__status.is-success{color:var(--yellow);}
.register-form__status.is-error{color:#ff8a7a;}

/* ============ FOOTER ============ */
.footer{background:var(--bg-1);color:var(--text-2);padding:90px 0 0;}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:64px;border-bottom:1px solid var(--hairline);}
.footer__brand p{margin-top:16px;line-height:1.6;font-size:.92rem;}
.footer__col h4{font-family:var(--font-body);font-weight:600;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-1);margin-bottom:20px;}
.footer__col a{display:block;margin-bottom:12px;font-size:.92rem;transition:color .2s;}
.footer__col a:hover{color:var(--text-1);}
.footer__bottom{padding:28px 40px;font-size:.78rem;color:var(--text-3);}
.footer__bottom--split{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.footer__credit a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px;transition:color .2s;}
.footer__credit a:hover{color:var(--yellow);}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .about__grid,.why__grid{grid-template-columns:1fr;gap:52px;}
  .cards{grid-template-columns:1fr;}
  .coach-grid{grid-template-columns:1fr;gap:44px;}
  .why__list{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1fr;gap:40px;}
  .testimonial__inner{flex-direction:column;text-align:center;padding:48px 32px;}
  .testimonial__content{text-align:center;}
  .register-form{grid-template-columns:1fr;padding:28px;}
  .register-form__row--half{grid-column:1 / -1;}
}
@media (max-width:760px){
  .nav__links{
    position:fixed;top:112px;left:0;right:0;bottom:0;
    z-index:99;
    background:var(--bg-0);
    opacity:1;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    padding:40px 32px;
    gap:14px;
    transform:translateX(100%);
    transition:transform .35s var(--ease);
  }
  .nav__links.is-open{transform:translateX(0);}
  .nav__links a{width:100%;padding:14px 16px;}
  .nav__burger{display:flex;}
  .section{padding:96px 0;}
  .steps{gap:32px;}

  .hero__inner{
    grid-template-columns:1fr;
    padding:200px 24px 80px;
    text-align:center;
  }
  .hero__gallery{order:-1;justify-content:center;margin-bottom:8px;}
  .hero__slideshow,.hero__frame{max-width:280px;}
  .hero__actions{justify-content:center;}
  .hero__scroll{display:none;}

  .hero__heading{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .hero__heading .eyebrow{margin-bottom:12px;justify-content:center;}
}

/* ============ PURCHASE CONFIRMATION PAGE ============ */
.confirm__logo{
  position:absolute;top:28px;left:40px;z-index:2;
}
.confirm{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--bg-0);
}
.confirm__inner{
  position:relative;z-index:1;
  max-width:1100px;margin:0 auto;padding:120px 40px 80px;
  width:100%;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:72px;
  align-items:stretch;
}
.confirm__card{display:flex;justify-content:flex-end;align-items:stretch;}
.confirm__content{display:flex;flex-direction:column;justify-content:center;}
.confirm__content .h2{max-width:14ch;}
.confirm__actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px;}
.confirm__note{margin-top:32px;font-size:.86rem;line-height:1.6;color:var(--text-3);max-width:44ch;}
.confirm__note a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px;}
.confirm__note a:hover{color:var(--yellow);}

@media (max-width:760px){
  .confirm__logo{top:20px;left:24px;}
  .confirm__inner{
    grid-template-columns:1fr;
    padding:120px 24px 64px;
    text-align:center;
    gap:36px;
  }
  .confirm__card{justify-content:center;}
  .confirm__content{align-items:center;}
  .confirm__actions{justify-content:center;}
  .hero__frame{max-width:280px;}
}