/* ============================================================
   v3 sub pages — Business / Company.
   Single color-block hero, vertical scroll, full content below.
============================================================ */

.sub-hero {
  min-height: 100svh;
  padding: calc(var(--header-h) + var(--space-5)) var(--gutter) var(--space-6);
  display: flex; align-items: center;
  position: relative;
  overflow: hidden;
}
.sub-hero--coral { background: var(--sec-coral); color: var(--ink); }
.sub-hero--cream { background: var(--sec-cream); color: var(--ink); }
.sub-hero--stone { background: var(--sec-stone); color: var(--ink); }
.sub-hero--rose  { background: var(--sec-rose); color: var(--ink); }

/* Note: the previous reveal-on-scroll fade-up has been removed by
   request — sub-pages now render content immediately with no entry
   effects. This also fixes news items being invisible after news.js
   replaced the static items (the new items weren't observed by
   IntersectionObserver, so .is-revealed was never set). */

.sub-hero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
}
.sub-hero__eyebrow {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: var(--space-4);
}
.sub-hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}
.sub-hero__lede {
  font-family: var(--font-jp);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 2;
  max-width: 640px;
  opacity: 0.85;
  margin-bottom: var(--space-5);
}

.back-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity var(--dur-fast), gap var(--dur-fast);
}
.back-link::before { content: "←"; font-size: 1.2em; }
.back-link:hover { opacity: 1; gap: 18px; }

/* Company full table */
.company-full {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 880px;
  margin-bottom: var(--space-5);
}
.company-full__item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--ink-line);
}
.company-full__term {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
}
.company-full__desc {
  font-family: var(--font-jp);
  font-size: var(--fs-base);
  line-height: 1.7;
}
.company-full__desc .placeholder { opacity: 0.5; }

@media (max-width: 720px) {
  .company-full__item { grid-template-columns: 1fr; gap: 6px; }
  /* Wrap body copy naturally to the phone width (drop desktop breaks). */
  .sub-hero__lede br { display: none; }
}

/* ============================================================
   News list
============================================================ */
.news-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 var(--space-5);
  max-width: 880px;
  border-top: 1px solid var(--ink-line);
}
.news-item {
  display: grid;
  grid-template-columns: 140px 100px 1fr;
  gap: var(--space-3);
  padding: clamp(14px, 1.6vw, 22px) 4px;
  border-bottom: 1px solid var(--ink-line);
  align-items: baseline;
  transition: background var(--dur-fast) var(--ease-out);
}
.news-item:hover { background: rgba(21, 22, 26, 0.04); }
.news-item__date {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  color: var(--ink);
  opacity: 0.75;
}
.news-item__cat {
  font-family: var(--font-en);
  font-size: var(--fs-xxs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
}
.news-item__title {
  font-family: var(--font-jp);
  font-size: var(--fs-base);
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.news-item__title:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .news-item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date cat"
      "title title";
    gap: 4px 12px;
  }
  .news-item__date  { grid-area: date; }
  .news-item__cat   { grid-area: cat; text-align: right; }
  .news-item__title { grid-area: title; padding-top: 4px; }
}

/* ============================================================
   Contact form
============================================================ */
.contact-form {
  margin: var(--space-4) 0 var(--space-4);
  max-width: 640px;
  display: grid;
  gap: var(--space-3);
}
.form-row { display: grid; gap: 8px; }
.form-label {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.85;
}
.form-label .req { color: var(--ink); opacity: 0.6; }

.form-input,
.form-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: var(--font-jp);
  font-size: var(--fs-base);
  color: var(--ink);
  outline: none;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--ink);
  opacity: 0.4;
}
.form-input:focus,
.form-textarea:focus {
  background: #fff;
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(21, 22, 26, 0.18);
}
.form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.7;
}

/* Honeypot — completely hidden from users + screen readers, visible to bots */
.form-honeypot {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  left: -9999px;
}

.form-note {
  font-family: var(--font-jp);
  font-size: var(--fs-xs);
  color: var(--ink);
  opacity: 0.6;
  margin-top: 4px;
  line-height: 1.6;
}

.form-actions {
  margin-top: var(--space-3);
}
.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 30px;
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), gap var(--dur-fast);
}
.form-submit:hover { background: transparent; color: var(--ink); gap: 20px; }
.form-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.form-submit__arrow { display: inline-block; transition: transform var(--dur-fast); }
.form-submit:hover .form-submit__arrow { transform: translateX(2px); }

.form-status {
  font-family: var(--font-jp);
  font-size: var(--fs-sm);
  min-height: 1.6em;
  margin-top: var(--space-2);
}
.form-status[data-kind="error"]   { color: #8B2A1F; }
.form-status[data-kind="loading"] { color: var(--ink); opacity: 0.7; }

/* Confirmation panel — shown after successful submit */
.form-confirmation {
  margin-top: var(--space-3);
  padding: clamp(20px, 3vw, 36px);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.45);
  max-width: 640px;
}
.form-confirmation__eyebrow {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
  margin-bottom: var(--space-2);
}
.form-confirmation__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}
.form-confirmation__title em {
  font-style: italic;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}
.form-confirmation__body {
  font-family: var(--font-jp);
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.form-confirmation__fallback {
  font-family: var(--font-jp);
  font-size: var(--fs-sm);
  color: var(--ink);
  opacity: 0.75;
}
.form-confirmation__fallback a { color: var(--ink); }

/* ============================================================
   Arrival cover — soft BLACK fade-in when reaching this page via the
   "Open Form" envelope transition. The envelope stage stays black, so
   the page arrives by fading out a black cover (no beige in between).
   Pre-painted (html.is-arriving) so there's no flash.
   ============================================================ */
.page-arrive {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #0c0d11;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
html.is-arriving { background: #0c0d11; }
html.is-arriving .page-arrive { opacity: 1; visibility: visible; }
.page-arrive.is-fading {
  opacity: 0;
  visibility: visible;
  transition: opacity 0.8s ease;
}

/* ============================================================
   Letter-envelope wrapper around the Contact form
   The envelope opens on page entry: wax seal cracks → flap
   rotates open → letter (the form fields) slides up like a
   sheet of 便箋 being drawn out of the envelope pocket.
   ============================================================ */
.contact-envelope {
  position: relative;
  max-width: 720px;
  margin: var(--space-5) auto 0;
  padding: clamp(72px, 9vh, 120px) clamp(20px, 4vw, 56px)
           clamp(40px, 6vh, 80px);
  perspective: 1400px;
}

/* Soft paper-cream "card" that backs the form — reads as the
   envelope's interior page once the flap opens. */
.contact-envelope__letter {
  position: relative;
  z-index: 2;
  padding: clamp(24px, 4vw, 44px);
  background: var(--paper);
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 20px 40px -10px rgba(21, 22, 26, 0.18),
    0 1px 4px rgba(21, 22, 26, 0.06);
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.55s,
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.55s;
}
.contact-envelope.is-open .contact-envelope__letter {
  opacity: 1;
  transform: translateY(0);
}

/* Envelope edges — thin paper borders that frame the letter on
   three sides (top is the flap). Subtle, hand-trimmed feel. */
.contact-envelope__edge {
  position: absolute;
  z-index: 1;
  background: linear-gradient(180deg, #efe7d4, #e6dec9);
}
.contact-envelope__edge--left,
.contact-envelope__edge--right {
  top: clamp(54px, 7vh, 92px);
  bottom: 0;
  width: clamp(8px, 1.2vw, 14px);
}
.contact-envelope__edge--left  { left: 0;  border-radius: 1px 0 0 2px; }
.contact-envelope__edge--right { right: 0; border-radius: 0 1px 2px 0; }
.contact-envelope__edge--bottom {
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(8px, 1.2vw, 14px);
  border-radius: 0 0 2px 2px;
}

/* The flap — triangle pointing down, hinged at the top edge.
   Starts closed (rotateX 0). On open, rotates outward 180° so
   the inside-paper face shows. */
.contact-envelope__flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(80px, 12vh, 140px);
  background: linear-gradient(160deg, #f3ecd9 0%, #e6dec9 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transform: rotateX(0deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.35s;
  z-index: 3;
  box-shadow:
    inset 0 -1px 0 rgba(21, 22, 26, 0.06),
    0 6px 18px -6px rgba(21, 22, 26, 0.18);
}
.contact-envelope.is-open .contact-envelope__flap {
  transform: rotateX(180deg);
}

/* Wax seal — embossed "404" disc dead-centre on the closed flap.
   Cracks open just before the flap rotates (a thin diagonal line
   appears, then the seal scales down and fades). */
.contact-envelope__seal {
  position: absolute;
  top: clamp(40px, 6vh, 72px);
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  width: clamp(50px, 6vw, 72px);
  height: clamp(50px, 6vw, 72px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%,
      rgba(255, 255, 255, 0.45) 0%,
      transparent 35%),
    radial-gradient(circle at 65% 70%,
      rgba(0, 0, 0, 0.25) 0%,
      transparent 60%),
    #8a2424;       /* deep wax red */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -3px 6px rgba(0, 0, 0, 0.35),
    0 3px 10px rgba(21, 22, 26, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease 0.05s,
              transform 0.5s cubic-bezier(0.7, 0, 0.6, 0.1);
  z-index: 4;
}
.contact-envelope__seal-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.7vw, 22px);
  color: #f5ecdc;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  user-select: none;
}
/* The crack appears as a thin diagonal line just before the flap
   opens — a subtle "snap" tell. */
.contact-envelope__seal-crack {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(118deg,
      transparent 47%,
      rgba(0, 0, 0, 0.6) 48%,
      rgba(0, 0, 0, 0.6) 52%,
      transparent 53%);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.contact-envelope.is-cracking .contact-envelope__seal-crack {
  opacity: 1;
}
.contact-envelope.is-cracking .contact-envelope__seal {
  transform: translate(-50%, -50%) rotate(-6deg) scale(1.05);
}
.contact-envelope.is-open .contact-envelope__seal {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-6deg) scale(0.4);
}

/* Mobile — smaller envelope, gentler animation distances */
@media (max-width: 720px) {
  .contact-envelope { padding-top: 84px; padding-bottom: var(--space-4); }
  .contact-envelope__letter { padding: 22px; transform: translateY(24px); }
}

/* Reduced motion — skip the choreography, render envelope already open */
@media (prefers-reduced-motion: reduce) {
  .contact-envelope__letter { opacity: 1; transform: none; transition: none; }
  .contact-envelope__flap { transform: rotateX(180deg); transition: none; }
  .contact-envelope__seal { opacity: 0; transition: none; }
}

/* ============================================================
   Business sub-page — service detail rows (no images, editorial)
   ============================================================ */
.biz-detail {
  background: var(--paper);
  padding: clamp(56px, 8vw, 120px) var(--gutter) clamp(40px, 6vw, 80px);
}
.biz-detail__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.biz-detail__row {
  display: grid;
  grid-template-columns: minmax(220px, 32%) 1fr;
  column-gap: clamp(40px, 6vw, 100px);
  align-items: flex-start;
  padding: clamp(40px, 5vw, 72px) 0;
  border-top: 1px solid var(--ink-line);
}
.biz-detail__row:first-child {
  border-top: none;
  padding-top: 0;
}
.biz-detail__row:last-child {
  padding-bottom: 0;
}

.biz-detail__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.biz-detail__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 7vw, 120px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-3);
  color: var(--ink);
}
.biz-detail__dash {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--ink);
  opacity: 0.55;
  margin-bottom: var(--space-2);
}
.biz-detail__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 52px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--ink);
}

.biz-detail__body { min-width: 0; }
.biz-detail__role {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-3);
  color: var(--ink);
}
.biz-detail__text {
  font-family: var(--font-jp);
  font-size: var(--fs-base);
  line-height: 2;
  margin: 0 0 var(--space-4);
  opacity: 0.85;
}
.biz-detail__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.biz-detail__list li {
  font-family: var(--font-jp);
  font-size: var(--fs-sm);
  line-height: 1.8;
  padding-left: 22px;
  position: relative;
  opacity: 0.78;
}
.biz-detail__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.55;
}

.biz-detail__cta {
  max-width: var(--maxw);
  margin: clamp(40px, 6vw, 80px) auto 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.biz-detail__cta .section-h__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 30px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.biz-detail__cta .section-h__cta:hover {
  background: var(--ink);
  color: var(--paper);
}

@media (max-width: 720px) {
  .biz-detail__row {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: var(--space-3);
    padding: clamp(28px, 6vw, 44px) 0;
  }
  .biz-detail__num { font-size: 48px; margin-bottom: var(--space-2); }
  .biz-detail__name { font-size: 26px; }
  .biz-detail__role { font-size: 14px; }
  .biz-detail__cta { flex-direction: column; }
}