/* Logo service follows the site's obsidian, lilac and ivory palette. */
.logo-page { --lp-ink:#f5f0eb; --lp-muted:#b8b0c4; --lp-line:rgba(200,162,255,.19); position:relative; z-index:2; color:var(--lp-ink); font-family:"Noto Sans TC",sans-serif; font-size:15px; line-height:1.9; overflow:clip; }
.logo-page *, .logo-lightbox * { box-sizing:border-box; }
.logo-wrap { width:min(1344px, calc(100% - 112px)); margin-inline:auto; }
.logo-page p { margin:0; }
.logo-page h1,.logo-page h2,.logo-page h3,.logo-page h4 { margin:0; font-family:"Noto Sans TC",sans-serif; font-weight:700; letter-spacing:-.045em; line-height:1.4; }
.logo-page h2 { font-size:clamp(30px,3.65vw,54px); }
.logo-page h2 em { font-style:normal; color:#d8baf9; }
.logo-eyebrow { font-family:"JetBrains Mono","Noto Sans TC",monospace; font-size:11px; letter-spacing:.16em; color:#c5accf; text-transform:uppercase; line-height:1.8; }
.logo-eyebrow span { padding-left:15px; color:#90879d; }
.logo-hero { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:50px; padding-top:150px; padding-bottom:85px; min-height:760px; }
.logo-hero h1 { font-size:clamp(39px,4.8vw,76px); font-weight:700; line-height:1.24; margin:26px 0 16px; }
.logo-hero h1 em { font-family:"Cormorant Garamond",serif; font-weight:400; font-size:1.27em; color:#d8baf9; letter-spacing:-.02em; }
.logo-hero__en { font-family:"Cormorant Garamond",serif; color:#cfb8d0; font-size:25px; font-style:italic; }
.logo-page .logo-lead { font-size:16px; color:#c7bece; line-height:2; margin-top:27px; }
.logo-actions { display:flex; align-items:center; flex-wrap:wrap; gap:25px; margin-top:33px; }
.logo-button { display:inline-flex; justify-content:space-between; align-items:center; gap:35px; background:linear-gradient(115deg,#d4b2f7,#e5cdd3); padding:15px 23px; color:#151019; font:700 14px/1.7 "Noto Sans TC",sans-serif; border:1px solid transparent; transition:transform .2s,box-shadow .2s; white-space:nowrap; }
.logo-button:hover { transform:translateY(-2px); box-shadow:0 10px 36px #c8a2ff1d; }
.logo-button--outline { background:transparent; border-color:#85728f; color:var(--lp-ink); }
.logo-text-link { display:inline-flex; gap:12px; align-items:center; font-size:14px; border-bottom:1px solid #9a83ad; padding:6px 0; }
.logo-page a:focus-visible,.logo-page button:focus-visible,.logo-page summary:focus-visible,.logo-lightbox button:focus-visible { outline:2px solid #d8baf9; outline-offset:6px; }
.logo-hero__visual { position:relative; margin-top:42px; }
.logo-hero__visual:before { content:""; position:absolute; inset:-28px 22px 28px -22px; border:1px solid var(--lp-line); z-index:-1; }
.logo-hero__visual>img { width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:cover; }
.logo-hero__caption { display:flex; justify-content:space-between; gap:10px; padding-top:17px; font-size:10px; font-family:"JetBrains Mono","Noto Sans TC",monospace; letter-spacing:.07em; color:#bcb1c3; }
.logo-hero__caption-mobile { display:none; }
.logo-orbit { width:112px; height:112px; border:1px solid #aa91b875; border-radius:50%; display:grid; place-content:center; text-align:center; position:absolute; bottom:5px; left:-43px; background:#15101ceb; backdrop-filter:blur(12px); font:9px/1.7 "JetBrains Mono",monospace; letter-spacing:.08em; }
.logo-orbit b { font-size:28px; line-height:1.4; color:#d4a574; font-weight:400; }
.logo-facts { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--lp-line); border-bottom:1px solid var(--lp-line); }
.logo-facts>div { padding:26px 24px; border-right:1px solid var(--lp-line); }
.logo-facts>div:first-child { padding-left:0; } .logo-facts>div:last-child { border:0; }
.logo-facts>div>span { display:block; font-size:12px; color:var(--lp-muted); margin-bottom:7px; }
.logo-facts strong { display:block; font-family:"Space Grotesk","Noto Sans TC",sans-serif; font-size:27px; font-weight:500; line-height:1.65; }
.logo-facts strong small { font-size:12px; font-family:"Noto Sans TC",sans-serif; font-weight:400; }
.logo-facts .logo-facts__language { font-size:15px; padding-top:3px; }.logo-facts__language small { display:block; color:#bcb1c3; }
.logo-section { padding-block:100px; scroll-margin-top:85px; }
.logo-section-head { display:grid; grid-template-columns:1.4fr 1fr; gap:18px 60px; align-items:end; margin-bottom:46px; }
.logo-section-head>.logo-eyebrow { grid-column:1/-1; }
.logo-section-head>p:last-child { color:var(--lp-muted); line-height:2; }
.logo-section-head--wide { grid-template-columns:1.4fr 1fr; }
.logo-section-head--wide h2 { margin-top:16px; }
.logo-section-head--wide>p:last-child { justify-self:end; padding-bottom:5px; }
.logo-stages { display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.logo-stage { display:grid; grid-template-columns:60px 1fr; gap:20px; border-top:1px solid #90749775; padding:32px 0 0; }
.logo-stage__index { font-family:"Cormorant Garamond",serif; font-size:52px; font-style:italic; color:#ba95c9; line-height:1; }
.logo-stage h3 { font-size:23px; margin:13px 0; }
.logo-stage p:not(.logo-eyebrow) { color:var(--lp-muted); max-width:410px; }
.logo-stage__foot { display:flex; justify-content:space-between; margin-top:24px; color:#dfccdf; font-size:13px; border-bottom:1px solid var(--lp-line); padding-bottom:24px; }
.logo-stage__foot b { font-size:22px; font-weight:400; }
.logo-gallery-section { background:linear-gradient(180deg,#19131e91,#130f1840); border-block:1px solid #c8a2ff10; }
.logo-gallery-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:32px; }
.logo-filters { display:flex; gap:7px; flex-wrap:wrap; } .logo-filters[hidden] { display:none; }
.logo-filters button { cursor:pointer; padding:9px 18px; min-height:44px; background:transparent; border:1px solid #75648165; color:#c5bacd; font:13px/1.7 "Noto Sans TC",sans-serif; border-radius:0; transition:background .2s,color .2s; }
.logo-filters button span { font:10px "JetBrains Mono",monospace; opacity:.75; margin-left:5px; }
.logo-filters button[aria-pressed="true"] { background:#d8baf9; border-color:#d8baf9; color:#17101f; }
#logo-results { font-size:11px; color:#aa9bb7; }
.logo-gallery { display:grid; grid-template-columns:1fr 1fr; gap:65px 34px; }
.logo-case { min-width:0; scroll-margin-top:100px; } .logo-case[hidden] { display:none; }
.logo-case__image { position:relative; display:block; background:#302b34; overflow:hidden; }
.logo-case__image img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; transition:transform .6s; }
@media (hover:hover) { .logo-case__image:hover img { transform:scale(1.025); } }
.logo-case__zoom { position:absolute; right:14px; bottom:14px; width:34px; height:34px; display:grid; place-content:center; color:white; font-size:19px; background:#0b0a0fa6; border:1px solid #ffffff40; }
.logo-case__meta { display:flex; justify-content:space-between; gap:10px; font-size:10px; letter-spacing:.06em; color:#b7a4c3; margin:19px 0 10px; }
.logo-case__name { display:flex; align-items:baseline; flex-wrap:wrap; gap:15px; }
.logo-case__name h3 { font-size:28px; font-family:"Space Grotesk","Noto Sans TC",sans-serif; letter-spacing:.03em; }
.logo-case__name>span { font:10px "JetBrains Mono",monospace; color:#9f92ae; letter-spacing:.1em; }
.logo-case h4 { font-size:16px; margin:14px 0 7px; letter-spacing:.02em; font-weight:400; }
.logo-case>p { color:#b9adbf; font-size:13px; line-height:1.9; }
.logo-case__application { border-top:1px solid var(--lp-line); margin-top:18px; padding-top:13px; font-size:11px; color:#a59aaf; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; }
.logo-case__application a { color:#dbc4eb; }
.logo-original { display:grid; grid-template-columns:.7fr 1fr; gap:90px; align-items:center; }
.logo-original__art { background:radial-gradient(ellipse at center,#1c3339,#17121f 70%); padding:48px; display:grid; place-items:center; gap:25px; border:1px solid var(--lp-line); }
.logo-original__art>span { font:10px "JetBrains Mono",monospace; color:#a99eb7; letter-spacing:.18em; }
.logo-source-window { position:relative; width:min(280px,100%); aspect-ratio:1; overflow:hidden; border-radius:50%; background:white; }
.logo-source-window img { position:absolute; width:167.4%; max-width:none; height:auto; left:-32.3%; top:-2.2%; }
.logo-original h2 { margin-top:20px; } .logo-original p:not(.logo-eyebrow) { color:#b9adbf; margin-top:21px; } .logo-original .logo-text-link { margin-top:22px; }
.logo-plan-section { background:radial-gradient(ellipse at 20% 35%,#49325029,transparent 65%),#110e1770; border-block:1px solid var(--lp-line); }
.logo-plan { display:grid; grid-template-columns:.88fr 1.12fr; gap:60px; align-items:stretch; }
.logo-price { border:1px solid #a984bf80; padding:40px; background:linear-gradient(145deg,#23182cbb,#15121bcc); }
.logo-price h3 { font-size:25px; margin-top:14px; }
.logo-price__amount { font:500 clamp(57px,6vw,86px)/1.3 "Space Grotesk",sans-serif; letter-spacing:-.06em; margin:25px 0 17px!important; }
.logo-price__amount>span { font-size:19px; margin-right:14px; letter-spacing:0; font-weight:400; color:#c9b3d3; }
.logo-price>p:not(.logo-eyebrow):not(.logo-price__amount) { color:#c4b4cd; }
.logo-price__terms { display:flex; flex-wrap:wrap; gap:12px; margin:27px 0; font-size:12px; }
.logo-price__terms span { border:1px solid #8a77944d; padding:7px 11px; }
.logo-price .logo-button { width:100%; }
.logo-price>small { display:block; font-size:11px; color:#a699af; margin-top:22px; line-height:1.9; }
.logo-delivery { padding-top:18px; }
.logo-delivery>h3 { font-size:25px; margin-top:14px; margin-bottom:25px; }
.logo-file { display:flex; align-items:center; gap:20px; padding:24px 0; border-bottom:1px solid var(--lp-line); }
.logo-file__icon { display:grid; place-items:center; width:55px; height:67px; border:1px solid #9c83ae; flex-shrink:0; font:34px/1 "Space Grotesk",sans-serif; color:#d8baf9; }
.logo-file__icon--grid { background:repeating-conic-gradient(#c8a2ff12 0% 25%,transparent 0% 50%) 50% / 12px 12px; }
.logo-file__icon--color { color:#d4a574; background:radial-gradient(ellipse,#bd8deb55,transparent); }
.logo-file h4 { font-size:18px; margin-bottom:5px; }
.logo-file p { font-size:13px; color:#ad9fb8; }
.logo-file>span:last-child { margin-left:auto; font:11px "JetBrains Mono",monospace; color:#95839f; }
.logo-delivery__note { font-size:12px; color:#a99ab4; padding-top:21px; }
.logo-process { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; margin:65px 0 0; padding:0; list-style:none; }
.logo-process li { border-top:1px solid #ae8bb450; padding-top:22px; }
.logo-process li>span { font:10px "JetBrains Mono",monospace; letter-spacing:.1em; color:#b699c7; }
.logo-process h3 { font-size:20px; margin:16px 0 12px; } .logo-process p { font-size:13px; color:#b4a6be; }
.logo-package-options { display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.logo-package-options article { border:1px solid var(--lp-line); background:#1b14205c; }
.logo-package-options img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.logo-package-options article>div { padding:30px; }
.logo-package-options h3 { font-size:25px; margin-top:15px; margin-bottom:17px; }
.logo-package-options p:not(.logo-eyebrow) { color:#b8adc1; font-size:14px; }
.logo-package-options ul { list-style:none; padding:0; margin:22px 0 0; }
.logo-package-options li { font-size:13px; border-top:1px solid var(--lp-line); padding:11px 0; color:#c3b8cc; }
.logo-package-options li:before { content:"↗"; color:#b99ccc; padding-right:12px; }
.logo-print-flow { padding:35px 0; margin-top:30px; border-bottom:1px solid var(--lp-line); }
.logo-print-flow>div { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin:22px 0 16px; font-size:20px; }
.logo-print-flow b { color:#a082b2; font-weight:400; } .logo-print-flow>p:last-child { max-width:820px; color:#ac9eb7; font-size:13px; }
.logo-quote { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:32px; }
.logo-quote h3 { font-size:18px; margin-bottom:10px; } .logo-quote p { font-size:12px; color:#b5a6bf; }
.logo-faq { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; border-top:1px solid var(--lp-line); }
.logo-faq h2 { margin-top:18px; font-size:clamp(29px,3vw,44px); }
.logo-faq details { border-bottom:1px solid var(--lp-line); }
.logo-faq summary { cursor:pointer; list-style:none; padding:22px 0; display:flex; justify-content:space-between; gap:25px; font-size:15px; line-height:1.7; }
.logo-faq summary::-webkit-details-marker { display:none; } .logo-faq summary span { color:#d2aceb; transition:transform .2s; }
.logo-faq details[open] summary span { transform:rotate(45deg); } .logo-faq details p { color:#b8a8c4; padding-bottom:25px; font-size:13px; line-height:2; }
.logo-final-cta { text-align:center; padding-bottom:125px; border-top:1px solid var(--lp-line); background:radial-gradient(ellipse at bottom,#5c3a731a,transparent 70%); }
.logo-final-cta h2 { margin:22px 0; font-size:clamp(34px,4.2vw,62px); } .logo-final-cta>p:not(.logo-eyebrow) { color:#b9a6c4; }
.logo-final-cta .logo-actions { justify-content:center; }
.logo-review-bar { position:fixed; bottom:15px; left:50%; transform:translateX(-50%); z-index:90; display:flex; align-items:center; gap:30px; padding:9px 18px; border:1px solid #a984bf80; background:#160e20eb; box-shadow:0 6px 35px #0008; backdrop-filter:blur(14px); color:#d6c6e0; font-size:11px; line-height:1.8; white-space:nowrap; }
.logo-review-bar span { display:flex; align-items:center; gap:7px; }.logo-review-bar i { width:5px; height:5px; background:#d4a574; border-radius:50%; }.logo-review-bar a { color:#dfbcff; }
.logo-lightbox { position:fixed; inset:0; margin:auto; width:min(1380px,94vw); max-width:none; max-height:94dvh; padding:45px 20px 20px; overflow:auto; background:#120e19; color:#f5f0eb; border:1px solid #72607e; z-index:300; }
.logo-lightbox::backdrop { background:#060308eb; backdrop-filter:blur(12px); }.logo-lightbox>img { display:block; width:100%; height:auto; max-height:73dvh; object-fit:contain; }
.logo-lightbox>div { padding:16px 8px 0; }.logo-lightbox h2 { font:700 20px/1.5 "Noto Sans TC",sans-serif; margin:0 0 6px; }.logo-lightbox p { font:13px/1.8 "Noto Sans TC",sans-serif; margin:0; color:#b8a8c4; }
.logo-lightbox__close { position:absolute; top:8px; right:11px; color:#f5f0eb; background:transparent; border:0; min-width:36px; min-height:36px; cursor:pointer; font-size:20px; }
.logo-case__name h3 { text-transform:none; }
body[data-page="/logo-design"] #loader { display:none; }
@media (max-width:1100px) { .logo-wrap { width:calc(100% - 64px); }.logo-hero { gap:35px; min-height:670px; padding-top:140px; }.logo-hero h1 { font-size:clamp(39px,4.8vw,62px); }.logo-eyebrow span { display:none; }.logo-orbit { width:88px; height:88px; left:-22px; }.logo-plan { gap:36px; }.logo-price { padding:30px; }.logo-facts>div { padding-inline:18px; }.logo-facts strong { font-size:24px; }.logo-original { gap:55px; } }
@media (max-width:850px) { .logo-hero { grid-template-columns:1fr; padding-top:120px; gap:15px; padding-bottom:48px; }.logo-hero h1 { font-size:clamp(45px,7.5vw,66px); }.logo-hero__copy { max-width:620px; }.logo-hero__visual { width:100%; margin-top:35px; }.logo-hero__visual:before { inset:-15px 15px 15px -15px; }.logo-hero__visual>img { max-height:500px; }.logo-orbit { left:auto; right:16px; bottom:55px; }.logo-facts { grid-template-columns:1fr 1fr; }.logo-facts>div:nth-child(2) { border-right:0; }.logo-facts>div:nth-child(3) { padding-left:0; }.logo-facts>div:nth-child(-n+2) { border-bottom:1px solid var(--lp-line); }.logo-section { padding-block:70px; }.logo-section-head { gap:18px 30px; }.logo-stage { grid-template-columns:40px 1fr; gap:14px; }.logo-stage__index { font-size:42px; }.logo-stage h3 { font-size:20px; }.logo-plan { grid-template-columns:1fr; }.logo-process { grid-template-columns:1fr 1fr; gap:30px; }.logo-delivery { padding-top:15px; }.logo-original { grid-template-columns:.7fr 1fr; gap:30px; }.logo-original__art { padding:30px; }.logo-quote { flex-direction:column; align-items:flex-start; }.logo-faq { grid-template-columns:1fr; gap:28px; }.logo-package-options article>div { padding:23px; }.logo-package-options h3 { font-size:22px; }.logo-gallery { gap:50px 25px; }.logo-case__name h3 { font-size:24px; }.logo-case__meta { font-size:9px; } }
@media (max-width:700px) { .logo-wrap { width:calc(100% - 40px); }.logo-section-head,.logo-section-head--wide { display:block; }.logo-section-head h2 { margin:15px 0 20px; }.logo-section-head>p:last-child { font-size:14px; }.logo-section-head--wide>p:last-child { margin-top:20px; }.logo-stages { grid-template-columns:1fr; gap:25px; }.logo-gallery { grid-template-columns:1fr; gap:46px; }.logo-gallery-toolbar { align-items:flex-start; flex-direction:column; gap:12px; }.logo-filters { gap:6px; width:100%; }.logo-filters button { flex:1; padding:9px 11px; font-size:12px; }.logo-case__meta { font-size:10px; }.logo-case__name h3 { font-size:28px; }.logo-original { grid-template-columns:1fr; }.logo-original__art { max-width:370px; width:100%; margin:auto; }.logo-source-window { max-width:235px; }.logo-package-options { grid-template-columns:1fr; gap:30px; }.logo-package-options article>div { padding:26px; }.logo-print-flow>div { gap:10px; font-size:15px; }.logo-price { padding:28px; }.logo-hero { padding-top:110px; }.logo-hero__en { font-size:24px; }.logo-lead { font-size:15px!important; }.logo-hero__visual { margin-top:30px; }.logo-hero__caption { font-size:8px; }.logo-review-bar { bottom:10px; padding:8px 12px; gap:15px; font-size:10px; }.logo-actions { gap:22px; }.logo-button { font-size:13px; padding:14px 19px; gap:25px; }.logo-facts>div { padding:20px 14px; }.logo-facts strong { font-size:24px; }.logo-facts .logo-facts__language { font-size:12px; }.logo-facts strong small { font-size:10px; }.logo-lightbox { padding:43px 8px 14px; }.logo-faq summary { font-size:14px; }.logo-final-cta { padding-bottom:95px; } }
/* Keep the single-column image unobstructed and its caption easy to read. */
@media (max-width:850px) {
  body[data-page="/logo-design"] .nav {
    padding:12px 20px;
    min-height:72px;
    mix-blend-mode:normal;
    background:rgba(16,13,22,.96);
    border-bottom:1px solid rgba(200,162,255,.12);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
  }
  .logo-hero { gap:0; min-height:0; padding-bottom:32px; }
  .logo-hero .logo-actions { margin-top:26px; gap:16px; }
  .logo-hero .logo-text-link { min-height:44px; }
  .logo-hero__visual { margin-top:32px; border:1px solid var(--lp-line); background:#17121d; }
  .logo-hero__visual:before,.logo-orbit { display:none; }
  .logo-hero__visual>img { max-height:none; }
  .logo-hero__caption {
    align-items:center;
    flex-wrap:wrap;
    gap:6px 12px;
    padding:12px;
    font-family:"Noto Sans TC",sans-serif;
    font-size:11px;
    line-height:1.8;
    letter-spacing:.02em;
  }
  .logo-hero__caption-desktop { display:none; }
  .logo-hero__caption-mobile { display:inline; color:#e2cdec; }
}
@media (prefers-reduced-motion:reduce) { .logo-page *, .logo-page *:before,.logo-lightbox * { scroll-behavior:auto!important; transition:none!important; animation:none!important; }.logo-case__image:hover img,.logo-button:hover { transform:none; } }