:root {
  --brand-paper: #f5f0e6;
  --brand-paper-light: #fffdf8;
  --brand-ink: #171717;
  --brand-navy: #172033;
  --brand-vermilion: #ad321f;
  --brand-vermilion-dark: #842417;
  --brand-stone: #706a62;
  --brand-line: rgba(23, 23, 23, .16);
}

body {
  color: var(--brand-ink);
  background-color: var(--brand-paper);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(70, 56, 39, .035) 0 1px, transparent 1.5px),
    radial-gradient(circle at 76% 68%, rgba(70, 56, 39, .025) 0 1px, transparent 1.5px);
  background-size: 23px 19px, 31px 29px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .32;
  background: repeating-linear-gradient(94deg, transparent 0 7px, rgba(71, 58, 42, .018) 8px 9px);
}

.brand-header {
  background: rgba(255, 253, 248, .96) !important;
  border-bottom: 1px solid var(--brand-line) !important;
  box-shadow: 0 3px 18px rgba(23, 23, 23, .06) !important;
}

.brand-header-inner { min-height: 80px; }
.brand-logo { display: block; width: 150px; height: 68px; object-fit: contain; mix-blend-mode: multiply; }
.brand-header nav a { color: #393632; letter-spacing: .02em; }
.brand-header nav a:hover { color: var(--brand-vermilion); }
.brand-contact {
  border-radius: 2px !important;
  background: var(--brand-vermilion) !important;
  box-shadow: none !important;
  letter-spacing: .06em;
}
.brand-contact:hover { background: var(--brand-vermilion-dark) !important; }

.brand-hero {
  position: relative;
  min-height: 760px;
  padding: 150px 24px 88px;
  overflow: hidden;
  background: rgba(255, 253, 248, .78);
}
.brand-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,253,248,.96) 0%, rgba(255,253,248,.91) 44%, rgba(255,253,248,.15) 72%);
  z-index: 1;
}
.brand-hero-inner {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  align-items: center;
  gap: 54px;
}
.brand-hero-copy { max-width: 650px; }
.brand-eyebrow {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--brand-vermilion);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.brand-hero h1 {
  margin: 0;
  color: var(--brand-ink);
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: clamp(3rem, 4.6vw, 4.2rem);
  font-weight: 900;
  line-height: 1.26;
  letter-spacing: .01em;
}
.brand-hero h1 span { display: block; white-space: nowrap; }
.brand-hero-lead {
  max-width: 610px;
  margin-top: 28px;
  color: #46413b;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 2;
}
.brand-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.brand-button {
  display: inline-flex;
  min-height: 56px;
  padding: 14px 28px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .04em;
  border: 1px solid var(--brand-ink);
  border-radius: 2px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.brand-button:hover { transform: translateY(-2px); }
.brand-button-primary { color: #fff; border-color: var(--brand-vermilion); background: var(--brand-vermilion); }
.brand-button-primary:hover { background: var(--brand-vermilion-dark); }
.brand-button-secondary { color: var(--brand-ink); background: rgba(255,253,248,.88); }
.brand-points { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; color: #625d56; font-size: .82rem; font-weight: 700; }
.brand-points span::before { content: "—"; margin-right: 8px; color: var(--brand-vermilion); }
.brand-hero-media { position: relative; }
.brand-hero-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 54% center;
  filter: saturate(.78) contrast(1.02);
  box-shadow: 24px 26px 0 rgba(23,32,51,.08);
}
.brand-hero-media::after {
  content: "";
  position: absolute;
  left: -34px;
  right: 7%;
  bottom: -22px;
  height: 31px;
  opacity: .86;
  background: var(--brand-ink);
  clip-path: polygon(0 53%, 18% 15%, 44% 37%, 67% 0, 100% 48%, 93% 72%, 56% 66%, 22% 100%, 3% 76%);
}
.brand-seal {
  position: absolute;
  right: -26px;
  bottom: -50px;
  z-index: 2;
  width: 132px;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 50%;
  mix-blend-mode: multiply;
  transform: rotate(-7deg);
}

.brand-theme-section { background: var(--brand-paper-light) !important; }
body > section h2 { font-family: "Noto Serif JP", "Yu Mincho", serif; letter-spacing: .01em; }
.brand-section-heading { font-family: "Noto Serif JP", "Yu Mincho", serif; letter-spacing: .02em !important; }
.brand-section-heading::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin: 18px auto 0;
  background: var(--brand-vermilion);
}

body > section.bg-white, body > section.bg-gray-50, body > section.bg-slate-50 { background-color: var(--brand-paper-light) !important; }
body > section.bg-slate-100, body > section.bg-teal-50 { background-color: #eee9df !important; }
body > section.bg-primary { background-color: var(--brand-navy) !important; }
.text-accent { color: var(--brand-vermilion) !important; }
.bg-accent { background-color: var(--brand-vermilion) !important; }
.hover\:bg-accent-hover:hover { background-color: var(--brand-vermilion-dark) !important; }
.border-accent { border-color: var(--brand-vermilion) !important; }
.rounded-2xl, .rounded-xl, .rounded-lg { border-radius: 3px !important; }
.shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: 0 16px 42px rgba(23,23,23,.09) !important; }

.brand-footer { position: relative; overflow: hidden; background: #111827 !important; }
.brand-footer-logo { width: 220px; height: 112px; object-fit: contain; filter: invert(1) grayscale(1) brightness(2.2); mix-blend-mode: screen; }
.brand-footer-seal { position: absolute; right: 5%; bottom: -70px; width: 280px; opacity: .08; border-radius: 50%; mix-blend-mode: screen; }

@media (max-width: 900px) {
  .brand-header-inner { min-height: 64px; }
  .brand-logo { width: 115px; height: 54px; }
  .brand-hero { min-height: auto; padding: 112px 20px 70px; }
  .brand-hero::before { background: linear-gradient(180deg, rgba(255,253,248,.98) 0 52%, rgba(255,253,248,.4) 100%); }
  .brand-hero-inner { grid-template-columns: 1fr; gap: 42px; }
  .brand-hero h1 { font-size: clamp(2.35rem, 11.5vw, 4rem); }
  .brand-hero-media { width: calc(100% + 12px); margin-left: -6px; }
  .brand-seal { right: -5px; bottom: -38px; width: 100px; }
}

@media (max-width: 560px) {
  .brand-contact { padding: 9px 12px !important; font-size: .74rem !important; }
  .brand-hero-lead br { display: none; }
  .brand-actions { flex-direction: column; }
  .brand-button { width: 100%; }
  .brand-points { gap: 8px 14px; }
}

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