/* ═══════════════════════════════════════════════════
   鈺泰發行銷 mo-4 — 淺色系高級版型
   Palette: 米白 / 霧金 / 墨綠 / 淡咖灰
   ═══════════════════════════════════════════════════ */

:root {
  --yt-ivory: #FAF7F2;
  --yt-cream: #F3EEE5;
  --yt-paper: #FFFFFF;
  --yt-line:  #E5DFD3;
  --yt-gold:  #B08A4D;
  --yt-gold-soft: #C8A777;
  --yt-ink:   #2C2E2B;
  --yt-ink-2: #555751;
  --yt-muted: #8A867C;
  --yt-moss:  #3E4A3C;
  --yt-shadow: 0 30px 60px -20px rgba(44,46,43,0.12);
  --yt-shadow-sm: 0 12px 30px -15px rgba(44,46,43,0.18);
  --yt-display: 'Cormorant Garamond', 'Noto Serif TC', serif;
  --yt-serif: 'Noto Serif TC', serif;
  --yt-sans: 'Noto Sans TC', system-ui, sans-serif;
}

.yt, .yt * {
  box-sizing: border-box;
}

.yt {
  background: var(--yt-ivory);
  color: var(--yt-ink);
  font-family: var(--yt-sans);
  line-height: 1.75;
  letter-spacing: 0.02em;
}

.yt img { max-width: 100%; display: block; }

/* ============== Typography ============== */
.yt-eyebrow {
  font-family: var(--yt-display);
  font-size: 12px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--yt-gold);
  font-style: italic;
  display: inline-flex; align-items: center; gap: 14px;
}
.yt-eyebrow::before {
  content: ''; width: 28px; height: 1px; background: var(--yt-gold);
}

.yt-h1 {
  font-family: var(--yt-serif);
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 300;
  letter-spacing: 0.12em;
  line-height: 1.25;
  color: var(--yt-ink);
  margin: 0;
}

.yt-h2 {
  font-family: var(--yt-serif);
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 300;
  letter-spacing: 0.10em;
  line-height: 1.35;
  color: var(--yt-ink);
  margin: 0 0 24px;
}

.yt-h3 {
  font-family: var(--yt-serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--yt-ink);
  margin: 0 0 12px;
}

.yt-body {
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--yt-ink-2);
  letter-spacing: 0.04em;
}

.yt-micro {
  font-family: var(--yt-display);
  font-size: 11px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--yt-muted);
}

/* ============== Header ============== */
.yt-hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 22px clamp(28px, 6vw, 80px);
  background: rgba(250, 247, 242, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  display: flex; align-items: center; justify-content: space-between;
  transition: border-color .3s ease, padding .3s ease;
}
.yt-hdr.scrolled {
  border-bottom-color: var(--yt-line);
  padding-top: 14px; padding-bottom: 14px;
}
.yt-logo {
  font-family: var(--yt-serif);
  font-size: 19px;
  letter-spacing: 0.28em;
  font-weight: 400;
  color: var(--yt-ink);
  text-decoration: none;
  display: flex; align-items: baseline; gap: 10px;
}
.yt-logo em {
  font-family: var(--yt-display); font-style: italic; font-size: 12px;
  letter-spacing: 0.4em; color: var(--yt-gold); font-weight: 400;
}
.yt-nav { display: flex; gap: 38px; align-items: center; }
.yt-nav a {
  font-size: 13.5px; letter-spacing: 0.22em; color: var(--yt-ink-2);
  text-decoration: none; position: relative; padding: 6px 0;
  transition: color .25s;
}
.yt-nav a:hover { color: var(--yt-gold); }
.yt-nav a.active { color: var(--yt-gold); }
.yt-nav a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--yt-gold);
}
.yt-cta-btn {
  padding: 12px 30px; border: 1px solid var(--yt-gold);
  color: var(--yt-gold); font-size: 12px; letter-spacing: 0.32em;
  text-decoration: none; transition: all .3s ease;
  background: transparent;
}
.yt-cta-btn:hover { background: var(--yt-gold); color: var(--yt-paper); }

/* ============== Burger + Drawer ============== */
.yt-burger {
  display: none; width: 40px; height: 40px;
  background: transparent; border: 0; cursor: pointer;
  position: relative; color: var(--yt-ink);
  z-index: 120;
}
.yt-burger span {
  position: absolute; left: 8px; right: 8px; height: 1.5px;
  background: currentColor;
  transition: transform .35s ease, opacity .25s ease;
}
.yt-burger span:nth-child(1) { top: 14px; }
.yt-burger span:nth-child(2) { top: 20px; }
.yt-burger span:nth-child(3) { top: 26px; }
.yt-hdr.is-open .yt-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.yt-hdr.is-open .yt-burger span:nth-child(2) { opacity: 0; }
.yt-hdr.is-open .yt-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.yt-drawer {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%; z-index: 110;
  background: #FAF7F2;
  flex-direction: column; justify-content: center; align-items: center;
  padding: 120px 32px 48px; gap: 28px;
}
body.yt-menu-open .yt-drawer {
  display: flex;
  animation: yt-drawer-in .4s ease both;
}
@keyframes yt-drawer-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.yt-drawer__close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid rgba(44,46,43,0.2);
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .25s, background .25s;
}
.yt-drawer__close:hover { background: rgba(176,138,77,0.1); border-color: var(--yt-gold); }
.yt-drawer__close span {
  position: absolute; width: 18px; height: 1.5px;
  background: var(--yt-ink);
}
.yt-drawer__close span:nth-child(1) { transform: rotate(45deg); }
.yt-drawer__close span:nth-child(2) { transform: rotate(-45deg); }
.yt-drawer__menu {
  display: flex; flex-direction: column; gap: 14px;
  text-align: center;
}
.yt-drawer__menu a {
  font-family: var(--yt-serif); font-size: 28px;
  letter-spacing: 0.18em; color: var(--yt-ink);
  text-decoration: none; padding: 10px 24px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease, color .25s;
  transition-delay: calc(0.05s * var(--i, 0));
}
body.yt-menu-open .yt-drawer__menu a { opacity: 1; transform: none; }
.yt-drawer__menu a:hover,
.yt-drawer__menu a.active { color: var(--yt-gold); }
.yt-drawer__cta {
  margin-top: 20px;
  padding: 15px 44px;
  background: var(--yt-gold); color: var(--yt-paper);
  font-size: 12px; letter-spacing: 0.32em;
  text-decoration: none;
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease .3s, transform .5s ease .3s, background .25s;
}
body.yt-menu-open .yt-drawer__cta { opacity: 1; transform: none; }
.yt-drawer__cta:hover { background: var(--yt-ink); }
body.yt-menu-open { overflow: hidden; }

@media (max-width: 860px) {
  .yt-hdr { padding: 16px 20px; z-index: 115; }
  .yt-logo { font-size: 15px; letter-spacing: 0.22em; }
  .yt-logo em { font-size: 10px; }
  .yt-nav, .yt-cta-btn { display: none; }
  .yt-burger { display: inline-block; }
}

/* ============== Hero ============== */
.yt-hero {
  position: relative; min-height: 100vh;
  display: grid; grid-template-columns: 1.2fr 1fr;
  align-items: center; overflow: hidden;
  padding: 140px clamp(28px, 7vw, 100px) 80px;
  background: var(--yt-ivory);
}
.yt-hero::before {
  content: ''; position: absolute; right: -10%; top: 10%;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(176,138,77,0.08) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.yt-hero__text { position: relative; z-index: 2; max-width: 620px; }
.yt-hero__en {
  font-family: var(--yt-display); font-size: 14px; letter-spacing: 0.5em;
  color: var(--yt-gold); font-style: italic; margin-bottom: 32px;
}
.yt-hero__title {
  font-family: var(--yt-serif);
  font-size: clamp(44px, 6vw, 82px);
  font-weight: 300; line-height: 1.2; letter-spacing: 0.15em;
  color: var(--yt-ink); margin: 0 0 28px;
}
.yt-hero__slogan {
  font-family: var(--yt-display); font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: 0.35em; color: var(--yt-gold);
  margin: 0 0 32px; padding-left: 18px;
  border-left: 2px solid var(--yt-gold);
}
.yt-hero__sub {
  font-size: 16px; line-height: 1.9; color: var(--yt-ink-2);
  margin: 0 0 48px; max-width: 480px;
}
.yt-hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.yt-btn {
  display: inline-block; padding: 16px 42px;
  font-size: 13px; letter-spacing: 0.3em;
  text-decoration: none; transition: all .3s ease;
  border: 1px solid var(--yt-gold);
}
.yt-btn.primary { background: var(--yt-gold); color: var(--yt-paper); }
.yt-btn.primary:hover { background: var(--yt-ink); border-color: var(--yt-ink); }
.yt-btn.ghost { background: transparent; color: var(--yt-gold); }
.yt-btn.ghost:hover { background: var(--yt-gold); color: var(--yt-paper); }

.yt-hero__visual {
  position: relative; height: min(640px, 75vh);
  z-index: 1;
}
.yt-hero__visual img {
  width: 100%; height: 100%; object-fit: cover;
  box-shadow: var(--yt-shadow);
  border-radius: 2px;
}
.yt-hero__visual::after {
  content: ''; position: absolute;
  left: -40px; bottom: -40px; width: 140px; height: 140px;
  border: 1px solid var(--yt-gold);
  z-index: -1;
}
.yt-hero__scroll {
  position: absolute; left: clamp(28px, 7vw, 100px); bottom: 40px;
  font-family: var(--yt-display); font-size: 11px; letter-spacing: 0.5em;
  color: var(--yt-muted); z-index: 3;
  display: flex; align-items: center; gap: 16px;
}
.yt-hero__scroll::before {
  content: ''; width: 48px; height: 1px; background: var(--yt-muted);
}

@media (max-width: 960px) {
  .yt-hero { grid-template-columns: 1fr; gap: 48px; padding-top: 120px; }
  .yt-hero__visual { height: 400px; order: -1; }
}

/* ============== Section ============== */
.yt-section {
  padding: clamp(80px, 10vw, 160px) clamp(28px, 7vw, 100px);
  background: var(--yt-ivory);
}
.yt-section--cream { background: var(--yt-cream); }
.yt-section--paper { background: var(--yt-paper); }
.yt-container { max-width: 1260px; margin: 0 auto; }

.yt-section__head {
  display: flex; flex-direction: column; gap: 28px;
  margin-bottom: 80px; max-width: 820px;
}

/* ============== About Split ============== */
.yt-split {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 7vw, 100px); align-items: center;
}
.yt-split--reverse { grid-template-columns: 1.1fr 1fr; }
.yt-split__img {
  aspect-ratio: 3/4; overflow: hidden;
  box-shadow: var(--yt-shadow); position: relative;
}
.yt-split__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s ease; }
.yt-split__img:hover img { transform: scale(1.04); }
.yt-split__img .yt-stamp {
  position: absolute; top: 24px; right: 24px;
  background: var(--yt-paper); padding: 12px 18px;
  font-family: var(--yt-display); font-size: 11px; letter-spacing: 0.4em;
  color: var(--yt-gold); font-style: italic;
  box-shadow: var(--yt-shadow-sm);
}
@media (max-width: 860px) {
  .yt-split, .yt-split--reverse { grid-template-columns: 1fr; gap: 48px; }
  .yt-split__img { order: -1; aspect-ratio: 4/3; }
}

/* ============== Stats Bar ============== */
.yt-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 64px clamp(28px, 5vw, 80px);
  background: var(--yt-paper);
  box-shadow: var(--yt-shadow);
  margin: -80px auto 0; max-width: 1100px; position: relative; z-index: 3;
  border-top: 3px solid var(--yt-gold);
}
.yt-stat { text-align: center; border-right: 1px solid var(--yt-line); padding: 0 16px; }
.yt-stat:last-child { border-right: 0; }
.yt-stat__num {
  font-family: var(--yt-display); font-size: clamp(36px, 4vw, 52px);
  color: var(--yt-gold); display: inline-flex; align-items: baseline; gap: 4px;
  font-weight: 400;
}
.yt-stat__unit { font-size: 16px; color: var(--yt-ink-2); letter-spacing: 0.15em; }
.yt-stat__label {
  font-size: 13px; color: var(--yt-muted);
  letter-spacing: 0.28em; margin: 8px 0 0;
}
@media (max-width: 720px) {
  .yt-stats { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .yt-stat { border-right: 0; padding: 16px 8px; }
  .yt-stat:nth-child(odd) { border-right: 1px solid var(--yt-line); }
}

/* ============== Teaser Cards (首頁導覽卡) ============== */
.yt-teasers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  margin-top: 60px;
}
.yt-teaser {
  position: relative; aspect-ratio: 4/5;
  overflow: hidden; text-decoration: none;
  background: var(--yt-ink);
  transition: transform .5s ease;
}
.yt-teaser:hover { transform: translateY(-6px); }
.yt-teaser img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.88; transition: transform 1.4s ease, opacity .5s;
}
.yt-teaser:hover img { transform: scale(1.08); opacity: 0.7; }
.yt-teaser__body {
  position: absolute; inset: 0; padding: 40px 32px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--yt-paper);
  background: linear-gradient(180deg, transparent 30%, rgba(44,46,43,0.85) 100%);
}
.yt-teaser__num {
  position: absolute; top: 28px; right: 32px;
  font-family: var(--yt-display); font-size: 26px; font-style: italic;
  color: rgba(255,255,255,0.75);
}
.yt-teaser__label {
  font-family: var(--yt-display); font-size: 12px; letter-spacing: 0.4em;
  font-style: italic; color: var(--yt-gold-soft); margin-bottom: 8px;
}
.yt-teaser__title {
  font-family: var(--yt-serif); font-size: 24px; letter-spacing: 0.12em;
  margin: 0 0 10px; font-weight: 400;
}
.yt-teaser__desc {
  font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.82);
  margin: 0 0 18px;
}
.yt-teaser__more {
  font-size: 12px; letter-spacing: 0.3em; color: var(--yt-gold-soft);
  display: inline-flex; align-items: center; gap: 10px;
}
.yt-teaser__more::after { content: '→'; transition: transform .3s; }
.yt-teaser:hover .yt-teaser__more::after { transform: translateX(6px); }
@media (max-width: 860px) { .yt-teasers { grid-template-columns: 1fr; } }

/* ============== Project Grid (建案作品) ============== */
.yt-projects {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-top: 56px;
}
.yt-project {
  background: var(--yt-paper); text-decoration: none; color: inherit;
  transition: box-shadow .4s ease, transform .4s ease;
  box-shadow: 0 6px 20px -12px rgba(44,46,43,0.15);
}
.yt-project:hover { box-shadow: var(--yt-shadow); transform: translateY(-4px); }
.yt-project__img { aspect-ratio: 4/3; overflow: hidden; }
.yt-project__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.yt-project:hover .yt-project__img img { transform: scale(1.06); }
.yt-project__body { padding: 28px 28px 32px; }
.yt-project__badge {
  display: inline-block; padding: 4px 12px;
  font-size: 11px; letter-spacing: 0.3em;
  background: var(--yt-cream); color: var(--yt-gold);
  margin-bottom: 12px;
}
.yt-project__badge.sold { background: #EFEAE0; color: var(--yt-muted); }
.yt-project__badge.soon { background: #E9E4D6; color: var(--yt-moss); }
.yt-project__title {
  font-family: var(--yt-serif); font-size: 22px; letter-spacing: 0.1em;
  font-weight: 400; color: var(--yt-ink); margin: 0 0 10px;
}
.yt-project__desc {
  font-size: 14px; line-height: 1.7; color: var(--yt-ink-2);
  margin: 0 0 16px;
}
.yt-project__link {
  font-size: 12px; letter-spacing: 0.3em; color: var(--yt-gold);
  display: inline-flex; align-items: center; gap: 10px;
}
.yt-project__link::after { content: '→'; transition: transform .3s; }
.yt-project:hover .yt-project__link::after { transform: translateX(6px); }
@media (max-width: 860px) { .yt-projects { grid-template-columns: 1fr; } }

/* ============== Services (服務項目) ============== */
.yt-services {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px; margin-top: 56px;
}
.yt-service {
  padding: 48px 36px; background: var(--yt-paper);
  border-top: 2px solid var(--yt-gold);
  transition: transform .3s ease;
}
.yt-service:hover { transform: translateY(-6px); }
.yt-service__num {
  font-family: var(--yt-display); font-size: 16px; font-style: italic;
  color: var(--yt-gold); letter-spacing: 0.3em; margin-bottom: 20px;
}
.yt-service__title {
  font-family: var(--yt-serif); font-size: 22px; letter-spacing: 0.1em;
  margin: 0 0 14px; font-weight: 400; color: var(--yt-ink);
}
.yt-service__desc {
  font-size: 14.5px; line-height: 1.85; color: var(--yt-ink-2);
  margin: 0;
}
@media (max-width: 860px) { .yt-services { grid-template-columns: 1fr; } }

/* ============== Why Us (列表) ============== */
.yt-why-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0;
}
.yt-why-list li {
  display: grid; grid-template-columns: 60px 1fr auto;
  gap: 24px; align-items: center;
  padding: 28px 0; border-bottom: 1px solid var(--yt-line);
}
.yt-why-list li:last-child { border-bottom: 0; }
.yt-why-list .yt-num {
  font-family: var(--yt-display); font-size: 28px; font-style: italic;
  color: var(--yt-gold);
}
.yt-why-list .yt-why-title {
  font-family: var(--yt-serif); font-size: 19px; letter-spacing: 0.08em;
  color: var(--yt-ink);
}
.yt-why-list .yt-why-desc {
  font-size: 13px; color: var(--yt-muted);
  letter-spacing: 0.14em; margin-left: 14px;
}
.yt-why-list .yt-tag {
  font-family: var(--yt-display); font-style: italic;
  font-size: 13px; letter-spacing: 0.3em; color: var(--yt-gold);
}

/* ============== Process (流程) ============== */
.yt-process {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0; margin-top: 40px;
  position: relative;
}
.yt-process::before {
  content: ''; position: absolute;
  top: 24px; left: 8%; right: 8%; height: 1px;
  background: var(--yt-line);
}
.yt-step { text-align: center; position: relative; padding: 0 10px; }
.yt-step__dot {
  width: 48px; height: 48px; margin: 0 auto 20px;
  background: var(--yt-paper); border: 2px solid var(--yt-gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--yt-display); font-style: italic; color: var(--yt-gold);
  font-size: 18px; position: relative; z-index: 2;
}
.yt-step__label {
  font-family: var(--yt-display); font-size: 11px; letter-spacing: 0.4em;
  color: var(--yt-muted); font-style: italic; margin-bottom: 6px;
}
.yt-step__title {
  font-family: var(--yt-serif); font-size: 16px; letter-spacing: 0.08em;
  color: var(--yt-ink); margin: 0 0 6px;
}
.yt-step__desc {
  font-size: 12px; color: var(--yt-muted); line-height: 1.7;
  margin: 0;
}
@media (max-width: 860px) {
  .yt-process { grid-template-columns: 1fr; gap: 32px; }
  .yt-process::before { display: none; }
}

/* ============== Quote Banner ============== */
.yt-quote {
  padding: clamp(80px, 10vw, 140px) clamp(28px, 7vw, 100px);
  text-align: center; background: var(--yt-paper);
  border-top: 1px solid var(--yt-line);
  border-bottom: 1px solid var(--yt-line);
}
.yt-quote__mark {
  font-family: var(--yt-display); font-size: 80px; font-style: italic;
  color: var(--yt-gold); line-height: 1; opacity: 0.6;
  margin-bottom: 20px;
}
.yt-quote__text {
  font-family: var(--yt-serif); font-weight: 300;
  font-size: clamp(24px, 3vw, 40px); letter-spacing: 0.22em;
  color: var(--yt-ink); margin: 0 0 24px; line-height: 1.65;
}
.yt-quote__author {
  font-family: var(--yt-display); font-style: italic;
  font-size: 13px; letter-spacing: 0.4em; color: var(--yt-muted);
}

/* ============== CTA Band ============== */
.yt-cta-band {
  position: relative;
  padding: clamp(90px, 12vw, 160px) clamp(28px, 7vw, 100px);
  text-align: center; background: var(--yt-ink); color: var(--yt-cream);
  overflow: hidden;
}
.yt-cta-band::before {
  content: 'YUTAIFA'; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--yt-display); font-size: clamp(140px, 22vw, 360px);
  color: rgba(255,255,255,0.03); letter-spacing: 0.3em; font-style: italic;
  pointer-events: none; font-weight: 300;
}
.yt-cta-band__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.yt-cta-band .yt-eyebrow { color: var(--yt-gold-soft); margin-bottom: 28px; }
.yt-cta-band .yt-eyebrow::before { background: var(--yt-gold-soft); }
.yt-cta-band h2 {
  font-family: var(--yt-serif); font-weight: 300;
  font-size: clamp(30px, 4vw, 52px); letter-spacing: 0.14em;
  margin: 0 0 24px; color: var(--yt-paper);
}
.yt-cta-band p { font-size: 15px; color: rgba(243,238,229,0.8); margin: 0 0 40px; letter-spacing: 0.15em; }
.yt-cta-band .yt-btn.primary { background: var(--yt-gold); border-color: var(--yt-gold); }
.yt-cta-band .yt-btn.primary:hover { background: var(--yt-paper); color: var(--yt-ink); border-color: var(--yt-paper); }
.yt-cta-band .yt-btn.ghost { color: var(--yt-cream); border-color: rgba(243,238,229,0.4); }
.yt-cta-band .yt-btn.ghost:hover { background: var(--yt-cream); color: var(--yt-ink); border-color: var(--yt-cream); }

/* ============== Page Hero（分頁用） ============== */
.yt-phero {
  padding: 180px clamp(28px, 7vw, 100px) 90px;
  background: var(--yt-cream);
  position: relative; overflow: hidden;
}
.yt-phero::after {
  content: ''; position: absolute;
  bottom: -80px; right: -80px; width: 300px; height: 300px;
  border: 1px solid rgba(176,138,77,0.2); border-radius: 50%;
}
.yt-phero__inner { max-width: 900px; position: relative; z-index: 1; }
.yt-phero .yt-eyebrow { margin-bottom: 28px; }
.yt-bc {
  padding: 18px clamp(28px, 7vw, 100px);
  font-size: 12px; letter-spacing: 0.3em; color: var(--yt-muted);
  background: var(--yt-ivory); border-bottom: 1px solid var(--yt-line);
}
.yt-bc a { color: var(--yt-muted); text-decoration: none; }
.yt-bc a:hover { color: var(--yt-gold); }
.yt-bc .sep { margin: 0 12px; color: var(--yt-line); }

/* ============== Contact Form ============== */
.yt-contact-grid {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
}
@media (max-width: 860px) { .yt-contact-grid { grid-template-columns: 1fr; } }

.yt-form {
  display: grid; gap: 24px;
  padding: 48px clamp(24px, 4vw, 56px);
  background: var(--yt-paper); box-shadow: var(--yt-shadow);
}
.yt-form h2 { margin-bottom: 6px; }
.yt-form p.desc { color: var(--yt-muted); font-size: 14px; margin: 0 0 20px; }
.yt-field { display: grid; gap: 6px; }
.yt-field.full { grid-column: 1 / -1; }
.yt-field label {
  font-family: var(--yt-display); font-size: 11px;
  letter-spacing: 0.4em; color: var(--yt-gold); font-style: italic;
  text-transform: uppercase;
}
.yt-field input, .yt-field select, .yt-field textarea {
  background: var(--yt-ivory); border: none;
  border-bottom: 1px solid var(--yt-line);
  padding: 12px 4px; color: var(--yt-ink); font-size: 15px;
  font-family: var(--yt-sans); letter-spacing: 0.04em;
  transition: border-color .25s;
}
.yt-field input:focus, .yt-field select:focus, .yt-field textarea:focus {
  outline: none; border-bottom-color: var(--yt-gold);
}
.yt-field textarea { resize: vertical; min-height: 96px; }
.yt-form .yt-field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
@media (max-width: 600px) { .yt-form .yt-field-row { grid-template-columns: 1fr; } }

.yt-info-card {
  padding: 48px clamp(24px, 4vw, 56px);
  background: var(--yt-cream); border-left: 3px solid var(--yt-gold);
}
.yt-info-item {
  padding: 20px 0; border-bottom: 1px solid var(--yt-line);
}
.yt-info-item:last-child { border-bottom: 0; }
.yt-info-lbl {
  font-family: var(--yt-display); font-style: italic;
  font-size: 11px; letter-spacing: 0.4em; color: var(--yt-gold);
}
.yt-info-val {
  font-size: 16px; color: var(--yt-ink); margin-top: 6px;
  letter-spacing: 0.06em; line-height: 1.7;
}
.yt-info-note {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px dashed var(--yt-line);
  font-size: 13px; color: var(--yt-muted); line-height: 1.8;
}

/* ============== Footer ============== */
.yt-foot {
  padding: 80px clamp(28px, 7vw, 100px) 40px;
  background: var(--yt-cream); color: var(--yt-ink-2);
}
.yt-foot__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 60px; max-width: 1260px; margin: 0 auto 60px;
}
.yt-foot__brand {
  font-family: var(--yt-serif); font-size: 22px; letter-spacing: 0.28em;
  color: var(--yt-ink); margin-bottom: 16px;
}
.yt-foot__tagline {
  font-family: var(--yt-display); font-style: italic;
  font-size: 14px; letter-spacing: 0.4em; color: var(--yt-gold);
  margin-bottom: 18px;
}
.yt-foot__slogan {
  font-family: var(--yt-display); font-size: 13px; letter-spacing: 0.5em;
  color: var(--yt-muted); font-style: italic; margin-top: 18px;
}
.yt-foot__col h4 {
  font-family: var(--yt-display); font-size: 12px; letter-spacing: 0.4em;
  color: var(--yt-gold); text-transform: uppercase; margin: 0 0 18px;
  font-style: italic;
}
.yt-foot__col a {
  display: block; color: var(--yt-ink-2); text-decoration: none;
  font-size: 14px; letter-spacing: 0.08em; padding: 6px 0;
  transition: color .25s;
}
.yt-foot__col a:hover { color: var(--yt-gold); }
.yt-foot__copy {
  max-width: 1260px; margin: 0 auto; padding-top: 28px;
  border-top: 1px solid var(--yt-line); display: flex;
  justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12px; letter-spacing: 0.2em; color: var(--yt-muted);
}
@media (max-width: 860px) {
  .yt-foot__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============== Reveal animations ============== */
/* 預設可見，支援 JS 時由腳本先加 .yt-reveal--hide 藏起再 observe 觸發 */
.yt-reveal { transition: opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.yt-reveal--hide { opacity: 0; transform: translateY(28px); }
.yt-reveal.is-visible { opacity: 1; transform: none; }
.yt-reveal[data-delay="1"] { transition-delay: .12s; }
.yt-reveal[data-delay="2"] { transition-delay: .24s; }
.yt-reveal[data-delay="3"] { transition-delay: .36s; }
.yt-reveal[data-delay="4"] { transition-delay: .48s; }

/* 隱藏 Kadence 內建 header/footer（改用自訂的） */
body.page-template-yt-fullwidth #masthead,
body.page-template-yt-fullwidth #colophon,
body.page-template-yt-fullwidth .site-header,
body.page-template-yt-fullwidth .site-footer { display: none !important; }
body.page-template-yt-fullwidth .site-main,
body.page-template-yt-fullwidth .content-area { padding: 0 !important; max-width: none !important; }
body.page-template-yt-fullwidth .entry-hero,
body.page-template-yt-fullwidth .entry-header,
body.page-template-yt-fullwidth .entry-footer { display: none !important; }
body.page-template-yt-fullwidth { background: var(--yt-ivory); }
body.page-template-yt-fullwidth .entry-content { margin: 0 !important; }
body.page-template-yt-fullwidth article.post,
body.page-template-yt-fullwidth article.page { padding: 0 !important; }