/* Restore Coral — Data & Intelligence
   Layout grammar ported from the reference partnerships page:
   - full-bleed hero image, headline bottom-left over a bottom-weighted scrim
   - edge-to-edge image tiles with the label/title/text stacked at the bottom
   - full-bleed statement band with a background image behind the copy
   Rebuilt in original CSS on the Restore Coral token system. */

/* ---------- 1. Hero ---------- */
.rc-dhero{
  position:relative;min-height:88svh;display:grid;align-items:end;
  background:var(--rc-ink);overflow:hidden;
}
.rc-dhero__media{position:absolute;inset:0;z-index:0}
.rc-dhero__media img{width:100%;height:100%;object-fit:cover}
.rc-dhero__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,21,43,.55) 0%,rgba(7,21,43,.2) 34%,rgba(7,21,43,.88) 100%);
}
.rc-dhero__inner{position:relative;z-index:2;padding-top:150px;padding-bottom:clamp(56px,7vh,84px)}
.rc-dhero__eyebrow{color:var(--rc-cyan)}
/* Reference hero: 72px / .92 line-height / -0.04em tracking, uppercase, left. */
.rc-dhero__title{
  font-size:clamp(34px,5.6vw,72px);line-height:.92;letter-spacing:-.04em;
  color:var(--rc-white);margin:16px 0 0;max-width:18ch;
}
.rc-dhero__text{
  margin:22px 0 0;max-width:56ch;
  font-size:clamp(15px,1.2vw,18px);line-height:1.6;color:rgba(244,246,242,.86);
}
@media(max-width:767px){.rc-dhero__inner{padding-top:120px}}

/* ---------- 2. Image tiles (reference partnerships grid) ---------- */
.rc-tiles{background:var(--rc-ink);color:var(--rc-paper);padding:88px 0 96px}
.rc-tiles__head{margin-bottom:26px}
/* Reference uses a 3-column grid with a 12px gutter and a tall 3:4 image. */
.rc-tiles__grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:900px){.rc-tiles__grid{grid-template-columns:repeat(3,1fr)}}
.rc-tile{
  position:relative;display:block;overflow:hidden;border-radius:18px;
  aspect-ratio:3/4;background:rgba(244,246,242,.05);
  transition:transform var(--dur-card) var(--ease-card),box-shadow var(--dur-card) var(--ease-card);
}
@media(min-width:900px){.rc-tile--wide{grid-column:span 1}}
.rc-tile__media{position:absolute;inset:0;display:block}
.rc-tile__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-media) var(--ease-card);
}
.rc-tile::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,21,43,0) 28%,rgba(7,21,43,.78) 78%,rgba(7,21,43,.94) 100%);
}
.rc-tile__body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;display:block;
  padding:26px 24px 28px;color:var(--rc-white);
}
.rc-tile__label{
  display:block;font-family:var(--font-ui);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rc-cyan);margin:0 0 10px;
}
.rc-tile__title{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(21px,1.7vw,27px);margin:0 0 10px;color:var(--rc-white);
}
.rc-tile__text{
  margin:0;font-size:14px;line-height:1.55;color:rgba(244,246,242,.82);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height var(--dur-media) var(--ease-card),opacity var(--dur-card) var(--ease-card);
}
@media(hover:hover) and (pointer:fine){
  .rc-tile:hover{transform:translateY(-6px);box-shadow:0 2rem 4rem -1.4rem rgba(0,0,0,.65)}
  .rc-tile:hover .rc-tile__media img{transform:scale(1.06)}
  .rc-tile:hover .rc-tile__text{max-height:16em;opacity:1}
}
/* Touch and keyboard users get the copy outright. */
@media(hover:none),(pointer:coarse){
  .rc-tile__text{max-height:none;opacity:1}
}
.rc-tile:focus-within .rc-tile__text{max-height:16em;opacity:1}

/* ---------- 3. Why it matters ----------
   Copy-led band: the page already carries three photographic tiles, so this
   closes on a flat Restore Blue field rather than repeating an image. */
.rc-why{position:relative;overflow:hidden;background:var(--rc-blue);color:var(--rc-white);padding:104px 0 112px}
.rc-why__glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 78% 115%,rgba(23,207,245,.38),transparent 58%);
}
.rc-why__inner{position:relative;z-index:2}
.rc-why .t-eyebrow{color:var(--rc-cyan)}
.rc-why__title{font-size:clamp(28px,4.4vw,56px);margin:16px 0 26px;max-width:18ch}
.rc-why__copy{
  display:grid;gap:18px;max-width:72ch;
  font-size:clamp(15px,1.15vw,18px);line-height:1.65;color:rgba(244,246,242,.86);
}
.rc-why__copy p{margin:0}
@media(min-width:900px){.rc-why__copy{grid-template-columns:1fr 1fr;gap:46px;max-width:none}}
/* The tile grid sits directly above, so close the gap between the two dark
   bands rather than stacking two full paddings. */
.rc-tiles+.rc-why{padding-top:clamp(72px,8vw,96px)}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .rc-tile:hover,.rc-tile:hover .rc-tile__media img{transform:none}
  .rc-tile__text{max-height:none;opacity:1}
}