:root {
  --fiji-purple: #4b2d82;
  --fiji-purple-deep: #271545;
  --fiji-purple-soft: #eee8f6;
  --fiji-gold: #c9a227;
  --fiji-cream: #f7f3eb;
  --fiji-ink: #17131d;
}

html,
body {
  background: var(--fiji-cream);
  color: var(--fiji-ink);
}

html:not(.fiji-ready) .Page {
  visibility: hidden;
}

html.fiji-ready .Page {
  visibility: visible;
}

::selection {
  background: var(--fiji-gold);
  color: var(--fiji-purple-deep);
}

:focus-visible {
  outline: 3px solid var(--fiji-gold) !important;
  outline-offset: 4px;
}

.Page,
.HomeAgency {
  background-color: var(--fiji-cream) !important;
}

.PageLoader,
.PageTransition,
.TheNavigation,
.TheNavigation-background,
.HomeFooter,
.TheFooter,
.HomeAwardsList {
  background-color: var(--fiji-purple-deep) !important;
}

.PageLoader-logo,
.PageTransition-logo {
  background: url("/imgs/crest-shield-nico.png") center / contain no-repeat;
  height: min(28rem, 38vw) !important;
  width: min(28rem, 38vw) !important;
}

.PageLoader-logo svg,
.PageTransition-logo svg,
.TheHeader-logoLetters svg,
.TheNavigation-logoLetters svg,
.TheNavigation-letters svg,
.HomeHero-title .HomeLetters svg,
.HomeLettersInterior svg,
.TheFooter-letters svg {
  opacity: 0 !important;
}

.TheHeader-logoLetters,
.TheNavigation-logoLetters,
.TheNavigation-letters,
.HomeLettersInterior,
.TheFooter-letters {
  position: relative;
}

.TheHeader-logoLetters::after,
.TheNavigation-logoLetters::after {
  align-items: center;
  color: var(--fiji-purple);
  content: "FIJI";
  display: flex;
  font-size: clamp(1.8rem, 2.5vw, 3rem);
  font-weight: 700;
  inset: 0;
  justify-content: flex-start;
  letter-spacing: .08em;
  line-height: 1;
  position: absolute;
}

.TheNavigation-logoLetters::after {
  color: #fff;
}

/* #8: center the word FIJI inside the header pill (was flex-start / sitting left). */
.TheHeader-logoLetters::after {
  justify-content: center;
}

.TheNavigation-letters::after {
  align-items: flex-end;
  color: #fff;
  content: "RHO UPSILON";
  display: flex;
  flex-wrap: wrap;
  font-size: clamp(5rem, 17vw, 24rem);
  font-weight: 600;
  inset: 0;
  letter-spacing: -.07em;
  /* .65 collided the two wrapped lines (same class as the footer wordmark bug) */
  line-height: .9;
  position: absolute;
}

.HomeLettersInterior::after {
  align-items: center;
  color: var(--fiji-purple);
  content: "FIJI";
  display: flex;
  font-size: clamp(8rem, 25vw, 34rem);
  font-weight: 600;
  inset: 0;
  justify-content: center;
  letter-spacing: -.08em;
  line-height: .7;
  position: absolute;
}

.TheFooter-letters::after {
  align-items: flex-end;
  color: #fff;
  content: "RHO UPSILON";
  display: flex;
  font-size: clamp(7rem, 18vw, 26rem);
  font-weight: 600;
  inset: 0;
  letter-spacing: -.075em;
  line-height: .66;
  position: absolute;
}

.HomeHero-title {
  position: relative;
}

.HomeHero-title::after {
  background: url("/imgs/crest-shield-nico.png") center / contain no-repeat;
  content: "";
  height: min(21rem, 18vw);
  left: 11%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(18rem, 15.4vw);
}

.HomeHero-title::before {
  color: var(--fiji-purple);
  content: "FIJI";
  font-size: clamp(6rem, 7.2vw, 11rem);
  font-weight: 600;
  left: 37%;
  letter-spacing: .02em;
  line-height: .92;
  position: absolute;
  text-align: left;
  top: 50%;
  transform: translateY(-50%);
  white-space: pre;
  width: 60%;
}

@media screen and (min-width: 1080px) {
  .TheHeader-logo {
    display: none !important;
  }
}

.TheHeader-logoLetters::after,
.HomeHero-title::before,
.HomeLettersInterior::after {
  color: var(--fiji-purple) !important;
}

.TheNavigationBurger-circle,
.AppButton-svgWrapDot {
  background-color: var(--fiji-gold) !important;
}

.TheNavigationBurger-background {
  background-color: var(--fiji-purple-deep) !important;
}

.TheNavigationBurger-label {
  color: #fff !important;
}

.HomeHeroMenu-itemArrowIcon,
.TheNavigation-itemArrow,
.AppButton-svg {
  fill: var(--fiji-gold) !important;
}

/* Open-menu primary nav items sit on --fiji-purple-deep; default ink was near-black and
   unreadable. Force white for legible contrast, gold on hover/focus (fix #7). */
.TheNavigation-itemTitle,
.TheNavigation-itemLink,
.TheNavigation-item a {
  color: #fff !important;
}

.TheNavigation-itemLink:hover,
.TheNavigation-itemLink:focus-visible,
.TheNavigation-item a:hover .TheNavigation-itemTitle,
.TheNavigation-item a:focus-visible .TheNavigation-itemTitle {
  color: var(--fiji-gold) !important;
}

.HomeHero-textText {
  color: var(--fiji-ink) !important;
  max-width: 92rem;
}

.HomeHero-textText::before {
  color: var(--fiji-purple);
  content: "RHO UPSILON AT UC RIVERSIDE · CHARTERED MCMLXXVII";
  display: block;
  font-size: .68em;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 1.2rem;
}

.HomeHero-socials {
  flex-wrap: wrap;
}

.HomeHero-socialLink,
.HomeHeroMenu-itemTitle,
.HomeProjectsDesc-skillsItem,
.HomeAgency-introTitle,
.HomeAgency-listTitle {
  color: var(--fiji-purple) !important;
}

.HomeFeaturedProjectItem-background {
  background: var(--fiji-cream) !important;
}

.HomeFeaturedProjectItem-title {
  color: var(--fiji-ink) !important;
  font-size: clamp(5rem, 8.4vw, 13rem) !important;
  line-height: 1 !important;
  padding-bottom: .06em;
}

/* Slide/section headlines: kill mid-word breaks (e.g. "B/ond", "Lifelong Br") and give the line box
   enough height so glyph bottoms are not clipped by the pinned-rail overflow. */
.HomeFeaturedProjectItem-title,
.HomeProjectsDesc-title,
.HomeExpertises-headTitle,
.HomeExpertisesItem-contentTitle,
.HomeProjectItem-hoverTitle,
.HomeFeaturedProjectItem-titleContainer {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.HomeExpertises-headTitle,
.HomeExpertisesItem-contentTitle {
  line-height: 1.02 !important;
  padding-bottom: .06em;
}

.HomeFeaturedProjectItem-detail.--baseline {
  max-width: 46rem;
}

.HomeProjectItem-image img,
.HomeFeaturedProjectItem-image img,
.HomeExpertisesItem-image img,
.HomeAgency-image img,
.HomeAwardsHero-tropheeBackgroundImage img {
  filter: saturate(.9) contrast(1.02);
}

.HomeProjectItem-hover {
  background-color: color-mix(in srgb, var(--fiji-purple-deep) 90%, transparent) !important;
}

.HomeProjectItem-hover,
.HomeProjectItem-hover * {
  color: #fff !important;
}

.HomeProjectsDesc {
  background: var(--fiji-purple-soft) !important;
}

.HomeProjectsDesc-title,
.HomeProjectsDesc-text {
  color: var(--fiji-ink) !important;
}

/* #3: "Lifelong Brotherhood" overflowed its panel and clipped mid-word ("Brotherho"). Shrink so it
   fits and allow it to wrap at the word boundary instead of being cut. */
.HomeProjectsDesc-title {
  font-size: clamp(3rem, 5vw, 6rem) !important;
  line-height: 1.02 !important;
  max-width: 92%;
  white-space: normal !important;
}

.HomeAwardsHero,
.HomeAwardsHero-container {
  background-color: var(--fiji-purple) !important;
}

.HomeAwardsHero-title,
.HomeAwardsHero-introText,
.HomeAwardsNumbers,
.AwardList,
.AwardList a {
  color: #fff !important;
}

.HomeAwardsHero-tropheeInner {
  position: relative;
}

.AwardsTrophy-canvas {
  opacity: 0 !important;
  pointer-events: none !important;
}

.HomeAwardsHero-tropheeInner::after {
  align-items: center;
  border: 2px solid var(--fiji-gold);
  border-radius: 50%;
  color: #fff;
  content: "HONOR ROLL\A 1977";
  display: flex;
  font-size: clamp(2.4rem, 4.3vw, 7rem);
  font-weight: 600;
  height: min(42rem, 52vw);
  justify-content: center;
  left: 50%;
  letter-spacing: -.04em;
  line-height: .9;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: pre;
  width: min(42rem, 52vw);
  z-index: 2;
}

.AwardList-line {
  background-color: rgba(255, 255, 255, .25) !important;
}

.AwardList-item:hover {
  color: var(--fiji-gold) !important;
}

.fiji-hidden-award,
.fiji-hidden,
.TheNavigation-langSwitcher,
.TheNavigation-videoContainer {
  display: none !important;
}

.fiji-active-award {
  visibility: visible !important;
}

.HomeExpertises {
  background: var(--fiji-cream) !important;
}

.HomeExpertisesItem-background {
  background: #fff !important;
}

.HomeExpertisesItem:nth-child(2n) .HomeExpertisesItem-background {
  background: var(--fiji-purple-soft) !important;
}

.HomeExpertisesItem:nth-child(4) .HomeExpertisesItem-background {
  background: var(--fiji-purple) !important;
}

.HomeExpertisesItem:nth-child(4) .HomeExpertisesItem-content,
.HomeExpertisesItem:nth-child(4) .HomeExpertisesItem-contentTitle,
.HomeExpertisesItem:nth-child(4) .HomeExpertisesItem-contentText,
.HomeExpertisesItem:nth-child(4) .HomeExpertisesItem-index {
  color: #fff !important;
}

.HomeExpertisesItem-contentTitle {
  color: var(--fiji-purple) !important;
  font-size: clamp(5rem, 8vw, 12rem) !important;
}

.HomeExpertisesItem-contentText .list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

.HomeExpertisesItem-contentText .item {
  align-items: center;
  display: flex;
  gap: .8rem;
}

.HomeExpertisesItem-contentText .item::before {
  color: var(--fiji-gold);
  content: "\2605";
}

.HomeAgency-yearItem:first-child {
  color: var(--fiji-purple) !important;
}

.HomeAgency-listItem {
  border-color: color-mix(in srgb, var(--fiji-purple) 22%, transparent) !important;
}

.InfosContact a:hover {
  color: var(--fiji-gold) !important;
}

.HomeFooter-title {
  color: #fff !important;
}

.fiji-copy {
  display: block;
}

.fiji-kicker {
  color: var(--fiji-purple);
  display: block;
  font-size: .75em;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

html.fiji-reduced-motion {
  scroll-behavior: auto !important;
}

html.fiji-reduced-motion .PageLoader,
html.fiji-reduced-motion .PageTransition,
html.fiji-reduced-motion .ScrollBar-component {
  display: none !important;
}

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

@media screen and (max-width: 900px) {
  /* Constrain the Learn more button so its right edge clears the fixed top-right menu pill
     (QA measured a 12px overlap during the slide sections). Width cap only, no layout redesign. */
  .HomeExpertisesItem-button {
    box-sizing: border-box;
    max-inline-size: 140px;
    padding-inline: 14px;
  }
}

@media screen and (max-width: 768px) {
  .TheHeader-logo {
    background: var(--fiji-cream);
    border-radius: 4rem;
    box-shadow: 0 .4rem 1.6rem rgba(23, 19, 29, .28);
    height: 4rem !important;
    width: 7rem !important;
  }

  /* Fixed pills float over scrolling sections. Full opacity + a soft shadow makes them read as
     intentional floating controls that cleanly mask content, instead of letting live text bleed
     through and look like a collision (fix #9). No geometry/layout change. */
  .TheNavigationBurger-background {
    box-shadow: 0 .4rem 1.6rem rgba(23, 19, 29, .28);
  }

  .TheHeader-logoLetters::after {
    font-size: 2rem;
    justify-content: center;
  }

  .HomeHero {
    height: 78rem;
    min-height: 78rem !important;
  }

  .HomeHero-title {
    min-height: initial;
  }

  .HomeHero-title::after {
    height: min(16rem, 41vw);
    left: 20%;
    top: 50%;
    width: min(13.7rem, 35vw);
  }

  .HomeHero-title::before {
    font-size: clamp(3.2rem, 10vw, 5rem);
    left: 42%;
    top: 50%;
    white-space: pre;
  }

  .HomeHero-textText {
    display: block !important;
    font-size: 2.1rem !important;
    height: auto !important;
    line-height: 1.18 !important;
    padding-inline: 1rem;
    text-align: left !important;
  }

  .HomeHero-textText::before {
    font-size: 1.1rem;
    letter-spacing: .06em;
    line-height: 1.15;
    margin-bottom: 1.4rem;
  }

  .HomeHero-socials {
    gap: 1.2rem 2rem !important;
  }

  .HomeProjectItem-hoverHead {
    align-items: center;
    display: flex !important;
    font-size: 1.05rem;
    font-weight: 600;
    justify-content: space-between;
    left: 0;
    padding: 1.2rem;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
  }

  .HomeProjectItem-hoverHeadCat {
    line-height: 1.15;
    max-width: 58%;
  }

  .HomeProjectItem-hoverHeadYear {
    padding: .4rem 1rem !important;
  }

  .HomeFeaturedProjectItem-title,
  .HomeExpertisesItem-contentTitle {
    font-size: clamp(4.6rem, 14vw, 7rem) !important;
    overflow-wrap: anywhere;
  }

  .HomeExpertisesItem-contentText .item {
    font-family: "Alliance Neue", sans-serif !important;
    font-size: 1.3rem;
    line-height: 1.2;
  }

  .HomeFeaturedProjectItem-detail.--baseline {
    max-width: 20rem;
  }

  .HomeAwardsHero-tropheeInner::after {
    font-size: clamp(2rem, 7vw, 4rem);
    height: min(26rem, 68vw);
    width: min(26rem, 68vw);
  }

  .AwardList-itemAward,
  .AwardList-itemWebsite {
    font-size: max(12px, 1.15rem) !important;
    overflow-wrap: anywhere;
  }

  .TheNavigation-letters::after,
  .TheFooter-letters::after {
    font-size: clamp(5rem, 18vw, 9rem);
  }
}

/* Events calendar (injected by fiji-reskin.js applyEventsCalendar) */
.fiji-events {
  background: var(--fiji-cream);
  padding: clamp(6rem, 10vw, 12rem) 0;
}

.fiji-events-inner {
  margin: 0 auto;
  max-width: 120rem;
  padding: 0 clamp(2rem, 6vw, 8rem);
  width: 100%;
}

.fiji-events-kicker {
  color: var(--fiji-purple);
  font-size: clamp(1.1rem, 1.3vw, 1.5rem);
  font-weight: 700;
  letter-spacing: .18em;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.fiji-events-title {
  color: var(--fiji-ink);
  font-size: clamp(4rem, 7vw, 9rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: .95;
  margin-bottom: clamp(3rem, 5vw, 6rem);
}

.fiji-events-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fiji-events-item {
  align-items: start;
  border-top: 1px solid color-mix(in srgb, var(--fiji-purple) 22%, transparent);
  display: grid;
  gap: clamp(2rem, 5vw, 6rem);
  grid-template-columns: minmax(12rem, 18rem) 1fr;
  padding: clamp(3rem, 4vw, 5rem) 0;
}

.fiji-events-item:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--fiji-purple) 22%, transparent);
}

.fiji-events-date {
  align-items: baseline;
  color: var(--fiji-purple);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
}

.fiji-events-month {
  font-size: clamp(1.6rem, 2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fiji-events-day {
  font-size: clamp(4rem, 6vw, 7rem);
  font-weight: 600;
  line-height: .8;
}

.fiji-events-year {
  color: var(--fiji-gold);
  font-size: clamp(1.4rem, 1.6vw, 1.8rem);
  font-weight: 700;
}

.fiji-events-name {
  color: var(--fiji-ink);
  font-size: clamp(2.4rem, 3.4vw, 4rem);
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}

.fiji-events-meta {
  color: var(--fiji-purple);
  font-size: clamp(1.3rem, 1.5vw, 1.7rem);
  font-weight: 600;
  margin-bottom: 1.4rem;
}

.fiji-events-desc {
  color: var(--fiji-ink);
  font-size: clamp(1.5rem, 1.8vw, 2rem);
  line-height: 1.4;
  margin-bottom: 2rem;
  max-width: 52rem;
  opacity: .82;
}

.fiji-events-cta {
  align-items: center;
  border: 1px solid var(--fiji-purple);
  border-radius: 4rem;
  color: var(--fiji-purple);
  display: inline-flex;
  font-size: clamp(1.2rem, 1.4vw, 1.5rem);
  font-weight: 600;
  gap: .8rem;
  padding: 1rem 2.4rem;
  transition: background-color .3s ease, color .3s ease;
}

.fiji-events-cta::after {
  color: var(--fiji-gold);
  content: "\2192";
}

.fiji-events-cta:hover {
  background: var(--fiji-purple);
  color: #fff;
}

.fiji-events-cta:hover::after {
  color: var(--fiji-gold);
}

@media screen and (max-width: 768px) {
  .fiji-events-item {
    gap: 1.4rem;
    grid-template-columns: 1fr;
  }
}

/* #5: AppButton label has a stuck slide-in transform (-63px) that overflow:hidden clips ("EARN MORE").
   Pin the label to its final position and let the button show it whole. */
.HomeExpertisesItem-button .AppButton-label,
.HomeAgency-introButton .AppButton-label,
.HomeAwardsHero-introButton .AppButton-label {
  transform: none !important;
}

.HomeExpertisesItem-button,
.HomeAgency-introButton,
.HomeAwardsHero-introButton {
  overflow: visible !important;
}

/* #6: keep the injected calendar above the following section so its last CTA is never overlapped. */
.fiji-events {
  position: relative;
  z-index: 1;
}

/* R2: mobile featured card - the "Explore the moment" button collided with the absolutely-positioned
   category label in the bottom band. The whole card links already, so drop the redundant mobile
   button to remove the overlap. */
@media screen and (max-width: 768px) {
  .HomeFeaturedProjectItem-buttonMobile {
    display: none !important;
  }
}

/* #772: the dark HomeAwardsList has margin-top:-169px + z-index:10, pulling it up over the calendar's
   last CTA ("Volunteer to lead"). Zero that overlap only where it follows the injected calendar. */
.fiji-events + .HomeAwardsList {
  margin-top: 0 !important;
}

/* 776: at tablet/intermediate widths the featured-card title ran 3 tall lines and its bottom
   ("Forward") overlapped the "03 / category" meta row. Downsize the featured title <=768 so the
   lines clear the meta. */
@media screen and (max-width: 768px) {
  .HomeFeaturedProjectItem-title {
    font-size: clamp(2.8rem, 10vw, 5.5rem) !important;
  }
}

/* R3: real month-grid calendar (built by fiji-reskin.js applyEventsCalendar) */
.fiji-cal-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 5rem);
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.fiji-cal-card {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--fiji-purple) 16%, transparent);
  border-radius: 1.6rem;
  padding: clamp(2rem, 3vw, 3.4rem);
}

.fiji-cal-monthhead {
  align-items: baseline;
  border-bottom: 1px solid color-mix(in srgb, var(--fiji-purple) 16%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  justify-content: space-between;
  margin-bottom: 1.4rem;
  padding-bottom: 1.4rem;
}

.fiji-cal-monthname {
  color: var(--fiji-purple);
  font-size: clamp(1.9rem, 2.4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -.01em;
}

.fiji-cal-when {
  color: var(--fiji-gold);
  font-size: clamp(1.1rem, 1.3vw, 1.4rem);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.fiji-cal-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.fiji-cal-table th {
  color: var(--fiji-purple);
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  font-weight: 700;
  letter-spacing: .06em;
  opacity: .55;
  padding: .5rem 0;
  text-transform: uppercase;
}

.fiji-cal-table td {
  height: clamp(3.6rem, 8vw, 4.4rem);
  padding: .2rem 0;
  text-align: center;
}

.fiji-cal-day {
  color: var(--fiji-ink);
  font-size: clamp(1.3rem, 1.4vw, 1.6rem);
  font-weight: 500;
}

.fiji-cal-day span {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  height: clamp(3.2rem, 8vw, 4rem);
  justify-content: center;
  width: clamp(3.2rem, 8vw, 4rem);
}

/* Gold event-day marker - a full solid circle, legible at 390 (not a small dot). */
.fiji-cal-marked span {
  background: var(--fiji-gold);
  box-shadow: 0 .3rem 1rem color-mix(in srgb, var(--fiji-gold) 45%, transparent);
  color: var(--fiji-purple-deep);
  font-weight: 800;
}

.fiji-cal-detail {
  margin-top: 1.8rem;
}

.fiji-cal-event {
  color: var(--fiji-ink);
  font-size: clamp(1.9rem, 2.2vw, 2.6rem);
  font-weight: 600;
  margin-bottom: .8rem;
}

.fiji-cal-desc {
  color: var(--fiji-ink);
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  line-height: 1.42;
  margin-bottom: 1.6rem;
  opacity: .82;
}

.fiji-cal-serve {
  align-items: center;
  background: var(--fiji-purple-soft);
  border-radius: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 3rem;
  justify-content: space-between;
  padding: clamp(2rem, 3vw, 3rem);
}

.fiji-cal-serve .fiji-cal-desc {
  margin-bottom: 0;
  max-width: 62rem;
}

@media screen and (max-width: 768px) {
  .fiji-cal-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   R4 placement / visibility pass
   ========================================================================= */

/* #1 - Unify the lavender hero backdrop. The visible "pillar" is the pinned .HomeProjectsDesc panel
   bleeding into the hero from x≈490; the crest was stranded on cream to its left. Paint a matching
   lavender field to the left of that bleed so the band reads as one backdrop centered behind BOTH the
   crest and the "FIJI" wordmark, ending before the right-side photo. Desktop only. */
@media screen and (min-width: 1080px) {
  .HomeHero-content {
    isolation: isolate;
    position: relative;
  }

  .HomeHero-content::before {
    background: var(--fiji-purple-soft);
    bottom: 0;
    content: "";
    left: 25%;
    position: absolute;
    top: 0;
    width: 73%;
    z-index: -1;
  }
}

/* #3: The medallion (letters / HONOR ROLL / 1977) text sat white-on-bright-photo with no scrim. Fill the
   medallion with a soft dark radial scrim and add a text-shadow so the type stays legible. */
.HomeAwardsHero-tropheeInner::after {
  background: radial-gradient(circle at center, rgba(39, 21, 69, .62) 0%, rgba(39, 21, 69, .42) 55%, rgba(39, 21, 69, .12) 100%);
  text-shadow: 0 .2rem 1.2rem rgba(23, 19, 29, .55);
}

/* #4 (mitigation) - keep the Lifelong Brotherhood copy + 00–03 index in their own stacking layer so
   the incoming purple Honor Roll panel doesn't clip them mid-transition. Stacking only, no layout. */
.HomeProjectsDesc-content {
  position: relative;
  z-index: 2;
}

/* #5 - the giant RHO UPSILON footer wordmark was cut mid-letter at the page bottom with dead space
   above and the two lines colliding. Loosen the line box so the lines separate, and lift the block so
   it fills the space above and bleeds cleanly at the baseline instead of through a glyph. */
.TheFooter-letters {
  transform: translateY(-14%);
}

.TheFooter-letters::after {
  line-height: .78;
}

/* #6 - anchor jumps to the footer land the CTA headline under the fixed pills; give it clearance. */
.HomeFooter-title {
  scroll-margin-top: 8rem;
}

@media screen and (max-width: 768px) {
  /* #6 - while the dark footer owns the screen (toggled by enhanceFooterPills), fade the fixed FIJI +
     MENU pills so they stop covering a word of the CTA headline. */
  html.fiji-at-footer .TheHeader,
  html.fiji-at-footer .TheNavigationBurger {
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }

  /* #7 - golf/honor rows: top-align the label to the (often two-line) name, add a real gap between the
     crowded center columns, and trim the large empty dark space below the last row. */
  .AwardList-item {
    align-items: flex-start;
    column-gap: 1rem;
  }

  .HomeAwardsList {
    padding-bottom: 6rem !important;
    /* The 08/04 index header hugged the color break with the cream "Serve on the Board" block above
       it. Add matching top breathing room so the section opens with clear rhythm, not crammed. */
    padding-top: 6rem !important;
  }

  /* #8 - Serve/Connect involvement lists: the template .breaker spacers made row gaps uneven (a larger
     gap before "Philanthropy Chair"). Drop the spacers and stack the items with one consistent gap. */
  .HomeExpertisesItem-contentText .breaker {
    display: none !important;
  }

  .HomeExpertisesItem-contentText .list {
    flex-direction: column;
    gap: 1.1rem;
  }

  /* #9 - give the hero bottom link row right-edge breathing room (the "X" sat tight to the edge). */
  .HomeHero-socials {
    padding-inline-end: 1rem;
  }
}

/* ============================================================================
   R5 placement / visibility pass - measured issues D1 + T1–T5.
   Template breakpoints: <=768 mobile, 769–1079 tablet, >=1080 desktop, so the
   tablet fixes use 769px–1079px (covers both 820 portrait and 1024 landscape).
   ========================================================================= */

/* D1 - desktop: the MCMLXXVII year block sits inside .HomeAgency-galleryColBottom, which bleeds
   ~2.8vw past the right viewport edge (photo bleed reads intentional; sliced glyphs do not - the
   section has overflow:hidden, so the year was cut mid-glyph). Every metric in this template is
   vw-proportional (rem = .69444vw), so the bleed scales with viewport width: shift the year block
   left by 3vw to tuck its right edge just inside 100vw at any desktop width, preserving the
   staggered two-line layout. */
@media screen and (min-width: 1080px) {
  .HomeAgency-year {
    transform: translateX(-3vw);
  }
}

@media screen and (min-width: 769px) and (max-width: 1079px) {
  /* T1 - the gallery photo column carries transform:translate3d(0,100%,0), hanging it down over
     the values paragraphs (covered line-ends) while the row itself overflowed the viewport and
     clipped MCMLXXVII. Drop the hang and let the column wrap onto its own row inside the gallery,
     right-aligned - the same in-flow stacking mobile uses. The list below keeps its own margin,
     so nothing overlaps and the year stays inside the viewport. */
  .HomeAgency-gallery {
    flex-wrap: wrap;
  }

  .HomeAgency-galleryColBottom {
    margin-bottom: 0 !important;
    margin-left: auto;
    transform: none !important;
  }

  /* T2 - "Ways to Stay Involved" rows kept the desktop 44.8rem image next to a width:100% text
     column: the image started exactly at the headline's bounding edge (0px gutter) and ran up to
     90px past the viewport. Cap the image to fit beside the text, let the text column actually
     shrink, guarantee a real gutter, and step the display headline down so long titles
     ("Re-charter") don't force the image back out of the viewport. */
  .HomeExpertisesItem-innerSticky {
    /* rem shrinks on tablet-landscape (rem = .69444vw), so floor the gutter at a real 25px. */
    gap: max(2.4rem, 25px);
  }

  .HomeExpertisesItem-content {
    min-width: 0;
  }

  .HomeExpertisesItem-imageContainer {
    width: min(44.8rem, 40vw) !important;
  }

  .HomeExpertisesItem-contentTitle {
    font-size: clamp(4rem, 5.5vw, 8rem) !important;
  }

  /* T3 - open burger-menu overlay: the socials column ships margin-right:-10rem, pushing
     Instagram/X/Facebook/LinkedIn ~15px past the viewport (every label clipped mid-letter).
     Desktop + mobile overlays are clean; zero the pull only in the tablet range. */
  .TheNavigation-infosContact .InfosContact-col.--socials {
    margin-right: 0 !important;
  }

  /* T4 - footer info row: the second column is pulled margin-left:-8rem into the address column,
     rendering "…GRADUATE CHAPTER@UCRFIJIGRADS" run together at ~820. Zero the pull; the row's
     auto margins absorb the shift, restoring a clear gap at every tablet width. */
  .TheFooter-infosContact .InfosContact-col:nth-child(2) {
    margin-left: 0 !important;
  }

  /* T5 - fixed FIJI header logo renders dark-on-dark (~1.1:1) over the awards/honor-roll/footer
     sections and the open nav overlay in this range. Reuse the mobile white-pill treatment at the
     logo's native tablet size so the wordmark stays legible over every backdrop. */
  .TheHeader-logo {
    background: var(--fiji-cream);
    border-radius: 4rem;
    box-shadow: 0 .4rem 1.6rem rgba(23, 19, 29, .28);
  }
}

/* ============================================================================
   D1-C2: .fiji-subnav - appended page-link list (injectSubnav in fiji-reskin.js)
   inside the --address column of the burger overlay's .TheNavigation-infosContact
   and the footer's .TheFooter-infosContact. In-column placement keeps every
   audited column exactly where it was and paints at all breakpoints (a sibling
   row lands in a non-painting band of the overlay at >=769px).
   ========================================================================= */
.fiji-subnav {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2.4rem;
  margin-top: 2rem;
}

.fiji-subnav-label {
  color: var(--fiji-gold);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.fiji-subnav-link {
  color: #fff !important;
  font-size: 1.4rem;
  transition: color .3s ease;
}

.fiji-subnav-link:hover,
.fiji-subnav-link:focus-visible {
  color: var(--fiji-gold) !important;
}

/* ============================================================================
   T6–T8 - burger-overlay tablet collisions (769–1079 only; desktop >=1080 and
   mobile <=768 render correctly and are untouched). Measured at 820x1180 and
   1024x768 on the live deploy, menu open.
   ========================================================================= */
@media screen and (min-width: 769px) and (max-width: 1079px) {
  /* T6 - open overlay: .TheNavigation-top lays the nav-title list and the info/address
     column side by side, but both children carry max-width:42rem and the row is
     over-constrained at ~820 portrait, so flex shrinks the list to min-content (exactly
     the width of "Brotherhood") and the info column starts at its right edge - 0px
     gutter, the address text touches the title. Shrinking the title font alone cannot
     help: flex would hand the freed space straight back to both columns and the gap
     would stay 0. A rigid column-gap is the one spacing flexbox may never collapse;
     the info column absorbs the shift (it has ample slack for its content). Floor it
     at 32px because rem is viewport-proportional and dips to ~7px at 1024 landscape. */
  .TheNavigation-top {
    column-gap: max(3.2rem, 32px);
  }

  /* T7 - fixed-header MENU pill, overlay open: the vendor hides the label by sliding
     the pill's SVG mask right (.--isOpen .TheNavigationBurger-content
     { mask-position:6rem 50% }) so only the gold disc (the close button) survives -
     that is exactly how desktop and mobile render the open state (no label at all).
     In this range the burger never receives .--isShow, and the vendor rule
     .TheNavigationBurger:not(.--isShow) .TheNavigationBurger-content { mask:none }
     disables that mask, so the label stays painted and the disc (scaled to 1.5x on
     open) covers its tail: "MEN". Replicate the desktop/mobile open-state
     relationship with an opacity fade - full "MENU" while closed (disc is a mere
     8px dot then, no overlap), label gone while open. */
  .TheNavigationBurger-label {
    transition: opacity .3s ease;
  }

  .TheNavigationBurger.--isOpen .TheNavigationBurger-label,
  .TheNavigationBurger.--isChanging .TheNavigationBurger-label {
    opacity: 0;
  }

  /* T8 - the injected "PAGES · Give" subnav row sat 21px (820) / 14px (1024) under
     the address block; the column's own rhythm breathes much wider. Floor the gap at
     a real 28px (2.4rem collapses to ~17px at 1024 landscape). Overlay only - the
     footer copy of the subnav is fine at every width. */
  .TheNavigation-infosContact .fiji-subnav {
    margin-top: max(2.4rem, 28px);
  }
}

/* ============================================================================
   R6 - B1 hero collapse at exactly 768px portrait + B2 frosted pills.
   fiji-r6-marker
   ========================================================================= */

/* B1 - at 768x1024 the vendor's iPad root-font rule
   `(orientation:portrait) and (min-width:768px) and (max-width:1180px) and
    (min-height:768px) and (max-height:1180px) { html { font-size:1.30208vw } }`
   fires from width 768 (rem = 10px), but the vendor's MOBILE layout CSS still
   applies at max-width:768 and is sized for the portrait-phone root font
   (2.66667vw ≈ 20.5px at that width). Every rem-based box halves while the
   hero-title's JS-driven resting transform is computed against the mismatched
   metrics, so the crest ::after and the wordmark ::before land at y≈554–714
   ON TOP of the intro paragraph (y≈512–588). Width 767 (phone rem, clean) and
   769+ (tablet layout + iPad rem, the audited-clean pair) are both fine - the
   defect exists only where mobile layout meets iPad rem: width exactly 768,
   portrait. Fix: keep the mobile layout on the mobile root font there, so 768
   renders as the same proven phone layout as 767/390. !important is required
   to outrank the vendor's later-loaded entry CSS at equal specificity. */
@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 768px) {
  html {
    font-size: 2.6666666667vw !important;
    font-size: calc(2.66667vw - var(--sbw) / 375 * .1) !important;
  }
}

/* B2 - the fixed MENU + FIJI pills are fully opaque, so content scrolling under
   the top band gets chopped mid-word ("04 GOLF AW", "November 2026", the
   Chartered-1977 paragraph, the desktop kicker…). Class fix: frosted glass,
   mirroring the /give sticky header's established recipe
   (fiji-subpage.css .site-header: color-mix 88% cream + backdrop blur 10px),
   so passing text reads as ghosted-behind-glass instead of amputated. The dark
   MENU pill uses its own tone (--fiji-purple-deep) at the same alpha + blur.
   Geometry, position, and shadows are untouched. This supersedes the earlier
   "full opacity masks content" call in fix #9 - translucency + blur is the
   established pattern now. */
.TheNavigationBurger-background {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: color-mix(in srgb, var(--fiji-purple-deep) 88%, transparent) !important;
}

/* The cream FIJI pill only exists at <=1079 (the logo node is display:none at
   >=1080); one block re-tints both the <=768 and the 769–1079 (T5) pill. */
@media screen and (max-width: 1079px) {
  .TheHeader-logo {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--fiji-cream) 88%, transparent);
  }
}

/* ------- Mobile fixes 2026-08-19 (Nico phone review) ------- */

/* Expertise-card "Learn more" buttons: the GSAP reveal class (--is-show) never
   fires for the first card, leaving a 0x0 untappable button. Force visible;
   the buttons are plain anchors and need no entrance animation to function. */
.HomeExpertisesItem-button {
  min-height: 44px;
  min-width: 120px;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  visibility: visible !important;
}

@media screen and (max-width: 768px) {
  /* Hero on phones: the vendor floats crest + wordmark on a full-viewport
     animated layer that collides with the header and leaves a dead band.
     Drop the floating layer and put crest + FIJI in the content flow. */
  .HomeHero-title {
    display: none !important;
  }

  .HomeHero-contentInner::before {
    background: url("/imgs/crest-shield-nico.png") center / contain no-repeat;
    content: "";
    display: block;
    height: 20vh;
    margin: 2rem auto 1rem;
    order: -2;
    width: 60vw;
  }

  .HomeHero-contentInner::after {
    color: var(--fiji-purple);
    content: "FIJI";
    display: block;
    font-size: 19vw;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1;
    margin-bottom: 2.4rem;
    order: -1;
    text-align: center;
  }

  .HomeHero-contentInner {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* No overlay to clear on phones: collapse the desktop spacer. */
  .HomeHero-textFakeTitle::before {
    padding-top: 0 !important;
  }
}

/* ------- Desktop menu reachability 2026-08-19 (Edgar review: "very difficult
   to get to the main menu page") -------
   The vendor scroll-reveals the MENU burger from scale(0); pinned at the top of
   the page there is no menu affordance, and the header's 4 inline links only
   cover home-page anchors (Contact / Careers / News / Network / Newsletter live
   only in the overlay). Pin a always-visible MENU control top-right on desktop
   (mirroring the mobile placement, clear of the top-left inline nav) so the full
   overlay is reachable from anywhere. */
@media screen and (min-width: 769px) {
  .TheNavigationBurger {
    align-items: center;
    display: flex !important;
    height: 6rem !important;
    justify-content: center;
    min-width: 12rem !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    right: 3.2rem;
    top: 2.4rem;
    transform: none !important;
    width: auto !important;
    z-index: 50;
  }

  .TheNavigationBurger-background {
    background-color: var(--fiji-purple-deep) !important;
    border-radius: 4rem;
    box-shadow: 0 .4rem 1.6rem rgba(23, 19, 29, .28);
    inset: 0;
    opacity: 1 !important;
    position: absolute;
    transform: none !important;
  }

  .TheNavigationBurger-content {
    align-items: center;
    display: flex !important;
    gap: 1rem;
    -webkit-mask: none !important;
    mask: none !important;
    opacity: 1 !important;
    padding: 0 2rem;
    position: relative;
    visibility: visible !important;
    z-index: 1;
  }

  .TheNavigationBurger-label {
    color: #fff !important;
    font-weight: 700;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* The vendor's internal label is masked/transformed by the reveal animation and
     won't paint reliably when forced visible; paint our own on the pill. */
  .TheNavigationBurger::after {
    color: #fff;
    content: "MENU";
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    left: 0;
    letter-spacing: .12em;
    pointer-events: none;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }

  /* Keep the pill background; hide only the animated internals (label/lines/disc)
     so the pill reads as a clean "MENU" button via the pseudo-element above. */
  .TheNavigationBurger-lines,
  .TheNavigationBurger-label,
  .TheNavigationBurger-circleWrap {
    visibility: hidden !important;
  }
}

/* ================= Nico phone review 2026-08-24 =================
   Five reported defects, all reproduced. Root causes noted per block. */

/* N1 - "FIJI isn't centered in that pill" + "MENU is a completely different size".
   Two separate causes: (a) the FIJI pseudo-element is inset:0 on the LETTERS box,
   which is narrower than the padded pill, so centering happened in the wrong box;
   (b) FIJI used clamp(1.8rem,2.5vw,3rem) while MENU used a flat 1.5rem, so the two
   pills never matched at any viewport. Pin both to one type spec and center FIJI
   against the pill itself. */
.TheHeader-logo {
  align-items: center;
  display: flex;
  justify-content: center;
}

.TheHeader-logoLetters {
  margin: 0 auto;
}

.TheHeader-logoLetters::after,
.TheNavigation-logoLetters::after {
  font-size: 1.5rem;
  justify-content: center;
  letter-spacing: .12em;
  text-align: center;
}

/* N2 - "Learn more is tiny font in a big bubble" + "shows up a different amount
   on each card". The vendor .AppButton is a 6rem CIRCLE built for an icon
   (border-radius:100%, fixed 6rem square); forcing a text label into it produced
   a stretched bubble with default-small type. Make these what they actually are:
   a text pill. Also normalise the top margin so the button sits the same distance
   under every card's content instead of drifting per card. */
.HomeExpertisesItem-button,
.HomeAgency-introButton,
.HomeAwardsHero-introButton {
  border-radius: 999px !important;
  height: auto !important;
  margin-top: 2.4rem !important;
  min-height: 48px;
  padding: 1.2rem 2.6rem !important;
  width: auto !important;
}

.HomeExpertisesItem-button .AppButton-label,
.HomeAgency-introButton .AppButton-label,
.HomeAwardsHero-introButton .AppButton-label {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: .1em;
  white-space: nowrap;
}

/* N3 - REVERTED 2026-08-24. I tried killing the mobile scroll-pin in CSS
   (card height auto + inner static). It measured well (cards 1688->880) but
   RENDERED as all five cards piled on top of each other: the stack is driven by
   GSAP/ScrollTrigger, not CSS, so removing the pin removes the positioning that
   the JS is still computing against. Do not retry this as a CSS override — the
   section needs a real rebuild or a JS-level change. Nico's complaint (button
   drifts away as you scroll toward it) is REAL and remains open. */

/* N4 - "all the text looks really close to the edges of the screen" (phone).
   Footer padding was 10.4px, so every line hugged the edge. Give it a real
   gutter matching the rest of the mobile layout. */
@media screen and (max-width: 768px) {
  .TheFooter {
    padding-left: 2.4rem !important;
    padding-right: 2.4rem !important;
  }
}

/* N5 - "we can't even scroll down more to see the RHO UPSILON". Measured: the
   .TheFooter-letters wordmark sits at 18281 + 162 = 18443 while the document is
   only 18408 tall, and .TheFooter is overflow:hidden — so the last ~35px of the
   wordmark is amputated with no scroll left to reach it. Let the footer show
   what it contains and add clearance below the wordmark. */
.TheFooter {
  overflow: visible !important;
}

/* CORRECTED: the wordmark was not running past the DOCUMENT, it was running past
   the FOOTER'S DARK PANEL (letters bottom 18614 vs footer bottom 18592 = 22px of
   white text rendering below where the purple ends, so it read as chopped). Page
   padding was the wrong layer and only added cream space underneath. Extend the
   footer itself so the panel contains its own wordmark. */
.TheFooter {
  padding-bottom: 6rem !important;
}

.TheFooter-letters {
  margin-bottom: 0;
}

/* N6 - "the Learn More buttons turn into some weird black rectangle when you
   touch them". That is the default mobile tap-highlight painting a black box
   over a transparent-background button. Kill the highlight and give the button
   an intentional pressed state instead. */
.AppButton,
.AppLink,
.HomeExpertisesItem-button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.HomeExpertisesItem-button:active,
.HomeAgency-introButton:active,
.HomeAwardsHero-introButton:active {
  background-color: color-mix(in srgb, var(--fiji-purple) 12%, transparent);
  transition: background-color .12s ease;
}

/* N7 - "the pictures are like tiny, look how bad that looks" (MCMLXXVII section).
   Three of the four gallery images render at 182px on a 390px screen because the
   vendor grid keeps its desktop column split on phones. Let the small ones fill
   the column so the section reads as photography, not thumbnails. */
@media screen and (max-width: 768px) {
  .HomeAgency-gallery .AppImage-image,
  .HomeAgency-galleryCol .AppImage-image,
  .HomeAgency-galleryCol,
  .HomeAgency-galleryColBottom {
    width: 100% !important;
  }

  .HomeAgency-galleryColBottom {
    margin-bottom: 0 !important;
    transform: none !important;
  }

  /* N8 - the MCMLXXVII year reads as "MCMLXX" on a phone: the word is wider than
     its column so the final VII is cut off. Size it to the viewport and stop the
     second line hanging off to the right. */
  .HomeAgency-year,
  .HomeAgency-yearItem {
    font-size: clamp(3.2rem, 13vw, 6rem) !important;
    letter-spacing: -.01em !important;
    max-width: 100% !important;
    overflow-wrap: break-word;
  }

  .HomeAgency-yearItem:nth-child(2) {
    margin-left: 0 !important;
  }
}

/* N9 - "still fucking cut off" (3rd report). It was NEVER clipping. The footer
   wordmark is a pseudo-element (content:"RHO UPSILON") sized clamp(7rem,18vw,26rem)
   with line-height .78 and position:absolute inset:0 inside a 146px-tall box, plus
   a translateY(-14%) on the parent. On a 390px phone that resolves to a ~112px
   font on two lines of 87px each = 175px of text crammed into a 146px absolutely
   positioned box: the two lines OVERLAP, so "UPSILON" has its top eaten by "RHO"
   and reads as amputated. My earlier fixes measured the BOX (which fit fine) and
   changed nothing visible — the defect was inside it. On phones: put the wordmark
   in normal flow, size it to actually fit two lines, and give it a real line box. */
@media screen and (max-width: 768px) {
  .TheFooter-letters {
    height: auto !important;
    justify-content: flex-start !important;
    transform: none !important;
  }

  .TheFooter-letters::after {
    align-items: flex-start;
    font-size: 4.4rem !important;
    justify-content: flex-start;
    text-align: left;
    inset: auto !important;
    letter-spacing: -.03em !important;
    line-height: 1.08 !important;
    position: static !important;
    width: 100%;
  }
}

/* ============================================================================
   2026-10-02 owner phone review (Android, 412px). Three shipped defects.
   ========================================================================= */

/* P1 - closing headline broke mid-word ("Fifty Y / ears", "S / how").
   The vendor SplitText splits each title into fixed LINE boxes once, at mount,
   using whatever font metrics exist at that moment, and every glyph is its own
   inline-block, so when the real webfont (or a different width) lands the line
   overflows and wraps BETWEEN LETTERS. fiji-reskin.js groups the letters of each
   word into an unbreakable .fiji-word and adds .fiji-split-words; here the line
   boxes stop forcing breaks so the words reflow naturally at any width. The
   word clips its own bottom edge, which keeps the vendor's rise-in reveal. */
.fiji-split-words .lines {
  display: inline !important;
}

/* Now that the title is real flowing text, balance it so no line ends on a
   lone word ("... Who Show / Up." at desktop widths). */
.fiji-split-words {
  text-wrap: balance;
}

.fiji-split-words .fiji-word {
  clip-path: inset(-1em -.4em 0 -.4em);
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
}

/* P2 - every "Learn more" pill spilled its label past the LEFT edge of the
   border. The <=900px rule above capped the pill at max-inline-size:140px to
   clear the menu pill, but label (120px) + dot (44px) + padding is ~220px, so the
   content overflowed the 140px box and centred itself across both edges. Let the
   pill be as wide as its content. */
@media screen and (max-width: 900px) {
  .HomeExpertisesItem-button,
  .HomeAgency-introButton,
  .HomeAwardsHero-introButton {
    max-inline-size: none !important;
    /* the dot sits centred in a 44px slot, so trim the end padding to balance the label's start padding */
    padding-inline-end: 1.2rem !important;
    width: max-content !important;
  }
}

/* The label's entrance animation slides its text in from the right; with the
   pill's overflow opened up (#5) that text flew outside the border for ~1s on
   every reveal. Clip the slide to the label's own box instead (focus outline
   lives on the <a>, so it is not clipped). */
.HomeExpertisesItem-button .AppButton-label,
.HomeAgency-introButton .AppButton-label,
.HomeAwardsHero-introButton .AppButton-label {
  overflow: hidden;
}

/* Re-charter card (purple panel): the pill kept the dark label/border, which
   read as near-invisible on purple. */
.HomeExpertisesItem:nth-child(4) .HomeExpertisesItem-button .AppButton-label {
  color: #fff !important;
}

.HomeExpertisesItem:nth-child(4) .HomeExpertisesItem-button .AppButton-border {
  box-shadow: inset 0 0 0 1px #fff !important;
}

/* P3 - large empty band under every "Ways to Stay Involved" card on phones.
   On <=768px the vendor stacks the five cards as a pure-CSS sticky deck: every
   card is a full 100svh panel (200svh scroll room, -100svh overlap), so each
   card paints its colour for a full screen with the content in the top half
   and the rest blank (worst on short cards and the last one, Give). The deck is
   CSS-only on phones (the GSAP rail runs only at >=1080px), so lay the cards
   out as normal sections sized to their content. N3 (08-24) piled the cards
   because it left the -100svh overlap margins in place; this zeroes them. */
@media screen and (max-width: 768px) {
  .HomeExpertisesItem-inner,
  .HomeExpertisesItem-inner.--index-first,
  .HomeExpertisesItem-inner.--index-between,
  .HomeExpertisesItem-inner.--index-last {
    height: auto !important;
    margin-top: 0 !important;
  }

  .HomeExpertisesItem-innerSticky {
    height: auto !important;
    padding-bottom: 5.6rem !important;
    position: relative !important;
    top: auto !important;
  }
}

/* The vendor ships "Alliance Text" for .AppText-2 / project hover heads but never
   shipped the font file, so those paragraphs fell back to Arial/Roboto (a visibly
   different typeface on phones). Use the shipped Alliance Neue. */
.AppText-2,
.HomeProjectItem-hoverHead {
  font-family: "Alliance Neue", sans-serif !important;
}

/* Open burger menu on phones: the socials column is a flex column with
   align-items:flex-end, so Instagram / X / Facebook / LinkedIn rendered as a
   ragged right-aligned stack hugging the left edge. Align them with every other
   column in the overlay. */
@media screen and (max-width: 768px) {
  .TheNavigation-infosContact .InfosContact-col.--socials,
  .TheNavigation-infosContact .InfosContact-col.--phones {
    align-items: flex-start !important;
  }
}

/* Desktop footer: the vendor fixes .TheFooter at 85vh, but the RHO UPSILON
   wordmark block is sized from the viewport WIDTH, so on wide/short screens
   (1440x900, 1280x720, 1920x1080) the wordmark ran 37-150px past the purple
   panel and its bottom rendered white-on-cream below the footer. Let the panel
   grow to contain its wordmark (85vh stays the minimum). */
@media screen and (min-width: 1080px) {
  .TheFooter {
    height: auto !important;
    min-height: 85vh;
  }
}

/* "Lifelong Brotherhood" link list: was ~10px text on a 360px line at desktop (Nico 2026-10-02). */
.HomeProjectsDesc-skillsItem.AppSmallText-1 {
  font-size: 1.5rem !important;
  letter-spacing: -.01em !important;
  line-height: 1.3 !important;
}
.HomeProjectsDesc-skillsItemWrap {
  height: auto !important;
  min-height: 4rem;
  align-items: baseline !important;
}
.HomeProjectsDesc-skillsItem span:nth-child(2) {
  width: auto !important;
  max-width: 80%;
}
.HomeProjectsDesc-skillsItemLine {
  background-color: var(--fiji-purple) !important;
  opacity: .45;
}
@media (min-width: 768px) {
  .HomeProjectsDesc-skillsItem.AppSmallText-1 {
    width: 60rem !important;
    max-width: 100%;
    font-size: clamp(1.7rem, 1.45vw, 2.4rem) !important;
    padding: 1.6rem 0 !important;
  }
}

/* ===========================================================================
   Laptop sweep 2026-10-02 (Nico on a 1280x705 window). The vendor sizes the
   whole page in rem with 1rem = 1/144 of the viewport width, so on 1280-1536
   laptops the design (drawn for 1920) shrinks: captions render at 8.9-10.7px,
   two-line headlines no longer fit the viewport height, and copy that is longer
   than the vendor's lorem runs under the photos.
   ========================================================================= */

/* 1. Legibility floor: no rendered text under 12px. max() keeps the design size
   wherever it is already bigger (>= ~1730px wide). */
@media (orientation: landscape) {
  .AppSmallText-1 { font-size: max(12px, 1rem); }
}
@media (orientation: portrait) {
  .AppSmallText-1 { font-size: max(12px, 1.1rem); }
}
.AppSmallText-2 { font-size: max(12px, 1.2rem); }
.AppYear { font-size: max(12px, 1rem); }
@media (orientation: landscape) and (min-width: 1440px) {
  .AppYear { font-size: max(12px, 1.2rem); }
}
.AppText-12.--styled-bullets .item { font-size: max(12px, 1.2rem); }
.HomeExpertisesItem-index { font-size: max(12px, 1rem) !important; }
.HomeProjectItem-hoverHeadCat,
.HomeProjectItem-hoverHeadYear { font-size: max(12px, 1em); }
.fiji-cal-table th { font-size: max(12px, clamp(1rem, 1.1vw, 1.2rem)); }
.fiji-subnav-label { font-size: max(12px, 1.15rem); }
.fiji-events-kicker { font-size: max(12px, clamp(1.1rem, 1.3vw, 1.5rem)); }
.fiji-cal-when { font-size: max(12px, clamp(1.1rem, 1.3vw, 1.4rem)); }

@media screen and (min-width: 1080px) {
  /* 2. Featured slides ("A Record Reunion", "Brotherhood on the Course", "The Legacy
     Carries Forward"): the two-line titles were sized from the width only, so the
     second line ran under the bottom of the viewport at every laptop size (and at
     1920x1080). Fit them to the band under the photo and centre them in it, below
     the details row. */
  .HomeFeaturedProjectItem-titleContainer {
    bottom: 0 !important;
    height: auto !important;
    /* replaces the inline #fiji-fix-record-overlap padding (140-235px top), which pushed the
       title out of a band that is only 226px tall at 1280x705 */
    padding: max(5rem, 46px) 0 1.2rem !important;
    top: 0 !important;
  }

  .HomeFeaturedProjectItem-title {
    font-size: clamp(4.4rem, min(8.4vw, calc((100vh - min(37.46vw, 70vh) - max(6.4rem, 58px)) / 2.2)), 13rem) !important;
  }

  /* 3. "Ways to Stay Involved": "Celebrate" and "Re-charter" (title + bullets) ran
     117px / 58px under the card photo once it settled at ~46.7vw. Keep the copy in
     the column left of the photo. */
  .HomeExpertisesItem-contentTitle {
    font-size: clamp(4.4rem, 6.2vw, 12rem) !important;
  }

  .HomeExpertisesItem-contentText {
    max-width: 32vw;
  }

  .HomeExpertisesItem-contentText .list {
    gap: .9rem 2.4rem;
  }

  /* 4. "The Honor Roll": the vendor centred a transparent 3D trophy here and let the
     title run across it; the reskin put a photo in that slot, so the title and intro
     sat on the photo and the 27rem numbers column ran off the right edge while the
     panel slid in. Three columns that never touch: copy (27vw) | photo | numbers
     (27rem), with the photo sized to the gap between them and its zoom-out tween
     disabled so the geometry is the same while sliding and when settled. */
  .HomeAwardsHero-content {
    --hr-left: 27vw;
    --hr-right: 27rem;
    --hr-gap: 4vw;
    --hr-photo: min(calc(100vw - 6rem - var(--hr-left) - var(--hr-right) - 2 * var(--hr-gap)), calc((100vh - 16rem) * 960 / 526));
  }

  .HomeAwardsHero-contentLeft {
    margin-left: 0 !important;
    width: var(--hr-left);
  }

  .HomeAwardsHero-title .AppTitle-1,
  .HomeAwardsHero-title h2 {
    font-size: min(5.6vw, 11vh) !important;
    line-height: 1 !important;
  }

  .HomeAwardsHero-intro {
    max-width: 100% !important;
  }

  .HomeAwardsHero-numbers {
    margin-right: 0 !important;
    width: var(--hr-right) !important;
  }

  .HomeAwardsHero-trophee {
    transform: none !important;
  }

  .HomeAwardsHero-tropheeInner {
    padding-left: calc(var(--hr-left) + var(--hr-gap));
    padding-right: calc(var(--hr-right) + var(--hr-gap));
  }

  .HomeAwardsHero-tropheeBackground {
    aspect-ratio: 960 / 526 !important;
    height: auto !important;
    max-width: none !important;
    width: var(--hr-photo) !important;
  }

  /* the HONOR ROLL / 1977 medallion: centred on the photo, sized to it */
  .HomeAwardsHero-tropheeInner::after {
    aspect-ratio: 1;
    font-size: calc(var(--hr-photo) * .062) !important;
    height: auto !important;
    left: calc((100% + var(--hr-left) - var(--hr-right)) / 2) !important;
    width: calc(var(--hr-photo) * .44) !important;
  }
}