/* Purpose: The complete component layer for the Gully Baba theme.
   One file, one declaration per property, no override layers.

   Type is deliberately smaller than the ritikagupta.co reference: that site sets
   three-word headings at 48px, while these headings run to twelve words. Copying
   its raw sizes made the page shout. The scale below keeps the reference's
   proportions and finish at a size this copy can carry. */

/* ============================================================
   1. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.6rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: var(--stone);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background-color .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--stone); }
.btn--lg { padding: .95rem 1.9rem; font-size: .9375rem; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--stone); }

.section--dark .btn, .hero .btn { background: var(--stone); border-color: var(--stone); color: var(--ink); }
.section--dark .btn:hover, .hero .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--stone); }

/* ============================================================
   2. HEADER
   ============================================================ */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 200;
  background: transparent;
  color: #fff;
  transition: background-color .4s var(--ease);
}
body:not(.home) .site-header,
.site-header.is-stuck {
  background: rgba(26, 24, 20, .95);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; }
.site-header__brand { display: inline-flex; align-items: center; }
.site-header__logo { max-height: 40px; width: auto; }
.site-header__wordmark { font-family: var(--font-head); font-size: 1.125rem; color: #fff; }

.site-header__toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: .5rem; background: none; border: 0; cursor: pointer;
}
.site-header__toggle-bar { display: block; height: 1.5px; width: 100%; background: #fff; transition: transform .28s var(--ease), opacity .15s linear; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) { opacity: 0; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.site-nav { position: fixed; inset: 76px 0 auto; max-height: 0; overflow: hidden; background: rgba(26, 24, 20, .98); transition: max-height .4s var(--ease); }
.site-nav.is-open { max-height: calc(100dvh - 76px); overflow-y: auto; }
.site-nav__list { list-style: none; margin: 0; padding: .5rem var(--gutter) 1.5rem; }
.site-nav__list li { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.site-nav__list a { display: block; padding: 1rem 0; color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.site-nav__cta { margin: 1.5rem var(--gutter); }

@media (min-width: 1025px) {
  .site-header__toggle { display: none; }
  .site-nav { position: static; max-height: none; overflow: visible; display: flex; align-items: center; gap: 2rem; background: none; }
  .site-nav__list { display: flex; align-items: center; gap: 1.75rem; padding: 0; }
  .site-nav__list li { border: 0; }
  .site-nav__list a { position: relative; padding: .35rem 0; font-size: .6875rem; letter-spacing: .18em; color: rgba(255, 255, 255, .75); }
  .site-nav__list a:hover, .site-nav__list .current-menu-item > a { color: #fff; }
  .site-nav__cta { margin: 0; padding: .6rem 1.2rem; font-size: .6875rem; }
}

/* ============================================================
   3. HERO
   ============================================================ */
.hero {
  position: relative; display: flex; align-items: center;
  min-height: 78dvh;
  padding-block: calc(76px + 3rem) 4rem;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.hero__media { position: absolute; inset: 0; }
.hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center right; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20,18,14,.94) 0%, rgba(20,18,14,.86) 30%, rgba(20,18,14,.45) 58%, rgba(20,18,14,.05) 82%, transparent 100%),
    linear-gradient(180deg, rgba(20,18,14,.5) 0%, transparent 28%, transparent 76%, rgba(20,18,14,.45) 100%);
}
/* .hero is a flex row, so its .container would otherwise shrink to content width
   and get centred by its own auto margins - putting the hero copy ~270px right of
   the left edge every other section aligns to. flex:1 makes it fill the line so
   the shared container max-width and gutter apply normally. */
.hero > .container { flex: 1 1 auto; width: 100%; }
.hero__inner { position: relative; z-index: 10; max-width: 36rem; }
.hero__eyebrow {
  display: block; max-width: 30rem; margin-bottom: 1.25rem;
  padding-left: 1rem; border-left: 2px solid var(--accent);
  font-family: var(--font-body); font-size: .6875rem; font-weight: 600;
  letter-spacing: .18em; line-height: 1.7; text-transform: uppercase; color: var(--sand);
}
.hero__heading {
  margin-bottom: 1.25rem;
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  font-weight: 400; line-height: 1.16; letter-spacing: -.015em; color: #fff;
  text-wrap: balance;
}
.hero__sub { margin-bottom: 2rem; max-width: 30rem; font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,.76); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 1024px) {
  .hero { min-height: 76dvh; padding-block: calc(76px + 2rem) 3rem; }
  .hero__image { object-position: 74% center; }
  .hero__media::after { background: linear-gradient(180deg, rgba(20,18,14,.86) 0%, rgba(20,18,14,.62) 44%, rgba(20,18,14,.9) 100%); }
}

/* ============================================================
   4. SECTION HEADERS
   ============================================================ */
/* Section headers get real air beneath them - 2.5rem read as cramped against
   the card grids that follow. */
.benefits__header, .steps__header, .jury__header,
.packages__header, .testimonials__header {
  position: relative;
  max-width: 40rem;
  margin: 0 0 3.5rem;
  padding-top: 1.5rem;
}
@media (min-width: 1025px) {
  .benefits__header, .steps__header, .jury__header,
  .packages__header, .testimonials__header { margin-bottom: 4rem; }
}
.benefits__header::before, .steps__header::before, .jury__header::before,
.packages__header::before, .testimonials__header::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 56px; height: 2px; background: var(--accent);
}
.section--dark .benefits__header::before,
.section--dark .steps__header::before { background: var(--sand); }
.benefits__heading, .steps__heading, .jury__heading,
.packages__heading, .testimonials__heading,
.winners__heading, .videos__heading,
.intro__heading, .magazine__heading, .final-cta__heading {
  margin-bottom: .75rem;
  text-wrap: balance;
}
.benefits__sub, .steps__sub, .jury__sub, .packages__sub,
.testimonials__sub, .magazine__sub, .final-cta__sub, .intro__sub {
  margin: 0; max-width: 34rem;
  font-family: var(--font-head);
  font-size: 1.125rem; font-weight: 400; line-height: 1.5; color: var(--muted);
}

/* ============================================================
   5. PANELS
   ============================================================ */
.benefit, .juror, .package, .testimonial, .step, .final-cta__form {
  position: relative;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.75rem;
  transition: border-color .28s var(--ease), transform .28s var(--ease);
}
.section--white .benefit, .section--white .package,
.section--white .testimonial, .section--white .step { background: var(--stone); }
.benefit:hover, .juror:hover, .package:hover, .testimonial:hover, .step:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Benefit cards carry very little copy, so they lead with the mark and
   sit on a generous square rather than reading as squashed strips. */
.benefit { display: flex; flex-direction: column; gap: .35rem; min-height: 200px; }
.benefit__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: auto;
  background: var(--blush); border: 1px solid var(--rule); border-radius: 2px;
  color: var(--accent);
  transition: background-color .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease);
}
.benefit:hover .benefit__icon { background: var(--accent); border-color: var(--accent); color: #fff; }
.benefit__icon-img { width: 24px; height: 24px; object-fit: contain; }
.benefit__title { margin-top: 1.25rem; }

/* Inline SVG icon set. Stroke inherits from the parent, so one rule covers
   every context the icons appear in. */
.gb-icon { display: block; width: 22px; height: 22px; }

.juror { padding: 0; overflow: hidden; }
.juror__media { aspect-ratio: 4 / 3; overflow: hidden; }
.juror__photo { width: 100%; height: 100%; object-fit: cover; }
.juror__body { padding: 1.5rem; }
.juror__socials { display: flex; gap: .4rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.juror__social { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding-inline: .6rem; border: 1px solid var(--rule); border-radius: 2px; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; }
.juror__social:hover { background: var(--ink); border-color: var(--ink); color: var(--stone); }

.package { display: flex; flex-direction: column; }
.package--featured { border-color: var(--ink); }
.package__price { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.package__amount { display: block; font-family: var(--font-head); font-size: 1.75rem; font-weight: 400; line-height: 1.2; color: var(--ink); }
/* The includes list runs to eleven items. Tighter leading and gaps keep the
   card from towering over everything beside it. */
.package__list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .3rem; }
.package__list-item { position: relative; padding-left: 1.3rem; line-height: 1.45; }
.package__list-item::before { content: ''; position: absolute; left: 0; top: .38em; width: 10px; height: 5px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); }
.package__ideal { margin-bottom: 1.25rem; padding: .7rem .9rem; background: var(--blush); border-radius: 2px; line-height: 1.5; }
.package__actions { margin-top: auto; }
.package__cta { width: 100%; }

/* Several testimonials are only a line long. A quote mark and a floor height
   stop the short ones reading as unfinished next to the long ones. */
.testimonial { display: flex; flex-direction: column; gap: 1rem; min-height: 210px; }
.testimonial::before {
  content: '\201C';
  font-family: var(--font-head);
  font-size: 2.25rem;
  line-height: .8;
  color: var(--accent);
  opacity: .5;
}
.testimonial__person { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.testimonial__photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* ============================================================
   6. SECTIONS
   ============================================================ */
.quote-strip__figure { max-width: 46rem; margin: 0 auto; text-align: center; }
.quote-strip__quote { margin: 0 0 1rem; font-family: var(--font-head); font-size: clamp(1.25rem, .95rem + 1.1vw, 1.6rem); font-weight: 400; line-height: 1.4; letter-spacing: -.012em; color: #fff; text-wrap: balance; }
.quote-strip__points { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.quote-strip__point { padding: .4rem 1rem; border: 1px solid rgba(255,255,255,.22); border-radius: 2px; color: rgba(255,255,255,.8); }

.intro__inner { display: grid; gap: 2.5rem; }
.intro__carousels { display: grid; gap: 1rem; }
@media (min-width: 1025px) { .intro__inner { grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; } }

.benefits__layout { display: grid; gap: 1.5rem; align-items: center; }
.benefits__col { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.benefits__image { width: 100%; border-radius: 2px; border: 1px solid var(--rule); }
@media (min-width: 1025px) { .benefits__layout { grid-template-columns: 1fr 1.1fr 1fr; gap: 2rem; } }

.steps__list { list-style: none; display: grid; gap: 1.5rem; margin: 0; padding: 0; }
@media (min-width: 1025px) { .steps__list { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.steps__actions { margin-top: 2.5rem; }

/* Card grids need a wider gutter than the default 1.5rem, or the hairline
   borders of adjacent cards read as one continuous rule. */
.jury__grid, .packages__grid, .testimonials__grid { list-style: none; margin: 0; padding: 0; gap: 1.75rem; }
@media (min-width: 1025px) {
  .jury__grid, .packages__grid, .testimonials__grid { gap: 2rem; }
  .steps__list { gap: 2rem; }
  .benefits__col { gap: 1.5rem; }
}
.jury__quote { margin: 3rem auto 0; max-width: 40rem; text-align: center; }
.jury__quote blockquote { margin: 0 0 .75rem; font-family: var(--font-head); font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem); font-weight: 400; line-height: 1.45; color: var(--accent); }
.jury__actions { margin-top: 2.5rem; }

.videos__heading, .winners__heading { margin-bottom: 2rem; max-width: 30rem; }

.magazine__inner { display: grid; gap: 2.5rem; align-items: center; }
.magazine__image { width: 100%; border-radius: 2px; border: 1px solid var(--rule); }
.magazine__points { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.25rem; }
.magazine__point { position: relative; padding-left: 1.4rem; }
.magazine__point::before { content: ''; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.magazine__point-icon { width: 32px; height: 32px; object-fit: contain; margin-bottom: .5rem; }
@media (min-width: 1025px) { .magazine__inner { grid-template-columns: 1fr 1fr; gap: 3rem; } }

.final-cta__inner { display: grid; gap: 2.5rem; align-items: start; }
.final-cta__points { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .6rem; }
.final-cta__point { position: relative; padding-left: 1.4rem; }
.final-cta__point::before { content: ''; position: absolute; left: 0; top: .42em; width: 11px; height: 6px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); }
.final-cta__image { width: 100%; margin-top: 1.5rem; border-radius: 2px; border: 1px solid var(--rule); }
@media (min-width: 1025px) { .final-cta__inner { grid-template-columns: 1fr 1fr; gap: 3rem; } }

/* ============================================================
   7. MARQUEE + CAROUSEL
   ============================================================ */
.marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 1.25rem; width: max-content; animation: gb-marquee 40s linear infinite; }
.marquee[data-direction="right"] .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { flex: 0 0 auto; }
.marquee__image { height: clamp(130px, 15vw, 190px); width: auto; border-radius: 2px; object-fit: cover; border: 1px solid var(--rule); }
.marquee__item--logo { padding-inline: 1rem; }
.winners__logo { height: 60px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .55; transition: opacity .28s var(--ease), filter .28s var(--ease); }
.marquee__item--logo:hover .winners__logo { filter: none; opacity: 1; }
@keyframes gb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } .marquee { overflow-x: auto; } }

.videos__track { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 1rem; scrollbar-width: none; }
.videos__track::-webkit-scrollbar { display: none; }
.video-card { flex: 0 0 78%; margin: 0; scroll-snap-align: center; }
@media (min-width: 768px)  { .video-card { flex-basis: 44%; } }
@media (min-width: 1025px) { .video-card { flex-basis: 29%; } }
.video-card__player { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 2px; background: #000; border: 1px solid rgba(255,255,255,.14); }
.video-card__caption { margin-top: .75rem; color: rgba(255,255,255,.62); }
.carousel__controls { display: flex; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.carousel__btn { width: 42px; height: 42px; border-radius: 2px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: #fff; cursor: pointer; transition: background-color .28s var(--ease), color .28s var(--ease); }
.carousel__btn:hover { background: var(--accent); border-color: var(--accent); }
.carousel__btn[disabled] { opacity: .3; cursor: not-allowed; }

/* ============================================================
   8. FORM
   ============================================================ */
.final-cta__form { padding: 1.75rem; }
.gb-form__row { margin-bottom: 1rem; }
.final-cta__form input[type="text"],
.final-cta__form input[type="email"],
.final-cta__form input[type="tel"],
.final-cta__form textarea {
  width: 100%; padding: .75rem .9rem;
  background: var(--stone); border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink); font-size: .9375rem;
  transition: border-color .28s var(--ease);
}
.final-cta__form input:focus, .final-cta__form textarea:focus { outline: none; border-color: var(--accent); }
.final-cta__form textarea { min-height: 110px; resize: vertical; }
.final-cta__form .wpcf7-submit { width: 100%; margin-top: .5rem; padding: .8rem 1.6rem; border: 1px solid var(--ink); border-radius: 2px; background: var(--ink); color: var(--stone); font-size: .875rem; font-weight: 500; cursor: pointer; transition: background-color .28s var(--ease); }
.final-cta__form .wpcf7-submit:hover { background: var(--accent); border-color: var(--accent); }
.wpcf7-not-valid-tip { color: #C0392B; font-size: .75rem; margin-top: .35rem; }
.wpcf7-response-output { margin: 1rem 0 0 !important; padding: .75rem 1rem !important; border-radius: 2px; border-width: 1px !important; font-size: .875rem; }

/* ============================================================
   9. FOOTER
   ============================================================ */
.site-footer { padding-block: 3rem 1.5rem; background: var(--ink); color: rgba(255,255,255,.72); }
.site-footer__grid { display: grid; gap: 2rem; }
@media (min-width: 1025px) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; } }
.site-footer__logo { max-height: 46px; width: auto; margin-bottom: 1rem; }
.site-footer__address { font-style: normal; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer__list a:hover, .site-footer__link:hover { color: var(--accent); }
.site-footer__contact { display: grid; gap: .5rem; align-content: start; }
.site-footer__socials { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.site-footer__social { display: inline-flex; align-items: center; padding: .4rem 1rem; border: 1px solid rgba(255,255,255,.2); border-radius: 2px; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; }
.site-footer__social:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.site-footer__copyright { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .75rem; }

/* ============================================================
   10. MOTION SUPPORT
   ============================================================ */
/* The splitter emits a real space text node between words, so the mask must NOT
   add a margin as well - that doubles every gap in the headline. */
.gb-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
.gb-word > span { display: inline-block; will-change: transform; }
[data-parallax] { will-change: transform; }
.videos__track.is-pinned { overflow: visible; width: max-content; scroll-snap-type: none; padding-right: 10vw; }

.gb-progress { position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 205; pointer-events: none; }
.gb-progress__fill { display: block; height: 100%; width: 0; background: var(--accent); }

.gb-float {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 200;
  padding: .7rem 1.2rem; border: 1px solid var(--ink); border-radius: 2px;
  background: var(--ink); color: var(--stone);
  font-size: .75rem; font-weight: 500; letter-spacing: .04em;
  opacity: 0; transform: translateY(140%); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.gb-float.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.gb-float:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 767px) { .gb-float { right: 1rem; bottom: 1rem; } }

@media print { .gb-progress, .gb-float, .site-header, .marquee { display: none !important; } body { background: #fff; color: #000; } }