/* =========================================================
   THE SỐNG GARDEN — stylesheet dùng chung cho mọi trang
   Triết lý: "đúng và đủ"
   ========================================================= */

/* ---------- 1. TOKENS (màu & font) ---------- */
:root{
  --ink:    #13231A;   /* xanh rừng gần đen */
  --moss:   #2C4034;   /* xanh rêu trung gian */
  --sage:   #DDE6D5;   /* xanh sage (brand) */
  --cream:  #F3EEE3;   /* giấy ấm */
  --gold:   #C39970;   /* gold nhấn (brand) */
  --gold-2: #D8B894;
  --shadow: rgba(19,35,26,.18);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{
  font-family:"Be Vietnam Pro", system-ui, sans-serif;
  color:var(--ink);
  background:var(--ink);
  overflow-x:hidden;
}
h1,h2,h3{ font-family:"Fraunces", Georgia, serif; font-weight:400; line-height:1.04; }
a{ color:inherit; }
img{ max-width:100%; }
::selection{ background:var(--gold); color:var(--ink); }

.eyebrow{
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  font-weight:500; color:var(--gold);
}

/* ---------- 2. DÂY LEO SIGNATURE ---------- */
.vine{
  position:fixed; top:0; left:clamp(16px,4vw,48px); height:100vh;
  width:40px; z-index:40; pointer-events:none; mix-blend-mode:difference;
}
.vine path{ fill:none; stroke:#fff; stroke-width:1.4; opacity:.6;
  stroke-dasharray:1; stroke-dashoffset:1; }

/* ---------- 3. HEADER / NAV ---------- */
header.site{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; justify-content:space-between; align-items:center;
  padding:20px clamp(20px,5vw,64px);
  color:#fff;
}
/* lớp tối mờ ở mép trên giúp menu + logo luôn đọc rõ trên mọi nền */
header.site::before{
  content:""; position:absolute; left:0; right:0; top:0; height:150px; z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(8,16,11,.60) 0%, rgba(8,16,11,.28) 52%, rgba(8,16,11,0) 100%);
}
.logo-img{ height:34px; width:auto; display:block;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
header.site nav{ display:flex; gap:28px; font-size:.85rem; align-items:center; }
header.site nav a{ text-decoration:none; color:#fff; opacity:.92;
  text-shadow:0 1px 10px rgba(0,0,0,.55); transition:opacity .25s, color .25s; }
header.site nav a:hover{ opacity:1; color:var(--gold-2); }
header.site nav a.active{ opacity:1; border-bottom:1px solid currentColor; padding-bottom:2px; }

/* nút hamburger (ẩn ở desktop) */
.nav-toggle{
  display:none; background:none; border:0; color:#fff; cursor:pointer;
  width:34px; height:34px; padding:6px;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.5));
}
.nav-toggle span{
  display:block; height:1.5px; width:100%; background:#fff; margin:5px 0;
  transition:transform .3s, opacity .3s;
}

/* menu trượt cho điện thoại */
.mobile-menu{
  position:fixed; inset:0; z-index:55;
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:8px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s;
}
.mobile-menu.open{ opacity:1; visibility:visible; transform:none; }
.mobile-menu a{
  font-family:"Fraunces", serif; font-size:2rem; color:var(--cream);
  text-decoration:none; padding:10px 0; letter-spacing:.01em;
}
.mobile-menu a.active{ color:var(--gold-2); font-style:italic; }
.mobile-menu .mm-foot{
  margin-top:30px; font-size:.85rem; color:var(--sage); letter-spacing:.04em;
  font-family:"Be Vietnam Pro", sans-serif; text-align:center; opacity:.8;
}
.mobile-menu .mm-foot a{ font-size:.85rem; font-family:inherit; color:var(--gold-2); }

@media(max-width:760px){
  header.site nav{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- 4. SECTION CHUNG ---------- */
section{ position:relative; }
.pad{ padding:clamp(80px,12vh,150px) clamp(20px,6vw,120px); }

.reveal{ opacity:0; transform:translateY(38px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* tiêu đề trang phụ (banner đầu các trang con) */
.pagehead{
  background:var(--ink); color:#fff; text-align:center;
  padding:clamp(150px,22vh,240px) 24px clamp(60px,10vh,110px);
}
.pagehead .eyebrow{ color:var(--gold-2); display:block; margin-bottom:18px; }
.pagehead h1{ font-size:clamp(2.4rem,7vw,5rem); letter-spacing:-.01em; }
.pagehead h1 em{ font-style:italic; color:var(--gold-2); }
.pagehead p{ margin:22px auto 0; max-width:48ch; color:rgba(243,238,227,.82);
  line-height:1.7; font-size:1.02rem; }

/* ---------- 5. HERO (cuộn điện ảnh) ---------- */
.hero{ position:relative; height:420vh; background:#0c170f; }
.hero-grad{ position:absolute; inset:0; z-index:2; pointer-events:none; will-change:opacity,background;
  background:linear-gradient(180deg, rgba(243,238,227,.42) 0%, rgba(232,214,182,.30) 50%, rgba(216,184,148,.34) 100%);
  opacity:.18; mix-blend-mode:normal; }
.hero-stage{ position:sticky; top:0; height:100vh; min-height:560px; overflow:hidden;
  display:grid; place-items:center; }
.hero-bg{ position:absolute; inset:-14%; will-change:transform; transform:scale(1.06); }
.hero-bg-img{ position:absolute; inset:0; will-change:transform;
  background:url('assets/hero.jpg') center/cover no-repeat; transform-origin:58% 52%;
  animation:kenburns 30s ease-in-out infinite alternate; }
@keyframes kenburns{
  from{ transform:scale(1.04) translate3d(0,0,0); }
  to{   transform:scale(1.12) translate3d(-2%,-1.5%,0); } }

/* lớp sương sớm trôi nhẹ */
.hero-mist{ position:absolute; inset:0; z-index:3; pointer-events:none; will-change:transform,opacity;
  background:
    radial-gradient(58% 40% at 30% 72%, rgba(255,255,255,.40), transparent 64%),
    radial-gradient(54% 38% at 62% 68%, rgba(255,255,255,.34), transparent 62%),
    radial-gradient(80% 46% at 48% 84%, rgba(255,255,255,.38), transparent 66%),
    radial-gradient(46% 30% at 84% 78%, rgba(255,255,255,.28), transparent 62%),
    radial-gradient(44% 28% at 14% 80%, rgba(255,255,255,.30), transparent 62%);
  filter:blur(16px); mix-blend-mode:screen; opacity:0;
  animation:mistDrift 22s ease-in-out infinite alternate; }
@keyframes mistDrift{
  from{ transform:translate3d(-3%,0,0) scale(1.05); }
  to{   transform:translate3d(3%,-2%,0) scale(1.12); } }

.hero-scrim{ position:absolute; inset:0; z-index:4; will-change:opacity;
  background:
    radial-gradient(62% 52% at 50% 47%, rgba(8,18,12,.55) 0%, rgba(8,18,12,0) 72%),
    linear-gradient(180deg, rgba(8,18,12,.55) 0%, rgba(8,18,12,.28) 28%,
      rgba(8,18,12,.3) 55%, rgba(8,18,12,.78) 100%); }
.hero-copy{ position:relative; z-index:5; text-align:center; padding:0 20px; will-change:transform,opacity; }

@media (prefers-reduced-motion: reduce){
  .hero{ height:100vh; }
  .hero-stage{ position:relative; }
}

/* ----- Mây bay ----- */
.hero-clouds{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.hero-clouds .cloud{ position:absolute; opacity:0; will-change:transform,opacity;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.12)); mix-blend-mode:screen; }
/* dải mây dày luồn quanh thác — các cụm gối nhau, không để thưa */
.hero-clouds .cl1{ width:50%; top:30%; left:-14%; }
.hero-clouds .cl2{ width:46%; top:24%; left:30%; }
.hero-clouds .cl3{ width:48%; top:40%; left:58%; }
.hero-clouds .cl4{ width:54%; top:54%; left:-18%; }
.hero-clouds .cl5{ width:50%; top:50%; left:34%; }
.hero-clouds .cl6{ width:46%; top:62%; left:60%; }
.hero-clouds .cl7{ width:44%; top:18%; left:4%; }
.hero-clouds .cl8{ width:52%; top:66%; left:8%; }

/* ----- Nhịp 2 & 3: chữ Sống + logo ----- */
.hero-act2{ position:absolute; inset:0; z-index:6; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:24px; opacity:0; pointer-events:none;
  padding:0 24px; will-change:opacity; }
.hero-act2 .song-wrap{ width:min(82vw,760px); will-change:transform,opacity; }
.song-svg{ width:100%; height:auto; display:block;
  filter:drop-shadow(0 16px 44px rgba(0,0,0,.5)); overflow:visible; }
#songImg{ will-change:transform,opacity; }
#songTint{ opacity:0; will-change:opacity; }
#songStroke{ will-change:opacity; }
#songStroke path{ will-change:stroke-dashoffset; }

.hero-act2 .act2-logo-wrap{ text-align:center; transform-origin:center; will-change:transform,opacity; }
.hero-act2 .act2-logo-box{ position:relative; display:inline-block; line-height:0; }
.hero-act2 .act2-logo{ width:min(86vw,680px); height:auto; display:block; margin:0 auto;
  filter:drop-shadow(0 16px 46px rgba(0,0,0,.55)); }
/* ánh vàng loáng quét qua logo ở nhịp 4 (lớp logo vàng lộ theo dải chéo) */
.hero-act2 .act2-shine{ position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; pointer-events:none;
  filter:drop-shadow(0 0 12px rgba(247,231,193,.55)) brightness(1.12);
  -webkit-clip-path:polygon(-40% 0, -20% 0, 0% 100%, -20% 100%);
          clip-path:polygon(-40% 0, -20% 0, 0% 100%, -20% 100%);
  will-change:clip-path,opacity; }
.hero-act2 .act2-slogan{ font-family:"Fraunces",serif; font-style:italic; color:var(--gold-2);
  font-size:clamp(1.2rem,3vw,1.9rem); margin-top:22px; will-change:opacity,transform; }
.hero-copy h1{ font-size:clamp(2.8rem,9vw,7.5rem); color:#fff;
  letter-spacing:-.02em; text-shadow:0 4px 40px rgba(0,0,0,.35); }
.hero-copy h1 em{ font-style:italic; color:var(--gold-2); }
.hero-copy p{ margin-top:18px; font-size:clamp(.95rem,2vw,1.15rem);
  color:rgba(243,238,227,.92); max-width:34ch; margin-inline:auto;
  text-shadow:0 2px 20px rgba(0,0,0,.4); }
.hero-copy .eyebrow{ color:var(--gold-2); }
.hero-copy strong{ color:#fff; font-weight:600; }
.scrollcue{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  z-index:6; font-size:.7rem; letter-spacing:.3em; color:rgba(243,238,227,.9);
  text-transform:uppercase; animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 50%{ transform:translate(-50%,8px);} }

/* nút (CTA chung) */
.btn{
  display:inline-block; font-family:"Be Vietnam Pro",sans-serif; font-size:.9rem;
  font-weight:600; letter-spacing:.02em; text-decoration:none; cursor:pointer;
  padding:14px 30px; border-radius:999px; transition:transform .25s, background .25s, color .25s;
}
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ transform:translateY(-2px); background:var(--gold-2); }
.btn-ghost{ border:1px solid rgba(243,238,227,.4); color:var(--cream); }
.btn-ghost:hover{ border-color:var(--gold-2); color:var(--gold-2); }
.hero-cta{ margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- 6. MÀN HIỆN THƯƠNG HIỆU ---------- */
.reveal-brand{ min-height:100vh; background:var(--ink); display:grid; place-items:center;
  overflow:hidden; padding:80px 20px; }
.bigmark{ position:relative; text-align:center; }
.bigmark .brand-logo-wrap{ position:relative; display:inline-block; line-height:0; }
.bigmark .brand-logo{ width:min(78vw,1000px); height:auto; display:block; margin:0 auto;
  filter:drop-shadow(0 20px 60px rgba(0,0,0,.5)); }
.bigmark.in .brand-logo{
  animation:logoIn 1.4s cubic-bezier(.16,1,.3,1) both,
            brandGlow 4.5s ease-in-out 1.4s infinite; }
@keyframes logoIn{ from{ opacity:0; transform:scale(1.12); } to{ opacity:1; transform:scale(1);} }
@keyframes brandGlow{
  0%,100%{ filter:drop-shadow(0 20px 60px rgba(0,0,0,.5)) drop-shadow(0 0 0 rgba(216,184,148,0)); }
  50%    { filter:drop-shadow(0 20px 60px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(216,184,148,.38)); } }

/* ánh vàng quét ngang qua logo */
.bigmark .brand-shine{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  -webkit-mask:url('assets/logo-white.png') center/contain no-repeat;
          mask:url('assets/logo-white.png') center/contain no-repeat;
  background:linear-gradient(105deg,
     transparent 38%,
     rgba(216,184,148,.7) 46%,
     rgba(255,249,238,.98) 50%,
     rgba(216,184,148,.7) 54%,
     transparent 62%);
  background-size:250% 100%; background-position:185% 0; }
.bigmark.in .brand-shine{ animation:brandShine 5.5s ease-in-out 1.8s infinite; }
@keyframes brandShine{
  0%      { background-position:185% 0; opacity:0; }
  6%      { opacity:1; }
  34%     { background-position:-60% 0; opacity:1; }
  42%,100%{ background-position:-60% 0; opacity:0; } }
.bigmark .slogan{ font-family:'Fraunces',serif; font-style:italic;
  font-size:clamp(1.5rem,4.5vw,2.6rem); color:var(--gold-2);
  margin-top:26px; letter-spacing:.01em; }
.bigmark .sub{ color:var(--sage); letter-spacing:.4em; font-size:.8rem;
  text-transform:uppercase; margin-top:14px; }

/* ---------- 7. TRIẾT LÝ ---------- */
.creed{ background:var(--cream); }
.creed .eyebrow{ display:block; margin-bottom:28px; }
.creed h2{ font-size:clamp(2rem,6.5vw,4.6rem); max-width:20ch; color:var(--ink); }
.creed h2 .g{ color:var(--gold); font-style:italic; }
.creed .note{ margin-top:32px; max-width:48ch; color:#55605a; line-height:1.7;
  font-size:1.05rem; }

/* ---------- 8. DỊCH VỤ (thẻ) ---------- */
.services{ background:var(--moss); color:var(--sage); }
.services .eyebrow{ color:var(--gold-2); }
.services h2{ font-size:clamp(1.8rem,5vw,3.6rem); color:#fff; margin:14px 0 18px; max-width:18ch; }
.services .lead{ color:rgba(221,230,213,.78); max-width:50ch; line-height:1.7; margin-bottom:56px; }
.grid{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card{ border:1px solid rgba(221,230,213,.18); border-radius:6px; overflow:hidden;
  background:rgba(0,0,0,.12); transition:transform .4s, border-color .4s; }
.card:hover{ transform:translateY(-6px); border-color:rgba(216,184,148,.5); }
.card .ph{ height:200px; overflow:hidden; background:#1d2c23; }
.card .ph img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease; }
.card:hover .ph img{ transform:scale(1.06); }
.card .body{ padding:24px 24px 30px; }
.card h3{ font-size:1.5rem; color:#fff; }
.card p{ margin-top:10px; font-size:.92rem; color:rgba(221,230,213,.78); line-height:1.65; }
.card .tick{ margin-top:16px; font-size:.85rem; color:var(--gold-2); display:flex;
  gap:8px; align-items:flex-start; }

/* ---------- 9. KHỐI NAVIGATION LỚN ---------- */
.cta-big{ background:var(--ink); color:#fff; }
.cta-big .eyebrow{ display:block; text-align:center; margin-bottom:40px; color:var(--gold-2); }
.bigrow{ display:flex; align-items:center; justify-content:space-between;
  padding:30px 0; border-top:1px solid rgba(255,255,255,.14); cursor:pointer;
  text-decoration:none; color:#fff;
  transition:padding-left .4s ease, color .4s ease; }
.bigrow:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
.bigrow:hover{ padding-left:24px; color:var(--gold-2); }
.bigrow span{ font-family:"Fraunces",serif; font-size:clamp(1.8rem,7vw,4.2rem);
  font-style:italic; }
.bigrow .arrow{ font-style:normal; font-family:"Be Vietnam Pro"; font-size:2rem; }

/* ---------- 10. VIDEO ---------- */
.story{ background:var(--ink); color:#fff; text-align:center; }
.story .eyebrow{ display:block; margin-bottom:14px; color:var(--gold-2); }
.story h2{ font-size:clamp(1.8rem,5vw,3.4rem); margin-bottom:44px; color:#fff; }
.vframe{ position:relative; max-width:1000px; margin:0 auto; border-radius:6px;
  overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.55);
  border:1px solid rgba(221,230,213,.14); aspect-ratio:16/9; background:#0c170f; }
.vframe video{ width:100%; height:100%; object-fit:cover; display:block; }
.vframe .fbvideo{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vframe.vframe-doc{ aspect-ratio:9/16; max-width:360px; margin-left:auto; margin-right:auto; }
.vframe .vsound{ position:absolute; top:16px; right:16px; z-index:6;
  background:var(--gold-2); color:var(--ink); border:none; cursor:pointer;
  font:inherit; font-size:.8rem; font-weight:600; padding:9px 16px; border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.3); transition:transform .2s; }
.vframe .vsound:hover{ transform:scale(1.05); }
.vframe .vplay{ position:absolute; inset:0; display:grid; place-items:center; cursor:pointer;
  background:rgba(12,23,15,.25); border:0; width:100%; }
.vframe .vplay[hidden]{ display:none; }
.vframe .vplay .dot{ width:84px; height:84px; border-radius:50%; background:var(--gold);
  display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.4); }
.vframe .vplay .dot::before{ content:""; width:0; height:0; margin-left:6px;
  border-left:22px solid var(--ink); border-top:14px solid transparent; border-bottom:14px solid transparent; }
.vframe .play{ position:absolute; inset:0; display:grid; place-items:center;
  cursor:pointer; background:rgba(12,23,15,.18); transition:background .3s; border:0; width:100%; }
.vframe .play:hover{ background:rgba(12,23,15,.05); }
.vframe .play .dot{ width:84px; height:84px; border-radius:50%;
  background:var(--gold); display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.4); transition:transform .3s; }
.vframe .play:hover .dot{ transform:scale(1.08); }
.vframe .play .dot::before{ content:""; width:0; height:0; margin-left:6px;
  border-left:22px solid var(--ink); border-top:14px solid transparent;
  border-bottom:14px solid transparent; }
.vframe .unmute{ position:absolute; top:16px; right:16px; z-index:6;
  background:var(--gold-2); color:var(--ink); border:none; cursor:pointer;
  font:inherit; font-size:.8rem; font-weight:600; padding:9px 16px; border-radius:999px;
  display:flex; align-items:center; gap:7px; box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:transform .2s, opacity .3s; }
.vframe .unmute:hover{ transform:scale(1.05); }
.vframe .unmute span{ display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--ink); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.35; } }
.story .cap{ margin-top:22px; font-size:.9rem; color:rgba(221,230,213,.6); }

/* ---------- 11. DỰ ÁN (gallery) ---------- */
.projects{ background:var(--cream); }
.projects .eyebrow{ display:block; margin-bottom:14px; }
.projects h2{ font-size:clamp(2rem,5.5vw,3.6rem); color:var(--ink); margin-bottom:18px; max-width:18ch; }
.projects .lead{ color:#55605a; max-width:50ch; line-height:1.7; margin-bottom:56px; }
.pgrid{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.pcard{ position:relative; border-radius:6px; overflow:hidden; aspect-ratio:4/3;
  background:#1d2c23; cursor:pointer; }
.pcard img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s ease; }
.pcard:hover img{ transform:scale(1.07); }
.pcard .meta{ position:absolute; inset:auto 0 0 0; padding:22px;
  background:linear-gradient(180deg, transparent, rgba(12,23,15,.85));
  color:#fff; }
.pcard .meta h3{ font-size:1.4rem; }
.pcard .meta p{ font-size:.82rem; color:var(--sage); margin-top:4px; letter-spacing:.02em; }
.pcard.empty{ display:grid; place-items:center; border:1px dashed rgba(19,35,26,.25);
  background:transparent; }
.pcard.empty span{ color:#8a9389; font-size:.9rem; text-align:center; padding:24px;
  line-height:1.6; }

/* ---------- 12. LIÊN HỆ ---------- */
.contact{ background:var(--ink); color:var(--sage); }
.contact .eyebrow{ display:block; margin-bottom:14px; color:var(--gold-2); }
.contact h2{ font-size:clamp(2rem,5.5vw,3.6rem); color:#fff; margin-bottom:18px; }
.contact .lead{ color:rgba(221,230,213,.78); max-width:46ch; line-height:1.7; margin-bottom:50px; }
.cwrap{ display:grid; gap:50px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.cinfo dl{ margin:0; }
.cinfo dt{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-2); margin-top:26px; }
.cinfo dt:first-child{ margin-top:0; }
.cinfo dd{ margin:6px 0 0; font-size:1.05rem; color:#fff; line-height:1.55; }
.cinfo dd a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(216,184,148,.4); }
.cinfo dd a:hover{ color:var(--gold-2); }
.cinfo .names a{ display:inline-block; margin-right:18px; }

/* form liên hệ (mở app điện thoại/email — không cần server) */
.cform label{ display:block; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-2); margin:22px 0 8px; }
.cform label:first-child{ margin-top:0; }
.cform input, .cform textarea{
  width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(221,230,213,.2);
  border-radius:4px; color:#fff; font:inherit; padding:13px 15px; transition:border-color .25s; }
.cform input:focus, .cform textarea:focus{ outline:none; border-color:var(--gold-2); }
.cform textarea{ min-height:120px; resize:vertical; }
.cform .btn{ margin-top:26px; border:0; }

/* ---------- 13. FOOTER ---------- */
footer.site{ background:#0c170f; color:var(--sage);
  padding:clamp(60px,8vw,90px) clamp(20px,6vw,120px) 0; }
.foot-logo{ width:min(60vw,340px); height:auto; display:block; margin-bottom:46px; }
.foot-top{ display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; }
.foot-top a{ color:var(--sage); text-decoration:none; opacity:.8; display:block;
  margin:6px 0; font-size:.95rem; transition:color .25s, opacity .25s; }
.foot-top a:hover{ opacity:1; color:var(--gold-2); }
.foot-col h4{ font-family:"Be Vietnam Pro"; font-weight:600; font-size:.75rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2); margin-bottom:14px; }
.foot-mark{ font-family:"Fraunces",serif; font-style:italic;
  font-size:clamp(1.8rem,9vw,8.5rem); line-height:.9; color:#13231a;
  -webkit-text-stroke:1px rgba(221,230,213,.25); margin-top:30px;
  text-align:center; user-select:none; white-space:nowrap; }
.foot-legal{ text-align:center; font-size:.72rem; color:rgba(221,230,213,.4);
  padding:30px 0; letter-spacing:.04em; }

/* ---------- 14. MOTION OFF ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}