/* ===========================================================================
   Own In Cabo — Phase 5 polish
   Canonical header (nav left / mark centred / contact right), disclosure
   menus capped at three with their own heading, and the shared presentation
   refinements that sit on top of the premium proof shell.
   =========================================================================== */

:root {
  --oic-p5-header-h: 96px;
  --oic-p5-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------- header -- */

body .oic-p5-header {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  background: linear-gradient(180deg, rgba(6, 18, 26, .66) 0%, rgba(6, 18, 26, .34) 58%, rgba(6, 18, 26, 0) 100%) !important;
  backdrop-filter: saturate(140%) blur(2px);
  transition: background-color 420ms var(--oic-p5-ease),
              border-color 420ms var(--oic-p5-ease),
              box-shadow 420ms var(--oic-p5-ease),
              transform 420ms var(--oic-p5-ease);
}

/* Solid, legible bar once the hero is behind us. */
body .oic-p5-header.is-stuck {
  background: rgba(252, 251, 248, .94) !important;
  border-bottom-color: var(--oic-line);
  box-shadow: 0 1px 30px rgba(16, 32, 44, .09);
  backdrop-filter: saturate(160%) blur(14px);
}
body .oic-p5-header.is-stuck .oic-p5-nav__link,
body .oic-p5-header.is-stuck .oic-p5-phone,
body .oic-p5-header.is-stuck .oic-p5-email,
body .oic-p5-header.is-stuck .oic-p5-burger span {
  color: var(--oic-ink);
}
body .oic-p5-header.is-stuck .oic-p5-burger span { background: var(--oic-ink); }
body .oic-p5-header.is-stuck .oic-p5-logo img { filter: none; }
body .oic-p5-header.is-stuck .oic-proof-header__inner { min-height: calc(var(--oic-p5-header-h) - 16px); }
body .oic-p5-header.is-stuck .oic-p5-logo { width: 190px; }
body .oic-p5-header.is-stuck .oic-p5-email {
  border-color: rgba(16, 32, 44, .3);
}
body .oic-p5-header.is-stuck .oic-p5-email:hover {
  color: var(--oic-paper);
  background: var(--oic-ink);
}

/* Slide the bar away on downward scroll, bring it back on the way up. */
body .oic-p5-header.is-hidden { transform: translateY(-104%); }

body .oic-p5-header .oic-proof-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--oic-p5-header-h);
  gap: 32px;
}

/* Logo: centred, 10% smaller than the previous 238px mark. */
body .oic-p5-logo {
  display: inline-flex;
  grid-column: 2;
  justify-self: center;
  width: 214px;
  transition: opacity 240ms var(--oic-p5-ease);
}
body .oic-p5-logo img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  transition: filter 420ms var(--oic-p5-ease);
}
body .oic-p5-logo:hover { opacity: .82; }

/* --------------------------------------------------------- primary nav --- */

body .oic-p5-nav {
  display: flex;
  grid-column: 1;
  justify-content: flex-start;
  align-items: center;
  gap: 34px !important;
}
body .oic-p5-nav__item { position: relative; }

body .oic-p5-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0 !important;
  color: #fff;
  font-size: 11.5px !important;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .14em !important;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 300ms var(--oic-p5-ease);
}
body .oic-p5-nav__link::after {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: var(--oic-sand);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms var(--oic-p5-ease);
}
body .oic-p5-nav__item:hover > .oic-p5-nav__link::after,
body .oic-p5-nav__link:focus-visible::after,
body .oic-p5-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.oic-p5-caret {
  width: 9px;
  height: 6px;
  margin-top: 1px;
  opacity: .7;
  transition: transform 320ms var(--oic-p5-ease);
}
body .oic-p5-nav__item.is-open .oic-p5-caret { transform: rotate(180deg); }

/* ----------------------------------------------------- disclosure menus -- */

body .oic-p5-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 18px);
  left: -26px;
  min-width: 296px;
  padding: 22px 26px 14px;
  border: 1px solid rgba(16, 32, 44, .09);
  border-top: 2px solid var(--oic-sand);
  background: var(--oic-paper);
  box-shadow: 0 26px 60px -22px rgba(16, 32, 44, .4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 240ms var(--oic-p5-ease),
              transform 280ms var(--oic-p5-ease),
              visibility 0s linear 280ms;
}
body .oic-p5-nav__item.is-open .oic-p5-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
/* Hover bridge so the pointer can cross the gap. */
body .oic-p5-menu::before {
  position: absolute;
  top: -20px;
  right: 0;
  left: 0;
  height: 20px;
  content: "";
}

body .oic-p5-menu__heading {
  margin: 0 0 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(16, 32, 44, .1);
  color: var(--oic-ink-soft);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
body .oic-p5-menu__links { display: grid; }
body .oic-p5-menu__link {
  display: block;
  padding: 10px 0;
  color: var(--oic-ink) !important;
  font-family: "OIC Cormorant", Georgia, serif;
  font-size: 21px;
  line-height: 1.25;
  text-decoration: none;
  transition: color 220ms var(--oic-p5-ease);
}
body .oic-p5-menu__link span {
  display: inline-block;
  transition: transform 300ms var(--oic-p5-ease);
}
body .oic-p5-menu__link:hover { color: var(--oic-ocean); }
body .oic-p5-menu__link:hover span { transform: translateX(7px); }

body .oic-p5-menu__all {
  display: flex;
  color: var(--oic-ink-soft) !important;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 13px 0 4px;
  border-top: 1px solid rgba(16, 32, 44, .1);
  color: var(--oic-ink-soft);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 220ms var(--oic-p5-ease);
}
body .oic-p5-menu__all span { transition: transform 300ms var(--oic-p5-ease); }
body .oic-p5-menu__all:hover { color: var(--oic-ocean); }
body .oic-p5-menu__all:hover span { transform: translateX(5px); }

/* ------------------------------------------------------------- contact --- */

body .oic-p5-contact {
  display: flex;
  grid-column: 3;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
}
body .oic-p5-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 300ms var(--oic-p5-ease), opacity 220ms var(--oic-p5-ease);
}
body .oic-p5-phone:hover { opacity: .74; }
.oic-p5-ico { width: 14px; height: 14px; flex: none; }

body .oic-p5-email {
  padding: 13px 22px !important;
  border: 1px solid rgba(255, 255, 255, .62);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 240ms var(--oic-p5-ease),
              background-color 240ms var(--oic-p5-ease),
              border-color 240ms var(--oic-p5-ease);
}
body .oic-p5-email:hover { color: var(--oic-ink); background: #fff; }

/* ------------------------------------------------------ scroll progress -- */

.oic-p5-progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 400ms var(--oic-p5-ease);
}
.oic-p5-header.is-stuck .oic-p5-progress { opacity: 1; }
.oic-p5-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--oic-sand), var(--oic-sand-light));
  transform: scaleX(var(--oic-p5-scroll, 0));
  transform-origin: left;
}

/* -------------------------------------------------------------- burger --- */

body .oic-p5-burger {
  display: none;
  grid-column: 3;
  justify-self: end;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
body .oic-p5-burger span {
  display: block;
  width: 23px;
  height: 1.5px;
  margin: 5px auto;
  background: #fff;
  transition: transform 300ms var(--oic-p5-ease),
              opacity 200ms var(--oic-p5-ease),
              background-color 400ms var(--oic-p5-ease);
}
body.oic-p5-drawer-open .oic-p5-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.oic-p5-drawer-open .oic-p5-burger span:nth-child(2) { opacity: 0; }
body.oic-p5-drawer-open .oic-p5-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* -------------------------------------------------------------- drawer --- */

body .oic-p5-drawer {
  position: fixed;
  z-index: 110;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  padding: calc(var(--oic-p5-header-h) + 26px) 0 64px;
  background: var(--oic-paper);
  opacity: 0;
  transition: opacity 320ms var(--oic-p5-ease), visibility 0s linear 320ms;
  visibility: hidden;
}
body .oic-p5-drawer[hidden] { display: block; }
body.oic-p5-drawer-open .oic-p5-drawer {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
body .oic-p5-drawer__inner { width: calc(100% - 40px); margin-inline: auto; }
body .oic-p5-drawer__group { padding-bottom: 26px; }
body .oic-p5-drawer__top {
  display: block;
  padding: 16px 0 10px;
  border-top: 1px solid rgba(16, 32, 44, .12);
  color: var(--oic-ink);
  font-family: "OIC Cormorant", Georgia, serif;
  font-size: 34px;
  line-height: 1.1;
  text-decoration: none;
}
body .oic-p5-drawer__heading {
  margin: 0 0 6px;
  color: var(--oic-ink-soft);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
body .oic-p5-drawer__sub {
  display: block;
  padding: 7px 0;
  color: var(--oic-ink-soft);
  font-size: 15px;
  text-decoration: none;
}
body .oic-p5-drawer__sub:hover { color: var(--oic-ocean); }
body .oic-p5-drawer__contact {
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding-top: 26px;
  border-top: 1px solid rgba(16, 32, 44, .12);
}
body .oic-p5-drawer__contact a {
  color: var(--oic-ink);
  font-size: 14px;
  letter-spacing: .04em;
  text-decoration: none;
}
body.oic-p5-drawer-open { overflow: hidden; }

/* --------------------------------------- merged disclosures (content) -- */

.oic-p5-merged .oic-accordion__panel {
  padding-top: 8px;
}
/* The merged panel is driven by `hidden` alone — neutralise the collapsed
   state the checkbox and baseline variants would otherwise impose. */
.oic-p5-merged .oic-accordion__panel:not([hidden]) {
  display: block !important;
  grid-template-rows: 1fr !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}
.oic-p5-merged .oic-accordion__panel[hidden] { display: none !important; }

/* Match the editorial scale the home block used for its button. */
.oic-p5-merged .oic-accordion__button { padding: 34px 0; }
.oic-p5-merged .oic-accordion__label { font-size: clamp(30px, 3.25vw, 43px); }

/* Original dropdown titles, kept as sub-headings inside the merged panel. */
.oic-p5-merged .oic-p5-sub {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 54px 0 18px;
  color: inherit;
  font-family: "OIC Cormorant", Georgia, serif;
  font-size: clamp(25px, 2.4vw, 33px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-transform: none;
}
.oic-p5-merged .oic-p5-sub::after {
  flex: 1;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: .22;
  transform: translateY(-.34em);
}
.oic-p5-merged .oic-p5-sub:first-child { margin-top: 10px; }

/* Where a second passage on the same subject was folded in under one heading,
   a hairline keeps the two readable as distinct pieces of writing. */
.oic-p5-merged .oic-p5-sub-body--joined {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid currentColor;
  border-top-color: color-mix(in srgb, currentColor 18%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .oic-p5-merged .oic-p5-sub-body--joined { border-top-color: rgba(128, 138, 146, .3); }
}

/* A sub-heading directly after imagery needs a little more air above it. */
.oic-p5-merged figure + .oic-p5-sub,
.oic-p5-merged .oic-baseline-gallery + .oic-p5-sub { margin-top: 64px; }

@media (max-width: 560px) {
  .oic-p5-merged .oic-p5-sub { margin: 40px 0 14px; gap: 12px; }
}

/* ------------------------------------------------------ motion & polish -- */

.oic-p5-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 760ms var(--oic-p5-ease), transform 760ms var(--oic-p5-ease);
  will-change: opacity, transform;
}
.oic-p5-reveal.is-in { opacity: 1; transform: none; }

/* Slow, expensive-feeling image behaviour on the editorial cards. */
.oic-community-card img,
.oic-home-communities img,
.oic-editorial img {
  transition: transform 1100ms var(--oic-p5-ease), filter 700ms var(--oic-p5-ease);
}
.oic-community-card:hover img,
.oic-home-communities a:hover img,
.oic-editorial a:hover img {
  transform: scale(1.045);
}

/* Consistent, visible focus for keyboard users across the shell. */
.oic-lux a:focus-visible,
.oic-lux button:focus-visible,
.oic-p5-header a:focus-visible,
.oic-p5-header button:focus-visible {
  outline: 2px solid var(--oic-sand);
  outline-offset: 4px;
  border-radius: 1px;
}

.oic-lux.oic-p5-needs-offset { padding-top: var(--oic-p5-header-h); }

html { scroll-behavior: smooth; }
html, body { scroll-padding-top: calc(var(--oic-p5-header-h) + 16px); }

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 1180px) {
  body .oic-p5-nav { gap: 24px !important; }
  body .oic-p5-logo { width: 190px; }
  body .oic-p5-contact { gap: 16px; }
  body .oic-p5-phone span { display: none; }
}

@media (max-width: 980px) {
  :root { --oic-p5-header-h: 76px; }
  body .oic-p5-header .oic-proof-header__inner {
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
  }
  body .oic-p5-nav { display: none !important; }
  body .oic-p5-contact { display: none; }
  body .oic-p5-burger { display: block; }
  body .oic-p5-logo { width: 176px; }
  body .oic-p5-header .oic-proof-header__inner::before {
    grid-column: 1;
    content: "";
  }
}

@media (max-width: 560px) {
  :root { --oic-p5-header-h: 68px; }
  body .oic-p5-logo { width: 146px; }
  body .oic-p5-drawer__top { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .oic-p5-reveal { opacity: 1; transform: none; transition: none; }
  body .oic-p5-header { transition: background-color 200ms linear; }
  body .oic-p5-header.is-hidden { transform: none; }
  .oic-community-card:hover img,
  .oic-home-communities a:hover img,
  .oic-editorial a:hover img { transform: none; }
}

/* ================================================================ gallery == */

.oic-p5-gallery {
  padding: 118px 0 124px;
  overflow: hidden;
  background: var(--oic-ivory);
}
.oic-p5-gallery__head { margin-bottom: 46px; }
.oic-p5-gallery__kicker {
  margin: 0 0 14px;
  color: var(--oic-ink-soft);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.oic-p5-gallery__title {
  max-width: 20ch;
  margin: 0 0 16px;
  color: var(--oic-ink);
  font-family: "OIC Cormorant", Georgia, serif;
  font-size: clamp(38px, 4.4vw, 62px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.028em;
}
.oic-p5-gallery__note {
  max-width: 56ch;
  margin: 0;
  color: var(--oic-ink-soft);
  font-size: 15px;
  line-height: 1.7;
}

.oic-p5-gallery__rail {
  display: flex;
  gap: 22px;
  padding-inline: max(48px, calc((100% - 1240px) / 2));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.oic-p5-gallery__rail::-webkit-scrollbar { display: none; }
.oic-p5-gallery__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.oic-p5-gallery__rail:focus-visible { outline: 2px solid var(--oic-sand); outline-offset: 6px; }

.oic-p5-gallery__cell {
  flex: 0 0 auto;
  width: clamp(240px, 27vw, 420px);
  margin: 0;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--oic-ink);
}
.oic-p5-gallery__cell img {
  display: block;
  width: 100%;
  height: clamp(220px, 26vw, 330px);
  object-fit: cover;
  transition: transform 1200ms var(--oic-p5-ease), filter 600ms var(--oic-p5-ease);
}
.oic-p5-gallery__cell:hover img { transform: scale(1.055); }
.oic-p5-gallery__cell a { display: block; }

@media (max-width: 820px) {
  .oic-p5-gallery { padding: 84px 0 88px; }
  .oic-p5-gallery__rail { gap: 14px; padding-inline: 20px; }
}

/* ============================================= backdrops for bare sections == */

/*
 * Three long sections carried no imagery at all. Each gets a photograph from
 * the library behind a veil heavy enough to leave the type untouched.
 */
.oic-hero-search,
.oic-home-start,
.oic-home-editorial { position: relative; isolation: isolate; }

.oic-hero-search::before,
.oic-home-start::before,
.oic-home-editorial::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-position: center;
  background-size: cover;
  content: "";
  /* The library photographs are bright; knock them back so they read as
     atmosphere behind the type rather than competing with it. */
  filter: brightness(.42) saturate(.85);
}
.oic-hero-search::after,
.oic-home-start::after,
.oic-home-editorial::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
}

.oic-hero-search::before {
  background-image: url("/wp-content/uploads/2023/08/CABO-DEL-SOL-HOMES-FOR-SALE-scaled-1.jpeg");
}
.oic-hero-search::after {
  background: linear-gradient(180deg, rgba(10, 24, 34, .86) 0%, rgba(10, 24, 34, .76) 60%, rgba(10, 24, 34, .9) 100%);
}

.oic-home-start::before {
  background-image: url("/wp-content/uploads/2023/08/5-scaled-1.jpeg");
  background-attachment: fixed;
}
.oic-home-start::after {
  background: linear-gradient(180deg, rgba(10, 24, 34, .9) 0%, rgba(10, 24, 34, .82) 55%, rgba(10, 24, 34, .93) 100%);
}

.oic-home-editorial::before {
  background-image: url("/wp-content/uploads/2023/08/PALMILLA-2.jpeg");
}
.oic-home-editorial::after {
  background: linear-gradient(180deg, rgba(12, 26, 36, .92) 0%, rgba(12, 26, 36, .88) 100%);
}

/* The fixed parallax is a desktop-only flourish; it janks badly on iOS. */
@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
  .oic-home-start::before { background-attachment: scroll; }
}

/* ---------------------------------------------------------- inline CTA --- */

.oic-p5-inline-cta {
  margin: 34px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.oic-p5-inline-cta a {
  display: inline-block;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--oic-sand);
  color: inherit;
  text-decoration: none;
}
.oic-p5-inline-cta a:hover { opacity: .75; }

/* ============================================== Bisbee's marlin motif ===== */

/*
 * The cut-out marlin is a Bisbee's reference, which means something in Cabo.
 * It reads badly as a gallery photograph, so it lives here instead: an
 * oversized watermark bleeding off the closing call to action, which appears
 * site-wide. Dark, desaturated, and well behind the type.
 */
.oic-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.oic-cta::after {
  position: absolute;
  z-index: -1;
  right: -4%;
  bottom: -14%;
  width: min(460px, 42vw);
  aspect-ratio: 1 / 1;
  background-image: url("/wp-content/uploads/2023/08/MARLIN-BISBEES-HOMES-FOR-SALE-IN-PALMILLA-1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  filter: grayscale(1) brightness(1.9) contrast(.6);
  opacity: .1;
  transform: rotate(-8deg);
  pointer-events: none;
}

/* On the ivory sections the same motif would need inverting, so it is scoped
   to the dark closing band only. Below tablet the type needs the full width. */
@media (max-width: 760px) {
  .oic-cta::after {
    right: -18%;
    bottom: -8%;
    width: 62vw;
    opacity: .07;
  }
}
@media (max-width: 480px) {
  .oic-cta::after { display: none; }
}

/* Sections this layer inserts are never part of the theme's scroll-reveal,
   so they must not inherit its hidden starting state. */
.oic-p5-standalone {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* =================================================== Cabo San Lucas map === */

.oic-p5-map {
  padding: 112px 0;
  background: var(--oic-paper);
}
.oic-p5-map__inner {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 72px;
}
.oic-p5-map__kicker {
  margin: 0 0 14px;
  color: var(--oic-ink-soft);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.oic-p5-map__title {
  margin: 0 0 18px;
  color: var(--oic-ink);
  font-family: "OIC Cormorant", Georgia, serif;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.028em;
}
.oic-p5-map__lede {
  max-width: 52ch;
  margin: 0 0 26px;
  color: var(--oic-ink-soft);
  font-size: 16px;
  line-height: 1.75;
}
.oic-p5-map__list {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.oic-p5-map__list li {
  padding: 13px 0;
  border-top: 1px solid var(--oic-line);
  color: var(--oic-ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}
.oic-p5-map__list li:last-child { border-bottom: 1px solid var(--oic-line); }
.oic-p5-map__list strong {
  color: var(--oic-ink);
  font-weight: 600;
}
.oic-p5-map__cta {
  display: inline-block;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--oic-sand);
  color: var(--oic-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 220ms var(--oic-p5-ease);
}
.oic-p5-map__cta:hover { opacity: .7; }

.oic-p5-map__figure {
  margin: 0;
  overflow: hidden;
  background: var(--oic-ivory);
  box-shadow: 0 32px 70px -34px rgba(16, 32, 44, .5);
}
.oic-p5-map__figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .oic-p5-map { padding: 82px 0; }
  .oic-p5-map__inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .oic-p5-map__figure { order: -1; }
}