/* ============================================================
   HOMEPAGE. A photo-led hero, with the two holdings as panels
   that rise over it. Each layer is sticky, so the next one's
   top 28px peeks at the bottom of the viewport until it is
   scrolled or clicked into place. home.js drives the motion.
   ============================================================ */

.home b { font-weight: inherit; color: var(--ink); }
/* hidden Focus variants wait at scale 1.07 and must not widen the page */
.home { overflow-x: clip; }

/* ---- section index, right edge ---- */
.sx-index {
  position: fixed;
  right: 18px;
  top: 50%;
  z-index: 20;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sx-index button {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.sx-index span {
  width: 7px; height: 7px;
  border: 1px solid var(--c);
  background: transparent;
  transition: background 0.3s ease;
}
.sx-index .is-active span { background: var(--c); }

/* ============================================================
   HERO
   ============================================================ */
.h-hero {
  position: sticky;
  top: 0;
  z-index: 1;
  height: calc(100vh - 28px);
  overflow: hidden;
  background: var(--band-4);
}
.h-hero__in {
  position: absolute;
  inset: 0;
  transform-origin: 50% 20%;
  background-color: var(--band-1);
  background-image:
    linear-gradient(to right,
      rgba(var(--band-1-rgb), 0.9) 0%,
      rgba(var(--band-1-rgb), 0.45) 40%,
      rgba(var(--band-1-rgb), 0.15) 64%,
      rgba(var(--band-1-rgb), 0.75) 100%),
    linear-gradient(to top,
      rgba(var(--band-4-rgb), 0.96) 0%,
      rgba(var(--band-4-rgb), 0.5) 34%,
      rgba(var(--band-1-rgb), 0) 58%,
      rgba(var(--band-1-rgb), 0.55) 100%),
    url('/images/hero-bluebridge.jpg');
  background-size: cover;
  background-position: 56% 40%;
}

.h-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.h-tint--lm   { background: radial-gradient(ellipse 1100px 640px at 20% 100%, rgba(var(--orange-rgb), 0.22), transparent 70%); }
.h-tint--lcjr { background: radial-gradient(ellipse 1100px 640px at 30% 100%, rgba(var(--lcjr-green-rgb), 0.2), transparent 70%); }
.h-hero[data-hold="lm"] .h-tint--lm,
.h-hero[data-hold="lcjr"] .h-tint--lcjr { opacity: 1; }

.h-shade {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--band-4);
  opacity: 0;
  pointer-events: none;
}

/* ---- pinned latest entry ---- */
.h-entry {
  position: absolute;
  top: 120px;
  right: var(--gutter);
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* ---- latest news carousel (home.js) ---- */
.h-news { display: flex; flex-direction: column; gap: 10px; }
.h-news__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.h-news__paused { display: none; color: var(--ink-45); }
.h-news.is-paused .h-news__paused { display: inline; }
.h-news__ctl { display: flex; align-items: center; gap: 10px; }
.h-news__ctl button { padding: 2px 4px; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); }
.h-news__ctl button:hover { color: var(--orange); }
.h-news__bar { display: flex; gap: 4px; }
.h-news__bar button { flex: 1; padding: 6px 0; border: 0; background: none; cursor: pointer; }
.h-news__bar button > span { position: relative; display: block; height: 2px; background: var(--ink-22); overflow: hidden; }
.h-news__bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--fill, var(--ink-62)); }
.h-news__bar .is-done i { transform: scaleX(1); }
.h-news__bar .is-run i { animation: hNewsProg 6.5s linear forwards; }
.h-news.is-paused .h-news__bar i,
.h-news.is-held .h-news__bar i,
.h-news.is-away .h-news__bar i { animation-play-state: paused; }
@keyframes hNewsProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.h-news__stack { padding-top: 4px; }
.h-news__card { display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.h-news__card:hover { color: var(--ink); }
.h-news__meta { display: flex; align-items: center; gap: 10px; }
.h-news__title { font-size: 17px; line-height: 1.1; font-weight: 800; text-wrap: balance; transition: color var(--transition); }
.h-news__card:hover .h-news__title { color: var(--orange); }

/* ---- message of the month, set well clear of the entry above ---- */
.h-motm {
  margin: 48px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--ink-22);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.h-motm__k { display: flex; align-items: center; gap: 10px; }
.h-motm i { font-style: normal; color: var(--ink-28); }
.h-motm__q { margin: 0; }
.h-motm__q p {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--gray);
  text-wrap: pretty;
}
.h-motm__q em { font-style: normal; color: var(--ink); }
.h-motm[hidden] { display: none; }
/* waiting on the month's note: the dots of someone typing, and two
   lines where the note will sit, a light passing over them */
.h-motm__wait {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 300;
  color: var(--gray);
}
.h-motm__dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(232, 236, 240, 0.08);
}
.h-motm__dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-62);
  animation: hMotmDot 1.4s ease-in-out infinite;
}
.h-motm__dots span:nth-child(2) { animation-delay: 0.18s; }
.h-motm__dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes hMotmDot {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30% { opacity: 1; transform: translateY(-3px); }
}
.h-motm__lines { display: flex; flex-direction: column; gap: 9px; }
.h-motm__lines span {
  display: block;
  height: 7px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(232, 236, 240, 0.16) 50%, transparent 100%) -100% 0 / 50% 100% no-repeat,
    rgba(232, 236, 240, 0.07);
  animation: hMotmSheen 2.6s ease-in-out infinite;
}
.h-motm__lines span:last-child { width: 62%; animation-delay: 0.2s; }
@keyframes hMotmSheen {
  0% { background-position: -100% 0, 0 0; }
  70%, 100% { background-position: 200% 0, 0 0; }
}
/* an open officer or inquiry card rises into its space */
.h-motm { transition: opacity 0.35s ease; }
.h-hero:has(.h-col--pop.is-open) .h-motm { opacity: 0; }
/* home.js fits the entry and the note around the headline in a
   stacked window; without it, a short window just drops the note */
@media (min-width: 901px) and (min-height: 641px) and (max-height: 760px) {
  html:not(.js) .h-motm { display: none; }
}

/* ---- ARRIVAL under the veil from an inner page: as the veil
   lifts, the photograph settles out of a slight zoom and the type
   comes up through it in order ---- */
html.veil .h-hero { animation: hArrive 1.3s var(--ease-out-expo) 0.45s both; }
html.veil .hn,
html.veil .h-head,
html.veil .h-entry,
html.veil .h-cols,
html.veil .h-hero .h-track { animation: hArriveUp 0.9s var(--ease-out-expo) 0.6s both; }
html.veil .h-head { animation-delay: 0.7s; }
html.veil .h-entry { animation-delay: 0.8s; }
html.veil .h-cols { animation-delay: 0.88s; }
html.veil .h-hero .h-track { animation-delay: 0.96s; }
@keyframes hArrive { from { opacity: 0.4; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes hArriveUp { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* ---- headline ---- */
.h-head {
  position: absolute;
  left: var(--gutter);
  top: clamp(170px, 31.7vh, 260px);
  font-size: 52px;
  line-height: 0.94;
  font-weight: 900;
  white-space: nowrap;
}

/* ---- columns: two holdings, a rule, team and contact ---- */
.h-cols {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 156px;
  display: flex;
  gap: 40px;
  align-items: stretch;
}
.h-col {
  --acc: var(--ink-22);
  flex: 0 1 250px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--ink);
}
.h-col:hover { color: var(--ink); }
.h-col--lm   { --acc: var(--orange);     --acc-rgb: var(--orange-rgb); }
.h-col--lcjr { --acc: var(--lcjr-green); --acc-rgb: var(--lcjr-green-rgb); }
.h-col--plain { flex-basis: 220px; }
.h-col--plain:hover .h-col__name { color: var(--orange); }
.h-col__top { height: 28px; display: flex; align-items: flex-end; }
.h-col__top img { max-height: 28px; max-width: 120px; width: auto; }
.h-col__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--acc);
}
.h-col__name { font-size: 16px; line-height: 1; transition: color var(--transition); }
.h-col__desc { font-size: 12.5px; font-weight: 300; line-height: 1.3; color: var(--gray); }
.h-cols__rule { flex: none; width: 1px; align-self: stretch; background: var(--ink-22); }

/* ---- officer and inquiry columns: on hover the column is pulled
   up by its top edge. Its own heading rides up with that edge,
   its glass ground stretches out under it, and the quick options
   the column was covering are left showing beneath. The pull
   runs a little past and settles, like something elastic.
   home.js sets --pull to the height of those options; --head is
   headroom above the glass so the overshoot has room to show. ---- */
.h-col--pop { position: relative; --pull: 120px; --pad: 14px; --head: 28px; }
.h-col__link {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--ink);
  transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.6, 1);
}
.h-col__link:hover { color: var(--ink); }
.h-col--pop.is-open .h-col__link {
  transform: translateY(calc(-1 * var(--pull)));
  transition: transform 0.8s cubic-bezier(0.3, 1.35, 0.55, 1);
}
.h-pop { position: absolute; inset: 0; pointer-events: none; }
.h-pop__glass {
  position: absolute;
  left: calc(-1 * var(--pad));
  right: calc(-1 * var(--pad));
  top: calc(-1 * (var(--pull) + var(--pad) + var(--head)));
  bottom: calc(-1 * var(--pad));
  opacity: 0;
  clip-path: inset(calc(var(--pull) + var(--head)) 0 0 0 round 20px);
  transition:
    clip-path 0.5s cubic-bezier(0.3, 1.2, 0.6, 1),
    opacity 0.3s ease 0.2s;
}
.h-col--pop.is-open .h-pop__glass {
  opacity: 1;
  pointer-events: auto;
  clip-path: inset(var(--head) 0 0 0 round 20px);
  transition:
    clip-path 0.8s cubic-bezier(0.3, 1.35, 0.55, 1),
    opacity 0.15s ease;
}
.h-pop__rows {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
.h-pop__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 0;
  border-top: 1px solid var(--ink-14);
  color: var(--ink);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.15s ease, transform 0.3s ease;
}
.h-col--pop.is-open .h-pop__row {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.4s ease, transform 0.7s var(--ease-out-expo);
  transition-delay: calc(0.14s + var(--i, 0) * 0.05s);
}
.h-pop__row > span:first-child { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.h-pop__row .hc-mono { font-size: 8.5px; }
.h-pop__v { font-size: 13px; font-weight: 300; line-height: 1.2; white-space: nowrap; transition: color var(--transition); }
.h-pop__row:hover .h-pop__v { color: var(--orange); }

/* ---- milestone tracker, placed along the bottom of the hero ---- */
.h-hero .h-track { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 30px; }
.h-hero[data-hold="lm"] li[data-own="lcjr"],
.h-hero[data-hold="lcjr"] li[data-own="lm"] { opacity: 0.2; }

/* ============================================================
   HOLDING PANELS
   ============================================================ */
.h-panel {
  --acc: var(--orange);
  --acc-rgb: var(--orange-rgb);
  position: sticky;
  top: 0;
  z-index: 2;
  height: calc(100vh - 28px);
  overflow: hidden;
  background: var(--band-4);
}
.h-panel--lcjr {
  --acc: var(--lcjr-green);
  --acc-rgb: var(--lcjr-green-rgb);
  position: relative;
  z-index: 3;
  height: 100vh;
}
.h-panel__in {
  position: absolute;
  inset: 0;
  transform-origin: 50% 20%;
  border-top: 2px solid var(--acc);
  background-color: var(--band-2);
  background-image: radial-gradient(ellipse 900px 620px at 90% -6%, rgba(var(--orange-rgb), 0.16), transparent 70%), var(--wash-2);
}
.h-panel--lcjr .h-panel__in {
  background-image: radial-gradient(ellipse 900px 620px at 90% -6%, rgba(var(--lcjr-green-rgb), 0.13), transparent 70%), var(--wash-2);
}
.h-panel__content { position: absolute; inset: 0; }

.h-panel__grid {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: clamp(96px, 16.6vh, 136px);
  display: grid;
  --side: clamp(300px, 30vw, 380px);
  grid-template-columns: minmax(0, 1fr) var(--side);
  gap: 64px;
  align-items: start;
}
.h-panel__main { display: flex; flex-direction: column; gap: 32px; }

.h-rail { display: flex; align-items: center; gap: 16px; }
.h-rail__n { font-family: var(--font-mono); font-size: 10px; font-weight: 300; letter-spacing: 0.16em; color: var(--acc); }
.h-rail__rule { width: 1px; height: 20px; background: var(--ink-22); }
.h-rail img { height: 24px; width: auto; }

/* "Performance" is the widest line, about 8.6em, so the size
   follows the width of the column it has to fit in */
.h-panel__head {
  font-size: clamp(40px, min(9.75vh, (100vw - 192px - var(--side)) / 8.8), 80px);
  line-height: 0.92;
  font-weight: 900;
}
.h-panel__head .fx { height: 0.96em; }

.h-panel__sub {
  margin: 0;
  max-width: 400px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--gray);
  text-wrap: pretty;
}
.h-panel__sub em { font-style: normal; color: var(--ink); }

.h-panel__side { display: flex; flex-direction: column; padding-top: 52px; }
.h-panel__note { margin-top: 14px; }
.h-panel__note i { font-style: normal; color: var(--ink-28); }

/* Liquid Macro figures */
.h-figs { margin: 0; }
.h-figs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.h-figs > div:last-child { border-bottom: 1px solid var(--border); }
.h-figs dd { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.h-figs .hc-display { font-size: 56px; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
.h-figs .is-accent { color: var(--orange); }
.h-figs__u { font-family: var(--font-mono); font-size: 13px; font-weight: 300; color: var(--gray); }

/* LCJR load pricing */
.h-loads__k { padding-bottom: 14px; }
.h-loads { margin: 0; padding: 0; list-style: none; }
.h-loads li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 56px;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.h-loads li:last-child { border-bottom: 1px solid var(--border); }
.h-loads .hc-mono { font-size: 9.5px; letter-spacing: 0.14em; }
.h-loads__bar { position: relative; height: 6px; background: var(--ink-08); }
.h-loads__bar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--f); background: var(--lcjr-green); }
.h-loads .hc-display { font-size: 20px; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }

.h-panel .h-ladder { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 48px; }

/* the strip that peeks under the layer above */
.h-peek {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 3;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0;
  border: 0;
  border-top: 2px solid var(--acc);
  background: var(--band-2);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.h-peek .hc-sq { background: var(--acc); }
.h-peek b { font-weight: inherit; color: var(--acc); }
.h-peek__s { color: var(--gray); }
.h-peek__arrow {
  display: inline-block;
  color: var(--acc);
  animation: hBob 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes hBob {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(3px); }
}

.h-back {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 2;
  transform: translateX(-50%);
  white-space: nowrap;
}
.h-back:hover { color: var(--ink); }

/* ---- the panels come alive as they arrive. home.js sets is-in:
   a glow drifts under each one, its phases step in, the phase
   underway keeps a light running along it, the figures count
   up and the load bars fill. Without script all of it simply
   shows. ---- */
.h-panel__in::before {
  content: '';
  position: absolute;
  left: -12vmax;
  bottom: -34vmax;
  width: 64vmax;
  height: 64vmax;
  pointer-events: none;
  background: radial-gradient(circle, rgba(var(--acc-rgb), 0.12), transparent 62%);
  animation: hDrift 20s ease-in-out infinite alternate;
}
@keyframes hDrift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(34vw, -14vh) scale(1.18); }
}

.js .h-panel .h-ladder li { transition: opacity 0.5s ease, transform 0.8s var(--ease-out-expo); }
.js .h-panel:not(.is-in) .h-ladder li { opacity: 0; transform: translateY(16px); transition-duration: 0.2s; }
.h-panel.is-in .h-ladder li:nth-child(2) { transition-delay: 0.08s; }
.h-panel.is-in .h-ladder li:nth-child(3) { transition-delay: 0.16s; }
.h-panel.is-in .h-ladder li:nth-child(4) { transition-delay: 0.24s; }
.h-panel.is-in .h-ladder li:nth-child(5) { transition-delay: 0.32s; }
.h-panel .h-ladder li.cur { position: relative; clip-path: inset(0); }
.h-panel .h-ladder li.cur::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 45%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  animation: hSweep 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes hSweep { from { transform: translateX(-100%); } to { transform: translateX(230%); } }

.h-figs > div { transition: opacity 0.6s ease, transform 0.9s var(--ease-out-expo); }
.js .h-panel:not(.is-in) .h-figs > div { opacity: 0; transform: translateX(20px); transition-duration: 0.2s; }
.h-panel.is-in .h-figs > div:nth-child(2) { transition-delay: 0.1s; }
.h-panel.is-in .h-figs > div:nth-child(3) { transition-delay: 0.2s; }

.h-loads__bar::after { transform-origin: 0 50%; transition: transform 1.2s var(--ease-out-expo), filter var(--transition); }
.js .h-panel:not(.is-in) .h-loads__bar::after { transform: scaleX(0); transition-duration: 0.2s; }
.h-panel.is-in .h-loads li:nth-child(2) .h-loads__bar::after { transition-delay: 0.08s, 0s; }
.h-panel.is-in .h-loads li:nth-child(3) .h-loads__bar::after { transition-delay: 0.16s, 0s; }
.h-panel.is-in .h-loads li:nth-child(4) .h-loads__bar::after { transition-delay: 0.24s, 0s; }
.h-panel.is-in .h-loads li:nth-child(5) .h-loads__bar::after { transition-delay: 0.32s, 0s; }
.h-loads li .hc-display { transition: color var(--transition); }
.h-loads li:hover .hc-display { color: var(--lcjr-green); }
.h-loads li:hover .h-loads__bar::after { filter: brightness(1.3); }

/* ============================================================
   FLOW LAYOUT. Phones, and windows too short for the stacked
   panels, get the same content as an ordinary scrolling page.
   home.js reads this same query and leaves the motion off.
   ============================================================ */
@media (max-width: 900px), (max-height: 640px) {
  .hn { position: absolute; padding: 22px var(--gutter); }
  .hn-crumb, .sx-index { display: none; }
  .hn-links { gap: 18px; }

  .h-hero { position: relative; height: auto; overflow: visible; }
  .h-hero__in {
    position: relative;
    inset: auto;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 96px var(--gutter) 32px;
    overflow: hidden;
  }
  .h-entry { position: relative; top: auto; right: auto; width: auto; max-width: 320px; }
  .h-motm { margin-top: 36px; }
  .h-head {
    position: relative;
    left: auto; top: auto;
    margin-top: auto;
    font-size: clamp(34px, 9.6vw, 52px);
    white-space: normal;
  }
  .h-cols {
    position: relative;
    left: auto; right: auto; bottom: auto;
    flex-wrap: wrap;
    gap: 28px 24px;
  }
  .h-col, .h-col--plain { flex: 1 1 140px; max-width: 250px; }
  /* Team and Contact are already in the nav */
  .h-cols__rule, .h-col--plain { display: none; }
  .h-hero .h-track { position: relative; left: auto; right: auto; bottom: auto; margin-right: 6px; }

  .h-panel, .h-panel--lcjr { position: relative; height: auto; overflow: visible; }
  .h-panel__in { position: relative; inset: auto; overflow: hidden; }
  .h-panel__content { position: relative; inset: auto; padding: 72px var(--gutter) 64px; }
  .h-panel__grid {
    position: relative;
    left: auto; right: auto; top: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .h-panel__head { font-size: clamp(34px, (100vw - 48px) / 8.8, 80px); }
  .h-panel__side { padding-top: 0; max-width: 480px; }
  .h-figs .hc-display { font-size: 48px; }
  .h-loads li { grid-template-columns: minmax(0, 1fr) 96px 56px; gap: 12px; }
  .h-panel .h-ladder {
    position: relative;
    left: auto; right: auto; bottom: auto;
    margin-top: 48px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 8px;
  }
  .h-peek { display: none; }
  /* the way back sits inside the panel's ground, not on the band below it */
  .h-panel--lcjr .h-panel__content { padding-bottom: 112px; }
  .h-back { left: 0; right: 0; bottom: 36px; transform: none; padding: 12px 0; text-align: center; }

}

/* On a phone the landscape photograph is cropped to its middle,
   which is open water. The portrait cut is framed on the towers. */
@media (max-width: 768px) {
  .h-hero__in {
    background-image:
      linear-gradient(to top,
        rgba(var(--band-4-rgb), 0.96) 0%,
        rgba(var(--band-4-rgb), 0.5) 34%,
        rgba(var(--band-1-rgb), 0) 58%,
        rgba(var(--band-1-rgb), 0.55) 100%),
      linear-gradient(to right, rgba(var(--band-1-rgb), 0.6), rgba(var(--band-1-rgb), 0.2)),
      url('/images/hero-bluebridge-phone.jpg');
    background-position: 50% 0%;
  }
  /* the note lands on the lit deck here, so it gets a frosted ground */
  .h-motm {
    padding: 18px 18px 16px;
    border-top: 0;
    border-radius: 20px;
    background: rgba(var(--band-4-rgb), 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}