/* 手機版空拍圖手勢提示：使用本機 assets 圖示，避免依賴 Figma 暫存網址。 */
:root{
  --ink:#172b36;
  --blue:#387aa6;
  --sky:#52baff;
  --light:#edf7fb;
  --line:#b0ccd6;
  --muted:#5e7885;
  --white:#fff;
  --shadow:0 16px 40px rgba(16,36,51,.08);
  --serif:"Noto Serif TC","PingFang TC","Microsoft JhengHei",serif;
  --sans:"Inter",Arial,sans-serif;
}

/* Reset */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:var(--serif);
  line-height:1.7;
}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
a{text-decoration:none;color:inherit}

.container{width:min(1440px,calc(100% - 64px));margin:0 auto}
.section{padding:112px 0}
.section-head{margin-bottom:56px}
.section-head--center{text-align:center}
.eyebrow{
  color:var(--blue);
  font-family:var(--sans);
  font-size:14px;
  letter-spacing:2px;
  margin-bottom:12px;
}
h1,h2,h3,p{margin-top:0}
h1{
  font-size:clamp(38px,3.2vw,58px);
  line-height:1.45;
  letter-spacing:1.4px;
  font-weight:600;
}
h2{
  font-size:clamp(30px,2.8vw,50px);
  line-height:1.45;
  letter-spacing:1.2px;
  font-weight:600;
}
h3{
  font-size:32px;
  line-height:1.4;
  font-weight:500;
}
p{
  font-size:18px;
  color:var(--ink);
}

/* Floating CTA */
.floating-cta{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:50;
  padding:14px 22px;
  background:var(--ink);
  color:#fff;
  box-shadow:var(--shadow);
  font-size:16px;
  letter-spacing:1px;
}

/* Hero */
.hero{
  min-height:100vh;
  position:relative;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.16) 22%, rgba(255,255,255,0) 45%),
    url("assets/hero-desktop.png");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.hero__inner{
  min-height:100vh;
  display:flex;
  align-items:center;
}
.hero__copy{
  max-width:720px;
  padding-top:40px;
}
.brand-mark{
  display:inline-block;
  margin-bottom:42px;
  font-size:38px;
  font-weight:600;
  letter-spacing:3px;
}
.hero__sub{
  font-size:24px;
  margin-bottom:28px;
}
.hero__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:24px;
}
.hero__meta strong{
  font-size:40px;
  line-height:1.2;
}
.hero__meta span{
  font-size:18px;
  font-weight:600;
}
.scroll-tip{
  position:absolute;
  left:40px;
  bottom:28px;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:2px;
  color:var(--ink);
}

/* City Center */
.city-center{
  background:
    radial-gradient(circle at 10% 40%, rgba(215,228,236,.40), transparent 22%),
    radial-gradient(circle at 90% 80%, rgba(215,228,236,.26), transparent 18%),
    #fff;
}
.city-block{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
  margin-bottom:88px;
}
.city-block:last-child{margin-bottom:0}
.city-block--reverse{
  grid-template-columns:.95fr 1.05fr;
}
.city-block--reverse .city-block__content{order:1}
.city-block--reverse .city-block__media{order:2}

.badge-icon{
  width:32px;
  height:32px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#ecf7fb;
  color:var(--sky);
  margin-bottom:12px;
}
.city-number{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:8px;
}
.city-number__value{
  font-family:var(--sans);
  font-size:58px;
  line-height:1;
  color:var(--sky);
  font-weight:700;
}
.city-number__text{
  font-size:28px;
  line-height:1.2;
  font-weight:600;
}
.city-desc{
  margin-bottom:24px;
  color:var(--ink);
}

/* Chips */
.chip-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  border:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  padding:8px 14px;
  cursor:pointer;
  transition:.2s ease;
}
.chip:hover{
  border-color:#9dc6d8;
  background:#f6fbfd;
  color:var(--ink);
}
.chip.is-active{
  border-color:var(--blue);
  background:var(--blue);
  color:#fff;
  box-shadow:0 4px 14px rgba(56,122,166,.22);
}

/* Carousel */
.carousel{
  position:relative;
}
.carousel__viewport{
  aspect-ratio:740 / 430;
  overflow:hidden;
  background:#eef5f8;
  box-shadow:var(--shadow);
}
.carousel__image{
  width:100%;
  height:100%;
  object-fit:cover;
}
.carousel__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border:none;
  background:rgba(255,255,255,.96);
  color:var(--ink);
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  z-index:2;
}
.carousel__arrow--prev{left:14px}
.carousel__arrow--next{right:14px}
.carousel__dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:14px;
}
.carousel__dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(140,140,140,.45);
  border:none;
  padding:0;
  cursor:pointer;
}
.carousel__dot.is-active{
  background:rgba(110,110,110,.9);
}

/* Reserve */
.reserve{
  background:#edf7fb;
}
.reserve__grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:72px;
  align-items:start;
}
.reserve__project{
  font-size:40px;
  font-weight:600;
  margin:28px 0 12px;
}
.reserve__tel{
  display:inline-block;
  margin-top:12px;
  font-size:38px;
}
.reserve__form{
  background:rgba(255,255,255,.5);
  padding:0;
}
.reserve__form label{
  display:grid;
  gap:8px;
  margin-bottom:16px;
}
.reserve__form input,
.reserve__form select,
.reserve__form textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  padding:14px 16px;
  color:var(--ink);
}
.reserve__form textarea{
  min-height:110px;
  resize:vertical;
}
.agree{
  display:flex !important;
  gap:10px;
  align-items:center;
}
.agree input{
  width:auto !important;
}
.btn-submit{
  border:none;
  background:var(--ink);
  color:#fff;
  padding:14px 28px;
  cursor:pointer;
}

/* Responsive */
@media (max-width: 1100px){
  .container{width:min(100%, calc(100% - 40px))}
  .city-block,
  .city-block--reverse,
  .reserve__grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .city-block--reverse .city-block__content,
  .city-block--reverse .city-block__media{
    order:initial;
  }
}

@media (max-width: 767px){
  .section{padding:72px 0}
  .floating-cta{
    right:14px;
    bottom:14px;
    padding:12px 16px;
    font-size:14px;
  }
  .hero{
    min-height:100svh;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 45%),
      url("assets/hero-mobile.png");
    background-position:center;
  }
  .hero__inner{
    min-height:100svh;
    align-items:flex-start;
    padding-top:84px;
  }
  .hero__copy{
    max-width:100%;
  }
  .brand-mark{
    font-size:28px;
    margin-bottom:24px;
  }
  .hero__sub{
    font-size:18px;
    max-width:70%;
  }
  .hero__meta{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .hero__meta strong{font-size:32px}
  .hero__meta span{font-size:16px}
  .scroll-tip{display:none}

  .section-head{margin-bottom:36px}
  .city-number__value{font-size:48px}
  .city-number__text{font-size:24px}
  .reserve__project{font-size:32px}
  .reserve__tel{font-size:30px}
}

.badge-icon__svg{width:20px;height:20px;display:block}

/* ===== Integrated sections from 柏德序日_HTML_CSS_RWD ===== */
.section[style*="--bg"]{position:relative;overflow:hidden;background:#fff var(--bg) center/cover no-repeat}
.section[style*="--bg"] .container{position:relative;z-index:2}
.centered{text-align:center}

.split-bg{min-height:1100px;padding:150px 0 95px}.wash{position:absolute;inset:0}.wash.left{background:linear-gradient(90deg,#f7fcfff9 0%,#f7fcffe8 30%,#f7fcffd1 42%,#f7fcff00 75%)}.two-col{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:center}.copy{max-width:650px}.copy p{font-size:23px}.feature-img{margin:60px 0 0}.feature-img img{width:100%;aspect-ratio:820/485;object-fit:cover}.feature-img figcaption{margin-top:-38px;padding-left:16px;color:#fff;position:relative}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:55px;margin-top:90px}.stats div{display:grid;grid-template-columns:auto 1fr;align-items:end}.stats b{font:70px/1 var(--sans);font-weight:600}.stats span{font-size:25px;margin-left:12px}.stats small{grid-column:1/-1;color:var(--muted);font-size:18px;margin-top:24px}
.triangle{min-height:1140px;padding:160px 0}.triangle-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}.lead{font-weight:600}.glass-cards{display:grid;gap:15px;margin-top:50px;max-width:465px}.glass-cards article{padding:22px 26px;background:#ffffff82;border-radius:16px;display:grid}.glass-cards small{font-family:var(--sans);color:var(--blue);letter-spacing:1.5px}.glass-cards strong{font-size:34px}.glass-cards span{font-size:18px;font-weight:600}.triangle-map{width:100%;max-width:805px;justify-self:end}
.location{min-height:760px;background-position:center top!important;padding-bottom:0}.top-copy{padding-top:0}.top-copy .subtitle{font-size:31px;font-weight:500}

/* Location aerial image section */
.location{min-height:760px;background-position:center top!important;padding-bottom:0}.top-copy{padding-top:0}.top-copy .subtitle{font-size:31px;font-weight:500}
.location-aerial-wrap{margin-top:56px;padding-bottom:120px;width:min(100%,calc(100% - 60px))}.env-desktop{display:block}.env-desktop img{display:block;width:100%;height:auto;box-shadow:0 18px 50px rgba(0,0,0,.12)}.env-mobile{display:none}.env-mobile__scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;white-space:nowrap;box-shadow:0 14px 36px rgba(0,0,0,.12)}.env-mobile__scroll::-webkit-scrollbar{display:none}.env-mobile__scroll img{display:block;width:980px;max-width:none;height:auto}.env-mobile__hint{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;font:600 14px var(--sans);color:var(--muted)}.env-mobile__hint span{display:block;width:34px;height:34px;background:url('assets/mobile-swipe-hand.svg') center/contain no-repeat;opacity:.72}

/* Park: real video container */
.park{min-height:1120px;display:flex;align-items:flex-end}.park-overlay{position:absolute;inset:0;background:linear-gradient(105deg,#0009,#0000 72%)}.park-card{position:relative;z-index:3;background:#ffffffe8;width:min(700px,calc(100% - 56px));padding:34px 46px;margin:0 0 54px 3vw}.park-card h2{font-size:46px}.park-card p{font-size:24px}.park-video{position:absolute;z-index:2;right:5vw;top:50%;width:min(48vw,760px);transform:translateY(-50%);filter:drop-shadow(0 24px 50px rgba(0,0,0,.24))}.park-video__frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;border:8px solid rgba(17,17,17,.96)}.park-video__frame video{display:block;width:100%;height:100%;object-fit:cover;background:#000}.park-video__note{margin-top:12px;color:#fff;font:600 13px/1.5 var(--sans);text-shadow:0 2px 8px rgba(0,0,0,.4)}
.team{min-height:1000px;padding:110px 0}.soft-overlay{position:absolute;inset:0;background:#ffffffc7}.team-copy{max-width:1300px}.team-copy h3{font-size:33px}.team-copy>p{max-width:1100px;margin-left:auto;margin-right:auto}.values{border-top:1px solid var(--line);margin-top:75px;padding-top:75px;display:grid;grid-template-columns:repeat(3,1fr);gap:70px;text-align:left}.values article{display:grid;grid-template-columns:auto 1fr;column-gap:28px}.values small{grid-column:1/-1;font-family:var(--sans);color:var(--blue);font-weight:700;letter-spacing:2px}.values strong{font-size:37px}.values span{font-size:18px;font-weight:600}
.builder{min-height:1100px;padding:120px 0 90px}.blue-overlay{position:absolute;inset:0;background:#ebf6fb9f}.builder-top{display:grid;grid-template-columns:1fr 1fr;gap:110px}.builder-copy{padding-top:45px}.mini-badges{display:flex;gap:46px;margin-top:30px}.mini-badges span{display:grid;font-size:15px;color:var(--muted)}.mini-badges b{font-size:24px;color:var(--ink)}.project-strip{display:flex;gap:14px;align-items:flex-start;justify-content:flex-start;margin-top:132px;flex-wrap:nowrap;overflow:visible}.project-strip figure{margin:0;flex:0 0 auto}.project-strip img{display:block;height:245px;width:auto;max-width:none;object-fit:contain;box-shadow:none}.project-strip figcaption{font-size:15px;font-weight:500;line-height:1.35;margin-top:10px;color:var(--ink);white-space:nowrap}
.architect{min-height:1100px;padding:110px 0 90px}.architect-wash{position:absolute;inset:0;background:linear-gradient(180deg,#ffffffb3,#ffffff1f)}.architect-copy{max-width:1000px}.architect-copy h3{font-size:31px}.arch-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:115px}.arch-strip img{width:100%;height:212px;object-fit:cover}.arch-strip figcaption{background:#fff;border:1px solid var(--line);padding:10px 12px;font-size:15px}

/* Architecture copy now follows BRILLIANT LIFE's stable two-column text rhythm */
.architecture{min-height:1080px;padding:145px 0}.architecture-wash{position:absolute;inset:0;background:linear-gradient(90deg,#f7fcfff4 0%,#f7fcffe7 34%,#f7fcff26 64%,transparent 78%)}.architecture-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:100px;align-items:center;min-height:790px}.architecture-copy{max-width:610px}.architecture-copy h2{margin-bottom:38px}.architecture-copy h3{color:#e96a1c;font-size:27px;margin:34px 0 8px;line-height:1.55}.architecture-copy p{font-size:23px;margin-bottom:18px}.architecture-visual{min-height:640px}
.brilliant{min-height:970px;padding:150px 0}.life-overlay{position:absolute;inset:0;background:transparent}/* bg10 本身已是淡色雲層，不再疊白色遮罩（原本 #ffffffe0 會把雲洗掉） */.life-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:100px;align-items:center}.life-copy p{font-size:23px}.life-carousel{width:100%}.life-carousel__viewport{aspect-ratio:700/520;background:#fff;box-shadow:var(--shadow)}.life-carousel__image{width:100%;height:100%;object-fit:contain;background:#fff}.life-carousel .carousel__dots{margin-top:18px}.life-carousel .carousel__arrow{width:36px;height:36px;background:rgba(255,255,255,.95);font-size:24px;line-height:1}

/* Original integrated reserve block */
.reserve[style*="--bg"]{min-height:1190px;padding:120px 0 55px}.reserve-overlay{position:absolute;inset:0;background:#ebf6fba1}.reserve-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px}.reserve-brand{padding-top:75px}.reserve-brand img{width:460px;margin:60px 0}.reserve-brand .tel{font-size:44px}.reserve-form h3{font-size:34px;font-weight:400}.reserve-form label{display:grid;gap:8px;margin-bottom:18px;font-size:18px}.reserve-form input,.reserve-form select,.reserve-form textarea{width:100%;border:1px solid var(--line);background:#fff;padding:15px 18px;font:16px var(--serif);color:var(--ink)}.reserve-form textarea{min-height:106px;resize:vertical}.reserve-form .agree{display:flex;align-items:center}.reserve-form .agree input{width:auto}.reserve-form button{border:0;background:var(--ink);color:#fff;padding:15px 34px;font:18px var(--serif);cursor:pointer}.footer{border-top:1px solid var(--line);padding-top:14px;margin-top:55px;display:flex;justify-content:space-between;font-size:14px;position:relative;z-index:2}.footer span:last-child{font-family:var(--sans);letter-spacing:2px;color:var(--muted)}.legal{font-size:12px;color:var(--muted);margin-top:12px;position:relative;z-index:2}

@media(max-width:1100px){
  .two-col,.triangle-grid,.builder-top,.life-grid,.architecture-grid,.reserve-grid{grid-template-columns:1fr}
  .triangle-map{justify-self:center}.project-strip{flex-wrap:wrap;gap:18px;margin-top:80px}.project-strip img{height:220px}.arch-strip{grid-template-columns:repeat(2,1fr)}.values{gap:25px}.brilliant,.reserve[style*="--bg"],.builder,.architect,.team,.triangle,.split-bg{min-height:auto}
  .park{min-height:900px}.park-video{right:4vw;top:36%;width:min(70vw,720px)}.park-card{margin-bottom:34px}.architecture-grid{min-height:auto}.architecture-visual{display:none}.architecture-wash{background:#f7fcffe3}
}
@media(max-width:700px){
  .split-bg,.triangle,.builder,.architect,.architecture,.brilliant,.reserve[style*="--bg"],.team{padding:78px 0}.wash.left{background:#f7fcffe3}.copy p{font-size:17px}.stats{grid-template-columns:1fr;gap:30px;margin-top:55px}.stats b{font-size:54px}.glass-cards{max-width:none}.location{min-height:650px}.top-copy{padding-top:0}.top-copy .subtitle{font-size:20px}
  .location-aerial-wrap{margin-top:34px;padding-bottom:78px}.env-desktop{display:none}.env-mobile{display:block}
  .park{min-height:760px;align-items:flex-end}.park-video{position:absolute;right:16px;left:16px;top:34%;width:auto;transform:translateY(-50%)}.park-video__note{font-size:12px}.park-card{margin:0 16px 26px;padding:26px 24px;width:calc(100% - 32px)}.park-card h2{font-size:31px}.park-card p{font-size:17px}
  .values{grid-template-columns:1fr;margin-top:45px;padding-top:40px}.project-strip{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:10px;margin-top:64px}.project-strip::-webkit-scrollbar{display:none}.project-strip figure{scroll-snap-align:start}.project-strip img{height:150px;width:auto;max-width:none}.project-strip figcaption{font-size:13px;white-space:nowrap}.arch-strip{grid-template-columns:1fr 1fr;margin-top:65px}.arch-strip img{height:160px}.architecture{background-position:72% center!important}.architecture-copy h3{font-size:22px}.architecture-copy p,.life-copy p{font-size:17px}.life-carousel{order:-1}.life-carousel__viewport{aspect-ratio:4/3}.reserve-brand{padding-top:0}.reserve-brand img{width:270px;margin:35px 0}.reserve-brand .tel{font-size:34px}.footer{flex-direction:column;gap:8px}
}


/* ===== Carousel motion polish ===== */
.carousel__viewport{position:relative;overflow:hidden}
.carousel__image{
  opacity:1;
  transform:scale(1);
  transition:opacity .44s cubic-bezier(.4,0,.2,1),transform .85s cubic-bezier(.2,.65,.2,1);
  will-change:opacity,transform;
}
.carousel__image.is-fading{opacity:0;transform:scale(1.018)}
.carousel:hover .carousel__image:not(.is-fading){transform:scale(1.012)}
.carousel__arrow{
  transition:transform .22s ease,background-color .22s ease,box-shadow .22s ease,opacity .22s ease;
  opacity:.9;
}
.carousel__arrow:hover{
  opacity:1;
  background:#fff;
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.carousel__arrow:active{transform:translateY(-50%) scale(.96)}
.carousel__dot{transition:transform .22s ease,background-color .22s ease,width .22s ease}
.carousel__dot:hover{transform:scale(1.25)}
.carousel__dot.is-active{transform:scale(1.18)}

/* ===== Architect project cards — supplied reference style ===== */
.arch-strip{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:22px;
  margin-top:92px;
  align-items:start;
}
.arch-card{margin:0;min-width:0}
.arch-card__photo{
  background:#fff;
  border:1px solid #dfe8ec;
  padding:4px;
  box-shadow:0 7px 20px rgba(63,95,108,.08);
}
.arch-card__photo img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  height:auto;
  object-fit:cover;
}
.arch-card figcaption{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:7px;
  min-height:34px;
  padding:7px 10px;
  background:#fff;
  border:0;
  color:#475e69;
  font-size:14px;
  line-height:1.35;
  box-shadow:0 3px 10px rgba(63,95,108,.05);
  white-space:nowrap;
}
.arch-caption__icon{width:17px;height:17px;flex:0 0 auto;color:#4d9bb8}

@media(max-width:1100px){
  .arch-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:70px}
}
@media(max-width:700px){
  .arch-strip{
    display:flex;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
    margin-top:52px;
  }
  .arch-strip::-webkit-scrollbar{display:none}
  .arch-card{flex:0 0 76vw;max-width:330px;scroll-snap-align:start}
  .arch-card__photo img{aspect-ratio:4/3;height:auto}
  .arch-card figcaption{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .carousel__image,.carousel__arrow,.carousel__dot{transition:none!important}
}


/* ===== shared line icons ===== */
.ui-icon-circle{width:58px;height:58px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(242,248,251,.95);border:1px solid #b8cdd8;color:#5f8ea7;flex:0 0 auto}
.ui-icon-circle svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* stats icons */
.stats{align-items:start}
.stat-item{display:grid;grid-template-columns:72px 1fr;align-items:start;column-gap:22px}
.stat-copy>div{display:flex;align-items:flex-end;gap:12px}
.stat-copy small{margin-top:16px;display:block}

/* glass cards icons */
.glass-cards article{grid-template-columns:1fr auto;align-items:center;column-gap:18px;padding:18px 24px 18px 26px}
.glass-card__text{display:grid}
.glass-card__icon{width:54px;height:54px;background:rgba(255,255,255,.68)}
.glass-cards strong{margin-top:2px}
.glass-cards span{margin-top:4px}

/* value icons */
.values article{display:grid;grid-template-columns:76px 1fr;column-gap:24px;align-items:start}
.value-copy{display:grid}
.value-copy small{grid-column:auto}
.value-icon{margin-top:4px}

/* builder mini badges icons */
.mini-badges{align-items:flex-start;flex-wrap:wrap}
.mini-badges>span{display:grid;grid-template-columns:72px 1fr;column-gap:18px;align-items:center;min-width:220px}
.mini-badge__icon{width:60px;height:60px;background:rgba(255,255,255,.82)}
.mini-badge__copy{display:grid;font-size:15px;color:var(--muted)}
.mini-badge__copy b{font-size:24px;color:var(--ink)}

@media(max-width:700px){
  .ui-icon-circle{width:52px;height:52px}
  .ui-icon-circle svg{width:23px;height:23px}
  .stat-item{grid-template-columns:62px 1fr;column-gap:14px}
  .glass-cards article{padding:16px 18px;column-gap:14px}
  .glass-card__icon{width:48px;height:48px}
  .values article{grid-template-columns:62px 1fr;column-gap:16px}
  .mini-badges{gap:22px}
  .mini-badges>span{grid-template-columns:62px 1fr;min-width:0;width:100%}
  .mini-badge__icon{width:52px;height:52px}
}


/* builder gallery refined to match reference strip */
.project-strip figure:nth-child(1) img{height:248px}
.project-strip figure:nth-child(2) img{height:248px}
.project-strip figure:nth-child(3) img{height:248px}
.project-strip figure:nth-child(4) img{height:248px}
.project-strip figure:nth-child(5) img{height:248px}
.project-strip figure:nth-child(6) img{height:248px}
@media(max-width:700px){.project-strip figure{flex:0 0 auto}}


/* ===== Reservation form backend integration ===== */
.contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form-field{display:grid;gap:8px;margin-bottom:18px;font-size:16px}
.contact-form-field>span{color:var(--ink);font-weight:600}
.contact-form input,.contact-form select,.contact-form textarea,.twzipcode select{
  width:100%;border:1px solid rgba(38,71,81,.22);background:rgba(255,255,255,.94);
  padding:15px 16px;font:16px var(--serif);color:var(--ink);border-radius:0;outline:none;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.contact-form input:focus,.contact-form select:focus,.twzipcode select:focus{
  border-color:#6c9fb5;box-shadow:0 0 0 3px rgba(108,159,181,.12);background:#fff;
}
.twzipcode{margin-bottom:18px}
.twzipcode .zipcode{display:none!important}
.privacy-consent{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 22px;font-size:14px;color:var(--muted)}
.privacy-consent input{width:auto;accent-color:#527f94}
.privacy-consent label{cursor:pointer}
.privacy-link{border:0!important;background:transparent!important;color:#527f94!important;padding:0!important;font:inherit!important;text-decoration:underline;cursor:pointer}
.contact-form #submitBtn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:180px}
.contact-form #submitBtn.is-sending{opacity:.58;cursor:not-allowed}
.form-status{min-height:24px;margin-top:14px;font:14px/1.6 var(--sans);color:#527f94}
.form-status.is-error{color:#a9473f}

.modal-open{overflow:hidden}
.privacy-modal,.success-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(16,31,37,.56);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.privacy-modal.is-open,.success-modal.is-open{opacity:1;visibility:visible}
.privacy-modal-dialog,.success-modal-dialog{width:min(720px,100%);max-height:min(82vh,760px);background:#f9fcfd;box-shadow:0 24px 80px rgba(0,0,0,.25);transform:translateY(12px);transition:transform .22s ease;overflow:hidden}
.privacy-modal.is-open .privacy-modal-dialog,.success-modal.is-open .success-modal-dialog{transform:translateY(0)}
.privacy-modal-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;border-bottom:1px solid var(--line)}
.privacy-modal-header h2{font-size:24px;margin:0}
.privacy-modal-close{border:0;background:transparent;font-size:30px;line-height:1;cursor:pointer;color:var(--ink)}
.privacy-modal-body{padding:24px 28px;overflow:auto;max-height:58vh;font-size:15px;line-height:1.9;color:#40545c}
.privacy-modal-body h4{font-size:17px;color:var(--ink);margin:18px 0 4px}
.privacy-modal-footer{padding:16px 26px;border-top:1px solid var(--line);text-align:right}
.privacy-modal-footer .privacy-modal-close,.success-modal-confirm{background:var(--ink);color:#fff;border:0;padding:11px 26px;font:16px var(--serif);cursor:pointer}
.success-modal-dialog{width:min(420px,100%);padding:44px 32px;text-align:center}
.success-modal-dialog h2{font-size:32px;margin-bottom:14px}
.success-modal-dialog p{font-size:18px;line-height:1.8;margin-bottom:28px}

@media(max-width:700px){
  .contact-form-row{grid-template-columns:1fr;gap:0}
  .privacy-consent{align-items:flex-start}
  .privacy-modal-header{padding:18px 20px}
  .privacy-modal-header h2{font-size:20px}
  .privacy-modal-body{padding:20px;max-height:62vh}
  .success-modal-dialog{padding:36px 24px}
}


/* ===== 2026-10 mobile layout refinements ===== */
.architecture-visual img{display:none;width:100%;height:auto}

@media(max-width:700px){
  /* Reservation: county / district spacing matches the rest of the fields */
  .twzipcode.contact-form-row{
    display:grid;
    grid-template-columns:1fr;
    gap:18px!important;
    margin-bottom:18px;
  }
  .twzipcode.contact-form-row > div,
  .twzipcode.contact-form-row > select{
    margin:0!important;
    width:100%!important;
  }
  .twzipcode.contact-form-row select{
    min-height:58px;
  }

  /* Minimalist architecture: show a real exterior visual beneath the copy on mobile */
  .architecture-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:34px;
  }
  .architecture-visual{
    display:block!important;
    min-height:0!important;
    width:100%;
    margin-top:6px;
    overflow:hidden;
    background:#eef5f8;
  }
  .architecture-visual img{
    display:block;
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    object-position:center center;
  }

  /* Builder projects: natural-aspect two-column mobile gallery */
  .project-strip{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px 12px!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
    padding-bottom:0!important;
    margin-top:64px!important;
    align-items:start!important;
  }
  .project-strip figure{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    order:initial;
  }
  .project-strip figure img,
  .project-strip figure:nth-child(1) img,
  .project-strip figure:nth-child(2) img,
  .project-strip figure:nth-child(3) img,
  .project-strip figure:nth-child(4) img,
  .project-strip figure:nth-child(5) img,
  .project-strip figure:nth-child(6) img{
    display:block;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }
  .project-strip figcaption{
    white-space:normal!important;
    font-size:13px!important;
    line-height:1.45;
    margin-top:7px!important;
  }
  /* Move 精英電腦－內湖企業總部 to the bottom on mobile only */
  .project-strip figure:nth-child(4){order:6!important}
  .project-strip figure:nth-child(5){order:4!important}
  .project-strip figure:nth-child(6){order:5!important}
}


/* ===== Mobile typography unified ===== */
@media (max-width:767px){
  /* Main reading hierarchy */
  h2,
  h3,
  .park-card h2,
  .team-copy h3,
  .architect-copy h3,
  .architecture-copy h3,
  .reserve-form h3,
  .privacy-modal-header h2,
  .success-modal-dialog h2{
    font-size:24px!important;
    line-height:1.45!important;
  }

  p,
  .copy p,
  .park-card p,
  .architecture-copy p,
  .life-copy p,
  .success-modal-dialog p{
    font-size:16px!important;
    line-height:1.8;
  }

  /* Other mobile text: about 2px smaller than the previous version */
  .eyebrow{font-size:12px!important}
  .floating-cta{font-size:12px!important}
  .brand-mark{font-size:26px!important}
  .hero__sub{font-size:16px!important}
  .hero__meta strong{font-size:30px!important}
  .hero__meta span{font-size:14px!important}

  .city-number__value{font-size:46px!important}
  .city-number__text{font-size:22px!important}
  .reserve__project{font-size:30px!important}
  .reserve__tel{font-size:28px!important}

  .stats b{font-size:52px!important}
  .stats span{font-size:23px!important}
  .stats small{font-size:16px!important}

  .top-copy .subtitle{font-size:18px!important}
  .glass-cards strong{font-size:24px!important}
  .glass-cards span{font-size:16px!important}
  .glass-cards small{font-size:12px!important}

  .values strong{font-size:24px!important}
  .values span{font-size:16px!important}
  .values small{font-size:12px!important}

  .mini-badge__copy{font-size:13px!important}
  .mini-badge__copy b{font-size:22px!important}

  .project-strip figcaption,
  .arch-card figcaption,
  .arch-strip figcaption{
    font-size:11px!important;
  }

  .park-video__note{font-size:10px!important}
  .privacy-consent{font-size:12px!important}
  .privacy-modal-body{font-size:13px!important}
  .privacy-modal-body h4{font-size:15px!important}
  .privacy-modal-close{font-size:28px!important}
  .footer{font-size:12px!important}
  .legal{font-size:10px!important}

  /* Keep form controls at 16px to avoid iPhone Safari auto-zoom */
  .reserve-form input,
  .reserve-form select,
  .reserve-form textarea,
  .contact-form input,
  .contact-form select,
  .contact-form textarea{
    font-size:16px!important;
  }

  .reserve-form button,
  #submitBtn,
  .privacy-modal-footer .privacy-modal-close,
  .success-modal-confirm{
    font-size:16px!important;
  }
}


/* ===== Mobile final spacing + architect auto carousel ===== */
@media (max-width:700px){
  /* #1 億東營造：標題與下方文案靠近 */
  .builder-top{
    gap:20px!important;
  }
  .builder-top > div:first-child{
    margin-bottom:0!important;
  }
  .builder-copy{
    padding-top:0!important;
    margin-top:0!important;
  }
  .builder-copy h3{
    margin-top:0!important;
    margin-bottom:18px!important;
  }

  /* #2 林宗良建築師作品：手機一張為主、露出下一張，支援自動輪播 + 手動滑動 */
  .arch-strip{
    display:flex!important;
    grid-template-columns:none!important;
    gap:14px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-behavior:smooth!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    padding:0 14px 14px 0!important;
    margin-top:42px!important;
  }
  .arch-strip::-webkit-scrollbar{display:none}
  .arch-card{
    flex:0 0 min(82vw,330px)!important;
    max-width:none!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always;
  }
}


/* ===== WOW motion tuning ===== */
.wow{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.animate__animated{
  --animate-duration:.9s;
}
@media (max-width:700px){
  .animate__animated{
    --animate-duration:.72s;
  }
}
@media (prefers-reduced-motion:reduce){
  .wow,
  .animate__animated{
    animation:none!important;
    transition:none!important;
    visibility:visible!important;
  }
}


/* ===== Park video WOW positioning fix ===== */
/* Outer element owns layout/translateY; inner element owns animation transform */
.park-video{
  transform:translateY(-50%)!important;
}
.park-video__motion{
  width:100%;
}
@media(max-width:700px){
  .park-video{
    transform:translateY(-50%)!important;
  }
}


/* ===== Requested mobile refinements 2026-10-16 ===== */
@media (max-width:767px){
  .architecture-copy h3{font-size:20px!important;}
}

.countup-target{display:inline-block}
#maximum .stat-copy b.countup-target{min-width:3.8ch}
.city-number__value.countup-target{min-width:1.7ch}
@media (prefers-reduced-motion:reduce){
  #maximum .stat-copy b.countup-target,
  .city-number__value.countup-target{min-width:0}
}


/* 航空城：圓形底樣式與下方「青埔高鐵特區」火車圖示完全一致 */
.glass-card--airport .glass-card__icon--airport{
  box-shadow:none;
}
.glass-card--airport .glass-card__icon--airport svg{
  transform:rotate(-16deg);
}

/* ===== 手機版空拍圖：Aqua One 風格左右滑動手勢提示 ===== */
.env-mobile{position:relative}
.env-mobile__scroll{touch-action:pan-x pan-y;overscroll-behavior-x:contain}
.env-mobile__gesture{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;white-space:nowrap;transition:opacity .4s ease,visibility .4s ease}
.env-mobile__gesture-pill{display:flex;align-items:center;justify-content:center;gap:15px;min-width:142px;height:50px;padding:7px 18px;border-radius:999px;color:#fff;background:rgba(15,26,32,.77);box-shadow:0 5px 20px rgba(0,0,0,.20);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.env-mobile__arrow{width:22px;height:22px;flex:none;opacity:.94}
.env-mobile__hand{height:34px;width:31px;flex:none;transform-origin:center;animation:env-hand-slide 2.8s ease-in-out infinite}
.env-mobile__arrow--left{animation:env-arrow-left 2.8s ease-in-out infinite}
.env-mobile__arrow--right{animation:env-arrow-right 2.8s ease-in-out infinite}
.env-mobile__gesture-label{padding:5px 12px;border-radius:20px;font:500 12px/1.4 var(--sans);letter-spacing:.08em;color:#fff;background:rgba(15,26,32,.59);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.env-mobile__gesture.is-dismissed{opacity:0;visibility:hidden}
@keyframes env-hand-slide{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}65%{transform:translateX(9px)}}
@keyframes env-arrow-left{0%,100%,65%{opacity:.65}25%{opacity:1}}
@keyframes env-arrow-right{0%,100%,25%{opacity:.65}65%{opacity:1}}
@media(prefers-reduced-motion:reduce){.env-mobile__hand,.env-mobile__arrow{animation:none}}
@media(max-width:700px){.env-mobile__scroll{scrollbar-width:none}}

/* ===== 手機版空拍圖滿版 + 精簡滑動提示（2026-10-19） ===== */
@media (max-width:700px){
  .location .location-aerial-wrap{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:0;padding-right:0;box-sizing:border-box;}
  .env-mobile,.env-mobile__scroll{width:100%;}
  .env-mobile__scroll{box-shadow:none;}
  .env-mobile__gesture{bottom:16px;gap:5px;}
  .env-mobile__gesture-pill{min-width:108px;height:38px;padding:5px 12px;gap:10px;box-shadow:0 3px 12px rgba(0,0,0,.18);}
  .env-mobile__arrow{width:16px;height:16px;}
  .env-mobile__hand{width:23px;height:26px;}
  .env-mobile__gesture-label{font-size:10px;padding:3px 9px;letter-spacing:.04em;}
}

/* 億東營造：實績圖片點擊放大，不改動原圖排列及大小 */
.project-strip figure{cursor:zoom-in}
.project-strip figure img{transition:filter .2s ease}
.project-strip figure:hover img{filter:brightness(.93)}
.project-strip figure:focus-visible{outline:3px solid #246c9c;outline-offset:5px}
/* ===========================================================
   億東營造｜建築實績燈箱
   所有選擇器僅作用於 #projectLightbox，避免與網站其他按鈕衝突。
   =========================================================== */
#projectLightbox[hidden]{display:none!important}
#projectLightbox.project-lightbox{
  position:fixed!important;inset:0!important;z-index:2147483000!important;
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  width:100vw;height:100vh;height:100dvh;
  padding:65px 66px 62px;margin:0;
  background:rgba(8,15,22,.94);color:#fff;touch-action:pan-y;
  opacity:0;visibility:hidden;transition:opacity .27s ease,visibility .27s ease;
  isolation:isolate;
}
#projectLightbox.project-lightbox.is-visible{opacity:1;visibility:visible}
#projectLightbox .project-lightbox__figure{
  margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:0;max-width:100%;max-height:100%;gap:14px;
  opacity:1;transform:scale(1);transition:opacity .185s ease,transform .185s ease;
}
#projectLightbox .project-lightbox__figure.is-switching{opacity:0;transform:scale(.985)}
#projectLightbox .project-lightbox__image{
  display:block;max-width:100%;max-height:calc(100dvh - 158px);width:auto;height:auto;
  object-fit:contain;box-shadow:0 10px 35px rgba(0,0,0,.32);
}
#projectLightbox .project-lightbox__caption{text-align:center;font-size:16px;line-height:1.5;color:#f3f6f8}
/* 重設網站通用 button 規則，尤其是 position / transform / line-height */
#projectLightbox button.project-lightbox__close,
#projectLightbox button.project-lightbox__arrow{
  appearance:none!important;box-sizing:border-box!important;display:flex!important;
  align-items:center!important;justify-content:center!important;
  min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;
  flex:none!important;border:1px solid rgba(255,255,255,.40)!important;
  border-radius:50%!important;color:#fff!important;background:rgba(33,43,51,.74)!important;
  line-height:1!important;text-align:center!important;cursor:pointer;
  opacity:1!important;visibility:visible!important;touch-action:manipulation;
  transition:background .2s ease,border-color .2s ease!important;
}
#projectLightbox button.project-lightbox__close:hover,
#projectLightbox button.project-lightbox__arrow:hover{background:rgba(90,105,120,.82)!important}
#projectLightbox button.project-lightbox__close:focus-visible,
#projectLightbox button.project-lightbox__arrow:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* 關閉鈕固定於視窗右上角，與圖片位置完全獨立 */
#projectLightbox button.project-lightbox__close{
  position:fixed!important;top:calc(20px + env(safe-area-inset-top,0px))!important;
  right:calc(20px + env(safe-area-inset-right,0px))!important;
  bottom:auto!important;left:auto!important;transform:none!important;
  width:44px!important;height:44px!important;font:normal 30px/1 Arial,sans-serif!important;
  z-index:10!important;
}
#projectLightbox button.project-lightbox__arrow{
  position:fixed!important;top:50%!important;bottom:auto!important;
  width:44px!important;height:44px!important;font:normal 23px/1 Arial,sans-serif!important;
  z-index:5!important;transform:translateY(-50%)!important;
}
#projectLightbox button.project-lightbox__arrow--prev{left:14px!important;right:auto!important}
#projectLightbox button.project-lightbox__arrow--next{right:14px!important;left:auto!important}
#projectLightbox .project-lightbox__counter{
  position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;
  transform:translateX(-50%);font-size:13px;color:#dce7f0;letter-spacing:.12em
}
@media(max-width:700px){
 #projectLightbox.project-lightbox{padding:62px 38px 66px}
 #projectLightbox .project-lightbox__image{max-height:calc(100dvh - 165px)}
 #projectLightbox button.project-lightbox__close{top:calc(14px + env(safe-area-inset-top,0px))!important;right:calc(14px + env(safe-area-inset-right,0px))!important;width:40px!important;height:40px!important}
 #projectLightbox button.project-lightbox__arrow{width:34px!important;height:42px!important;font-size:20px!important;border-radius:14px!important}
 #projectLightbox button.project-lightbox__arrow--prev{left:3px!important}
 #projectLightbox button.project-lightbox__arrow--next{right:3px!important}
 #projectLightbox .project-lightbox__caption{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
 #projectLightbox.project-lightbox,#projectLightbox .project-lightbox__figure{transition:none!important}
}


/* ===== 測試：拿掉各區塊的背景遮罩，直接顯示 bg01~bg12 原圖 =====
   要還原：刪掉從這一行到檔案結尾的整段即可
   （40 米園道 .park-overlay 已還原成原始設定：105deg 黑色 60% → 透明，不在下面名單內）===== */
.wash.left,
.soft-overlay,
.blue-overlay,
.architect-wash,
.architecture-wash,
.reserve-overlay {
  background: transparent !important;
}