/* ============================================================
   layout.css — 桌機版各區塊 (desktop ≥ 1001px 為主，含流體尺寸)
   ============================================================ */

/* ===================== HEADER / NAV ===================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .35s ease, box-shadow .35s ease;
}
.site-header.scrolled{ background:var(--white); box-shadow:0 1px 14px rgba(0,0,0,.06); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.logo img{ width:clamp(120px,11vw,168px); height:auto; }
.main-nav{ display:flex; align-items:center; gap:clamp(22px,3vw,48px); }
.nav-link{ font-family:var(--f-en); font-size:18px; color:var(--red); transition:opacity .2s; }
.nav-link:hover{ opacity:.6; }
.nav-contact{ font-size:18px; }

/* hamburger (mobile) */
.hamburger{ display:none; flex-direction:column; gap:5px; width:34px; padding:6px; }
.hamburger span{ display:block; height:2px; background:var(--red); border-radius:2px; transition:.3s; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-nav{ display:none; }

/* ===================== HERO ===================== */
.hero{ position:relative; min-height:100vh; background:var(--white); overflow:hidden; display:flex; align-items:center; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-photos{
  position:absolute; top:0; right:0; bottom:0; width:34%;
  display:flex; flex-direction:column;
}
.hero-photos img{ width:100%; flex:1 1 0; object-fit:cover; min-height:0; }
/* 頂部白色漸層，讓透明導覽列(紅字)在照片上仍清楚 */
.hero-bg::after{ content:''; position:absolute; top:0; left:0; right:0; height:160px; background:linear-gradient(180deg,#fff 18%,rgba(255,255,255,0)); z-index:1; pointer-events:none; }
.hero-inner{ position:relative; z-index:2; width:100%; padding-top:var(--nav-h); }
.hero-kicker{ font-family:var(--f-num); font-size:clamp(22px,3vw,34px); color:var(--red); margin-bottom:.2em; }
.hero-giant{
  color:var(--watermark);
  font-size:clamp(64px,13.9vw,300px);
  margin:0;
}
.hero-cta{ margin-top:clamp(28px,4vw,64px); }

/* ===================== STATS ===================== */
.stats{ background:var(--white); padding:clamp(70px,9vw,150px) 0; text-align:center; }
.stats-kicker{ font-family:var(--f-en-alt); font-size:clamp(28px,4vw,56px); color:var(--watermark); font-weight:700; }
.stats-sub{ font-family:var(--f-en); color:#bdbdbd; margin-top:.4em; font-size:clamp(14px,1.4vw,20px); }
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,4vw,60px); margin-top:clamp(40px,6vw,90px); }
.stat-num{ font-family:var(--f-num); font-weight:800; color:var(--red); font-size:clamp(70px,11vw,180px); line-height:1; letter-spacing:-.02em; }
.stat-cap{ font-family:var(--f-cjk-body); color:var(--red); font-size:clamp(15px,1.5vw,22px); margin-top:.3em; }

/* ===================== BRAND CONCEPT (video hero) ===================== */
.concept-hero{ position:relative; min-height:100vh; overflow:hidden; display:flex; align-items:center; color:var(--white); }
.concept-hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.concept-hero-overlay{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 60%,rgba(0,0,0,.35)); z-index:1; }
.concept-hero-inner{ position:relative; z-index:2; width:100%; min-height:100vh; display:grid; align-content:center; }
.concept-hero-panel{ background:var(--red); color:var(--white); display:inline-block; padding:clamp(28px,3vw,46px) clamp(34px,4vw,64px); max-width:min(680px,60%); }
.concept-hero-zh{ font-family:var(--f-cjk-head); font-weight:400; font-size:clamp(28px,3.6vw,52px); line-height:1.3; }
.concept-hero-en{ font-family:var(--f-en-alt); font-size:clamp(18px,1.8vw,26px); margin-top:1em; opacity:.95; }
.concept-hero-desc{ font-family:var(--f-cjk-body); font-size:clamp(15px,1.5vw,22px); line-height:1.9; max-width:560px; margin-top:clamp(40px,6vw,90px); margin-left:auto; }

/* ===================== PLACE TYPES ===================== */
.places{ background:var(--white); padding:clamp(80px,10vw,160px) 0; }
.section-head{ max-width:760px; margin-bottom:clamp(40px,5vw,80px); }
.section-title{ font-family:var(--f-cjk-head); font-size:clamp(28px,3.4vw,48px); font-weight:400; }
.section-lead{ font-family:var(--f-cjk-body); color:#555; font-size:clamp(15px,1.5vw,20px); line-height:1.9; margin-top:1em; }
.place-list{ display:flex; flex-direction:column; gap:clamp(16px,2vw,28px); }
.place-card{ display:grid; grid-template-columns:1fr 1fr; min-height:clamp(320px,38vw,540px); overflow:hidden; }
.place-photo{ overflow:hidden; }
.place-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,1,.3,1); }
.place-card:hover .place-photo img{ transform:scale(1.05); }
.place-info{ background:var(--charcoal); color:var(--white); display:flex; flex-direction:column; justify-content:center; padding:clamp(34px,5vw,90px); }
.place-zh{ font-family:var(--f-cjk-head); font-weight:400; font-size:clamp(28px,3.2vw,48px); letter-spacing:.35em; }
.place-en{ font-family:var(--f-en-alt); font-size:clamp(16px,1.6vw,24px); margin-top:.6em; opacity:.85; }
.place-tag{ font-family:var(--f-cjk-body); font-size:clamp(14px,1.3vw,18px); margin-top:1.4em; opacity:.7; }
.place-desc{ font-family:var(--f-cjk-body); font-size:clamp(15px,1.4vw,19px); line-height:1.9; margin-top:1em; max-width:30em; }

/* ===================== NOT JUST A SIGN + CONCEPTS ===================== */
.concepts{ background:var(--white); padding:clamp(80px,10vw,160px) 0; }
.concepts-head{ margin-bottom:clamp(50px,7vw,110px); }
.concepts-en{ font-family:var(--f-en-alt); font-weight:700; font-size:clamp(34px,5.5vw,90px); line-height:1.05; }
.concepts-zh{ font-family:var(--f-cjk-head); font-size:clamp(24px,3vw,44px); margin-top:.6em; }
.concepts-lead{ font-family:var(--f-cjk-body); color:#555; font-size:clamp(15px,1.5vw,20px); margin-top:1.2em; max-width:40em; }
.concept-rows{ display:flex; flex-direction:column; gap:clamp(18px,2.4vw,34px); }
.concept-row{ display:grid; grid-template-columns:auto clamp(180px,18vw,300px) 1fr; align-items:center; gap:clamp(24px,4vw,70px); background:var(--charcoal); color:var(--white); padding:clamp(28px,3.4vw,56px); border-radius:6px; }
.concept-num{ font-family:var(--f-en-display); font-weight:800; font-size:clamp(40px,6vw,110px); color:rgba(255,255,255,.18); line-height:1; }
.concept-vid{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:4px; }
.concept-text h3{ font-family:var(--f-cjk-head); font-weight:400; font-size:clamp(24px,2.6vw,40px); letter-spacing:.15em; }
.concept-text p{ font-family:var(--f-cjk-body); font-size:clamp(15px,1.5vw,20px); line-height:1.9; margin-top:.8em; opacity:.85; }

/* ===================== SERVICES INTRO ===================== */
.services-intro{ background:var(--white); padding:clamp(70px,9vw,150px) 0; text-align:center; }
.services-intro-zh{ font-family:var(--f-cjk-head); font-weight:400; font-size:clamp(26px,3.4vw,50px); line-height:1.5; }
.services-intro-en{ font-family:var(--f-en); color:#888; font-size:clamp(15px,1.5vw,20px); line-height:1.8; margin-top:1.4em; max-width:54em; margin-left:auto; margin-right:auto; }

/* ===================== OUR SERVICES (pink-red, glass cards) ===================== */
.our-services{ position:relative; background:var(--pink-red); color:var(--white); padding:clamp(90px,12vw,200px) 0; overflow:hidden; }
.our-services-giant{ position:absolute; left:-2%; top:50%; transform:translateY(-50%); font-family:var(--f-en-display); font-weight:800; font-size:clamp(120px,24vw,460px); color:rgba(255,255,255,.16); filter:blur(2px); white-space:pre-line; line-height:.82; z-index:0; }
.our-services-head{ position:relative; z-index:2; margin-bottom:clamp(40px,5vw,80px); }
.our-services-en{ font-family:var(--f-en-alt); font-size:clamp(18px,2vw,30px); opacity:.85; }
.our-services-zh{ font-family:var(--f-cjk-head); font-weight:400; font-size:clamp(28px,3.6vw,54px); margin-top:.2em; }
.svc-grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,34px); }
.svc-card{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:14px; padding:clamp(28px,3vw,46px);
  min-height:clamp(240px,22vw,340px);
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .4s cubic-bezier(.16,1,.3,1), background .4s;
}
.svc-card:hover{ transform:translateY(-8px); background:rgba(255,255,255,.18); }
.svc-card h3{ font-family:var(--f-cjk-head); font-weight:400; font-size:clamp(24px,2.4vw,38px); line-height:1.25; }
.svc-card p{ font-family:var(--f-cjk-body); font-size:clamp(14px,1.4vw,19px); line-height:1.85; opacity:.92; }

/* ===================== CUSTOMER JOURNEY ===================== */
.journey{ position:relative; background:var(--white); padding:clamp(90px,12vw,200px) 0; overflow:hidden; }
.journey-giant{ position:absolute; left:-2%; top:7%; font-family:var(--f-en-display); font-weight:800; font-size:clamp(80px,15vw,300px); color:var(--watermark); white-space:pre-line; line-height:.85; z-index:0; }
.journey-head{ position:relative; z-index:2; margin-bottom:clamp(50px,6vw,100px); max-width:760px; }
.journey-en{ font-family:var(--f-en-alt); font-size:clamp(18px,2vw,30px); color:var(--red); }
.journey-zh{ font-family:var(--f-cjk-head); font-weight:400; font-size:clamp(28px,3.4vw,50px); margin-top:.2em; }
.journey-lead{ font-family:var(--f-cjk-body); color:#555; font-size:clamp(15px,1.5vw,20px); line-height:1.9; margin-top:1.2em; }
.journey-list{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(18px,2vw,28px); }
.journey-card{ position:relative; background:var(--black); color:var(--white); border-radius:18px; overflow:hidden; padding:clamp(26px,2.2vw,40px); display:flex; flex-direction:column; min-height:clamp(360px,30vw,480px); }
.journey-no{ font-family:var(--f-num); font-weight:800; font-size:clamp(44px,4vw,72px); line-height:1; }
.journey-card img{ width:100%; height:clamp(140px,12vw,200px); object-fit:cover; border-radius:10px; margin:clamp(16px,1.6vw,26px) 0; }
.journey-step-en{ font-family:var(--f-en); opacity:.7; font-size:clamp(13px,1.2vw,16px); }
.journey-body h3{ font-family:var(--f-cjk-head); font-weight:400; font-size:clamp(22px,2.2vw,32px); margin-top:.2em; }
.journey-desc{ font-family:var(--f-cjk-body); font-size:clamp(14px,1.3vw,17px); line-height:1.8; margin-top:.8em; opacity:.85; }

/* ===================== AWARDS ===================== */
.awards{ background:#f4f4f4; padding:clamp(60px,7vw,120px) 0; text-align:center; }
.awards-title{ font-family:var(--f-en-alt); font-weight:700; font-size:clamp(28px,3.4vw,52px); margin-bottom:clamp(36px,4vw,70px); }
.awards-logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(30px,5vw,90px); }
.awards-logos img{ height:clamp(50px,5vw,90px); width:auto; object-fit:contain; opacity:.85; filter:grayscale(1); transition:.3s; }
.awards-logos img:hover{ opacity:1; filter:none; }

/* ===================== FAQ ===================== */
.faq{ position:relative; background:var(--watermark); padding:clamp(80px,10vw,170px) 0; overflow:hidden; }
.faq-giant{ position:absolute; right:0; top:clamp(40px,6vw,110px); font-family:var(--f-en-display); font-weight:800; font-size:clamp(120px,22vw,420px); color:var(--black); line-height:.8; z-index:0; }
.faq-arrow{ position:absolute; right:clamp(180px,28vw,560px); top:clamp(50px,7vw,130px); width:clamp(60px,9vw,150px); height:clamp(120px,18vw,300px); background:rgba(255,255,255,.55); clip-path:polygon(35% 0,65% 0,65% 62%,100% 62%,50% 100%,0 62%,35% 62%); z-index:1; }
.faq-vertical{ position:absolute; right:clamp(150px,24vw,470px); top:clamp(70px,8vw,150px); writing-mode:vertical-rl; font-family:var(--f-cjk-head); font-size:clamp(20px,2vw,34px); letter-spacing:.2em; z-index:1; }
.faq-list{ position:relative; z-index:2; max-width:1200px; margin-top:clamp(180px,30vw,560px); }
.faq-item{ border-bottom:1px solid rgba(0,0,0,.18); }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:clamp(22px,2.4vw,38px) 0; font-family:var(--f-cjk-head); font-weight:400; font-size:clamp(20px,2.4vw,38px); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-ico{ position:relative; width:clamp(22px,2vw,34px); height:clamp(22px,2vw,34px); flex:none; }
.faq-ico::before,.faq-ico::after{ content:''; position:absolute; background:#111; left:50%; top:50%; transform:translate(-50%,-50%); }
.faq-ico::before{ width:100%; height:2px; }
.faq-ico::after{ width:2px; height:100%; transition:transform .3s; }
.faq-item[open] .faq-ico::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq-answer{ font-family:var(--f-cjk-body); font-size:clamp(15px,1.5vw,20px); line-height:2; color:#333; padding:0 0 clamp(26px,2.6vw,40px); max-width:60em; }

/* ===================== CTA + FORM ===================== */
.cta{ background:var(--pink-red); color:var(--white); padding:clamp(80px,10vw,170px) 0; }
.cta-inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,110px); align-items:start; }
.cta-q{ font-family:var(--f-cjk-body); font-size:clamp(16px,1.6vw,22px); opacity:.9; }
.cta-title{ font-family:var(--f-cjk-head); font-weight:400; font-size:clamp(28px,3.4vw,50px); line-height:1.4; margin-top:.6em; }
.cta-sub{ font-family:var(--f-cjk-body); font-size:clamp(15px,1.6vw,22px); margin-top:.6em; opacity:.92; }
.cta-form{ display:flex; flex-direction:column; gap:clamp(18px,2vw,26px); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,24px); }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:var(--f-en); font-size:15px; opacity:.95; }
.field label span{ color:#fff; }
.field input,.field select{
  font-family:var(--f-en); font-size:16px; color:#111;
  background:#fff; border:none; border-radius:6px; padding:16px 18px; width:100%;
}
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23333' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 18px center; padding-right:44px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.cta-submit{ background:#fff; color:#111; font-family:var(--f-en); font-size:18px; padding:18px; border-radius:6px; margin-top:6px; transition:transform .2s, box-shadow .2s; }
.cta-submit:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.18); }
.cta-submit:disabled{ opacity:.6; cursor:default; transform:none; box-shadow:none; }
.form-status{ font-family:var(--f-cjk-body); font-size:15px; min-height:1.2em; }
.form-status.ok{ color:#fff; }
.form-status.err{ color:#ffe; font-weight:700; }

/* ===================== FOOTER ===================== */
.site-footer{ position:relative; background:var(--black); color:var(--white); padding:clamp(70px,8vw,130px) 0 40px; overflow:hidden; }
.footer-giant{ position:absolute; left:-1%; bottom:-4%; font-family:var(--f-en-display); font-weight:800; font-size:clamp(120px,26vw,440px); color:rgba(255,255,255,.06); line-height:.8; z-index:0; }
.footer-inner{ position:relative; z-index:2; }
.footer-brand img{ filter:brightness(0) invert(1); width:150px; height:auto; margin-bottom:clamp(40px,5vw,70px); }
.footer-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,50px); }
.footer-col h4{ font-family:var(--f-en); font-size:clamp(18px,1.8vw,26px); font-weight:400; margin-bottom:1.2em; }
.footer-col a,.footer-col span{ display:flex; align-items:center; gap:10px; font-family:var(--f-en); font-size:15px; color:rgba(255,255,255,.75); padding:5px 0; transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-social img{ width:20px; height:20px; filter:brightness(0) invert(1); }
.footer-copy{ font-family:var(--f-en); font-size:13px; color:rgba(255,255,255,.5); margin-top:clamp(50px,6vw,90px); }