/* Restore Coral — Research & Science inner page
   Built on the homepage design system: Poppins display, Funnel Sans body,
   Abyss Ink surfaces, Tide Paper light sections, scroll reveals from main.js. */

/* Inner pages have no cinematic intro, so the chrome is present from the
   first frame rather than waiting for a scroll threshold. */
.rc-page .rc-chrome{opacity:1;visibility:visible;transform:none}

/* ---------- 1. Page hero ---------- */
.rc-phero{
  position:relative;min-height:92svh;display:grid;align-items:end;
  background:var(--rc-ink);overflow:hidden;
}
.rc-phero__media{position:absolute;inset:0;z-index:0}
.rc-phero__media img{width:100%;height:100%;object-fit:cover}
.rc-phero__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,21,43,.62) 0%,rgba(7,21,43,.28) 38%,rgba(7,21,43,.9) 100%);
}
.rc-phero__inner{position:relative;z-index:2;padding-top:140px;padding-bottom:clamp(70px,10vh,120px)}
.rc-phero__eyebrow{color:var(--rc-cyan)}
.rc-phero__title{
  font-size:clamp(34px,6.2vw,92px);color:var(--rc-white);
  margin:16px 0 0;max-width:18ch;
}
.rc-phero__text{
  margin:24px 0 0;max-width:56ch;
  font-size:clamp(15px,1.25vw,19px);line-height:1.6;color:rgba(244,246,242,.86);
}
.rc-phero__hint{
  position:absolute;z-index:2;left:50%;bottom:22px;transform:translateX(-50%);
  font-family:var(--font-ui);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(244,246,242,.7);display:flex;gap:8px;align-items:center;
}
.rc-phero__hint span{animation:pheroNudge 2.4s var(--ease-card) infinite}
@keyframes pheroNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(max-width:767px){
  .rc-phero{min-height:88svh}
  .rc-phero__inner{padding-top:112px}
}

/* ---------- 1b. Split hero — white field, coral object on the right ---------- */
.rc-shero{background:var(--rc-white);color:var(--rc-ink);padding:140px 0 84px;overflow:hidden}
.rc-shero .t-eyebrow{color:var(--rc-blue)}
.rc-shero__grid{display:grid;gap:36px;align-items:center}
@media(min-width:900px){
  .rc-shero{padding:168px 0 110px}
  .rc-shero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,5vw,80px)}
}
.rc-shero__title{font-size:clamp(34px,5.4vw,78px);margin:16px 0 0;max-width:16ch}
.rc-shero__text{
  margin:24px 0 0;max-width:52ch;
  font-size:clamp(15px,1.25vw,19px);line-height:1.6;color:var(--rc-subdued);
}
.rc-shero__art{display:grid;place-items:center;order:-1}
@media(min-width:900px){.rc-shero__art{order:0}}
.rc-shero__art img{
  width:100%;max-width:560px;height:auto;object-fit:contain;
  filter:drop-shadow(0 32px 50px rgba(7,21,43,.22));
}
/* Hover: the coral lifts and drifts, as if suspended in water. */
@media(hover:hover) and (pointer:fine){
  .rc-shero__art img{
    will-change:transform,filter;
    transition:transform var(--dur-media) var(--ease-card),filter var(--dur-media) var(--ease-card);
  }
  .rc-shero__art:hover img{
    animation:sheroFloat 6s var(--ease-card) infinite;
    filter:drop-shadow(0 44px 62px rgba(7,21,43,.26));
  }
}
@keyframes sheroFloat{
  0%   {transform:translate3d(0,0,0) rotate(0deg) scale(1.02)}
  25%  {transform:translate3d(6px,-14px,0) rotate(.9deg) scale(1.03)}
  50%  {transform:translate3d(0,-20px,0) rotate(0deg) scale(1.035)}
  75%  {transform:translate3d(-6px,-11px,0) rotate(-.9deg) scale(1.03)}
  100% {transform:translate3d(0,0,0) rotate(0deg) scale(1.02)}
}
@media(max-width:899px){
  /* A smaller object lifts the copy clear of the fixed adopt card. */
  .rc-shero__art img{max-width:56vw}
  .rc-shero{padding-top:112px;padding-bottom:88px}
  .rc-shero__grid{gap:24px}
}
/* Photographic hero art (a mural, not a cutout) needs a frame rather than a
   free-floating drop shadow. */
.rc-shero__art--framed img{
  max-width:none;border-radius:24px;overflow:hidden;
  box-shadow:0 2.2rem 4.4rem -1.6rem rgba(7,21,43,.42);
}
@media(max-width:899px){.rc-shero__art--framed img{max-width:100%}}

/* ---------- 2. Research focus cards ---------- */
.rc-focus{display:grid;gap:18px}
@media(min-width:760px){.rc-focus{grid-template-columns:repeat(3,1fr)}}
.rc-focus__card{
  background:var(--rc-white);border:1px solid rgba(7,21,43,.09);border-radius:24px;
  padding:30px 26px 32px;
  transition:transform var(--dur-card) var(--ease-card),box-shadow var(--dur-card) var(--ease-card);
}
.rc-focus__card:hover{transform:translateY(-6px);box-shadow:0 1.6rem 3rem -1.4rem rgba(0,2,145,.4)}
.rc-focus__n{
  display:block;font-family:var(--font-ui);font-size:10px;letter-spacing:.18em;color:var(--rc-blue);
}
.rc-focus__title{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.04em;
  font-size:clamp(20px,1.7vw,28px);line-height:1.04;margin:14px 0 10px;color:var(--rc-ink);
}
.rc-focus__text{font-size:14px;line-height:1.55;color:var(--rc-subdued);margin:0}
/* Dark-section variant of the same card. */
.rc-focus--dark .rc-focus__card{background:rgba(244,246,242,.05);border-color:rgba(175,207,213,.16)}
.rc-focus--dark .rc-focus__card:hover{box-shadow:0 1.6rem 3rem -1.4rem rgba(0,0,0,.6)}
.rc-focus--dark .rc-focus__n{color:var(--rc-cyan)}
.rc-focus--dark .rc-focus__title{color:var(--rc-white)}
.rc-focus--dark .rc-focus__text{color:rgba(244,246,242,.8)}

/* Standalone closing note under a media pair. */
.rc-note{
  max-width:72ch;margin:46px auto 0;text-align:center;
  font-size:clamp(15px,1.15vw,18px);line-height:1.65;color:var(--rc-subdued);
}

/* ---------- Paired imagery ---------- */
.rc-duo{display:grid;gap:18px;margin-top:54px}
@media(min-width:760px){.rc-duo{grid-template-columns:1fr 1fr}}
.rc-duo__item{margin:0;border-radius:24px;overflow:hidden;background:var(--rc-mist);aspect-ratio:4/3}
.rc-duo__item img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-media) var(--ease-card)}
.rc-duo__item:hover img{transform:scale(1.04)}

/* ---------- 3. Cozumel headquarters ---------- */
.rc-hq{position:relative;background:var(--rc-ink);color:var(--rc-paper);padding:96px 0 0}
.rc-hq__head{max-width:860px;margin:0 auto 44px;text-align:center}
.rc-hq__title{font-size:clamp(28px,4.6vw,60px);margin:14px 0 0}
.rc-hq__frame{
  margin:0;border-radius:28px;overflow:hidden;position:relative;
  box-shadow:0 2.4rem 5rem -1.6rem rgba(0,0,0,.6);
}
.rc-hq__frame img{width:100%;height:auto;display:block}
.rc-hq__caption{
  position:absolute;left:0;right:0;bottom:0;padding:48px 26px 22px;
  font-family:var(--font-ui);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rc-white);
  background:linear-gradient(180deg,transparent,rgba(7,21,43,.82));
}
.rc-hq__copy{
  display:grid;gap:18px;margin:46px auto 0;max-width:72ch;
  font-size:clamp(15px,1.15vw,18px);line-height:1.65;color:rgba(244,246,242,.84);
}
.rc-hq__copy p{margin:0}
@media(min-width:900px){
  .rc-hq__copy{grid-template-columns:1fr 1fr;gap:46px;max-width:none}
}
/* Social Innovation's community block closes the dark band, so it needs its
   own breathing room beneath the copy. */
.rc-hq#community{padding-bottom:clamp(72px,8vw,104px)}
.rc-hq__cta{margin-top:34px;text-align:center}
.rc-hq__cta .rc-btn--ghost{color:var(--rc-white)}
.rc-hq#artists{padding-bottom:clamp(72px,8vw,104px)}
/* It follows another dark band, so it should not restate the full top gap;
   and a square source photo must not become a full-height wall of image. */
.rc-hq#artists{padding-top:clamp(40px,5vw,64px)}
.rc-hq#artists .rc-hq__frame{aspect-ratio:16/9}
.rc-hq#artists .rc-hq__frame img{width:100%;height:100%;object-fit:cover;object-position:center 62%}

/* ---------- 4. From research to the reef ---------- */
.rc-reef{padding:88px 0 104px}
.rc-reef__grid{display:grid;gap:44px}
@media(min-width:1000px){
  .rc-reef__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
}
.rc-reef__title{font-size:clamp(28px,3.9vw,52px);margin:14px 0 20px}
.rc-reef__copy .t-body+.t-body{margin-top:16px}
.rc-reef__media{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.rc-reef__shot{margin:0;border-radius:22px;overflow:hidden;background:rgba(244,246,242,.06)}
.rc-reef__shot img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-media) var(--ease-card)}
.rc-reef__shot:hover img{transform:scale(1.05)}
.rc-reef__shot--a{grid-column:1 / -1;aspect-ratio:16/9}
.rc-reef__shot--b,.rc-reef__shot--c{aspect-ratio:4/3}
/* Single-image variant: one portrait-leaning frame instead of the mosaic. */
.rc-reef__media--single{grid-template-columns:1fr}
.rc-reef__media--single .rc-reef__shot{aspect-ratio:4/3}

/* ---------- 5. Collaboration ---------- */
/* Copy-led statement band — used where an image would repeat one already on
   the page. Restore Blue so it still breaks the dark/light rhythm. */
.rc-statement{background:var(--rc-blue);color:var(--rc-white);padding:96px 0 100px}
.rc-statement .t-eyebrow{color:var(--rc-cyan)}
.rc-statement__inner{max-width:1100px;margin:0 auto}
.rc-statement__title{font-size:clamp(30px,5.2vw,68px);margin:16px 0 28px;max-width:16ch}
.rc-statement__copy{display:grid;gap:18px;font-size:clamp(15px,1.15vw,18px);line-height:1.65;color:rgba(255,255,255,.86)}
.rc-statement__copy p{margin:0}
@media(min-width:900px){.rc-statement__copy{grid-template-columns:1fr 1fr;gap:46px}}

.rc-collab{max-width:70ch;margin:0 auto;text-align:center}
.rc-collab__title{font-size:clamp(28px,4.4vw,56px);margin:14px 0 18px}
.rc-collab__cta{margin-top:30px}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .rc-phero__hint span{animation:none}
  .rc-focus__card:hover,.rc-duo__item:hover img,.rc-reef__shot:hover img{transform:none}
  .rc-shero__art:hover img{animation:none;transform:none}
}