:root {
  --ink: #101318;
  --muted: #626873;
  --line: #d9dee7;
  --soft: #f3f6f9;
  --panel: #ffffff;
  --brand: #0a5e8a;
  --brand-strong: #063e5b;
  --accent: #d35428;
  --deep: #07141d;
  --success: #14795d;
  --warning: #9a6500;
  --danger: #b42318;
  --shadow: 0 20px 50px rgba(16, 19, 24, 0.12);
  --radius: 8px;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  overflow-x: clip;
  /* Dark base so a full-reload navigation never flashes WHITE before the (dark) hero/intro
     paints — the browser shows this between pages instead of its default white. */
  background-color: #06243a;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

html.intro-active,
html.intro-transitioning,
body.intro-active,
body.intro-transitioning {
  overflow: hidden;
  scrollbar-width: none;
  scrollbar-gutter: auto;
}

html.intro-active::-webkit-scrollbar,
html.intro-transitioning::-webkit-scrollbar,
body.intro-active::-webkit-scrollbar,
body.intro-transitioning::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--soft);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0;
  overflow-x: clip;
  max-width: 100%;
}

a:active,
button:active {
  transform: none !important;
}

img {
  display: block;
  max-width: 100%;
}

section[id] {
  scroll-margin-top: 100px;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

.button,
.icon-button,
.mini-button,
.mode-button {
  cursor: pointer;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 700;
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(7, 20, 29, 0.18);
}

.button.primary {
  color: #fff;
  background: var(--brand);
}

.button.light {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.12);
}

.button.ghost {
  color: var(--ink);
  background: #fff;
  border-color: var(--line);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 0 42px;
  color: #fff;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.site-header.scrolled {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.brand,
.site-nav {
  display: flex;
  align-items: center;
}

.brand {
  gap: 12px;
  font-weight: 800;
  min-height: 44px;
}

.brand-logo {
  display: block;
  width: auto;
  height: 54px;
  max-width: 168px;
  object-fit: contain;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: var(--brand);
  border-radius: var(--radius);
}

.site-nav {
  gap: 26px;
  font-size: 0.92rem;
  font-weight: 800;
}

.admin-link {
  padding: 7px 10px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
}

.icon-button {
  display: none;
  width: 44px;
  height: 44px;
  color: inherit;
  background: rgba(16, 19, 24, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
}

.hero-section {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 720px;
  max-width: 100%;
  overflow: hidden;
  overflow: clip;
  contain: paint;
  color: #fff;
  background: var(--ink);
}

.hero-media,
.hero-slide-photo-main,
.hero-slide-photo-main img,
.hero-slide-photo-main video,
.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-media {
  display: flex;
  transition: transform 940ms cubic-bezier(0.22, 0.74, 0.22, 1);
  will-change: transform;
}

.hero-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.hero-slide::after {
  display: none;
  content: "";
}

.hero-layout-1::after {
  display: none;
}

.hero-slide::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    linear-gradient(90deg, rgba(7, 20, 29, 0.84) 0%, rgba(7, 20, 29, 0.58) 48%, rgba(7, 20, 29, 0.2) 100%),
    linear-gradient(0deg, rgba(7, 20, 29, 0.48), transparent 56%);
}

.hero-slide.active {
  pointer-events: auto;
}

.hero-slide-photo {
  margin: 0;
}

/* Mobile <picture> wrapper around the hero photo is layout-transparent, so the
   <img> keeps behaving exactly as a direct child of the figure (object-fit, etc). */
.hero-slide-photo picture {
  display: contents;
}

.hero-collage {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  display: none;
}

.hero-slide-photo-sub {
  display: none;
}

.hero-slide-photo-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.04);
  transition: transform 9200ms ease;
}

.hero-slide.active .hero-slide-photo-main img {
  transform: scale(1);
}

.hero-layout-1 .hero-slide-photo-main,
.hero-layout-1 .hero-slide-photo-sub,
.hero-layout-2 .hero-slide-photo-main,
.hero-layout-2 .hero-slide-photo-sub,
.hero-layout-3 .hero-slide-photo-main,
.hero-layout-3 .hero-slide-photo-sub {
  position: absolute;
  inset: 0;
}

.hero-layout-1::before {
  background:
    linear-gradient(90deg, rgba(3, 12, 18, 0.84) 0%, rgba(3, 12, 18, 0.58) 38%, rgba(3, 25, 36, 0.22) 65%, rgba(12, 132, 167, 0.03) 100%),
    linear-gradient(180deg, rgba(3, 12, 18, 0.2), transparent 44%, rgba(3, 12, 18, 0.7));
}

.hero-layout-1 .hero-slide-photo-main {
  filter: saturate(1.08) contrast(1.09) brightness(1.04);
}

.hero-layout-1 .hero-slide-photo-sub {
  display: none;
}

.hero-layout-1::after {
  position: absolute;
  top: -8%;
  right: -10%;
  bottom: -8%;
  z-index: 2;
  display: block;
  width: 44%;
  content: "";
  background:
    radial-gradient(ellipse at 58% 34%, rgba(99, 200, 214, 0.26), transparent 48%),
    linear-gradient(90deg, transparent, rgba(17, 126, 154, 0.2) 54%, rgba(160, 223, 225, 0.04));
  opacity: 0.55;
  mix-blend-mode: screen;
  filter: blur(0.5px);
}

.hero-layout-2 .hero-slide-photo-main {
  inset: 0;
  overflow: hidden;
  filter: saturate(0.86) contrast(1.06);
}

.hero-layout-2 .hero-slide-photo-main::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  content: "";
  background:
    linear-gradient(90deg, transparent 0%, rgba(4, 37, 55, 0.18) 34%, rgba(0, 76, 116, 0.26) 68%, rgba(4, 16, 25, 0.36) 100%),
    radial-gradient(ellipse at 78% 46%, rgba(56, 160, 190, 0.16), transparent 58%);
}

.hero-layout-2 .hero-slide-photo-sub {
  top: 0;
  left: 20%;
  right: -5%;
  bottom: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  clip-path: polygon(52% 0, 100% 0, 100% 100%, 0 100%);
}

.hero-layout-2 .hero-slide-photo-sub::before {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 46%;
  content: "";
  background:
    linear-gradient(90deg, rgba(3, 13, 21, 0.68), rgba(0, 86, 128, 0.24) 54%, transparent 100%),
    radial-gradient(ellipse at 24% 58%, rgba(255, 255, 255, 0.1), transparent 44%);
}

.hero-layout-2 .hero-slide-photo-sub img,
.hero-layout-3 .hero-slide-photo-sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-layout-2 .hero-slide-photo-sub img {
  transform: scale(1.04);
}

.hero-layout-2::before {
  background:
    linear-gradient(90deg, rgba(2, 10, 17, 0.88) 0%, rgba(2, 10, 17, 0.68) 32%, rgba(2, 39, 59, 0.32) 55%, rgba(3, 14, 22, 0.2) 100%),
    linear-gradient(180deg, rgba(2, 10, 17, 0.34) 0%, transparent 44%, rgba(2, 10, 17, 0.58) 100%),
    radial-gradient(ellipse at 50% 48%, rgba(23, 119, 158, 0.24), transparent 45%);
}

.hero-layout-2::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(ellipse at 55% 48%, rgba(0, 79, 111, 0.36), transparent 28%),
    radial-gradient(ellipse at 61% 38%, rgba(188, 247, 250, 0.08), transparent 18%),
    linear-gradient(116deg,
      transparent 31%,
      rgba(1, 15, 25, 0.04) 38%,
      rgba(2, 31, 48, 0.58) 45%,
      rgba(0, 54, 82, 0.9) 51%,
      rgba(4, 91, 122, 0.86) 55%,
      rgba(36, 158, 188, 0.48) 60%,
      rgba(183, 246, 249, 0.1) 63%,
      rgba(5, 64, 90, 0.2) 68%,
      transparent 77%);
  opacity: 0.98;
  filter: blur(0.25px);
  -webkit-backdrop-filter: saturate(1.08) contrast(1.04);
  backdrop-filter: saturate(1.08) contrast(1.04);
}

.hero-layout-2 .hero-slide-copy {
  z-index: 3;
  width: min(560px, 42vw);
  padding-top: 25vh;
  margin-left: max(64px, 9vw);
  text-align: left;
}

.hero-layout-2 .hero-slide-copy h1,
.hero-layout-2 .hero-slide-copy p {
  margin-left: 0;
  margin-right: 0;
}

.hero-layout-3::before {
  background:
    linear-gradient(90deg, rgba(3, 11, 16, 0.94) 0%, rgba(3, 11, 16, 0.82) 42%, rgba(3, 11, 16, 0.3) 100%),
    linear-gradient(0deg, rgba(3, 11, 16, 0.54), transparent 54%);
}

.hero-layout-3::after {
  display: none;
}

.hero-layout-3 .hero-slide-photo-main {
  left: 42%;
  filter: saturate(0.94) contrast(1.04);
}

.hero-layout-3 .hero-slide-copy {
  width: min(560px, calc(100% - 48px));
  margin-left: max(64px, 9vw);
  margin-right: auto;
  padding-top: 24vh;
}

.hero-layout-3 .hero-slide-copy h1 {
  max-width: 560px;
}

.hero-layout-3 .hero-slide-copy p {
  max-width: 500px;
}

.hero-layout-3 .hero-slide-photo-sub {
  top: 46%;
  left: 48%;
  right: 30%;
  bottom: 11%;
  z-index: 3;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  opacity: 0.94;
  mix-blend-mode: normal;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.28);
}

.hero-layout-3 .hero-collage {
  top: 9%;
  right: 4%;
  bottom: 8%;
  width: min(500px, 30vw);
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  grid-template-rows: 0.95fr 1.1fr;
  gap: 0;
  opacity: 0.9;
}

.hero-collage figure {
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--deep);
  border: 0;
  border-radius: 0;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.28);
}

.hero-collage figure:nth-child(1) {
  grid-column: 1 / 3;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}

.hero-collage figure:nth-child(2) {
  transform: translate(-10%, -7%);
  clip-path: polygon(0 0, 100% 8%, 86% 100%, 0 92%);
}

.hero-collage figure:nth-child(3) {
  transform: translate(4%, 10%);
  clip-path: polygon(9% 0, 100% 0, 100% 92%, 0 100%);
}

.hero-collage figure:nth-child(4) {
  display: none;
}

.hero-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  display: none;
}

.hero-slide-copy {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 176px 0 104px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease 180ms, transform 420ms ease 180ms;
}

.hero-slide.active .hero-slide-copy {
  opacity: 1;
  transform: translateY(0);
}

.eyebrow,
.section-heading span,
.contact-band span {
  display: block;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-slide-copy h1 {
  max-width: 760px;
  margin: 16px 0 0;
  font-size: 3.8rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
  word-break: auto-phrase;
}

.hero-slide-copy p {
  max-width: 640px;
  margin: 22px 0 0;
  font-size: 1.08rem;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 2;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.hero-dots button {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hero-dots button::before {
  width: 34px;
  height: 4px;
  content: "";
  background: rgba(255, 255, 255, 0.48);
  border-radius: 99px;
  transition: width 220ms ease, background 220ms ease;
}

.hero-dots .active::before {
  width: 42px;
  background: #fff;
}

.service-section,
.pickup-section,
.company-section,
.news-section,
.contact-band {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 84px 0;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.section-heading h2,
.contact-band h2 {
  margin: 8px 0 0;
  font-size: 2.25rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.business-showcase {
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(420px, 1.08fr);
  gap: 22px;
  align-items: stretch;
}

.service-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(760px, 100%);
  margin: 0 auto 24px;
  border-top: 4px solid #2b87c8;
}

.service-tabs > span,
.service-tabs a,
.service-tabs button {
  display: grid;
  place-items: center;
  min-height: 74px;
  padding: 14px 16px;
  color: #7f858d;
  background: #e9edf2;
  border: 1px solid #d2d8e0;
  border-top: 0;
  font-size: 1.16rem;
  font-weight: 900;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  appearance: none;
}

.service-tabs .active {
  color: var(--ink);
  background: #fff;
  border-bottom-color: #fff;
}

.business-feature,
.pickup-card,
.news-item,
.contact-band {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.business-feature {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  color: #fff;
  background: var(--deep);
}

.business-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.76;
  transform: scale(1.02);
}

.business-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 20, 29, 0.82), rgba(7, 20, 29, 0.16));
}

.business-feature div {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 1;
}

.business-feature span {
  color: var(--accent);
  font-weight: 900;
}

.business-feature h3 {
  margin: 10px 0 12px;
  font-size: 2.2rem;
  line-height: 1.25;
}

.business-feature p {
  margin: 0;
}

.business-list {
  display: grid;
  gap: 12px;
}

.business-row {
  transition-delay: 80ms;
}

.business-row:nth-child(2) {
  transition-delay: 150ms;
}

.business-row:nth-child(3) {
  transition-delay: 220ms;
}

.business-row:nth-child(4) {
  transition-delay: 290ms;
}

.business-row a {
  display: grid;
  grid-template-columns: 54px 130px 1fr 28px;
  gap: 18px;
  align-items: center;
  min-height: 116px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.92);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.business-row a:hover,
.business-row a:focus-visible {
  transform: translateX(5px);
  border-color: rgba(10, 94, 138, 0.42);
  box-shadow: 0 16px 36px rgba(7, 20, 29, 0.12);
}

.business-number {
  color: var(--brand);
  font-weight: 900;
  font-size: 1.05rem;
}

.business-thumb {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: #dce4ec;
}

.business-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 360ms ease;
}

.business-row a:hover .business-thumb img,
.business-row a:focus-visible .business-thumb img {
  transform: scale(1.035);
}

.business-text {
  display: grid;
  gap: 4px;
}

.business-text strong {
  font-size: 1.08rem;
}

.business-text em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.65;
}

.business-row svg {
  color: var(--brand);
}

.pickup-card h3,
.news-item h3 {
  margin: 18px 0 10px;
  line-height: 1.35;
}

.pickup-card p,
.news-item p,
.footer p {
  margin: 0;
  color: var(--muted);
}

.pickup-section {
  width: 100%;
  max-width: none;
  padding: 84px max(24px, calc((100% - 1180px) / 2));
  color: #fff;
  background:
    linear-gradient(90deg, rgba(7, 20, 29, 0.96), rgba(7, 20, 29, 0.84)),
    #07141d;
}

.pickup-section .section-heading h2 {
  color: #fff;
}

.pickup-rail {
  display: grid;
  grid-template-columns: 1.24fr 0.88fr 0.88fr;
  gap: 18px;
  align-items: stretch;
}

.pickup-card {
  overflow: hidden;
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(16, 19, 24, 0.08);
}

.pickup-card:first-child {
  grid-row: span 2;
}

.pickup-card:nth-child(2) {
  margin-top: 24px;
}

.pickup-card:nth-child(3) {
  margin-top: 52px;
}

.pickup-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 360ms ease;
}

.pickup-card:first-child img {
  aspect-ratio: 16 / 12;
}

.pickup-card div {
  padding: 20px;
}

.pickup-card:hover img,
.pickup-card:focus-visible img {
  transform: scale(1.05);
}

.route-section {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr 1fr;
}

.route-section a {
  position: relative;
  overflow: hidden;
  min-height: 164px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--brand-strong);
  border-right: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 1.7rem;
  font-weight: 900;
  text-align: center;
  transition: transform 260ms ease, background 260ms ease;
}

.route-section a::after {
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: 32px;
  height: 2px;
  content: "";
  background: rgba(255, 255, 255, 0.68);
  transform: scaleX(0.5);
  transform-origin: right;
  transition: transform 260ms ease;
}

.route-section a:hover,
.route-section a:focus-visible {
  transform: translateY(-3px);
}

.route-section a:hover::after,
.route-section a:focus-visible::after {
  transform: scaleX(1);
}

.route-section a:nth-child(2) {
  background: var(--brand);
}

.route-section a > span {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 700;
}

.news-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.company-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(340px, 1fr);
  gap: 32px;
  align-items: start;
}

.company-lead {
  padding: 28px;
  color: #fff;
  background: var(--brand-strong);
  border-radius: var(--radius);
}

.company-lead h3 {
  margin: 0 0 12px;
  font-size: 1.5rem;
}

.company-lead p {
  margin: 0;
}

.profile-table {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.profile-table div {
  display: grid;
  grid-template-columns: 160px 1fr;
  border-bottom: 1px solid var(--line);
}

.profile-table div:last-child {
  border-bottom: 0;
}

.profile-table dt,
.profile-table dd {
  margin: 0;
  padding: 16px 18px;
}

.profile-table dt {
  color: var(--brand);
  background: #f3f6f9;
  font-weight: 900;
}

/* 主要取引先・提携金融機関 — static, readable logo cards below the 会社概要 table.
   On the public site only filled slots show; in the editor every slot is an editable card
   (click the logo to upload an image, click the name to type) so partners can be input there. */
.company-partners {
  margin-top: 30px;
}
.partner-group + .partner-group {
  margin-top: 26px;
}
.partner-label {
  margin: 0 0 14px;
  color: var(--brand);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.partner-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.partner-card {
  flex: 0 1 240px;
  display: grid;
  place-items: center;
  min-height: 104px;
  padding: 18px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(16, 19, 24, 0.07);
}
.partner-logo {
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
}
.partner-name {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 800;
}
/* editor-only editable slots */
.partner-card-edit {
  gap: 8px;
  cursor: pointer;
}
.partner-card-edit .partner-logo {
  width: 100%;
  height: 48px;
}
.partner-card-edit .partner-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
}
.partner-card.is-empty {
  background: transparent;
  border: 1px dashed var(--line);
  box-shadow: none;
}

.news-item {
  display: grid;
  grid-template-columns: 148px 1fr;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.news-item img {
  width: 100%;
  height: 96px;
  min-height: 96px;
  margin: 18px 0;
  border-radius: var(--radius);
  object-fit: cover;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 720ms cubic-bezier(0.22, 0.74, 0.22, 1), transform 720ms cubic-bezier(0.22, 0.74, 0.22, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Client-side (SPA) navigation cross-fade. Internal links swap only #app without
   a full reload (site.js), so the header/footer never blank out or jump; this
   gives the swap a quick, gentle cross-fade where the View Transitions API is
   supported. Reduced-motion users get an instant swap (no animation). */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 240ms;
    animation-timing-function: ease;
  }
}

/* Hero layer rebuild: keep the finished photo direction while moving the data surfaces independently. */
.public-page .hero-data-layer,
.preview-frame .hero-data-layer {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  will-change: opacity, transform;
}

.public-page .hero-data-layer::before,
.preview-frame .hero-data-layer::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.84;
  transform: translate3d(0, 0, 0);
}

.public-page .hero-data-map,
.preview-frame .hero-data-map {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: rgba(238, 247, 250, 0.42);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.12));
}

.public-page .hero-data-routes,
.public-page .hero-data-globe,
.public-page .hero-data-icons,
.preview-frame .hero-data-routes,
.preview-frame .hero-data-globe,
.preview-frame .hero-data-icons {
  transform-box: fill-box;
  transform-origin: center;
  will-change: opacity, transform;
}

.public-page .hero-data-routes .is-dotted,
.preview-frame .hero-data-routes .is-dotted {
  stroke-dasharray: 2 7;
}

.public-page .hero-data-icon,
.preview-frame .hero-data-icon {
  opacity: 0.82;
  transform-box: fill-box;
  transform-origin: center;
}

@media (min-width: 861px) {
  .public-page .hero-composite-right .hero-slide-photo-main img,
  .public-page .hero-composite-left .hero-slide-photo-main img,
  .preview-frame .hero-composite-right .hero-slide-photo-main img,
  .preview-frame .hero-composite-left .hero-slide-photo-main img {
    animation: none !important;
    object-fit: fill;
    object-position: center center;
    transform: none !important;
  }

  .public-page .hero-composite-right::before,
  .preview-frame .hero-composite-right::before {
    background:
      linear-gradient(90deg, rgba(1, 13, 22, 0.28), rgba(1, 13, 22, 0.04) 34%, rgba(4, 72, 112, 0.04) 100%);
  }

  .public-page .hero-composite-left::before,
  .preview-frame .hero-composite-left::before {
    background:
      linear-gradient(90deg, rgba(4, 11, 16, 0.18), rgba(4, 11, 16, 0.04) 44%, rgba(4, 11, 16, 0.12) 100%),
      radial-gradient(ellipse at 37% 52%, rgba(255, 220, 150, 0.22), transparent 31%);
  }

  .public-page .hero-composite-right::after,
  .preview-frame .hero-composite-right::after {
    top: -9%;
    right: -4%;
    bottom: -8%;
    left: auto;
    width: 59%;
    height: auto;
    display: block;
    border-radius: 47% 0 0 50% / 36% 0 0 54%;
    background:
      linear-gradient(97deg, rgba(41, 179, 227, 0.05) 0%, rgba(30, 163, 220, 0.2) 28%, rgba(20, 131, 205, 0.44) 66%, rgba(8, 91, 174, 0.62) 100%),
      radial-gradient(ellipse at 70% 46%, rgba(132, 224, 249, 0.22), transparent 52%);
    clip-path: ellipse(72% 66% at 78% 50%);
    box-shadow: inset 22px 0 34px rgba(255, 255, 255, 0.11);
    mix-blend-mode: normal;
    opacity: 0;
    transform-origin: 72% 50%;
  }

  .public-page .hero-composite-left::after,
  .preview-frame .hero-composite-left::after {
    top: -9%;
    right: auto;
    bottom: -8%;
    left: -5%;
    width: 45%;
    height: auto;
    display: block;
    border-radius: 0 52% 48% 0 / 0 44% 58% 0;
    background:
      linear-gradient(96deg, rgba(5, 11, 17, 0.9), rgba(28, 42, 55, 0.74) 56%, rgba(218, 230, 235, 0.18) 86%, transparent 100%),
      radial-gradient(ellipse at 68% 72%, rgba(252, 230, 168, 0.22), transparent 28%);
    clip-path: ellipse(82% 68% at 13% 50%);
    box-shadow:
      inset -18px 0 32px rgba(255, 255, 255, 0.17),
      inset -4px 0 12px rgba(255, 241, 188, 0.22);
    mix-blend-mode: normal;
    opacity: 0;
    transform-origin: 20% 52%;
  }

  .public-page .hero-composite-right .hero-data-layer,
  .preview-frame .hero-composite-right .hero-data-layer {
    top: 5%;
    right: -1.2%;
    width: min(58vw, 790px);
    height: 86%;
  }

  .public-page .hero-composite-right .hero-data-layer::before,
  .preview-frame .hero-composite-right .hero-data-layer::before {
    background-image: url("/assets/generated/bondi-hero-02-info-layer.png");
    opacity: 0.58;
    mix-blend-mode: screen;
  }

  .public-page .hero-composite-right .hero-data-map,
  .preview-frame .hero-composite-right .hero-data-map {
    stroke: rgba(229, 248, 255, 0.5);
    transform: translate3d(4%, -1%, 0) scale(1.06);
  }

  .public-page .hero-composite-left .hero-data-layer,
  .preview-frame .hero-composite-left .hero-data-layer {
    top: -3%;
    left: -2.6%;
    width: min(47vw, 660px);
    height: 104%;
  }

  .public-page .hero-composite-left .hero-data-layer::before,
  .preview-frame .hero-composite-left .hero-data-layer::before {
    background-image: url("/assets/generated/bondi-hero-03-info-layer.png");
    opacity: 0.78;
    mix-blend-mode: normal;
  }

  .public-page .hero-composite-left .hero-data-map,
  .preview-frame .hero-composite-left .hero-data-map {
    stroke: rgba(232, 240, 242, 0.36);
    transform: translate3d(-23%, -1%, 0) scale(1.1);
  }

  .public-page .hero-composite-left .hero-data-globe,
  .preview-frame .hero-composite-left .hero-data-globe {
    transform: translate3d(-40%, 5%, 0) scale(1.16);
  }

  .public-page .hero-composite-left .hero-collage,
  .preview-frame .hero-composite-left .hero-collage {
    top: 13%;
    right: 3.4%;
    bottom: 10%;
    left: auto;
    z-index: 4;
    display: grid;
    width: min(25vw, 350px);
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 3.2vh;
    opacity: 1;
    pointer-events: none;
  }

  .public-page .hero-composite-left .hero-collage figure,
  .preview-frame .hero-composite-left .hero-collage figure {
    width: min(13vw, 178px);
    height: min(9vw, 126px);
    padding: 8px 8px 22px;
    overflow: hidden;
    background: #fff;
    border-radius: 1px;
    box-shadow: 0 14px 24px rgba(0, 12, 24, 0.22);
    transform: translate3d(0, 0, 0) rotate(var(--polaroid-rotate, 0deg));
  }

  .public-page .hero-composite-left .hero-collage figure:nth-child(1),
  .preview-frame .hero-composite-left .hero-collage figure:nth-child(1) {
    justify-self: end;
    --polaroid-rotate: -2deg;
  }

  .public-page .hero-composite-left .hero-collage figure:nth-child(2),
  .preview-frame .hero-composite-left .hero-collage figure:nth-child(2) {
    justify-self: start;
    --polaroid-rotate: 5deg;
  }

  .public-page .hero-composite-left .hero-collage figure:nth-child(3),
  .preview-frame .hero-composite-left .hero-collage figure:nth-child(3) {
    justify-self: center;
    --polaroid-rotate: -6deg;
  }

  .public-page .hero-composite-left .hero-collage figure:nth-child(4),
  .preview-frame .hero-composite-left .hero-collage figure:nth-child(4) {
    display: none;
  }

  .public-page .hero-composite-left .hero-collage img,
  .preview-frame .hero-composite-left .hero-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .public-page .hero-composite-right.active::after,
  .preview-frame .hero-composite-right.active::after {
    animation:
      bondi-sea-glass-in 1400ms cubic-bezier(0.16, 1, 0.3, 1) 160ms both,
      bondi-sea-glass-idle 18000ms cubic-bezier(0.45, 0, 0.25, 1) 1700ms infinite alternate;
  }

  .public-page .hero-composite-left.active::after,
  .preview-frame .hero-composite-left.active::after {
    animation:
      bondi-dark-glass-in 1500ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both,
      bondi-dark-glass-idle 19000ms cubic-bezier(0.45, 0, 0.25, 1) 1800ms infinite alternate;
  }

  .public-page .hero-composite.active .hero-data-layer,
  .preview-frame .hero-composite.active .hero-data-layer {
    animation:
      bondi-data-layer-in 1280ms cubic-bezier(0.16, 1, 0.3, 1) 340ms both,
      bondi-data-layer-float 16000ms cubic-bezier(0.45, 0, 0.25, 1) 1700ms infinite alternate;
  }

  .public-page .hero-composite.active .hero-data-routes,
  .preview-frame .hero-composite.active .hero-data-routes {
    animation: bondi-route-float 14500ms cubic-bezier(0.45, 0, 0.25, 1) 1500ms infinite alternate;
  }

  .public-page .hero-composite.active .hero-data-globe,
  .preview-frame .hero-composite.active .hero-data-globe {
    animation: bondi-globe-float 17500ms cubic-bezier(0.45, 0, 0.25, 1) 1600ms infinite alternate;
  }

  .public-page .hero-composite.active .hero-data-icon,
  .preview-frame .hero-composite.active .hero-data-icon {
    animation: bondi-icon-float 12500ms cubic-bezier(0.45, 0, 0.25, 1) 1600ms infinite alternate;
  }

  .public-page .hero-composite.active .hero-data-icon:nth-child(2n),
  .preview-frame .hero-composite.active .hero-data-icon:nth-child(2n) {
    animation-delay: 2200ms;
    animation-direction: alternate-reverse;
  }

  .public-page .hero-composite-left.active .hero-collage figure,
  .preview-frame .hero-composite-left.active .hero-collage figure {
    animation:
      bondi-polaroid-in 1120ms cubic-bezier(0.16, 1, 0.3, 1) calc(420ms + var(--polaroid-order, 0) * 120ms) both,
      bondi-polaroid-float 15000ms cubic-bezier(0.45, 0, 0.25, 1) calc(1600ms + var(--polaroid-order, 0) * 240ms) infinite alternate;
  }
}

.public-page .hero-composite-left .hero-collage figure:nth-child(1),
.preview-frame .hero-composite-left .hero-collage figure:nth-child(1) {
  --polaroid-order: 0;
}

.public-page .hero-composite-left .hero-collage figure:nth-child(2),
.preview-frame .hero-composite-left .hero-collage figure:nth-child(2) {
  --polaroid-order: 1;
}

.public-page .hero-composite-left .hero-collage figure:nth-child(3),
.preview-frame .hero-composite-left .hero-collage figure:nth-child(3) {
  --polaroid-order: 2;
}

@keyframes bondi-sea-glass-in {
  from { opacity: 0; transform: translate3d(44px, -10px, 0) scaleX(0.94); }
  to { opacity: 0.58; transform: translate3d(0, 0, 0) scaleX(1); }
}

@keyframes bondi-sea-glass-idle {
  from { transform: translate3d(-4px, 2px, 0) scale(0.996); }
  to { transform: translate3d(7px, -3px, 0) scale(1.008); }
}

@keyframes bondi-dark-glass-in {
  from { opacity: 0; transform: translate3d(-42px, 8px, 0) scaleX(0.94); }
  to { opacity: 0.86; transform: translate3d(0, 0, 0) scaleX(1); }
}

@keyframes bondi-dark-glass-idle {
  from { transform: translate3d(-7px, 2px, 0) rotate(-0.4deg) scale(0.996); }
  to { transform: translate3d(5px, -4px, 0) rotate(0.6deg) scale(1.006); }
}

@keyframes bondi-data-layer-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes bondi-data-layer-float {
  from { transform: translate3d(-3px, 2px, 0) scale(0.998); }
  to { transform: translate3d(5px, -5px, 0) scale(1.004); }
}

@keyframes bondi-route-float {
  from { opacity: 0.72; transform: translate3d(-8px, 4px, 0) rotate(-0.35deg); }
  to { opacity: 1; transform: translate3d(10px, -6px, 0) rotate(0.45deg); }
}

@keyframes bondi-globe-float {
  from { opacity: 0.58; transform: translate3d(-4px, 3px, 0) rotate(-0.7deg) scale(0.992); }
  to { opacity: 0.9; transform: translate3d(5px, -5px, 0) rotate(0.9deg) scale(1.012); }
}

@keyframes bondi-icon-float {
  from { opacity: 0.5; transform: translate3d(-4px, 3px, 0) scale(0.985); }
  to { opacity: 0.9; transform: translate3d(5px, -4px, 0) scale(1.015); }
}

@keyframes bondi-polaroid-in {
  from { opacity: 0; transform: translate3d(16px, 18px, 0) rotate(var(--polaroid-rotate, 0deg)) scale(0.94); }
  to { opacity: 0.96; transform: translate3d(0, 0, 0) rotate(var(--polaroid-rotate, 0deg)) scale(1); }
}

@keyframes bondi-polaroid-float {
  from { transform: translate3d(-4px, 3px, 0) rotate(calc(var(--polaroid-rotate, 0deg) - 0.8deg)) scale(0.997); }
  to { transform: translate3d(5px, -5px, 0) rotate(calc(var(--polaroid-rotate, 0deg) + 0.8deg)) scale(1.004); }
}

@media (max-width: 860px) {
  .public-page .hero-data-layer,
  .preview-frame .hero-data-layer {
    opacity: 0.78;
  }

  .public-page .hero-composite-right .hero-data-layer,
  .preview-frame .hero-composite-right .hero-data-layer {
    top: 9%;
    right: -34%;
    width: 112%;
    height: 58%;
  }

  .public-page .hero-composite-left .hero-data-layer,
  .preview-frame .hero-composite-left .hero-data-layer {
    top: 2%;
    left: -45%;
    width: 118%;
    height: 62%;
  }

  .public-page .hero-composite-left .hero-collage,
  .preview-frame .hero-composite-left .hero-collage {
    top: 11%;
    right: 3.6%;
    bottom: 12%;
    left: auto;
    z-index: 7;
    display: grid;
    width: min(22vw, 330px);
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 2.8vh;
    opacity: 0.92;
    pointer-events: none;
  }

  .public-page .hero-composite-left .hero-collage figure,
  .preview-frame .hero-composite-left .hero-collage figure {
    display: block;
    width: min(12vw, 168px);
    height: min(8.4vw, 118px);
    padding: 7px 7px 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 2px;
    box-shadow: 0 16px 34px rgba(0, 11, 20, 0.3);
    transform: translate3d(0, 0, 0) rotate(var(--polaroid-rotate, 0deg));
  }

  .public-page .hero-composite-left .hero-collage figure:nth-child(1),
  .preview-frame .hero-composite-left .hero-collage figure:nth-child(1) {
    justify-self: end;
    --polaroid-rotate: -2deg;
  }

  .public-page .hero-composite-left .hero-collage figure:nth-child(2),
  .preview-frame .hero-composite-left .hero-collage figure:nth-child(2) {
    justify-self: start;
    --polaroid-rotate: 4deg;
  }

  .public-page .hero-composite-left .hero-collage figure:nth-child(3),
  .preview-frame .hero-composite-left .hero-collage figure:nth-child(3) {
    justify-self: center;
    --polaroid-rotate: -5deg;
  }

  .public-page .hero-composite-left .hero-collage figure:nth-child(4),
  .preview-frame .hero-composite-left .hero-collage figure:nth-child(4) {
    display: none;
  }

  .public-page .hero-composite-left .hero-collage img,
  .preview-frame .hero-composite-left .hero-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-page .hero-data-layer,
  .public-page .hero-data-routes,
  .public-page .hero-data-globe,
  .public-page .hero-data-icon,
  .public-page .hero-composite-right.active::after,
  .public-page .hero-composite-left.active::after,
  .public-page .hero-composite-left .hero-collage figure,
  .preview-frame .hero-data-layer,
  .preview-frame .hero-data-routes,
  .preview-frame .hero-data-globe,
  .preview-frame .hero-data-icon,
  .preview-frame .hero-composite-right.active::after,
  .preview-frame .hero-composite-left.active::after,
  .preview-frame .hero-composite-left .hero-collage figure {
    animation: none !important;
    transform: none !important;
    transition-duration: 0.01ms !important;
  }

  .public-page .hero-data-layer,
  .preview-frame .hero-data-layer {
    opacity: 1 !important;
  }
}

/* Bondi distinction pass: quieter page boot, editorial hero 3 background, and a readable footer. */
/* During boot the body shows (its background) while #app is hidden — paint it dark (not the
   near-white --soft) so the reload/boot reads as dark, seamless with the dark hero/intro that
   fades in. The body eases back to its normal colour as the content reveals (covers the fade). */
.public-page.is-booting {
  background-color: #06243a;
}
.public-page {
  transition: background-color 240ms ease;
}
.public-page.is-booting #app,
.public-page.is-booting .footer {
  opacity: 0;
  visibility: hidden;
}

.public-page #app,
.public-page .footer {
  opacity: 1;
  transition: opacity 180ms ease;
}

/* Dark boot veil (also defined inline in index.html <head> so it paints on the FIRST paint).
   A contentful full-screen cover that makes the browser drop the held PREVIOUS page on reload/nav
   and show dark immediately; it fades out as soon as the intro shows or the content is ready. */
#boot-veil {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #06243a;
  pointer-events: none;
}
.content-ready #boot-veil,
.intro-active #boot-veil {
  opacity: 0;
  transition: opacity 220ms ease;
}

/* SUBPAGE boot: the dark veil only exists to mask the HOME dark intro/hero. On light subpages it
   was a dark full-screen flash on every navigation that also hid the header. `html.boot-sub` is set
   inline (index.html) before first paint for any non-home route → light base, no veil, header stays.
   Mirrors the inline critical CSS so the rule survives once the external stylesheet takes over. */
html.boot-sub {
  background-color: var(--soft);
}
html.boot-sub .public-page.is-booting {
  background-color: var(--soft);
}
html.boot-sub #boot-veil {
  display: none;
}

.home-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: block;
  overflow: hidden;
  color: #fff;
  background: #06243a;
  /* The overlay fade-out IS the hero/text reveal — ease-out (slows at the end) so the
     copy never snaps faster on the last beat, and long enough to read as one even fade. */
  transition: opacity 900ms cubic-bezier(0.35, 0, 0.15, 1), background-color 480ms ease;
}

.home-intro[hidden] {
  display: none;
}

.home-intro::before,
.home-intro::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.home-intro::before {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(4, 19, 30, 0.04) 0%, rgba(4, 19, 30, 0) 46%, rgba(4, 19, 30, 0.16) 100%),
    linear-gradient(90deg, rgba(4, 19, 30, 0.42) 0%, rgba(4, 19, 30, 0.14) 34%, rgba(4, 19, 30, 0.03) 68%, rgba(4, 19, 30, 0.1) 100%);
}

.home-intro::after {
  /* White flash veil removed: the intro now exits via the blue band wipe. */
  display: none;
}

.home-intro-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(1.04) contrast(1.03);
  transform: scale(1.01);
}

.home-intro-copy {
  position: absolute;
  left: clamp(24px, 6vw, 86px);
  bottom: clamp(84px, 13vh, 132px);
  z-index: 4;
  width: min(760px, calc(100% - 48px));
  pointer-events: none;
}

.home-intro-transition {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

/* Phase 2 wipe veil: a centred blue band (deep core, faded edges) that scales
   out from the centre to flood the screen, holds, then contracts back to the
   top-page band width. transform-origin centre keeps it pinned mid-screen. */
.home-intro-transition::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%) scaleX(0.04);
  transform-origin: 50% 50%;
  background: linear-gradient(
    90deg,
    rgba(18, 96, 158, 0) 0%,
    rgba(24, 118, 188, 0.92) 12%,
    rgba(14, 86, 150, 0.98) 50%,
    rgba(24, 118, 188, 0.92) 88%,
    rgba(18, 96, 158, 0) 100%
  );
  will-change: transform, opacity;
}

/* Phase 2 blades: near-vertical light streaks that fan out from the centre and
   drift independently (--travel-x / --delay), then converge as the veil settles. */
.home-intro-transition span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--thickness, 7vw);
  height: 150vh;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(124, 214, 246, 0.04), rgba(26, 154, 219, 0.5) 30%, rgba(7, 80, 152, 0.85) 50%, rgba(26, 154, 219, 0.5) 70%, rgba(124, 214, 246, 0.04)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02));
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.1),
    0 0 30px rgba(22, 139, 211, 0.26);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--angle)) scaleX(0.04);
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}

.home-intro.wipe-active .home-intro-transition {
  opacity: 1;
}

.home-intro.wipe-active .home-intro-transition::before {
  animation: introWipeVeil var(--wipe-duration, 1600ms) cubic-bezier(0.62, 0, 0.2, 1) both;
}

.home-intro.wipe-active .home-intro-transition span {
  animation: introWipeBlade var(--wipe-duration, 1600ms) cubic-bezier(0.5, 0, 0.2, 1) var(--delay) both;
}

/* At the wipe peak the screen is solid blue; drop the footage + dark overlay so
   the contracting band reveals the home page underneath, not the intro frame. */
.home-intro.wipe-swapped {
  background: transparent;
}

.home-intro.wipe-swapped .home-intro-video,
.home-intro.wipe-swapped::before {
  opacity: 0;
  /* match the hero (#app) fade-in so the video → photo crossfade is one even speed */
  transition: opacity 700ms cubic-bezier(0.33, 0, 0.3, 1);
}

/* ── Intro → hero band reveal stage ─────────────────────────────────────────
   A clone of the hero band that OPENS over the still-running intro video, then
   hands off to the settled photo hero. It reuses the real .hero-sankyu-band CSS
   (gradients/clips); here we only own the stage layer, the screen tint, and the
   collapsed→open motion. Inert until the outro adds .home-intro.effect-active. */
.home-intro-band-stage {
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}

.home-intro-band-stage .intro-tint {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(180deg,
    rgba(0, 46, 112, 0.6) 0%,
    rgba(2, 92, 168, 0.52) 60%,
    rgba(12, 140, 206, 0.46) 100%);
  /* de-tint at the same 700ms speed as the video→photo crossfade so the whole swap
     reads as one even fade (no mid-way speed jump). */
  transition: opacity 700ms cubic-bezier(0.33, 0, 0.3, 1);
}

/* The band starts invisible. The core EMERGES via clip-path (angle preserved) in one
   continuous move; the other lines simply fade in (no scaleX, which would skew the
   diagonal). */
.home-intro-band-stage .intro-band span {
  opacity: 0;
}

/* P2→P5 in ONE continuous motion: EVERY line (keeping the final arrangement + ratios)
   emerges from a thin diagonal sliver at the centre, spreads out and a little past the
   settled width, then eases back. Each line's clip-path is scaled about the shared
   centre axis, so ONLY the width grows — the diagonal SLOPE never changes (no scaleX
   skew). The footage crossfade + header drop are timed to the widest point. */
.home-intro.effect-active .home-intro-band-stage {
  opacity: 1;
}
.home-intro.effect-active .intro-tint {
  opacity: 1;
}
/* Each line runs on its OWN duration / delay / easing, so they thicken & thin at
   scattered (バラバラ) speeds, independently — but every keyframe ends on the settled
   clip, so they all converge to the same top-page arrangement. */
.home-intro.effect-active .intro-band .hero-sankyu-band__core {
  opacity: 1;
  transition: opacity 300ms ease;
  animation: intro-emerge-core 2050ms cubic-bezier(0.22, 0.32, 0.2, 1) 0ms both;
}
.home-intro.effect-active .intro-band .hero-sankyu-band__veil-left {
  opacity: 1;
  transition: opacity 300ms ease;
  animation: intro-emerge-veil-left 2450ms cubic-bezier(0.26, 0.5, 0.24, 1) 120ms both;
}
.home-intro.effect-active .intro-band .hero-sankyu-band__veil-right {
  opacity: 1;
  transition: opacity 300ms ease;
  animation: intro-emerge-veil-right 1900ms cubic-bezier(0.18, 0.2, 0.22, 1) 220ms both;
}
.home-intro.effect-active .intro-band .hero-sankyu-band__edge-left {
  opacity: 0.6;
  transition: opacity 300ms ease;
  animation: intro-emerge-edge-left 2300ms cubic-bezier(0.3, 0.42, 0.2, 1) 60ms both;
}
.home-intro.effect-active .intro-band .hero-sankyu-band__edge-right {
  opacity: 0.6;
  transition: opacity 300ms ease;
  animation: intro-emerge-edge-right 1800ms cubic-bezier(0.2, 0.25, 0.25, 1) 300ms both;
}
.home-intro.effect-active .intro-band .hero-sankyu-band__glint {
  /* Match the REAL band's settled glint opacity (0.7). Core/veils/edges already match the real
     band, but the clone glint settled at 0.6 — so at the clone→real hand-off the glint jumped
     0.6→0.7 (a visible brightness pop). Matching it makes the swap seamless. */
  opacity: 0.7;
  transition: opacity 300ms ease;
  animation: intro-emerge-glint 2600ms cubic-bezier(0.28, 0.55, 0.24, 1) 160ms both;
}
/* The tint eases off as the footage swaps so the revealed photo hero reads cleanly. */
.home-intro.wipe-swapped .intro-tint {
  opacity: 0;
}

/* Each line: thin sliver at the centre (0%) → spreads + widens well past the settled
   width to a bigger peak (52%) → smoothly eases ALL THE WAY back to its settled clip
   (100%). `both` fill holds the thin 0% during each line's delay, so no wide band
   flashes before it starts. Every line is scaled about the same centre axis, so the
   arrangement + ratios + the diagonal angle are all preserved. */
@keyframes intro-emerge-core {
  0%   { clip-path: polygon(59.2% 0, 60.8% 0, 40.8% 100%, 39.2% 100%); }
  52%  { clip-path: polygon(38.4% 0, 81.6% 0, 61.6% 100%, 18.4% 100%); }
  100% { clip-path: polygon(44% 0, 76% 0, 56% 100%, 24% 100%); }
}
@keyframes intro-emerge-veil-left {
  0%   { clip-path: polygon(58.32% 0, 59.24% 0, 39.24% 100%, 38.96% 100%); }
  52%  { clip-path: polygon(14.64% 0, 39.35% 0, 19.35% 100%, 11.79% 100%); }
  100% { clip-path: polygon(26.4% 0, 44.7% 0, 24.7% 100%, 19.1% 100%); }
}
@keyframes intro-emerge-veil-right {
  0%   { clip-path: polygon(60.77% 0, 61.06% 0, 41.54% 100%, 40.77% 100%); }
  52%  { clip-path: polygon(80.66% 0, 88.62% 0, 81.58% 100%, 60.66% 100%); }
  100% { clip-path: polygon(75.3% 0, 81.2% 0, 70.8% 100%, 55.3% 100%); }
}
@keyframes intro-emerge-edge-left {
  0%   { clip-path: polygon(59.13% 0, 59.27% 0, 39.27% 100%, 39.13% 100%); }
  52%  { clip-path: polygon(36.51% 0, 40.29% 0, 20.29% 100%, 16.51% 100%); }
  100% { clip-path: polygon(42.6% 0, 45.4% 0, 25.4% 100%, 22.6% 100%); }
}
@keyframes intro-emerge-edge-right {
  0%   { clip-path: polygon(60.73% 0, 60.87% 0, 40.87% 100%, 40.73% 100%); }
  52%  { clip-path: polygon(79.71% 0, 83.49% 0, 63.49% 100%, 59.71% 100%); }
  100% { clip-path: polygon(74.6% 0, 77.4% 0, 57.4% 100%, 54.6% 100%); }
}
@keyframes intro-emerge-glint {
  0%   { clip-path: polygon(51.2% 0, 51.6% 0, 66.9% 100%, 66.5% 100%); }
  52%  { clip-path: polygon(46% 0, 56.8% 0, 72.1% 100%, 61.3% 100%); }
  100% { clip-path: polygon(47.4% 0, 55.4% 0, 70.7% 100%, 62.7% 100%); }
}

/* COMBINATION FIX (cause B): reveal WITHOUT fading the overlay as a group. Fading `.home-intro`
   via opacity would drag the CLONE band (animating clip-path inside the band-stage) into an
   opacity-animating group — the same bug as cause A. Instead keep the overlay opacity at 1 and
   fade only the BACKGROUND pieces individually (overlay bg-colour + video + vignette + tint).
   The clone band-stage stays out of any opacity group, so its clip-path animates cleanly while
   the video→photo dissolve runs behind it; the #app band takes over at finalize. */
.home-intro.intro-fading {
  background-color: transparent;
  transition: background-color 650ms cubic-bezier(0.35, 0, 0.15, 1);
}
.home-intro.intro-fading .home-intro-video,
.home-intro.intro-fading::before,
.home-intro.intro-fading .intro-tint {
  opacity: 0;
  transition: opacity 650ms cubic-bezier(0.35, 0, 0.15, 1);
}

.home-intro-logo-frame {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: max-content;
  margin-bottom: clamp(22px, 3.8vh, 42px);
  padding: clamp(12px, 1.1vw, 16px) clamp(20px, 2vw, 30px) clamp(10px, 1vw, 14px);
  opacity: 0;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transform: translate3d(0, 18px, 0) scale(0.98);
}

.home-intro-logo-frame::before,
.home-intro-logo-frame::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.home-intro-logo-frame::before {
  inset: -2px -24px -2px -12px;
  background:
    linear-gradient(104deg, rgba(2, 20, 31, 0.66), rgba(8, 70, 100, 0.28) 52%, rgba(255, 255, 255, 0.06) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.18);
  clip-path: polygon(0 12%, 90% 0, 100% 26%, 94% 100%, 4% 100%);
  box-shadow: 0 24px 66px rgba(0, 16, 24, 0.34);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
}

@media (max-width: 860px) {
  /* iOS Safari renders `backdrop-filter` over a <video> as an opaque white/grey box
     (compositing bug), which hid the white intro logo behind a "white square".
     Mobile-only: solid dark card, no backdrop-filter. Desktop keeps the glass card
     above (the bug is iOS-specific), so the PC look is unchanged. */
  .home-intro-logo-frame::before {
    /* opaque dark card (see the .public-page winning rule below for rationale) */
    background:
      linear-gradient(104deg, rgb(8, 26, 38), rgb(11, 46, 66) 52%, rgb(8, 26, 38) 100%);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 66px rgba(0, 16, 24, 0.42);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.home-intro-logo-frame::after {
  right: -14px;
  bottom: 6px;
  left: 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(128, 210, 236, 0.28), transparent);
}

.home-intro-logo {
  position: relative;
  z-index: 1;
  width: clamp(126px, 14vw, 210px);
  height: auto;
  opacity: 0;
  filter:
    blur(5px)
    drop-shadow(0 2px 1px rgba(0, 10, 18, 0.28))
    drop-shadow(0 16px 28px rgba(0, 10, 18, 0.3));
  transform: translate3d(-10px, 7px, 0) scale(0.985);
}

.home-intro-kicker,
.home-intro-title,
.home-intro-lead {
  margin: 0;
  text-shadow: 0 18px 46px rgba(0, 13, 24, 0.38);
}

.home-intro-kicker {
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.78rem, 1.1vw, 0.98rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.16em;
}

.home-intro-title {
  max-width: 980px;
  margin-top: 12px;
  color: #fff;
  font-size: clamp(3.1rem, 6.2vw, 5.8rem);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: 0;
  white-space: nowrap;
}

.home-intro-lead {
  max-width: 620px;
  margin-top: clamp(18px, 3vh, 32px);
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(1.08rem, 2.1vw, 1.62rem);
  font-weight: 900;
  line-height: 1.55;
}

.intro-unit-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.intro-unit {
  display: inline-block;
  opacity: 0;
  --exit-delay: 0ms;
  will-change: opacity, transform, filter, clip-path;
}

.public-page.intro-active .home-intro-logo-frame {
  animation: introLogoReveal 1180ms cubic-bezier(0.16, 1, 0.3, 1) 180ms forwards;
}

.public-page.intro-active .home-intro-logo {
  animation: introLogoMarkReveal 860ms cubic-bezier(0.16, 1, 0.3, 1) 440ms forwards;
}

.home-intro.copy-exiting .intro-unit-wrap {
  overflow: visible;
}

/* Phase 1 exit: logo + every text line dissolve on the SAME clock (delay 0)
   so they finish together ("同時"), but each keeps its own crafted dissolve
   (rise + blur), not a flat fade. */
.home-intro.copy-exiting .intro-unit {
  /* Keep the unit unclipped so the crafted exit is visible: the editorial entrance
     base clips units to inset(100%) (hidden); without this, replacing the reveal
     animation would snap them back to hidden instead of playing the exit. */
  clip-path: none !important;
  text-shadow: 0 10px 28px rgba(0, 13, 24, 0.16);
  /* `both`, not `forwards`: hold the 0% (visible) frame during each unit's
     --exit-delay so staggered glyphs don't snap to their hidden base state first
     (that snap was the "all flash off, then scatter" double-disappear). */
  animation: introCopyDissolveOut 720ms cubic-bezier(0.5, 0, 0.2, 1) var(--exit-delay, 0ms) both !important;
}

/* Every other character/word leaves the other way → independent, scattered exit. */
.home-intro.copy-exiting .intro-unit-wrap:nth-of-type(even) .intro-unit {
  animation-name: introCopyDissolveOutAlt !important;
}

.home-intro.copy-exiting .home-intro-logo-frame {
  animation: introCopyLogoFrameOut 900ms cubic-bezier(0.22, 0.74, 0.22, 1) 0ms forwards;
}

.home-intro.copy-exiting .home-intro-logo {
  animation: introCopyLogoMarkOut 900ms cubic-bezier(0.22, 0.74, 0.22, 1) 0ms forwards;
}

.home-intro[data-intro-motion="editorial"] .home-intro-copy {
  left: clamp(24px, 7vw, 104px);
  bottom: clamp(92px, 14vh, 150px);
}

.home-intro[data-intro-motion="editorial"] .home-intro-title {
  max-width: 980px;
}

.home-intro[data-intro-motion="editorial"] .intro-unit {
  clip-path: inset(100% 0 0 0);
  filter: blur(7px);
  transform: translate3d(0, 1.12em, 0) rotateX(28deg);
  transform-origin: 50% 100%;
}

.public-page.intro-active .home-intro[data-intro-motion="editorial"] .intro-unit {
  animation: introEditorialReveal 1240ms cubic-bezier(0.16, 1, 0.3, 1) calc(360ms + var(--intro-delay)) forwards;
}

.home-intro[data-intro-motion="kinetic"] .home-intro-copy {
  left: 50%;
  bottom: clamp(76px, 10vh, 112px);
  width: min(1040px, calc(100% - 48px));
  text-align: center;
  transform: translateX(-50%);
}

.home-intro[data-intro-motion="kinetic"] .home-intro-logo {
  margin-right: auto;
  margin-left: auto;
}

.home-intro[data-intro-motion="kinetic"] .home-intro-title {
  max-width: none;
  font-size: clamp(2.9rem, 5.8vw, 5.8rem);
}

.home-intro[data-intro-motion="kinetic"] .home-intro-lead {
  margin-right: auto;
  margin-left: auto;
}

.home-intro[data-intro-motion="kinetic"] .intro-unit {
  filter: blur(8px);
  transform: translate3d(0, 0.88em, 0) rotate(5deg) scale(0.96);
}

.public-page.intro-active .home-intro[data-intro-motion="kinetic"] .intro-unit {
  animation: introKineticReveal 980ms cubic-bezier(0.16, 1, 0.3, 1) calc(300ms + var(--intro-delay)) forwards;
}

.home-intro[data-intro-motion="signal"] .home-intro-copy {
  top: clamp(100px, 13vh, 132px);
  right: clamp(20px, 5vw, 78px);
  bottom: auto;
  left: auto;
  width: min(760px, calc(100% - 48px));
  padding-left: clamp(18px, 2.6vw, 34px);
}

.home-intro[data-intro-motion="signal"] .home-intro-copy::before,
.home-intro[data-intro-motion="signal"] .home-intro-copy::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.home-intro[data-intro-motion="signal"] .home-intro-copy::before {
  top: 4px;
  bottom: 6px;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  opacity: 0;
  transform: scaleY(0.2);
  transform-origin: 50% 0;
}

.home-intro[data-intro-motion="signal"] .home-intro-copy::after {
  top: 52%;
  left: 0;
  width: min(520px, 80%);
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), transparent);
  opacity: 0;
  transform: translate3d(-22px, 0, 0) scaleX(0.26);
  transform-origin: 0 50%;
}

.home-intro[data-intro-motion="signal"] .home-intro-logo {
  margin-bottom: clamp(18px, 3vh, 30px);
}

.home-intro[data-intro-motion="signal"] .home-intro-title {
  max-width: 760px;
  font-size: clamp(2.7rem, 5.2vw, 5.3rem);
}

.home-intro[data-intro-motion="signal"] .intro-unit {
  clip-path: inset(0 100% 0 0);
  filter: blur(4px);
  transform: translate3d(-0.5em, 0, 0);
}

.public-page.intro-active .home-intro[data-intro-motion="signal"] .intro-unit {
  animation: introSignalReveal 1020ms cubic-bezier(0.16, 1, 0.3, 1) calc(330ms + var(--intro-delay)) forwards;
}

.public-page.intro-active .home-intro[data-intro-motion="signal"] .home-intro-copy::before {
  animation: introSignalRuleY 1260ms cubic-bezier(0.16, 1, 0.3, 1) 220ms forwards;
}

.public-page.intro-active .home-intro[data-intro-motion="signal"] .home-intro-copy::after {
  animation: introSignalRuleX 1320ms cubic-bezier(0.16, 1, 0.3, 1) 520ms forwards;
}

@keyframes introLogoReveal {
  to {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes introLogoMarkReveal {
  52% {
    opacity: 1;
    filter:
      blur(0)
      drop-shadow(0 2px 1px rgba(0, 10, 18, 0.28))
      drop-shadow(0 16px 28px rgba(0, 10, 18, 0.3));
  }

  to {
    opacity: 0.98;
    filter:
      blur(0)
      drop-shadow(0 2px 1px rgba(0, 10, 18, 0.28))
      drop-shadow(0 16px 28px rgba(0, 10, 18, 0.3));
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes introCopyLogoFrameOut {
  0% {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    opacity: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translate3d(0, -10px, 0) scale(0.992);
  }
}

@keyframes introCopyLogoMarkOut {
  0% {
    opacity: 0.98;
    filter:
      blur(0)
      drop-shadow(0 2px 1px rgba(0, 10, 18, 0.28))
      drop-shadow(0 16px 28px rgba(0, 10, 18, 0.3));
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    opacity: 0;
    filter:
      blur(1.6px)
      drop-shadow(0 2px 1px rgba(0, 10, 18, 0.18))
      drop-shadow(0 18px 28px rgba(0, 10, 18, 0.2));
    transform: translate3d(0, -8px, 0) scale(0.992);
  }
}

@keyframes introEditorialReveal {
  58% {
    opacity: 1;
    filter: blur(0);
  }

  to {
    opacity: 1;
    clip-path: inset(0);
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotateX(0deg);
  }
}

@keyframes introCopyDissolveOut {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  28% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(-0.04em, 0.06em, 0) rotate(-1.5deg) scale(1.04);
  }
  100% {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(-0.78em, -1.35em, 0) rotate(-10deg) scale(0.8);
  }
}

/* Alternate exit (used on every other unit) so the copy scatters independently
   left/right instead of dissolving as one flat block. Slight anticipation dip +
   grow, then each glyph flies off and blurs out on its own --exit-delay clock. */
@keyframes introCopyDissolveOutAlt {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  28% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0.04em, 0.06em, 0) rotate(1.5deg) scale(1.04);
  }
  100% {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0.82em, -1.55em, 0) rotate(10deg) scale(0.8);
  }
}

@keyframes introKineticReveal {
  70% {
    opacity: 1;
    filter: blur(0);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes introSignalReveal {
  to {
    opacity: 1;
    clip-path: inset(0);
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes introSignalRuleY {
  to {
    opacity: 0.85;
    transform: scaleY(1);
  }
}

@keyframes introSignalRuleX {
  to {
    opacity: 0.78;
    transform: translate3d(0, 0, 0) scaleX(1);
  }
}

@keyframes introBlueRibExpand {
  0% {
    opacity: 0;
    filter: blur(16px);
    transform: translate3d(-50%, -50%, 0) rotate(var(--angle)) scaleX(0.03) scaleY(0.68);
  }

  22% {
    opacity: 0.78;
    filter: blur(2px);
    transform: translate3d(-50%, -50%, 0) rotate(var(--angle)) scaleX(1.08) scaleY(1);
  }

  58% {
    opacity: 0.86;
    filter: blur(0);
    transform: translate3d(calc(-50% + var(--travel-x)), calc(-50% + var(--travel-y)), 0) rotate(var(--angle)) scaleX(1.22) scaleY(1.02);
  }

  100% {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(-50%, -50%, 0) rotate(var(--angle)) scaleX(0.04) scaleY(0.74);
  }
}

/* Phase 2 veil: thin centre line → floods full screen (swap happens here) →
   contracts back down to the ~19vw top-page band. */
@keyframes introWipeVeil {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.04);
  }
  14% {
    opacity: 1;
  }
  36% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.18);
  }
  54% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.18);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scaleX(0.19);
  }
}

/* Phase 2 blades: fan out from centre (independent --travel-x / --delay), then
   converge and fade as the veil settles into the band. */
@keyframes introWipeBlade {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle)) scaleX(0.04);
  }
  16% {
    opacity: 0.9;
  }
  38% {
    opacity: 0.85;
    transform: translate(calc(-50% + var(--travel-x)), -50%) rotate(var(--angle)) scaleX(1);
  }
  54% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle)) scaleX(0.06);
  }
}

.home-intro-actions {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 4;
  display: flex;
  gap: 10px;
}

.home-intro-button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #fff;
  cursor: pointer;
  background: rgba(4, 19, 30, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  box-shadow: 0 14px 36px rgba(2, 12, 18, 0.2);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: opacity 160ms ease, transform 180ms ease, background 160ms ease, border-color 160ms ease;
}

.home-intro-button:hover,
.home-intro-button:focus-visible {
  background: rgba(4, 19, 30, 0.52);
  border-color: rgba(255, 255, 255, 0.72);
  transform: translate3d(0, -2px, 0);
}

.home-intro-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 3px;
}

.home-intro-button:active {
  transform: translate3d(0, 0, 0);
}

.home-intro-button svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.home-intro-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 4;
  display: grid;
  place-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.86);
  transform: translateX(-50%);
}

.home-intro-cue svg {
  width: 19px;
  height: 19px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.24));
}

.home-intro {
  transition:
    opacity 1100ms cubic-bezier(0.7, 0, 0.84, 0),
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(1);
  will-change: opacity, transform;
}

.home-intro.is-exiting {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

/* === Mask line-lift exit ===
   Each typographic line is wrapped in .home-intro-mask. On exit, the mask
   becomes overflow:clip and the inner element translates upward, so the line
   appears to lift off the page into a horizontal slit. Stagger from bottom
   line (lead) to top (logo) gives a "reverse-read dismiss" rhythm. */
.home-intro-mask {
  display: block;
}

.home-intro-mask > * {
  transition: transform 760ms cubic-bezier(0.7, 0, 0.84, 0);
  will-change: transform;
}

.home-intro.is-exiting .home-intro-mask {
  overflow: clip;
}

/* !important needed because the logo-frame has a running CSS animation
   (introLogoReveal forwards) whose filled state would otherwise win the
   cascade. The text lines (kicker/title/lead) have no own-element animation
   so they don't need it, but the rule applies uniformly. */
.home-intro.is-exiting .home-intro-mask > * {
  transform: translateY(-118%) !important;
}

/* Stagger: lead (4th mask) lifts first, logo (1st mask) last */
.home-intro.is-exiting .home-intro-mask:nth-child(1) > * { transition-delay: 240ms; }
.home-intro.is-exiting .home-intro-mask:nth-child(2) > * { transition-delay: 160ms; }
.home-intro.is-exiting .home-intro-mask:nth-child(3) > * { transition-delay: 80ms; }
.home-intro.is-exiting .home-intro-mask:nth-child(4) > * { transition-delay: 0ms; }

.home-intro.is-exiting .home-intro-video {
  /* Parent .home-intro handles scale; only ramp brightness/saturation here
     for a subtle "lights coming up" feel on top of the panel push-through. */
  filter: saturate(1.04) contrast(1.04) brightness(1.1);
  transition: filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.home-intro.is-exiting::after {
  opacity: 0.45;
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1) 80ms;
}

.home-intro.effect-active.is-exiting::after {
  opacity: 0.18;
}

.public-page.home-page .site-header,
.public-page.home-page #app,
.public-page.home-page .footer {
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-page.home-page.intro-transitioning .site-header {
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) 60ms,
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1) 40ms,
    background 520ms ease 60ms,
    color 520ms ease 60ms,
    border-color 520ms ease 60ms,
    backdrop-filter 520ms ease 60ms;
}

.public-page.home-page .brand,
.public-page.home-page .site-nav,
.public-page.home-page .header-tools,
.public-page.home-page .nav-toggle {
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 860ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-page.home-page.intro-active .brand,
.public-page.home-page.intro-active .site-nav,
.public-page.home-page.intro-active .header-tools,
.public-page.home-page.intro-active .nav-toggle,
.public-page.home-page.intro-transitioning .brand,
.public-page.home-page.intro-transitioning .site-nav,
.public-page.home-page.intro-transitioning .header-tools,
.public-page.home-page.intro-transitioning .nav-toggle {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

.public-page.home-page.intro-transitioning .brand,
.public-page.home-page.intro-transitioning .site-nav,
.public-page.home-page.intro-transitioning .header-tools,
.public-page.home-page.intro-transitioning .nav-toggle,
.public-page.home-page.intro-done .brand,
.public-page.home-page.intro-done .site-nav,
.public-page.home-page.intro-done .header-tools,
.public-page.home-page.intro-done .nav-toggle {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.public-page.home-page.intro-transitioning .hero-section {
  /* No stage-in slide/scale here: the hero photos CROSSFADE in (via #app opacity)
     as the intro video fades out, so the ship footage and the top image swap by a
     clean fade rather than a slide. */
  transform-origin: 50% 50%;
  animation: none;
}

.public-page.intro-active,
.public-page.intro-transitioning {
  height: 100svh;
  overflow: hidden;
  scrollbar-width: none;
}

.public-page.home-page.intro-active:not(.intro-transitioning) .site-header {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -100vh, 0);
}

/* COMBINATION FIX (band CSS + image fade together): #app (the photo hero — real band + text +
   photos) is REVEALED by the intro OVERLAY fading OUT, NOT by animating #app's own opacity.
   #app stays at constant full opacity, hidden behind the opaque overlay, and surfaces as the
   overlay fades. This is critical: the band animates `clip-path`, and nesting a clip-path
   (paint) animation inside an opacity-animating GROUP (the old #app cross-fade) is exactly the
   combination that bugged — band-test (no #app fade) and swap-test (no band) each avoid it; only
   the combo hit it. With #app constant, the band's clip-path animation is no longer in an
   opacity group, so the video→photo dissolve (overlay fade) and the band motion compose cleanly. */
.public-page.home-page.intro-active:not(.intro-revealing) #app {
  pointer-events: none;
}
.public-page.home-page.intro-active:not(.intro-revealing) .footer {
  opacity: 0;
  pointer-events: none;
}
.public-page.home-page.intro-revealing #app {
  pointer-events: auto;
}
.public-page.home-page.intro-revealing .footer {
  transition: opacity 900ms cubic-bezier(0.35, 0, 0.15, 1);
}

/* COMBINATION FIX (cause D — two-band overlap): while the intro runs, the CLONE band-stage is
   the SINGLE visible band (it sits over the dissolving background, out of any opacity group). So
   HIDE the #app (real) band the whole time, so the clone + real never overlap (overlapping would
   double the translucent veils' density and pop when the clone is removed). At finalize
   intro-active is dropped and the overlay is hidden the same frame, so the #app band appears
   exactly as the clone disappears — identical settled shape → seamless instant hand-off (no
   opacity cross-fade of the band, so no clip-path-in-opacity nesting). */
.public-page.home-page.intro-active #app .hero-composite-center .hero-sankyu-band {
  opacity: 0;
}

/* Hero copy FADES UP gently at the reveal instead of popping in. It's held hidden the whole
   intro (the overlay covers it anyway), then revealHomeIntro adds `intro-copy-in` at the
   hand-off and the copy eases 0→1 over INTRO_COPY_FADE_MS. Both rules carry `.hero-slide.active`
   (specificity 0,5,0) so they beat the composite's own `.hero-composite.active .hero-slide-copy`
   opacity:1 (0,4,0) — and only ever touch the on-screen slide. Fading the COPY WRAPPER fades the
   whole block (h1 + p, already at their settled opacity) as one. `intro-copy-in` is dropped at
   finalize (after the fade) so the slider's per-slide copy fades are untouched afterwards. */
.public-page.home-page.intro-active .hero-slide.active .hero-slide-copy {
  opacity: 0;
}
.public-page.home-page.intro-copy-in .hero-slide.active .hero-slide-copy {
  opacity: 1;
  /* slow, gentle fade-in — the START is moved earlier (via INTRO_FADE_MS in site.js), the fade
     itself stays unhurried. Keep this duration in sync with INTRO_COPY_FADE_MS (used to time the
     settle cleanup). */
  transition: opacity 1000ms cubic-bezier(0.33, 0, 0.3, 1);
}

/* The REAL hero band runs the SAME emerge animation as the band clone, started at the
   identical moment (body.intro-band-anim is added together with .effect-active). So when
   #app cross-fades in at the hand-over, the real band is the exact same shape as the clone
   at every frame — the cross-fade reads as one continuous band: no doubling (二重), no
   density pulse (明るく/暗く). `both` fill holds each line settled after it finishes, so the
   band simply keeps moving and stops on the top-page arrangement. */
.public-page.home-page.intro-band-anim #app .hero-composite-center .hero-sankyu-band__core {
  animation: intro-emerge-core 2050ms cubic-bezier(0.22, 0.32, 0.2, 1) 0ms both;
}
.public-page.home-page.intro-band-anim #app .hero-composite-center .hero-sankyu-band__veil-left {
  animation: intro-emerge-veil-left 2450ms cubic-bezier(0.26, 0.5, 0.24, 1) 120ms both;
}
.public-page.home-page.intro-band-anim #app .hero-composite-center .hero-sankyu-band__veil-right {
  animation: intro-emerge-veil-right 1900ms cubic-bezier(0.18, 0.2, 0.22, 1) 220ms both;
}
.public-page.home-page.intro-band-anim #app .hero-composite-center .hero-sankyu-band__edge-left {
  animation: intro-emerge-edge-left 2300ms cubic-bezier(0.3, 0.42, 0.2, 1) 60ms both;
}
.public-page.home-page.intro-band-anim #app .hero-composite-center .hero-sankyu-band__edge-right {
  animation: intro-emerge-edge-right 1800ms cubic-bezier(0.2, 0.25, 0.25, 1) 300ms both;
}
.public-page.home-page.intro-band-anim #app .hero-composite-center .hero-sankyu-band__glint {
  animation: intro-emerge-glint 2600ms cubic-bezier(0.28, 0.55, 0.24, 1) 160ms both;
}

/* COLD-START warm-up note: the first cold paint of the band + photos is primed in JS
   (warmHomeIntro in site.js) by running the WHOLE intro cycle once at full visibility behind a
   short opaque cover — so the GPU actually uploads the textures (an opacity ~0 / occluded warm-up
   was skipped by the GPU). No dedicated CSS is needed for that. */

@media (max-width: 860px) {
  .home-intro-copy,
  .home-intro[data-intro-motion="editorial"] .home-intro-copy,
  .home-intro[data-intro-motion="signal"] .home-intro-copy {
    top: auto;
    right: auto;
    bottom: 92px;
    left: 22px;
    width: calc(100% - 44px);
    padding-left: 0;
    text-align: left;
    transform: none;
  }

  .home-intro[data-intro-motion="kinetic"] .home-intro-copy {
    left: 50%;
    bottom: 92px;
    text-align: center;
    transform: translateX(-50%);
  }

  .home-intro-logo-frame {
    margin-bottom: 18px;
    padding: 9px 13px 8px;
  }

  .home-intro-logo {
    width: 118px;
  }

  .home-intro-title,
  .home-intro[data-intro-motion="kinetic"] .home-intro-title,
  .home-intro[data-intro-motion="signal"] .home-intro-title {
    /* The title is split into per-character inline-block units, so a too-large
       font makes "BONDI HOLDINGS" break mid-word (e.g. "HOLDI" / "NGS"). Size it
       so the brand name fits on one line across phone widths (320–430px). */
    font-size: clamp(1.8rem, 8.5vw, 3.4rem);
    line-height: 0.98;
    white-space: normal;
    text-wrap: balance;
  }

  .home-intro-lead {
    font-size: 1.05rem;
  }

  .home-intro[data-intro-motion="signal"] .home-intro-copy::before,
  .home-intro[data-intro-motion="signal"] .home-intro-copy::after {
    display: none;
  }

  .home-intro-video {
    object-position: 58% center;
  }

  .home-intro-actions {
    right: 14px;
    bottom: 14px;
  }

  .home-intro-button {
    width: 44px;
    height: 44px;
  }

  .home-intro-cue {
    bottom: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-intro {
    display: none !important;
  }
}

.public-page .hero-slide[data-hero-slide="2"] .hero-slide-copy,
.preview-frame .hero-slide[data-hero-slide="2"] .hero-slide-copy {
  max-width: min(620px, 42vw);
}

.public-page .hero-slide[data-hero-slide="2"] .hero-slide-copy .eyebrow,
.preview-frame .hero-slide[data-hero-slide="2"] .hero-slide-copy .eyebrow {
  color: #d4824b;
}

.public-page .hero-slide[data-hero-slide="2"] .hero-slide-copy h1,
.public-page .hero-slide[data-hero-slide="2"] .hero-slide-copy p,
.preview-frame .hero-slide[data-hero-slide="2"] .hero-slide-copy h1,
.preview-frame .hero-slide[data-hero-slide="2"] .hero-slide-copy p {
  text-shadow: 0 2px 14px rgba(0, 16, 20, 0.34);
}

.public-page .footer,
.preview-frame .footer {
  color: #12202a;
  background:
    linear-gradient(180deg, #f8faf9 0%, #eef4f3 100%);
  border-top: 1px solid rgba(22, 42, 52, 0.12);
}

.public-page .footer-main,
.public-page .footer-blue,
.preview-frame .footer-main,
.preview-frame .footer-blue {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(320px, 1.5fr);
  align-items: center;
  gap: 32px;
  padding: 34px max(24px, calc((100% - 1180px) / 2));
  color: #12202a;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(237, 244, 242, 0.92)),
    radial-gradient(circle at 8% 0%, rgba(194, 122, 70, 0.16), transparent 36%);
}

.public-page .footer-brand,
.preview-frame .footer-brand {
  display: grid;
  gap: 8px;
}

.public-page .footer-brand strong,
.preview-frame .footer-brand strong,
.public-page .footer-blue strong,
.preview-frame .footer-blue strong {
  font-size: clamp(1.15rem, 1.8vw, 1.8rem);
  line-height: 1;
}

.public-page .footer-brand p,
.preview-frame .footer-brand p {
  margin: 0;
  color: #53616a;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.7;
}

.public-page .footer-links,
.preview-frame .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.public-page .footer-links a,
.preview-frame .footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  color: #172632;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(20, 42, 54, 0.14);
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 900;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.public-page .footer-links a:hover,
.public-page .footer-links a:focus-visible,
.preview-frame .footer-links a:hover,
.preview-frame .footer-links a:focus-visible {
  color: #0d5f87;
  background: #fff;
  border-color: rgba(13, 95, 135, 0.34);
  transform: translate3d(0, -2px, 0);
}

.public-page .footer-banners,
.preview-frame .footer-banners {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  padding: 0 max(18px, calc((100% - 1280px) / 2)) 18px;
  background: linear-gradient(180deg, rgba(238, 244, 243, 0.95), #e8efee);
}

.public-page .footer-banners a,
.preview-frame .footer-banners a {
  min-height: 132px;
  margin: 0;
  color: #fff;
  background: #142330;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.public-page .footer-banners img,
.preview-frame .footer-banners img {
  opacity: 0.72;
  filter: saturate(0.88) contrast(1.04);
  transform: scale(1.02);
}

.public-page .footer-banners a::before,
.preview-frame .footer-banners a::before {
  background:
    linear-gradient(115deg, rgba(7, 16, 24, 0.84), rgba(7, 16, 24, 0.42) 58%, rgba(194, 122, 70, 0.18)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0));
}

.public-page .footer-banners a > span,
.preview-frame .footer-banners a > span {
  padding: 0 18px;
  color: #fff;
  font-size: 0.93rem;
  letter-spacing: 0;
}

.public-page .footer-banners a:hover img,
.preview-frame .footer-banners a:hover img {
  opacity: 0.9;
  transform: scale(1.075);
}

.public-page .footer-legal,
.preview-frame .footer-legal {
  gap: 10px 26px;
  padding: 22px 24px;
  color: #dfe9e9;
  background:
    linear-gradient(90deg, #0b1720, #102b39 58%, #0b1720);
  font-size: 0.8rem;
}

.public-page .footer-legal a,
.preview-frame .footer-legal a {
  color: inherit;
  opacity: 0.9;
}

.public-page .footer-copy,
.preview-frame .footer-copy {
  flex-basis: 100%;
  color: #f4f7f6;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  opacity: 0.72;
}

.public-page .footer-legal a:hover,
.public-page .footer-legal a:focus-visible,
.preview-frame .footer-legal a:hover,
.preview-frame .footer-legal a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 860px) {
  .public-page .footer-main,
  .public-page .footer-blue,
  .preview-frame .footer-main,
  .preview-frame .footer-blue {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 22px;
  }

  .public-page .footer-links,
  .preview-frame .footer-links {
    justify-content: flex-start;
  }

  .public-page .footer-banners,
  .preview-frame .footer-banners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 12px 16px;
  }

  .public-page .footer-banners a,
  .preview-frame .footer-banners a {
    min-height: 104px;
  }

  .public-page .hero-slide[data-hero-slide="2"] .hero-slide-copy,
  .preview-frame .hero-slide[data-hero-slide="2"] .hero-slide-copy {
    max-width: none;
  }
}

.news-body {
  padding: 18px 0 18px 22px;
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--brand);
  font-size: 0.88rem;
  font-weight: 800;
}

.news-meta span {
  padding: 1px 8px;
  color: #fff;
  background: var(--brand);
  border-radius: 99px;
}

.contact-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 34px;
  margin-bottom: 72px;
}

.footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 36px max(24px, calc((100% - 1180px) / 2));
  color: #fff;
  background: var(--ink);
}

.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.load-error {
  padding: 120px 24px;
}

.admin-page {
  height: 100vh;
  overflow: hidden;
  background: #e9edf3;
}

.admin-page *,
.admin-page *::before,
.admin-page *::after {
  box-sizing: border-box;
}

.admin-shell-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 6px 18px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.admin-shell-header .eyebrow {
  margin: 0 0 1px;
  font-size: 0.62rem;
  line-height: 1;
}

.admin-shell-header h1 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.15;
}

.admin-actions {
  display: flex;
  gap: 7px;
}

.admin-shell-header .button {
  gap: 6px;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-shell-header .button svg {
  width: 16px;
  height: 16px;
}

.admin-shell-header .button:hover,
.admin-shell-header .button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(7, 20, 29, 0.12);
}

.admin-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  height: calc(100vh - 48px);
  min-height: 0;
  overflow: hidden;
}

.editor-panel {
  min-height: 0;
  padding: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-top: 18px;
  border-right: 1px solid var(--line);
  background: #f8fafc;
}

.status-line {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}

.status-line[data-tone="success"] {
  color: var(--success);
  border-color: rgba(20, 121, 93, 0.32);
}

.status-line[data-tone="warning"] {
  color: var(--warning);
  border-color: rgba(154, 101, 0, 0.32);
}

.status-line[data-tone="danger"] {
  color: var(--danger);
  border-color: rgba(180, 35, 24, 0.32);
}

.page-picker {
  position: relative;
  z-index: 3;
}

.page-picker-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.page-picker.collapsed {
  padding-bottom: 12px;
}

.page-picker.collapsed .page-picker-body {
  display: none;
}

.page-choice-list {
  display: grid;
  gap: 8px;
}

.page-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.page-choice span {
  font-size: 0.95rem;
  font-weight: 900;
}

.page-choice strong {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.page-choice em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 7px 9px;
  color: var(--brand);
  background: #fff;
  border: 1px solid rgba(10, 94, 138, 0.2);
  border-radius: 6px;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.page-choice:hover,
.page-choice:focus-visible {
  border-color: rgba(10, 94, 138, 0.34);
  box-shadow: 0 10px 24px rgba(8, 33, 49, 0.09);
  transform: translateY(-1px);
}

.page-choice.active {
  color: #fff;
  background: linear-gradient(135deg, #0b5e8a, #0f83b7);
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(10, 94, 138, 0.2);
}

.page-choice.active strong {
  color: rgba(255, 255, 255, 0.78);
}

.page-choice.active em {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
}

.page-editing-now {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.section-jump-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.section-jump-panel > strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
}

.section-jump-list {
  display: grid;
  gap: 8px;
}

.section-jump {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 48px;
  padding: 9px 10px;
  color: var(--ink);
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.section-jump:hover,
.section-jump:focus-visible {
  border-color: rgba(10, 94, 138, 0.34);
  box-shadow: 0 8px 18px rgba(8, 33, 49, 0.08);
}

.section-jump.active {
  color: #0b476a;
  background: #eef7fc;
  border-color: rgba(10, 94, 138, 0.42);
  box-shadow: inset 3px 0 0 var(--brand);
}

.section-jump span {
  font-size: 0.86rem;
  font-weight: 900;
}

.section-jump small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.image-filter-toggle.active {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

.editor-section {
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.editor-section[hidden] {
  display: none;
}

.empty-editor-state p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

.editor-section h2 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-title-row h2 {
  margin: 0;
}

.editor-section label,
.edit-card label {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.editor-section input,
.editor-section textarea,
.editor-section select {
  width: 100%;
  padding: 10px 11px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  outline: none;
}

.editor-section input:focus,
.editor-section textarea:focus,
.editor-section select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(10, 94, 138, 0.12);
}

.editor-note {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.7;
}

.editable-list {
  display: grid;
  gap: 12px;
}

.edit-card {
  max-width: 100%;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8fafc;
}

.edit-card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.edit-card-heading strong {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 900;
}

.edit-card-heading small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.edit-card.selected-edit-card {
  border-color: rgba(10, 94, 138, 0.5);
  box-shadow: 0 0 0 3px rgba(10, 94, 138, 0.12);
}

.nested-edit-block {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(94, 111, 129, 0.18);
  border-radius: var(--radius);
  background: #fff;
}

.nested-edit-block > strong {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 900;
}

.nested-edit-block label {
  margin-bottom: 0;
}

.related-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.related-toggle {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  min-height: 38px;
  margin: 0 !important;
  padding: 9px 10px;
  color: var(--ink) !important;
  border: 1px solid rgba(94, 111, 129, 0.18);
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
  transition:
    border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.related-toggle:hover {
  border-color: rgba(10, 94, 138, 0.35);
  background: #fff;
  transform: translateY(-1px);
}

.related-toggle input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0;
  accent-color: var(--brand);
}

.related-toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 900;
}

.service-group-panel {
  display: grid;
  gap: 8px;
  margin: 10px 0 14px;
  padding: 10px;
  background: #eef6fb;
  border: 1px solid rgba(10, 94, 138, 0.18);
  border-radius: var(--radius);
}

.service-group-panel > strong {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
}

.service-group-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.service-group-choice {
  min-height: 38px;
  padding: 8px 10px;
  color: #45515e;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.service-group-choice.active {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

.compact-card {
  padding-bottom: 10px;
}

.image-drop {
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  cursor: pointer;
  outline: 0;
}

.image-drop img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.78;
}

.image-drop span {
  position: absolute;
  inset: auto 10px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: var(--radius);
  background: rgba(16, 19, 24, 0.74);
  font-weight: 800;
}

.image-drop:hover img,
.image-drop:focus-visible img,
.image-drop.selected img {
  opacity: 1;
}

.image-drop.selected {
  box-shadow: 0 0 0 3px rgba(10, 94, 138, 0.22);
}

.compact-image-drop img {
  aspect-ratio: 4 / 3;
}

.sub-image-group {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.image-subgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.subgrid-title {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.fixed-field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.fixed-field-label strong {
  color: var(--ink);
  font-weight: 900;
}

.fixed-field-label small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.advanced-fields {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.advanced-fields summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
}

.image-only-mode .edit-card label,
.image-only-mode .editor-section > label,
.image-only-mode .edit-card .card-actions,
.image-only-mode .advanced-fields,
.image-only-mode .fixed-field-label {
  display: none;
}

.image-only-mode [data-add] {
  display: none;
}

.image-only-mode .edit-card {
  padding: 8px;
}

.two-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mini-button,
.mode-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 800;
}

.mini-button.danger {
  color: var(--danger);
}

.mini-button.primary-mini {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

.preview-panel {
  min-height: 0;
  padding: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.preview-modes {
  display: flex;
  gap: 8px;
}

.mode-button.active {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

.preview-frame {
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
  box-shadow: var(--shadow);
}

.preview-frame > [data-preview-root] {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.preview-frame .pickup-rail,
.preview-frame .news-tabs {
  overflow-x: clip;
}

.preview-frame.desktop {
  width: min(100%, 1220px);
  height: calc(100vh - 150px);
}

.preview-frame.mobile {
  width: 390px;
  height: calc(100vh - 150px);
}

.preview-page-label {
  position: sticky;
  top: 0;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 10px 0 0 12px;
  padding: 0 10px;
  color: #fff;
  background: rgba(7, 20, 29, 0.76);
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 900;
}

.preview-frame img.is-preview-selected {
  outline: 4px solid #ffb02e;
  outline-offset: -4px;
  box-shadow: 0 0 0 6px rgba(255, 176, 46, 0.24);
  scroll-margin: 96px;
}

.preview-selection-callout {
  position: sticky;
  top: 44px;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(520px, calc(100% - 24px));
  min-height: 88px;
  margin: 10px 12px 0;
  padding: 10px;
  color: #07141d;
  background: rgba(255, 255, 255, 0.94);
  border: 2px solid #ffb02e;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(7, 20, 29, 0.18);
}

.preview-selection-callout img {
  width: 104px;
  height: 68px;
  object-fit: cover;
  border-radius: 6px;
}

.preview-selection-callout strong,
.preview-selection-callout span {
  display: block;
}

.preview-selection-callout strong {
  font-weight: 900;
}

.preview-selection-callout span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.preview-frame .preview-selected-shell {
  position: relative;
  box-shadow: 0 0 0 4px rgba(255, 176, 46, 0.34);
}

.preview-frame .site-header,
.preview-frame .footer {
  position: static;
}

.preview-frame .site-header,
.preview-frame .preview-site-header {
  color: var(--ink);
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.preview-frame .hero-section {
  min-height: 620px;
}

.preview-frame.mobile .hero-section {
  height: auto;
  min-height: auto;
  background: #fff;
}

.preview-frame.mobile .hero-media {
  position: relative;
  inset: auto;
}

.preview-frame.mobile .hero-slide {
  display: grid;
  height: auto;
  overflow: visible;
  background: #fff;
}

.preview-frame.mobile .hero-slide::before {
  display: none;
}

.preview-frame.mobile .hero-slide-photo-main,
.preview-frame.mobile .hero-slide-photo-main img {
  position: relative;
  inset: auto;
}

.preview-frame.mobile .hero-slide-photo-main,
.preview-frame.mobile .hero-slide-photo-sub {
  position: relative;
  z-index: 1;
  height: 166px;
  overflow: hidden;
}

.preview-frame.mobile .hero-slide-photo-sub {
  display: block;
}

.preview-frame.mobile .hero-slide-photo-main img,
.preview-frame.mobile .hero-slide-photo-sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-frame.mobile .hero-slide-photo-main img {
  object-position: center center;
}

.preview-frame.mobile .hero-slide-photo-sub {
  margin-top: -24px;
}

.preview-frame.mobile .hero-slide-photo-sub img {
  object-position: center 58%;
}

.preview-frame.mobile .hero-slide-copy {
  position: relative;
  z-index: 2;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  margin: -28px 0 0;
  padding: 56px 22px 54px;
  text-align: center;
  background: linear-gradient(180deg, #078fd0 0%, #08a9dc 100%);
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 9%, 100% 91%, 0 100%);
}

.preview-frame.mobile .hero-slide-copy h1 {
  margin: 0 auto;
  font-size: 2rem;
}

.preview-frame.mobile .hero-slide-copy .eyebrow,
.preview-frame.mobile .hero-buttons {
  display: none;
}

.preview-frame.mobile .hero-dots {
  position: relative;
  left: auto;
  bottom: auto;
  justify-content: center;
  padding: 12px 0 16px;
  background: #fff;
  transform: none;
}

.preview-frame.mobile .hero-dots button::before {
  width: 8px;
  height: 8px;
  background: #b8b8b8;
  border-radius: 999px;
}

.preview-frame.mobile .hero-dots .active::before {
  width: 8px;
  background: #078fd0;
}

.preview-frame.mobile .business-showcase,
.preview-frame.mobile .pickup-rail,
.preview-frame.mobile .route-section,
.preview-frame.mobile .company-layout,
.preview-frame.mobile .news-item {
  grid-template-columns: 1fr;
}

.preview-frame.mobile .profile-table div {
  grid-template-columns: 1fr;
}

.preview-frame.mobile .service-section {
  width: 100%;
  padding: 52px 18px 64px;
  background: #f1f1f1;
}

.preview-frame.mobile .service-section .section-heading {
  justify-items: center;
  margin-bottom: 30px;
  text-align: center;
}

.preview-frame.mobile .service-section .section-heading span {
  color: #078fd0;
  font-size: 1.5rem;
}

.preview-frame.mobile .service-section .section-heading h2,
.preview-frame.mobile .business-feature {
  display: none;
}

.preview-frame.mobile .service-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 330px;
  margin: 0 auto 26px;
  border-bottom: 1px solid #d7d7d7;
}

.preview-frame.mobile .service-tabs > span,
.preview-frame.mobile .service-tabs a,
.preview-frame.mobile .service-tabs button {
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 0 8px;
  color: #777;
  background: #e5e5e5;
  border: 1px solid #d7d7d7;
  border-bottom: 0;
  font-weight: 900;
  font-family: inherit;
  line-height: 1.25;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  appearance: none;
}

.preview-frame.mobile .service-tabs .active {
  position: relative;
  color: var(--ink);
  background: #fff;
  border-color: transparent;
}

.preview-frame.mobile .service-tabs .active::before {
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 4px;
  content: "";
  background: #078fd0;
}

.preview-frame.mobile .business-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.preview-frame.mobile .business-row a {
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 8px;
  min-height: 68px;
  padding: 0 0 0 12px;
  background: #fff;
  border-radius: 0;
}

.preview-frame.mobile .business-number,
.preview-frame.mobile .business-thumb {
  grid-column: 2;
  grid-row: 1;
}

.preview-frame.mobile .business-number {
  display: none;
}

.preview-frame.mobile .business-thumb img {
  height: 100%;
  aspect-ratio: 1 / 1;
}

.preview-frame.mobile .business-text {
  min-width: 0;
}

.preview-frame.mobile .business-text em,
.preview-frame.mobile .business-row svg {
  display: none;
}

@media (max-width: 860px) {
  section[id] {
    scroll-margin-top: 92px;
  }

  .site-header {
    position: fixed;
    min-height: 68px;
    padding: 0 18px;
    color: #fff;
    background: linear-gradient(180deg, rgba(4, 15, 22, 0.58), rgba(4, 15, 22, 0));
    border-bottom: 0;
    backdrop-filter: none;
  }

  .site-header.scrolled {
    color: var(--brand);
    background: #fff;
    border-bottom: 1px solid var(--line);
  }

  .brand {
    gap: 8px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    color: #fff;
    background: var(--brand);
    border-radius: var(--radius);
    font-size: 1rem;
  }

  .brand-name {
    color: inherit;
    font-size: 1.08rem;
  }

  .icon-button {
    display: grid;
    place-items: center;
    color: inherit;
    background: rgba(7, 20, 29, 0.28);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .site-header.scrolled .brand-mark {
    color: var(--brand);
    background: transparent;
    border-radius: 0;
    font-size: 1.45rem;
  }

  .site-header.scrolled .icon-button {
    color: var(--brand);
    background: transparent;
    border-color: transparent;
  }

  .site-nav {
    position: absolute;
    top: 68px;
    left: 18px;
    right: 18px;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 10px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity 180ms ease, transform 220ms ease, visibility 0s linear 220ms;
  }

  .site-nav.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s;
  }

  .site-nav a {
    min-height: 44px;
    padding: 10px 12px;
  }

  .hero-section {
    height: 100vh;
    height: 100svh;
    min-height: 640px;
    color: #fff;
    background: var(--deep);
  }

  .hero-media {
    position: absolute;
    inset: 0;
    align-items: stretch;
  }

  .hero-slide {
    display: block;
    height: 100%;
    overflow: hidden;
    background: var(--deep);
  }

  .hero-slide::before {
    display: block;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(4, 15, 22, 0.52) 0%, rgba(4, 15, 22, 0.16) 34%, rgba(4, 15, 22, 0.88) 100%),
      linear-gradient(90deg, rgba(4, 15, 22, 0.64), rgba(4, 15, 22, 0.06));
  }

  .hero-slide::after,
  .hero-collage {
    display: none;
  }

  .hero-slide-photo-main,
  .hero-slide-photo-main img {
    position: absolute;
    inset: 0;
  }

  .hero-slide-photo-main {
    z-index: 1;
    height: 100%;
    overflow: hidden;
  }

  .hero-slide-photo-sub {
    display: none;
  }

  .hero-slide-photo-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
  }

  .hero-slide-photo-main img {
    object-position: center center;
  }

  .public-page .hero-composite-center .hero-slide-photo-main img,
  .public-page .hero-composite-right .hero-slide-photo-main img,
  .preview-frame .hero-composite-center .hero-slide-photo-main img,
  .preview-frame .hero-composite-right .hero-slide-photo-main img {
    object-position: left center;
  }

  .hero-slide.active .hero-slide-photo-main img {
    transform: none;
  }

  .hero-slide-copy {
    position: absolute;
    z-index: 2;
    left: 22px;
    right: 22px;
    bottom: 84px;
    width: auto;
    margin: 0;
    padding: 0;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    clip-path: none;
  }

  .hero-slide-copy .eyebrow {
    display: block;
    color: var(--accent);
    font-size: 0.78rem;
    line-height: 1.6;
  }

  .hero-slide-copy h1 {
    max-width: 340px;
    margin: 10px 0 0;
    font-size: clamp(1.82rem, 8vw, 2.15rem);
    line-height: 1.18;
    word-break: keep-all;
  }

  .hero-slide-copy p {
    max-width: 330px;
    margin: 18px 0 0;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.75;
    word-break: keep-all;
  }

  .hero-buttons {
    display: none;
  }

  .hero-dots {
    position: absolute;
    left: 22px;
    bottom: 26px;
    justify-content: center;
    padding: 0;
    background: transparent;
    transform: none;
  }

  .hero-dots button::before {
    width: 8px;
    height: 8px;
    background: #b8b8b8;
    border-radius: 999px;
  }

  .hero-dots .active::before {
    width: 8px;
    background: #078fd0;
  }

  .button {
    width: 100%;
  }

  .company-section,
  .news-section,
  .contact-band {
    width: calc(100% - 36px);
    padding: 64px 0;
  }

  .service-section {
    width: 100%;
    padding: 52px 18px 64px;
    background: #f1f1f1;
  }

  .service-section .section-heading {
    justify-items: center;
    margin-bottom: 30px;
    text-align: center;
  }

  .service-section .section-heading span {
    color: #078fd0;
    font-size: 1.5rem;
  }

  .service-section .section-heading h2 {
    display: none;
  }

  .service-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 330px;
    margin: 0 auto 26px;
    border-bottom: 1px solid #d7d7d7;
  }

  .service-tabs > span,
  .service-tabs a,
  .service-tabs button {
    display: grid;
    place-items: center;
    min-height: 58px;
    padding: 0 8px;
    color: #777;
    background: #e5e5e5;
    border: 1px solid #d7d7d7;
    border-bottom: 0;
    font-weight: 900;
    font-family: inherit;
    line-height: 1.25;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    appearance: none;
  }

  .service-tabs .active {
    position: relative;
    color: var(--ink);
    background: #fff;
    border-color: transparent;
  }

  .service-tabs .active::before {
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    height: 4px;
    content: "";
    background: #078fd0;
  }

  .business-showcase,
  .pickup-rail,
  .route-section,
  .company-layout,
  .news-item {
    grid-template-columns: 1fr;
  }

  .business-feature {
    display: none;
  }

  .business-row {
    opacity: 1;
    transform: none;
  }

  .business-row a {
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 8px;
    min-height: 68px;
    padding: 0 0 0 12px;
    background: #fff;
    border-radius: 0;
  }

  .business-row a:hover,
  .business-row a:focus-visible {
    transform: none;
  }

  .business-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .business-number,
  .business-thumb {
    grid-column: 2;
    grid-row: 1;
  }

  .business-number {
    display: none;
  }

  .business-thumb img {
    height: 100%;
    aspect-ratio: 1 / 1;
  }

  .business-text {
    min-width: 0;
  }

  .business-text strong {
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .business-text em {
    display: none;
  }

  .business-row svg {
    display: none;
  }

  .pickup-card:nth-child(2),
  .pickup-card:nth-child(3) {
    margin-top: 0;
  }

  .profile-table div {
    grid-template-columns: 1fr;
  }

  .section-heading,
  .contact-band,
  .footer {
    display: grid;
  }

  .section-heading h2,
  .contact-band h2 {
    max-width: 316px;
    font-size: 1.95rem;
    word-break: break-all;
  }

  .route-section a {
    min-height: 128px;
  }

  .news-item img {
    min-height: auto;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 980px) {
  .admin-shell-header {
    position: static;
    display: grid;
    gap: 6px;
    min-height: auto;
    padding: 8px 12px;
  }

  .admin-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .admin-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .editor-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .page-picker {
    position: static;
  }

  .preview-frame.desktop,
  .preview-frame.mobile {
    width: 100%;
    height: auto;
  }

  .preview-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 8px 0;
    background: #e9edf3;
  }
}

/* Sankyu-reference alignment layer: keep the information architecture close while using original Bondi content/assets. */
.public-page {
  background: #fff;
}

.public-page .site-header,
.preview-frame .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: block;
  min-height: 114px;
  padding: 0;
  color: #222;
  background: #fff;
  border-bottom: 1px solid #e1e5ea;
  box-shadow: none;
  backdrop-filter: none;
}

.public-page .header-primary,
.preview-frame .header-primary {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  min-height: 68px;
  padding: 0 28px;
}

.public-page .brand,
.preview-frame .brand {
  display: inline-flex;
  width: max-content;
  min-height: 68px;
  color: #2b7ec5;
  font-weight: 900;
}

.public-page .brand-logo,
.preview-frame .brand-logo {
  height: 58px;
  max-width: 182px;
}

.public-page .brand-name,
.preview-frame .brand-name {
  color: #2b7ec5;
  font-size: 2.08rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.public-page .header-tools,
.preview-frame .header-tools {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #3d4148;
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
}

.public-page .search-box,
.preview-frame .search-box {
  display: grid;
  grid-template-columns: 1fr 42px;
  align-items: center;
  width: 286px;
  height: 36px;
  overflow: hidden;
  border: 1px solid #b9bec5;
  border-radius: 999px;
  background: #f8f9fb;
}

.public-page .search-box input,
.preview-frame .search-box input {
  min-width: 0;
  height: 100%;
  padding: 0 0 0 18px;
  border: 0;
  outline: 0;
  background: transparent;
}

.public-page .search-box button,
.preview-frame .search-box button {
  display: grid;
  place-items: center;
  height: 100%;
  color: #111;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.public-page .header-cta,
.preview-frame .header-cta {
  display: inline-grid;
  place-items: center;
  min-width: 116px;
  min-height: 40px;
  padding: 0 16px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 900;
}

.public-page .header-cta.contact,
.preview-frame .header-cta.contact {
  background: #d95732;
}

.public-page .header-cta.recruit,
.preview-frame .header-cta.recruit {
  background: #050505;
}

.public-page .site-nav,
.preview-frame .site-nav {
  display: flex;
  justify-content: flex-end;
  gap: 44px;
  min-height: 46px;
  padding: 0 42px 0 360px;
  color: #33383f;
  background: #fff;
  font-size: 0.95rem;
  font-weight: 900;
}

.public-page .site-nav a,
.preview-frame .site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  transition: color 180ms ease;
}

.public-page .site-nav a:hover,
.public-page .site-nav a:focus-visible,
.preview-frame .site-nav a:hover,
.preview-frame .site-nav a:focus-visible {
  color: #237dc5;
}

.public-page .nav-toggle,
.preview-frame .nav-toggle {
  display: none;
}

.public-page .hero-section,
.preview-frame .hero-section {
  /* Full-bleed hero — same visual register as the intro video panel.
     Falls back to vh for browsers without svh, then svh is honored where
     supported to avoid the iOS Safari URL-bar jump. */
  height: 100vh;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  overflow: clip;
  contain: none;
  color: #fff;
  background: #fff;
}

.public-page .hero-media,
.preview-frame .hero-media {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: auto;
  transition: transform 520ms cubic-bezier(0.55, 0, 0.1, 1);
}

.public-page .hero-slide,
.preview-frame .hero-slide {
  height: 100%;
  background: #0a1820;
}

.public-page .hero-slide::before,
.preview-frame .hero-slide::before {
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 17, 24, 0.2), rgba(0, 17, 24, 0.02));
}

/* ── Hero-1 (top page) ───────────────────────────────────────────────────────
   Two photos meet on a diagonal SEAM; the blue glass band is drawn entirely in
   CSS over that seam (fully controllable — no baked-in band).
   tile-01 (port) / tile-06 (truck) are MOCK placeholders — swap the real
   left/right art in data/content.json (image = left, secondaryImage = right).

   Geometry knobs (keep photo seam and band centre-line aligned):
   · SEAM diagonal : top 55% → bottom 45%
   · BAND (16% wide, centred on the seam): top 47–63%, bottom 37–53%
   ─────────────────────────────────────────────────────────────────────────── */
.public-page .hero-layout-1 .hero-slide-photo-main,
.preview-frame .hero-layout-1 .hero-slide-photo-main {
  inset: 0;
  clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%);
  filter: saturate(1.06) contrast(1.02) brightness(1.02);
}

.public-page .hero-layout-1 .hero-slide-photo-sub,
.preview-frame .hero-layout-1 .hero-slide-photo-sub {
  inset: 0;
  z-index: 0;
  display: block;
  clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%);
  filter: saturate(1.05) contrast(1.02);
}

.public-page .hero-layout-1 .hero-slide-photo-sub img,
.preview-frame .hero-layout-1 .hero-slide-photo-sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-page .hero-layout-1::before,
.preview-frame .hero-layout-1::before {
  background:
    linear-gradient(90deg, rgba(0, 17, 24, 0.12), rgba(0, 17, 24, 0.02) 50%, rgba(0, 17, 24, 0.12)),
    linear-gradient(180deg, rgba(0, 17, 24, 0.05), transparent 38%, rgba(0, 17, 24, 0.18));
}

.public-page .hero-layout-1::after,
.preview-frame .hero-layout-1::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  content: "";
  background:
    linear-gradient(100deg, rgba(40, 132, 196, 0.78), rgba(26, 122, 192, 0.9) 50%, rgba(46, 152, 214, 0.78)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 42%, rgba(0, 66, 120, 0.18));
  clip-path: polygon(47% 0, 63% 0, 53% 100%, 37% 100%);
  opacity: 0.96;
  mix-blend-mode: normal;
  filter: none;
  -webkit-backdrop-filter: blur(1.5px) saturate(1.06);
  backdrop-filter: blur(1.5px) saturate(1.06);
}

.public-page .hero-layout-1 .hero-slide-copy,
.preview-frame .hero-layout-1 .hero-slide-copy {
  z-index: 3;
  width: min(520px, 35vw);
  margin: 0 auto;
  padding: 102px 0 0;
  text-align: center;
}

.public-page .hero-layout-1 .hero-slide-copy .eyebrow,
.preview-frame .hero-layout-1 .hero-slide-copy .eyebrow {
  display: none;
}

.public-page .hero-layout-1 .hero-slide-copy h1,
.preview-frame .hero-layout-1 .hero-slide-copy h1 {
  max-width: 520px;
  margin: 0 auto;
  font-size: 2.75rem;
  line-height: 1.38;
  text-align: center;
}

.public-page .hero-layout-1 .hero-slide-copy p,
.preview-frame .hero-layout-1 .hero-slide-copy p {
  max-width: 440px;
  margin: 30px auto 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.9;
  text-align: center;
}

.public-page .hero-layout-2 .hero-slide-photo-main,
.preview-frame .hero-layout-2 .hero-slide-photo-main {
  right: 44%;
  filter: saturate(1.06) contrast(1.02);
}

.public-page .hero-layout-2 .hero-slide-photo-sub,
.preview-frame .hero-layout-2 .hero-slide-photo-sub {
  left: 0;
  z-index: 0;
  display: block;
  clip-path: none;
  filter: saturate(1.08) contrast(1.03);
}

.public-page .hero-layout-2 .hero-slide-photo-sub::before,
.preview-frame .hero-layout-2 .hero-slide-photo-sub::before,
.public-page .hero-layout-2 .hero-slide-photo-main::after,
.preview-frame .hero-layout-2 .hero-slide-photo-main::after {
  display: none;
}

.public-page .hero-layout-2::before,
.preview-frame .hero-layout-2::before {
  background:
    linear-gradient(90deg, rgba(0, 17, 24, 0.15), rgba(0, 17, 24, 0.02)),
    linear-gradient(180deg, rgba(0, 17, 24, 0.06), rgba(0, 17, 24, 0.03));
}

.public-page .hero-layout-2::after,
.preview-frame .hero-layout-2::after {
  position: absolute;
  top: 0;
  left: 44%;
  z-index: 2;
  display: block;
  width: 34%;
  height: 100%;
  content: "";
  background:
    radial-gradient(ellipse at 44% 16%, rgba(255, 255, 255, 0.24), transparent 36%),
    linear-gradient(180deg, rgba(57, 166, 224, 0.92), rgba(29, 137, 206, 0.95) 55%, rgba(23, 127, 198, 0.88));
  clip-path: polygon(14% 0, 100% 0, 84% 100%, 0 100%);
  opacity: 0.96;
  backdrop-filter: none;
}

.public-page .hero-layout-2 .hero-slide-copy,
.preview-frame .hero-layout-2 .hero-slide-copy {
  z-index: 3;
  width: min(520px, 36vw);
  margin-left: 48%;
  padding-top: 104px;
  text-align: left;
}

.public-page .hero-layout-2 .hero-slide-copy .eyebrow,
.preview-frame .hero-layout-2 .hero-slide-copy .eyebrow {
  display: none;
}

.public-page .hero-layout-2 .hero-slide-copy h1,
.preview-frame .hero-layout-2 .hero-slide-copy h1 {
  max-width: 520px;
  font-size: 2.65rem;
  line-height: 1.34;
}

.public-page .hero-layout-2 .hero-slide-copy p,
.preview-frame .hero-layout-2 .hero-slide-copy p {
  max-width: 440px;
  font-weight: 800;
  line-height: 1.9;
}

.public-page .hero-layout-3 .hero-slide-photo-main,
.preview-frame .hero-layout-3 .hero-slide-photo-main {
  left: 50%;
  filter: saturate(0.95) contrast(1.04);
}

.public-page .hero-layout-3::before,
.preview-frame .hero-layout-3::before {
  background:
    linear-gradient(90deg, rgba(2, 9, 16, 0.94), rgba(2, 9, 16, 0.78) 42%, rgba(2, 9, 16, 0.24) 100%),
    linear-gradient(180deg, rgba(2, 9, 16, 0.18), rgba(2, 9, 16, 0.06));
}

.public-page .hero-layout-3 .hero-slide-copy,
.preview-frame .hero-layout-3 .hero-slide-copy {
  z-index: 3;
  width: min(540px, 42vw);
  margin-left: 9vw;
  padding-top: 118px;
}

.public-page .hero-layout-3 .hero-slide-copy h1,
.preview-frame .hero-layout-3 .hero-slide-copy h1 {
  font-size: 3rem;
  line-height: 1.18;
}

.public-page .hero-layout-3 .hero-collage,
.preview-frame .hero-layout-3 .hero-collage {
  top: 26px;
  right: 5%;
  bottom: 34px;
  width: min(500px, 33vw);
  display: grid;
  gap: 10px;
  opacity: 0.98;
}

.public-page .hero-slide-copy,
.preview-frame .hero-slide-copy {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 380ms ease 160ms, transform 480ms cubic-bezier(0.22, 0.74, 0.22, 1) 160ms;
}

.public-page .hero-slide-copy h1,
.preview-frame .hero-slide-copy h1 {
  color: #fff;
  font-weight: 900;
  letter-spacing: 0;
  word-break: keep-all;
}

.public-page .hero-slide-copy p,
.preview-frame .hero-slide-copy p {
  color: #fff;
}

.public-page .hero-composite .hero-slide-photo-main,
.preview-frame .hero-composite .hero-slide-photo-main {
  inset: 0;
  filter: none;
}

.public-page .hero-composite .hero-slide-photo-main img,
.public-page .hero-composite .hero-slide-photo-main video,
.preview-frame .hero-composite .hero-slide-photo-main img,
.preview-frame .hero-composite .hero-slide-photo-main video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
}

.public-page .hero-composite .hero-slide-photo-main video,
.preview-frame .hero-composite .hero-slide-photo-main video {
  display: block;
  background: #0c759f;
}

.public-page .hero-composite .hero-slide-photo-main img,
.preview-frame .hero-composite .hero-slide-photo-main img {
  z-index: 1;
}

.public-page .hero-composite .hero-slide-photo-main video,
.preview-frame .hero-composite .hero-slide-photo-main video {
  z-index: 0;
}

.public-page .hero-composite-right .hero-slide-photo-main:has(video) img,
.preview-frame .hero-composite-right .hero-slide-photo-main:has(video) img {
  mask-image: linear-gradient(90deg, #000 0 50%, rgba(0, 0, 0, 0.82) 54%, rgba(0, 0, 0, 0.16) 59%, transparent 64% 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0 50%, rgba(0, 0, 0, 0.82) 54%, rgba(0, 0, 0, 0.16) 59%, transparent 64% 100%);
}

.public-page .hero-composite .hero-slide-photo-sub,
.public-page .hero-composite .hero-collage,
.preview-frame .hero-composite .hero-slide-photo-sub,
.preview-frame .hero-composite .hero-collage {
  display: none;
}

.public-page .hero-composite::before,
.preview-frame .hero-composite::before {
  background:
    linear-gradient(90deg, rgba(0, 16, 24, 0.08), rgba(0, 16, 24, 0.02) 38%, rgba(0, 16, 24, 0.05) 100%),
    linear-gradient(180deg, rgba(0, 16, 24, 0.04), rgba(0, 16, 24, 0.16));
}

.public-page .hero-composite::after,
.preview-frame .hero-composite::after {
  display: none;
}

.public-page .hero-composite .hero-slide-copy,
.preview-frame .hero-composite .hero-slide-copy {
  z-index: 3;
  width: min(560px, 38vw);
  margin-left: 39.5%;
  padding-top: 30vh;
  text-align: center;
}

.public-page .hero-composite .hero-slide-copy .eyebrow,
.preview-frame .hero-composite .hero-slide-copy .eyebrow {
  display: none;
}

.public-page .hero-composite .hero-slide-copy h1,
.preview-frame .hero-composite .hero-slide-copy h1 {
  max-width: 560px;
  margin: 0 auto;
  font-size: 2.72rem;
  line-height: 1.36;
  text-align: center;
}

.public-page .hero-composite .hero-slide-copy p,
.preview-frame .hero-composite .hero-slide-copy p {
  max-width: 430px;
  margin: 26px auto 0;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.9;
  text-align: center;
}

.public-page .hero-composite-right .hero-slide-copy,
.preview-frame .hero-composite-right .hero-slide-copy {
  width: min(480px, 32vw);
  /* Pulled in from 60.5% so the copy clears the right edge (~144px ≈ slide 3's left
     inset, for symmetry) and dropped to 36vh so the block sits vertically centred over
     the sea like slide 1, instead of riding high. */
  margin-left: 58%;
  padding-top: 36vh;
  text-align: left;
}

.public-page .hero-composite-right .hero-slide-copy h1,
.public-page .hero-composite-right .hero-slide-copy p,
.preview-frame .hero-composite-right .hero-slide-copy h1,
.preview-frame .hero-composite-right .hero-slide-copy p {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.public-page .hero-composite-left .hero-slide-copy,
.preview-frame .hero-composite-left .hero-slide-copy {
  width: min(560px, 38vw);
  margin-left: 10.5%;
  padding-top: 34vh;
  text-align: left;
}

.public-page .hero-composite-left .hero-slide-copy h1,
.public-page .hero-composite-left .hero-slide-copy p,
.preview-frame .hero-composite-left .hero-slide-copy h1,
.preview-frame .hero-composite-left .hero-slide-copy p {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.public-page .hero-dots,
.preview-frame .hero-dots {
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 4;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  gap: 8px;
  background: transparent;
  transform: none;
}

.public-page .hero-dots button,
.preview-frame .hero-dots button {
  width: 22px;
  height: 22px;
}

.public-page .hero-dots button::before,
.preview-frame .hero-dots button::before {
  width: 8px;
  height: 8px;
  background: #a8aaad;
  border-radius: 999px;
  transition:
    background-color 520ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 520ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-page .hero-dots .active::before,
.preview-frame .hero-dots .active::before {
  width: 8px;
  background: #2b84c9;
  box-shadow: 0 0 0 5px rgba(43, 132, 201, 0.1);
  transform: scale(1.08);
}

.public-page .service-section,
.preview-frame .service-section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 66px max(24px, calc((100% - 1060px) / 2)) 88px;
  background: #f0f0f0;
}

.public-page .sankyu-heading,
.preview-frame .sankyu-heading {
  display: grid;
  justify-content: center;
  margin-bottom: 34px;
  text-align: center;
}

.public-page .sankyu-heading h2,
.preview-frame .sankyu-heading h2 {
  margin: 0;
  color: #2b84c9;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.public-page .service-tabs,
.preview-frame .service-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(960px, 100%);
  margin: 0 auto 28px;
  border-top: 4px solid #2b84c9;
}

.public-page .service-tabs > span,
.public-page .service-tabs a,
.public-page .service-tabs button,
.preview-frame .service-tabs > span,
.preview-frame .service-tabs a,
.preview-frame .service-tabs button {
  display: grid;
  place-items: center;
  min-height: 62px;
  color: #8c8f94;
  background: #e2e2e2;
  border: 1px solid #d3d3d3;
  border-top: 0;
  font-size: 1.12rem;
  font-weight: 900;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
}

.public-page .service-tabs .active,
.preview-frame .service-tabs .active {
  color: #222;
  background: #fff;
}

.public-page .service-tile-grid,
.preview-frame .service-tile-grid {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-page .service-section.is-switching .service-tile-grid,
.preview-frame .service-section.is-switching .service-tile-grid,
.public-page .subpage-section.is-switching .service-tile-grid,
.preview-frame .subpage-section.is-switching .service-tile-grid {
  opacity: 0.72;
  transform: translate3d(0, 8px, 0);
}

.public-page .service-tile-grid,
.preview-frame .service-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 20px;
  width: min(960px, 100%);
  margin: 0 auto;
}

.public-page .service-tile-grid[hidden],
.preview-frame .service-tile-grid[hidden] {
  display: none !important;
}

.public-page .service-tile,
.preview-frame .service-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  align-items: center;
  min-height: 86px;
  overflow: hidden;
  color: #222;
  background: #fff;
  border: 1px solid #d6d6d6;
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.35;
  transition: border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.public-page .service-tile > span,
.preview-frame .service-tile > span {
  padding: 0 16px;
}

.public-page .service-tile img,
.preview-frame .service-tile img {
  width: 86px;
  height: 86px;
  object-fit: cover;
}

.public-page .service-tile:hover,
.public-page .service-tile:focus-visible,
.preview-frame .service-tile:hover,
.preview-frame .service-tile:focus-visible {
  border-color: #2b84c9;
  box-shadow: 0 12px 22px rgba(24, 42, 60, 0.1);
  transform: translateY(-2px);
}

.public-page .business-list-hidden,
.preview-frame .business-list-hidden {
  display: none !important;
}

.public-page .pickup-section,
.preview-frame .pickup-section {
  width: 100%;
  max-width: none;
  padding: 78px max(24px, calc((100% - 1180px) / 2)) 84px;
  color: #222;
  background: #fff;
}

.public-page .pickup-section .section-heading h2,
.preview-frame .pickup-section .section-heading h2 {
  color: #2b84c9;
}

.public-page .pickup-rail,
.preview-frame .pickup-rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 0 16px;
}

.preview-frame .pickup-rail {
  flex-wrap: wrap;
  overflow-x: clip !important;
  scroll-snap-type: none;
}

.public-page .pickup-card,
.preview-frame .pickup-card {
  flex: 0 0 350px;
  display: grid;
  grid-template-rows: 190px 1fr;
  overflow: hidden;
  color: #222;
  border: 1px solid #d8dde4;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  scroll-snap-align: start;
}

.preview-frame .pickup-card {
  flex: 1 1 min(100%, 300px) !important;
  max-width: 380px;
}

.public-page .pickup-card:first-child,
.public-page .pickup-card:nth-child(2),
.public-page .pickup-card:nth-child(3),
.preview-frame .pickup-card:first-child,
.preview-frame .pickup-card:nth-child(2),
.preview-frame .pickup-card:nth-child(3) {
  grid-row: auto;
  margin-top: 0;
}

.public-page .pickup-card img,
.public-page .pickup-card:first-child img,
.preview-frame .pickup-card img,
.preview-frame .pickup-card:first-child img {
  width: 100%;
  height: 190px;
  aspect-ratio: auto;
  object-fit: cover;
}

/* PICKUP (3rd section) photos smaller on mobile so they don't dominate each card.
   Placed after the 190px base rule (same specificity) and gated to mobile, so it
   wins on phones only; desktop keeps 190px. */
@media (max-width: 860px) {
  .public-page .pickup-card img,
  .public-page .pickup-card:first-child img,
  .preview-frame .pickup-card img,
  .preview-frame .pickup-card:first-child img {
    height: 132px;
  }
}

.public-page .pickup-card div,
.preview-frame .pickup-card div {
  padding: 18px 20px 22px;
}

.public-page .pickup-card h3,
.preview-frame .pickup-card h3 {
  margin: 0 0 10px;
  font-size: 1.06rem;
}

.public-page .route-section,
.preview-frame .route-section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  background: #101318;
}

.public-page .route-section a,
.preview-frame .route-section a {
  min-height: 250px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  background: #111;
}

.public-page .route-section img,
.preview-frame .route-section img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.58;
  transition: transform 420ms ease, opacity 320ms ease;
}

.public-page .route-section strong,
.public-page .route-section a > span,
.preview-frame .route-section strong,
.preview-frame .route-section a > span {
  position: relative;
  z-index: 1;
}

.public-page .route-section a:hover img,
.public-page .route-section a:focus-visible img,
.preview-frame .route-section a:hover img,
.preview-frame .route-section a:focus-visible img {
  opacity: 0.72;
  transform: scale(1.04);
}

.public-page .company-section,
.public-page .news-section,
.preview-frame .company-section,
.preview-frame .news-section {
  width: min(1080px, calc(100% - 48px));
  padding: 78px 0;
}

.public-page .news-tabs,
.preview-frame .news-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: -12px auto 28px;
  border-bottom: 1px solid #d9dee4;
}

.public-page .news-tabs a,
.preview-frame .news-tabs a {
  display: grid;
  place-items: center;
  min-width: 138px;
  min-height: 44px;
  color: #555;
  border-top: 3px solid transparent;
  font-weight: 900;
}

.public-page .news-tabs .active,
.preview-frame .news-tabs .active {
  color: #222;
  border-top-color: #2b84c9;
}

.public-page .news-item,
.preview-frame .news-item {
  display: block;
  border-bottom: 1px solid #d9dee4;
}

.public-page .news-body,
.preview-frame .news-body {
  padding: 18px 0;
}

.public-page .news-body h3,
.preview-frame .news-body h3 {
  margin: 8px 0 4px;
  font-size: 1.02rem;
}

.public-page .news-more,
.preview-frame .news-more {
  display: grid;
  place-items: center;
  width: 180px;
  min-height: 44px;
  margin: 28px auto 0;
  color: #fff;
  background: #2b84c9;
  font-weight: 900;
}

.public-page .footer-service-banners,
.preview-frame .footer-service-banners {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #d9dee4;
}

.public-page .footer-service-banners a,
.preview-frame .footer-service-banners a {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 78px;
  background: #101318;
  color: #fff;
  font-weight: 900;
}

.public-page .footer-service-banners img,
.preview-frame .footer-service-banners img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
  transition: transform 340ms ease, opacity 240ms ease;
}

.public-page .footer-service-banners span,
.preview-frame .footer-service-banners span {
  position: relative;
  z-index: 1;
}

.public-page .footer-service-banners a:hover img,
.public-page .footer-service-banners a:focus-visible img,
.preview-frame .footer-service-banners a:hover img,
.preview-frame .footer-service-banners a:focus-visible img {
  opacity: 0.5;
  transform: scale(1.04);
}

.public-page .subpage-hero,
.preview-frame .subpage-hero {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  color: #fff;
  background: #0b1720;
}

.public-page .subpage-hero img,
.preview-frame .subpage-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.64;
}

.public-page .subpage-hero::after,
.preview-frame .subpage-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(3, 12, 18, 0.82), rgba(3, 12, 18, 0.36) 58%, rgba(3, 12, 18, 0.14)),
    linear-gradient(180deg, rgba(3, 12, 18, 0.08), rgba(3, 12, 18, 0.58));
}

.public-page .subpage-hero > div,
.preview-frame .subpage-hero > div {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  padding: 112px 0 80px;
}

.public-page .subpage-hero h1,
.preview-frame .subpage-hero h1 {
  max-width: 720px;
  margin: 10px 0 0;
  font-size: 3rem;
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: 0;
}

.public-page .subpage-hero p:last-child,
.preview-frame .subpage-hero p:last-child {
  max-width: 620px;
  margin: 18px 0 0;
  font-weight: 800;
}

.public-page .breadcrumb,
.preview-frame .breadcrumb {
  display: flex;
  gap: 10px;
  width: min(1080px, calc(100% - 48px));
  margin: 22px auto 0;
  color: #6a7078;
  font-size: 0.88rem;
  font-weight: 800;
}

.public-page .breadcrumb a,
.preview-frame .breadcrumb a {
  color: #2b84c9;
}

.public-page .breadcrumb a::after,
.preview-frame .breadcrumb a::after {
  margin-left: 10px;
  content: ">";
  color: #9ca3ad;
}

.public-page .subpage-section,
.preview-frame .subpage-section {
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  padding: 58px 0 86px;
}

.public-page .subpage-lead,
.preview-frame .subpage-lead {
  max-width: 820px;
  margin: 0 0 28px;
  color: #343a42;
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1.9;
}

.public-page .business-overview-page,
.preview-frame .business-overview-page {
  padding-top: 54px;
}

.public-page .business-overview-intro,
.preview-frame .business-overview-intro {
  display: grid;
  grid-template-columns: minmax(110px, 0.16fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 42px);
  align-items: start;
  margin-bottom: 36px;
  padding-bottom: 34px;
  border-bottom: 1px solid #d9dee4;
}

.public-page .business-overview-intro > span,
.preview-frame .business-overview-intro > span {
  color: #d35b35;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0;
}

.public-page .business-overview-intro h2,
.preview-frame .business-overview-intro h2 {
  max-width: none;
  margin: 0;
  color: #15191f;
  font-size: clamp(2rem, 3.3vw, 3.25rem);
  font-weight: 900;
  line-height: 1.08;
}

.public-page .business-overview-intro p,
.preview-frame .business-overview-intro p {
  max-width: none;
  margin: 22px 0 0;
  color: #4d5560;
  font-size: 1.06rem;
  font-weight: 750;
  line-height: 1.85;
}

.public-page .business-category-grid,
.preview-frame .business-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 58px;
}

.public-page .business-category-card,
.preview-frame .business-category-card {
  position: relative;
  display: grid;
  min-height: 300px;
  overflow: hidden;
  color: #fff;
  background: #0b1822;
  border: 1px solid rgba(20, 43, 58, 0.18);
  text-decoration: none;
  isolation: isolate;
}

.public-page .business-category-card img,
.preview-frame .business-category-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-page .business-category-card::before,
.preview-frame .business-category-card::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(115deg, rgba(7, 17, 24, 0.9) 0%, rgba(7, 17, 24, 0.72) 42%, rgba(7, 17, 24, 0.2) 100%),
    linear-gradient(0deg, rgba(9, 31, 46, 0.36), rgba(9, 31, 46, 0.36));
  transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-page .business-category-card div,
.preview-frame .business-category-card div {
  align-self: end;
  max-width: 410px;
  padding: clamp(24px, 3vw, 36px);
}

.public-page .business-category-card span,
.preview-frame .business-category-card span {
  display: inline-block;
  margin-bottom: 16px;
  color: #5fb7e8;
  font-size: 0.86rem;
  font-weight: 900;
}

.public-page .business-category-card h3,
.preview-frame .business-category-card h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.95rem);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  word-break: keep-all;
}

.public-page .business-category-card p,
.preview-frame .business-category-card p {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.98rem;
  font-weight: 750;
  line-height: 1.75;
}

.public-page .business-overview-heading,
.preview-frame .business-overview-heading {
  display: grid;
  justify-content: start;
  gap: 10px;
  align-items: end;
  margin: 0 0 22px;
  text-align: left;
}

.public-page .business-overview-heading h2,
.preview-frame .business-overview-heading h2 {
  max-width: none;
  margin: 0;
  color: #15191f;
  font-size: clamp(1.65rem, 2.8vw, 2.45rem);
  line-height: 1.18;
}

.public-page .business-service-grid,
.preview-frame .business-service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-page .subpage-card-grid.business-service-grid,
.preview-frame .subpage-card-grid.business-service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.public-page .subpage-media-row,
.preview-frame .subpage-media-row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 34px;
  align-items: stretch;
  margin-top: 34px;
}

.public-page .subpage-media-row img,
.preview-frame .subpage-media-row img {
  width: 100%;
  min-height: 320px;
  object-fit: cover;
}

.public-page .subpage-media-row > div,
.preview-frame .subpage-media-row > div {
  display: grid;
  align-content: center;
  padding: 34px;
  background: #f1f4f7;
}

.public-page .subpage-card-grid,
.preview-frame .subpage-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.public-page .subpage-card-grid article,
.public-page .subpage-card-grid a,
.preview-frame .subpage-card-grid article,
.preview-frame .subpage-card-grid a {
  display: block;
  overflow: hidden;
  color: #20252b;
  background: #fff;
  border: 1px solid #d9dee4;
}

.public-page .subpage-card-grid img,
.preview-frame .subpage-card-grid img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.public-page .subpage-card-grid h3,
.preview-frame .subpage-card-grid h3 {
  margin: 18px 20px 8px;
  font-size: 1.08rem;
}

.public-page .subpage-card-grid p,
.preview-frame .subpage-card-grid p {
  margin: 0 20px 22px;
  color: #626873;
}

.public-page .subpage-link-list,
.preview-frame .subpage-link-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.public-page .subpage-link-list a,
.preview-frame .subpage-link-list a {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 20px;
  background: #fff;
  border: 1px solid #d9dee4;
  font-weight: 900;
}

.public-page .subpage-link-list.compact,
.preview-frame .subpage-link-list.compact {
  margin-top: 0;
}

.public-page .service-overview-grid,
.preview-frame .service-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 26px 0 34px;
}

.public-page .service-overview-grid article,
.preview-frame .service-overview-grid article {
  min-height: 186px;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(43, 132, 201, 0.08), rgba(255, 255, 255, 0) 64%),
    #fff;
  border: 1px solid #d9dee4;
}

.public-page .service-overview-grid span,
.preview-frame .service-overview-grid span {
  color: #2b84c9;
  font-weight: 900;
}

.public-page .service-overview-grid h3,
.preview-frame .service-overview-grid h3,
.public-page .service-related-panel h3,
.preview-frame .service-related-panel h3 {
  margin: 12px 0 10px;
  font-size: 1.18rem;
  line-height: 1.45;
}

.public-page .service-overview-grid p,
.preview-frame .service-overview-grid p,
.public-page .service-related-panel p,
.preview-frame .service-related-panel p {
  margin: 0;
  color: #5d6672;
  font-weight: 700;
  line-height: 1.85;
}

.public-page .service-related-panel,
.preview-frame .service-related-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: 28px;
  align-items: start;
  margin-top: 42px;
  padding: 28px;
  background: #f3f6f9;
  border: 1px solid #d9dee4;
}

.public-page .related-tile-list,
.preview-frame .related-tile-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.public-page .related-tile-card,
.preview-frame .related-tile-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  align-items: stretch;
  min-width: 0;
  min-height: 86px;
  overflow: hidden;
  color: #20252b;
  text-decoration: none;
  background: #fff;
  border: 1px solid #d9dee4;
  transition:
    border-color 820ms ease,
    box-shadow 980ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 820ms ease,
    transform 980ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-page .related-tile-card span,
.preview-frame .related-tile-card span {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 14px;
  font-size: clamp(0.88rem, 1vw, 1rem);
  font-weight: 900;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.public-page .related-tile-card img,
.preview-frame .related-tile-card img {
  width: 86px;
  height: 86px;
  object-fit: cover;
  transition: transform 980ms cubic-bezier(0.16, 1, 0.3, 1), filter 820ms ease;
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .public-page .related-tile-card:hover,
  .public-page .related-tile-card:focus-visible,
  .preview-frame .related-tile-card:hover,
  .preview-frame .related-tile-card:focus-visible {
    transform: translate3d(0, -4px, 0);
    border-color: rgba(43, 132, 201, 0.52);
    box-shadow: 0 18px 34px rgba(15, 35, 48, 0.12);
  }

  .public-page .related-tile-card:hover img,
  .public-page .related-tile-card:focus-visible img,
  .preview-frame .related-tile-card:hover img,
  .preview-frame .related-tile-card:focus-visible img {
    transform: scale(1.045);
    filter: saturate(1.08) contrast(1.04);
  }
}

.public-page .service-check-list,
.preview-frame .service-check-list {
  display: grid;
  gap: 14px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.public-page .service-check-list li,
.preview-frame .service-check-list li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  padding-left: 0;
  color: #242a31;
  font-weight: 900;
  line-height: 1.7;
}

.public-page .service-check-list li::before,
.preview-frame .service-check-list li::before {
  width: 14px;
  height: 2px;
  content: "";
  background: #2b84c9;
  border-radius: 999px;
  transform: translateY(1px);
}

.public-page .subpage-cta-strip,
.preview-frame .subpage-cta-strip {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-top: 42px;
  padding: 22px 26px;
  color: #fff;
  background: #0b2536;
}

.public-page .subpage-cta-strip strong,
.preview-frame .subpage-cta-strip strong {
  font-size: 1.08rem;
}

.public-page .search-page-form,
.preview-frame .search-page-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin-bottom: 28px;
}

.public-page .search-page-form input,
.preview-frame .search-page-form input {
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid #d3d9e1;
  border-radius: 0;
  font: inherit;
  font-weight: 800;
}

.public-page .search-results,
.preview-frame .search-results {
  display: grid;
  gap: 12px;
}

.public-page .search-results a,
.preview-frame .search-results a,
.public-page .empty-state,
.preview-frame .empty-state {
  display: grid;
  gap: 6px;
  padding: 20px 22px;
  color: #20252b;
  background: #fff;
  border: 1px solid #d9dee4;
}

.public-page .search-results span,
.preview-frame .search-results span,
.public-page .empty-state,
.preview-frame .empty-state {
  color: #626873;
  font-weight: 700;
}

.public-page .contact-page-section,
.preview-frame .contact-page-section {
  padding-top: clamp(44px, 5vw, 72px);
}

.public-page .contact-layout,
.preview-frame .contact-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(420px, 1.28fr);
  gap: clamp(28px, 4.6vw, 72px);
  align-items: start;
  max-width: 1180px;
  margin-inline: auto;
}

.public-page .contact-copy,
.preview-frame .contact-copy {
  position: relative;
  display: grid;
  gap: 16px;
  padding-top: 8px;
}

.public-page .contact-copy h2,
.preview-frame .contact-copy h2 {
  margin: 0;
  font-size: clamp(2.15rem, 4.1vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: 0;
  white-space: nowrap;
}

.public-page .contact-copy p,
.preview-frame .contact-copy p {
  margin: 0;
  color: #4f5966;
  font-weight: 800;
  line-height: 1.95;
}

.public-page .contact-copy dl,
.preview-frame .contact-copy dl {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
}

.public-page .contact-copy dl div,
.preview-frame .contact-copy dl div {
  display: grid;
  gap: 7px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #d9dee4;
}

.public-page .contact-copy dt,
.preview-frame .contact-copy dt {
  color: #d75a32;
  font-size: 0.86rem;
  font-weight: 900;
}

.public-page .contact-copy dd,
.preview-frame .contact-copy dd {
  margin: 0;
  color: #18202a;
  font-weight: 900;
  line-height: 1.7;
}

.public-page .contact-form,
.preview-frame .contact-form {
  display: grid;
  gap: 20px;
  padding: clamp(24px, 3.2vw, 40px);
  border: 1px solid #d6dde5;
  background: #fff;
  box-shadow: 0 26px 64px rgba(20, 35, 54, 0.08);
}

.public-page .contact-form-head,
.preview-frame .contact-form-head {
  display: grid;
  gap: 8px;
  padding-bottom: 4px;
}

.public-page .contact-form-head strong,
.preview-frame .contact-form-head strong {
  color: #151c25;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 900;
  line-height: 1.35;
}

.public-page .contact-form-head span,
.preview-frame .contact-form-head span {
  color: #68717d;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.7;
}

.public-page .contact-form .two-fields,
.preview-frame .contact-form .two-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.public-page .contact-form > input[name="website"],
.preview-frame .contact-form > input[name="website"] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.public-page .contact-form label,
.preview-frame .contact-form label {
  display: grid;
  gap: 8px;
  color: #4f5966;
  font-size: 0.9rem;
  font-weight: 900;
}

.public-page .contact-form label span,
.preview-frame .contact-form label span {
  display: flex;
  gap: 8px;
  align-items: center;
}

.public-page .contact-form b,
.preview-frame .contact-form b {
  color: #d75a32;
  font-size: 0.75rem;
}

.public-page .contact-form input,
.public-page .contact-form select,
.public-page .contact-form textarea,
.preview-frame .contact-form input,
.preview-frame .contact-form select,
.preview-frame .contact-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #cfd6df;
  border-radius: 6px;
  padding: 14px 15px;
  color: #18202a;
  font: inherit;
  font-weight: 800;
  background: #f9fbfd;
  outline: none;
  transition:
    border-color 260ms ease,
    box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
    background 260ms ease;
}

.public-page .contact-form textarea,
.preview-frame .contact-form textarea {
  min-height: 180px;
  resize: vertical;
}

.public-page .contact-form input:focus,
.public-page .contact-form select:focus,
.public-page .contact-form textarea:focus,
.preview-frame .contact-form input:focus,
.preview-frame .contact-form select:focus,
.preview-frame .contact-form textarea:focus {
  border-color: #2b84c9;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(43, 132, 201, 0.13);
}

.public-page .contact-actions,
.preview-frame .contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}

.public-page .contact-actions p,
.preview-frame .contact-actions p {
  flex: 1 1 240px;
  margin: 0;
  color: #4f5966;
  font-weight: 900;
  line-height: 1.7;
}

.public-page .contact-actions p[data-tone="success"],
.preview-frame .contact-actions p[data-tone="success"] {
  color: #1e7a4e;
}

.public-page .contact-actions p[data-tone="danger"],
.preview-frame .contact-actions p[data-tone="danger"] {
  color: #bd3226;
}

.public-page .contact-form button:disabled,
.preview-frame .contact-form button:disabled {
  cursor: wait;
  opacity: 0.62;
}

@media (max-width: 860px) {
  .public-page .contact-page-section,
  .preview-frame .contact-page-section {
    padding-top: 42px;
  }

  .public-page .contact-layout,
  .preview-frame .contact-layout,
  .public-page .contact-form .two-fields,
  .preview-frame .contact-form .two-fields {
    grid-template-columns: 1fr;
  }

  .public-page .contact-copy,
  .preview-frame .contact-copy {
    position: static;
  }

  .public-page .contact-copy h2,
  .preview-frame .contact-copy h2 {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .public-page .contact-copy dl div,
  .preview-frame .contact-copy dl div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .public-page .contact-actions,
  .preview-frame .contact-actions {
    align-items: stretch;
  }

  .public-page .contact-actions .button,
  .preview-frame .contact-actions .button {
    justify-content: center;
    width: 100%;
  }
}

.public-page .footer,
.preview-frame .footer {
  display: block;
  padding: 0;
  color: #fff;
  background: #1f8acb;
}

.public-page .footer-blue,
.preview-frame .footer-blue {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 38px max(24px, calc((100% - 1080px) / 2));
  background: #198bd0;
}

.public-page .footer-banners,
.preview-frame .footer-banners {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.32);
}

.public-page .footer-banners a,
.preview-frame .footer-banners a {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 104px;
  overflow: hidden;
  background: #167bb8;
  font-weight: 900;
}

.public-page .footer-banners img,
.preview-frame .footer-banners img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.46;
  filter: saturate(0.9) contrast(1.05);
  transform: scale(1.04);
  transition: transform 520ms cubic-bezier(0.22, 0.74, 0.22, 1), opacity 520ms ease;
}

.public-page .footer-banners a::before,
.preview-frame .footer-banners a::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(110deg, rgba(6, 55, 91, 0.88), rgba(16, 139, 200, 0.58));
}

.public-page .footer-banners a > span,
.preview-frame .footer-banners a > span {
  position: relative;
  z-index: 2;
  padding: 0 14px;
  text-align: center;
  line-height: 1.45;
}

.public-page .footer-banners a:hover img,
.preview-frame .footer-banners a:hover img {
  opacity: 0.66;
  transform: scale(1.1);
}

.public-page .footer-legal,
.preview-frame .footer-legal {
  display: flex;
  justify-content: center;
  gap: 34px;
  padding: 18px 24px;
  background: #0f5d90;
  font-size: 0.82rem;
}

@media (max-width: 860px) {
  .public-page .site-header,
  .preview-frame .site-header {
    position: sticky;
    min-height: 58px;
    color: #222;
    background: #fff;
    border-bottom: 1px solid #e1e5ea;
  }

  .public-page .header-primary,
  .preview-frame .header-primary {
    grid-template-columns: 1fr 44px;
    min-height: 58px;
    padding: 0 16px;
  }

  .public-page .brand,
  .preview-frame .brand {
    min-height: 58px;
  }

  .public-page .brand-name,
  .preview-frame .brand-name {
    font-size: 1.6rem;
  }

  .public-page .brand-logo,
  .preview-frame .brand-logo {
    height: 44px;
    max-width: 142px;
  }

  .public-page .header-tools,
  .preview-frame .header-tools {
    display: none;
  }

  .public-page .nav-toggle,
  .preview-frame .nav-toggle {
    display: grid;
    place-items: center;
    color: #222;
    background: transparent;
    border: 0;
  }

  .public-page .site-nav,
  .preview-frame .site-nav {
    position: absolute;
    top: 58px;
    left: 12px;
    right: 12px;
    display: grid;
    gap: 0;
    max-height: min(76vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    color: #222;
    background: #fff;
    border: 1px solid #d9dee4;
    box-shadow: 0 16px 40px rgba(12, 24, 38, 0.18);
  }

  .public-page .hero-section,
  .preview-frame .hero-section {
    height: 100vh;
    height: 100svh;
    min-height: 100svh;
    background: #fff;
  }

  .public-page .hero-media,
  .preview-frame .hero-media {
    position: absolute;
    inset: 0;
  }

  .public-page .hero-slide,
  .preview-frame .hero-slide {
    height: 100%;
  }

  .public-page .hero-slide-photo-main,
  .public-page .hero-slide-photo-sub,
  .preview-frame .hero-slide-photo-main,
  .preview-frame .hero-slide-photo-sub {
    position: absolute;
    inset: 0;
  }

  .public-page .hero-slide-photo-sub,
  .preview-frame .hero-slide-photo-sub,
  .public-page .hero-collage,
  .preview-frame .hero-collage {
    display: none;
  }

  .public-page .hero-layout-1 .hero-slide-photo-main,
  .public-page .hero-layout-2 .hero-slide-photo-main,
  .public-page .hero-layout-3 .hero-slide-photo-main,
  .preview-frame .hero-layout-1 .hero-slide-photo-main,
  .preview-frame .hero-layout-2 .hero-slide-photo-main,
  .preview-frame .hero-layout-3 .hero-slide-photo-main {
    left: 0;
    right: 0;
  }

  .public-page .hero-layout-1::after,
  .public-page .hero-layout-2::after,
  .preview-frame .hero-layout-1::after,
  .preview-frame .hero-layout-2::after {
    display: none;
  }

  .public-page .hero-slide::before,
  .preview-frame .hero-slide::before {
    /* Mobile hero darkened to a ~80% "少し暗め" impression: the bright upper/right
       areas (sky/sunset) were washing out the white copy. Raise the light stops;
       the bottom text gradient stays. Applies to all 3 slides. */
    background:
      linear-gradient(180deg, rgba(0, 13, 20, 0.42), rgba(0, 13, 20, 0.56) 42%, rgba(0, 13, 20, 0.92)),
      linear-gradient(90deg, rgba(0, 13, 20, 0.58), rgba(0, 13, 20, 0.24));
  }

  .public-page .hero-layout-1 .hero-slide-copy,
  .public-page .hero-layout-2 .hero-slide-copy,
  .public-page .hero-layout-3 .hero-slide-copy,
  .public-page .hero-composite .hero-slide-copy,
  .preview-frame .hero-layout-1 .hero-slide-copy,
  .preview-frame .hero-layout-2 .hero-slide-copy,
  .preview-frame .hero-layout-3 .hero-slide-copy,
  .preview-frame .hero-composite .hero-slide-copy {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 30vh;
    bottom: auto;
    width: auto;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .public-page .hero-composite-right .hero-slide-copy,
  .preview-frame .hero-composite-right .hero-slide-copy {
    top: 32vh;
  }

  .public-page .hero-composite-left .hero-slide-copy,
  .preview-frame .hero-composite-left .hero-slide-copy {
    top: 34vh;
  }

  .public-page .hero-layout-1 .hero-slide-copy .eyebrow,
  .public-page .hero-layout-2 .hero-slide-copy .eyebrow,
  .public-page .hero-composite .hero-slide-copy .eyebrow,
  .preview-frame .hero-layout-1 .hero-slide-copy .eyebrow,
  .preview-frame .hero-layout-2 .hero-slide-copy .eyebrow,
  .preview-frame .hero-composite .hero-slide-copy .eyebrow {
    display: block;
  }

  .public-page .hero-slide-copy h1,
  .public-page .hero-layout-1 .hero-slide-copy h1,
  .public-page .hero-layout-2 .hero-slide-copy h1,
  .public-page .hero-layout-3 .hero-slide-copy h1,
  .public-page .hero-composite .hero-slide-copy h1,
  .preview-frame .hero-slide-copy h1,
  .preview-frame .hero-layout-1 .hero-slide-copy h1,
  .preview-frame .hero-layout-2 .hero-slide-copy h1,
  .preview-frame .hero-layout-3 .hero-slide-copy h1,
  .preview-frame .hero-composite .hero-slide-copy h1 {
    max-width: 330px;
    margin: 10px 0 0;
    font-size: 2rem;
    line-height: 1.2;
    text-align: left;
  }

  .public-page .hero-slide-copy p,
  .public-page .hero-layout-1 .hero-slide-copy p,
  .public-page .hero-layout-2 .hero-slide-copy p,
  .public-page .hero-composite .hero-slide-copy p,
  .preview-frame .hero-slide-copy p,
  .preview-frame .hero-layout-1 .hero-slide-copy p,
  .preview-frame .hero-layout-2 .hero-slide-copy p,
  .preview-frame .hero-composite .hero-slide-copy p {
    max-width: 330px;
    margin: 18px 0 0;
    font-size: 0.92rem;
    line-height: 1.75;
    text-align: left;
  }

  .public-page .hero-dots,
  .preview-frame .hero-dots {
    height: 46px;
  }

  .public-page .service-section,
  .preview-frame .service-section {
    padding: 54px 18px 68px;
  }

  .public-page .service-section .section-heading h2,
  .preview-frame .service-section .section-heading h2 {
    display: block;
  }

  .public-page .service-tile-grid,
  .preview-frame .service-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  /* Empty partner/affiliate placeholder slots render as bare dashed boxes;
     on the narrow single-column mobile layout four of them stack into a big
     broken-looking void above 提携金融機関. Hide the empty slots on the public
     mobile view (the editor preview keeps them so partners can be filled in). */
  .public-page .partner-card.is-empty {
    display: none;
  }

  .public-page .pickup-rail,
  .preview-frame .pickup-rail {
    margin: 0 -18px;
    padding-left: 18px;
  }

  .public-page .pickup-card,
  .preview-frame .pickup-card {
    flex-basis: 278px;
  }

  .public-page .route-section,
  .preview-frame .route-section,
  .public-page .footer-service-banners,
  .preview-frame .footer-service-banners,
  .public-page .footer-banners,
  .preview-frame .footer-banners {
    grid-template-columns: 1fr;
  }

  .public-page .route-section a,
  .preview-frame .route-section a {
    min-height: 138px;
  }

  .public-page .company-section,
  .public-page .news-section,
  .preview-frame .company-section,
  .preview-frame .news-section {
    width: calc(100% - 36px);
    padding: 60px 0;
  }

  .public-page .company-layout,
  .preview-frame .company-layout {
    grid-template-columns: 1fr;
  }

  .public-page .news-tabs,
  .preview-frame .news-tabs {
    overflow-x: auto;
    justify-content: flex-start;
  }

  .preview-frame .news-tabs {
    flex-wrap: wrap;
    overflow-x: clip !important;
  }

  .public-page .footer-blue,
  .preview-frame .footer-blue,
  .public-page .footer-legal,
  .preview-frame .footer-legal {
    display: grid;
    gap: 12px;
  }

  .public-page .subpage-hero,
  .preview-frame .subpage-hero {
    min-height: 320px;
  }

  .public-page .subpage-hero > div,
  .preview-frame .subpage-hero > div {
    width: calc(100% - 36px);
    padding: 88px 0 58px;
  }

  .public-page .subpage-hero h1,
  .preview-frame .subpage-hero h1 {
    font-size: 2.1rem;
  }

  .public-page .breadcrumb,
  .public-page .subpage-section,
  .preview-frame .breadcrumb,
  .preview-frame .subpage-section {
    width: calc(100% - 36px);
  }

  /* Mobile-only: `.breadcrumb a` gets min-height:44px (tap target) here, making the
     link taller than the page <span>; center them so "トップ › ページ名" sits on one
     line. Desktop has no min-height, so no base change needed. */
  .public-page .breadcrumb,
  .preview-frame .breadcrumb {
    align-items: center;
  }

  .public-page .subpage-media-row,
  .public-page .subpage-card-grid,
  .public-page .service-overview-grid,
  .public-page .service-related-panel,
  .public-page .subpage-link-list,
  .public-page .search-page-form,
  .preview-frame .subpage-media-row,
  .preview-frame .subpage-card-grid,
  .preview-frame .service-overview-grid,
  .preview-frame .service-related-panel,
  .preview-frame .subpage-link-list {
    grid-template-columns: 1fr;
  }

  .preview-frame .search-page-form {
    grid-template-columns: 1fr;
  }

  .public-page .service-related-panel,
  .preview-frame .service-related-panel {
    padding: 22px;
  }

  .public-page .related-tile-list,
  .preview-frame .related-tile-list {
    grid-template-columns: 1fr;
  }

  /* Mobile: full-width row turned the desktop label-left + tiny-right-thumbnail
     tile into a big dead band. Re-cast as a clean image-left media row so the
     business "関連する事業内容" tiles read as a balanced, tappable list. The
     512px source art keeps the larger thumbnail crisp. */
  .public-page .related-tile-card,
  .preview-frame .related-tile-card {
    grid-template-columns: 84px minmax(0, 1fr);
    min-height: 84px;
  }

  .public-page .related-tile-card img,
  .preview-frame .related-tile-card img {
    grid-column: 1;
    grid-row: 1;
    width: 84px;
    height: 84px;
  }

  .public-page .related-tile-card span,
  .preview-frame .related-tile-card span {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
    text-align: left;
  }

  .public-page .subpage-cta-strip,
  .preview-frame .subpage-cta-strip {
    display: grid;
    gap: 16px;
  }

  .public-page .subpage-card-grid img,
  .preview-frame .subpage-card-grid img {
    height: 176px;
  }
}

/* Final Sankyu-alignment pass: dense navigation, image-led hero, and footer image links. */
.public-page .brand::before,
.preview-frame .brand::before {
  display: none;
  content: none;
}

.public-page .site-nav .nav-item,
.preview-frame .site-nav .nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
}

.public-page .mega-menu,
.preview-frame .mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  min-width: 420px;
  padding: 18px;
  color: #1f252d;
  background: rgba(255, 255, 255, 0.97);
  border-top: 3px solid #2b84c9;
  box-shadow: 0 24px 48px rgba(12, 28, 42, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -8px, 0);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 0.74, 0.22, 1);
}

.public-page .mega-menu a,
.preview-frame .mega-menu a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  color: #33383f;
  border-bottom: 1px solid #e7eaf0;
  font-size: 0.86rem;
  font-weight: 800;
}

.public-page .mega-menu a:hover,
.public-page .mega-menu a:focus-visible,
.preview-frame .mega-menu a:hover,
.preview-frame .mega-menu a:focus-visible {
  color: #2b84c9;
  background: #f3f8fc;
}

.public-page .site-nav .nav-item:hover .mega-menu,
.public-page .site-nav .nav-item:focus-within .mega-menu,
.preview-frame .site-nav .nav-item:hover .mega-menu,
.preview-frame .site-nav .nav-item:focus-within .mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
}

.public-page .hero-composite .hero-slide-copy,
.preview-frame .hero-composite .hero-slide-copy {
  opacity: 0;
  transform: translateY(10px);
}

.public-page .hero-composite.active .hero-slide-copy,
.preview-frame .hero-composite.active .hero-slide-copy {
  opacity: 1;
  transform: translateY(0);
}

.public-page .hero-composite .hero-slide-copy h1,
.preview-frame .hero-composite .hero-slide-copy h1 {
  text-shadow: 0 2px 10px rgba(0, 20, 36, 0.18);
}

.public-page .service-tile-grid,
.preview-frame .service-tile-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1040px;
}

.public-page .footer-legal,
.preview-frame .footer-legal {
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .public-page .site-nav .nav-item,
  .preview-frame .site-nav .nav-item {
    display: grid;
    min-height: auto;
  }

  .public-page .site-nav .nav-item > a,
  .preview-frame .site-nav .nav-item > a {
    min-height: 42px;
    font-weight: 900;
  }

  .public-page .mega-menu,
  .preview-frame .mega-menu {
    position: static;
    grid-template-columns: 1fr;
    min-width: 0;
    padding: 0 0 8px 12px;
    border-top: 0;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .public-page .mega-menu a,
  .preview-frame .mega-menu a {
    min-height: 32px;
    padding: 4px 10px;
    border-bottom: 0;
    color: #59606a;
    font-size: 0.8rem;
  }

  .public-page .hero-composite .hero-slide-copy,
  .preview-frame .hero-composite .hero-slide-copy {
    left: 22px;
    right: 22px;
    bottom: 70px;
    width: auto;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .public-page .hero-composite .hero-slide-copy h1,
  .public-page .hero-composite .hero-slide-copy p,
  .preview-frame .hero-composite .hero-slide-copy h1,
  .preview-frame .hero-composite .hero-slide-copy p {
    text-align: left;
  }

  .public-page .hero-composite .hero-slide-copy .eyebrow,
  .public-page .hero-composite .hero-slide-copy h1,
  .public-page .hero-composite .hero-slide-copy p,
  .preview-frame .hero-composite .hero-slide-copy .eyebrow,
  .preview-frame .hero-composite .hero-slide-copy h1,
  .preview-frame .hero-composite .hero-slide-copy p {
    /* Mobile legibility shadow that hugs the glyphs. The old stacked
       `0 8px 28px` cloud read as a dirty dark band/box behind the copy on
       phones; this keeps white text readable over bright sky without it. */
    text-shadow:
      0 1px 3px rgba(0, 16, 26, 0.5),
      0 2px 10px rgba(0, 16, 26, 0.26);
  }

  .public-page .service-tile-grid,
  .preview-frame .service-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Motion reference pass: editorial masks, menu reveal, and restrained pseudo-3D depth. */
@keyframes bondi-copy-mask {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bondi-copy-fade-out {
  from {
    opacity: 1;
    clip-path: inset(0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    clip-path: inset(0);
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes bondi-surface-sweep {
  from {
    opacity: 0;
    transform: translate3d(-24%, 0, 0) skewX(-11deg);
  }
  42% {
    opacity: 0.18;
  }
  to {
    opacity: 0;
    transform: translate3d(24%, 0, 0) skewX(-11deg);
  }
}

@keyframes bondi-hero-stage-in {
  from {
    opacity: 0.82;
    clip-path: inset(10% 12% 12% 12%);
    filter: saturate(0.94) brightness(0.94);
    transform: translate3d(0, -18px, 0) scale(0.965);
  }
  58% {
    opacity: 1;
    clip-path: inset(0);
    filter: saturate(1.02) brightness(1.02);
    transform: translate3d(0, 0, 0) scale(1.006);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    filter: none;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes bondi-photo-field-in {
  from {
    opacity: 0.52;
    clip-path: inset(14% 18% 14% 18%);
    filter: saturate(0.9) contrast(0.96) brightness(0.9);
    transform: translate3d(0, -22px, 0) rotateX(2deg) rotateY(-2deg) scale(0.955);
  }
  52% {
    opacity: 1;
    clip-path: inset(0);
    filter: saturate(1.04) contrast(1.02) brightness(1.02);
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1.006);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    filter: none;
    transform: rotateX(var(--hero-tilt-x, 0deg)) rotateY(var(--hero-tilt-y, 0deg));
  }
}

@keyframes bondi-photo-field-in-soft {
  from {
    opacity: 0.76;
    clip-path: inset(6% 8% 6% 8%);
    filter: saturate(0.96) contrast(0.99) brightness(0.96);
    transform: translate3d(0, -10px, 0) rotateX(0.9deg) rotateY(-0.9deg) scale(0.982);
  }
  52% {
    opacity: 1;
    clip-path: inset(0);
    filter: saturate(1.02) contrast(1.01) brightness(1.005);
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1.002);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    filter: none;
    transform:
      rotateX(calc(var(--hero-tilt-x, 0deg) * 0.45))
      rotateY(calc(var(--hero-tilt-y, 0deg) * 0.45));
  }
}

@keyframes bondi-blue-plate-in {
  from {
    opacity: 0;
    transform: translate3d(-86px, 28px, 0) rotate(-5deg) scaleX(0.48) scaleY(0.94);
  }
  34% {
    opacity: 0.6;
  }
  72% {
    opacity: 0.9;
    transform: translate3d(8px, 0, 0) rotate(0deg) scaleX(1) scaleY(1);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1) scaleY(1);
  }
}

@keyframes bondi-blue-rib-in {
  from {
    opacity: 0;
    transform: translate3d(-58px, -34px, 0) rotate(8deg) scaleY(0.62);
  }
  44% {
    opacity: 0.5;
  }
  to {
    opacity: 0.12;
    transform: translate3d(0, 0, 0) rotate(5deg) scaleY(1);
  }
}

@keyframes bondi-amber-rib-in {
  from {
    opacity: 0;
    transform: translate3d(-42px, 24px, 0) rotate(-9deg) scaleX(0.58);
  }
  48% {
    opacity: 0.34;
  }
  to {
    opacity: 0.06;
    transform: translate3d(0, 0, 0) rotate(-5deg) scaleX(1);
  }
}

@keyframes bondi-dark-plate-in {
  from {
    opacity: 0;
    transform: translate3d(-72px, 0, 0) rotate(-3deg) skewX(-8deg) scaleX(0.72);
  }
  42% {
    opacity: 0.42;
  }
  to {
    opacity: 0.18;
    transform: translate3d(0, 0, 0) rotate(0deg) skewX(-8deg) scaleX(1);
  }
}

@keyframes bondi-thin-line-in {
  from {
    opacity: 0;
    transform: translate3d(-34px, -18px, 0) rotate(9deg) scaleY(0.54);
  }
  52% {
    opacity: 0.28;
  }
  to {
    opacity: 0.07;
    transform: translate3d(0, 0, 0) rotate(6deg) scaleY(1);
  }
}

@keyframes bondi-photo-idle {
  from {
    transform: translate3d(-0.42%, -0.18%, 0) scale(1.035);
  }
  to {
    transform: translate3d(0.42%, 0.18%, 0) scale(1.048);
  }
}

@keyframes bondi-left-panel-in {
  from {
    opacity: 0;
    filter: saturate(0.88) brightness(0.96);
    transform: translate3d(-3.4%, 0, 0) scale(1.025);
  }
  to {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes bondi-right-panel-in {
  from {
    opacity: 0;
    filter: saturate(0.9) brightness(0.94);
    transform: translate3d(3.2%, 0.4%, 0) scale(1.025);
  }
  to {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes bondi-left-panel-idle {
  from {
    transform: translate3d(-0.28%, -0.12%, 0) scale(1.006);
  }
  to {
    transform: translate3d(0.24%, 0.1%, 0) scale(1.014);
  }
}

@keyframes bondi-right-panel-idle {
  from {
    transform: translate3d(0.18%, 0.12%, 0) scale(1.006);
  }
  to {
    transform: translate3d(-0.24%, -0.08%, 0) scale(1.014);
  }
}

@keyframes bondi-blue-plate-idle {
  from {
    transform: translate3d(-7px, 0, 0) rotate(-0.5deg) scaleX(0.985) scaleY(1.004);
  }
  to {
    transform: translate3d(8px, -4px, 0) rotate(0.7deg) scaleX(1.018) scaleY(0.996);
  }
}

@keyframes bondi-sankyu-core-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(5px, -2px, 0);
  }
}

@keyframes bondi-sankyu-veil-drift {
  from {
    transform: translate3d(-2px, 1px, 0);
  }
  to {
    transform: translate3d(4px, -2px, 0);
  }
}

@keyframes bondi-sankyu-edge-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(3px, -1px, 0);
  }
}

@keyframes bondi-orbit-idle {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0;
    transform: translate3d(-4px, 3px, 0) rotate(-3deg) scale(0.99);
  }
  to {
    background-position: 18px -10px, -12px 14px, 22px 0, -18px 8px;
    transform: translate3d(6px, -4px, 0) rotate(7deg) scale(1.01);
  }
}

@keyframes bondi-dark-map-idle {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0;
    transform: translate3d(-8px, 2px, 0) rotate(-1.2deg) scale(0.992);
  }
  to {
    background-position: 10px -8px, -16px 12px, 20px 0, 0 0;
    transform: translate3d(7px, -3px, 0) rotate(1.8deg) scale(1.008);
  }
}

@keyframes bondi-editorial-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes bondi-mobile-hero-drift {
  from {
    transform: translate3d(-1.4%, 0, 0) scale(1.035);
  }
  to {
    transform: translate3d(1.2%, -0.7%, 0) scale(1.07);
  }
}

@keyframes bondi-mobile-sub-float {
  from {
    opacity: 0;
    transform: translate3d(14px, 12px, 0) scale(0.96);
  }
  to {
    opacity: 0.96;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.public-page .mega-menu,
.preview-frame .mega-menu {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(-50%, -4px, 0);
  transition:
    clip-path 520ms cubic-bezier(0.55, 0, 0.1, 1),
    opacity 180ms ease,
    transform 520ms cubic-bezier(0.55, 0, 0.1, 1);
}

.public-page .mega-menu::before,
.preview-frame .mega-menu::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(90deg, rgba(43, 132, 201, 0.08), rgba(255, 255, 255, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms cubic-bezier(0.55, 0, 0.1, 1);
}

.public-page .mega-menu a,
.preview-frame .mega-menu a {
  opacity: 0;
  transform: translate3d(0, -7px, 0);
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.22, 0.74, 0.22, 1),
    color 160ms ease,
    background 160ms ease;
}

.public-page .site-nav .nav-item:hover .mega-menu,
.public-page .site-nav .nav-item:focus-within .mega-menu,
.preview-frame .site-nav .nav-item:hover .mega-menu,
.preview-frame .site-nav .nav-item:focus-within .mega-menu {
  clip-path: inset(0);
}

.public-page .site-nav .nav-item:hover .mega-menu::before,
.public-page .site-nav .nav-item:focus-within .mega-menu::before,
.preview-frame .site-nav .nav-item:hover .mega-menu::before,
.preview-frame .site-nav .nav-item:focus-within .mega-menu::before {
  transform: scaleX(1);
}

.public-page .site-nav .nav-item:hover .mega-menu a,
.public-page .site-nav .nav-item:focus-within .mega-menu a,
.preview-frame .site-nav .nav-item:hover .mega-menu a,
.preview-frame .site-nav .nav-item:focus-within .mega-menu a {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.public-page .mega-menu a:nth-child(2),
.preview-frame .mega-menu a:nth-child(2) {
  transition-delay: 34ms;
}

.public-page .mega-menu a:nth-child(3),
.preview-frame .mega-menu a:nth-child(3) {
  transition-delay: 68ms;
}

.public-page .mega-menu a:nth-child(4),
.preview-frame .mega-menu a:nth-child(4) {
  transition-delay: 94ms;
}

.public-page .mega-menu a:nth-child(5),
.preview-frame .mega-menu a:nth-child(5) {
  transition-delay: 124ms;
}

.public-page .mega-menu a:nth-child(6),
.preview-frame .mega-menu a:nth-child(6) {
  transition-delay: 148ms;
}

.public-page .hero-section,
.preview-frame .hero-section {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.public-page .hero-composite,
.preview-frame .hero-composite {
  transform-style: preserve-3d;
}

.public-page .hero-composite .hero-slide-photo-main,
.preview-frame .hero-composite .hero-slide-photo-main {
  transform: rotateX(var(--hero-tilt-x, 0deg)) rotateY(var(--hero-tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(0.22, 0.74, 0.22, 1);
}

.public-page .hero-composite .hero-slide-photo-main img,
.public-page .hero-composite .hero-slide-photo-main video,
.preview-frame .hero-composite .hero-slide-photo-main img,
.preview-frame .hero-composite .hero-slide-photo-main video {
  transform: translate3d(calc(var(--hero-depth-x, 0px) * -0.42), calc(var(--hero-depth-y, 0px) * -0.36), 0) scale(1.035);
  transition: transform 900ms cubic-bezier(0.22, 0.74, 0.22, 1);
}

@media (min-width: 861px) {
  /* ── Hero-1 (composite-center) ─────────────────────────────────────────────
     LEFT photo (content.json image) + RIGHT photo (secondaryImage) meet on a
     SANKYU-style diagonal blue band. The site keeps its existing full-height
     hero ratio; these percentages compensate the SANKYU reference angle inside
     that taller frame instead of baking blue into the image.
     · CORE BAND : top 42–78%, bottom 22–58%
     · STAGES    : left wedge veil + solid blue core + right wedge veil
     ───────────────────────────────────────────────────────────────────────── */
  .public-page .hero-composite-center .hero-slide-photo-main,
  .preview-frame .hero-composite-center .hero-slide-photo-main {
    inset: 0 0 -4px 0;
    -webkit-mask-image: none;
    mask-image: none;
    clip-path: polygon(0 0, 44.35% 0, 24.35% 100%, 0 100%);
    filter: saturate(1.04) contrast(1.02) brightness(1.01);
  }

  .public-page .hero-composite-center .hero-slide-photo-main img,
  .preview-frame .hero-composite-center .hero-slide-photo-main img {
    object-position: 30% 54%;
  }

  /* Old hero-01 left/right "panels" are gone — neutralise their pseudo-elements
     (the panel-in/idle animations below then have nothing to paint). */
  .public-page .hero-composite-center .hero-slide-photo-main::before,
  .public-page .hero-composite-center .hero-slide-photo-main::after,
  .preview-frame .hero-composite-center .hero-slide-photo-main::before,
  .preview-frame .hero-composite-center .hero-slide-photo-main::after {
    display: none;
  }

  .public-page .hero-composite-center .hero-slide-photo-sub,
  .preview-frame .hero-composite-center .hero-slide-photo-sub {
    display: block;
    position: absolute;
    inset: 0 0 -4px 0;
    z-index: 0;
    -webkit-mask-image: none;
    mask-image: none;
    clip-path: polygon(75.65% 0, 100% 0, 100% 100%, 55.65% 100%);
    filter: saturate(1.05) contrast(1.02);
  }

  .public-page .hero-composite-center .hero-slide-photo-sub img,
  .preview-frame .hero-composite-center .hero-slide-photo-sub img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
  }

  .public-page .hero-sankyu-band,
  .preview-frame .hero-sankyu-band {
    display: block;
    position: absolute;
    inset: 0 0 -4px 0;
    z-index: 2;
    pointer-events: none;
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* Reverse-direction glass line — now a real element (was ::before) so it can
     be animated independently of the core. Position/size/transform come from the
     shared `.hero-sankyu-band span` rule above. */
  .public-page .hero-sankyu-band__glint,
  .preview-frame .hero-sankyu-band__glint {
    z-index: 4;
    clip-path: polygon(47.4% 0, 55.4% 0, 70.7% 100%, 62.7% 100%);
    /* SELF-CONTAINED glass sheen — no mix-blend-mode:screen and no backdrop-filter. Those made
       the glint depend on whatever was BEHIND it, so during the intro (video → photo swap, two
       cross-fading band copies) the backdrop changed and the sheen sparkled / pulsed / vanished
       (screen disappears over bright areas). With a self-contained gradient the glint looks the
       SAME over any backdrop — like the other 5 lines — so it can't flicker. Bright soft centre
       → fully transparent edges keeps it glassy (not a flat white bar). */
    background:
      /* across-width sheen: transparent edges → bright soft centre */
      linear-gradient(100deg,
        rgba(236, 250, 255, 0) 0%,
        rgba(240, 251, 255, 0.44) 26%,
        rgba(252, 254, 255, 0.92) 50%,
        rgba(240, 251, 255, 0.44) 74%,
        rgba(232, 249, 255, 0) 100%),
      /* faint vertical glass tint for depth */
      linear-gradient(180deg,
        rgba(206, 242, 255, 0.16) 0%,
        rgba(168, 230, 252, 0.30) 50%,
        rgba(240, 252, 255, 0.20) 100%);
    opacity: 0.7;
  }

  /* Every band line is an independent element. Each is driven by its own
     --line-* custom properties so JS can move / spread / tilt any single line
     for intro→hero hand-off and slide transitions; transition handles the easing. */
  .public-page .hero-sankyu-band span,
  .preview-frame .hero-sankyu-band span {
    position: absolute;
    inset: -1px 0 -5px 0;
    display: block;
    transform-origin: 50% 50%;
    transform:
      translate3d(var(--line-x, 0), var(--line-y, 0), 0)
      scaleX(var(--line-sx, 1))
      scaleY(var(--line-sy, 1))
      rotate(var(--line-rot, 0deg));
    transition:
      transform 1100ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 760ms ease;
    /* clip-path included so the intro-emerge clip animations can run on the
       compositor (no per-frame main-thread repaint of 6 near-fullscreen layers
       over the playing video = the hand-off jank). Zero visual difference. */
    will-change: transform, opacity, clip-path;
  }

  .public-page .hero-sankyu-band__core,
  .preview-frame .hero-sankyu-band__core {
    clip-path: polygon(44% 0, 76% 0, 56% 100%, 24% 100%);
    background:
      /* cross-band depth: deep navy on the thick edges + a small cyan core glint */
      linear-gradient(100deg,
        rgba(0, 24, 68, 0.7) 0%,
        rgba(0, 30, 80, 0.5) 12%,
        rgba(0, 54, 122, 0.2) 30%,
        rgba(110, 208, 240, 0.14) 49%,
        rgba(140, 226, 248, 0.19) 52%,
        rgba(0, 54, 122, 0.2) 70%,
        rgba(0, 30, 80, 0.5) 88%,
        rgba(0, 20, 62, 0.72) 100%),
      /* soft glass glow, upper-centre (subtle, kept dark) */
      radial-gradient(ellipse 70% 54% at 50% 36%,
        rgba(132, 220, 248, 0.22) 0%,
        rgba(30, 160, 214, 0.12) 44%,
        rgba(0, 74, 146, 0) 78%),
      /* base column: very deep navy on top → medium blue at the bottom (darker overall) */
      linear-gradient(180deg,
        rgb(0, 34, 92) 0%,
        rgb(0, 46, 112) 15%,
        rgb(0, 64, 140) 34%,
        rgb(0, 86, 164) 54%,
        rgb(4, 110, 184) 72%,
        rgb(10, 132, 200) 88%,
        rgb(14, 146, 208) 100%);
  }

  .public-page .hero-sankyu-band__veil-left,
  .preview-frame .hero-sankyu-band__veil-left {
    clip-path: polygon(26.4% 0, 44.7% 0, 24.7% 100%, 19.1% 100%);
    background:
      linear-gradient(100deg, rgba(150, 210, 240, 0) 0%, rgba(150, 210, 240, 0.06) 52%, rgba(150, 210, 240, 0) 100%),
      linear-gradient(90deg, rgba(0, 110, 186, 0.04) 0%, rgba(0, 116, 192, 0.24) 100%),
      linear-gradient(180deg, rgba(0, 86, 162, 0.24) 0%, rgba(6, 140, 206, 0.24) 56%, rgba(30, 178, 228, 0.16) 100%);
    opacity: 1;
  }

  .public-page .hero-sankyu-band__veil-right,
  .preview-frame .hero-sankyu-band__veil-right {
    clip-path: polygon(75.3% 0, 81.2% 0, 70.8% 100%, 55.3% 100%);
    background:
      linear-gradient(100deg, rgba(150, 210, 240, 0) 0%, rgba(150, 210, 240, 0.05) 52%, rgba(150, 210, 240, 0) 100%),
      linear-gradient(90deg, rgba(0, 116, 192, 0.24) 0%, rgba(0, 110, 186, 0.04) 100%),
      linear-gradient(180deg, rgba(0, 86, 162, 0.16) 0%, rgba(6, 140, 206, 0.2) 56%, rgba(30, 178, 228, 0.12) 100%);
    opacity: 1;
  }

  /* Thin rim lines that hug the two diagonal edges of the core band. Kept darker
     and more translucent than the white centre glint (no screen blend), so the
     two side lines read as quiet blue edges rather than bright white. Each is its
     own element so it can be animated independently. */
  .public-page .hero-sankyu-band__edge,
  .preview-frame .hero-sankyu-band__edge {
    z-index: 3;
    opacity: 0.6;
  }

  .public-page .hero-sankyu-band__edge-left,
  .preview-frame .hero-sankyu-band__edge-left {
    clip-path: polygon(42.6% 0, 45.4% 0, 25.4% 100%, 22.6% 100%);
    background:
      linear-gradient(100deg, rgba(0, 44, 104, 0) 0%, rgba(60, 132, 188, 0.34) 50%, rgba(0, 40, 96, 0) 100%),
      linear-gradient(180deg, rgba(0, 52, 118, 0.32) 0%, rgba(26, 110, 174, 0.3) 52%, rgba(0, 44, 108, 0.24) 100%);
  }

  .public-page .hero-sankyu-band__edge-right,
  .preview-frame .hero-sankyu-band__edge-right {
    clip-path: polygon(74.6% 0, 77.4% 0, 57.4% 100%, 54.6% 100%);
    background:
      linear-gradient(100deg, rgba(0, 40, 96, 0) 0%, rgba(60, 132, 188, 0.34) 50%, rgba(0, 44, 104, 0) 100%),
      linear-gradient(180deg, rgba(0, 52, 118, 0.32) 0%, rgba(26, 110, 174, 0.3) 52%, rgba(0, 44, 108, 0.24) 100%);
  }

  /* ── Motion hooks (no auto animation) ──────────────────────────────────────
     The band shows fully settled by default — nothing animates on its own. Each
     line is its own element and reads its own custom props, so later JS can move
     or animate any single line independently (and the shared `transition` above
     eases it):
       --line-x / --line-y : translate (independent drift, slide L/R)
       --line-sx           : scaleX  (stretch / spread left↔right)
       --line-sy           : scaleY  (stretch vertically)
       --line-rot          : rotate
     e.g. el.style.setProperty('--line-sx', '0') collapses a line to its centre. */

  /* Hero-1 title sits a touch smaller than the other composite slides. */
  .public-page .hero-composite-center .hero-slide-copy h1,
  .preview-frame .hero-composite-center .hero-slide-copy h1 {
    font-size: 2.45rem;
  }

  /* Keep hero-1 photos STATIC — no float / parallax / 3D tilt / scale, so the
     two images don't drift after the intro fade settles. */
  .public-page .hero-composite-center .hero-slide-photo-main,
  .public-page .hero-composite-center .hero-slide-photo-sub,
  .public-page .hero-composite-center .hero-slide-photo-main img,
  .public-page .hero-composite-center .hero-slide-photo-sub img,
  .preview-frame .hero-composite-center .hero-slide-photo-main,
  .preview-frame .hero-composite-center .hero-slide-photo-sub,
  .preview-frame .hero-composite-center .hero-slide-photo-main img,
  .preview-frame .hero-composite-center .hero-slide-photo-sub img {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  .public-page .hero-composite-center .hero-slide-photo-main img,
  .preview-frame .hero-composite-center .hero-slide-photo-main img {
    transform: translate3d(0, 1.5%, 0) scale(1.055) !important;
    transform-origin: 30% 54%;
  }
}

.public-page .hero-sankyu-band,
.preview-frame .hero-sankyu-band {
  display: none;
}

@media (min-width: 861px) {
  .public-page .hero-sankyu-band,
  .preview-frame .hero-sankyu-band {
    display: block;
  }
}

.public-page .hero-composite::after,
.preview-frame .hero-composite::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent 22%, rgba(255, 255, 255, 0.34) 48%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
}

.public-page .hero-composite-center::after,
.preview-frame .hero-composite-center::after {
  /* Diagonal "lines" band over the seam (115deg). No clip-path / mask / backdrop
     — just layered linear-gradients, so the diagonal is GPU anti-aliased and
     smooth (kills the jaggies). Dense centre + thin faint flanking lines on each
     side, echoing the old baked band. */
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  opacity: 1;
  border-radius: 0;
  box-shadow: none;
  /* Crisp diagonal band (SANKYU-style): hard clip edges where the photos meet
     it (no blur), filled with a strong blue gradient (deep navy → bright cyan).
     Thin lighter accent lines just inside each edge. */
  clip-path: polygon(52% 0, 72% 0, 64% 100%, 44% 100%);
  background:
    /* SANKYU-style thin light-cyan accents inside the edges (left brighter) */
    linear-gradient(115deg, transparent 52.2%, rgba(182, 237, 255, 0.55) 53.1%, transparent 54.2%, transparent 68.8%, rgba(182, 237, 255, 0.3) 69.8%, transparent 70.8%),
    /* SANKYU sampled blue: bright corporate blue, gentle vertical gradient (deeper top → lighter bottom) */
    linear-gradient(180deg, rgb(0, 127, 203) 0%, rgb(5, 147, 213) 52%, rgb(10, 167, 227) 100%);
  filter: none;
  mix-blend-mode: normal;
  transform-origin: 50% 50%;
}

@media (min-width: 861px) {
  .public-page .hero-composite-center::after,
  .preview-frame .hero-composite-center::after {
    display: none;
  }
}

.public-page .hero-composite-right::after,
.preview-frame .hero-composite-right::after {
  background:
    radial-gradient(circle at 82% 38%, transparent 0 16%, rgba(255, 255, 255, 0.18) 16.2% 16.7%, transparent 17% 100%),
    radial-gradient(circle at 82% 38%, transparent 0 26%, rgba(255, 255, 255, 0.1) 26.2% 26.5%, transparent 27% 100%),
    linear-gradient(116deg, transparent 0 50%, rgba(92, 198, 236, 0.18) 58%, rgba(255, 255, 255, 0.16) 60%, transparent 68%),
    linear-gradient(18deg, transparent 0 62%, rgba(255, 255, 255, 0.12) 64%, transparent 70%);
  transform-origin: 82% 38%;
}

.public-page .hero-composite-left::after,
.preview-frame .hero-composite-left::after {
  background:
    radial-gradient(circle at 25% 48%, transparent 0 21%, rgba(255, 255, 255, 0.16) 21.2% 21.55%, transparent 21.8% 100%),
    radial-gradient(circle at 25% 48%, transparent 0 34%, rgba(255, 255, 255, 0.08) 34.2% 34.45%, transparent 34.8% 100%),
    linear-gradient(106deg, transparent 0 18%, rgba(38, 168, 202, 0.14) 24%, transparent 33%),
    linear-gradient(92deg, rgba(255, 255, 255, 0.08), transparent 39%);
  clip-path: polygon(0 0, 58% 0, 48% 100%, 0 100%);
  transform-origin: 25% 48%;
}

.public-page .hero-composite.active::after,
.preview-frame .hero-composite.active::after {
  animation: bondi-surface-sweep 900ms cubic-bezier(0.55, 0, 0.1, 1) both;
}

.public-page .hero-composite .hero-slide-copy h1,
.public-page .hero-composite .hero-slide-copy p,
.preview-frame .hero-composite .hero-slide-copy h1,
.preview-frame .hero-composite .hero-slide-copy p {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
}

.public-page .hero-composite.active .hero-slide-copy h1,
.preview-frame .hero-composite.active .hero-slide-copy h1 {
  animation: bondi-copy-mask 560ms cubic-bezier(0.55, 0, 0.1, 1) 130ms both;
}

.public-page .hero-composite.active .hero-slide-copy p,
.preview-frame .hero-composite.active .hero-slide-copy p {
  animation: bondi-copy-mask 560ms cubic-bezier(0.55, 0, 0.1, 1) 230ms both;
}

.public-page .service-section.in-view .service-tile,
.preview-frame .service-section.in-view .service-tile,
.public-page .pickup-section.in-view .pickup-card,
.preview-frame .pickup-section.in-view .pickup-card,
.public-page .news-section.in-view .news-item,
.preview-frame .news-section.in-view .news-item {
  animation: bondi-editorial-rise 620ms cubic-bezier(0.65, 0, 0.45, 1) both;
  animation-delay: calc(var(--motion-order, 0) * 36ms);
}

.public-page .service-tile,
.preview-frame .service-tile,
.public-page .pickup-card,
.preview-frame .pickup-card {
  position: relative;
  isolation: isolate;
}

.public-page .service-tile::before,
.preview-frame .service-tile::before,
.public-page .pickup-card::before,
.preview-frame .pickup-card::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background: linear-gradient(125deg, rgba(43, 132, 201, 0.16), rgba(43, 132, 201, 0));
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path 420ms cubic-bezier(0.55, 0, 0.1, 1), opacity 180ms ease;
}

.public-page .service-tile > span,
.public-page .service-tile img,
.public-page .pickup-card img,
.public-page .pickup-card div,
.preview-frame .service-tile > span,
.preview-frame .service-tile img,
.preview-frame .pickup-card img,
.preview-frame .pickup-card div {
  position: relative;
  z-index: 2;
}

@media (pointer: fine) {
  .public-page .service-tile:hover::before,
  .public-page .service-tile:focus-visible::before,
  .public-page .pickup-card:hover::before,
  .public-page .pickup-card:focus-visible::before,
  .preview-frame .service-tile:hover::before,
  .preview-frame .service-tile:focus-visible::before,
  .preview-frame .pickup-card:hover::before,
  .preview-frame .pickup-card:focus-visible::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 72%);
  }

  .public-page .service-tile:hover,
  .public-page .service-tile:focus-visible,
  .preview-frame .service-tile:hover,
  .preview-frame .service-tile:focus-visible {
    transform: translate3d(0, -4px, 0) scale(1.012) !important;
  }

  .public-page .pickup-card:hover,
  .public-page .pickup-card:focus-visible,
  .preview-frame .pickup-card:hover,
  .preview-frame .pickup-card:focus-visible {
    transform: perspective(900px) translate3d(0, -5px, 24px) rotateX(1.2deg) !important;
    box-shadow: 0 18px 36px rgba(15, 35, 48, 0.16);
  }

  .public-page .pickup-card:hover img,
  .public-page .pickup-card:focus-visible img,
  .preview-frame .pickup-card:hover img,
  .preview-frame .pickup-card:focus-visible img {
    transform: translate3d(0, -4px, 0) scale(1.065);
  }
}

.public-page .route-section a,
.preview-frame .route-section a {
  isolation: isolate;
  overflow: hidden;
  transform-style: preserve-3d;
}

.public-page .route-section a::before,
.preview-frame .route-section a::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0 34%, rgba(43, 132, 201, 0.28) 48%, transparent 62% 100%);
  opacity: 0;
  transform: translate3d(-22%, 0, 0);
  transition: opacity 180ms ease, transform 420ms cubic-bezier(0.55, 0, 0.1, 1);
}

.public-page .route-section strong,
.public-page .route-section a > span,
.preview-frame .route-section strong,
.preview-frame .route-section a > span {
  transform: translate3d(0, 0, 28px);
  transition: transform 180ms ease;
}

@media (pointer: fine) {
  .public-page .route-section a:hover,
  .public-page .route-section a:focus-visible,
  .preview-frame .route-section a:hover,
  .preview-frame .route-section a:focus-visible {
    transform: perspective(1000px) translate3d(0, -4px, 0) rotateX(1deg);
  }

  .public-page .route-section a:hover::before,
  .public-page .route-section a:focus-visible::before,
  .preview-frame .route-section a:hover::before,
  .preview-frame .route-section a:focus-visible::before {
    opacity: 1;
    transform: translate3d(12%, 0, 0);
  }

  .public-page .route-section a:hover strong,
  .public-page .route-section a:hover > span,
  .public-page .route-section a:focus-visible strong,
  .public-page .route-section a:focus-visible > span,
  .preview-frame .route-section a:hover strong,
  .preview-frame .route-section a:hover > span,
  .preview-frame .route-section a:focus-visible strong,
  .preview-frame .route-section a:focus-visible > span {
    transform: translate3d(4px, -2px, 28px);
  }
}

.public-page .news-item,
.preview-frame .news-item {
  position: relative;
  overflow: hidden;
}

.public-page .news-item::after,
.preview-frame .news-item::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  content: "";
  background: #2b84c9;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(0.55, 0, 0.1, 1);
}

.public-page .news-item:hover::after,
.public-page .news-item:focus-within::after,
.preview-frame .news-item:hover::after,
.preview-frame .news-item:focus-within::after {
  transform: scaleX(1);
}

@supports (animation-timeline: view()) {
  @keyframes bondi-footer-lift {
    from {
      opacity: 0.92;
      transform: translate3d(0, 22px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  .public-page .footer-banners a,
  .preview-frame .footer-banners a {
    animation: bondi-footer-lift linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
}

@media (max-width: 860px), (pointer: coarse) {
  .public-page .hero-composite .hero-slide-photo-main,
  .preview-frame .hero-composite .hero-slide-photo-main,
  .public-page .hero-composite .hero-slide-photo-main img,
  .public-page .hero-composite .hero-slide-photo-main video,
  .preview-frame .hero-composite .hero-slide-photo-main img,
  .preview-frame .hero-composite .hero-slide-photo-main video {
    transform: none;
  }

  .public-page .service-section.in-view .service-tile,
  .preview-frame .service-section.in-view .service-tile,
  .public-page .pickup-section.in-view .pickup-card,
  .preview-frame .pickup-section.in-view .pickup-card,
  .public-page .news-section.in-view .news-item,
  .preview-frame .news-section.in-view .news-item {
    animation-delay: 0ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-page .mega-menu,
  .public-page .mega-menu a,
  .public-page .hero-composite .hero-slide-photo-main,
  .public-page .hero-composite .hero-slide-photo-main img,
  .public-page .hero-composite::after,
  .public-page .hero-composite .hero-slide-copy h1,
  .public-page .hero-composite .hero-slide-copy p,
  .public-page .service-section.in-view .service-tile,
  .public-page .pickup-section.in-view .pickup-card,
  .public-page .news-section.in-view .news-item,
  .public-page .footer-banners a,
  .preview-frame .mega-menu,
  .preview-frame .mega-menu a,
  .preview-frame .hero-composite .hero-slide-photo-main,
  .preview-frame .hero-composite .hero-slide-photo-main img,
  .preview-frame .hero-composite::after,
  .preview-frame .hero-composite .hero-slide-copy h1,
  .preview-frame .hero-composite .hero-slide-copy p,
  .preview-frame .service-section.in-view .service-tile,
  .preview-frame .pickup-section.in-view .pickup-card,
  .preview-frame .news-section.in-view .news-item,
  .preview-frame .footer-banners a {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition-duration: 0.01ms !important;
  }

  .public-page .mega-menu,
  .preview-frame .mega-menu {
    clip-path: inset(0 0 100% 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(-50%, -4px, 0) !important;
  }

  .public-page .site-nav .nav-item:hover .mega-menu,
  .public-page .site-nav .nav-item:focus-within .mega-menu,
  .preview-frame .site-nav .nav-item:hover .mega-menu,
  .preview-frame .site-nav .nav-item:focus-within .mega-menu {
    clip-path: inset(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
  }

  .public-page .mega-menu a,
  .preview-frame .mega-menu a {
    opacity: 1 !important;
    transform: none !important;
  }

  .public-page .hero-composite::after,
  .preview-frame .hero-composite::after {
    display: none !important;
    opacity: 0 !important;
  }

  @media (max-width: 860px), (pointer: coarse) {
    .public-page .mega-menu,
    .preview-frame .mega-menu {
      position: static !important;
      grid-template-columns: 1fr !important;
      min-width: 0 !important;
      padding: 0 0 8px 12px !important;
      clip-path: none !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      transform: none !important;
      box-shadow: none !important;
    }
  }
}

/* Final footer/readability override: keep this after all Sankyu-alignment rules. */
.public-page.is-booting #app,
.public-page.is-booting .footer {
  opacity: 0;
  visibility: hidden;
}

.public-page #app,
.public-page .footer {
  opacity: 1;
  transition: opacity 180ms ease;
}

.public-page .footer,
.preview-frame .footer {
  color: #12202a;
  background: linear-gradient(180deg, #f8faf9 0%, #e8efee 100%);
  border-top: 1px solid rgba(22, 42, 52, 0.12);
}

.public-page .footer-main,
.public-page .footer-blue,
.preview-frame .footer-main,
.preview-frame .footer-blue {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(320px, 1.5fr);
  align-items: center;
  gap: 32px;
  padding: 34px max(24px, calc((100% - 1180px) / 2));
  color: #12202a;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(237, 244, 242, 0.92)),
    radial-gradient(circle at 8% 0%, rgba(194, 122, 70, 0.16), transparent 36%);
}

.public-page .footer-brand,
.preview-frame .footer-brand {
  display: grid;
  gap: 8px;
}

.public-page .footer-logo,
.preview-frame .footer-logo {
  display: block;
  width: auto;
  height: 78px;
  max-width: 210px;
  object-fit: contain;
}

.public-page .footer-brand strong,
.preview-frame .footer-brand strong,
.public-page .footer-blue strong,
.preview-frame .footer-blue strong {
  font-size: clamp(1.15rem, 1.8vw, 1.8rem);
  line-height: 1;
}

.public-page .footer-brand p,
.preview-frame .footer-brand p {
  margin: 0;
  color: #53616a;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.7;
}

.public-page .footer-links,
.preview-frame .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.public-page .footer-links a,
.preview-frame .footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  color: #172632;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(20, 42, 54, 0.14);
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 900;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.public-page .footer-links a:hover,
.public-page .footer-links a:focus-visible,
.preview-frame .footer-links a:hover,
.preview-frame .footer-links a:focus-visible {
  color: #0d5f87;
  background: #fff;
  border-color: rgba(13, 95, 135, 0.34);
  transform: translate3d(0, -2px, 0);
}

.public-page .footer-banners,
.preview-frame .footer-banners {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  padding: 0 max(18px, calc((100% - 1280px) / 2)) 18px;
  background: linear-gradient(180deg, rgba(238, 244, 243, 0.95), #e8efee);
}

.public-page .footer-banners a,
.preview-frame .footer-banners a {
  min-height: 132px;
  margin: 0;
  color: #fff;
  background: #142330;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.public-page .footer-banners img,
.preview-frame .footer-banners img {
  opacity: 0.72;
  filter: saturate(0.88) contrast(1.04);
  transform: scale(1.02);
}

.public-page .footer-banners a::before,
.preview-frame .footer-banners a::before {
  background:
    linear-gradient(115deg, rgba(7, 16, 24, 0.84), rgba(7, 16, 24, 0.42) 58%, rgba(194, 122, 70, 0.18)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0));
}

.public-page .footer-banners a > span,
.preview-frame .footer-banners a > span {
  padding: 0 18px;
  color: #fff;
  font-size: 0.93rem;
  letter-spacing: 0;
}

.public-page .footer-banners a:hover img,
.preview-frame .footer-banners a:hover img {
  opacity: 0.9;
  transform: scale(1.075);
}

.public-page .footer-legal,
.preview-frame .footer-legal {
  gap: 10px 26px;
  padding: 22px 24px;
  color: #dfe9e9;
  background: linear-gradient(90deg, #0b1720, #102b39 58%, #0b1720);
  font-size: 0.8rem;
}

.public-page .footer-copy,
.preview-frame .footer-copy {
  flex-basis: 100%;
  color: #f4f7f6;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  opacity: 0.72;
}

.public-page .footer-legal a,
.preview-frame .footer-legal a {
  color: inherit;
  opacity: 0.9;
}

.public-page .footer-legal a:hover,
.public-page .footer-legal a:focus-visible,
.preview-frame .footer-legal a:hover,
.preview-frame .footer-legal a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 860px) {
  .public-page .footer-main,
  .public-page .footer-blue,
  .preview-frame .footer-main,
  .preview-frame .footer-blue {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 22px;
  }

  .public-page .footer-links,
  .preview-frame .footer-links {
    justify-content: flex-start;
  }

  .public-page .footer-banners,
  .preview-frame .footer-banners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 12px 16px;
  }

  .public-page .footer-banners a,
  .preview-frame .footer-banners a {
    min-height: 104px;
  }

  .public-page .footer-legal,
  .preview-frame .footer-legal {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px 22px;
    padding: 28px 24px;
  }

  .public-page .footer-copy,
  .preview-frame .footer-copy {
    text-align: left;
  }
}

/* Final hero motion tuning: slower slide travel and calmer text fades. */
@media (prefers-reduced-motion: no-preference) {
  .public-page .hero-media,
  .preview-frame .hero-media {
    transition: transform var(--hero-slide-duration, 1520ms) cubic-bezier(0.62, 0, 0.18, 1);
  }

  .public-page .hero-composite .hero-slide-copy,
  .preview-frame .hero-composite .hero-slide-copy {
    transition: opacity 920ms cubic-bezier(0.22, 0.74, 0.22, 1) 220ms,
      transform 980ms cubic-bezier(0.22, 0.74, 0.22, 1) 220ms;
  }

  .public-page .hero-composite .hero-slide-photo-main,
  .preview-frame .hero-composite .hero-slide-photo-main,
  .public-page .hero-composite .hero-slide-photo-main img,
  .public-page .hero-composite .hero-slide-photo-main video,
  .preview-frame .hero-composite .hero-slide-photo-main img,
  .preview-frame .hero-composite .hero-slide-photo-main video {
    transition-duration: 1320ms;
    transition-timing-function: cubic-bezier(0.22, 0.74, 0.22, 1);
  }

  .public-page .hero-composite.active::after,
  .preview-frame .hero-composite.active::after {
    animation-duration: 1320ms;
    animation-timing-function: cubic-bezier(0.62, 0, 0.18, 1);
  }

  .public-page .hero-composite.active .hero-slide-photo-main,
  .preview-frame .hero-composite.active .hero-slide-photo-main {
    animation: bondi-photo-field-in 1480ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .public-page .hero-composite-center.active .hero-slide-photo-main,
  .preview-frame .hero-composite-center.active .hero-slide-photo-main {
    animation: none;
  }

  .public-page .hero-composite-center.active .hero-sankyu-band__core,
  .preview-frame .hero-composite-center.active .hero-sankyu-band__core {
    animation: none;
  }

  .public-page .hero-composite-center.active .hero-sankyu-band__veil,
  .preview-frame .hero-composite-center.active .hero-sankyu-band__veil {
    animation: none;
  }

  .public-page .hero-composite-center.active .hero-sankyu-band__edge,
  .preview-frame .hero-composite-center.active .hero-sankyu-band__edge {
    animation: none;
  }

  .public-page .hero-composite-center.active .hero-sankyu-band__glint,
  .preview-frame .hero-composite-center.active .hero-sankyu-band__glint {
    animation: none;
  }

  .public-page .hero-composite.active .hero-slide-photo-main img,
  .preview-frame .hero-composite.active .hero-slide-photo-main img {
    animation: bondi-photo-idle 18000ms cubic-bezier(0.45, 0, 0.25, 1) 1480ms infinite alternate;
  }

  .public-page .hero-composite-center.active .hero-slide-photo-main::before,
  .preview-frame .hero-composite-center.active .hero-slide-photo-main::before {
    animation:
      bondi-left-panel-in 1360ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both,
      bondi-left-panel-idle 17000ms cubic-bezier(0.45, 0, 0.25, 1) 1540ms infinite alternate;
  }

  .public-page .hero-composite-center.active .hero-slide-photo-main::after,
  .preview-frame .hero-composite-center.active .hero-slide-photo-main::after {
    animation:
      bondi-right-panel-in 1420ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both,
      bondi-right-panel-idle 18000ms cubic-bezier(0.45, 0, 0.25, 1) 1720ms infinite alternate;
  }

  .public-page .hero-composite-center.active::after,
  .preview-frame .hero-composite-center.active::after {
    /* Static band (corporate, baked-in look) — no float/transform, so no jaggies
       after the intro settles. */
    animation: none;
  }

  .public-page .hero-composite-right.active::after,
  .preview-frame .hero-composite-right.active::after {
    animation:
      bondi-blue-rib-in 1640ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both,
      bondi-orbit-idle 19000ms cubic-bezier(0.45, 0, 0.25, 1) 1880ms infinite alternate;
  }

  .public-page .hero-composite-left.active::after,
  .preview-frame .hero-composite-left.active::after {
    animation:
      bondi-dark-plate-in 1720ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both,
      bondi-dark-map-idle 21000ms cubic-bezier(0.45, 0, 0.25, 1) 1960ms infinite alternate;
  }

  .public-page .hero-composite.active .hero-slide-copy h1,
  .preview-frame .hero-composite.active .hero-slide-copy h1 {
    animation: bondi-copy-mask 1080ms cubic-bezier(0.62, 0, 0.18, 1) 260ms both;
  }

  .public-page .hero-composite.active .hero-slide-copy p,
  .preview-frame .hero-composite.active .hero-slide-copy p {
    animation: bondi-copy-mask 1080ms cubic-bezier(0.62, 0, 0.18, 1) 430ms both;
  }

  .public-page .hero-slide.is-copy-exiting .hero-slide-copy h1,
  .preview-frame .hero-slide.is-copy-exiting .hero-slide-copy h1 {
    animation: bondi-copy-fade-out 860ms cubic-bezier(0.22, 0.74, 0.22, 1) both !important;
  }

  .public-page .hero-slide.is-copy-exiting .hero-slide-copy p,
  .preview-frame .hero-slide.is-copy-exiting .hero-slide-copy p {
    animation: bondi-copy-fade-out 920ms cubic-bezier(0.22, 0.74, 0.22, 1) 70ms both !important;
  }

  .public-page .hero-slide.skip-copy-animation .hero-slide-copy h1,
  .public-page .hero-slide.skip-copy-animation .hero-slide-copy p,
  .preview-frame .hero-slide.skip-copy-animation .hero-slide-copy h1,
  .preview-frame .hero-slide.skip-copy-animation .hero-slide-copy p,
  .public-page .hero-section.is-snap-reset .hero-composite.active .hero-slide-copy h1,
  .public-page .hero-section.is-snap-reset .hero-composite.active .hero-slide-copy p,
  .preview-frame .hero-section.is-snap-reset .hero-composite.active .hero-slide-copy h1,
  .preview-frame .hero-section.is-snap-reset .hero-composite.active .hero-slide-copy p {
    animation: none !important;
    clip-path: inset(0) !important;
    opacity: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-page .hero-media,
  .preview-frame .hero-media {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .public-page .hero-composite .hero-slide-copy,
  .preview-frame .hero-composite .hero-slide-copy,
  .public-page .hero-composite .hero-slide-photo-main,
  .preview-frame .hero-composite .hero-slide-photo-main,
  .public-page .hero-composite .hero-slide-photo-main img,
  .preview-frame .hero-composite .hero-slide-photo-main img,
  .public-page .hero-composite-center .hero-sankyu-band span,
  .preview-frame .hero-composite-center .hero-sankyu-band span,
  .public-page .hero-composite.active::after,
  .preview-frame .hero-composite.active::after,
  .public-page .hero-composite.active .hero-slide-copy h1,
  .public-page .hero-composite.active .hero-slide-copy p,
  .preview-frame .hero-composite.active .hero-slide-copy h1,
  .preview-frame .hero-composite.active .hero-slide-copy p {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition-duration: 0.01ms !important;
  }

  .public-page .hero-composite-center.active::after,
  .preview-frame .hero-composite-center.active::after {
    opacity: 0.18 !important;
  }

  .public-page .hero-composite-right.active::after,
  .preview-frame .hero-composite-right.active::after,
  .public-page .hero-composite-left.active::after,
  .preview-frame .hero-composite-left.active::after {
    opacity: 0.18 !important;
  }
}

/* News releases are text-only for simple posting. */
.public-page .news-item.no-image,
.preview-frame .news-item.no-image {
  display: block;
  padding: 18px 0;
}

.public-page .news-item .news-body,
.preview-frame .news-item .news-body {
  min-width: 0;
  padding: 0;
}

.public-page .contact-form > input[name="website"],
.preview-frame .contact-form > input[name="website"] {
  display: none !important;
}

/* Mobile polish and calmer pointer interactions. */
.public-page .service-tile,
.preview-frame .service-tile {
  position: relative;
  transition:
    box-shadow 900ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 760ms ease,
    background-color 760ms ease;
}

.public-page .service-tile::before,
.preview-frame .service-tile::before {
  clip-path: none;
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-page .pickup-card::before,
.preview-frame .pickup-card::before {
  transition:
    clip-path 560ms cubic-bezier(0.55, 0, 0.1, 1),
    opacity 360ms ease;
}

.public-page .service-tile > span,
.preview-frame .service-tile > span {
  display: grid;
  position: absolute;
  inset: 0 98px 0 0;
  z-index: 3;
  min-width: 0;
  min-height: 100%;
  place-items: center;
  padding: 0 12px;
  text-align: center;
  transition:
    color 780ms ease,
    opacity 780ms ease;
}

.public-page .service-tile img,
.preview-frame .service-tile img {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  transition:
    filter 900ms ease,
    opacity 900ms ease;
}

@media (pointer: fine) {
  .public-page .site-nav a,
  .public-page .header-tools a,
  .public-page .header-cta,
  .public-page .footer-banners a,
  .public-page .footer-links a,
  .public-page .footer-legal a,
  .public-page .news-item,
  .preview-frame .site-nav a,
  .preview-frame .header-tools a,
  .preview-frame .header-cta,
  .preview-frame .footer-banners a,
  .preview-frame .footer-links a,
  .preview-frame .footer-legal a,
  .preview-frame .news-item {
    transition:
      color 320ms ease,
      background-color 320ms ease,
      border-color 320ms ease,
      box-shadow 360ms cubic-bezier(0.22, 0.74, 0.22, 1),
      transform 360ms cubic-bezier(0.22, 0.74, 0.22, 1);
  }

  .public-page .service-tile:hover,
  .public-page .service-tile:focus-visible,
  .preview-frame .service-tile:hover,
  .preview-frame .service-tile:focus-visible {
    transform: none !important;
    box-shadow: 0 18px 34px rgba(24, 42, 60, 0.1);
  }

  .public-page .service-tile:hover::before,
  .public-page .service-tile:focus-visible::before,
  .preview-frame .service-tile:hover::before,
  .preview-frame .service-tile:focus-visible::before {
    clip-path: none;
    opacity: 1;
    transform: none;
  }

  .public-page .service-tile:hover span,
  .public-page .service-tile:focus-visible span,
  .preview-frame .service-tile:hover span,
  .preview-frame .service-tile:focus-visible span {
    color: #0b5f91;
    transform: none;
  }

  .public-page .service-tile:hover img,
  .public-page .service-tile:focus-visible img,
  .preview-frame .service-tile:hover img,
  .preview-frame .service-tile:focus-visible img {
    filter: saturate(1.04) contrast(1.03);
  }
}

@media (max-width: 860px) {
  .public-page,
  .preview-frame,
  .public-page .site-shell {
    max-width: 100%;
    overflow-x: clip;
  }

  .public-page .site-header,
  .preview-frame .site-header {
    min-height: 58px;
    padding: 0 12px;
  }

  .public-page .brand,
  .preview-frame .brand {
    min-width: 0;
  }

  .public-page .brand-logo,
  .preview-frame .brand-logo {
    width: auto;
    max-width: min(148px, 48vw);
    height: 42px;
    object-fit: contain;
  }

  .public-page .nav-toggle,
  .preview-frame .nav-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-radius: 6px;
  }

  .public-page .site-nav,
  .preview-frame .site-nav {
    top: 58px;
    left: 10px;
    right: 10px;
    max-height: min(72svh, 560px);
  }

  .public-page .site-nav a,
  .preview-frame .site-nav a,
  .public-page .site-nav button,
  .preview-frame .site-nav button {
    min-height: 46px;
  }

  .public-page .hero-dots button,
  .preview-frame .hero-dots button {
    width: 44px;
    height: 44px;
  }

  .public-page .hero-dots,
  .preview-frame .hero-dots {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 46px;
    justify-content: center;
    padding: 0;
    transform: none;
  }

  .public-page .hero-dots button::before,
  .preview-frame .hero-dots button::before {
    width: 8px;
    height: 8px;
  }

  .public-page .hero-section,
  .preview-frame .hero-section {
    height: 100vh;
    height: 100svh;
    min-height: 100svh;
  }

  .public-page .hero-media,
  .preview-frame .hero-media {
    inset: 0;
  }

  .public-page .hero-slide,
  .preview-frame .hero-slide {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .public-page .hero-composite::after,
  .preview-frame .hero-composite::after {
    z-index: 2;
    display: block;
    background:
      linear-gradient(118deg, transparent 0 27%, rgba(42, 152, 211, 0.36) 42%, rgba(33, 131, 201, 0.58) 55%, rgba(255, 255, 255, 0.16) 64%, transparent 77% 100%),
      radial-gradient(ellipse at 70% 28%, rgba(255, 255, 255, 0.18), transparent 42%);
    mix-blend-mode: screen;
    opacity: 0.46;
    animation: none;
  }

  .public-page .hero-composite .hero-slide-photo-sub,
  .preview-frame .hero-composite .hero-slide-photo-sub {
    position: absolute;
    top: 84px;
    right: 18px;
    bottom: auto;
    left: auto;
    z-index: 2;
    display: block;
    width: min(34vw, 136px);
    height: min(24vw, 92px);
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 18px 44px rgba(0, 16, 28, 0.28);
    opacity: 0;
    clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
    transform: translate3d(14px, 12px, 0) scale(0.96);
  }

  .public-page .hero-composite .hero-slide-photo-sub img,
  .preview-frame .hero-composite .hero-slide-photo-sub img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
  }

  .public-page .hero-composite.active .hero-slide-photo-sub,
  .preview-frame .hero-composite.active .hero-slide-photo-sub {
    animation: bondi-mobile-sub-float 1080ms cubic-bezier(0.62, 0, 0.18, 1) 360ms both;
  }

  .public-page .hero-composite.active .hero-slide-photo-main img,
  .preview-frame .hero-composite.active .hero-slide-photo-main img {
    animation: bondi-mobile-hero-drift 12800ms cubic-bezier(0.33, 0, 0.16, 1) both;
  }

  .public-page .hero-layout-1 .hero-slide-copy,
  .public-page .hero-layout-2 .hero-slide-copy,
  .public-page .hero-layout-3 .hero-slide-copy,
  .public-page .hero-composite .hero-slide-copy,
  .preview-frame .hero-layout-1 .hero-slide-copy,
  .preview-frame .hero-layout-2 .hero-slide-copy,
  .preview-frame .hero-layout-3 .hero-slide-copy,
  .preview-frame .hero-composite .hero-slide-copy {
    left: 18px;
    right: 18px;
    top: 30vh;
    bottom: auto;
    max-width: calc(100% - 36px);
  }

  .public-page .hero-composite-center .hero-slide-copy,
  .preview-frame .hero-composite-center .hero-slide-copy {
    top: 34vh;
  }

  .public-page .hero-composite-right .hero-slide-copy,
  .preview-frame .hero-composite-right .hero-slide-copy {
    top: 32vh;
  }

  .public-page .hero-composite-left .hero-slide-copy,
  .preview-frame .hero-composite-left .hero-slide-copy {
    top: 34vh;
  }

  .public-page .hero-slide-copy h1,
  .public-page .hero-layout-1 .hero-slide-copy h1,
  .public-page .hero-layout-2 .hero-slide-copy h1,
  .public-page .hero-layout-3 .hero-slide-copy h1,
  .public-page .hero-composite .hero-slide-copy h1,
  .preview-frame .hero-slide-copy h1,
  .preview-frame .hero-layout-1 .hero-slide-copy h1,
  .preview-frame .hero-layout-2 .hero-slide-copy h1,
  .preview-frame .hero-layout-3 .hero-slide-copy h1,
  .preview-frame .hero-composite .hero-slide-copy h1 {
    max-width: min(340px, 100%);
    font-size: clamp(1.82rem, 7.6vw, 2.2rem);
  }

  .public-page .hero-slide-copy p,
  .public-page .hero-layout-1 .hero-slide-copy p,
  .public-page .hero-layout-2 .hero-slide-copy p,
  .public-page .hero-composite .hero-slide-copy p,
  .preview-frame .hero-slide-copy p,
  .preview-frame .hero-layout-1 .hero-slide-copy p,
  .preview-frame .hero-layout-2 .hero-slide-copy p,
  .preview-frame .hero-composite .hero-slide-copy p {
    max-width: min(340px, 100%);
  }

  .public-page .service-section,
  .preview-frame .service-section {
    padding-inline: 14px;
  }

  .public-page .service-tabs,
  .preview-frame .service-tabs {
    width: min(100%, 360px);
  }

  .public-page .service-tabs > span,
  .public-page .service-tabs a,
  .public-page .service-tabs button,
  .preview-frame .service-tabs > span,
  .preview-frame .service-tabs a,
  .preview-frame .service-tabs button {
    min-height: 56px;
    padding: 0 6px;
    font-size: clamp(0.86rem, 3.6vw, 0.98rem);
  }

  .public-page .service-tile-grid,
  .preview-frame .service-tile-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    width: min(100%, 380px);
  }

  .public-page .service-tile,
  .preview-frame .service-tile {
    grid-template-columns: minmax(0, 1fr) 86px;
    min-height: 76px;
    font-size: 1rem;
  }

  .public-page .service-tile > span,
  .preview-frame .service-tile > span {
    min-height: 76px;
    padding: 0 18px;
  }

  .public-page .service-tile img,
  .preview-frame .service-tile img {
    width: 86px;
    height: 76px;
  }

  .public-page .pickup-rail,
  .preview-frame .pickup-rail {
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: clip;
  }

  .public-page .pickup-card,
  .preview-frame .pickup-card {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .public-page .footer-service-banners a,
  .public-page .footer-banners a,
  .public-page .footer-links a,
  .public-page .footer-legal a,
  .public-page .breadcrumb a,
  .preview-frame .footer-service-banners a,
  .preview-frame .footer-banners a,
  .preview-frame .footer-links a,
  .preview-frame .footer-legal a,
  .preview-frame .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 390px) {
  .public-page .brand-logo,
  .preview-frame .brand-logo {
    max-width: 132px;
    height: 38px;
  }

  .public-page .hero-section,
  .preview-frame .hero-section {
    height: 100vh;
    height: 100svh;
    min-height: 100svh;
  }

  .public-page .hero-composite .hero-slide-photo-sub,
  .preview-frame .hero-composite .hero-slide-photo-sub {
    top: 74px;
    right: 14px;
    width: 118px;
    height: 80px;
  }

  .public-page .service-section,
  .preview-frame .service-section {
    padding-inline: 12px;
  }
}

/* Wider, slower hover motion without moving hit targets. */
.public-page .site-nav a,
.public-page .header-tools a,
.public-page .header-cta,
.public-page .button,
.public-page .service-tabs button,
.public-page .news-more,
.public-page .footer-links a,
.public-page .footer-legal a,
.preview-frame .site-nav a,
.preview-frame .header-tools a,
.preview-frame .header-cta,
.preview-frame .button,
.preview-frame .service-tabs button,
.preview-frame .news-more,
.preview-frame .footer-links a,
.preview-frame .footer-legal a {
  position: relative;
  overflow: hidden;
}

.public-page .site-nav a::after,
.public-page .header-tools a::after,
.public-page .footer-links a::after,
.public-page .footer-legal a::after,
.preview-frame .site-nav a::after,
.preview-frame .header-tools a::after,
.preview-frame .footer-links a::after,
.preview-frame .footer-legal a::after {
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 2px;
  content: "";
  pointer-events: none;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.18) translate3d(-24%, 0, 0);
  transform-origin: left center;
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 880ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-page .pickup-card::after,
.public-page .news-item::before,
.public-page .route-section a::after,
.public-page .footer-banners a::after,
.preview-frame .pickup-card::after,
.preview-frame .news-item::before,
.preview-frame .route-section a::after,
.preview-frame .footer-banners a::after {
  position: absolute;
  inset: 0;
  z-index: 4;
  content: "";
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 26%, rgba(255, 255, 255, 0.34) 45%, rgba(43, 132, 201, 0.16) 56%, transparent 76% 100%);
  opacity: 0;
  transform: translate3d(-46px, 0, 0) skewX(-8deg);
  transition:
    opacity 780ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1040ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .public-page .service-tile::before,
  .preview-frame .service-tile::before {
    background: linear-gradient(112deg, transparent 0 18%, rgba(43, 132, 201, 0.2) 42%, rgba(255, 255, 255, 0.52) 54%, transparent 80% 100%);
    transform: translate3d(-42px, 0, 0) skewX(-8deg);
    transition:
      opacity 820ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 1040ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .public-page .service-tile:hover,
  .public-page .service-tile:focus-visible,
  .preview-frame .service-tile:hover,
  .preview-frame .service-tile:focus-visible {
    transform: none !important;
    box-shadow: 0 26px 46px rgba(24, 42, 60, 0.14);
  }

  .public-page .service-tile:hover::before,
  .public-page .service-tile:focus-visible::before,
  .preview-frame .service-tile:hover::before,
  .preview-frame .service-tile:focus-visible::before {
    opacity: 1;
    transform: translate3d(18px, 0, 0) skewX(-8deg);
  }

  .public-page .service-tile:hover img,
  .public-page .service-tile:focus-visible img,
  .preview-frame .service-tile:hover img,
  .preview-frame .service-tile:focus-visible img {
    filter: saturate(1.12) contrast(1.06) brightness(1.04);
  }

  .public-page .pickup-card,
  .preview-frame .pickup-card,
  .public-page .news-item,
  .preview-frame .news-item,
  .public-page .route-section a,
  .preview-frame .route-section a,
  .public-page .footer-banners a,
  .preview-frame .footer-banners a {
    position: relative;
    overflow: hidden;
    transition:
      border-color 760ms ease,
      box-shadow 900ms cubic-bezier(0.16, 1, 0.3, 1),
      background-color 760ms ease;
  }

  .public-page .pickup-card:hover,
  .public-page .pickup-card:focus-visible,
  .preview-frame .pickup-card:hover,
  .preview-frame .pickup-card:focus-visible {
    transform: none !important;
    border-color: rgba(43, 132, 201, 0.48);
    box-shadow: 0 28px 54px rgba(15, 35, 48, 0.16);
  }

  .public-page .pickup-card img,
  .preview-frame .pickup-card img {
    transform-origin: center center;
    transition:
      transform 1120ms cubic-bezier(0.16, 1, 0.3, 1),
      filter 900ms ease,
      opacity 900ms ease;
  }

  .public-page .pickup-card div,
  .preview-frame .pickup-card div,
  .public-page .news-body,
  .preview-frame .news-body {
    transition:
      transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
      color 760ms ease;
  }

  .public-page .pickup-card:hover img,
  .public-page .pickup-card:focus-visible img,
  .preview-frame .pickup-card:hover img,
  .preview-frame .pickup-card:focus-visible img {
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.04);
  }

  .public-page .pickup-card:hover div,
  .public-page .pickup-card:focus-visible div,
  .preview-frame .pickup-card:hover div,
  .preview-frame .pickup-card:focus-visible div {
    transform: translate3d(0, -4px, 0);
  }

  .public-page .pickup-card:hover::after,
  .public-page .pickup-card:focus-visible::after,
  .public-page .news-item:hover::before,
  .public-page .news-item:focus-visible::before,
  .public-page .route-section a:hover::after,
  .public-page .route-section a:focus-visible::after,
  .public-page .footer-banners a:hover::after,
  .public-page .footer-banners a:focus-visible::after,
  .preview-frame .pickup-card:hover::after,
  .preview-frame .pickup-card:focus-visible::after,
  .preview-frame .news-item:hover::before,
  .preview-frame .news-item:focus-visible::before,
  .preview-frame .route-section a:hover::after,
  .preview-frame .route-section a:focus-visible::after,
  .preview-frame .footer-banners a:hover::after,
  .preview-frame .footer-banners a:focus-visible::after {
    opacity: 1;
    transform: translate3d(38px, 0, 0) skewX(-8deg);
  }

  .public-page .news-item:hover,
  .public-page .news-item:focus-visible,
  .preview-frame .news-item:hover,
  .preview-frame .news-item:focus-visible {
    background: rgba(43, 132, 201, 0.045);
  }

  .public-page .news-item:hover .news-body,
  .public-page .news-item:focus-visible .news-body,
  .preview-frame .news-item:hover .news-body,
  .preview-frame .news-item:focus-visible .news-body {
    transform: translate3d(14px, 0, 0);
  }

  .public-page .site-nav a:hover::after,
  .public-page .site-nav a:focus-visible::after,
  .public-page .header-tools a:hover::after,
  .public-page .header-tools a:focus-visible::after,
  .public-page .footer-links a:hover::after,
  .public-page .footer-links a:focus-visible::after,
  .public-page .footer-legal a:hover::after,
  .public-page .footer-legal a:focus-visible::after,
  .preview-frame .site-nav a:hover::after,
  .preview-frame .site-nav a:focus-visible::after,
  .preview-frame .header-tools a:hover::after,
  .preview-frame .header-tools a:focus-visible::after,
  .preview-frame .footer-links a:hover::after,
  .preview-frame .footer-links a:focus-visible::after,
  .preview-frame .footer-legal a:hover::after,
  .preview-frame .footer-legal a:focus-visible::after {
    opacity: 0.8;
    transform: scaleX(1) translate3d(0, 0, 0);
  }

  .public-page .header-cta,
  .public-page .button,
  .public-page .service-tabs button,
  .public-page .news-more,
  .preview-frame .header-cta,
  .preview-frame .button,
  .preview-frame .service-tabs button,
  .preview-frame .news-more {
    transition:
      background-color 760ms ease,
      border-color 760ms ease,
      box-shadow 900ms cubic-bezier(0.16, 1, 0.3, 1),
      color 760ms ease,
      transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .public-page .header-cta:hover,
  .public-page .header-cta:focus-visible,
  .public-page .button:hover,
  .public-page .button:focus-visible,
  .public-page .service-tabs button:hover,
  .public-page .service-tabs button:focus-visible,
  .public-page .news-more:hover,
  .public-page .news-more:focus-visible,
  .preview-frame .header-cta:hover,
  .preview-frame .header-cta:focus-visible,
  .preview-frame .button:hover,
  .preview-frame .button:focus-visible,
  .preview-frame .service-tabs button:hover,
  .preview-frame .service-tabs button:focus-visible,
  .preview-frame .news-more:hover,
  .preview-frame .news-more:focus-visible {
    transform: none !important;
    box-shadow: 0 18px 34px rgba(24, 42, 60, 0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-page .site-nav a::after,
  .public-page .header-tools a::after,
  .public-page .pickup-card::after,
  .public-page .news-item::before,
  .public-page .route-section a::after,
  .public-page .footer-banners a::after,
  .public-page .footer-links a::after,
  .public-page .footer-legal a::after,
  .preview-frame .site-nav a::after,
  .preview-frame .header-tools a::after,
  .preview-frame .pickup-card::after,
  .preview-frame .news-item::before,
  .preview-frame .route-section a::after,
  .preview-frame .footer-banners a::after,
  .preview-frame .footer-links a::after,
  .preview-frame .footer-legal a::after {
    opacity: 0 !important;
    transform: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* Hero center slide: center the copy block against the full visual, not the blue plate. */
@media (min-width: 861px) {
  .public-page .hero-composite-center .hero-slide-copy,
  .preview-frame .hero-composite-center .hero-slide-copy {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(620px, 48vw);
    margin: 0;
    padding: 0;
    text-align: center;
    transform: translate3d(-50%, calc(-50% + 10px), 0);
  }

  .public-page .hero-composite-center.active .hero-slide-copy,
  .preview-frame .hero-composite-center.active .hero-slide-copy {
    transform: translate3d(-50%, -50%, 0);
  }

  .public-page .hero-composite-center .hero-slide-copy h1,
  .preview-frame .hero-composite-center .hero-slide-copy h1 {
    max-width: 620px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .public-page .hero-composite-center .hero-slide-copy p,
  .preview-frame .hero-composite-center .hero-slide-copy p {
    max-width: 560px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
}

@media (max-width: 860px) {
  .public-page .hero-composite-center .hero-slide-copy,
  .preview-frame .hero-composite-center .hero-slide-copy,
  .public-page .hero-composite-center .hero-slide-copy h1,
  .public-page .hero-composite-center .hero-slide-copy p,
  .preview-frame .hero-composite-center .hero-slide-copy h1,
  .preview-frame .hero-composite-center .hero-slide-copy p {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
}

/* Typography motion: split-title reveal inspired by modern SplitText/editorial sites. */
.public-page .kinetic-text,
.preview-frame .kinetic-text {
  font-kerning: normal;
  text-rendering: geometricPrecision;
  text-wrap: balance;
}

.public-page .kinetic-unit,
.preview-frame .kinetic-unit {
  display: inline-block;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 0.95em, 0) rotateX(20deg);
  transform-origin: 50% 100%;
  filter: blur(5px);
  will-change: opacity, clip-path, transform, filter;
  transition:
    opacity 1120ms cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 1180ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1260ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 1120ms ease;
  transition-delay: var(--kinetic-delay, 0ms);
}

.public-page .hero-composite .hero-slide-copy h1.kinetic-text,
.public-page .hero-composite .hero-slide-copy p.kinetic-text,
.preview-frame .hero-composite .hero-slide-copy h1.kinetic-text,
.preview-frame .hero-composite .hero-slide-copy p.kinetic-text {
  animation: none !important;
  clip-path: none !important;
  opacity: 1 !important;
}

.public-page.content-ready .site-header .kinetic-unit,
.public-page.content-ready .footer .kinetic-unit,
.public-page.content-ready .subpage-section .kinetic-unit,
.preview-frame .site-header .kinetic-unit,
.preview-frame .footer .kinetic-unit,
.preview-frame .subpage-section .kinetic-unit,
.public-page .hero-composite.active .hero-slide-copy .kinetic-unit,
.preview-frame .hero-composite.active .hero-slide-copy .kinetic-unit,
.public-page .reveal.in-view .kinetic-unit,
.preview-frame .reveal.in-view .kinetic-unit,
.public-page .reveal.in-view .section-heading .kinetic-unit,
.preview-frame .reveal.in-view .section-heading .kinetic-unit,
.public-page .pickup-section.in-view .pickup-card .kinetic-unit,
.preview-frame .pickup-section.in-view .pickup-card .kinetic-unit,
.public-page .news-section.in-view .news-item .kinetic-unit,
.preview-frame .news-section.in-view .news-item .kinetic-unit,
.public-page .content-ready .subpage-hero .kinetic-unit,
.preview-frame .content-ready .subpage-hero .kinetic-unit,
.public-page .subpage-hero .kinetic-unit,
.preview-frame .subpage-hero .kinetic-unit,
.public-page .subpage-section .section-heading .kinetic-unit,
.preview-frame .subpage-section .section-heading .kinetic-unit,
.public-page .subpage-card-grid .kinetic-unit,
.preview-frame .subpage-card-grid .kinetic-unit {
  opacity: 1;
  clip-path: inset(0);
  transform: translate3d(0, 0, 0) rotateX(0deg);
  filter: blur(0);
}

/* Slider wrap-around (3枚目 → 1枚目): the cloned first slide fades its copy in as it slides into
   view, then the snap-reset silently swaps to the real slide 1 (same content, same position).
   `skip-copy-animation` marks that swapped-in real slide so its copy must NOT re-animate — otherwise
   the wrapper (opacity 0→1) AND the kinetic units re-run their reveal, so the text shows, then fades
   in a SECOND time (二重). Pin the whole copy settled & transition-free here so the swap is invisible
   and the wrap reads as one clean fade, exactly like a normal slide change. */
.public-page .hero-slide.skip-copy-animation .hero-slide-copy,
.preview-frame .hero-slide.skip-copy-animation .hero-slide-copy {
  opacity: 1 !important;
  /* Do NOT force transform:none here. On PC the composite copy is centred via
     translate3d(-50%, -50%, 0) on .hero-composite-*.active .hero-slide-copy;
     resetting transform shoved the wrapped (3→1) slide's copy ~50% to the right.
     Keep the settled active transform; transition:none keeps the swap instant. */
  transition: none !important;
}

.public-page .hero-slide.skip-copy-animation .hero-slide-copy h1,
.public-page .hero-slide.skip-copy-animation .hero-slide-copy p,
.preview-frame .hero-slide.skip-copy-animation .hero-slide-copy h1,
.preview-frame .hero-slide.skip-copy-animation .hero-slide-copy p {
  animation: none !important;
  clip-path: inset(0) !important;
  opacity: 1 !important;
}

.public-page .hero-slide.skip-copy-animation .hero-slide-copy .kinetic-unit,
.preview-frame .hero-slide.skip-copy-animation .hero-slide-copy .kinetic-unit {
  opacity: 1 !important;
  clip-path: inset(0) !important;
  transform: translate3d(0, 0, 0) rotateX(0deg) !important;
  filter: blur(0) !important;
  transition: none !important;
  animation: none !important;
}

.public-page .hero-slide-copy p .kinetic-unit,
.preview-frame .hero-slide-copy p .kinetic-unit {
  transition-duration: 1260ms, 1320ms, 1420ms, 1260ms;
}

.public-page .site-header .kinetic-unit,
.public-page .footer .kinetic-unit,
.preview-frame .site-header .kinetic-unit,
.preview-frame .footer .kinetic-unit {
  transform: translate3d(0, 0.42em, 0) rotateX(12deg);
  transition-duration: 820ms, 900ms, 980ms, 820ms;
}

.public-page .section-heading h2 .kinetic-unit,
.preview-frame .section-heading h2 .kinetic-unit {
  transform: translate3d(0, 0.82em, 0) rotateX(24deg);
}

.public-page .service-tile > span.kinetic-text,
.preview-frame .service-tile > span.kinetic-text {
  overflow: hidden;
}

.public-page .service-tile > span .kinetic-unit,
.preview-frame .service-tile > span .kinetic-unit,
.public-page .service-tabs .kinetic-unit,
.preview-frame .service-tabs .kinetic-unit {
  transform: translate3d(0, 0.5em, 0) rotateX(14deg);
  transition-duration: 880ms, 940ms, 1040ms, 880ms;
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .public-page .site-nav a:hover .kinetic-unit,
  .public-page .site-nav a:focus-visible .kinetic-unit,
  .public-page .header-tools a:hover .kinetic-unit,
  .public-page .header-tools a:focus-visible .kinetic-unit,
  .public-page .footer-links a:hover .kinetic-unit,
  .public-page .footer-links a:focus-visible .kinetic-unit,
  .public-page .footer-legal a:hover .kinetic-unit,
  .public-page .footer-legal a:focus-visible .kinetic-unit,
  .preview-frame .site-nav a:hover .kinetic-unit,
  .preview-frame .site-nav a:focus-visible .kinetic-unit,
  .preview-frame .header-tools a:hover .kinetic-unit,
  .preview-frame .header-tools a:focus-visible .kinetic-unit,
  .preview-frame .footer-links a:hover .kinetic-unit,
  .preview-frame .footer-links a:focus-visible .kinetic-unit,
  .preview-frame .footer-legal a:hover .kinetic-unit,
  .preview-frame .footer-legal a:focus-visible .kinetic-unit {
    transform: translate3d(0, -0.12em, 0) rotateX(0deg);
    transition-duration: 860ms;
  }

  .public-page .service-tile:hover .kinetic-unit,
  .public-page .service-tile:focus-visible .kinetic-unit,
  .public-page .service-tabs button:hover .kinetic-unit,
  .public-page .service-tabs button:focus-visible .kinetic-unit,
  .preview-frame .service-tile:hover .kinetic-unit,
  .preview-frame .service-tile:focus-visible .kinetic-unit,
  .preview-frame .service-tabs button:hover .kinetic-unit,
  .preview-frame .service-tabs button:focus-visible .kinetic-unit {
    transform: translate3d(0, -0.16em, 0) rotateX(0deg);
    transition-duration: 900ms;
  }

  .public-page .pickup-card:hover .kinetic-unit,
  .public-page .pickup-card:focus-visible .kinetic-unit,
  .public-page .news-item:hover .kinetic-unit,
  .public-page .news-item:focus-visible .kinetic-unit,
  .preview-frame .pickup-card:hover .kinetic-unit,
  .preview-frame .pickup-card:focus-visible .kinetic-unit,
  .preview-frame .news-item:hover .kinetic-unit,
  .preview-frame .news-item:focus-visible .kinetic-unit {
    transform: translate3d(0, -0.16em, 0) rotateX(0deg);
    transition-duration: 940ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-page .kinetic-unit,
  .preview-frame .kinetic-unit {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* Review pass: keep motion visible, but make every hover compositor-only and slow enough to feel deliberate. */
.public-page .hero-composite-center .hero-slide-copy,
.preview-frame .hero-composite-center .hero-slide-copy {
  max-width: min(760px, 62vw);
}

.public-page .hero-composite-center .hero-slide-copy h1,
.preview-frame .hero-composite-center .hero-slide-copy h1 {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.public-page .hero-composite-center .hero-slide-copy p,
.preview-frame .hero-composite-center .hero-slide-copy p {
  max-width: 640px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.public-page .service-tile,
.preview-frame .service-tile {
  grid-template-columns: minmax(148px, 1fr) 92px;
  min-height: 92px;
  transform: translate3d(0, 0, 0);
  transition:
    transform 1080ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 1080ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 860ms ease,
    background-color 860ms ease !important;
}

.public-page .service-tile > span,
.preview-frame .service-tile > span {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  padding: 0 14px;
  text-align: center;
  font-size: clamp(0.9rem, 1.05vw, 1.06rem);
  line-height: 1.25;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  text-wrap: nowrap;
}

.public-page .service-tile img,
.preview-frame .service-tile img {
  width: 92px;
  height: 92px;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  transition:
    transform 1180ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 980ms ease;
}

.public-page .service-tile::before,
.preview-frame .service-tile::before {
  clip-path: none !important;
  opacity: 0;
  background: linear-gradient(112deg, transparent 0 18%, rgba(43, 132, 201, 0.22) 42%, rgba(255, 255, 255, 0.52) 54%, transparent 82% 100%);
  transform: translate3d(-58%, 0, 0) skewX(-10deg);
  transition:
    opacity 980ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1260ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .public-page .service-tile:hover,
  .public-page .service-tile:focus-visible,
  .preview-frame .service-tile:hover,
  .preview-frame .service-tile:focus-visible {
    transform: translate3d(0, -8px, 0) scale(1.018) !important;
    border-color: rgba(43, 132, 201, 0.58);
    box-shadow: 0 30px 54px rgba(15, 35, 48, 0.18);
  }

  .public-page .service-tile:hover img,
  .public-page .service-tile:focus-visible img,
  .preview-frame .service-tile:hover img,
  .preview-frame .service-tile:focus-visible img {
    transform: translate3d(0, 0, 0) scale(1.065);
    filter: saturate(1.12) contrast(1.06) brightness(1.04);
  }

  .public-page .service-tile:hover::before,
  .public-page .service-tile:focus-visible::before,
  .preview-frame .service-tile:hover::before,
  .preview-frame .service-tile:focus-visible::before {
    opacity: 1;
    transform: translate3d(48%, 0, 0) skewX(-10deg);
  }
}

.public-page .subpage-card-grid > a,
.public-page .subpage-card-grid > article,
.public-page .business-category-card,
.public-page .service-overview-grid article,
.public-page .subpage-link-list a,
.public-page .service-tabs a,
.public-page .service-tabs button,
.public-page .news-tabs a,
.preview-frame .subpage-card-grid > a,
.preview-frame .subpage-card-grid > article,
.preview-frame .business-category-card,
.preview-frame .service-overview-grid article,
.preview-frame .subpage-link-list a,
.preview-frame .service-tabs a,
.preview-frame .service-tabs button,
.preview-frame .news-tabs a {
  transform: translate3d(0, 0, 0);
  transition:
    transform 980ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 980ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 820ms ease,
    background-color 820ms ease,
    color 820ms ease;
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .public-page .subpage-card-grid > a:hover,
  .public-page .subpage-card-grid > a:focus-visible,
  .public-page .subpage-card-grid > article:hover,
  .public-page .subpage-card-grid > article:focus-within,
  .public-page .business-category-card:hover,
  .public-page .business-category-card:focus-visible,
  .public-page .service-overview-grid article:hover,
  .public-page .service-overview-grid article:focus-within,
  .preview-frame .subpage-card-grid > a:hover,
  .preview-frame .subpage-card-grid > a:focus-visible,
  .preview-frame .subpage-card-grid > article:hover,
  .preview-frame .subpage-card-grid > article:focus-within,
  .preview-frame .business-category-card:hover,
  .preview-frame .business-category-card:focus-visible,
  .preview-frame .service-overview-grid article:hover,
  .preview-frame .service-overview-grid article:focus-within {
    transform: translate3d(0, -7px, 0);
    border-color: rgba(43, 132, 201, 0.5);
    box-shadow: 0 26px 52px rgba(15, 35, 48, 0.14);
  }

  .public-page .business-category-card:hover img,
  .public-page .business-category-card:focus-visible img,
  .preview-frame .business-category-card:hover img,
  .preview-frame .business-category-card:focus-visible img {
    transform: scale(1.07);
  }

  .public-page .subpage-link-list a:hover,
  .public-page .subpage-link-list a:focus-visible,
  .public-page .service-tabs a:hover,
  .public-page .service-tabs a:focus-visible,
  .public-page .service-tabs button:hover,
  .public-page .service-tabs button:focus-visible,
  .public-page .news-tabs a:hover,
  .public-page .news-tabs a:focus-visible,
  .preview-frame .subpage-link-list a:hover,
  .preview-frame .subpage-link-list a:focus-visible,
  .preview-frame .service-tabs a:hover,
  .preview-frame .service-tabs a:focus-visible,
  .preview-frame .service-tabs button:hover,
  .preview-frame .service-tabs button:focus-visible,
  .preview-frame .news-tabs a:hover,
  .preview-frame .news-tabs a:focus-visible {
    transform: none !important;
    box-shadow: 0 18px 34px rgba(15, 35, 48, 0.12);
  }
}

@media (max-width: 860px) {
  .public-page .site-nav.open .mega-menu,
  .preview-frame .site-nav.open .mega-menu {
    display: none;
  }

  .public-page .site-nav,
  .preview-frame .site-nav {
    justify-content: stretch;
    justify-items: stretch;
  }

  .public-page .site-nav .nav-item > a,
  .preview-frame .site-nav .nav-item > a {
    justify-content: flex-start;
    padding: 12px 16px;
    font-size: 1.06rem;
  }

  .public-page .hero-composite-center .hero-slide-copy,
  .preview-frame .hero-composite-center .hero-slide-copy {
    max-width: min(560px, calc(100% - 36px));
  }

  /* Mobile: the home 主要事業 tiles are absolutely positioned (label fills the
     row, thumbnail pinned top-right). On the full-width mobile row that left
     the short label floating with a dead band before the right thumbnail. Flip
     to an image-left media row — thumbnail pinned top-LEFT, label filling the
     rest and left-aligned beside it — matching the business related tiles.
     Touch devices have no hover, so the hover image-slide is unaffected, and
     the per-character kinetic label animation is preserved. */
  .public-page .service-tile,
  .preview-frame .service-tile {
    min-height: 84px;
  }

  .public-page .service-tile img,
  .preview-frame .service-tile img {
    right: auto;
    left: 0;
    width: 84px;
    height: 84px;
  }

  .public-page .service-tile > span,
  .preview-frame .service-tile > span {
    inset: 0 0 0 96px;
    justify-content: flex-start;
    text-align: left;
    padding-inline: 14px;
    font-size: clamp(0.82rem, 3.4vw, 0.96rem);
  }
}

/* Final information architecture pass: keep visitor navigation readable and avoid tap-induced jumps. */
.public-page .site-header,
.preview-frame .site-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 82px;
  padding: 0 clamp(22px, 3.4vw, 54px);
  border-bottom: 1px solid rgba(215, 222, 229, 0.9);
}

.public-page.home-page .site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    background 420ms ease,
    color 420ms ease,
    border-color 420ms ease,
    backdrop-filter 420ms ease;
}

.public-page.home-page.intro-transitioning .site-header {
  /* Drop in already wearing its final white bar so no white "catches up" after the
     slide — the header and its white background switch in together with the crossfade.
     z-index above the intro overlay (1000) so the header slides OVER the band, not
     under it. */
  z-index: 1100;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(15, 30, 50, 0.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.public-page .header-primary,
.preview-frame .header-primary {
  display: contents;
}

.public-page .brand,
.preview-frame .brand {
  grid-column: 1;
  grid-row: 1;
  min-height: 82px;
}

.public-page .brand-logo,
.preview-frame .brand-logo {
  height: 54px;
  max-width: 168px;
}

.public-page .site-nav,
.preview-frame .site-nav {
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
  gap: clamp(28px, 4.2vw, 58px);
  min-height: auto;
  padding: 0 24px;
  color: #20252b;
  background: transparent;
  border: 0;
  font-size: 0.96rem;
}

.public-page .site-nav .nav-item.mobile-contact,
.preview-frame .site-nav .nav-item.mobile-contact {
  display: none;
}

.public-page .site-nav .nav-item > a,
.preview-frame .site-nav .nav-item > a {
  min-height: 82px;
  padding: 0;
}

.public-page .header-tools,
.preview-frame .header-tools {
  grid-column: 3;
  grid-row: 1;
  gap: 0;
}

.public-page .header-cta,
.preview-frame .header-cta {
  min-width: 124px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 0;
}

.public-page .mega-menu,
.preview-frame .mega-menu {
  display: none !important;
}

.public-page .service-tabs a,
.public-page .service-tabs button,
.public-page .news-tabs a,
.public-page .subpage-link-list a,
.public-page .button,
.public-page .news-more,
.public-page .header-cta,
.preview-frame .service-tabs a,
.preview-frame .service-tabs button,
.preview-frame .news-tabs a,
.preview-frame .subpage-link-list a,
.preview-frame .button,
.preview-frame .news-more,
.preview-frame .header-cta {
  will-change: color, background-color, border-color, box-shadow;
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .public-page .service-tabs a:hover,
  .public-page .service-tabs a:focus-visible,
  .public-page .service-tabs button:hover,
  .public-page .service-tabs button:focus-visible,
  .public-page .news-tabs a:hover,
  .public-page .news-tabs a:focus-visible,
  .public-page .subpage-link-list a:hover,
  .public-page .subpage-link-list a:focus-visible,
  .public-page .button:hover,
  .public-page .button:focus-visible,
  .public-page .news-more:hover,
  .public-page .news-more:focus-visible,
  .public-page .header-cta:hover,
  .public-page .header-cta:focus-visible,
  .preview-frame .service-tabs a:hover,
  .preview-frame .service-tabs a:focus-visible,
  .preview-frame .service-tabs button:hover,
  .preview-frame .service-tabs button:focus-visible,
  .preview-frame .news-tabs a:hover,
  .preview-frame .news-tabs a:focus-visible,
  .preview-frame .subpage-link-list a:hover,
  .preview-frame .subpage-link-list a:focus-visible,
  .preview-frame .button:hover,
  .preview-frame .button:focus-visible,
  .preview-frame .news-more:hover,
  .preview-frame .news-more:focus-visible,
  .preview-frame .header-cta:hover,
  .preview-frame .header-cta:focus-visible {
    transform: none !important;
    box-shadow: 0 16px 32px rgba(15, 35, 48, 0.1);
  }

  .public-page .service-tile:hover,
  .public-page .service-tile:focus-visible,
  .preview-frame .service-tile:hover,
  .preview-frame .service-tile:focus-visible {
    transform: none !important;
    border-color: rgba(43, 132, 201, 0.5);
    box-shadow: 0 28px 50px rgba(15, 35, 48, 0.14);
  }

  .public-page .service-tile:hover img,
  .public-page .service-tile:focus-visible img,
  .preview-frame .service-tile:hover img,
  .preview-frame .service-tile:focus-visible img {
    transform: scale(1.045);
  }
}

@media (max-width: 860px) {
  .public-page .site-header,
  .preview-frame .site-header {
    position: sticky;
    display: block;
    min-height: 62px;
    padding: 0;
  }

  .public-page .header-primary,
  .preview-frame .header-primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 62px;
    padding: 0 14px;
  }

  .public-page .brand,
  .preview-frame .brand {
    min-height: 62px;
  }

  .public-page .brand-logo,
  .preview-frame .brand-logo {
    height: 44px;
    max-width: min(142px, 48vw);
  }

  .public-page .header-tools,
  .preview-frame .header-tools {
    display: none;
  }

  .public-page .nav-toggle,
  .preview-frame .nav-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .public-page .site-nav,
  .preview-frame .site-nav {
    position: absolute;
    top: 62px;
    left: 10px;
    right: 10px;
    grid-column: auto;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 8px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 24px 54px rgba(15, 35, 48, 0.16);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, -8px, 0);
    visibility: hidden;
    transition:
      opacity 320ms ease,
      transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 420ms;
  }

  .public-page .site-nav.open,
  .preview-frame .site-nav.open {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    visibility: visible;
    transition-delay: 0s;
  }

  .public-page .site-nav .nav-item.mobile-contact,
  .preview-frame .site-nav .nav-item.mobile-contact {
    display: block;
  }

  .public-page .site-nav .nav-item > a,
  .preview-frame .site-nav .nav-item > a {
    justify-content: flex-start;
    min-height: 46px;
    padding: 0 14px;
    font-size: 1.02rem;
  }

  .public-page .news-tabs,
  .preview-frame .news-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: min(100%, 360px);
    margin-right: auto;
    margin-left: auto;
    overflow-x: clip !important;
    border-bottom: 0;
  }

  .public-page .news-tabs a,
  .preview-frame .news-tabs a {
    min-width: 0;
    min-height: 44px;
    border: 1px solid #d9dee4;
    border-top-width: 3px;
    background: #fff;
    font-size: 0.92rem;
  }

  .public-page .business-overview-page,
  .preview-frame .business-overview-page {
    padding-top: 38px;
  }

  .public-page .business-overview-intro,
  .preview-frame .business-overview-intro,
  .public-page .business-category-grid,
  .preview-frame .business-category-grid,
  .public-page .business-service-grid,
  .preview-frame .business-service-grid,
  .public-page .subpage-card-grid.business-service-grid,
  .preview-frame .subpage-card-grid.business-service-grid {
    grid-template-columns: 1fr;
  }

  .public-page .business-overview-intro,
  .preview-frame .business-overview-intro {
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 24px;
  }

  .public-page .business-overview-intro h2,
  .preview-frame .business-overview-intro h2 {
    font-size: clamp(1.8rem, 8vw, 2.55rem);
  }

  .public-page .business-overview-intro p,
  .preview-frame .business-overview-intro p {
    margin-top: 16px;
    font-size: 0.98rem;
    line-height: 1.8;
  }

  .public-page .business-category-grid,
  .preview-frame .business-category-grid {
    gap: 16px;
    margin-bottom: 42px;
  }

  .public-page .business-category-card,
  .preview-frame .business-category-card {
    min-height: 236px;
  }

  .public-page .business-category-card div,
  .preview-frame .business-category-card div {
    padding: 22px;
  }

  .public-page .business-overview-heading,
  .preview-frame .business-overview-heading {
    margin-bottom: 18px;
  }
}

/* Editorial line-break pass: headings should balance, body copy should stay in readable line lengths. */
.public-page :where(.hero-slide-copy h1, .section-heading h2, .subpage-hero h1, .subpage-section .section-heading h2, .business-overview-intro h2, .contact-copy h2),
.preview-frame :where(.hero-slide-copy h1, .section-heading h2, .subpage-hero h1, .subpage-section .section-heading h2, .business-overview-intro h2, .contact-copy h2) {
  text-wrap: balance;
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: normal;
}

.public-page :where(.hero-slide-copy p, .subpage-lead, .business-overview-intro p, .subpage-card-grid p, .service-overview-grid p, .service-related-panel p, .pickup-card p, .news-item p, .contact-copy p, .company-lead p),
.preview-frame :where(.hero-slide-copy p, .subpage-lead, .business-overview-intro p, .subpage-card-grid p, .service-overview-grid p, .service-related-panel p, .pickup-card p, .news-item p, .contact-copy p, .company-lead p) {
  text-wrap: pretty;
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}

.public-page .hero-composite .hero-slide-copy p,
.preview-frame .hero-composite .hero-slide-copy p {
  max-width: min(38em, 640px);
  text-wrap: balance;
}

.public-page .subpage-lead,
.preview-frame .subpage-lead {
  max-width: min(42em, 100%);
}

.public-page .business-overview-intro p,
.preview-frame .business-overview-intro p,
.public-page .contact-copy p,
.preview-frame .contact-copy p,
.public-page .company-lead p,
.preview-frame .company-lead p {
  max-width: min(36em, 100%);
}

.public-page .business-overview-intro h2,
.preview-frame .business-overview-intro h2,
.public-page .business-overview-intro p,
.preview-frame .business-overview-intro p {
  max-width: none;
  text-wrap: nowrap;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* 2026-06-08 文字崩れ FIX (mobile only): the rule above keeps the 事業紹介 BUSINESS FIELD
   heading + lead on a single line for the desktop editorial look. On a phone that single
   line is ~657px wide inside a 354px column, so "港・道路・商流をつなぐ事業領域" and its
   paragraph render at desktop width and get CLIPPED off the right edge (this is the
   "事業紹介セクションの文字崩れ" the client reported). The earlier mobile block sits above
   this rule in source order so it can't override it — re-allow wrapping here, after it.
   Desktop (>=861px) keeps the nowrap one-line heading untouched. */
@media (max-width: 860px) {
  .public-page .business-overview-intro h2,
  .preview-frame .business-overview-intro h2,
  .public-page .business-overview-intro p,
  .preview-frame .business-overview-intro p {
    text-wrap: balance;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

.public-page .pickup-card h3,
.public-page .news-item h3,
.preview-frame .pickup-card h3,
.preview-frame .news-item h3 {
  text-wrap: balance;
  line-break: strict;
  word-break: auto-phrase;
}

.public-page .pickup-card p,
.public-page .news-item p,
.preview-frame .pickup-card p,
.preview-frame .news-item p {
  max-width: 30em;
}

.public-page .service-tile > span,
.public-page .related-tile-card span,
.preview-frame .service-tile > span,
.preview-frame .related-tile-card span {
  text-wrap: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

@media (max-width: 860px) {
  .public-page .hero-composite .hero-slide-copy h1,
  .preview-frame .hero-composite .hero-slide-copy h1 {
    max-width: min(12.5em, 100%);
  }

  .public-page .hero-composite .hero-slide-copy p,
  .preview-frame .hero-composite .hero-slide-copy p {
    max-width: min(23em, 100%);
  }

  .public-page .contact-copy h2,
  .preview-frame .contact-copy h2 {
    max-width: 11em;
  }

  .public-page .subpage-lead,
  .public-page .business-overview-intro p,
  .public-page .contact-copy p,
  .public-page .company-lead p,
  .preview-frame .subpage-lead,
  .preview-frame .business-overview-intro p,
  .preview-frame .contact-copy p,
  .preview-frame .company-lead p {
    max-width: 100%;
  }

  .public-page .business-overview-intro h2,
  .preview-frame .business-overview-intro h2,
  .public-page .business-overview-intro p,
  .preview-frame .business-overview-intro p {
    text-wrap: balance;
    white-space: normal;
    word-break: auto-phrase;
    overflow-wrap: break-word;
  }
}

/* Final hero layer placement: this must stay after the accumulated hero passes. */
@media (min-width: 861px) {
  .public-page .hero-composite-right .hero-slide-photo-main img,
  .public-page .hero-composite-left .hero-slide-photo-main img,
  .preview-frame .hero-composite-right .hero-slide-photo-main img,
  .preview-frame .hero-composite-left .hero-slide-photo-main img {
    object-fit: cover;
    object-position: center center;
    transform: scale(1.012);
  }

  .public-page .hero-composite-right::after,
  .preview-frame .hero-composite-right::after {
    top: -9%;
    right: -4%;
    bottom: -8%;
    left: auto;
    width: 59%;
    height: auto;
    display: block;
    border-radius: 47% 0 0 50% / 36% 0 0 54%;
    background:
      linear-gradient(97deg, rgba(41, 179, 227, 0.05) 0%, rgba(30, 163, 220, 0.2) 28%, rgba(20, 131, 205, 0.44) 66%, rgba(8, 91, 174, 0.62) 100%),
      radial-gradient(ellipse at 70% 46%, rgba(132, 224, 249, 0.22), transparent 52%);
    clip-path: ellipse(72% 66% at 78% 50%);
    box-shadow: inset 22px 0 34px rgba(255, 255, 255, 0.11);
    mix-blend-mode: normal;
    transform-origin: 72% 50%;
  }

  .public-page .hero-composite-left::after,
  .preview-frame .hero-composite-left::after {
    top: -9%;
    right: auto;
    bottom: -8%;
    left: -5%;
    width: 45%;
    height: auto;
    display: block;
    border-radius: 0 52% 48% 0 / 0 44% 58% 0;
    background:
      linear-gradient(96deg, rgba(5, 11, 17, 0.9), rgba(28, 42, 55, 0.74) 56%, rgba(218, 230, 235, 0.18) 86%, transparent 100%),
      radial-gradient(ellipse at 68% 72%, rgba(252, 230, 168, 0.22), transparent 28%);
    clip-path: ellipse(82% 68% at 13% 50%);
    box-shadow:
      inset -18px 0 32px rgba(255, 255, 255, 0.17),
      inset -4px 0 12px rgba(255, 241, 188, 0.22);
    mix-blend-mode: normal;
    transform-origin: 20% 52%;
  }

  .public-page .hero-composite-right .hero-data-layer,
  .preview-frame .hero-composite-right .hero-data-layer {
    top: 5%;
    right: -1.2%;
    width: min(58vw, 790px);
    height: 86%;
  }

  .public-page .hero-composite-left .hero-data-layer,
  .preview-frame .hero-composite-left .hero-data-layer {
    top: -3%;
    left: -2.6%;
    width: min(47vw, 660px);
    height: 104%;
  }

  .public-page .hero-composite-left .hero-collage,
  .preview-frame .hero-composite-left .hero-collage {
    display: none;
  }
}

/* Regenerated hero assets: keep aspect ratio intact; use SVG only as subtle independent motion. */
.public-page .hero-composite-right .hero-data-layer::before,
.public-page .hero-composite-left .hero-data-layer::before,
.preview-frame .hero-composite-right .hero-data-layer::before,
.preview-frame .hero-composite-left .hero-data-layer::before {
  background-image: none !important;
}

@media (min-width: 861px) {
  .public-page .hero-composite-right .hero-slide-photo-main img,
  .public-page .hero-composite-left .hero-slide-photo-main img,
  .preview-frame .hero-composite-right .hero-slide-photo-main img,
  .preview-frame .hero-composite-left .hero-slide-photo-main img {
    object-fit: cover !important;
    object-position: center center !important;
  }

  .public-page .hero-composite-right .hero-data-layer,
  .preview-frame .hero-composite-right .hero-data-layer {
    top: 5%;
    right: 1%;
    width: min(56vw, 760px);
    height: 86%;
    opacity: 0;
  }

  .public-page .hero-composite-left .hero-data-layer,
  .preview-frame .hero-composite-left .hero-data-layer {
    top: 1%;
    left: -1.5%;
    width: min(43vw, 620px);
    height: 92%;
    opacity: 0;
  }

  .public-page .hero-composite-right .hero-data-map,
  .preview-frame .hero-composite-right .hero-data-map {
    stroke: rgba(232, 248, 255, 0.26);
    transform: translate3d(2%, -2%, 0) scale(0.98);
  }

  .public-page .hero-composite-left .hero-data-map,
  .preview-frame .hero-composite-left .hero-data-map {
    stroke: rgba(235, 242, 244, 0.18);
    transform: translate3d(-19%, -2%, 0) scale(1.04);
  }

  .public-page .hero-composite-left .hero-data-globe,
  .preview-frame .hero-composite-left .hero-data-globe {
    transform: translate3d(-38%, 5%, 0) scale(1.12);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .public-page .hero-composite-right.active .hero-slide-photo-main img,
  .preview-frame .hero-composite-right.active .hero-slide-photo-main img {
    animation: bondi-sea-photo-breathe 18000ms cubic-bezier(0.45, 0, 0.25, 1) both infinite alternate;
  }

  .public-page .hero-composite-left.active .hero-slide-photo-main img,
  .preview-frame .hero-composite-left.active .hero-slide-photo-main img {
    animation: bondi-sunset-photo-breathe 19000ms cubic-bezier(0.45, 0, 0.25, 1) both infinite alternate;
  }
}

@media (min-width: 861px) {
  .public-page .hero-composite.hero-composite-left .hero-collage,
  .preview-frame .hero-composite.hero-composite-left .hero-collage {
    position: absolute;
    top: 12%;
    right: 4%;
    bottom: 13%;
    left: auto;
    z-index: 8;
    display: grid;
    width: min(22vw, 330px);
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 2.8vh;
    opacity: 0.9;
    pointer-events: none;
  }

  .public-page .hero-composite.hero-composite-left .hero-collage figure,
  .preview-frame .hero-composite.hero-composite-left .hero-collage figure {
    display: block;
    width: min(12vw, 168px);
    height: min(8.4vw, 118px);
    padding: 7px 7px 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 2px;
    box-shadow: 0 16px 34px rgba(0, 11, 20, 0.3);
    transform: translate3d(0, 0, 0) rotate(var(--polaroid-rotate, 0deg));
  }

  .public-page .hero-composite.hero-composite-left .hero-collage figure:nth-child(1),
  .preview-frame .hero-composite.hero-composite-left .hero-collage figure:nth-child(1) {
    justify-self: end;
    --polaroid-rotate: -2deg;
  }

  .public-page .hero-composite.hero-composite-left .hero-collage figure:nth-child(2),
  .preview-frame .hero-composite.hero-composite-left .hero-collage figure:nth-child(2) {
    justify-self: start;
    --polaroid-rotate: 4deg;
  }

  .public-page .hero-composite.hero-composite-left .hero-collage figure:nth-child(3),
  .preview-frame .hero-composite.hero-composite-left .hero-collage figure:nth-child(3) {
    justify-self: center;
    --polaroid-rotate: -5deg;
  }

  .public-page .hero-composite.hero-composite-left .hero-collage figure:nth-child(4),
  .preview-frame .hero-composite.hero-composite-left .hero-collage figure:nth-child(4) {
    display: none;
  }

  .public-page .hero-composite.hero-composite-left .hero-collage img,
  .preview-frame .hero-composite.hero-composite-left .hero-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@keyframes bondi-sea-photo-breathe {
  from { transform: translate3d(-0.24%, -0.12%, 0) scale(1.012); }
  to { transform: translate3d(0.22%, 0.1%, 0) scale(1.022); }
}

@keyframes bondi-sunset-photo-breathe {
  from { transform: translate3d(0.18%, -0.12%, 0) scale(1.012); }
  to { transform: translate3d(-0.2%, 0.16%, 0) scale(1.021); }
}

/* Final data-motion pass: keep regenerated photos fixed and move only the line-art layer. */
.public-page .hero-section,
.preview-frame .hero-section,
.public-page .hero-slide,
.preview-frame .hero-slide {
  background: #07141d !important;
}

.public-page .hero-dots,
.preview-frame .hero-dots {
  bottom: 18px;
  height: auto;
  background: transparent !important;
}

.public-page .hero-composite-left::after,
.preview-frame .hero-composite-left::after {
  display: none !important;
}

.public-page .hero-composite-right .hero-slide-photo-main img,
.public-page .hero-composite-left .hero-slide-photo-main img,
.public-page .hero-composite-right .hero-slide-photo-main video,
.public-page .hero-composite-left .hero-slide-photo-main video,
.preview-frame .hero-composite-right .hero-slide-photo-main img,
.preview-frame .hero-composite-left .hero-slide-photo-main img,
.preview-frame .hero-composite-right .hero-slide-photo-main video,
.preview-frame .hero-composite-left .hero-slide-photo-main video {
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

.public-page .hero-composite-right.active .hero-slide-photo-main img,
.public-page .hero-composite-left.active .hero-slide-photo-main img,
.public-page .hero-composite-right.active .hero-slide-photo-main video,
.public-page .hero-composite-left.active .hero-slide-photo-main video,
.preview-frame .hero-composite-right.active .hero-slide-photo-main img,
.preview-frame .hero-composite-left.active .hero-slide-photo-main img,
.preview-frame .hero-composite-right.active .hero-slide-photo-main video,
.preview-frame .hero-composite-left.active .hero-slide-photo-main video {
  animation: none !important;
}

.public-page .hero-data-layer,
.preview-frame .hero-data-layer {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3;
  width: auto !important;
  height: 100% !important;
  aspect-ratio: 1672 / 941;
  opacity: 0;
  overflow: hidden;
  transform: translate3d(-50%, -50%, 0) !important;
  transition: opacity 980ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-aspect-ratio: 1672 / 941) {
  .public-page .hero-data-layer,
  .preview-frame .hero-data-layer {
    width: 100% !important;
    height: auto !important;
  }
}

.public-page .hero-composite.active .hero-data-layer,
.preview-frame .hero-composite.active .hero-data-layer {
  opacity: 0.72;
  animation: none !important;
}

.public-page .hero-composite-left.active .hero-data-layer,
.preview-frame .hero-composite-left.active .hero-data-layer {
  opacity: 0.5;
}

.public-page .hero-data-map,
.preview-frame .hero-data-map {
  display: block;
  width: 100%;
  height: 100%;
  stroke: rgba(238, 246, 248, 0.38);
  stroke-width: 1.55;
  vector-effect: non-scaling-stroke;
  transform: none !important;
}

.public-page .hero-data-left,
.public-page .hero-data-right,
.preview-frame .hero-data-left,
.preview-frame .hero-data-right {
  transform-box: view-box;
  transform-origin: center;
}

.public-page .hero-composite-left .hero-data-right,
.public-page .hero-composite-right .hero-data-left,
.preview-frame .hero-composite-left .hero-data-right,
.preview-frame .hero-composite-right .hero-data-left {
  display: none;
}

.public-page .hero-composite-left .hero-data-left,
.preview-frame .hero-composite-left .hero-data-left {
  stroke: rgba(238, 246, 248, 0.42);
  filter: drop-shadow(0 0 8px rgba(255, 244, 212, 0.13));
}

.public-page .hero-composite-right .hero-data-right,
.preview-frame .hero-composite-right .hero-data-right {
  stroke: rgba(231, 248, 255, 0.34);
  filter: drop-shadow(0 0 10px rgba(116, 218, 255, 0.14));
}

.public-page .hero-data-routes,
.public-page .hero-data-globe,
.public-page .hero-data-icons,
.preview-frame .hero-data-routes,
.preview-frame .hero-data-globe,
.preview-frame .hero-data-icons {
  animation: none;
  transform: none;
  transform-box: fill-box;
  transform-origin: center;
}

.public-page .hero-composite-right .hero-data-routes,
.public-page .hero-composite-right .hero-data-globe,
.public-page .hero-composite-right .hero-data-icons,
.public-page .hero-composite-left .hero-data-routes,
.public-page .hero-composite-left .hero-data-globe,
.public-page .hero-composite-left .hero-data-icons,
.preview-frame .hero-composite-right .hero-data-routes,
.preview-frame .hero-composite-right .hero-data-globe,
.preview-frame .hero-composite-right .hero-data-icons,
.preview-frame .hero-composite-left .hero-data-routes,
.preview-frame .hero-composite-left .hero-data-globe,
.preview-frame .hero-composite-left .hero-data-icons {
  transform: none;
}

.public-page .hero-data-routes .route,
.preview-frame .hero-data-routes .route {
  opacity: 0.64;
  stroke-dasharray: 12 16;
  stroke-dashoffset: 0;
}

.public-page .hero-data-routes .is-dotted,
.preview-frame .hero-data-routes .is-dotted {
  stroke-dasharray: 2 8;
}

.public-page .hero-data-globe,
.preview-frame .hero-data-globe {
  opacity: 0.76;
}

.public-page .hero-data-globe .globe-spin,
.preview-frame .hero-data-globe .globe-spin {
  opacity: 0.64;
  stroke-dasharray: 7 11;
}

.public-page .hero-data-icon,
.preview-frame .hero-data-icon {
  opacity: 0.72;
  animation: none;
  transform: none;
  transform-box: fill-box;
  transform-origin: center;
}

.public-page .icon-ship .ship-wave,
.preview-frame .icon-ship .ship-wave {
  opacity: 0.78;
  stroke-dasharray: 11 10;
}

.public-page .truck-wheel,
.preview-frame .truck-wheel {
  stroke-dasharray: 8 5;
}

@media (prefers-reduced-motion: no-preference) {
  .public-page .hero-composite.active .hero-data-routes .route,
  .preview-frame .hero-composite.active .hero-data-routes .route {
    animation: bondi-route-dash 11800ms linear infinite;
  }

  .public-page .hero-composite.active .hero-data-routes .route-mid,
  .preview-frame .hero-composite.active .hero-data-routes .route-mid {
    animation-duration: 9200ms;
    animation-direction: reverse;
  }

  .public-page .hero-composite.active .hero-data-routes .route-low,
  .preview-frame .hero-composite.active .hero-data-routes .route-low {
    animation-duration: 14200ms;
  }

  .public-page .hero-composite.active .hero-data-globe,
  .preview-frame .hero-composite.active .hero-data-globe {
    animation: bondi-globe-slow-turn 21000ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }

  .public-page .hero-composite.active .hero-data-globe .globe-spin,
  .preview-frame .hero-composite.active .hero-data-globe .globe-spin {
    animation: bondi-globe-meridian 7600ms linear infinite;
  }

  .public-page .hero-composite.active .icon-ship .ship-wave,
  .preview-frame .hero-composite.active .icon-ship .ship-wave {
    animation: bondi-ship-wave 3200ms linear infinite;
  }

  .public-page .hero-composite.active .truck-wheel,
  .preview-frame .hero-composite.active .truck-wheel {
    animation: bondi-truck-wheel 2200ms linear infinite;
  }

  .public-page .hero-composite.active .icon-box-a,
  .preview-frame .hero-composite.active .icon-box-a {
    animation: bondi-box-route-a 7600ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }

  .public-page .hero-composite.active .icon-box-b,
  .preview-frame .hero-composite.active .icon-box-b {
    animation: bondi-box-route-b 9200ms cubic-bezier(0.45, 0, 0.25, 1) 800ms infinite alternate;
  }

  .public-page .hero-composite.active .icon-box-c,
  .preview-frame .hero-composite.active .icon-box-c {
    animation: bondi-box-route-c 8400ms cubic-bezier(0.45, 0, 0.25, 1) 500ms infinite alternate;
  }

  .public-page .hero-composite.active .icon-factory,
  .preview-frame .hero-composite.active .icon-factory,
  .public-page .hero-composite.active .icon-warehouse,
  .preview-frame .hero-composite.active .icon-warehouse {
    animation: bondi-icon-pulse 6800ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }
}

@keyframes bondi-route-dash {
  to { stroke-dashoffset: -140; }
}

@keyframes bondi-globe-slow-turn {
  from { opacity: 0.58; transform: translate3d(-2px, 1px, 0) scaleX(0.985) rotate(-0.25deg); }
  to { opacity: 0.84; transform: translate3d(3px, -2px, 0) scaleX(1.018) rotate(0.32deg); }
}

@keyframes bondi-globe-meridian {
  from { stroke-dashoffset: 0; transform: translate3d(-18px, 0, 0); }
  to { stroke-dashoffset: -96; transform: translate3d(18px, 0, 0); }
}

@keyframes bondi-ship-wave {
  from { stroke-dashoffset: 0; transform: translate3d(-5px, 0, 0); }
  to { stroke-dashoffset: -48; transform: translate3d(5px, 0, 0); }
}

@keyframes bondi-real-ship-wave-loop {
  to { stroke-dashoffset: -33; }
}

@keyframes bondi-truck-wheel {
  to { transform: rotate(360deg); }
}

@keyframes shipBob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -2.4px, 0); }
}

@keyframes truckBump {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(0, -0.9px, 0); }
  55% { transform: translate3d(0, 0.6px, 0); }
}

@keyframes wheelSpin {
  to { transform: rotate(360deg); }
}

@keyframes bondi-box-route-a {
  from { opacity: 0.45; transform: translate3d(-3px, 3px, 0) scale(0.96); }
  to { opacity: 0.9; transform: translate3d(12px, -15px, 0) scale(1.03); }
}

@keyframes bondi-box-route-b {
  from { opacity: 0.48; transform: translate3d(5px, -4px, 0) scale(0.97); }
  to { opacity: 0.86; transform: translate3d(-13px, 12px, 0) scale(1.025); }
}

@keyframes bondi-box-route-c {
  from { opacity: 0.44; transform: translate3d(-6px, -2px, 0) scale(0.965); }
  to { opacity: 0.84; transform: translate3d(10px, 14px, 0) scale(1.02); }
}

@keyframes bondi-icon-pulse {
  from { opacity: 0.55; transform: translate3d(-1px, 1px, 0); }
  to { opacity: 0.82; transform: translate3d(2px, -2px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .home-intro-transition {
    display: none;
  }

  .public-page .hero-data-layer,
  .public-page .hero-data-layer *,
  .preview-frame .hero-data-layer,
  .preview-frame .hero-data-layer * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .public-page .hero-composite.active .hero-data-layer,
  .preview-frame .hero-composite.active .hero-data-layer {
    opacity: 0.48 !important;
  }
}

/* Native image-motion repair: do not redraw the data graphics. Reuse small clipped
   regions of the approved raster image so the original line quality remains intact. */
.public-page .hero-data-layer,
.preview-frame .hero-data-layer {
  display: none !important;
}

.public-page .hero-native-motion-layer,
.preview-frame .hero-native-motion-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 3;
  width: auto;
  height: 100%;
  aspect-ratio: 1672 / 941;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 880ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-aspect-ratio: 1672 / 941) {
  .public-page .hero-native-motion-layer,
  .preview-frame .hero-native-motion-layer {
    width: 100%;
    height: auto;
  }
}

.public-page .hero-composite.active .hero-native-motion-layer,
.preview-frame .hero-composite.active .hero-native-motion-layer {
  opacity: 1;
}

.public-page .hero-native-piece,
.preview-frame .hero-native-piece {
  position: absolute;
  inset: 0;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  will-change: transform, opacity;
}

.public-page .hero-native-motion-layer-2 .hero-native-piece,
.preview-frame .hero-native-motion-layer-2 .hero-native-piece {
  background-image: url("/assets/generated/bondi-hero-02.webp");
}

.public-page .hero-native-motion-layer-3 .hero-native-piece,
.preview-frame .hero-native-motion-layer-3 .hero-native-piece {
  background-image: url("/assets/generated/bondi-hero-03.webp");
}

.public-page .hero-composite.active .hero-native-piece,
.preview-frame .hero-composite.active .hero-native-piece {
  opacity: var(--native-opacity, 0.26);
}

.public-page .sea-route-top,
.preview-frame .sea-route-top {
  --native-opacity: 0.2;
  clip-path: inset(7% 4% 69% 36%);
}

.public-page .sea-route-mid,
.preview-frame .sea-route-mid {
  --native-opacity: 0.24;
  clip-path: inset(28% 2% 16% 33%);
}

.public-page .sea-globe,
.preview-frame .sea-globe {
  --native-opacity: 0.3;
  clip-path: inset(43% 20% 22% 60%);
}

.public-page .sea-ship-wave,
.preview-frame .sea-ship-wave {
  --native-opacity: 0.36;
  clip-path: inset(45% 39% 48% 47%);
}

.public-page .sea-plane,
.preview-frame .sea-plane {
  --native-opacity: 0.24;
  clip-path: inset(10% 3% 72% 80%);
}

.public-page .sea-box-a,
.preview-frame .sea-box-a {
  --native-opacity: 0.32;
  clip-path: inset(52% 55% 38% 40%);
}

.public-page .sea-box-b,
.preview-frame .sea-box-b {
  --native-opacity: 0.32;
  clip-path: inset(37% 5% 52% 89%);
}

.public-page .sunset-route-top,
.preview-frame .sunset-route-top {
  --native-opacity: 0.2;
  clip-path: inset(3% 68% 65% 0%);
}

.public-page .sunset-route-low,
.preview-frame .sunset-route-low {
  --native-opacity: 0.22;
  clip-path: inset(23% 64% 8% 0%);
}

.public-page .sunset-globe,
.preview-frame .sunset-globe {
  --native-opacity: 0.28;
  clip-path: inset(33% 77% 24% 0%);
}

.public-page .sunset-ship-wave,
.preview-frame .sunset-ship-wave {
  --native-opacity: 0.42;
  clip-path: inset(42% 62% 52% 29%);
}

.public-page .sunset-truck,
.preview-frame .sunset-truck {
  --native-opacity: 0.3;
  clip-path: inset(20% 73% 58% 11%);
}

.public-page .sunset-box-a,
.preview-frame .sunset-box-a {
  --native-opacity: 0.3;
  clip-path: inset(29% 94% 60% 0%);
}

.public-page .sunset-box-b,
.preview-frame .sunset-box-b {
  --native-opacity: 0.3;
  clip-path: inset(17% 69% 72% 25%);
}

.public-page .sunset-factory,
.preview-frame .sunset-factory {
  --native-opacity: 0.32;
  clip-path: inset(57% 67% 25% 23%);
}

@media (prefers-reduced-motion: no-preference) {
  .public-page .hero-composite.active .sea-route-top,
  .preview-frame .hero-composite.active .sea-route-top,
  .public-page .hero-composite.active .sunset-route-top,
  .preview-frame .hero-composite.active .sunset-route-top {
    animation: bondi-native-route-drift 22000ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }

  .public-page .hero-composite.active .sea-route-mid,
  .preview-frame .hero-composite.active .sea-route-mid,
  .public-page .hero-composite.active .sunset-route-low,
  .preview-frame .hero-composite.active .sunset-route-low {
    animation: bondi-native-route-drift-alt 26000ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }

  .public-page .hero-composite.active .sea-globe,
  .preview-frame .hero-composite.active .sea-globe,
  .public-page .hero-composite.active .sunset-globe,
  .preview-frame .hero-composite.active .sunset-globe {
    animation: bondi-native-globe-turn 28000ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }

  .public-page .hero-composite.active .sea-ship-wave,
  .preview-frame .hero-composite.active .sea-ship-wave,
  .public-page .hero-composite.active .sunset-ship-wave,
  .preview-frame .hero-composite.active .sunset-ship-wave {
    animation: bondi-native-wave 5200ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }

  .public-page .hero-composite.active .sea-plane,
  .preview-frame .hero-composite.active .sea-plane {
    animation: bondi-native-plane 24000ms linear infinite;
  }

  .public-page .hero-composite.active .sea-box-a,
  .preview-frame .hero-composite.active .sea-box-a,
  .public-page .hero-composite.active .sunset-box-a,
  .preview-frame .hero-composite.active .sunset-box-a {
    animation: bondi-native-box-a 12800ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }

  .public-page .hero-composite.active .sea-box-b,
  .preview-frame .hero-composite.active .sea-box-b,
  .public-page .hero-composite.active .sunset-box-b,
  .preview-frame .hero-composite.active .sunset-box-b {
    animation: bondi-native-box-b 14800ms cubic-bezier(0.45, 0, 0.25, 1) 900ms infinite alternate;
  }

  .public-page .hero-composite.active .sunset-truck,
  .preview-frame .hero-composite.active .sunset-truck {
    animation: bondi-native-truck 9600ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }

  .public-page .hero-composite.active .sunset-factory,
  .preview-frame .hero-composite.active .sunset-factory {
    animation: bondi-native-pulse 11800ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }
}

@keyframes bondi-native-route-drift {
  from { transform: translate3d(-4px, 2px, 0); }
  to { transform: translate3d(6px, -3px, 0); }
}

@keyframes bondi-native-route-drift-alt {
  from { transform: translate3d(5px, -2px, 0); }
  to { transform: translate3d(-7px, 4px, 0); }
}

@keyframes bondi-native-globe-turn {
  from { transform: translate3d(-3px, 0, 0) scaleX(0.992); }
  to { transform: translate3d(5px, -1px, 0) scaleX(1.008); }
}

@keyframes bondi-native-wave {
  from { transform: translate3d(-5px, 2px, 0); }
  to { transform: translate3d(6px, -2px, 0); }
}

@keyframes bondi-native-plane {
  from { transform: translate3d(-8px, 3px, 0); }
  to { transform: translate3d(16px, -5px, 0); }
}

@keyframes bondi-native-box-a {
  from { transform: translate3d(-4px, 4px, 0); }
  to { transform: translate3d(10px, -12px, 0); }
}

@keyframes bondi-native-box-b {
  from { transform: translate3d(4px, -3px, 0); }
  to { transform: translate3d(-10px, 9px, 0); }
}

@keyframes bondi-native-truck {
  from { transform: translate3d(-2px, 1px, 0); }
  to { transform: translate3d(3px, -1px, 0); }
}

@keyframes bondi-native-pulse {
  from { transform: translate3d(0, 2px, 0); }
  to { transform: translate3d(0, -2px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .public-page .hero-native-motion-layer,
  .preview-frame .hero-native-motion-layer {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transform: translate3d(-50%, -50%, 0);
  }

  .public-page .hero-native-piece,
  .preview-frame .hero-native-piece {
    opacity: 0 !important;
    animation: none !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}

/* Rebuilt hero 3 data graphics: base photo has no baked-in icons, so this is the
   single source of line art. Keep it slow and quiet. */
.public-page .hero-line-layer,
.preview-frame .hero-line-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 3;
  width: auto;
  height: 100%;
  aspect-ratio: 1672 / 941;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-aspect-ratio: 1672 / 941) {
  .public-page .hero-line-layer,
  .preview-frame .hero-line-layer {
    width: 100%;
    height: auto;
  }
}

.public-page .hero-composite.active .hero-line-layer,
.preview-frame .hero-composite.active .hero-line-layer {
  opacity: 0.82;
}

.public-page .hero-line-map,
.preview-frame .hero-line-map {
  display: block;
  width: 100%;
  height: 100%;
  stroke: rgba(237, 244, 245, 0.52);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(255, 246, 218, 0.12));
}

.public-page .hero-line-art-img,
.preview-frame .hero-line-art-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.public-page .hero-line-layer canvas,
.preview-frame .hero-line-layer canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.public-page .hero-glass-canvas,
.preview-frame .hero-glass-canvas {
  z-index: 1;
}

.public-page .hero-globe-canvas,
.preview-frame .hero-globe-canvas {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.92;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.18));
  pointer-events: none;
}

.public-page .hero-slide[data-hero-slide="2"] .hero-ship-canvas,
.preview-frame .hero-slide[data-hero-slide="2"] .hero-ship-canvas {
  opacity: 0 !important;
  visibility: hidden !important;
}

.public-page .hero-line-layer-3 .hero-real-globe-inlay,
.preview-frame .hero-line-layer-3 .hero-real-globe-inlay {
  position: absolute;
  z-index: 7;
  left: 0;
  top: 36.13%;
  width: 21.54%;
  height: auto !important;
  aspect-ratio: 360 / 370;
  overflow: visible !important;
  opacity: 0 !important;
  visibility: hidden !important;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.2))
    drop-shadow(0 0 8px rgba(116, 218, 255, 0.08));
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: opacity;
}

.public-page .hero-line-layer-3 .hero-real-globe-inlay .globe,
.preview-frame .hero-line-layer-3 .hero-real-globe-inlay .globe,
.public-page .hero-line-layer-3 .hero-real-globe-inlay .globe-shell,
.preview-frame .hero-line-layer-3 .hero-real-globe-inlay .globe-shell {
  display: inline !important;
  visibility: visible !important;
}

.public-page .hero-line-layer-3 .hero-real-globe-inlay .globe-grid,
.preview-frame .hero-line-layer-3 .hero-real-globe-inlay .globe-grid,
.public-page .hero-line-layer-3 .hero-real-globe-inlay .globe-land,
.preview-frame .hero-line-layer-3 .hero-real-globe-inlay .globe-land {
  animation: none !important;
  transform: none !important;
}

.public-page .hero-line-layer-3 .hero-real-globe-inlay .globe-shell,
.preview-frame .hero-line-layer-3 .hero-real-globe-inlay .globe-shell {
  opacity: 0.68 !important;
}

.public-page .hero-line-layer-3 .hero-real-globe-inlay .globe > circle.faint,
.preview-frame .hero-line-layer-3 .hero-real-globe-inlay .globe > circle.faint {
  opacity: 0 !important;
}

.public-page .hero-line-layer-3 .hero-real-globe-inlay .globe-grid,
.preview-frame .hero-line-layer-3 .hero-real-globe-inlay .globe-grid {
  opacity: 0.7 !important;
}

.public-page .hero-line-layer-3 .hero-real-globe-inlay .globe-land,
.preview-frame .hero-line-layer-3 .hero-real-globe-inlay .globe-land {
  opacity: 0.84 !important;
}

@media (prefers-reduced-motion: no-preference) {
  .public-page .hero-composite.active .hero-line-layer-3 .hero-real-globe-inlay .globe,
  .preview-frame .hero-composite.active .hero-line-layer-3 .hero-real-globe-inlay .globe {
    animation: none !important;
    transform-box: view-box;
    transform-origin: 174px 522px;
  }

  .public-page .hero-composite.active .hero-line-layer-3 .hero-real-globe-inlay .globe-spin,
  .preview-frame .hero-composite.active .hero-line-layer-3 .hero-real-globe-inlay .globe-spin {
    animation: none !important;
    transform-box: view-box;
    transform-origin: 174px 522px;
    will-change: auto;
  }
}

.public-page .hero-line-layer-3 .hero-real-icon-inlay,
.preview-frame .hero-line-layer-3 .hero-real-icon-inlay {
  position: absolute;
  z-index: 8;
  height: auto !important;
  overflow: visible !important;
  opacity: 0.76;
  fill: none;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.2))
    drop-shadow(0 0 8px rgba(116, 218, 255, 0.08));
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

.public-page .hero-line-layer-3 .hero-real-icon-ship,
.preview-frame .hero-line-layer-3 .hero-real-icon-ship {
  left: 23.4%;
  top: 25.5%;
  width: 9.5%;
  aspect-ratio: 135 / 92;
}

.public-page .hero-line-layer-3 .hero-real-icon-inlay .icon,
.preview-frame .hero-line-layer-3 .hero-real-icon-inlay .icon {
  display: inline !important;
  opacity: 0.92 !important;
}

@media (prefers-reduced-motion: no-preference) {
  .public-page .hero-composite.active .hero-line-layer-3 .hero-real-icon-ship .ship-motion,
  .preview-frame .hero-composite.active .hero-line-layer-3 .hero-real-icon-ship .ship-motion {
    animation: shipBob 5600ms ease-in-out infinite !important;
  }

  .public-page .hero-composite.active .hero-line-layer-3 .hero-real-icon-ship .ship-wave,
  .preview-frame .hero-composite.active .hero-line-layer-3 .hero-real-icon-ship .ship-wave {
    stroke-dasharray: 5 6 !important;
    animation: bondi-real-ship-wave-loop 3600ms linear infinite !important;
  }
}

.public-page .hero-lines-canvas,
.preview-frame .hero-lines-canvas {
  z-index: 3;
}

.public-page .hero-ship-canvas,
.preview-frame .hero-ship-canvas {
  z-index: 4;
}

.public-page .hero-rocket-canvas,
.preview-frame .hero-rocket-canvas {
  z-index: 5;
}

.public-page .hero-truck-canvas,
.preview-frame .hero-truck-canvas {
  z-index: 6;
}

.public-page .hero-line-map :where(path, circle, ellipse),
.preview-frame .hero-line-map :where(path, circle, ellipse) {
  vector-effect: non-scaling-stroke;
}

.public-page .line-path,
.preview-frame .line-path {
  stroke-dasharray: 3 9;
  stroke-linecap: round;
  opacity: 0.78;
}

.public-page .line-path-sweep,
.preview-frame .line-path-sweep {
  stroke-dasharray: 18 24;
  opacity: 0.42;
}

.public-page .line-globe,
.preview-frame .line-globe {
  opacity: 0.8;
  transform-box: fill-box;
  transform-origin: center;
}

.public-page .globe-flow,
.preview-frame .globe-flow {
  stroke-dasharray: 9 12;
  opacity: 0.62;
}

.public-page .line-icon,
.preview-frame .line-icon {
  opacity: 0.76;
  transform-box: fill-box;
  transform-origin: center;
}

.public-page .line-ship .ship-wave,
.preview-frame .line-ship .ship-wave {
  stroke-dasharray: 12 10;
}

.public-page .line-truck .truck-wheel,
.preview-frame .line-truck .truck-wheel {
  stroke-dasharray: 8 6;
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .public-page .hero-composite.active .line-path,
  .preview-frame .hero-composite.active .line-path {
    animation: bondi-line-flow 52000ms linear infinite;
  }

  .public-page .hero-composite.active .line-path-mid,
  .preview-frame .hero-composite.active .line-path-mid {
    animation-duration: 62000ms;
    animation-direction: reverse;
  }

  .public-page .hero-composite.active .line-path-low,
  .preview-frame .hero-composite.active .line-path-low {
    animation-duration: 72000ms;
  }

  .public-page .hero-composite.active .line-path-sweep,
  .preview-frame .hero-composite.active .line-path-sweep {
    animation-duration: 84000ms;
  }

  .public-page .hero-composite.active .line-globe,
  .preview-frame .hero-composite.active .line-globe {
    animation: bondi-line-globe-turn 60000ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }

  .public-page .hero-composite.active .globe-flow,
  .preview-frame .hero-composite.active .globe-flow {
    animation: bondi-line-flow 48000ms linear infinite reverse;
  }

  .public-page .hero-composite.active .line-ship .ship-wave,
  .preview-frame .hero-composite.active .line-ship .ship-wave {
    animation: bondi-line-wave 12800ms linear infinite;
  }

  .public-page .hero-composite.active .line-truck .truck-wheel,
  .preview-frame .hero-composite.active .line-truck .truck-wheel {
    animation: bondi-line-wheel 15200ms linear infinite;
  }

  .public-page .hero-composite.active .line-box-left,
  .preview-frame .hero-composite.active .line-box-left,
  .public-page .hero-composite.active .line-box-top,
  .preview-frame .hero-composite.active .line-box-top,
  .public-page .hero-composite.active .line-box-mid,
  .preview-frame .hero-composite.active .line-box-mid {
    animation: bondi-line-box-drift 36000ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }

  .public-page .hero-composite.active .line-warehouse,
  .preview-frame .hero-composite.active .line-warehouse,
  .public-page .hero-composite.active .line-factory,
  .preview-frame .hero-composite.active .line-factory {
    animation: bondi-line-icon-breathe 32000ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }
}

@keyframes bondi-line-flow {
  to { stroke-dashoffset: -180; }
}

@keyframes bondi-line-globe-turn {
  from { transform: translate3d(-2px, 0, 0) scaleX(0.99); opacity: 0.66; }
  to { transform: translate3d(4px, -1px, 0) scaleX(1.012); opacity: 0.86; }
}

@keyframes bondi-line-wave {
  to { stroke-dashoffset: -72; }
}

@keyframes bondi-line-wheel {
  to { transform: rotate(360deg); }
}

@keyframes bondi-line-box-drift {
  from { transform: translate3d(-3px, 3px, 0); opacity: 0.58; }
  to { transform: translate3d(7px, -7px, 0); opacity: 0.82; }
}

@keyframes bondi-line-icon-breathe {
  from { transform: translate3d(0, 1px, 0); opacity: 0.62; }
  to { transform: translate3d(0, -2px, 0); opacity: 0.82; }
}

@media (prefers-reduced-motion: reduce) {
  .public-page .hero-line-layer,
  .public-page .hero-line-layer *,
  .preview-frame .hero-line-layer,
  .preview-frame .hero-line-layer * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .public-page .hero-composite.active .hero-line-layer,
  .preview-frame .hero-composite.active .hero-line-layer {
    opacity: 0.64;
  }
}

/* Hero 3 source-matched redraw. The glass/photo is the base image; only the
   original logistics line art is redrawn here so there is no duplicated raster
   texture or noisy cutout layer. */
.public-page .hero-line-map,
.preview-frame .hero-line-map {
  stroke: rgba(246, 249, 247, 0.58);
  stroke-width: 1.18;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.2))
    drop-shadow(0 0 6px rgba(255, 240, 198, 0.08));
}

.public-page .hero-composite.active .hero-line-layer,
.preview-frame .hero-composite.active .hero-line-layer {
  opacity: 0.96;
  mix-blend-mode: normal;
}

.public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3,
.preview-frame .hero-slide[data-hero-slide="2"] .hero-line-layer-3 {
  --hero-3-glass-edge-mask: linear-gradient(90deg,
    #000 0%,
    #000 39.4%,
    rgba(0, 0, 0, 0.82) 41.6%,
    rgba(0, 0, 0, 0.34) 44.2%,
    transparent 46%);
  --hero-3-line-art-edge-mask: linear-gradient(90deg,
    #000 0%,
    #000 35.8%,
    rgba(0, 0, 0, 0.76) 37.8%,
    rgba(0, 0, 0, 0.24) 39.8%,
    transparent 41.2%);
  --hero-3-line-art-curve-mask: radial-gradient(ellipse 44% 92% at 5% 51%,
    #000 0%,
    #000 58%,
    rgba(0, 0, 0, 0.78) 65%,
    rgba(0, 0, 0, 0.28) 71%,
    transparent 76%);
  --hero-3-globe-edge-mask: linear-gradient(90deg,
    #000 0%,
    #000 39.5%,
    rgba(0, 0, 0, 0.78) 42%,
    rgba(0, 0, 0, 0.28) 45%,
    transparent 48%);
  --hero-3-globe-curve-mask: radial-gradient(ellipse 52% 98% at 7% 53%,
    #000 0%,
    #000 63%,
    rgba(0, 0, 0, 0.72) 70%,
    rgba(0, 0, 0, 0.22) 77%,
    transparent 83%);
  --hero-3-glass-detail-edge-mask: linear-gradient(90deg,
    #000 0%,
    #000 38.2%,
    rgba(0, 0, 0, 0.64) 39.8%,
    rgba(0, 0, 0, 0.16) 41.2%,
    transparent 42%);
  --hero-3-glass-detail-curve-mask: radial-gradient(ellipse 48% 96% at 5% 51%,
    #000 0%,
    #000 38.2%,
    rgba(0, 0, 0, 0.68) 48%,
    rgba(0, 0, 0, 0.22) 56%,
    transparent 64%);
  opacity: 0;
  transition: opacity 720ms cubic-bezier(0.22, 0.74, 0.22, 1);
  -webkit-mask-image: var(--hero-3-glass-edge-mask);
  mask-image: var(--hero-3-glass-edge-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media (max-width: 860px) {
  .public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3,
  .preview-frame .hero-slide[data-hero-slide="2"] .hero-line-layer-3 {
    transform: translate3d(calc(-50% + 72px), -50%, 0);
  }
}

.public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3 .hero-glass-canvas,
.preview-frame .hero-slide[data-hero-slide="2"] .hero-line-layer-3 .hero-glass-canvas {
  -webkit-mask-image: var(--hero-3-glass-detail-edge-mask), var(--hero-3-glass-detail-curve-mask);
  mask-image: var(--hero-3-glass-detail-edge-mask), var(--hero-3-glass-detail-curve-mask);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: none;
}

.public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3 :where(.hero-lines-canvas, .hero-globe-canvas, .hero-ship-canvas, .hero-rocket-canvas, .hero-truck-canvas),
.preview-frame .hero-slide[data-hero-slide="2"] .hero-line-layer-3 :where(.hero-lines-canvas, .hero-globe-canvas, .hero-ship-canvas, .hero-rocket-canvas, .hero-truck-canvas) {
  -webkit-mask-image: var(--hero-3-line-art-edge-mask), var(--hero-3-line-art-curve-mask);
  mask-image: var(--hero-3-line-art-edge-mask), var(--hero-3-line-art-curve-mask);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: none;
}

.public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3 .hero-globe-canvas,
.preview-frame .hero-slide[data-hero-slide="2"] .hero-line-layer-3 .hero-globe-canvas {
  -webkit-mask-image: var(--hero-3-globe-edge-mask), var(--hero-3-globe-curve-mask);
  mask-image: var(--hero-3-globe-edge-mask), var(--hero-3-globe-curve-mask);
}

.public-page .hero-section.hero-3-settled .hero-slide[data-hero-slide="2"].active .hero-line-layer-3,
.preview-frame .hero-section.hero-3-settled .hero-slide[data-hero-slide="2"].active .hero-line-layer-3 {
  opacity: 0.96;
}

.public-page .hero-section.is-sliding .hero-slide[data-hero-slide="2"].active .hero-line-layer-3,
.preview-frame .hero-section.is-sliding .hero-slide[data-hero-slide="2"].active .hero-line-layer-3 {
  opacity: 0.9;
}

.hero-globe-only-debug .public-page .hero-section {
  background: #07121a;
}

.hero-globe-only-debug .public-page .hero-media {
  transition: none !important;
}

.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"] {
  background: #07121a !important;
}

.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"]::before,
.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"]::after,
.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"] .hero-slide-photo,
.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"] .hero-slide-copy,
.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"] .hero-collage,
.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"] .hero-native-motion-layer,
.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"] .hero-data-layer,
.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"] .hero-blueprint-overlay,
.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"] .hero-3-card-overlay,
.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3 .hero-glass-canvas,
.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3 .hero-lines-canvas,
.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3 .hero-ship-canvas,
.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3 .hero-rocket-canvas,
.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3 .hero-truck-canvas {
  opacity: 0 !important;
  visibility: hidden !important;
}

.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3 {
  opacity: 1 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  mix-blend-mode: normal !important;
}

.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3::before,
.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3::after {
  opacity: 0 !important;
  visibility: hidden !important;
}

.hero-globe-only-debug.public-page .hero-section {
  background: #07121a;
}

.hero-globe-only-debug.public-page .hero-media {
  transition: none !important;
}

.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"] {
  background: #07121a !important;
}

.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"]::before,
.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"]::after,
.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"] .hero-slide-photo,
.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"] .hero-slide-copy,
.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"] .hero-collage,
.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"] .hero-native-motion-layer,
.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"] .hero-data-layer,
.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"] .hero-blueprint-overlay,
.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"] .hero-3-card-overlay,
.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3 .hero-glass-canvas,
.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3 .hero-lines-canvas,
.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3 .hero-ship-canvas,
.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3 .hero-rocket-canvas,
.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3 .hero-truck-canvas {
  opacity: 0 !important;
  visibility: hidden !important;
}

.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3 {
  opacity: 1 !important;
  width: clamp(1500px, 145vw, 2300px) !important;
  height: auto !important;
  transform: translate3d(-14.83%, -55.48%, 0) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  mix-blend-mode: normal !important;
}

.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3::before,
.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3::after {
  opacity: 0 !important;
  visibility: hidden !important;
}

.hero-globe-only-debug.public-page :where(.site-header, .hero-dots, .hero-3-card-overlay, .hero-3-static-layer, .hero-photo-print) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.hero-globe-only-debug.public-page .hero-line-layer-3,
.hero-globe-only-debug .public-page .hero-line-layer-3 {
  opacity: 0 !important;
  visibility: hidden !important;
}

.hero-globe-only-debug .public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3 .hero-globe-canvas,
.hero-globe-only-debug.public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3 .hero-globe-canvas {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.2))
    drop-shadow(0 0 10px rgba(116, 218, 255, 0.08)) !important;
}

.hero-globe-only-debug.public-page .hero-globe-debug-overlay,
.hero-globe-only-debug .public-page .hero-globe-debug-overlay {
  display: none !important;
}

.hero-globe-only-debug.public-page .hero-globe-only-canvas,
.hero-globe-only-debug .public-page .hero-globe-only-canvas {
  position: fixed !important;
  z-index: 1000;
  left: 50vw;
  top: 52vh;
  width: clamp(380px, 34vw, 680px);
  height: auto !important;
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  pointer-events: none;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.22))
    drop-shadow(0 0 14px rgba(115, 210, 238, 0.1));
}

.hero-globe-only-debug.public-page .hero-globe-debug-overlay,
.hero-globe-only-debug .public-page .hero-globe-debug-overlay {
  position: fixed !important;
  z-index: 999;
  left: clamp(178px, 20vw, 340px);
  top: 54vh;
  width: clamp(300px, 24vw, 440px);
  height: auto !important;
  aspect-ratio: 360 / 370;
  overflow: visible !important;
  translate: -50% -50%;
  transform: none;
  opacity: 1 !important;
  visibility: visible !important;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.22))
    drop-shadow(0 0 14px rgba(115, 210, 238, 0.1));
  pointer-events: none;
}

.hero-globe-only-debug.public-page .hero-real-globe-overlay .globe,
.hero-globe-only-debug .public-page .hero-real-globe-overlay .globe,
.hero-globe-only-debug.public-page .hero-real-globe-overlay .globe-shell,
.hero-globe-only-debug .public-page .hero-real-globe-overlay .globe-shell {
  display: inline !important;
  visibility: visible !important;
}

.hero-globe-only-debug.public-page .hero-real-globe-overlay .globe,
.hero-globe-only-debug .public-page .hero-real-globe-overlay .globe {
  animation: bondi-globe-slow-turn 21000ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate !important;
  transform-box: view-box;
  transform-origin: 174px 522px;
}

.hero-globe-only-debug.public-page .hero-real-globe-overlay .globe-shell,
.hero-globe-only-debug .public-page .hero-real-globe-overlay .globe-shell {
  opacity: 0.72 !important;
}

.hero-globe-only-debug.public-page .hero-real-globe-overlay .globe > circle.faint,
.hero-globe-only-debug .public-page .hero-real-globe-overlay .globe > circle.faint {
  opacity: 0 !important;
}

.hero-globe-only-debug.public-page .hero-real-globe-overlay .globe-grid,
.hero-globe-only-debug .public-page .hero-real-globe-overlay .globe-grid {
  opacity: 0.7 !important;
}

.hero-globe-only-debug.public-page .hero-real-globe-overlay .globe-land,
.hero-globe-only-debug .public-page .hero-real-globe-overlay .globe-land {
  opacity: 0.84 !important;
}

.hero-globe-only-debug.public-page .hero-real-globe-overlay .globe-spin,
.hero-globe-only-debug .public-page .hero-real-globe-overlay .globe-spin {
  transform-box: view-box;
  transform-origin: 174px 522px;
  animation: bondi-globe-meridian 7600ms linear infinite !important;
  will-change: transform, stroke-dashoffset;
}

.public-page .hero-line-map :where(path, circle, ellipse),
.preview-frame .hero-line-map :where(path, circle, ellipse) {
  shape-rendering: geometricPrecision;
}

.public-page .line-path,
.preview-frame .line-path,
.public-page .line-connector,
.preview-frame .line-connector {
  stroke-dasharray: 2.4 8.5;
  opacity: 0.72;
}

.public-page .line-path-fine,
.preview-frame .line-path-fine {
  opacity: 0.45;
}

.public-page .line-connector,
.preview-frame .line-connector {
  stroke-dasharray: 1.4 7;
  opacity: 0.42;
}

.public-page .line-globe,
.preview-frame .line-globe {
  opacity: 0.92;
}

.public-page .globe-grid,
.preview-frame .globe-grid {
  opacity: 0.68;
  transform-box: fill-box;
  transform-origin: center;
}

.public-page .globe-land,
.preview-frame .globe-land {
  opacity: 0.7;
  transform-box: fill-box;
  transform-origin: center;
}

.public-page .globe-flow,
.preview-frame .globe-flow {
  stroke-dasharray: 12 14;
  opacity: 0.5;
}

.public-page .line-icon,
.preview-frame .line-icon {
  opacity: 0.88;
}

.public-page .line-warehouse,
.preview-frame .line-warehouse {
  opacity: 0.84;
}

.public-page .line-ship,
.preview-frame .line-ship {
  opacity: 0.92;
  transform-box: fill-box;
  transform-origin: center;
}

.public-page .ship-wave,
.preview-frame .ship-wave {
  stroke-dasharray: 13 11;
  opacity: 0.72;
}

.public-page .line-factory,
.preview-frame .line-factory {
  opacity: 0.78;
}

.public-page .line-box,
.preview-frame .line-box {
  opacity: 0.82;
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .public-page .hero-composite.active .line-path,
  .preview-frame .hero-composite.active .line-path {
    animation: bondi-line-flow 38000ms linear infinite;
  }

  .public-page .hero-composite.active .line-path-mid,
  .preview-frame .hero-composite.active .line-path-mid {
    animation-duration: 43000ms;
    animation-direction: reverse;
  }

  .public-page .hero-composite.active .line-path-low,
  .preview-frame .hero-composite.active .line-path-low {
    animation-duration: 50000ms;
  }

  .public-page .hero-composite.active .line-connector,
  .preview-frame .hero-composite.active .line-connector {
    animation: bondi-line-flow 46000ms linear infinite;
  }

  .public-page .hero-composite.active .line-globe,
  .preview-frame .hero-composite.active .line-globe {
    animation: none;
  }

  .public-page .hero-composite.active .globe-grid,
  .preview-frame .hero-composite.active .globe-grid,
  .public-page .hero-composite.active .globe-land,
  .preview-frame .hero-composite.active .globe-land {
    animation: bondi-globe-horizontal-turn 34000ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }

  .public-page .hero-composite.active .globe-flow,
  .preview-frame .hero-composite.active .globe-flow {
    animation: bondi-line-flow 30000ms linear infinite reverse;
  }

  .public-page .hero-composite.active .line-ship,
  .preview-frame .hero-composite.active .line-ship {
    animation: bondi-ship-float 15500ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }

  .public-page .hero-composite.active .line-ship .ship-wave,
  .preview-frame .hero-composite.active .line-ship .ship-wave {
    animation: bondi-line-wave 12800ms linear infinite;
  }

  .public-page .hero-composite.active .line-truck .truck-wheel,
  .preview-frame .hero-composite.active .line-truck .truck-wheel {
    animation: bondi-line-wheel 12800ms linear infinite;
  }

  .public-page .hero-composite.active .line-box-left,
  .preview-frame .hero-composite.active .line-box-left {
    animation: bondi-box-follow-left 26000ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }

  .public-page .hero-composite.active .line-box-top,
  .preview-frame .hero-composite.active .line-box-top {
    animation: bondi-box-follow-top 30000ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }

  .public-page .hero-composite.active .line-box-mid,
  .preview-frame .hero-composite.active .line-box-mid {
    animation: bondi-box-follow-mid 28000ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }

  .public-page .hero-composite.active .line-warehouse,
  .preview-frame .hero-composite.active .line-warehouse,
  .public-page .hero-composite.active .line-factory,
  .preview-frame .hero-composite.active .line-factory {
    animation: bondi-line-icon-breathe 22000ms cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  }
}

@keyframes bondi-globe-horizontal-turn {
  from { transform: translate3d(-5px, 0, 0) scaleX(0.94); opacity: 0.58; }
  50% { transform: translate3d(0, 0, 0) scaleX(1); opacity: 0.82; }
  to { transform: translate3d(5px, 0, 0) scaleX(0.94); opacity: 0.58; }
}

@keyframes bondi-ship-float {
  from { transform: translate3d(0, -1px, 0); }
  to { transform: translate3d(0, 2px, 0); }
}

@keyframes bondi-box-follow-left {
  from { transform: translate3d(-3px, 1px, 0); opacity: 0.58; }
  to { transform: translate3d(9px, -7px, 0); opacity: 0.86; }
}

@keyframes bondi-box-follow-top {
  from { transform: translate3d(-4px, 4px, 0); opacity: 0.56; }
  to { transform: translate3d(6px, -8px, 0); opacity: 0.86; }
}

@keyframes bondi-box-follow-mid {
  from { transform: translate3d(-3px, 4px, 0); opacity: 0.56; }
  to { transform: translate3d(7px, -9px, 0); opacity: 0.84; }
}

/* Hero 3: keep the original logistics image, then paste the generated
   white-bordered photo prints directly into the scene. The left glass arc is
   redrawn as static CSS to cover the jagged raster/canvas look without motion. */
.public-page .hero-slide[data-hero-slide="2"]::before,
.preview-frame .hero-slide[data-hero-slide="2"]::before {
  background:
    linear-gradient(90deg,
      rgba(3, 9, 14, 0.34) 0%,
      rgba(3, 9, 14, 0.32) 38%,
      rgba(3, 12, 18, 0.2) 43%,
      transparent 51%),
    linear-gradient(90deg,
      rgba(3, 9, 14, 0.9) 0%,
      rgba(3, 9, 14, 0.72) 31%,
      rgba(3, 12, 18, 0.25) 56%,
      rgba(3, 12, 18, 0.08) 100%),
    radial-gradient(ellipse at 80% 36%, rgba(72, 154, 194, 0.14), transparent 43%),
    linear-gradient(180deg, rgba(3, 9, 14, 0.08), rgba(3, 9, 14, 0.3));
}

.public-page .hero-slide[data-hero-slide="2"] .hero-slide-photo-main img,
.preview-frame .hero-slide[data-hero-slide="2"] .hero-slide-photo-main img {
  object-position: center center !important;
  filter: saturate(1.02) contrast(1.02) brightness(0.98);
  transform: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  .public-page .hero-slide[data-hero-slide="2"].active .hero-slide-photo-main,
  .preview-frame .hero-slide[data-hero-slide="2"].active .hero-slide-photo-main {
    animation: bondi-photo-field-in-soft 1480ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }
}

.public-page .hero-slide[data-hero-slide="2"].active .hero-slide-photo-main img,
.preview-frame .hero-slide[data-hero-slide="2"].active .hero-slide-photo-main img {
  animation: none !important;
}

.public-page .hero-slide[data-hero-slide="2"] .hero-data-layer,
.public-page .hero-slide[data-hero-slide="2"] .hero-slide-photo-sub,
.public-page .hero-slide[data-hero-slide="2"] .hero-collage,
.preview-frame .hero-slide[data-hero-slide="2"] .hero-data-layer,
.preview-frame .hero-slide[data-hero-slide="2"] .hero-slide-photo-sub,
.preview-frame .hero-slide[data-hero-slide="2"] .hero-collage {
  display: none !important;
}

.public-page .hero-slide[data-hero-slide="2"] .hero-3-static-layer,
.preview-frame .hero-slide[data-hero-slide="2"] .hero-3-static-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  contain: paint;
  pointer-events: none;
  display: none;
}

.public-page .hero-3-card-overlay,
.preview-frame .hero-3-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  contain: paint;
  pointer-events: none;
  opacity: 0;
  transition: opacity 360ms cubic-bezier(0.22, 0.74, 0.22, 1);
}

.public-page .hero-section.hero-3-settled .hero-3-card-overlay,
.preview-frame .hero-section.hero-3-settled .hero-3-card-overlay {
  opacity: 1;
}

.public-page .hero-3-card-overlay .hero-photo-print,
.preview-frame .hero-3-card-overlay .hero-photo-print {
  --print-enter-x: 18px;
  --print-enter-y: 10px;
  --print-rotate: 0deg;
  position: absolute;
  z-index: 4;
  margin: 0;
  opacity: 0;
  transform-origin: 50% 52%;
  transition:
    opacity 1280ms cubic-bezier(0.28, 0.02, 0.18, 1),
    transform 1480ms cubic-bezier(0.18, 0.72, 0.16, 1);
  transition-delay: 0ms;
  will-change: opacity, transform;
  filter:
    drop-shadow(0 16px 22px rgba(0, 9, 16, 0.2))
    drop-shadow(0 0 12px rgba(105, 184, 214, 0.05));
}

.public-page .hero-3-card-overlay .hero-photo-print-editable,
.preview-frame .hero-3-card-overlay .hero-photo-print-editable {
  aspect-ratio: var(--print-aspect);
}

.public-page .hero-3-card-overlay .hero-photo-print-editable .hero-photo-print__stack,
.preview-frame .hero-3-card-overlay .hero-photo-print-editable .hero-photo-print__stack {
  position: absolute;
  inset: 0;
  display: block;
  filter: saturate(1.03) contrast(1.03) brightness(0.98);
}

.public-page .hero-3-card-overlay .hero-photo-print-editable .hero-photo-print__paper,
.preview-frame .hero-3-card-overlay .hero-photo-print-editable .hero-photo-print__paper {
  position: absolute;
  z-index: 1;
  top: var(--print-paper-top);
  left: var(--print-paper-left);
  width: var(--print-paper-width);
  height: var(--print-paper-height);
  background: #fff;
  border-radius: 1px;
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.9) inset,
    0 2px 2px rgba(4, 10, 18, 0.24),
    0 12px 18px rgba(4, 10, 18, 0.18);
  transform: rotate(var(--print-photo-rotate));
  transform-origin: 0 0;
}

.public-page .hero-3-card-overlay .hero-photo-print-editable .hero-photo-print__photo,
.preview-frame .hero-3-card-overlay .hero-photo-print-editable .hero-photo-print__photo {
  position: absolute;
  z-index: 2;
  top: var(--print-photo-inset-top);
  right: var(--print-photo-inset-right);
  bottom: var(--print-photo-inset-bottom);
  left: var(--print-photo-inset-left);
  overflow: hidden;
}

.public-page .hero-3-card-overlay .hero-photo-print-editable .hero-photo-print__photo-img,
.preview-frame .hero-3-card-overlay .hero-photo-print-editable .hero-photo-print__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.public-page .hero-3-card-overlay .hero-photo-print-editable .hero-photo-print__pin,
.preview-frame .hero-3-card-overlay .hero-photo-print-editable .hero-photo-print__pin {
  position: absolute;
  display: block;
  z-index: 3;
  top: var(--print-pin-top);
  left: var(--print-pin-left);
  width: var(--print-pin-width);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  transform: translate3d(-50%, 0, 0) rotate(var(--print-pin-rotate, 0deg));
  transform-origin: 50% 52%;
  filter:
    drop-shadow(0 6px 4px rgba(0, 0, 0, 0.34))
    drop-shadow(0 1px 1px rgba(255, 255, 255, 0.2));
}

.public-page .hero-3-card-overlay .hero-photo-print-office,
.preview-frame .hero-3-card-overlay .hero-photo-print-office {
  --print-aspect: 1006 / 1014;
  --print-paper-top: 10.789%;
  --print-paper-left: -0.149%;
  --print-paper-width: 90.699%;
  --print-paper-height: 88.207%;
  --print-photo-inset-top: 2.036%;
  --print-photo-inset-right: 2.052%;
  --print-photo-inset-bottom: 2.036%;
  --print-photo-inset-left: 2.052%;
  --print-photo-rotate: -6.181deg;
  --print-pin-top: 0.265%;
  --print-pin-left: 44.936%;
  --print-pin-width: 11.450%;
  --print-pin-rotate: 0deg;
  top: 13%;
  left: clamp(610px, 44.6vw, 705px);
  width: clamp(152px, 13.4vw, 196px);
  --print-enter-x: 14px;
  --print-enter-y: -8px;
  --print-rotate: -5.5deg;
  --print-start-rotate: -7deg;
  --print-delay: 220ms;
  transform:
    translate3d(calc(var(--print-enter-x) * 1.18), calc(var(--print-enter-y) * 1.18), 0)
    rotate(var(--print-start-rotate))
    scale(0.965);
}

.public-page .hero-3-card-overlay .hero-photo-print-warehouse,
.preview-frame .hero-3-card-overlay .hero-photo-print-warehouse {
  --print-aspect: 906 / 1048;
  --print-paper-top: 3.015%;
  --print-paper-left: 6.015%;
  --print-paper-width: 92.696%;
  --print-paper-height: 92.727%;
  --print-photo-inset-top: 1.944%;
  --print-photo-inset-right: 2.967%;
  --print-photo-inset-bottom: 1.944%;
  --print-photo-inset-left: 2.967%;
  --print-photo-rotate: 3.240deg;
  --print-pin-top: -0.357%;
  --print-pin-left: 52.289%;
  --print-pin-width: 13.040%;
  --print-pin-rotate: 0deg;
  top: 11.5%;
  right: clamp(84px, 8vw, 150px);
  width: clamp(146px, 11.9vw, 178px);
  --print-enter-x: -12px;
  --print-enter-y: -7px;
  --print-rotate: 3.5deg;
  --print-start-rotate: 5deg;
  --print-delay: 380ms;
  transform:
    translate3d(calc(var(--print-enter-x) * 1.18), calc(var(--print-enter-y) * 1.18), 0)
    rotate(var(--print-start-rotate))
    scale(0.965);
}

.public-page .hero-3-card-overlay .hero-photo-print-truck,
.preview-frame .hero-3-card-overlay .hero-photo-print-truck {
  --print-aspect: 958 / 1020;
  --print-paper-top: 3.892%;
  --print-paper-left: 5.908%;
  --print-paper-width: 93.076%;
  --print-paper-height: 91.503%;
  --print-photo-inset-top: 2.054%;
  --print-photo-inset-right: 2.337%;
  --print-photo-inset-bottom: 2.054%;
  --print-photo-inset-left: 2.337%;
  --print-photo-rotate: 3.491deg;
  --print-pin-top: 1.017%;
  --print-pin-left: 52.360%;
  --print-pin-width: 11.790%;
  --print-pin-rotate: 0deg;
  right: clamp(54px, 5vw, 90px);
  bottom: 10%;
  width: clamp(170px, 14.2vw, 210px);
  --print-enter-x: -14px;
  --print-enter-y: 10px;
  --print-rotate: -3deg;
  --print-start-rotate: -4.5deg;
  --print-delay: 520ms;
  transform:
    translate3d(calc(var(--print-enter-x) * 1.18), calc(var(--print-enter-y) * 1.18), 0)
    rotate(var(--print-start-rotate))
    scale(0.965);
}

.public-page .hero-section.hero-3-settled .hero-3-card-overlay .hero-photo-print,
.preview-frame .hero-section.hero-3-settled .hero-3-card-overlay .hero-photo-print {
  opacity: 0.96;
  transform: translate3d(0, 0, 0) rotate(var(--print-rotate)) scale(1);
  transition-delay: var(--print-delay, 0ms);
}

.public-page .hero-3-card-overlay .hero-photo-print > img,
.preview-frame .hero-3-card-overlay .hero-photo-print > img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(1.03) contrast(1.03) brightness(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .public-page .hero-slide[data-hero-slide="2"] .hero-line-layer-3,
  .preview-frame .hero-slide[data-hero-slide="2"] .hero-line-layer-3,
  .public-page .hero-3-card-overlay,
  .preview-frame .hero-3-card-overlay,
  .public-page .hero-3-card-overlay .hero-photo-print,
  .preview-frame .hero-3-card-overlay .hero-photo-print {
    transition: none;
  }

  .public-page .hero-3-card-overlay .hero-photo-print,
  .preview-frame .hero-3-card-overlay .hero-photo-print {
    will-change: auto;
  }

  .public-page .hero-section.hero-3-settled .hero-3-card-overlay .hero-photo-print,
  .preview-frame .hero-section.hero-3-settled .hero-3-card-overlay .hero-photo-print {
    transition-delay: 0ms;
  }
}

@media (max-width: 860px) {
  .public-page .hero-section.hero-3-settled .hero-3-card-overlay .hero-photo-print,
  .preview-frame .hero-section.hero-3-settled .hero-3-card-overlay .hero-photo-print {
    opacity: 0.68;
  }

  .public-page .hero-3-card-overlay .hero-photo-print-office,
  .preview-frame .hero-3-card-overlay .hero-photo-print-office {
    top: 15%;
    left: 44%;
    width: min(33vw, 178px);
  }

  .public-page .hero-3-card-overlay .hero-photo-print-warehouse,
  .preview-frame .hero-3-card-overlay .hero-photo-print-warehouse {
    top: 28%;
    right: 2%;
    width: min(29vw, 154px);
  }

  .public-page .hero-3-card-overlay .hero-photo-print-truck,
  .preview-frame .hero-3-card-overlay .hero-photo-print-truck {
    right: 3%;
    bottom: 6%;
    width: min(38vw, 202px);
  }
}

/* =========================================================================
   Mobile QA fixes (2026-06-06) — smartphone layout corrections.
   Scoped to max-width:860px so the PC (>=861px) layout is never affected.
   ========================================================================= */
@media (max-width: 860px) {
  /* PICKUP rail (home): desktop shows a horizontal snap-scroll rail. The prior mobile rule applied
     `grid-template-columns:1fr` to this FLEX container — a no-op — so only the first card fit and
     cards 2–5 were pushed out and hidden by overflow-x:clip (見切れ). Stack the cards vertically so
     every pickup is fully visible on phones. */
  .public-page .pickup-rail {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 16px;
  }

  .public-page .pickup-card {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    scroll-snap-align: none;
  }
}

/* =========================================================================
   Mobile hero simplification (2026-06-07) — scoped to max-width:860px.
   The hero is a desktop-built composite: per-slide "seam band" ::after
   pseudo-elements (blue diagonal on slide 1, right-side light streaks on
   slide 2, left clip-band on slide 3), a 1672x941 globe/ship/lines canvas
   layer (slide 3), and a section-level polaroid "photo-print" overlay.
   On a phone these are sized/placed for desktop and read as: a misaligned
   globe, a right-side seam, a black/odd block, and decorations bleeding
   over the copy when the slider wraps. The base composite ::before tint
   also overrides the mobile legibility scrim, hurting text contrast.
   Per the client's decision we present a CLEAN photo + copy hero on mobile
   and hide every desktop decoration. PC (>=861px) is NOT touched. */
@media (max-width: 860px) {
  /* 1) Remove the decorative seam-band ::after pseudo-elements that leak
        from base CSS onto every slide (these are the "blue block",
        "right side weird", and slide-edge bands the client reported). */
  .public-page .hero-composite::after,
  .public-page .hero-composite-center::after,
  .public-page .hero-composite-right::after,
  .public-page .hero-composite-left::after,
  .public-page .hero-composite.active::after {
    display: none !important;
    content: none !important;
    background: none !important;
    animation: none !important;
  }

  /* 2) Restore a single clean dark legibility scrim on the shared ::before
        (the base .hero-composite::before tint otherwise out-specifies the
        mobile .hero-slide::before and washes out the white copy). Darkest
        at the bottom where the copy sits. */
  .public-page .hero-composite::before,
  .public-page .hero-composite-center::before,
  .public-page .hero-composite-right::before,
  .public-page .hero-composite-left::before {
    /* 2026-06-08 v2: keep this scrim UNDER the photo (z-index:1). The darkening is now done
       by a FILTER on the photo itself (see the .hero-slide-photo-main rule below). Earlier we
       raised this scrim to its own layer above the photo (z-index:2) to make the darkening
       visible — but that extra layer flashed for ONE frame on iOS during the translateX slide
       transition (the "一瞬光る" the client saw going 1->2->3). Darkening the photo's own layer
       instead removes that separate layer entirely, so there is nothing to flash, and the dim
       is perfectly uniform (no concentrated dark band behind the slide-3 headline). */
    z-index: 1 !important;
  }

  /* Uniform photo dim (replaces the scrim-based darkening). Applied to the photo figure so it
     lives on the SAME compositing layer as the image — no extra layer to flash mid-slide — and
     overrides the layout-1 *brightening* filter that made slide 1 read especially bright. */
  .public-page .hero-slide-photo-main,
  .preview-frame .hero-slide-photo-main {
    filter: brightness(0.62) saturate(1.06) !important;
  }

  /* copy stays above everything (harmless now the scrim is back under the photo) */
  .public-page .hero-slide .hero-slide-copy,
  .preview-frame .hero-slide .hero-slide-copy {
    z-index: 5 !important;
  }

  /* 3) Hide the elaborate desktop-only decoration / animation layers:
        globe-ship-lines canvases (slide 3, misaligned 1672x941 layer),
        the section-level polaroid photo-print overlay (the "black block"
        that bleeds over slide 1 on wrap), the floating sub-thumbnail
        (right-side seam), the collage, the SANKYU band, and any data /
        native-motion layers. Leaves only photo + scrim + copy + dots. */
  .public-page .hero-slide .hero-line-layer,
  .public-page .hero-slide .hero-line-layer-3,
  .public-page .hero-3-card-overlay,
  .public-page .hero-slide .hero-3-static-layer,
  .public-page .hero-photo-print,
  .public-page .hero-slide .hero-native-motion-layer,
  .public-page .hero-slide .hero-data-layer,
  .public-page .hero-slide .hero-data-map,
  .public-page .hero-slide .hero-data-globe,
  .public-page .hero-slide .hero-collage,
  .public-page .hero-slide .hero-slide-photo-sub,
  .public-page .hero-sankyu-band {
    display: none !important;
  }

  /* 4) Intro: the white BONDI logo blended into its own glassy frame
        backing (a translucent white gradient + backdrop-blur over the
        bright video). Darken the backing on mobile so the white mark
        always stays legible at the start of the intro. (::before only —
        the logo element keeps its reveal animation untouched.) */
  .public-page .home-intro-logo-frame::before {
    /* 2026-06-08: the white-square-over-logo is an iOS-Safari compositing bug. It has TWO
       triggers and we kill both on mobile: (1) backdrop-filter over a <video> => force none,
       (2) a TRANSLUCENT card lets a bright video frame (sky/water/wake) bleed through and read
       as a washed-out white box => make the card FULLY OPAQUE dark navy. Desktop (>=861px)
       keeps the translucent glass card untouched. */
    background:
      linear-gradient(104deg, rgb(8, 26, 38), rgb(11, 46, 66) 52%, rgb(8, 26, 38) 100%) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* =========================================================================
   2026-06-08: client asked to SHOW the slide-3 pinned polaroids on mobile too
   (office / warehouse / truck, each with a colored pin). They were hidden above
   with the other desktop hero decorations. Here we un-hide ONLY the card overlay
   + the 3 photo-prints (the globe/line-art/static layers stay hidden) and re-place
   them SMALL across the TOP of the slide, so they never cover the headline/lead
   which sit bottom-left on mobile. Fixed opacity + rotate-only transform so they
   render without the desktop settle animation. This block is AFTER the hide rules
   in source order and uses higher specificity, so it wins. PC (>=861px) unchanged. */
@media (max-width: 860px) {
  .public-page .hero-3-card-overlay,
  .preview-frame .hero-3-card-overlay {
    display: block !important;
    z-index: 3 !important;
    pointer-events: none;
  }
  .public-page .hero-3-card-overlay .hero-photo-print,
  .preview-frame .hero-3-card-overlay .hero-photo-print {
    display: block !important;
    opacity: 0.97 !important;
  }
  /* Layout: 2 photos along the TOP (fully visible, not clipped at the edges) + 1 photo at
     the BOTTOM-right (clear of the left-aligned headline/lead). Client request.
     2026-06-08 fix: the mobile header is a SOLID white bar (~63px tall, painted at z-index
     above the hero). The two top prints sat at top:6.5% (~43px), so their upper ~25px was
     HIDDEN BEHIND that white header — reading as "上が途切れている / 写真が入り込んでいない".
     Pushed to top:12% (~80px) so they clear the header with ~17px breathing room and render
     fully visible, and trimmed to 30vw so they stay well above the kicker/headline. */
  .public-page .hero-3-card-overlay .hero-photo-print-office,
  .preview-frame .hero-3-card-overlay .hero-photo-print-office {
    top: 12% !important;
    left: 4.5% !important;
    right: auto !important;
    bottom: auto !important;
    width: 30vw !important;
    transform: rotate(-5deg) !important;
  }
  .public-page .hero-3-card-overlay .hero-photo-print-warehouse,
  .preview-frame .hero-3-card-overlay .hero-photo-print-warehouse {
    top: 12% !important;
    right: 4.5% !important;
    left: auto !important;
    bottom: auto !important;
    width: 30vw !important;
    transform: rotate(5deg) !important;
  }
  .public-page .hero-3-card-overlay .hero-photo-print-truck,
  .preview-frame .hero-3-card-overlay .hero-photo-print-truck {
    top: auto !important;
    bottom: 13% !important;
    right: 6% !important;
    left: auto !important;
    width: 34vw !important;
    transform: rotate(-4deg) !important;
  }
}

/* =========================================================================
   Mobile form fields (2026-06-07) — full all-page audit found the contact
   form inputs at 14.4px. iOS Safari auto-zooms the viewport whenever a
   focused field's font-size is < 16px, causing an unwanted jump/zoom on
   tap. Bump form fields to 16px on mobile only (PC >=861px unchanged).
   This was the only actionable issue from the all-page mobile sweep;
   every other page audited clean. */
@media (max-width: 860px) {
  .public-page .contact-form input,
  .public-page .contact-form select,
  .public-page .contact-form textarea,
  .public-page form input[type="text"],
  .public-page form input[type="email"],
  .public-page form input[type="tel"],
  .public-page form input[type="search"],
  .public-page form select,
  .public-page form textarea {
    font-size: 16px;
  }
}

/* === bondi-spa-shell template: logo-fade intro (added) === */
/* WHITE logo-fade intro: the .home-intro--logo overlay is a WHITE base; the
   transparent DARK brand mark (brand-logo-dark.png, alpha-shaped, no baked-in
   box) fades in, the rule under it draws to full width (introRuleGrow), then —
   with the mark + rule STILL SHOWING above it — the hero-sankyu-band reveal
   stage opens (site.js waits for the rule's animationend). RE-TIMED TO THE
   ORIGINAL VIDEO INTRO (measured 2026-07-02): 966ms into the band sweep (35%,
   the original's video-fade beat, ≈1.76s BEFORE the band fully extends) the
   mark + rule dissolve OUT (copy-exiting, 650ms — the original footage's own
   fade duration) and the white base + tint fade OUT (650ms) start on the SAME
   beat, so the hero photos surface behind the departing mark while the band
   keeps running its ORIGINAL emerge CSS to the end — no extra band animation.
   These rules (1) mirror the white boot base,
   (2) centre the logo block and strip the dark-glass card that suited the old
   navy backdrop, (3) own the rule element + its grow/exit keyframes, and
   (4) style the text WORDMARK fallback (dark on white) that site.js swaps in
   when the /assets/brand/ logo asset 404s. */

/* White boot base — mirrors the inline critical CSS in index.html <head> so the
   white boot survives once this external stylesheet takes over (these override
   the dark #06243a boot rules earlier in this file; html.boot-sub subpage rules
   are more specific and keep their --soft base). */
/* color-scheme: light so a dark-mode UA never flashes its default dark canvas
   (rgb(18,18,18)) before FCP — the boot base + intro are white. Mirrors the
   inline <meta name=color-scheme content=light> + :root{color-scheme:light}. */
html {
  color-scheme: light;
}
html {
  background-color: #ffffff;
}
.public-page.is-booting {
  background-color: #ffffff;
}
#boot-veil {
  background: #ffffff;
}

/* White intro base: flat white, ink foreground, no dark vignette. */
.home-intro.home-intro--logo {
  color: var(--brand-strong);
  background: #ffffff;
}
.home-intro.home-intro--logo::before {
  /* the navy vignette gradients only made sense over the dark base */
  display: none;
}
/* Restore the fade-to-transparent hand-off (the white base rule above would
   otherwise out-cascade `.home-intro.intro-fading`, freezing the intro white
   over the photo hero). */
.home-intro.home-intro--logo.intro-fading {
  background-color: transparent;
}

.home-intro.home-intro--logo .home-intro-copy {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  /* Reordered intro (2026-07-02): the band stage (z-index 6) now opens WHILE the
     logo + rule are still showing — lift the copy above it so the mark stays
     visible on top of the spreading blue band until its own dissolve runs. */
  z-index: 7;
  width: max-content;
  max-width: calc(100% - 48px);
  text-align: center;
  transform: translate(-50%, -50%);
}

.home-intro.home-intro--logo .home-intro-logo-frame {
  margin-bottom: 0;
  padding: 0;
}

/* The dark glass card + its old static underline were designed for the navy
   backdrop; on white they read as a dirty dark box behind the mark. Drop both
   (desktop AND the mobile opaque-card variant). */
.home-intro.home-intro--logo .home-intro-logo-frame::before,
.home-intro.home-intro--logo .home-intro-logo-frame::after {
  display: none;
}

/* Transparent dark mark on white: keep the blur-in, drop the heavy dark
   drop-shadows (they smudge on a white base). */
.home-intro.home-intro--logo .home-intro-logo {
  width: clamp(150px, 16vw, 236px);
  filter: blur(5px);
}
.public-page.intro-active .home-intro--logo .home-intro-logo {
  animation: introLogoMarkRevealLight 860ms cubic-bezier(0.16, 1, 0.3, 1) 440ms forwards;
}
.home-intro.home-intro--logo.copy-exiting .home-intro-logo {
  /* 650ms — matches the ORIGINAL intro video's measured fade-out (≈647ms); the
     mark is the video's stand-in, so it leaves on the footage's own clock. */
  animation: introCopyLogoMarkOutLight 650ms cubic-bezier(0.22, 0.74, 0.22, 1) 0ms forwards;
}
.home-intro.home-intro--logo.copy-exiting .home-intro-logo-frame {
  /* Keep the (invisible) frame wrapper's exit on the SAME 650ms clock as the
     mark + rule inside it, so the whole unit fades as one 650ms dissolve. */
  animation-duration: 650ms;
}

@keyframes introLogoMarkRevealLight {
  52% {
    opacity: 1;
    filter: blur(0);
  }

  to {
    opacity: 0.98;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes introCopyLogoMarkOutLight {
  0% {
    opacity: 0.98;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    opacity: 0;
    filter: blur(1.6px);
    transform: translate3d(0, -8px, 0) scale(0.992);
  }
}

/* The rule under the mark: collapsed (scaleX 0) until the logo has revealed,
   then it DRAWS out to full width from the centre. site.js listens for this
   animation's `animationend` (name: introRuleGrow) and only then opens the
   band stage — the mark + rule stay visible above the spreading band and
   dissolve at the original's hand-over beat, 966ms into the sweep (while the
   band is still emerging — it fully extends ≈1.8s later). */
.home-intro.home-intro--logo .home-intro-rule {
  display: block;
  width: min(320px, 70vw);
  height: 2px;
  margin: clamp(18px, 2.8vh, 28px) auto 0;
  background: linear-gradient(
    90deg,
    rgba(6, 62, 91, 0) 0%,
    rgba(6, 62, 91, 0.85) 16%,
    #063e5b 50%,
    rgba(6, 62, 91, 0.85) 84%,
    rgba(6, 62, 91, 0) 100%
  );
  transform: scaleX(0);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* Delay (1350ms) starts the draw after the frame wipe (180+1180ms) and the mark
   reveal (440+860ms) have both settled; `both` holds the collapsed 0% during it. */
.public-page.intro-active .home-intro--logo .home-intro-rule {
  animation: introRuleGrow 1050ms cubic-bezier(0.22, 0.61, 0.21, 1) 1350ms both;
}

.home-intro.home-intro--logo.copy-exiting .home-intro-rule {
  /* stays fully extended while it fades — only opacity leaves, never the width;
     650ms: one clock with the mark + the white-base/tint cross-fade. */
  animation: introRuleOut 650ms cubic-bezier(0.22, 0.74, 0.22, 1) 0ms forwards;
}

@keyframes introRuleGrow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes introRuleOut {
  0% {
    opacity: 1;
    transform: scaleX(1) translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: scaleX(1) translate3d(0, -8px, 0);
  }
}

/* Text wordmark fallback (site.name) — mirrors .home-intro-logo's hidden base
   state so the same fade-in/out choreography applies; dark ink on the white base. */
.home-intro-wordmark {
  position: relative;
  z-index: 1;
  display: inline-block;
  opacity: 0;
  color: var(--brand-strong);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.12;
  white-space: nowrap;
  filter: blur(5px);
  transform: translate3d(-10px, 7px, 0) scale(0.985);
}

.public-page.intro-active .home-intro-wordmark {
  animation: introLogoMarkRevealLight 860ms cubic-bezier(0.16, 1, 0.3, 1) 440ms forwards;
}

.home-intro.copy-exiting .home-intro-wordmark {
  animation: introCopyLogoMarkOutLight 650ms cubic-bezier(0.22, 0.74, 0.22, 1) 0ms forwards;
}

@media (max-width: 860px) {
  .home-intro-wordmark {
    font-size: clamp(1.25rem, 6.4vw, 1.8rem);
  }

  .home-intro.home-intro--logo .home-intro-logo {
    width: clamp(140px, 38vw, 190px);
  }
}

/* SP可読性 (2026-07-02 モバイル390pxレビュー反映):
   カード見出し・サブ見出しが本文 (16px) と同等以下になり視覚階層が色頼みに
   なるのを補正する。PCは元デザインを維持し、SPのみサイズを引き上げる。 */
@media (max-width: 767px) {
  .public-page .partner-label,
  .preview-frame .partner-label {
    font-size: 1.1rem;
  }
  .public-page .pickup-card h3,
  .preview-frame .pickup-card h3 {
    font-size: 1.16rem;
  }
  .public-page .news-item h3,
  .preview-frame .news-item h3 {
    font-size: 1.13rem;
  }
}

/* SP可読性 (2026-07-03): ヘッダーのオレンジ「お問い合わせ」CTA を SP でも表示する。
   元は 860px 以下で .header-tools ごと非表示 (ハンバーガーのみ) だったが、
   PC と同じ問い合わせ導線をモバイルにも残す。ハンバーガーの左に小型表示。 */
@media (max-width: 860px) {
  .public-page .header-tools,
  .preview-frame .header-tools {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 10px;
  }
  .public-page .header-tools .header-cta,
  .preview-frame .header-tools .header-cta {
    min-width: 0;
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.78rem;
  }
}

/* === fidelity-fix (2026-07-03): baked circular hero motifs (hero-2 arc / hero-3 disc) ===
   原本ボンディでは hero-2 の写真 (bondi-hero-02-clean.jpg) に明るいガラス円弧帯、
   hero-3 の写真 (bondi-hero-03-base.jpg) に左の暗い巨大円盤が「焼き込み」されている。
   生成側の gpt-image-2 写真 (desktop-hero-ops-room / desktop-hero-parts-inspection) には
   このモチーフが無いため、円フィット実測 (fix-geometry.json) の座標で ::after 疑似要素として
   再現する。座標系は full-viewport の photo-main box (1440x900) を基準:
     hero-2 弧: 中心 7.1%W / 38.9%H・内径 39.8vw・帯外径 ~44.5vw
     hero-3 円盤: 中心 -12%W / 51%H・半径 56.8vw・内部 rgb(7,13,20)
   -center 用の photo-main::before/::after とは selector が異なり衝突しない。 */
@media (min-width: 861px) {
  .public-page .hero-composite-right .hero-slide-photo-main::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      radial-gradient(circle at 7.1% 38.9%,
        transparent 0 39.4vw, rgba(223, 239, 252, 0.5) 40.1vw,
        rgba(158, 216, 247, 0.26) 41.6vw, rgba(190, 229, 250, 0.32) 43.4vw, transparent 44.6vw),
      radial-gradient(circle at 7.1% 38.9%,
        transparent 0 44.2vw, rgba(8, 62, 108, 0.34) 45.6vw 100%);
  }
  .public-page .hero-composite-left .hero-slide-photo-main::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      radial-gradient(circle at -12% 51%,
        rgba(7, 13, 20, 0.94) 0 55.2vw, rgba(10, 16, 23, 0.88) 56.2vw,
        rgba(246, 238, 218, 0.5) 56.9vw, rgba(255, 255, 255, 0.12) 57.6vw, transparent 58.4vw);
  }
}

/* === SP fidelity (2026-07-04, hbr-01): ヒーロー h1 末尾句点「。」の行頭落ち禁則違反を解消 ===
   SP のヒーロー h1 は `.hero-slide-copy h1` (styles.css:569-576) の overflow-wrap:anywhere と
   `.public-page .hero-slide-copy h1` (styles.css:4913-4919) の word-break:keep-all が組み合わさり、
   keep-all で分割不能になった日本語連続を anywhere が禁則無視で緊急折返しするため、
   末尾「。」が単独行に落ちる (JIS X 4051 行頭句読点禁止違反 / A型 adm-05 と同型)。
   SP のみ word-break:normal で通常の日本語折返し (禁則付き) を復活させ、
   overflow-wrap:break-word で anywhere の禁則無視緊急折返しを予防する。
   同特異性 (0-2-1) だが末尾追記の後勝ちで確実に上書き。PC (>=861px) は不変。
   ライブ実証済み: 「港の動きを、止まら / ない商流へ変える。」の2行になり行頭句読点ゼロ。 */
@media (max-width: 860px) {
  .public-page .hero-slide-copy h1,
  .preview-frame .hero-slide-copy h1 {
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
  }
}