*{box-sizing:border-box}
:root{--navy:#092c4c;--navy2:#0b385d;--ink:#102d46;--muted:#6e8192;--gold:#c9a34b;--cream:#f6f4ed;--line:#e4e9ee;--white:#fff}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.75}
a{text-decoration:none;color:inherit}
.site-header{height:74px;background:rgba(5,35,60,.97);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 5px 20px #051d3218}
.nav-inner{height:74px;max-width:1280px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{display:flex;align-items:center;gap:10px;min-width:285px}
.brand-mark{width:48px;height:60px;overflow:hidden;display:flex;align-items:flex-start;justify-content:center}
.brand-mark img{width:74px;height:108px;object-fit:contain;margin-top:-2px}
.brand-text{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.brand-text b{font-size:27px;letter-spacing:1px}
.brand-text small{font-size:13px;opacity:.82;border-left:1px solid #ffffff55;padding-left:10px}
.main-nav{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:600;height:100%}
.main-nav a{height:100%;display:flex;align-items:center;position:relative;opacity:.88}
.main-nav a:hover,.main-nav a.active{opacity:1}
.main-nav a.active:after{content:"";position:absolute;left:50%;bottom:11px;width:28px;height:3px;transform:translateX(-50%);background:var(--gold)}
.nav-call{border:1px solid #ffffff4a;border-radius:999px;padding:8px 14px;font-weight:700;white-space:nowrap}

.hero{position:relative;min-height:620px;overflow:hidden;background:linear-gradient(135deg,#dbeaf5 0%,#edf5f7 45%,#d6e4ec 100%);isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 18%,#fff9 0 10%,transparent 34%),linear-gradient(180deg,#ffffff55,#7fa8c322);z-index:-2}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:190px;background:linear-gradient(180deg,transparent,#0b385d22),repeating-linear-gradient(90deg,#1c58771c 0 38px,transparent 38px 62px);clip-path:polygon(0 60%,2% 44%,5% 57%,7% 32%,10% 55%,12% 39%,15% 52%,18% 24%,21% 55%,24% 35%,27% 58%,30% 40%,33% 56%,36% 30%,39% 52%,42% 36%,45% 59%,48% 27%,51% 52%,54% 35%,57% 58%,60% 40%,63% 55%,66% 30%,69% 52%,72% 38%,75% 58%,78% 28%,81% 52%,84% 34%,87% 57%,90% 40%,93% 53%,96% 30%,100% 48%,100% 100%,0 100%);z-index:-1}
.hero-glow{position:absolute;width:700px;height:700px;border-radius:50%;background:#fff7;filter:blur(4px);right:2%;top:-230px;z-index:-1}
.hero-inner{max-width:1280px;margin:auto;padding:66px 42px 20px;min-height:510px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center}
.hero-copy{position:relative;z-index:3}
.hero-kicker{display:flex;align-items:center;gap:10px;color:#567085;font-size:15px;font-weight:700;letter-spacing:1px}
.hero-kicker span{width:32px;height:3px;background:var(--gold);display:inline-block}
.hero h1{font-size:58px;line-height:1.2;letter-spacing:2px;margin:16px 0 18px;color:#0b2f4d}
.hero h1 em{font-style:normal;color:#0b2f4d}
.hero-lead{font-size:18px;max-width:650px;color:#405d72;margin:0}
.hero-actions{display:flex;gap:14px;margin-top:28px}
.primary-btn,.phone-btn{height:54px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;padding:0 25px;font-weight:800}
.primary-btn{background:var(--navy);color:#fff;box-shadow:0 12px 25px #092c4c2b}
.primary-btn span{font-size:23px;margin-left:15px}
.phone-btn{background:#fff;color:var(--navy);box-shadow:0 10px 22px #092c4c18}
.phone-icon{font-size:24px;margin-right:10px}
.trust-row{display:flex;gap:34px;margin-top:30px}
.trust-row div{display:flex;flex-direction:column;border-left:2px solid #c7d2d9;padding-left:13px}
.trust-row b{font-size:20px;color:var(--navy)}
.trust-row span{font-size:12px;color:#708292}
.hero-bear-wrap{position:relative;height:520px;display:flex;align-items:flex-end;justify-content:center}
.bear-halo{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,#ffffffc9 0 34%,#ffffff5c 35% 58%,transparent 70%);top:15px}
.hero-bear{position:relative;height:555px;width:auto;max-width:100%;object-fit:contain;z-index:2;filter:drop-shadow(0 24px 20px #092c4c2b)}
.bear-sign{position:absolute;right:3%;bottom:12px;z-index:3;text-align:left;color:#fff;transform:rotate(-4deg);text-shadow:0 2px 8px #092c4c99}
.bear-sign strong{display:block;font-size:29px;font-family:cursive;letter-spacing:4px}
.bear-sign span{font-size:12px;letter-spacing:1px}
.hero-services{max-width:1160px;margin:-6px auto 0;position:relative;z-index:10;background:#fff;box-shadow:0 16px 40px #092c4c18;border-radius:17px;padding:0 20px;display:grid;grid-template-columns:repeat(4,1fr)}
.hero-services a{display:flex;align-items:center;gap:13px;padding:19px 18px;border-right:1px solid #e8edf1}
.hero-services a:last-child{border-right:0}
.service-icon{width:45px;height:45px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f3f6f7;color:var(--navy);font-size:25px;font-weight:800}
.hero-services b{display:block;font-size:15px}.hero-services small{display:block;color:#7b8b98;font-size:11px}

.section{max-width:1160px;margin:auto;padding:80px 20px}
.cases-section{padding-top:86px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:30px}
.section-kicker{display:block;color:#a08032;font-size:12px;letter-spacing:2px;font-weight:800;margin-bottom:5px}
.section-heading h2{font-size:35px;margin:0;color:var(--navy);letter-spacing:1px}
.section-heading p{margin:5px 0 0;color:#7b8b98;font-size:14px}
.section-link{font-weight:700;color:#49677d;white-space:nowrap}.section-link span{color:#bd963a;margin-left:7px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid #e7edf1;border-radius:13px;overflow:hidden;box-shadow:0 9px 28px #092c4c0d;transition:.25s}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 35px #092c4c18}
.card img{width:100%;height:190px;object-fit:cover;display:block;background:#e9eff3}
.card .body{padding:15px 16px 17px}
.tag{display:inline-block;background:#eef3f6;color:#315a78;padding:2px 9px;border-radius:99px;font-size:11px}
.card h3{font-size:17px;line-height:1.45;margin:8px 0 4px;color:#17354d}
.price,.detail-price{color:#d24a3d;font-size:19px;font-weight:900}
.meta,.muted{color:#718797;font-size:12px}
.loading{color:#718797;grid-column:1/-1}

.expert-section{background:linear-gradient(135deg,#092c4c,#0d456d);color:#fff;padding:80px 20px;position:relative;overflow:hidden}
.expert-section:after{content:"";position:absolute;width:600px;height:600px;border-radius:50%;right:-250px;top:-250px;border:1px solid #ffffff12;box-shadow:0 0 0 70px #ffffff05,0 0 0 140px #ffffff03}
.expert-inner{max-width:1160px;margin:auto;position:relative;z-index:2}
.light-heading h2{color:#fff}.light-heading p{color:#b7cbd8}.light-heading .section-kicker{color:#d2b35c}
.expert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#ffffff20;margin-top:28px}
.expert-grid a{padding:29px 25px;background:#092c4cbb;min-height:235px;transition:.25s}
.expert-grid a:hover{background:#104f79}
.expert-num{color:#d2b35c;font-size:12px;letter-spacing:2px}
.expert-grid h3{font-size:23px;margin:25px 0 8px}
.expert-grid p{font-size:13px;color:#c4d4de;min-height:72px}
.expert-grid b{font-size:13px;color:#fff}

.about-section{max-width:1160px;margin:auto;padding:95px 20px;display:grid;grid-template-columns:.82fr 1.18fr;gap:90px;align-items:center}
.about-photo{display:flex;justify-content:center;position:relative}
.about-frame{width:390px;height:490px;background:linear-gradient(145deg,#eef3f5,#dce8ed);border-radius:28px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;box-shadow:0 25px 55px #092c4c18;position:relative}
.about-frame:before{content:"";position:absolute;inset:18px;border:1px solid #ffffffaa;border-radius:22px}
.about-frame img{height:92%;max-height:460px;max-width:100%;width:auto;object-fit:contain;object-position:center bottom;position:relative;flex:0 1 auto}
.about-copy h2{font-size:39px;line-height:1.35;color:var(--navy);margin:4px 0 22px}
.about-copy h2 em{font-style:normal;color:#a17d2c}
.about-copy p{color:#617787;font-size:16px}
.about-quote{margin:25px 0;padding:18px 22px;border-left:3px solid var(--gold);background:#faf8f1;color:#4b5f6d;font-size:15px}
.outline-btn{display:inline-flex;padding:12px 21px;border:1px solid #b7c5ce;border-radius:10px;font-weight:800;color:var(--navy);margin-top:8px}

.knowledge-section{background:#f7f8f6;padding:75px 20px}
.knowledge-section>.section-heading,.knowledge-grid{max-width:1160px;margin-left:auto;margin-right:auto}
.knowledge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.knowledge-grid a{background:#fff;padding:25px;border-radius:13px;border:1px solid #e7ecef;min-height:190px;transition:.2s}
.knowledge-grid a:hover{transform:translateY(-3px);box-shadow:0 14px 28px #092c4c12}
.knowledge-grid span{font-size:11px;color:#a17d2c;font-weight:800;letter-spacing:1px}
.knowledge-grid h3{font-size:19px;line-height:1.55;color:var(--navy);margin:12px 0 24px}
.knowledge-grid b{font-size:12px;color:#567085}

.contact-section{max-width:1160px;margin:70px auto 0;background:linear-gradient(135deg,#092c4c,#0d456d);border-radius:22px 22px 0 0;color:#fff;padding:45px 55px 25px}
.contact-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
.contact-section .section-kicker{color:#d2b35c}
.contact-section h2{font-size:31px;margin:0}.contact-section p{color:#bfd0db;margin:5px 0 0}
.contact-actions{display:flex;gap:10px;align-items:center}
.contact-phone,.contact-primary{border-radius:10px;padding:12px 19px;font-weight:800}
.contact-phone{background:#fff;color:var(--navy)}.contact-primary{border:1px solid #ffffff55}
.social-row{display:flex;gap:22px;margin-top:30px;padding-top:20px;border-top:1px solid #ffffff22;font-size:12px;color:#c4d4de}
.social-row a:hover{color:#fff}
footer{max-width:1160px;margin:auto;padding:25px 20px 35px;display:flex;justify-content:space-between;color:#788b98;font-size:12px;gap:20px}
footer b{color:#4d6474}

@media(max-width:1000px){
 .main-nav{gap:16px}.nav-call{display:none}.brand{min-width:auto}
 .hero-inner{grid-template-columns:1fr .8fr;padding:55px 25px}.hero h1{font-size:47px}.hero-bear{height:470px}
 .grid{grid-template-columns:repeat(2,1fr)}.expert-grid{grid-template-columns:repeat(2,1fr)}
 .about-section{gap:45px}.hero-services{margin-left:20px;margin-right:20px}
}
@media(max-width:760px){
 .site-header,.nav-inner{height:68px}.nav-inner{padding:0 14px}.brand-mark{width:40px;height:53px}.brand-mark img{width:65px;height:95px}
 .brand-text b{font-size:21px}.brand-text small{display:none}.main-nav a:nth-child(2),.main-nav a:nth-child(5),.main-nav a:nth-child(6){display:none}
 .main-nav{gap:16px;font-size:13px}.hero{min-height:auto}.hero-inner{grid-template-columns:1fr;padding:48px 22px 10px}.hero h1{font-size:39px}.hero-lead{font-size:15px}
 .hero-bear-wrap{height:350px;margin-top:6px}.hero-bear{height:365px}.bear-sign{right:5%;bottom:4px}.bear-sign strong{font-size:23px}
 .trust-row{gap:20px}.hero-services{grid-template-columns:repeat(2,1fr);margin:0 15px}.hero-services a:nth-child(2){border-right:0}.hero-services a{padding:14px 10px}
 .section,.about-section{padding:60px 18px}.section-heading{align-items:flex-start;flex-direction:column}.section-heading h2{font-size:30px}.section-link{font-size:13px}
 .grid{grid-template-columns:1fr}.card img{height:220px}.expert-grid{grid-template-columns:1fr}.expert-grid a{min-height:auto}
 .about-section{grid-template-columns:1fr;gap:45px}.about-frame{width:min(360px,90vw);height:430px}.about-frame img{height:92%;max-height:395px}.about-copy h2{font-size:31px}
 .knowledge-grid{grid-template-columns:1fr}.contact-section{margin:45px 15px 0;padding:35px 25px 22px}.contact-inner{align-items:flex-start;flex-direction:column}.contact-actions{width:100%;flex-direction:column;align-items:stretch}.contact-phone,.contact-primary{text-align:center}.social-row{flex-wrap:wrap}
 footer{padding:22px 18px;flex-direction:column}
}
@media(max-width:420px){.hero h1{font-size:34px}.phone-btn,.primary-btn{padding:0 15px;font-size:13px}.trust-row span{font-size:11px}}

/* V11.1 mobile polish */
@media(max-width:760px){
  .hero-copy{width:100%}
  .hero h1{font-size:36px;letter-spacing:0;line-height:1.3;word-break:keep-all;white-space:nowrap}
  .hero h1 em{white-space:nowrap}
  .hero-lead{line-height:1.9}
  .hero-actions{gap:10px}
  .primary-btn,.phone-btn{min-width:0;padding-left:16px;padding-right:16px}
}
@media(max-width:420px){
  .hero h1{font-size:30px;letter-spacing:-.5px}
  .hero-bear-wrap{height:325px}
  .hero-bear{height:340px}
}

/* V11.3 unified city-integrated hero */
.hero{
  background:
    linear-gradient(90deg,rgba(242,248,250,.96) 0%,rgba(242,248,250,.84) 37%,rgba(242,248,250,.12) 67%,rgba(10,45,72,.10) 100%),
    url("assets/taichung-city-hero-clean.jpg") center/cover no-repeat;
}
.hero:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(7,42,68,.16));
  z-index:-1;
}
.hero:after{display:none}
.hero-glow{display:none}
.hero-inner{position:relative;z-index:2}
.hero-bear-wrap{filter:drop-shadow(0 24px 28px rgba(7,35,55,.25))}
.hero-bear{mix-blend-mode:normal;filter:drop-shadow(0 18px 18px rgba(8,39,58,.30))}
.bear-halo{background:radial-gradient(circle,rgba(255,255,255,.36) 0 28%,rgba(255,255,255,.12) 42%,transparent 68%)}
.hero-services{margin-top:-4px}

@media(max-width:760px){
  .hero{
    background:
      linear-gradient(180deg,rgba(239,247,250,.88) 0%,rgba(225,238,244,.58) 48%,rgba(9,48,75,.08) 100%),
      url("assets/taichung-city-hero-clean.jpg") 64% center/cover no-repeat;
  }
  .hero:before{
    background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.03) 60%,rgba(8,43,68,.12));
  }
  .hero-inner{padding-top:42px}
  .hero-bear-wrap{height:360px;margin-top:0}
  .hero-bear{height:405px;transform:translateY(8px)}
  .bear-halo{width:380px;height:380px;top:-5px}
}
@media(max-width:420px){
  .hero{
    background-position:64% center;
  }
  .hero-bear-wrap{height:330px}
  .hero-bear{height:365px;transform:translateY(7px)}
}

/* V11.4 — selected hero artwork used as the final Hero */
.hero{
  padding:0 !important;
  min-height:0 !important;
  background:#062d48 !important;
}
.hero-inner{
  display:block !important;
  max-width:none !important;
  padding:0 !important;
  min-height:0 !important;
  height:auto !important;
}
.hero-copy,.hero-bear-wrap,.hero-services,.hero-glow,.bear-halo,.bear-sign,.cityline{
  display:none !important;
}
.hero-final-art{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
  object-fit:contain;
}
@media(min-width:761px){
  .hero-final-art{
    max-height:calc(100vh - 64px);
    width:auto;
    max-width:100%;
  }
}
@media(max-width:760px){
  .hero-final-art{
    width:100%;
    height:auto;
  }
}


/* V11.6 HOTFIX — restore the responsive city-integrated homepage Hero.
   The portrait hero artwork must not replace the entire desktop Hero. */
.hero {
  padding: 0 !important;
  min-height: 620px !important;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(242,248,250,.96) 0%, rgba(242,248,250,.84) 37%, rgba(242,248,250,.12) 67%, rgba(10,45,72,.10) 100%),
    url("assets/taichung-city-hero-clean.jpg") center / cover no-repeat !important;
}
.hero:before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(7,42,68,.16)) !important;
  z-index: -1;
}
.hero:after { display: none !important; }
.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 42px 18px !important;
  min-height: 500px;
  display: grid !important;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero-copy {
  display: block !important;
  width: auto;
  position: relative;
  z-index: 3;
}
.hero-bear-wrap {
  display: flex !important;
  position: relative;
  height: 520px;
  align-items: flex-end;
  justify-content: center;
  margin-top: 0;
  filter: drop-shadow(0 24px 28px rgba(7,35,55,.25));
}
.hero-bear {
  display: block !important;
  position: relative;
  height: 555px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  z-index: 2;
  mix-blend-mode: normal;
  filter: drop-shadow(0 18px 18px rgba(8,39,58,.30));
}
.bear-halo {
  display: block !important;
  background: radial-gradient(circle, rgba(255,255,255,.36) 0 28%, rgba(255,255,255,.12) 42%, transparent 68%);
}
.bear-sign { display: block !important; }
.hero-services {
  display: grid !important;
  max-width: 1160px;
  margin: -4px auto 0 !important;
  position: relative;
  z-index: 10;
}
.hero-final-art { display: none !important; }

@media (max-width: 1000px) {
  .hero { min-height: 600px !important; }
  .hero-inner {
    grid-template-columns: 1fr .8fr;
    padding: 48px 25px 18px !important;
  }
  .hero h1 { font-size: 47px; }
  .hero-bear { height: 470px; }
  .hero-bear-wrap { height: 455px; }
}
@media (max-width: 760px) {
  .hero {
    min-height: auto !important;
    background:
      linear-gradient(180deg, rgba(239,247,250,.88) 0%, rgba(225,238,244,.58) 48%, rgba(9,48,75,.08) 100%),
      url("assets/taichung-city-hero-clean.jpg") 64% center / cover no-repeat !important;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 42px 22px 10px !important;
    min-height: 0;
  }
  .hero-copy { display: block !important; width: 100%; }
  .hero h1 {
    font-size: 36px;
    letter-spacing: 0;
    line-height: 1.3;
    white-space: normal;
  }
  .hero h1 em { white-space: normal; }
  .hero-lead { font-size: 15px; line-height: 1.9; }
  .hero-actions { gap: 10px; flex-wrap: wrap; }
  .hero-bear-wrap {
    display: flex !important;
    height: 360px;
    margin-top: 0;
  }
  .hero-bear { height: 405px; transform: translateY(8px); }
  .bear-sign { right: 5%; bottom: 4px; }
  .hero-services {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    margin: 0 15px !important;
  }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 30px; }
  .hero-bear-wrap { height: 330px; }
  .hero-bear { height: 365px; transform: translateY(7px); }
}


/* V11.7 HERO POLISH — soften the bear cut-out and blend into the city. */
.hero {
  background:
    linear-gradient(90deg,
      rgba(239,247,250,.97) 0%,
      rgba(239,247,250,.91) 31%,
      rgba(239,247,250,.62) 48%,
      rgba(239,247,250,.12) 69%,
      rgba(7,39,62,.06) 100%),
    linear-gradient(0deg, rgba(7,39,62,.30) 0%, transparent 28%, transparent 100%),
    url("assets/taichung-city-hero-clean.jpg") center / cover no-repeat !important;
  isolation: isolate;
}
.hero:before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    radial-gradient(ellipse at 72% 70%, rgba(235,244,245,.12) 0%, rgba(235,244,245,0) 37%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(9,43,62,.10) 100%) !important;
  pointer-events: none;
}
.hero:after { display: none !important; }

/* Keep the mascot large enough to be recognizable, but not overpowering. */
.hero-bear-wrap {
  height: 520px !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  filter: none !important;
}
.hero-bear {
  height: 525px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  /* Blend the source's near-white floor edge into the light city atmosphere. */
  filter:
    drop-shadow(0 12px 16px rgba(9,34,48,.20))
    drop-shadow(0 2px 3px rgba(9,34,48,.10)) !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 87%, rgba(0,0,0,.96) 91%, rgba(0,0,0,.72) 95%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 87%, rgba(0,0,0,.96) 91%, rgba(0,0,0,.72) 95%, transparent 100%);
  transform: translateY(7px);
}
.bear-halo {
  display: block !important;
  position: absolute !important;
  width: 88% !important;
  height: 78% !important;
  left: 6% !important;
  bottom: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at 50% 55%,
    rgba(240,247,248,.38) 0%,
    rgba(240,247,248,.20) 34%,
    rgba(240,247,248,.06) 59%,
    transparent 73%) !important;
  filter: blur(15px);
  z-index: 0 !important;
  pointer-events: none;
}
.bear-sign {
  right: 0 !important;
  bottom: 42px !important;
  max-width: 220px;
  text-shadow: 0 2px 12px rgba(5,29,45,.40);
  opacity: .92;
}
.hero-copy { z-index: 4 !important; }
.hero-services { z-index: 5 !important; }

/* Make the background inscription less likely to be cut by the mascot/viewport. */
@media (min-width: 1001px) {
  .hero {
    background-position: center center, center center, center 56% !important;
  }
  .hero-inner {
    grid-template-columns: 1.08fr .92fr !important;
  }
  .hero-bear-wrap { transform: translateX(-10px); }
}
@media (max-width: 1000px) {
  .hero-bear { height: 445px !important; }
  .hero-bear-wrap { height: 435px !important; }
  .bear-sign { bottom: 20px !important; right: 0 !important; }
}
@media (max-width: 760px) {
  .hero {
    background:
      linear-gradient(180deg,
        rgba(239,247,250,.94) 0%,
        rgba(239,247,250,.82) 38%,
        rgba(239,247,250,.20) 68%,
        rgba(7,39,62,.18) 100%),
      url("assets/taichung-city-hero-clean.jpg") 62% center / cover no-repeat !important;
  }
  .hero-bear-wrap {
    height: 350px !important;
    overflow: hidden;
    transform: none !important;
  }
  .hero-bear {
    height: 375px !important;
    transform: translateY(8px) !important;
  }
  .bear-sign {
    right: 2% !important;
    bottom: 12px !important;
    max-width: 150px;
  }
}


/* V11.8 APPROVED HERO — match the user's confirmed desktop reference exactly. */
.hero {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background: #eaf2f5 url("assets/hero-desktop-reference.jpg") center top / 100% auto no-repeat !important;
  aspect-ratio: 1920 / 654;
  isolation: isolate;
}
.hero:before, .hero:after { display: none !important; }
.hero-inner {
  display: block !important;
  min-height: 0 !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  inset: 0 !important;
}
.hero-copy, .hero-bear-wrap, .hero-services { display: none !important; }
.hero-cta-overlay {
  position: absolute;
  z-index: 8;
  top: 62.5%;
  height: 12.5%;
  display: block;
  border-radius: 999px;
  text-indent: -9999px;
  overflow: hidden;
}
.hero-cta-search { left: 10.5%; width: 16%; }
.hero-cta-phone { left: 26%; width: 16%; }

@media (max-width: 760px) {
  .hero {
    aspect-ratio: 941 / 1672;
    background-image: url("assets/blackbear-hero-final.png") !important;
    background-position: center top !important;
    background-size: 100% auto !important;
  }
  .hero-cta-overlay { display: none !important; }
}


/* V12.2: balanced six-card professional services layout */
@media (min-width: 1101px) {
  .expert-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1px;
  }
  .expert-grid > a {
    grid-column: auto !important;
    min-width: 0;
    min-height: 220px;
    padding: 29px 25px;
    display: flex;
    flex-direction: column;
  }
  .expert-grid > a h3 { margin-top: 22px; }
  .expert-grid > a p { flex: 1; min-height: 54px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .expert-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .expert-grid > a {
    grid-column: auto !important;
    min-height: 215px;
  }
}
@media (max-width: 760px) {
  .expert-grid {
    grid-template-columns: 1fr !important;
  }
  .expert-grid > a {
    grid-column: auto !important;
    min-height: auto;
    padding: 24px 22px;
  }
  .expert-grid p { min-height: 0; }
}


/* V12.1: LINE contact QR card */
.line-contact-card {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 24px 0 18px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  color: #fff;
  max-width: 560px;
}
.line-contact-card img {
  width: 116px;
  height: 116px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  flex: 0 0 auto;
}
.line-contact-card strong {
  display: block;
  font-size: 18px;
  margin-bottom: 8px;
}
.line-contact-card p {
  margin: 0;
  color: #d5e2eb;
  font-size: 13px;
  line-height: 1.8;
}
@media (max-width: 480px) {
  .line-contact-card { gap: 12px; padding: 12px; }
  .line-contact-card img { width: 88px; height: 88px; }
  .line-contact-card strong { font-size: 16px; }
}


/* V13: Blogger auto-updating sections. The existing three featured articles above remain untouched. */
.blogger-section { padding-top: 36px; padding-bottom: 36px; }
.blogger-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.blogger-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 245px; padding: 24px; border: 1px solid #e3e9ed; border-radius: 15px; background: #fff; box-shadow: 0 8px 24px rgba(7,39,62,.045); transition: transform .2s ease, box-shadow .2s ease; }
.blogger-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(7,39,62,.09); }
.blogger-card .blogger-tag { color: #9a7629; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.blogger-card h3 { color: #0b2f4b; font-size: 19px; line-height: 1.55; margin: 10px 0; }
.blogger-card .blogger-summary { color: #687c89; font-size: 14px; line-height: 1.75; margin: 0 0 18px; }
.blogger-card .blogger-meta { margin-top: auto; padding-top: 12px; border-top: 1px solid #edf0f2; display: flex; justify-content: space-between; gap: 10px; color: #7a8a94; font-size: 12px; }
.blogger-card .blogger-read { color: #9a7629; font-weight: 800; white-space: nowrap; }
.blogger-message { grid-column: 1 / -1; color: #71818b; padding: 18px 0; font-size: 14px; }
@media (max-width: 900px) { .blogger-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .blogger-grid { grid-template-columns: 1fr; } .blogger-card { min-height: 0; padding: 20px; } .blogger-card h3 { font-size: 18px; } }

/* Blogger-synced sales listings */
.blogger-sales-card>a{display:block;height:100%;color:inherit;text-decoration:none}.blogger-sales-card img{width:100%;height:190px;object-fit:cover;display:block;background:#e9eff3}.blogger-sales-card .blogger-summary{font-size:13px;color:#687c89;line-height:1.65;margin:8px 0 14px}.blogger-sales-card .meta{font-size:12px;color:#7a8a94;margin-top:12px}.blogger-sales-placeholder{height:190px;display:grid;place-items:center;background:linear-gradient(135deg,#0b2f4b,#1c4e6d);color:#fff;font-weight:800}.blogger-message a{color:#9a7629;text-decoration:underline}


/* V13.6 balanced five-card sales layout */
#cases-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}
#cases-list > * { grid-column: span 2; min-width: 0; }
#cases-list img {
  display: block; width: 100%; height: 190px;
  object-fit: cover; image-rendering: auto;
}
#cases-list h3, #cases-list .post-title, #cases-list .case-title {
  line-height: 1.5; overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  #cases-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  #cases-list > * { grid-column: auto; }
}
@media (max-width: 600px) {
  #cases-list { grid-template-columns: minmax(0, 1fr); }
  #cases-list img { height: auto; max-height: 260px; object-fit: cover; }
}


/* V13.8 cleaner listing cards */
#cases-list .blogger-sales-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
#cases-list .blogger-sales-card .body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
#cases-list .blogger-sales-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#cases-list .blogger-sales-card .blogger-summary {
  margin: 0;
  color: #65778a;
  font-size: 13px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#cases-list .blogger-sales-card .meta {
  margin-top: auto;
  padding-top: 6px;
}
#cases-list .blogger-sales-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 600px) {
  #cases-list .blogger-sales-card img {
    height: auto;
    max-height: 260px;
    object-fit: cover;
  }
}


/* V13.9: preserve original Blogger poster, simplify the listing card */
#cases-list .blogger-sales-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center top;
}
#cases-list .blogger-sales-card h3 {
  font-size: 16px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#cases-list .blogger-sales-card .blogger-summary {
  font-size: 12px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#cases-list .blogger-sales-card .meta { margin-top: auto; }