/* ──────────────────────────────────────────────────────────────────
   douzo union co.,ltd — doun.com.tw landing page
   Stylesheet v1.0 — 2026-05-23
   ────────────────────────────────────────────────────────────────── */


/* ═════════════ TOKENS ═════════════ */
:root {
  /* Palette */
  --ink:           #0A0A0A;
  --ink-soft:      #1E1B18;
  --white:         #FFFFFF;
  --cream:         #EAE4DC;
  --cream-warm:    #D6CFC6;
  --taupe:         #C2BBB3;
  --taupe-dark:    #8B847A;
  --sage:          #9E9B94;
  --gold:          #B8976A;
  --gold-soft:     #D4BA94;
  --rule:          #D8D2CB;
  --rule-soft:     #E5E0DA;
  --muted:         #8C8680;
  --muted-2:       #B8B3AD;

  /* Typography */
  --font-serif:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, system-ui,
                   'Helvetica Neue', Arial, sans-serif;
  --font-jp:       'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho',
                   serif;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-base:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-reveal:    1500ms;
  --dur-reveal-sm: 1200ms;
  --dur-hover:     500ms;
  --dur-nav:       600ms;

  /* Layout */
  --nav-h:         84px;
  --nav-h-mobile:  64px;
  --max-w:         1280px;
  --max-w-narrow:  720px;
  --pad-x:         clamp(24px, 5vw, 80px);
  --section-py:    clamp(120px, 16vw, 220px);
}


/* ═════════════ RESET ═════════════ */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  font-weight: 400;
  letter-spacing: 0.005em;
  overflow-x: hidden;
}

h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; border: 0; background: transparent; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }


/* ═════════════ LAYOUT PRIMITIVES ═════════════ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.container--narrow {
  max-width: var(--max-w-narrow);
}

.section {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
  position: relative;
}

.section-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold);
}

.section-heading {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.024em;
  color: var(--ink);
  max-width: 880px;
  margin-bottom: clamp(72px, 9vw, 120px);
}

.br-md { display: none; }
@media (min-width: 768px) { .br-md { display: inline; } }


/* ═════════════ NAV ═════════════ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: #0A0A0A;
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--dur-nav) var(--ease-base);
}

.nav.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
  z-index: 2;
}

.nav__brand {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1;
  position: relative;
  white-space: nowrap;
  transition: color var(--dur-hover) var(--ease-out-expo);
}

.nav__brand:hover { color: var(--gold); }

.nav__logo {
  height: 22px;
  width: auto;
  display: block;
  opacity: 0.92;
  transition: opacity var(--dur-hover) ease;
}

.nav__brand:hover .nav__logo { opacity: 1; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.8vw, 44px);
}

.nav__link {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  position: relative;
  padding: 6px 0;
  transition: color var(--dur-hover) var(--ease-out-expo);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-out-expo);
}

.nav__link:hover { color: var(--gold); }
.nav__link:hover::after { transform: scaleX(1); }

/* Log in pill — separate accent from other nav links */
.nav__login {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.32);
  padding: 8px 18px;
  margin-left: clamp(8px, 1.2vw, 18px);
  border-radius: 999px;
  transition:
    color var(--dur-hover) var(--ease-out-soft),
    border-color var(--dur-hover) var(--ease-out-soft),
    background-color var(--dur-hover) var(--ease-out-soft);
}

.nav__login:hover {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
}

/* Mobile toggle */
.nav__toggle {
  display: none;
  width: 36px;
  height: 36px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 7px;
  padding: 0;
}

.nav__toggle-bar {
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.88);
  transition: transform var(--dur-nav) var(--ease-out-expo),
              opacity var(--dur-nav) var(--ease-out-expo),
              width var(--dur-nav) var(--ease-out-expo);
}

.nav__toggle-bar:nth-child(2) { width: 18px; }

.nav.is-open .nav__toggle-bar:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
  width: 24px;
}

.nav.is-open .nav__toggle-bar:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
  width: 24px;
}

/* Mobile overlay */
.nav__overlay {
  position: fixed;
  inset: 0;
  background: #0A0A0A;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-nav) var(--ease-out-expo),
              visibility 0s linear var(--dur-nav);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.nav.is-open .nav__overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-nav) var(--ease-out-expo),
              visibility 0s linear 0s;
}

.nav__overlay-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.nav__overlay-link {
  font-family: var(--font-serif);
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out-expo),
              transform 600ms var(--ease-out-expo),
              color var(--dur-hover) var(--ease-out-expo);
}

.nav.is-open .nav__overlay-link {
  opacity: 1;
  transform: translateY(0);
}

.nav.is-open .nav__overlay-link:nth-child(1) { transition-delay: 100ms; }
.nav.is-open .nav__overlay-link:nth-child(2) { transition-delay: 160ms; }
.nav.is-open .nav__overlay-link:nth-child(3) { transition-delay: 220ms; }
.nav.is-open .nav__overlay-link:nth-child(4) { transition-delay: 280ms; }
.nav.is-open .nav__overlay-link:nth-child(5) { transition-delay: 340ms; }
.nav.is-open .nav__overlay-link:nth-child(6) { transition-delay: 400ms; }

.nav__overlay-link:hover { color: var(--gold); }

.nav__overlay-link--login {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  padding: 12px 30px;
  margin-top: 14px;
}


/* ═════════════ HERO ═════════════ */
.section--hero {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #1A1814;
  background-image: url('assets/hero-bg.jpg');
  background-size: cover;
  background-position: center 20%;
  overflow: hidden;
}

.section--hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(14, 12, 10, 0.35) 0%, rgba(14, 12, 10, 0.62) 100%),
    linear-gradient(
      170deg,
      rgba(14, 12, 10, 0.62) 0%,
      rgba(14, 12, 10, 0.42) 45%,
      rgba(14, 12, 10, 0.58) 100%
    );
  z-index: 0;
}

.hero__bg-jp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: clamp(140px, 28vw, 360px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.04);
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  will-change: transform;
}

.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  padding: 0 var(--pad-x);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: clamp(32px, 5vw, 56px);
}

.hero__eyebrow i {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--gold);
  transform: rotate(45deg);
}

.hero__headline {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(48px, 9.2vw, 132px);
  line-height: 0.96;
  letter-spacing: -0.028em;
  color: rgba(255, 255, 255, 0.96);
  margin-bottom: clamp(36px, 4.6vw, 56px);
}

.hero__subtitle {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(14px, 1.2vw, 16.5px);
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  margin: 0 auto clamp(56px, 7vw, 88px);
  letter-spacing: 0.015em;
}


.hero__jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 12.5px;
  letter-spacing: 0.55em;
  color: rgba(184, 151, 106, 0.9);
}

.hero__scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 1;
  opacity: 0;
  transition: opacity 1200ms var(--ease-out-expo) 1200ms;
}

.hero__scroll-hint.is-active { opacity: 1; }
.hero__scroll-hint.is-faded { opacity: 0; transition-duration: 600ms; transition-delay: 0ms; }

.hero__scroll-hint-label {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__scroll-hint-line {
  display: block;
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, var(--gold) 0%, transparent 100%);
  animation: scrollPulse 2.4s var(--ease-out-expo) infinite;
}

@keyframes scrollPulse {
  0%   { transform: scaleY(0.3); transform-origin: top; opacity: 0; }
  35%  { transform: scaleY(1);   transform-origin: top; opacity: 1; }
  65%  { transform: scaleY(1);   transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0);   transform-origin: bottom; opacity: 0; }
}


/* ═════════════ ABOUT ═════════════ */
.section--about {
  background: var(--cream);
}

.about__body {
  max-width: 760px;
}

.about__paragraph {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.85;
  font-weight: 300;
  color: var(--ink-soft);
  margin-bottom: 28px;
  letter-spacing: 0.005em;
}

.about__jp {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.4em;
  color: var(--gold);
  margin-top: 48px;
}


/* ═════════════ BRANDS ═════════════ */
.section--brands {
  background: var(--white);
}

.brands__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 4vw, 64px);
}

.brand-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

/* Visual area — frame fixed, inner <img> scales on hover */
.brand-card__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.brand-card__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 1300ms var(--ease-out-soft);
  will-change: transform;
  z-index: 0;
}

.brand-card__visual--maison .brand-card__visual-img { object-position: center 30%; }

/* Photo overlay — lighter so photos read clearer */
.brand-card__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 8, 6, 0.42) 0%,
    rgba(10, 8, 6, 0.14) 55%,
    rgba(10, 8, 6, 0.18) 100%
  );
  z-index: 1;
  transition: opacity 900ms var(--ease-out-soft);
}

.brand-card__visual--maison { background-color: #2A2724; }
.brand-card__visual--living { background-color: #3A3530; }
.brand-card__visual--space  { background-color: #2C2E28; }

/* ── Gallery Strip ─────────────────────────────────────────────── */

.gallery-strip {
  display: flex;
  height: clamp(280px, 36vw, 520px);
  overflow: hidden;
  gap: 2px;
  background: var(--ink);
}

.gallery-strip__img {
  flex: 1;
  background-size: cover;
  background-position: center;
  transition: flex 1200ms var(--ease-out-soft), filter 1200ms var(--ease-out-soft);
  filter: saturate(0.92);
}

.gallery-strip__img:hover {
  flex: 1.5;
  filter: saturate(1.05);
}

/* ── Brand Card Visual Logo ─────────────────────────────────────── */

.brand-card__visual-logo {
  position: relative;
  z-index: 2;
  width: clamp(160px, 70%, 280px);
  height: auto;
  opacity: 0.95;
  filter: brightness(0) invert(1);
}

/* douzo union logo is a horizontal wordmark, so it needs to be visually smaller */
.brand-card__visual--space .brand-card__visual-logo {
  width: clamp(120px, 48%, 200px);
}

.brand-card__visual-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  padding: 0 24px;
  line-height: 1.3;
}

.brand-card__visual-line {
  position: absolute;
  z-index: 2;
  bottom: 36%;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
  display: none;
}

.brand-card__visual--maison .brand-card__visual-line { display: block; }

/* Meta */
.brand-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
  flex-wrap: wrap;
}

.brand-card__location { line-height: 1; }

.brand-card__badge {
  padding: 4px 10px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  line-height: 1;
}

/* Name */
.brand-card__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.15;
  margin-top: -4px;
  text-align: center;
  min-height: 2.3em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Description — fixed min-height so all three cards align */
.brand-card__desc {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--ink-soft);
  max-width: 38em;
  min-height: 7.5em;
}

/* Caption — editorial style, NOT chip */
.brand-card__caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.6;
}

/* CTA */
.brand-card__cta {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.brand-card__cta--disabled {
  color: var(--muted-2);
  cursor: not-allowed;
}

/* Hover — image zooms in, card frame stays put */
@media (hover: hover) {
  .brand-card:hover .brand-card__visual-img { transform: scale(1.08); }
  .brand-card:hover .brand-card__visual::before { opacity: 0.85; }
  .brand-card:hover .brand-card__visual-logo {
    transform: scale(1.03);
    opacity: 1;
  }
  .brand-card__visual-logo {
    transition: transform 1100ms var(--ease-out-soft), opacity 900ms var(--ease-out-soft);
  }
}


/* ═════════════ BUSINESS FIELDS ═════════════ */
.section--business {
  background: var(--cream);
}

.fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 5vw, 80px) clamp(48px, 6vw, 96px);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.field__num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 0.06em;
  color: var(--gold);
  line-height: 1;
}

.field__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.2;
}

.field__desc {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-soft);
  max-width: 38em;
}


/* ═════════════ POINT OF VIEW ═════════════ */
.section--pov {
  background: var(--white);
}

.pov-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 4.4vw, 72px);
}

.pov {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  position: relative;
}

.pov::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 28px;
  height: 1px;
  background: var(--gold);
}

.pov__num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 0.06em;
  color: var(--gold);
  line-height: 1;
}

.pov__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.2;
}

.pov__desc {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-soft);
}


/* ═════════════ CONTACT ═════════════ */
.section--contact {
  background: var(--white);
  text-align: left;
}

.contact__intro {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: clamp(40px, 5vw, 56px);
}

/* ── Contact Form ── */
.contact-form {
  width: 100%;
  margin-bottom: clamp(48px, 7vw, 80px);
}

.contact-form__row--half {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 48px);
}

.contact-form__field {
  position: relative;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.contact-form__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  transition: color 300ms ease;
}

.contact-form__field:focus-within .contact-form__label {
  color: var(--gold);
}

.contact-form__input,
.contact-form__select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 10px 0 12px;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.1vw, 15px);
  font-weight: 300;
  color: var(--ink);
  outline: none;
  transition: border-color 300ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.contact-form__input:focus,
.contact-form__select:focus {
  border-bottom-color: var(--gold);
}

.contact-form__select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C8680' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 24px;
}

.contact-form__textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.1vw, 15px);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.7;
  outline: none;
  resize: vertical;
  min-height: 128px;
  transition: border-color 300ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.contact-form__textarea:focus {
  border-color: var(--gold);
}

.contact-form__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(16px, 2vw, 28px);
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: var(--white);
  border: none;
  padding: 17px 40px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: clamp(8px, 2vw, 16px);
  transition: background var(--dur-hover) ease, gap var(--dur-hover) ease;
}

.contact-form__submit:hover {
  background: var(--ink-soft);
  gap: 22px;
}

.contact-form__submit-arrow {
  font-size: 15px;
  line-height: 1;
  transition: transform var(--dur-hover) ease;
}

.contact-form__submit:hover .contact-form__submit-arrow {
  transform: translateX(4px);
}

/* ── Thank-you state ── */
.contact-thanks {
  padding: clamp(56px, 10vw, 112px) 0;
}

.contact-thanks[hidden] { display: none; }

.contact-thanks__line {
  font-family: var(--font-serif);
  font-size: 32px;
  color: var(--gold);
  margin-bottom: 28px;
  font-weight: 300;
}

.contact-thanks__heading {
  font-family: var(--font-serif);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 20px;
  line-height: 1.1;
}

.contact-thanks__body {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.8;
}

/* ── Company footer row ── */
.contact__company {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 2;
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: clamp(24px, 4vw, 36px);
  border-top: 1px solid var(--rule);
}

@media (max-width: 600px) {
  .contact-form__row--half {
    grid-template-columns: 1fr;
  }
}


/* ═════════════ FOOTER ═════════════ */
.footer {
  background: var(--cream);
  border-top: 1px solid var(--rule);
  padding: 36px 0;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.footer__copy,
.footer__line {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer__line {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: none;
  font-style: italic;
  color: var(--muted);
}


/* ═════════════ REVEAL ANIMATIONS (🟢 必做) ═════════════ */
.reveal {
  opacity: 0;
  transition:
    opacity var(--dur-reveal) var(--ease-out-soft),
    transform var(--dur-reveal) var(--ease-out-soft),
    clip-path var(--dur-reveal) var(--ease-out-soft);
  will-change: opacity, transform;
}

.reveal-up        { transform: translateY(80px) scale(0.98); }
.reveal-up-sm     {
  transform: translateY(36px);
  transition-duration: var(--dur-reveal-sm);
}
.reveal-scale     { transform: scale(0.94); }
.reveal-fade      { /* opacity only */ }

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger via data-delay (numeric ms) — gentler cadence for refined feel */
.reveal[data-delay="100"]  { transition-delay: 150ms; }
.reveal[data-delay="150"]  { transition-delay: 220ms; }
.reveal[data-delay="200"]  { transition-delay: 300ms; }
.reveal[data-delay="300"]  { transition-delay: 450ms; }
.reveal[data-delay="400"]  { transition-delay: 600ms; }
.reveal[data-delay="500"]  { transition-delay: 750ms; }
.reveal[data-delay="600"]  { transition-delay: 900ms; }
.reveal[data-delay="700"]  { transition-delay: 1050ms; }
.reveal[data-delay="800"]  { transition-delay: 1200ms; }


/* ═════════════ RESPONSIVE ═════════════ */

/* Tablet (≤ 1024) */
@media (max-width: 1024px) {
  .brands__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(40px, 5vw, 56px) clamp(32px, 4vw, 48px);
  }

  .brands__grid .brand-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 60%;
    margin: 0 auto;
  }

  .pov-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }
}

/* Mobile (≤ 768) */
@media (max-width: 768px) {
  :root {
    --nav-h: var(--nav-h-mobile);
  }

  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }

  .hero__bg-jp { font-size: clamp(96px, 36vw, 220px); }

  .brands__grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .brands__grid .brand-card:nth-child(3) {
    grid-column: auto;
    max-width: none;
    margin: 0;
  }

  .fields-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .pov-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Small mobile (≤ 480) */
@media (max-width: 480px) {
  .hero__eyebrow {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .hero__subtitle br { display: none; }
}


/* ═════════════ ACCESSIBILITY ═════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 200ms !important;
  }

  .reveal,
  .reveal-up,
  .reveal-up-sm,
  .reveal-scale {
    transform: none !important;
  }

  .hero__bg-jp { transform: translate(-50%, -50%) !important; }
  .hero__scroll-hint-line { animation: none !important; opacity: 0.6; transform: none; }
}

::selection {
  background: var(--gold);
  color: var(--white);
}