/* =============================================
   DESIGN SYSTEM
   ============================================= */
:root {
  --ink: #111111;
  --ink-90: #1c1c1c;
  --ink-80: #282828;
  --ink-70: #3a3a3a;
  --ink-60: #505050;
  --ink-50: #6b6b6b;
  --ink-40: #888888;
  --ink-30: #a8a8a8;
  --ink-20: #c8c8c8;
  --ink-10: #e4e4e4;
  --cream: #f5f3ed;
  --cream-warm: #edeadf;
  --cream-deep: #e5e1d5;
  --white: #faf9f6;
  --accent: #a68a3e;
  --accent-sub: rgba(166,138,62,0.10);
  --serif: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --en: 'Cormorant Garamond', serif;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

/* Subtle paper texture */
body::after {
  content:'';
  position:fixed;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)' opacity='0.018'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:10000;
}

/* =============================================
   NAVIGATION
   ============================================= */
.nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:2000;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 clamp(24px,4vw,56px);
  transition: background 0.4s, height 0.4s, box-shadow 0.4s;
}
.nav--scrolled {
  background: rgba(245,243,237,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  height:64px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
/* On dark hero, nav text should be light */
.nav--hero-visible .nav-link,
.nav--hero-visible .ham span { color: rgba(245,243,237,0.85); }
.nav--hero-visible .ham span { background: rgba(245,243,237,0.85); }
.nav--hero-visible .nav-logo-img { filter: brightness(0) invert(1); opacity:0.9; }
.nav--hero-visible .nav-cta { border-color: rgba(245,243,237,0.4); color: rgba(245,243,237,0.85); }
.nav--hero-visible .nav-cta:hover { background: rgba(245,243,237,0.12); }

.nav-logo { cursor:pointer; display:flex; align-items:center; }
.nav-logo-img {
  height: 36px;
  transition: opacity 0.3s, filter 0.3s;
}

.nav-links {
  display:flex;
  align-items:center;
  gap: clamp(24px,3vw,40px);
}
.nav-link {
  font-size:11px;
  font-weight:600;
  letter-spacing:0.16em;
  color: var(--ink-60);
  transition: color 0.3s;
  padding-bottom:2px;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active {
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
}

.nav-cta {
  font-size:11px;
  font-weight:600;
  letter-spacing:0.12em;
  padding:9px 22px;
  border:1px solid var(--ink-70);
  color: var(--ink-70);
  transition: all 0.3s;
  margin-left:8px;
}
.nav-cta:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.ham {
  display:none;
  width:24px; height:16px;
  position:relative;
  z-index:2001;
}
.ham span {
  display:block;
  width:100%; height:1px;
  background: var(--ink);
  position:absolute;
  left:0;
  transition: all 0.35s var(--ease);
}
.ham span:nth-child(1){ top:0; }
.ham span:nth-child(2){ top:50%; }
.ham span:nth-child(3){ bottom:0; }
.ham.open span:nth-child(1){ top:50%; transform:rotate(45deg); background:var(--ink); }
.ham.open span:nth-child(2){ opacity:0; }
.ham.open span:nth-child(3){ bottom:50%; transform:rotate(-45deg); background:var(--ink); }

.mob-menu {
  position:fixed;
  inset:0;
  background: rgba(245,243,237,0.98);
  z-index:1999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:32px;
  opacity:0;
  visibility:hidden;
  transition: all 0.45s var(--ease);
}
.mob-menu.open { opacity:1; visibility:visible; }
.mob-menu a {
  font-family: var(--serif);
  font-size:18px;
  letter-spacing:0.12em;
  color: var(--ink);
  opacity:0;
  transform:translateY(16px);
  transition: all 0.4s var(--ease);
}
.mob-menu.open a { opacity:1; transform:translateY(0); }
.mob-menu.open a:nth-child(1){ transition-delay:0.08s; }
.mob-menu.open a:nth-child(2){ transition-delay:0.14s; }
.mob-menu.open a:nth-child(3){ transition-delay:0.20s; }
.mob-menu.open a:nth-child(4){ transition-delay:0.26s; }
.mob-menu.open a:nth-child(5){ transition-delay:0.32s; }

/* =============================================
   PAGE SYSTEM
   ============================================= */



/* =============================================
   HERO — FIRST VIEW (TOP)
   Compact, dramatic, dark, high-impact
   ============================================= */
.hero {
  min-height: 50vh;
  min-height: 50svh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  background: var(--ink);
}

/* Layered dark background with depth */
.hero-bg {
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(40,36,28,1) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(30,28,24,1) 0%, transparent 50%),
    linear-gradient(160deg, #0f0f0f 0%, #1a1815 40%, #14120f 100%);
}

/* Clean dark texture - no ornate pattern */
.hero-bg::before {
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 70% 30%, rgba(166,138,62,0.04) 0%, transparent 50%);
}

/* Subtle grain */
.hero-bg::after {
  content:'';
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E");
}

/* Decorative gold line */
.hero-accent-line {
  position:absolute;
  bottom: 0;
  left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0.3;
}

.hero-content {
  position:relative;
  z-index:1;
  text-align:center;
  padding:0 24px;
}

.hero-logo-wrap {
  margin-bottom: clamp(16px, 2.5vh, 24px);
  opacity:0;
  animation: fadeIn 0.9s 0.2s var(--ease) forwards;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.hero-logo-img {
  width: clamp(220px, 40vw, 360px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.hero-logo-sub {
  font-family: var(--en);
  font-size: clamp(11px, 1.6vw, 14px);
  font-weight: 300;
  letter-spacing: 0.35em;
  color: rgba(245,243,237,0.35);
}

.hero-catch {
  font-family: var(--serif);
  font-size: clamp(20px, 3.5vw, 34px);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: rgba(245,243,237,0.8);
  opacity:0;
  animation: fadeIn 0.9s 0.4s var(--ease) forwards;
}

.hero-line {
  width:40px;
  height:1px;
  background: var(--accent);
  margin: clamp(12px, 2vh, 18px) auto;
  opacity:0;
  animation: fadeIn 0.8s 0.7s var(--ease) forwards;
}

.hero-sub {
  display:none;
}

/* scroll indicator removed for compact FV */

@keyframes fadeIn {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}


/* =============================================
   SUB-PAGE HERO
   ============================================= */
.sub-hero {
  height: 320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background: var(--ink);
  position:relative;
  margin-top:72px;
  overflow:hidden;
}
.sub-hero::before {
  content:'';
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E");
}
.sub-hero-en {
  font-family: var(--en);
  font-size: clamp(40px, 7vw, 60px);
  font-weight:300;
  letter-spacing:0.1em;
  color: rgba(245,243,237,0.88);
  position:relative;
  z-index:1;
  margin-bottom:14px;
}
.sub-hero-ja {
  font-family: var(--serif);
  font-size: clamp(11px, 1.4vw, 13px);
  letter-spacing:0.22em;
  color: var(--accent);
  font-weight:400;
  position:relative;
  z-index:1;
}

/* =============================================
   SHARED SECTION STYLES
   ============================================= */
.s {
  padding: clamp(56px, 7vw, 80px) clamp(20px, 5vw, 56px);
}
.s-inner {
  max-width:1040px;
  margin:0 auto;
}
.s-narrow {
  max-width:740px;
  margin:0 auto;
  overflow-x:auto;
}

/* Section heading group */
.sh {
  margin-bottom: clamp(28px, 3.5vw, 40px);
}
.sh-en {
  font-family: var(--en);
  font-size: clamp(11px, 1.2vw, 12px);
  letter-spacing:0.25em;
  color: var(--accent);
  font-weight:500;
  margin-bottom:10px;
  text-transform:uppercase;
}
.sh-title {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight:700;
  letter-spacing:0.08em;
  line-height:1.6;
}
.sh-line {
  width:32px;
  height:1px;
  background: var(--accent);
  margin-top:20px;
}
.sh--center { text-align:center; }
.sh--center .sh-line { margin:20px auto 0; }

/* Reveal */
.rv {
  opacity:0;
  transform:translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.rv.vis { opacity:1; transform:translateY(0); }
.rv-d1 { transition-delay:0.1s; }
.rv-d2 { transition-delay:0.2s; }
.rv-d3 { transition-delay:0.3s; }

/* Background variants */
.bg-warm { background: var(--cream-warm); }
.bg-dark { background: var(--ink); color: var(--cream); }
.bg-white { background: var(--white); }

/* More link */
.more {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.14em;
  color: var(--ink-50);
  margin-top:36px;
  transition: color 0.3s, gap 0.3s;
}
.more::after {
  content:'';
  width:32px;
  height:1px;
  background: var(--accent);
  transition: width 0.4s var(--ease);
}
.more:hover { color: var(--ink); }
.more:hover::after { width:48px; }

/* =============================================
   TOP: ABOUT PREVIEW
   ============================================= */
.about-grid {
  display:grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 640px;
}

.about-text p {
  font-size:14px;
  color: var(--ink-60);
  line-height:2.2;
}

.about-img {
  aspect-ratio:4/3;
  background:
    linear-gradient(135deg, var(--cream-deep) 0%, var(--cream-warm) 100%);
  position:relative;
  overflow:hidden;
}
.about-img::before {
  content:'';
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 50h100M50 0v100' stroke='rgba(0,0,0,0.02)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size:100px;
}
/* Diagonal accent */
.about-img::after {
  content:'';
  position:absolute;
  top:0; right:0;
  width:120px; height:120px;
  border-right:1px solid var(--accent);
  border-top:1px solid var(--accent);
  opacity:0.2;
}

/* =============================================
   TOP: MVV
   ============================================= */
.mvv {
  padding: clamp(64px, 8vw, 100px) clamp(20px, 5vw, 56px);
  position:relative;
}
.mvv::before {
  content:'';
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;
}

.mvv-inner {
  max-width:880px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

.mvv-item {
  text-align:center;
  padding: clamp(44px, 5vw, 60px) 24px;
  border-bottom:1px solid rgba(245,243,237,0.06);
}
.mvv-item:last-child { border-bottom:none; }

.mvv-label {
  font-family: var(--en);
  font-size:12px;
  letter-spacing:0.3em;
  color: var(--accent);
  font-weight:500;
  margin-bottom:22px;
  text-transform:uppercase;
}
.mvv-text {
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 30px);
  font-weight:500;
  line-height:2;
  letter-spacing:0.1em;
  color: rgba(245,243,237,0.88);
}

/* =============================================
   TOP: SERVICE CARDS
   ============================================= */
.svc-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.svc-card {
  padding: clamp(36px,4vw,48px) clamp(24px,3vw,32px) clamp(32px,3.5vw,40px);
  background: var(--white);
  border:1px solid rgba(0,0,0,0.04);
  overflow:hidden;
  position:relative;
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
  cursor:pointer;
}
.svc-card::before {
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background: var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition: transform 0.5s var(--ease);
}
.svc-card:hover { box-shadow:0 8px 32px rgba(0,0,0,0.05); transform:translateY(-2px); }
.svc-card:hover::before { transform:scaleX(1); }

.svc-num {
  font-family: var(--en);
  font-size:11px;
  letter-spacing:0.2em;
  color: var(--accent);
  margin-bottom:18px;
}
.svc-name {
  font-family: var(--serif);
  font-size:15px;
  font-weight:600;
  letter-spacing:0.04em;
  line-height:1.7;
  margin-bottom:14px;
}
.svc-desc {
  font-size:13px;
  color: var(--ink-50);
  line-height:2;
}
.svc-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  letter-spacing:0.1em;
  color: var(--ink-40);
  margin-top:20px;
  transition: color 0.3s;
}
.svc-link::after { content:'→'; font-size:12px; transition:transform 0.3s; }
.svc-card:hover .svc-link { color: var(--accent); }
.svc-card:hover .svc-link::after { transform:translateX(3px); }

.svc-card-img {
  width: calc(100% + clamp(48px,6vw,64px));
  margin: calc(-1 * clamp(36px,4vw,48px)) calc(-1 * clamp(24px,3vw,32px)) 24px;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.svc-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
  filter: brightness(0.92);
}
.svc-card:hover .svc-card-img img {
  transform: scale(1.04);
}


/* =============================================
   TOP: STRENGTH
   ============================================= */
.str-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap: clamp(32px,4vw,56px);
}
.str-num {
  font-family: var(--en);
  font-size:32px;
  font-weight:300;
  color: var(--accent);
  opacity:0.35;
  line-height:1;
  margin-bottom:18px;
}
.str-name {
  font-family: var(--serif);
  font-size:15px;
  font-weight:600;
  letter-spacing:0.04em;
  margin-bottom:14px;
  line-height:1.6;
}
.str-desc {
  font-size:13px;
  color: var(--ink-50);
  line-height:2;
}

/* =============================================
   TOP: MESSAGE PREVIEW
   ============================================= */
.msg-grid {
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(48px, 6vw, 72px);
  align-items:start;
}

.msg-photo {
  width:100%;
  aspect-ratio:3/4;
  background: linear-gradient(160deg, var(--cream-deep), var(--cream-warm));
  position:relative;
}
.msg-photo::after {
  content:'';
  position:absolute;
  bottom:-12px; right:-12px;
  width:100%; height:100%;
  border:1px solid var(--accent);
  opacity:0.12;
  z-index:-1;
}

.msg-body {
  font-size:14px;
  color: var(--ink-60);
  line-height:2.3;
  margin-bottom:32px;
}
.msg-sign { font-size:12px; color: var(--ink-40); letter-spacing:0.06em; }
.msg-sign-name {
  font-family: var(--serif);
  font-size:20px;
  font-weight:600;
  letter-spacing:0.1em;
  margin-top:4px;
  color: var(--ink);
}

/* =============================================
   TOP: OVERVIEW PREVIEW
   ============================================= */
.ov-table {
  width:100%;
  border-collapse:collapse;
}
.ov-table tr { border-bottom:1px solid rgba(0,0,0,0.05); }
.ov-table th {
  font-size:12px;
  font-weight:500;
  color: var(--ink-40);
  text-align:left;
  padding:17px 20px 17px 0;
  width:120px;
  vertical-align:top;
  letter-spacing:0.05em;
  white-space:nowrap;
}
.ov-table td {
  font-size:14px;
  color: var(--ink-70);
  padding:17px 0;
  line-height:1.8;
}

/* =============================================
   TOP: CTA
   ============================================= */
.cta-box {
  text-align:center;
}
.cta-line {
  width:1px;
  height:56px;
  background: var(--accent);
  margin:0 auto 40px;
  opacity:0.5;
}
.cta-heading {
  font-family: var(--serif);
  font-size: clamp(18px, 2.4vw, 22px);
  letter-spacing:0.08em;
  line-height:1.7;
  margin-bottom:14px;
}
.cta-sub {
  font-size:13px;
  color: var(--ink-50);
  line-height:1.8;
  margin-bottom:40px;
}
.cta-btns {
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 40px;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.12em;
  border:1px solid var(--ink);
  color: var(--ink);
  transition: all 0.35s var(--ease);
  font-family: var(--sans);
}
.btn:hover { background: var(--ink); color: var(--cream); }
.btn--primary { background: var(--ink); color: var(--cream); }
.btn--primary:hover { background: var(--ink-80); border-color: var(--ink-80); }

.cta-recruit {
  margin-top:48px;
  padding-top:36px;
  border-top:1px solid rgba(0,0,0,0.05);
}
.cta-recruit-text {
  font-family: var(--serif);
  font-size:14px;
  color: var(--ink-50);
  letter-spacing:0.06em;
  margin-bottom:14px;
}

/* =============================================
   ABOUT PAGE
   ============================================= */
.greeting-grid {
  display:grid;
  grid-template-columns:280px 1fr;
  gap: clamp(48px, 6vw, 80px);
  align-items:start;
}

.greeting-photo {
  width:100%;
  aspect-ratio:3/4;
  background: linear-gradient(160deg, var(--cream-deep), var(--cream-warm));
  position:relative;
}
.greeting-photo::after {
  content:'';
  position:absolute;
  bottom:-10px; right:-10px;
  width:100%; height:100%;
  border:1px solid var(--accent);
  opacity:0.1;
  z-index:-1;
}

.greeting-title {
  font-family: var(--serif);
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight:600;
  letter-spacing:0.08em;
  line-height:1.8;
  margin-bottom:28px;
}
.greeting-body {
  font-size:14px;
  color: var(--ink-60);
  line-height:2.4;
  margin-bottom:36px;
}
.greeting-sign { text-align:right; }
.greeting-sign small { font-size:12px; color: var(--ink-40); display:block; letter-spacing:0.06em; }
.greeting-sign strong { font-family: var(--serif); font-size:20px; font-weight:600; letter-spacing:0.1em; }

/* Philosophy on About */
.phil-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  text-align:center;
}
.phil-item {
  padding: clamp(44px,5vw,56px) 28px;
  border-right:1px solid rgba(245,243,237,0.06);
}
.phil-item:last-child { border-right:none; }
.phil-label {
  font-family: var(--en);
  font-size:12px;
  letter-spacing:0.3em;
  color: var(--accent);
  margin-bottom:20px;
  text-transform:uppercase;
}
.phil-text {
  font-family: var(--serif);
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight:500;
  line-height:2;
  letter-spacing:0.1em;
  color: rgba(245,243,237,0.88);
}

.map-area {
  width:100%;
  height:280px;
  background: var(--cream-deep);
  border:1px solid rgba(0,0,0,0.04);
  margin-top:32px;
  overflow:hidden;
}
.map-area iframe { width:100%; height:100%; border:0; }

/* =============================================
   SERVICE PAGE
   ============================================= */
.svc-detail {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: clamp(40px, 5vw, 64px);
  align-items:center;
  padding: clamp(56px, 7vw, 80px) 0;
  border-bottom:1px solid rgba(0,0,0,0.05);
}
.svc-detail:last-child { border-bottom:none; }
.svc-detail--rev { direction:rtl; }
.svc-detail--rev > * { direction:ltr; }

.svc-detail-img {
  aspect-ratio:4/3;
  position:relative;
  overflow:hidden;
  background: var(--cream-deep);
}
.svc-detail-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter: brightness(0.9) saturate(0.95);
  transition: transform 0.6s var(--ease);
}
.svc-detail:hover .svc-detail-img img {
  transform: scale(1.03);
}

.svc-detail-num {
  font-family: var(--en);
  font-size:12px;
  letter-spacing:0.2em;
  color: var(--accent);
  margin-bottom:10px;
}
.svc-detail-name {
  font-family: var(--serif);
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight:600;
  letter-spacing:0.05em;
  margin-bottom:20px;
  line-height:1.6;
}
.svc-detail-desc {
  font-size:14px;
  color: var(--ink-60);
  line-height:2.2;
}

/* =============================================
   CONTACT PAGE
   ============================================= */
.contact-intro {
  font-size:14px;
  color: var(--ink-50);
  line-height:2;
  margin-bottom:48px;
  text-align:center;
}

.form-wrap { max-width:600px; margin:0 auto; }

.fg { margin-bottom:24px; }
.fg-label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.03em;
  margin-bottom:7px;
}
.fg-tag {
  font-size:10px;
  padding:2px 8px;
  letter-spacing:0.05em;
  font-weight:600;
}
.fg-tag--req { background: var(--accent-sub); color: var(--accent); }
.fg-tag--opt { background: rgba(0,0,0,0.03); color: var(--ink-40); }

.fi {
  width:100%;
  padding:13px 14px;
  font-size:14px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  border:1px solid rgba(0,0,0,0.1);
  outline:none;
  transition: border-color 0.3s;
  -webkit-appearance:none;
  border-radius:0;
}
.fi:focus { border-color: var(--accent); }
.fi--sel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5 5-5' stroke='%23888' fill='none' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
  appearance:none;
}
.fi--ta { min-height:160px; resize:vertical; line-height:1.9; }

.form-privacy {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:28px;
  font-size:13px;
  color: var(--ink-50);
  line-height:1.7;
}
.form-privacy input[type="checkbox"] { margin-top:4px; accent-color: var(--accent); width:15px; height:15px; }
.form-privacy a { color: var(--accent); }

.form-btn {
  display:block;
  width:260px;
  margin:40px auto 0;
  padding:16px;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.1em;
  background: var(--ink);
  color: var(--cream);
  border:1px solid var(--ink);
  font-family: var(--sans);
  transition: background 0.3s;
}
.form-btn:hover { background: var(--ink-80); }

.thanks { display:none; text-align:center; padding:80px 20px; }
.thanks.show { display:block; }
.thanks-en { font-family: var(--en); font-size:28px; font-weight:300; color: var(--ink-30); margin-bottom:6px; }
.thanks-title { font-family: var(--serif); font-size:22px; font-weight:600; letter-spacing:0.06em; margin-bottom:28px; }
.thanks-body { font-size:14px; color: var(--ink-50); line-height:2; }



/* =============================================
   FOOTER
   ============================================= */
.footer {
  background: var(--ink);
  color: rgba(245,243,237,0.4);
  padding: 64px clamp(24px, 5vw, 56px) 32px;
}
.footer-inner {
  max-width:1040px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto;
  gap:48px;
  align-items:start;
}
.footer-logo-img {
  height: 28px;
  filter: brightness(0) invert(1);
  opacity: 0.45;
  margin-bottom: 16px;
}
.footer-info { font-size:12px; line-height:2; }
.footer-nav { display:flex; flex-direction:column; gap:10px; }
.footer-nav a {
  font-size:12px;
  letter-spacing:0.1em;
  font-weight:500;
  color: rgba(245,243,237,0.4);
  transition: color 0.3s;
}
.footer-nav a:hover { color: var(--accent); }
.footer-bottom {
  max-width:1040px;
  margin:40px auto 0;
  padding-top:20px;
  border-top:1px solid rgba(245,243,237,0.05);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:11px;
}
.footer-bottom a { color: rgba(245,243,237,0.3); transition: color 0.3s; }
.footer-bottom a:hover { color: var(--accent); }

/* Page top */
.totop {
  position:fixed;
  bottom:28px; right:28px;
  width:40px; height:40px;
  background: var(--ink);
  color: var(--cream);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  z-index:900;
  opacity:0;
  visibility:hidden;
  transition: all 0.35s;
}
.totop.show { opacity:1; visibility:visible; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:900px){
  .nav-links { display:none; }
  .ham { display:block; }
  .about-grid { grid-template-columns:1fr; gap:36px; }
  .about-img { max-height:260px; }
  .svc-grid { grid-template-columns:1fr; gap:16px; }
  .str-grid { grid-template-columns:1fr; gap:28px; }
  .msg-grid { grid-template-columns:1fr; gap:36px; }
  .msg-photo { max-width:220px; margin:0 auto; }
  .greeting-grid { grid-template-columns:1fr; gap:36px; }
  .greeting-photo { max-width:240px; margin:0 auto; }
  .svc-detail { grid-template-columns:1fr; gap:28px; }
  .svc-detail--rev { direction:ltr; }
  .phil-grid { grid-template-columns:1fr; }
  .phil-item { border-right:none; border-bottom:1px solid rgba(245,243,237,0.06); padding:36px 20px; }
  .phil-item:last-child { border-bottom:none; }
  .footer-inner { grid-template-columns:1fr; }
  .sub-hero { height:220px; }
}
@media(max-width:600px){
  .hero-catch { letter-spacing:0.06em; font-size:22px; }
  .cta-btns { flex-direction:column; align-items:center; }
  .btn { width:100%; max-width:300px; }
  .form-btn { width:100%; }
  .ov-table th { width:86px; font-size:11px; }
}

/* Netlify honeypot */
.hidden { display:none !important; }

/* Form validation */
.fi:user-invalid { border-color: #c44; }
.form-error { color: #c44; font-size:12px; margin-top:4px; display:none; }