/* ============================================================
   Dream Asia — home page only
   (hero layout + small page-specific tweaks; tokens/components
    live in css/style.css)
   ============================================================ */

/* brand-card name: break at word boundaries only */
.brand-card__body h3 {
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}
/* brand-card name: shop name + branch on its own quiet line */
.brand-card__body h3 .branch {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin-top: 0.35em;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh; /* fallback */
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--sumi);
  overflow: clip;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      100deg,
      color-mix(in oklab, var(--sumi) 92%, transparent) 0%,
      color-mix(in oklab, var(--sumi) 72%, transparent) 40%,
      color-mix(in oklab, var(--sumi) 30%, transparent) 72%,
      transparent 100%
    ),
    linear-gradient(
      to top,
      var(--sumi) 3%,
      color-mix(in oklab, var(--sumi) 55%, transparent) 28%,
      transparent 60%
    );
}

/* vertical noren-style tagline, sits behind the copy */
.hero__tategaki {
  position: absolute;
  top: 50%;
  right: clamp(1.5rem, 5vw, 4.5rem);
  translate: 0 -50%;
  z-index: 0;
  font-size: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  letter-spacing: 0.24em;
  white-space: nowrap; /* keep to a single vertical column */
  max-height: 82svh;
  color: color-mix(in oklab, var(--cream) 52%, transparent);
  user-select: none;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  padding-block: clamp(6.5rem, 15vh, 9.5rem) clamp(4.5rem, 12vh, 7rem);
}
.hero__title {
  font-size: clamp(1.7rem, 1rem + 3.2vw, 3.4rem); /* 12 chars must fit one line */
  color: var(--cream);
  line-height: 1.45;
  margin: 0.45em 0 0.9em;
  text-shadow: 0 2px 24px rgb(32 27 21 / 0.45);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* scroll cue (pure CSS) */
.hero__scroll {
  position: absolute;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  left: 50%;
  translate: -50% 0;
  z-index: 1;
  width: 26px;
  height: 42px;
  display: grid;
  place-items: start center;
  padding-top: 8px;
  border: 2px solid color-mix(in oklab, var(--cream) 55%, transparent);
  border-radius: 999px;
}
.hero__scroll-dot {
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background: var(--cream);
  animation: hero-scroll 1.9s ease-in-out infinite;
}
@keyframes hero-scroll {
  0%   { opacity: 0; translate: 0 -2px; }
  30%  { opacity: 1; }
  60%  { opacity: 1; translate: 0 11px; }
  100% { opacity: 0; translate: 0 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-dot { animation: none; }
  .hero { scroll-behavior: auto; }
}

@media (max-width: 780px) {
  .hero__tategaki { display: none; }
}

/* ---------- Small shared "read more" link ---------- */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding-block: 0.25rem; /* 24px min target size */
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ember-deep);
}
.link-more::after {
  content: "\2192"; /* → */
  transition: translate 0.2s ease;
}
.link-more:hover { color: var(--ember); }
.link-more:hover::after { translate: 0.25em 0; }

/* ---------- Brand card actions (page-specific wrapper) ---------- */
.card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

/* ---------- Company snapshot ---------- */
.company__photo {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.company__cta {
  margin: var(--space-gap) 0 0;
}

/* ---------- Contact band phone ---------- */
.contact-tel {
  margin: 0.5em 0 1.6rem;
}
.contact-tel a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.1rem + 4.5vw, 3.4rem);
  letter-spacing: 0.05em;
  color: var(--ember);
  text-decoration: none;
  font-feature-settings: "tnum";
}
.contact-tel a:hover {
  color: var(--ember-deep);
}