/* Goalz-inspired UI layer. Layout and content stay in the existing templates. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap");

:root {
  --goalz-night: var(--brand-navy, #071b33);
  --goalz-deep: var(--brand-deep, #041324);
  --goalz-panel: var(--brand-panel, #123a63);
  --goalz-lime: var(--brand-light, #b9e0ff);
  --goalz-green: var(--brand-blue, #1479d3);
  --goalz-mint: var(--brand-surface, #f1f7fd);
  --goalz-ink: var(--brand-ink, #10243e);
  --goalz-muted: var(--brand-muted, #62758a);
  --goalz-line: color-mix(in srgb, var(--goalz-night) 14%, transparent);
  --goalz-shadow: 0 24px 60px color-mix(in srgb, var(--goalz-deep) 16%, transparent);
  --content-width: 80rem;
  --page-gutter: clamp(1rem, 4vw, 3rem);
  --page-inset: max(var(--page-gutter), calc((100% - var(--content-width)) / 2));
  --section-space: clamp(2.75rem, 5vw, var(--theme-section-space, 4.75rem));
  --layout-gap: clamp(1.5rem, 2.5vw, 2.5rem);
  --card-padding: clamp(1.25rem, 2.5vw, 2rem);
}

.public-page {
  background: var(--goalz-mint);
  color: var(--goalz-ink);
  font-family: "DM Sans", system-ui, sans-serif;
}

.public-page h1,
.public-page h2,
.public-page h3,
.public-page .brand,
.public-page .button,
.public-page .eyebrow,
.public-page .status-badge {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
}

.public-page h1,
.public-page h2,
.public-page h3 { letter-spacing: -.035em; }

.public-page .trials-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-inline: var(--page-inset);
  background: var(--goalz-deep);
  color: #fff;
}

.public-page .contact-bar { display: none; }
.public-page .header-main,
.public-page .trials-nav {
  padding-inline: 0;
}

.public-page .header-main {
  min-width: 0;
  min-height: 5.5rem;
  padding-block: 1rem;
  background: transparent;
}

.public-page .header-main .brand {
  color: var(--goalz-lime);
  font-size: 1.55rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.public-page .header-main .brand-mark,
.public-page .footer-brand .brand-mark {
  width: 2.55rem;
  height: 2.55rem;
  border: 0;
  border-radius: 50% 50% 50% 12%;
  background: var(--goalz-lime);
  color: var(--goalz-night);
  box-shadow: none;
  font-size: .78rem;
  transform: rotate(-8deg);
}

.public-page .header-contact,
.public-page .header-profile { display: none; }

.public-page .trials-nav {
  position: static;
  flex: 1;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: auto;
  min-height: auto;
  display: flex;
  gap: .25rem;
  padding-block: .75rem;
  border: 0;
  background: transparent;
}

.public-page .trials-nav > a,
.public-page .nav-dropdown > summary {
  padding: .85rem .75rem;
  border-radius: .2rem;
  color: rgba(255,255,255,.9);
  background: rgba(38, 61, 66, .84);
  font-family: "Barlow Condensed", sans-serif;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.public-page .trials-nav > a:hover,
.public-page .trials-nav > a:focus-visible,
.public-page .nav-dropdown > summary:hover { background: var(--goalz-green); color: #fff; }

.public-page .trials-nav > .nav-cta {
  background: var(--goalz-lime);
  color: var(--goalz-night) !important;
  border-radius: .2rem;
  padding-inline: 1rem;
}

.public-page .trials-nav > .lang-toggle {
  margin-inline-start: 0;
  border: 0;
  background: rgba(38, 61, 66, .84);
  border-radius: .2rem;
}

.public-page .nav-dropdown-links {
  border: 0;
  border-radius: .2rem;
  background: var(--goalz-panel);
  box-shadow: var(--goalz-shadow);
}

.public-page .registration-banner {
  position: relative;
  z-index: 1;
  padding: .85rem var(--page-inset);
  background: var(--goalz-green);
  color: #fff;
  font-family: "DM Sans", sans-serif;
}

.public-page .registration-banner a { color: var(--goalz-lime); }

.public-page .registration-hero {
  min-height: auto;
  display: grid;
  align-items: center;
  gap: var(--layout-gap);
  padding: var(--section-space) var(--page-inset);
  background: var(--goalz-night);
}

.public-page .registration-hero .pitch-scene {
  background:
    linear-gradient(90deg, rgba(4, 18, 23, .95) 0%, rgba(4, 18, 23, .76) 37%, rgba(4, 18, 23, .35) 69%, rgba(4, 18, 23, .7) 100%),
    url("/assets/hero-poster-fbd34ad6.jpg") 68% center / cover no-repeat,
    radial-gradient(circle at 78% 20%, var(--goalz-panel), var(--goalz-deep) 58%);
  background:
    linear-gradient(90deg, rgba(4, 18, 23, .95) 0%, rgba(4, 18, 23, .76) 37%, rgba(4, 18, 23, .35) 69%, rgba(4, 18, 23, .7) 100%),
    image-set(
      url("/assets/hero-poster-866fadd7.webp") type("image/webp"),
      url("/assets/hero-poster-fbd34ad6.jpg") type("image/jpeg")
    ) 68% center / cover no-repeat,
    radial-gradient(circle at 78% 20%, var(--goalz-panel), var(--goalz-deep) 58%);
}

.public-page .registration-hero .pitch-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(4,18,23,.72));
  pointer-events: none;
}

.public-page .registration-hero .pitch-scene > * { opacity: .15; }
.public-page .registration-hero .pitch-scene .tunnel { opacity: .08; }

.public-page .registration-hero h1 {
  max-width: 10ch;
  color: var(--goalz-lime);
  font-size: clamp(4rem, 7.5vw, 8rem);
  font-weight: 900;
  line-height: .9;
  text-transform: uppercase;
}

.public-page .registration-hero .hero-content { padding-top: 0; }
.public-page .verified-source {
  display: inline-flex;
  border: 0;
  border-radius: 999px;
  background: rgba(217,245,183,.1);
  color: var(--goalz-lime);
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.public-page .hero-copy,
.public-page .registration-intro { color: rgba(255,255,255,.76); }

.public-page .registration-hero .hero-copy {
  max-width: 36rem;
  font-size: 1.04rem;
}

.public-page .hero-actions { gap: .65rem; }
.public-page .button {
  min-height: 3.25rem;
  border: 0;
  border-radius: var(--theme-button-radius, 999px);
  padding-inline: 1.35rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.public-page .button-primary { background: var(--goalz-green); color: #fff; }
.public-page .button-primary:hover,
.public-page .button-primary:focus-visible { background: color-mix(in srgb, var(--goalz-green) 84%, white); }
.public-page .button-secondary { background: rgba(255,255,255,.14); color: #fff !important; border: 1px solid rgba(255,255,255,.12); }
.public-page .button-whatsapp { background: var(--goalz-lime); color: var(--goalz-night); }

.public-page .hero-status { border-color: rgba(255,255,255,.24); }
.public-page .hero-status span,
.public-page .trial-status,
.public-page dt { color: var(--goalz-lime); }

.public-page .registration-panel {
  padding: var(--card-padding);
  border: 1px solid rgba(217,245,183,.25);
  border-top: 3px solid var(--goalz-lime);
  border-radius: var(--theme-card-radius, 1.25rem);
  background: rgba(7,25,31,.72);
  color: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,.2);
  backdrop-filter: blur(12px);
}

.public-page .registration-panel h2 { color: var(--goalz-lime); font-size: clamp(2.5rem, 4vw, 4.8rem); line-height: .9; }
.public-page .registration-panel > .eyebrow,
.public-page .eyebrow { color: var(--goalz-green); }
.public-page .registration-panel .button-primary { width: auto; }

.public-page .section,
.public-page .page-content { background: var(--goalz-mint); color: var(--goalz-ink); }
.public-page .section,
.public-page .final-cta {
  padding: var(--section-space) var(--page-inset);
}
.public-page .page-content {
  max-width: calc(var(--content-width) + var(--page-gutter) * 2);
  padding: var(--section-space) var(--page-gutter);
}
.public-page .page-content.narrow-content { max-width: calc(46rem + var(--page-gutter) * 2); }
.public-page .section-heading { margin-bottom: var(--layout-gap); }
.public-page .home-information > h2 { margin-bottom: var(--layout-gap); text-align: start; }
.public-page .home-information-grid,
.public-page .contact-layout,
.public-page .account-layout,
.public-page .with-sidebar { gap: var(--layout-gap); }
.public-page .form-panel,
.public-page .listing-card,
.public-page .article-card,
.public-page .home-opportunity { padding: var(--card-padding); }
.public-page .home-information article > p:first-child { margin-top: 0; }
.public-page .home-opportunity { margin-bottom: 0; }
.public-page .final-cta p { margin-bottom: 0; }
.public-page .final-cta .hero-actions { flex-shrink: 0; }
.public-page .final-cta .button-primary { background: var(--goalz-night); }
.public-page .page-content .button-secondary,
.public-page .application-panel .button-secondary { background: var(--goalz-lime); color: var(--goalz-night) !important; }
.public-page .section:nth-of-type(odd) { background: #fff; }
.public-page .section-heading { max-width: 56rem; }
.public-page .centered-heading { align-items: flex-start; text-align: start; }
.public-page .section-heading h2,
.public-page .home-information > h2,
.public-page .page-hero h1 {
  color: var(--goalz-ink);
  font-size: clamp(3rem, 6vw, 7rem);
  line-height: 1;
  text-transform: uppercase;
}

.public-page .section-heading p,
.public-page .page-content p,
.public-page .home-information article > p,
.public-page .section-heading .eyebrow { color: var(--goalz-muted); }

.public-page .pathway-section {
  background: var(--goalz-lime);
  color: var(--goalz-night);
}
.public-page .pathway-section .section-heading h2 { color: var(--goalz-night); }
.public-page .pathway-section .pitch-timeline::before { border-color: rgba(7,25,31,.28); }
.public-page .pathway-section .pitch-timeline li::before {
  background: var(--goalz-night);
  border: .55rem solid var(--goalz-lime);
  outline: 1px solid var(--goalz-night);
}
.public-page .pathway-section .pitch-timeline strong { color: var(--goalz-night); }

.public-page .proof-strip { border-color: var(--goalz-night); }
.public-page .standards-section .proof-strip div { border-color: rgba(7,25,31,.18); }
.public-page .standards-section .proof-strip strong { color: var(--goalz-night); }
.public-page .standards-section .proof-strip .standard-tick { border-color: var(--goalz-green); color: var(--goalz-night); }

.public-page .trial-row,
.public-page .programme-card,
.public-page .article-card,
.public-page .event-card,
.public-page .form-panel,
.public-page .account-application,
.public-page .empty-state,
.public-page .experience-card,
.public-page .listing-card {
  border: 1px solid var(--goalz-line);
  border-radius: var(--theme-card-radius, 1.25rem);
  background: #fff;
  box-shadow: none;
}

.public-page .trial-row:hover,
.public-page .programme-card:hover,
.public-page .article-card:hover,
.public-page .listing-card:hover { box-shadow: var(--goalz-shadow); }
.public-page .programme-card { border-top: 4px solid var(--goalz-green); }
.public-page .status-badge { display: inline-flex; align-items: center; padding: .35rem .75rem; line-height: 1.4; border: 0; background: var(--goalz-lime); color: var(--goalz-night); }
.public-page .page-content dt { color: var(--goalz-ink); }
.public-page .event-date,
.public-page .programme-directory h2,
.public-page .programme-directory > h3,
.public-page .experience-card > h2 { background: var(--goalz-night); color: var(--goalz-lime); }
.public-page .programme-number,
.public-page .audience-index { color: var(--goalz-green); }
.public-page .text-link { color: var(--goalz-night); text-decoration-color: var(--goalz-green); }

.public-page .media-section,
.public-page .scouting,
.public-page .final-cta {
  background: var(--goalz-night);
  color: #fff;
}
.public-page .media-section h2,
.public-page .scouting h2,
.public-page .final-cta h2 { color: var(--goalz-lime); }
.public-page .media-section p,
.public-page .scouting-grid p,
.public-page .final-cta p { color: rgba(255,255,255,.72); }
.public-page .media-section .eyebrow { color: var(--goalz-green); }
.public-page .media-section {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "videos" "action";
  align-items: start;
  justify-items: center;
  gap: 2rem;
}
.public-page .media-section::before { display: none; }
.public-page .media-section > div:first-child { width: min(100%, 42rem); text-align: center; }
.public-page .media-section h2 { max-width: none; }
.public-page .media-section .eyebrow { margin: 0 0 1rem; }
.public-page .media-section p:not(.eyebrow) { margin: 1rem auto 0; }
.public-page .media-section > .button { justify-self: center; width: fit-content; max-width: 100%; text-align: center; }
.public-page .final-cta { background: var(--goalz-green); }
.public-page .final-cta h2 { color: #fff; }

.public-page .home-opportunity { border-color: var(--goalz-green); background: #fff; }
.public-page .home-opportunity h3 { color: var(--goalz-night); }
.public-page .directory-footer {
  padding: var(--section-space) var(--page-inset) 1.5rem;
  background: var(--goalz-deep);
  color: rgba(255,255,255,.72);
}
.public-page .footer-brand .brand { color: var(--goalz-lime); }
.public-page .footer-column h2 { color: #fff; }
.public-page .footer-location { color: var(--goalz-green); }
.public-page .footer-column a:hover { color: var(--goalz-lime); }
.public-page .footer-bottom { border-color: rgba(255,255,255,.14); }

.public-page .page-hero {
  min-height: 0;
  display: grid;
  align-content: end;
  background: var(--goalz-night);
  padding: var(--section-space) var(--page-inset);
}
.public-page .page-hero h1 { color: var(--goalz-lime); max-width: 12ch; }
.public-page .page-hero .eyebrow { color: var(--goalz-green); margin: 0 0 1rem; }
.public-page .page-hero-inner > p:not(.eyebrow) { max-width: 45rem; margin: 1.5rem 0 0; color: rgba(255,255,255,.72); }

.public-page input,
.public-page select,
.public-page textarea { border-color: var(--goalz-line); border-radius: .65rem; background: #fff; }
.public-page input:focus,
.public-page select:focus,
.public-page textarea:focus { border-color: var(--goalz-green); outline: 3px solid color-mix(in srgb, var(--goalz-green) 22%, transparent); }

@media (max-width: 1380px) {
  .public-page .trials-header { display: block; }
  .public-page .header-main { min-height: 4.75rem; }
  .public-page .header-main .nav-toggle { display: block; flex: 0 0 auto; }
  .public-page .trials-nav {
    position: absolute;
    inset: 100% 0 auto;
    display: none;
    width: auto;
    max-height: 70svh;
    overflow-y: auto;
    padding: 1rem var(--page-gutter);
    background: var(--goalz-deep);
  }
  .public-page .trials-nav[data-open="true"] {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: .5rem;
  }
  .public-page .trials-nav > * { flex-shrink: 0; }
  .public-page .trials-nav > a,
  .public-page .trials-nav .nav-dropdown > summary { padding: 1rem; font-size: 1rem; white-space: normal; }
  .public-page .nav-dropdown-links { position: static; min-width: 0; margin: .5rem 0 0; box-shadow: none; }
}

@media (max-width: 820px) {
  .public-page .registration-hero { grid-template-columns: minmax(0, 1fr); }
  .public-page .registration-hero h1 { font-size: clamp(4rem, 12vw, 6rem); }
}

@media (max-width: 640px) {
  .public-page .header-main .brand { font-size: 1.25rem; }
  .public-page .registration-panel { margin-top: 0; border-radius: 1rem; }
  .public-page .registration-panel .button-primary { width: 100%; }
  .public-page .section-heading h2,
  .public-page .home-information > h2,
  .public-page .page-hero h1 { font-size: clamp(3rem, 13vw, 5rem); line-height: 1; }
}

[dir="rtl"] .public-page h1,
[dir="rtl"] .public-page h2,
[dir="rtl"] .public-page h3 { font-family: "Noto Kufi Arabic", "DM Sans", sans-serif; letter-spacing: 0; line-height: 1.3; }
[dir="rtl"] .public-page .registration-hero h1 { max-width: 11ch; line-height: 1.12; }
[dir="rtl"] .public-page .centered-heading { align-items: flex-start; text-align: start; }
[dir="rtl"] .public-page .trials-nav > a,
[dir="rtl"] .public-page .nav-dropdown > summary { letter-spacing: 0; }

/* Final phone layout overrides. Keep these after the shared desktop and RTL rules. */
@media (max-width: 767px) {
  :root {
    --page-gutter: 1rem;
    --section-space: 2.5rem;
    --layout-gap: 1.5rem;
    --card-padding: 1.15rem;
  }

  html,
  body { max-width: 100%; overflow-x: clip; }
  body { min-width: 0; }

  .public-page .trials-header { padding-inline: 1rem; }
  .public-page .header-main { min-height: 4.25rem; padding-block: .65rem; gap: .75rem; }
  .public-page .header-main .brand { min-width: 0; max-width: calc(100% - 3.5rem); gap: .65rem; font-size: 1.05rem; }
  .public-page .header-main .brand-mark { flex: 0 0 2.35rem; width: 2.35rem; height: 2.35rem; font-size: .72rem; }
  .public-page .header-main .brand > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .public-page .nav-toggle { flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; }
  .public-page .trials-nav { inset-inline: 0; width: 100%; max-height: calc(100svh - 4.25rem); padding: .75rem 1rem 1rem; }
  .public-page .trials-nav > a,
  .public-page .trials-nav .nav-dropdown > summary { padding: .85rem; font-size: .92rem; }

  .public-page .registration-banner { padding: .7rem 1rem; font-size: .75rem; line-height: 1.5; }
  .public-page .page-hero { padding: 2.5rem 1rem; }
  .public-page .page-hero-inner { width: 100%; min-width: 0; max-width: 100%; }
  .public-page .page-hero h1 { max-width: 100%; font-size: clamp(2.65rem, 12vw, 3.6rem); overflow-wrap: anywhere; }
  .public-page .page-hero-inner > p:not(.eyebrow) { width: 100%; max-width: 100%; margin-top: 1rem; font-size: .95rem; line-height: 1.65; white-space: normal; overflow-wrap: anywhere; }
  .public-page .page-content { width: 100%; padding: 2.5rem 1rem; }
  .public-page .section,
  .public-page .final-cta { padding: 2.75rem 1rem; }
  .public-page .section-heading h2,
  .public-page .home-information > h2 { font-size: clamp(2.45rem, 11vw, 3.35rem); overflow-wrap: anywhere; }
  .public-page .button { min-height: 3rem; padding-inline: 1rem; }

  .public-page .registration-hero { padding: 2.5rem 1rem; gap: 1.5rem; }
  .public-page .registration-hero h1 { font-size: clamp(3.15rem, 14vw, 4.25rem); }
  .public-page .hero-actions { display: grid; width: 100%; gap: .65rem; }
  .public-page .hero-actions .button { width: 100%; }
  .public-page .trial-experience-link { grid-template-columns: minmax(0, 1fr); }
  .public-page .experience-pitch { min-height: 8rem; margin: .8rem .8rem 0; }
  .public-page .experience-caption { padding: 1rem; }

  .public-page .media-section { gap: 1.25rem; text-align: center; }
  .public-page .instagram-panel,
  .public-page .carousel-stage { width: 100%; max-width: 22rem; }
  .public-page .video-card { width: calc(100% - 3.5rem); max-width: 18.5rem; }
  .public-page .video-frame { border-radius: .8rem; }
  .public-page .carousel-button { width: 2.75rem; height: 2.75rem; }
  .public-page .carousel-pagination { gap: .25rem .65rem; }
  .public-page .media-section > .button { width: 100%; }

  .public-page .video-only-grid { gap: 1.25rem; }
  .public-page .video-only-grid > .media-card { flex-basis: 100%; width: 100%; max-width: 21rem; }

  .public-page .stories-intro h2,
  .public-page .story-feature-copy h2,
  .public-page .stories-cta h2 { max-width: none; font-size: clamp(2rem, 10vw, 2.75rem); }
  .public-page .story-grid { margin-block: 2rem; gap: 1.25rem; }
  .public-page .story-feature { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1rem; border-radius: 1rem; }
  .public-page .story-video-card { width: 100%; max-width: 18.5rem; justify-self: center; border-radius: .8rem; }
  .public-page .story-facts { grid-template-columns: minmax(0, 1fr); gap: .85rem; margin-block: 1.5rem; }
  .public-page .stories-cta { flex-direction: column; align-items: stretch; gap: 1.25rem; padding: 1.25rem; border-radius: 1rem; }
  .public-page .stories-cta .button { width: 100%; }

  .public-page .listing-filters,
  .public-page .listing-filters--search { grid-template-columns: minmax(0, 1fr); gap: .9rem; margin-bottom: 2rem; padding: 1rem; border-radius: 1rem; }
  .public-page .listing-filters .search-field,
  .public-page .listing-filters--search .search-field { grid-column: auto; }
  .public-page .listing-filters input,
  .public-page .listing-filters select { min-height: 3rem; }
  .public-page .filter-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 0; }
  .public-page .filter-actions .button { width: 100%; min-width: 0; white-space: normal; }
  .public-page .filter-clear { display: inline-flex; align-items: center; min-height: 3rem; padding-inline: .35rem; }

  .public-page .listing-grid,
  .public-page .article-grid,
  .public-page .programme-grid,
  .public-page .experience-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .public-page .listing-card,
  .public-page .article-card,
  .public-page .form-panel,
  .public-page .empty-state { padding: 1.15rem; border-radius: 1rem; }
  .public-page .listing-card h2,
  .public-page .article-card h2 { font-size: clamp(1.85rem, 9vw, 2.45rem); overflow-wrap: anywhere; }
  .public-page .listing-card dl { grid-template-columns: minmax(0, 1fr); gap: .8rem; }

  .public-page .footer-directory { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .public-page .footer-brand { grid-column: auto; }
  .public-page .footer-bottom { align-items: flex-start; }
}

@media (max-width: 360px) {
  .public-page .header-main .brand { font-size: .95rem; }
  .public-page .header-main .brand-mark { flex-basis: 2.15rem; width: 2.15rem; height: 2.15rem; }
  .public-page .page-hero h1 { font-size: 2.55rem; }
  .public-page .filter-actions { grid-template-columns: minmax(0, 1fr); }
  .public-page .filter-clear { justify-content: center; }
}
