:root {
      /* token names kept; values swapped brown→sky-blue */
      --navy: #0A1C30;
      --navy-2: #12304C;
      --navy-3: #1C4A72;
      --cream: #E9F1F8;
      --cream-1: #F2F7FC;
      --cream-2: #D7E6F2;
      /* dark theme section tones (interleaved) */
      --sec-a: #0D1721;
      --sec-b: #212526;
      --sec-c: #1F2022;
      --panel: #1A1B1D;
      --ink: #13212E;
      --ink-soft: #516373;
      --gold: #3FA7E0;
      --gold-deep: #15689A;
      --gold-soft: #a3dfff;
      --white: #ffffff;
      --line-d: rgba(224, 239, 250, .16);
      --line-l: rgba(19, 33, 46, .14);
      --sans: "Noto Sans TC", sans-serif;
      --serif: "Noto Serif TC", serif;
      --maxw: 1280px;
      --pad: clamp(20px, 5vw, 64px);
      --ease: cubic-bezier(.22, .61, .36, 1);
      /* typography */
      --text-color: rgba(243, 250, 255, 0.78);
      --font-size-base: 16px;
      --font-size-sm: 14px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden
    }

    body {
      background: var(--sec-b);
      color: var(--text-color);
      font-family: var(--sans);
      line-height: 1.9;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      font-size: var(--font-size-base);
      letter-spacing: .08em;
    }

    img {
      max-width: 100%;
      display: block;
      height: auto
    }

    a {
      color: inherit;
      text-decoration: none
    }

    ul {
      list-style: none
    }

    ::selection {
      background: var(--gold);
      color: var(--navy)
    }

    :focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px
    }

    .wrap {
      max-width: var(--maxw);
      margin-inline: auto;
      padding-inline: var(--pad)
    }

    header .wrap,
    footer .wrap {
      max-width: none
    }

    section {
      padding-block: clamp(80px, 11vw, 150px)
    }

    .eyebrow {
      font-size: var(--font-size-sm);
      font-weight: 700;
      letter-spacing: .34em;
      text-transform: uppercase;
      color: var(--gold);
      display: inline-flex;
      align-items: center;
      gap: 12px
    }

    .eyebrow::before {
      content: "";
      width: 30px;
      height: 1px;
      background: var(--gold)
    }

    .on-navy .eyebrow,
    .eyebrow.light {
      color: var(--gold)
    }

    h2 {
      font-family: var(--serif);
      font-size: clamp(2.4rem, 6.2vw, 5.2rem);
      font-weight: 500;
      letter-spacing: .015em;
      line-height: 1.12;
      color: var(--white)
    }

    h3 {
      font-size: clamp(1.15rem, 1.7vw, 1.4rem);
      font-weight: 500;
      letter-spacing: .08em
    }

    p,li {
      color: var(--text-color);
    }

    .lead {
      font-size: clamp(1.05rem, 1.5vw, 1.28rem);
      line-height: 1.95;
      color: var(--gold-soft);
      font-weight: 400
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: .6em;
      font-family: var(--sans);
      font-weight: 500;
      letter-spacing: .08em;
      padding: 15px 32px;
      border-radius: 999px;
      border: 1px solid var(--gold);
      background: var(--gold);
      color: var(--navy);
      cursor: pointer;
      transition: background .5s var(--ease), color .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease)
    }

    .btn:hover {
      background: transparent;
      color: var(--gold);
      transform: translateY(-2px)
    }

    .btn.ghost {
      background: transparent;
      color: var(--ink)
    }

    .btn.ghost.light {
      color: var(--cream);
      border-color: var(--line-d)
    }

    .btn.ghost:hover {
      border-color: var(--gold);
      color: var(--gold)
    }

    /* 預約雙按鈕（LINE / Messenger 品牌色） */
    .book-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 14px
    }

    .btn .btn-ic {
      width: 20px;
      height: 20px;
      flex: none
    }

    .btn-line {
      background: #06C755;
      border-color: #06C755;
      color: #fff
    }

    .btn-line:hover {
      background: transparent;
      color: #06C755;
      border-color: #06C755
    }

    .btn-msgr {
      background: #0084FF;
      border-color: #0084FF;
      color: #fff
    }

    .btn-msgr:hover {
      background: transparent;
      color: #0084FF;
      border-color: #0084FF
    }

    /* Header */
    header {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 100;
      transition: background .6s var(--ease), border-color .6s var(--ease)
    }

    header {
      border-bottom: 1px solid transparent
    }

    header.scrolled {
      background: rgba(10, 28, 48, .9);
      backdrop-filter: blur(12px);
      border-bottom-color: var(--line-d)
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 78px;
      gap: 24px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--cream);
      font-weight: 700;
      font-size: 18px;
      letter-spacing: .16em
    }

    .brand img {
      width: 44px;
      height: 44px;
      object-fit: contain;
      filter: invert(1);
      mix-blend-mode: screen
    }

    .foot .brand img {
      width: 54px;
      height: 54px
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 30px
    }

    .nav-links a {
      letter-spacing: .1em;
      color: var(--white);
      opacity: .82;
      transition: opacity .3s, color .3s;
      position: relative
    }

    .nav-links a:hover {
      opacity: 1;
      color: var(--gold)
    }

    .hamburger {
      display: none;
      background: none;
      border: 0;
      width: 44px;
      height: 44px;
      cursor: pointer
    }

    .hamburger span {
      display: block;
      width: 24px;
      height: 1.6px;
      background: var(--cream);
      margin: 5px auto;
      transition: .3s
    }

    #mobilenav {
      position: fixed;
      inset: 0;
      z-index: 99;
      background: var(--navy);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      padding: 0 var(--pad);
      opacity: 0;
      visibility: hidden;
      transition: opacity .4s, visibility .4s
    }

    #mobilenav.open {
      opacity: 1;
      visibility: visible
    }

    #mobilenav a {
      font-size: 1.7rem;
      font-weight: 500;
      letter-spacing: .1em;
      color: var(--cream);
      padding: 12px 0;
      border-bottom: 1px solid var(--line-d)
    }

    #mobilenav .btn {
      margin-top: 26px;
      align-self: flex-start
    }

    /* Hero — theatrical full-bleed */
    .hero {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      align-items: flex-end;
      background: var(--navy);
      overflow: hidden
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      background: var(--navy)
    }

    .hero-carousel {
      position: absolute;
      inset: 0
    }

    .slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1.6s var(--ease)
    }

    .slide.is-active {
      opacity: 1
    }

    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 20%
    }

    .slide.is-active img {
      animation: kenburns 7s ease-out both
    }

    @keyframes kenburns {
      0% {
        transform: scale(1.05)
      }

      100% {
        transform: scale(1.17)
      }
    }

    .hero-cloud {
      position: absolute;
      inset: -12%;
      z-index: 1;
      pointer-events: none;
      mix-blend-mode: screen;
      opacity: .5;
      background: radial-gradient(42% 52% at 22% 28%, rgba(63, 167, 224, .30), transparent 62%),
        radial-gradient(48% 58% at 80% 72%, rgba(28, 74, 114, .55), transparent 62%);
      animation: cloud 34s ease-in-out infinite alternate
    }

    @keyframes cloud {
      0% {
        transform: translate(-3%, -2%) scale(1)
      }

      100% {
        transform: translate(3%, 3%) scale(1.14)
      }
    }

    .hero-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      background:
        linear-gradient(180deg, rgba(10, 28, 48, .42) 0%, rgba(10, 28, 48, .08) 30%, rgba(10, 28, 48, .5) 66%, rgba(10, 28, 48, .95) 100%),
        linear-gradient(75deg, rgba(10, 28, 48, .72) 0%, rgba(10, 28, 48, .3) 34%, transparent 60%)
    }

    .hero-bg::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;
      background: radial-gradient(120% 80% at 28% 120%, rgba(63, 167, 224, .20), transparent 60%)
    }

    .hero-content {
      position: relative;
      z-index: 4;
      padding-left: var(--pad);
      /* padding-bottom: clamp(54px, 8vw, 110px); */
      color: var(--cream);
      max-width: 920px
    }

    .hero-dots {
      display: flex;
      gap: 10px;
      margin-top: clamp(30px, 4vw, 46px)
    }

    .hero-dots .dot {
      width: 36px;
      height: 3px;
      border-radius: 3px;
      background: rgba(224, 239, 250, .32);
      border: 0;
      padding: 0;
      cursor: pointer;
      transition: background .4s var(--ease), width .4s var(--ease)
    }

    .hero-dots .dot.is-active {
      background: var(--gold);
      width: 56px
    }

    .hero-dots .dot:hover {
      background: var(--gold-soft)
    }

    .hero .title {
      font-family: var(--serif);
      font-weight: 500;
      letter-spacing: .22em;
      line-height: 1.02;
      font-size: clamp(3.4rem, 12.5vw, 9.5rem);
      color: var(--white);
      text-indent: -0.035em
    }

    .hero .title-en {
      font-family: var(--sans);
      font-weight: 700;
      letter-spacing: .5em;
      font-size: clamp(.85rem, 2vw, 1.2rem);
      color: var(--gold);
      text-indent: .5em;
      margin-top: 16px
    }

    .hero .roles {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 0;
      margin: 26px 0 32px;
      font-size: clamp(.95rem, 1.6vw, 1.15rem);
      letter-spacing: .12em;
      color: var(--cream)
    }

    .hero .roles span {
      display: inline-flex;
      align-items: center
    }

    .hero .roles span:not(:last-child)::after {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--gold);
      margin: 0 16px
    }

    .hero-cta {
      display: flex;
      gap: 14px;
      flex-wrap: wrap
    }

    .scroll-hint {
      position: absolute;
      right: var(--pad);
      bottom: clamp(54px, 8vw, 110px);
      z-index: 2;
      writing-mode: vertical-rl;
      letter-spacing: .3em;
      font-size: var(--font-size-sm);
      color: var(--gold);
      text-transform: uppercase
    }

    /* Section heads */
    .head {
      max-width: 900px;
      margin-bottom: clamp(44px, 5vw, 72px)
    }

    .head h2 {
      margin-top: 20px
    }

    .head .lead {
      margin-top: clamp(14px, 1.8vw, 22px)
    }

    .head.center {
      margin-inline: auto;
      text-align: center
    }

    .head.center .eyebrow {
      justify-content: center
    }

    /* sections on navy */
    .on-navy {
      background: var(--sec-a);
      color: var(--cream)
    }

    .on-navy h2 {
      color: var(--white)
    }

    .on-navy p {
      color: var(--text-color)
    }

    .on-navy .lead {
      color: var(--gold-soft)
    }

    .on-cream-1 {
      background: var(--sec-c)
    }

    .on-cream-2 {
      background: var(--sec-b)
    }

    /* About */
    .about-grid {
      display: grid;
      grid-template-columns: 2fr 3fr;
      gap: clamp(34px, 5vw, 76px);
      align-items: center
    }

    .about-figure {
      position: relative
    }

    .about-figure img {
      width: 100%;
      aspect-ratio: 4/5;
      object-fit: cover
    }

    .about-figure .frame {
      position: absolute;
      inset: 14px;
      border: 1px solid var(--gold);
      pointer-events: none
    }

    .about-figure img.cool {
      filter: saturate(.92) brightness(1.04) contrast(1.02)
    }

    /* Studio gallery */
    .studio-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(16px, 2vw, 26px)
    }

    .studio-fig {
      position: relative;
      overflow: hidden
    }

    .studio-fig img {
      width: 100%;
      aspect-ratio: 4/5;
      object-fit: cover;
      transition: transform .8s var(--ease)
    }

    .studio-fig:hover img {
      transform: scale(1.05)
    }

    .studio-fig::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(63, 167, 224, .10), rgba(10, 28, 48, .16));
      mix-blend-mode: multiply
    }

    .studio-fig figcaption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      padding: 32px 20px 18px;
      color: var(--cream);
      background: linear-gradient(transparent, rgba(10, 28, 48, .86))
    }

    .studio-fig figcaption .en {
      display: block;
      font-size: 10px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 3px
    }

    .studio-fig figcaption h3 {
      font-size: 1.05rem;
      color: #fff;
      font-weight: 500
    }

    @media(max-width:1024px) {
      .studio-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:560px) {
      .studio-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin-inline: auto
      }
    }

    .about-body p {
      line-height: 1.95;
      color: var(--text-color);
      margin-bottom: 18px
    }

    .about-body .b {
      color: var(--gold);
      font-weight: 700
    }

    .about-body p.lead {
      font-size: clamp(1.2rem, 1.8vw, 1.5rem);
      line-height: 1.85;
      font-weight: 400;
      color: var(--gold-soft);
      margin-bottom: 24px
    }

    .stat-row {
      display: flex;
      gap: 48px;
      margin-top: 36px;
      flex-wrap: wrap
    }

    .stat .n {
      font-size: 2.4rem;
      font-weight: 500;
      color: var(--gold);
      letter-spacing: .04em;
      line-height: 1
    }

    .stat .l {
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(224, 239, 250, .6);
      margin-top: 6px
    }

    /* Tips (navy) */
    .tips-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(26px, 3vw, 52px)
    }

    .tip {
      border-top: 1px solid var(--line-d);
      padding-top: 20px
    }

    .tip .n {
    font-size: var(--font-size-sm);
      letter-spacing: .16em;
      color: var(--gold);
      margin-bottom: 12px
    }

    .tip h3 {
      color: var(--white);
      margin-bottom: 10px
    }

    .tip p {
      color: var(--text-color)
    }

    @media(max-width:760px) {
      .tips-grid {
        grid-template-columns: 1fr
      }
    }

    /* FAQ */
    .faq {
      max-width: 100%;
      margin-inline: auto;
      margin-top: 100px;
      border-top: 1px solid var(--line-d)
    }

    .faq-item {
      border-bottom: 1px solid var(--line-d)
    }

    .faq-q {
      width: 100%;
      background: none;
      border: 0;
      font-family: var(--sans);
      color: var(--white);
      text-align: left;
      cursor: pointer;
      font-size: clamp(1.05rem, 1.6vw, 1.25rem);
      font-weight: 500;
      padding: 26px 46px 26px 0;
      position: relative
    }

    .faq-q::after {
      content: "＋";
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--gold);
      transition: transform .4s var(--ease)
    }

    .faq-q[aria-expanded="true"]::after {
      transform: translateY(-50%) rotate(135deg)
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .5s var(--ease), padding .5s var(--ease)
    }

    .faq-a.open {
      max-height: 360px;
      padding-bottom: 26px
    }

    .faq-a p {
      color: rgba(224, 239, 250, .8);
      margin-bottom:1rem;
      max-width: 72ch
    }

    /* Contact */
    .contact .eyebrow {
      color: var(--gold)
    }

    .contact h2 {
      color: var(--white)
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: clamp(36px, 5vw, 72px);
      align-items: center
    }

    .contact .lead {
      color: var(--gold-soft)
    }

    .contact-info {
      display: grid;
      gap: 1px;
      /* background: var(--line-l); */
      border: 2px solid var(--line-d);
      border-radius: 12px;
    }

    .contact-info .row {
      /* background: var(--white); */
      padding: 18px 24px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      border-bottom: 2px solid var(--line-d);

    }
.contact-info .row:last-child{
  border-bottom: none;
}
    .contact-info .k {
    font-size: var(--font-size-sm);
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(224, 239, 250, .55);
      font-weight: 500;
    }

    .contact-info .socials {
      display: flex;
      gap: 18px;
      align-items: center;
      justify-content: flex-end
    }

    .contact-info .soc {
      display: inline-flex;
      line-height: 0;
      transition: transform .25s var(--ease), filter .25s var(--ease)
    }

    .contact-info .soc:hover {
      transform: translateY(-2px);
      filter: brightness(1.12)
    }

    .contact-info .soc .brand-ic {
      display: block;
      width: 26px;
      height: 26px
    }

    .contact-info .v {
      color: var(--cream);
      text-align: right
    }

    .contact-info a:hover {
      color: var(--gold)
    }

    @media(max-width:820px) {
      .contact-grid {
        grid-template-columns: 1fr
      }
    }

    /* Footer */
    footer {
      background: var(--navy);
      color: var(--cream);
      padding-block: clamp(46px, 5vw, 72px);
      border-top: 1px solid var(--line-d)
    }

    .foot {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 22px
    }

    .foot .brand {
      color: var(--cream)
    }

    .foot-links {
      display: flex;
      gap: 24px;
      color: var(--text-color);
    }

    .foot-links a {
      display: inline-flex;
      align-items: center;
      line-height: 0;
      transition: transform .25s var(--ease), filter .25s var(--ease)
    }

    .foot-ic {
      display: block;
      width: 24px;
      height: 24px
    }

    .foot-links a:hover {
      transform: translateY(-2px);
      filter: brightness(1.12)
    }

    .copyright {
      text-align: center;
      letter-spacing: .08em
    }

    [data-reveal] {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity 1s var(--ease), transform 1s var(--ease)
    }

    [data-reveal].in {
      opacity: 1;
      transform: none
    }

    @media(max-width:900px) {
      .about-grid {
        grid-template-columns: 1fr;
        gap: 36px
      }

      .about-figure {
        max-width: 360px
      }

      .nav-links {
        display: none
      }

      .nav>.btn {
        display: none
      }

      .hamburger {
        display: block
      }

      .scroll-hint {
        display: none
      }
    }

    @media(prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      * {
        transition: none !important;
        animation: none !important
      }

      [data-reveal] {
        opacity: 1;
        transform: none
      }

      .hero-vid,
      .hero-cloud {
        transform: none !important
      }
    }

    /* Why-a-pro section */
    .why-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: clamp(34px, 5vw, 72px);
      align-items: center
    }

    .why-copy p {
      color: var(--text-color);
      margin-bottom: 16px;
      line-height: 1.95
    }

    .why-copy p.lead {
      color: var(--gold-soft);
      margin-bottom: 22px
    }

    .why-fig img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover
    }

    .why-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      justify-content: center;
      margin-top: 100px
    }

    .why-chips span {
      border-block: 1px dotted var(--gold);
      color: var(--gold);
      padding: 10px 20px;
      font-family:var(--serif);font-size:1.2rem;font-weight:800;
      letter-spacing: .12em;
      font-style: italic;
      transition:transform .6s var(--ease), background .6s var(--ease);
    }
.why-chips span:hover{
  transform: translateY(-15%);
      background: rgba(63, 167, 224, .07);
}
    @media(max-width:860px) {
      .why-grid {
        grid-template-columns: 1fr
      }

      .why-fig {
        max-width: 520px;
        margin-inline: auto
      }
    }

    /* Lightbox */
    .lb {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(8, 12, 18, .95);
      display: none;
      align-items: center;
      justify-content: center
    }

    .lb.open {
      display: flex
    }

    .lb #lbImg {
      max-width: 90vw;
      max-height: 84vh;
      object-fit: contain;
      box-shadow: 0 24px 70px rgba(0, 0, 0, .6)
    }

    .lb-btn {
      position: absolute;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .3);
      color: #fff;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      font-size: 26px;
      line-height: 1;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: background .25s, transform .25s
    }

    .lb-btn:hover {
      background: rgba(255, 255, 255, .22)
    }

    .lb-prev {
      left: 24px;
      top: 50%;
      transform: translateY(-50%)
    }

    .lb-next {
      right: 24px;
      top: 50%;
      transform: translateY(-50%)
    }

    .lb-close {
      top: 22px;
      right: 22px;
      width: 46px;
      height: 46px;
      font-size: 20px
    }

    .lb-cap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 26px;
      text-align: center;
      color: #fff;
    font-size: var(--font-size-sm);
      letter-spacing: .06em
    }

    .lb-count {
      position: absolute;
      top: 28px;
      left: 26px;
      color: rgba(255, 255, 255, .7);
      font-size: 13px;
      letter-spacing: .5em
    }

    [data-lightbox] {
      cursor: zoom-in
    }

    @media(max-width:600px) {
      .lb-prev {
        left: 8px
      }

      .lb-next {
        right: 8px
      }

      .lb-btn {
        width: 46px;
        height: 46px
      }
    }
  /* directional slide-fade for Works lightbox image switching */
  @keyframes tlbOutLeft{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-44px)}}
  @keyframes tlbOutRight{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(44px)}}
  @keyframes tlbInRight{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:translateX(0)}}
  @keyframes tlbInLeft{from{opacity:0;transform:translateX(-44px)}to{opacity:1;transform:translateX(0)}}

  /* Contact map */

  /* === Full-width sections (portfolio + testimonials) === */
  .wrap-full{max-width:none;margin-inline:0;padding-inline:clamp(16px,3.5vw,48px)}
  /* Editorial portfolio gallery — Ikemoto-style motion */
  .gallery2{column-count:4;column-gap:20px}
  .gallery2 .gitem{display:block;break-inside:avoid;margin:0 0 30px;position:relative;text-decoration:none;opacity:0;transform:translateY(36px);transition:opacity .75s var(--ease),transform .75s var(--ease);will-change:opacity,transform}
  .gallery2 .gitem.show{opacity:1;transform:none}
  .gallery2 .gitem.hide{display:none}
  .gallery2 .gframe{display:block;position:relative;overflow:hidden;border-radius:12px;background:var(--navy-2);cursor:zoom-in}
  .gallery2 .gframe::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(10,28,48,.4));opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
  .gallery2 .gitem:hover .gframe::after{opacity:1}
  .gallery2 .gpara{display:block}
  .gallery2 .gpara img{width:100%;display:block;height:auto;transition:transform 1s var(--ease);will-change:transform}
  .gallery2 .gitem:hover .gpara img{transform:scale(1.06)}
  .gallery2 .gmeta{display:flex;align-items:baseline;gap:12px;padding:15px 4px 0}
  .gallery2 .gtag{flex:none;font-family:var(--sans);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-soft);border-radius:999px;padding:4px 14px;line-height:1;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
  .gallery2 .gitem:hover .gtag{background:var(--gold);color:var(--navy);border-color:var(--gold)}
  .gallery2 .gtitle{font-family:var(--serif);font-size:1.02rem;color:var(--cream);font-weight:500;position:relative;line-height:1.4}
  .gallery2 .gtitle::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:var(--gold);transition:width .55s var(--ease)}
  .gallery2 .gitem:hover .gtitle::after,.gallery2 .gitem:focus-visible .gtitle::after{width:100%}
  .gallery2 .gitem:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
  @media(prefers-reduced-motion:reduce){.gallery2 .gitem{transition:opacity .4s linear;transform:none}.gallery2 .gpara img{transition:none}}
  /* Portfolio pager */
  .pf-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-top:clamp(28px,3vw,42px)}
  .pf-page{font-family:var(--sans);font-size:14px;min-width:42px;height:42px;padding:0 13px;border-radius:999px;border:2px solid var(--line-d);background:transparent;color:rgba(224,239,250,.8);cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
  .pf-page:hover:not(:disabled){border-color:var(--gold-soft);color:var(--cream)}
  .pf-page.is-active{background:var(--gold);color:var(--navy);border-color:var(--gold)}
  .pf-page:disabled{opacity:.35;cursor:default}
  .pf-pager .pf-gap{display:flex;align-items:flex-end;padding:0 4px 8px;color:rgba(224,239,250,.45);font-family:var(--sans);font-size:14px;user-select:none}
  /* Guide / 拍攝說明 section */
  .gtabs{display:flex;flex-wrap:wrap;justify-content:center;gap: 1rem;margin-bottom:clamp(28px,3vw,44px)}
  .gtab{font-family:var(--serif);font-size:18px; letter-spacing:0.15em; font-weight:800;color:var(--cream);background:var(--panel);border:2px solid var(--line-d);border-radius:999px;padding:14px 26px;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
  .gtab:hover{border-color:var(--gold)}
  .gtab.is-active{background:var(--gold);color:#fff;border-color:var(--gold)}
  .gpanel{display:none}
  .gpanel.is-active{display:flex;flex-direction:column;animation:gfade .5s var(--ease)}
  .gpanel .gcols{order:1}
  .gpanel .plan-banner{order:2}
  .gpanel .gnote{order:3}
  @keyframes gfade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .gcols{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.5vw,28px);width:100%;max-width:1100px;margin-inline:auto}
  @media(max-width:760px){.gcols{grid-template-columns:1fr}}
  .gcard{background:var(--panel);border:1px solid var(--line-d);border-radius:14px;padding:clamp(22px,3vw,30px)}
  .gcard h3{font-family:var(--serif);font-size:1.6rem;font-weight:500;color:var(--white);margin-bottom:14px}
  .gcard ul{display:flex;flex-direction:column;gap:9px}
  .gcard li{position:relative;padding-left:18px;color:var(--text-color);font-size:16px;line-height:1.75}
  .gcard li::before{content:"–";position:absolute;left:0;color:var(--gold)}
  .gcard li.warn{color:#ff7b72;font-weight:500}
  .gcard li.warn::before{content:"⚠";color:#ff7b72;left:-2px}
  .gnote{max-width:1100px;margin:clamp(18px,2vw,26px) auto 0;font-size:16px;color:var(--text-color);text-align:center;line-height:1.85}
  /* merged service: intro + dark price banner */
  .panel-intro{max-width:1000px;margin:0 auto clamp(18px,2vw,24px);text-align:center;color:var(--text-color);font-size:18px;line-height:1.9}
  /* default banner = full-width band (used by the unchanged 其他服務 tab) */
  .plan-banner{background:var(--sec-a);border-radius:14px;padding:clamp(20px,3vw,28px) clamp(22px,3vw,34px);display:flex;flex-wrap:wrap;align-items:center;gap:18px 36px;width:100%;max-width:1100px;margin:clamp(24px,3vw,34px) auto 0}
  /* reworked tabs: banner sits inside .gcols as a dark grid cell */
  .gcols .plan-banner{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:16px;padding:clamp(22px,3vw,30px);width:auto;max-width:none;margin:0}
  .pb-item{display:flex;flex-direction:column;gap:3px}
  .pb-item .pb-name{font-family:var(--serif);font-size:1.6rem;letter-spacing:.06em;color:var(--white)}
  .pb-item .pb-amt{font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:600;color:var(--gold);line-height:1.05}
  .pb-item .pb-sub{font-size:14px;color:var(--gold-soft); letter-spacing:.1em;margin-top:4px;}
  .plan-banner .btn{margin-left:auto;white-space:nowrap}
  .pb-note{flex-basis:100%;font-size:16px;color:var(--text-color);margin:0;}
  .gcols .plan-banner .pb-note{flex-basis:auto}
  .pb-prices{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:flex-start}
  /* 證件照: tall banner with add-on list pushed to the bottom */
  .pb-addon{margin-top:auto;padding-top:18px;border-top:1px solid var(--line-d)}
  .pb-addon h4{font-family:var(--serif);font-size:1.6rem;letter-spacing:.06em;color:var(--white);font-weight:500;margin-bottom:10px}
  .pb-addon ul{display:flex;flex-direction:column;gap:8px}
  .pb-addon li{position:relative;padding-left:16px;font-size:14px;color:var(--text-color);line-height:1.7}
  .pb-addon li::before{content:"–";position:absolute;left:0;color:var(--gold)}
  /* 證件照 split layout: 2 cards stacked left, banner tall on the right */
  .gcols.split .gcard:nth-of-type(1){grid-column:1;grid-row:1}
  .gcols.split .gcard:nth-of-type(2){grid-column:1;grid-row:2}
  .gcols.split .plan-banner{grid-column:2;grid-row:1 / span 2}
  @media(max-width:760px){.gcols.split .gcard:nth-of-type(1),.gcols.split .gcard:nth-of-type(2),.gcols.split .plan-banner{grid-column:auto;grid-row:auto}}
  @media(max-width:560px){.plan-banner .btn{margin-left:0;width:100%;justify-content:center}}
  .gtransport{max-width:1100px;margin:clamp(20px,2.5vw,30px) auto 0;background:var(--panel);border:1px solid var(--line-d);border-radius:14px;padding:clamp(22px,3vw,30px);display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .gtransport h4{font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
  .gtransport p{font-size:16px;color:var(--text-color);line-height:1.8}
  @media(max-width:760px){.gtransport{grid-template-columns:1fr}}
  /* Location: map + transport */
  .loc-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(18px,2.5vw,30px);margin-top:clamp(28px,3vw,44px);align-items:stretch}
  .loc-map{border:1px solid var(--line-d);border-radius:14px;overflow:hidden;line-height:0}
  .loc-map iframe{width:100%;height:100%;min-height:340px;border:0;display:block}
  .gtransport-col{max-width:none;margin:0;grid-template-columns:1fr;align-content:start;gap:20px}
  @media(max-width:860px){.loc-grid{grid-template-columns:1fr}.loc-map iframe{min-height:300px}}
  @media(max-width:1100px){.gallery2{column-count:3}}
  @media(max-width:700px){.gallery2{column-count:1}}
  /* Portfolio filter tabs */
  .pf-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;max-width:1100px;margin:0 auto clamp(26px,3vw,40px)}
  .pf-tab{font-family:var(--serif);font-size:18px; letter-spacing:0.15em; font-weight:800; color:rgba(224,239,250,.75);background:transparent;border:2px solid var(--line-d);border-radius:999px;padding:9px 20px;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
  .pf-tab:hover{color:var(--cream);border-color:var(--gold-soft)}
  .pf-tab.is-active{background:var(--gold);color:var(--navy);border-color:var(--gold)}

  /* Google reviews widget (Elfsight) — full width handled by parent .wrap-full.
     Note: the widget caps itself at max-width:1280px via its shadow-DOM :host rule;
     that can only be changed in the Elfsight dashboard (Width setting / Custom CSS). */
  .reviews-embed{margin-top:clamp(30px,4vw,52px)}

  /* Back-to-top — outline circle, fades in after scrolling past half the viewport */
  .to-top{position:fixed;right:clamp(16px,3vw,30px);bottom:clamp(16px,3vw,30px);z-index:90;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.35);color:var(--white);display:grid;place-items:center;font-size:20px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s var(--ease),background .25s var(--ease),color .25s var(--ease)}
  .to-top.show{opacity:1;visibility:visible;transform:none}
  .to-top:hover{background:var(--navy-2);}
  @media(prefers-reduced-motion:reduce){.to-top{transition:opacity .2s linear,visibility .2s linear}}
  
.text-link{
  color: var(--gold);
  text-decoration: underline;
}
.text-link:hover{
  color: var(--gold-deep);  
}