:root {
      /* token names kept; values swapped brown→sky-blue */
      --navy: #0A1C30;
      --navy-2: #12304C;
      --navy-3: #1C4A72;
      --cream: #E9F1F8;
      --cream-2: #D7E6F2;
      --ink: #13212E;
      --ink-soft: #516373;
      --gold: #3FA7E0;
      --gold-deep: #15689A;
      --gold-soft: #BBE0F6;
      --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);
    }

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

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

    body {
      background: var(--cream);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.9;
      font-weight: 400;
      -webkit-font-smoothing: antialiased
    }

    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: 12px;
      font-weight: 700;
      letter-spacing: .34em;
      text-transform: uppercase;
      color: var(--gold-deep);
      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: .01em;
      line-height: 1.12
    }

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

    p {
      color: var(--ink-soft)
    }

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

    .btn {
      display: inline-flex;
      align-items: center;
      gap: .6em;
      font-family: var(--sans);
      font-size: 15px;
      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)
    }

    /* 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: 17px;
      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 {
      font-size: 14px;
      letter-spacing: .1em;
      color: var(--cream);
      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.18em
    }

    .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: 11px;
      color: var(--gold);
      text-transform: uppercase
    }

    /* Section heads */
    .head {
      max-width: 760px;
      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(--navy);
      color: var(--cream)
    }

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

    .on-navy p {
      color: rgba(224, 239, 250, .66)
    }

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

    /* About */
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      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 {
      font-size: 1.06rem;
      line-height: 1.95;
      color: var(--ink);
      margin-bottom: 18px
    }

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

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

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

    .stat .l {
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--ink-soft);
      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: 12px;
      letter-spacing: .16em;
      color: var(--gold);
      margin-bottom: 12px
    }

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

    .tip p {
      font-size: 14.5px;
      color: rgba(224, 239, 250, .66)
    }

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

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

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

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

    .faq-q::after {
      content: "＋";
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--gold-deep);
      font-size: 1.3rem;
      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: var(--ink-soft);
      font-size: 15px;
      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(--cream)
    }

    .contact-info {
      display: grid;
      gap: 1px;
      background: var(--line-d);
      border: 1px solid var(--line-d)
    }

    .contact-info .row {
      background: var(--navy);
      padding: 18px 24px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: baseline
    }

    .contact-info .k {
      font-size: 11px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--gold)
    }

    .contact-info .v {
      font-size: 15px;
      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
    }

    .foot-links a {
      color: rgba(224, 239, 250, .66);
      font-size: 14px;
      letter-spacing: .04em
    }

    .foot-links a:hover {
      color: var(--gold)
    }

    .copyright {
      color: rgba(224, 239, 250, .4);
      font-size: 12.5px;
      text-align: center;
      margin-top: 30px;
      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: 440px
      }

      .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(--ink-soft);
      margin-bottom: 16px;
      font-size: 1rem;
      line-height: 1.95
    }

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

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

    .why-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      margin-top: clamp(36px, 4vw, 56px)
    }

    .why-chips span {
      border: 1px solid var(--gold);
      color: var(--gold-deep);
      border-radius: 999px;
      padding: 10px 20px;
      font-size: 15px;
      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: 14px;
      letter-spacing: .06em
    }

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

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

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

      .lb-next {
        right: 8px
      }

      .lb-btn {
        width: 46px;
        height: 46px
      }
    }
  /* === Testimonials — full-width infinite arrow carousel === */
  .tcar-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(26px,3vw,40px)}
  .tcar-head .lead{margin-top:12px;max-width:560px}
  .tcar-nav{display:flex;gap:12px;flex:none}
  .tcar-btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-l);background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:20px;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease);box-shadow:0 6px 20px rgba(19,33,46,.08)}
  .tcar-btn:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
  .tcar-btn:active{transform:scale(.93)}
  .tcar-full{width:100%;overflow:hidden}
  .tmarquee{position:relative;display:flex;gap:clamp(16px,2vw,24px);width:max-content;padding:8px 0 30px;will-change:transform;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
  .tmarquee.tdrag,.tmarquee.tdrag .tcard-hit{cursor:grabbing}
  .tmarquee img{-webkit-user-drag:none;user-drag:none}
  .tcard{position:relative;flex:0 0 clamp(258px,26vw,322px);background:#fff;border:1px solid var(--line-l);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
  .tcard:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(19,33,46,.13)}
  .tphoto{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--cream-2)}
  .tphoto img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
  .tcard:hover .tphoto img{transform:scale(1.05)}
  .tbody{padding:clamp(18px,2vw,22px);display:flex;flex-direction:column;gap:12px;flex:1;text-align:left}
  .ttag{align-self:flex-start;font-family:var(--sans);font-size:11px;letter-spacing:.08em;color:var(--gold-deep);background:var(--cream-2);border:1px solid var(--line-l);border-radius:999px;padding:5px 13px}
  .tbody .stars{color:var(--gold);letter-spacing:2px;font-size:14px}
  .tbody .ttext{color:var(--ink-soft);font-size:14.5px;line-height:1.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .tfoot{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:4px}
  .tplus{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-l);display:grid;place-items:center;font-size:19px;line-height:1;color:var(--ink);transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
  .tcard:hover .tplus{background:var(--gold);color:#fff;border-color:var(--gold)}
  .tname{font-family:var(--sans);font-size:14px;color:var(--ink);font-weight:700}
  .tcard-hit{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:grab;font:inherit;z-index:2;touch-action:pan-y}
  .tcard-hit:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  @media(max-width:760px){.tcar-btn{width:46px;height:46px}.tcard{flex-basis:clamp(248px,72vw,300px)}}

  /* Testimonial lightbox */
  .tlb{position:fixed;inset:0;z-index:1001;background:rgba(8,12,18,.95);display:none;align-items:center;justify-content:center;padding:20px}
  .tlb.open{display:flex}
  .tlb-inner{position:relative;display:grid;grid-template-columns:auto minmax(280px,400px);max-width:94vw;max-height:88vh;background:var(--cream);border-radius:16px;overflow:hidden}
  .tlb-inner img{height:88vh;max-width:48vw;object-fit:cover;background:#0a1c30}
  .tlb-text{padding:clamp(26px,3vw,40px);color:var(--ink);display:flex;flex-direction:column;justify-content:center;overflow:auto}
  .tlb-stars{color:var(--gold);font-size:20px;letter-spacing:4px;margin-bottom:16px}
  .tlb-text p{color:var(--ink);font-size:1.02rem;line-height:1.95;margin-bottom:20px}
  .tlb-who{color:var(--ink-soft);font-size:14px}
  .tlb-who b{color:var(--ink);font-weight:700}
  .tlb-count{position:absolute;top:18px;left:22px;color:rgba(255,255,255,.75);font-size:13px;letter-spacing:.1em;z-index:2}
  @media(max-width:760px){.tlb-inner{grid-template-columns:1fr;max-height:90vh;overflow:auto}.tlb-inner img{height:auto;max-width:90vw;max-height:46vh;width:100%}}
  /* directional slide-fade when switching testimonials */
  @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:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-soft);border-radius:999px;padding:4px 11px;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:8px;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:1px 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:10px;margin-bottom:clamp(28px,3vw,44px)}
  .gtab{font-family:var(--sans);font-size:15px;color:var(--ink-soft);background:#fff;border:1px solid var(--line-l);border-radius:999px;padding:11px 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:#fff;border:1px solid var(--line-l);border-radius:14px;padding:clamp(22px,3vw,30px)}
  .gcard h3{font-family:var(--serif);font-size:1.2rem;color:var(--ink);margin-bottom:14px}
  .gcard ul{display:flex;flex-direction:column;gap:9px}
  .gcard li{position:relative;padding-left:18px;color:var(--ink-soft);font-size:14.5px;line-height:1.75}
  .gcard li::before{content:"–";position:absolute;left:0;color:var(--gold)}
  .gcard li.warn{color:#C0392B;font-weight:500}
  .gcard li.warn::before{content:"⚠";color:#C0392B;left:-2px}
  .gnote{max-width:1100px;margin:clamp(18px,2vw,26px) auto 0;font-size:13px;color:var(--ink-soft);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(--ink-soft);font-size:1.02rem;line-height:1.9}
  .plan-banner{background:var(--navy);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}
  .pb-item{display:flex;flex-direction:column;gap:3px}
  .pb-item .pb-name{font-size:13px;letter-spacing:.06em;color:rgba(224,239,250,.72)}
  .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:12px;color:rgba(224,239,250,.55)}
  .plan-banner .btn{margin-left:auto;white-space:nowrap}
  .pb-note{flex-basis:100%;font-size:12.5px;color:rgba(224,239,250,.6);margin:0;letter-spacing:.02em}
  @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:#fff;border:1px solid var(--line-l);border-radius:14px;padding:clamp(22px,3vw,30px);display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .gtransport h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}
  .gtransport p{font-size:14px;color:var(--ink-soft);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-l);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:10px;max-width:1100px;margin:0 auto clamp(26px,3vw,40px)}
  .pf-tab{font-family:var(--sans);font-size:14px;letter-spacing:.04em;color:rgba(224,239,250,.75);background:transparent;border:1px 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)}