/* ==========================================================================
   JBT — Hero: the cartoon San Diego Bay (3D, with the flat illustration as fallback)
   ========================================================================== */
.hb {
  position: relative; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 560px;
  background: #4f96f0; color: #111;
  font-family: "Instrument Sans", system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 72px);
  touch-action: pan-y;
}
.hb__stage { position: absolute; inset: 0; }
.hb__scene { position: absolute; inset: 0; }
.hb__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hb--flat .hb__canvas { display: none; }
.hb__scene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hb__scene [data-depth] { will-change: transform; }

/* Scene life */
.hb-drift { animation: hb-drift var(--t, 160s) linear infinite alternate; }
@keyframes hb-drift { to { transform: translateX(var(--x, 90px)); } }
.hb-bob { animation: hb-bob 4.6s ease-in-out var(--d, 0s) infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes hb-bob { 0%, 100% { transform: translateY(0) rotate(-1.4deg); } 50% { transform: translateY(3px) rotate(1.4deg); } }
.hb-cross { animation: hb-cross 90s linear -30s infinite; }
@keyframes hb-cross { from { transform: translateX(-200px); } to { transform: translateX(1900px); } }
.hb-shimmer { animation: hb-shimmer 3.8s ease-in-out var(--d, 0s) infinite; }
@keyframes hb-shimmer { 0%, 100% { opacity: .12; } 50% { opacity: .38; } }
.hb-gull { animation: hb-gull var(--t, 30s) ease-in-out var(--d, 0s) infinite alternate; }
@keyframes hb-gull { 0% { transform: translate(-40px, 0); } 50% { transform: translate(40px, -14px); } 100% { transform: translate(120px, 6px); } }
.hb-wing { animation: hb-flap .9s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes hb-flap { 50% { transform: scaleY(-.5); } }

/* The card: like the reference — see-through, outlined, big title over a dashed rule, lower-left corner */
.hb__card {
  position: absolute; z-index: 3;
  left: calc(var(--gutter) + clamp(16px, 3.5vw, 64px)); bottom: clamp(20px, 5vh, 72px);
  width: clamp(300px, 32vw, 490px);
  background: rgba(255, 255, 255, .2); border: 1.5px solid #111; border-radius: 10px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hb__card-top { padding: clamp(18px, 1.9vw, 30px) clamp(20px, 2.2vw, 36px) clamp(14px, 1.5vw, 24px); }
.hb__eyebrow { display: flex; align-items: center; gap: 9px; font: 500 10.5px/1.2 "Instrument Sans", sans-serif; letter-spacing: .13em; text-transform: uppercase; }
@media (max-width: 1280px) { .hb__eyebrow { font-size: 10px; letter-spacing: .08em; } }
.hb__eyebrow span { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; letter-spacing: 0; font-size: 10px; }
.hb__title { font: 400 clamp(34px, 3.7vw, 66px)/.9 "Instrument Serif", Georgia, serif; letter-spacing: -.03em; color: #111; }
.hb__title em { font-style: italic; display: block; }
.hb__card-bottom { border-top: 1.5px dashed #111; padding: clamp(14px, 1.7vw, 24px) clamp(20px, 2.2vw, 36px) clamp(18px, 2vw, 28px); }
.hb__sub { font-size: clamp(14px, 1.05vw, 16.5px); line-height: 1.45; font-weight: 500; color: #111; }
.hb__ctas { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.hb__btn { display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border-radius: 999px; border: 1.5px solid #111; font: 500 13.5px/1 "Instrument Sans", sans-serif; color: #111; text-decoration: none; transition: transform .25s, background .25s, color .25s; }
.hb__btn--solid { background: #111; color: #fbfaf6; }
.hb__btn:hover { transform: translateY(-2px); }
.hb__btn:focus-visible { outline: 2px solid #111; outline-offset: 3px; }

/* Entrance */
html.js .hb:not(.is-ready) .hb__card { opacity: 0; }
.hb.is-ready .hb__card { animation: hb-rise 1s cubic-bezier(.22, 1, .36, 1) .25s both; }
@keyframes hb-rise { from { opacity: 0; transform: translateY(60px); } }

/* Phones & portrait tablets: the bay fills the top, the card sits below it */
@media (max-width: 899px) {
  .hb { height: auto; min-height: 0; background: #fbfaf6; }
  .hb__stage { position: relative; inset: auto; height: 68svh; min-height: 440px; max-height: 720px; overflow: hidden; }
  .hb__card { position: relative; left: auto; bottom: auto; width: auto; margin: 20px 16px 8px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hb__card-top { padding: 22px 20px 16px; }
  .hb__eyebrow { font-size: 10.5px; letter-spacing: .12em; }
  .hb__title { font-size: clamp(42px, 12.5vw, 56px); }
  .hb__card-bottom { padding: 16px 20px 22px; }
  .hb__sub { font-size: 15px; }
  .hb__btn { height: 42px; padding: 0 16px; font-size: 14px; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .hb__stage { height: 64svh; min-height: 400px; }
}

@media (prefers-reduced-motion: reduce) {
  .hb-drift, .hb-bob, .hb-cross, .hb-shimmer, .hb-gull, .hb-wing { animation: none; }
  .hb.is-ready .hb__card { animation: none; }
}