/* CREATOP section consistency patch — 2026-10-16 */
/* 1. End Projects cleanly: no mobile fade mask or bottom fade overlay. */
#projects .biotech-world{ -webkit-mask-image:none !important; mask-image:none !important; }
#projects .ambient-light{background:radial-gradient(at 50% 18%,#ffffff55,transparent 35%) !important;}
#projects{box-shadow:none !important;}
/* 2+3. Use a shared heading scale for Why Us, Services, Essentials, Projects and FAQ. */
.medical-site .section-heading h2,
.medical-site .essentials-top .section-heading h2,
.medical-site .faq-section .section-heading h2,
.medical-site .projects-heading h2{
 font-size:clamp(28px,3.5vw,60px) !important;
 line-height:1.35 !important;
 letter-spacing:.025em;
}
.medical-site .section-heading p,
.medical-site .essentials-top .section-heading p,
.medical-site .faq-section .section-heading p,
.medical-site .projects-heading p{
 font-size:clamp(15px,1.55vw,25px) !important;
 line-height:1.7 !important;
 letter-spacing:.04em;
}
/* FAQ's long heading should wrap gracefully rather than overflow. */
.medical-site .faq-section .section-heading h2{white-space:normal !important;}
.medical-site .projects-heading{max-width:min(84vw,900px);}
.medical-site .projects-heading p{max-width:760px;margin-top:14px;color:#375579;}
@media(max-width:767px){
 .medical-site .section-heading h2,
 .medical-site .essentials-top .section-heading h2,
 .medical-site .faq-section .section-heading h2,
 .medical-site .projects-heading h2{font-size:clamp(28px,6vw,34px) !important;}
 .medical-site .section-heading p,
 .medical-site .essentials-top .section-heading p,
 .medical-site .faq-section .section-heading p,
 .medical-site .projects-heading p{font-size:clamp(15px,3.8vw,17px) !important;}
 .medical-site .projects-heading{max-width:88vw;}
 .medical-site .projects-heading p{line-height:1.65 !important;margin-top:10px;}
}

/* 4. (Claude) Make room for the new Projects intro paragraph so it no longer overlaps the case cards. */
#projects .biotech-world{--card-top:calc(240px + 8vw);}
@media(max-width:767px){
 #projects .biotech-world{--card-top:330px;}
}


/* 7. Typography system — 3 tiers: 手機 0–767 / 平板 768–1279 / 桌機 1280+.
   Body copy ≥16px; decorative labels ≥14px. H1 stays fluid (fills the hero) and stops at 131px from 1440px. */
:root{--t-h2:28px;--t-h3:20px;--t-h4:17px;--t-hero-sub:20px;--t-hero-h2:18px;--t-lead:16px;--t-hero-p:16px;--t-body:16px;--t-caption:16px;--t-eyebrow:14px;--t-micro:14px}
@media(min-width:768px){:root{--t-h2:36px;--t-h3:22px;--t-h4:18px;--t-hero-sub:22px;--t-hero-h2:20px;--t-lead:18px;--t-hero-p:16px;--t-body:16px;--t-caption:16px;--t-eyebrow:14px;--t-micro:14px}}
@media(min-width:1280px){:root{--t-h2:48px;--t-h3:24px;--t-h4:20px;--t-hero-sub:28px;--t-hero-h2:24px;--t-lead:20px;--t-hero-p:18px;--t-body:17px;--t-caption:16px;--t-eyebrow:15px;--t-micro:14px}}
/* H2 */
.medical-site .section-heading h2,.medical-site .essentials-top .section-heading h2,.medical-site .faq-section .section-heading h2,.medical-site .projects-heading h2,.medical-site .contact-panel h2{font-size:var(--t-h2) !important;line-height:1.5 !important}
/* Lead */
.medical-site .section-heading p,.medical-site .essentials-top .section-heading p,.medical-site .faq-section .section-heading p,.medical-site .projects-heading p,.medical-site .contact-panel p{font-size:var(--t-lead) !important;line-height:1.8 !important}
/* H3 */
.medical-site .value-card h3,.medical-site .service-card h3,.medical-site .essential-card h3,.medical-site .case-information h2{font-size:var(--t-h3) !important;line-height:1.5 !important;font-weight:600 !important}
/* H4 */
.medical-site .faq-item h3 button{font-size:var(--t-h4) !important;line-height:1.6 !important}
/* Hero */
.medical-site .hero-lead{font-size:var(--t-hero-sub) !important;line-height:1.5 !important}
.medical-site .hero-promise h2{font-size:var(--t-hero-h2) !important;line-height:1.5 !important}
.medical-site .hero-promise p{font-size:var(--t-hero-p) !important;line-height:1.5 !important}
/* Body */
.medical-site .value-card p,.medical-site .service-card p,.medical-site .essential-card p,.medical-site .faq-answer p,.medical-site .value-card li,.medical-site .process-flow>div,.medical-site .process-flow strong,.medical-site .process-flow small{font-size:var(--t-body) !important;line-height:1.7 !important}
.medical-site .value-card p,.medical-site .service-card p,.medical-site .essential-card p,.medical-site .faq-answer p{line-height:1.8 !important}
/* Caption */
.medical-site .service-card small{font-size:var(--t-caption) !important;line-height:1.7 !important;color:#65748c}
/* Decorative */
.medical-site .section-eyebrow{font-size:var(--t-eyebrow) !important}
.medical-site .case-eyebrow,.medical-site .case-information h2 span,.medical-site .case-information p,.medical-site .medical-footer span,.medical-site .scroll-invitation{font-size:var(--t-micro) !important;line-height:1.5 !important}

/* 9. Mobile layouts that make room for 16px body copy */
@media(max-width:767px){
 .medical-site .service-orbit{grid-template-columns:1fr !important}
 .medical-site .service-card{flex-direction:row !important;gap:16px !important}
 .medical-site .medical-footer{flex-wrap:wrap;gap:6px 16px}
}
/* FAQ process steps stack vertically until there is room for 16px labels side by side */
@media(max-width:1279px){
 .medical-site .process-flow{flex-direction:column !important;align-items:stretch !important;gap:4px !important}
 .medical-site .process-flow>div{flex-direction:row !important;align-items:center !important;text-align:left !important;gap:14px}
 .medical-site .process-flow>div>span{margin-bottom:0 !important;flex:none}
 .medical-site .process-flow>div strong+small{margin-left:.4em}
 .medical-site .process-arrow{transform:rotate(90deg);margin:0 0 0 15px !important}
}

/* 10. Hero copy follows the section scale: headline lines = H2, supporting line = Lead */
.medical-site .hero-lead{font-size:var(--t-h2) !important;line-height:1.5 !important;font-weight:600 !important}
/* 精準的抓住客戶的心 = midpoint of H2 and H3: 24 / 29 / 36 */
.medical-site .hero-promise h2{font-size:var(--t-hero-mid) !important;line-height:1.4 !important;font-weight:600 !important}


/* 11. ≤800px: Services and FAQ use the same heading→cards spacing as the other sections (38px; the heading block carries a -30px offset, hence 68px) */
@media(max-width:800px){
 .medical-site #services .service-orbit{margin-top:68px !important}
 .medical-site .faq-section{gap:68px !important}
}

/* 12. Hero title: as large as possible on one line (fallback; creatop-footer.js fits it to the real font width) */
:root{--t-hero-mid:24px}
@media(min-width:768px){:root{--t-hero-mid:29px}}
@media(min-width:1280px){:root{--t-hero-mid:36px}}
.medical-site .medical-hero h1{font-size:9.4vw !important;white-space:nowrap !important}

/* ===================== 2026-10-20 revision ===================== */
/* 13. Spacing system — 手機 0–767 / 平板 768–1279 / 桌機 1280+ */
:root{--sp-section:96px;--sp-head:32px;--sp-card:16px;--sp-mark:12px;--sp-h2p:12px}
@media(min-width:768px){:root{--sp-section:128px;--sp-head:40px;--sp-card:20px;--sp-mark:12px;--sp-h2p:14px}}
@media(min-width:1280px){:root{--sp-section:160px;--sp-head:48px;--sp-card:24px;--sp-mark:16px;--sp-h2p:16px}}
.medical-site .section-mark{margin-bottom:var(--sp-mark) !important}
.medical-site .section-eyebrow{margin-bottom:8px !important;line-height:1.5 !important}
.medical-site .section-heading h2{margin-bottom:var(--sp-h2p) !important}
.medical-site .medical-hero h1{line-height:1.1 !important}
/* sections: content→next heading = --sp-section (hero→values untouched) */
.medical-site .values-section{min-height:0 !important;justify-content:flex-start !important;padding-bottom:0 !important}
.medical-site .value-grid{margin-top:var(--sp-head) !important;gap:var(--sp-card) !important}
.medical-site .services-section{min-height:0 !important;padding-top:var(--sp-section) !important;padding-bottom:0 !important}
.medical-site .case-transition .essentials-section{min-height:0 !important;justify-content:flex-start !important;padding:var(--sp-section) 0 var(--sp-section) !important}
.medical-site .essentials-track{margin-top:var(--sp-head) !important;gap:var(--sp-card) !important}
.medical-site .faq-section{min-height:0 !important;padding-top:calc(var(--sp-section) * .4) !important;padding-bottom:0 !important}
.medical-site .faq-list{gap:12px}
@media(max-width:800px){
 .medical-site #services .service-orbit{margin-top:calc(var(--sp-head) + 30px) !important;gap:var(--sp-card) !important}
 .medical-site .faq-section{gap:calc(var(--sp-head) + 30px) !important}
}
/* 15. Essentials stays put a moment before Projects slides over it */
.medical-site .case-transition .projects-section{margin-top:25vh}

/* 14. Hero: supporting line sits under the headline */
.medical-site .hero-sub{position:relative;z-index:2;margin:16px 0 0;max-width:36em;font-size:var(--t-lead) !important;line-height:1.8 !important;letter-spacing:.04em;color:#173a5b}

/* 16. Services: six cards, rows aligned left/right (rows positioned by creatop-footer.js) */
@media(min-width:801px){
 .medical-site .service-0{left:2% !important;right:auto !important}
 .medical-site .service-1{right:5% !important;left:auto !important}
 .medical-site .service-2{left:0 !important;right:auto !important}
 .medical-site .service-3{right:0 !important;left:auto !important}
 .medical-site .service-4{left:7% !important;right:auto !important}
 .medical-site .service-5{right:4% !important;left:auto !important}
}

/* 17. Essentials wireframe: icon centred below the browser bar and scaled with the frame */
.medical-site .browser-illustration.ct-has-frame{border-color:transparent !important}
.medical-site .browser-illustration>svg:not(.ct-frame){margin:auto !important;height:45% !important;width:auto !important;flex:none}
.medical-site .browser-illustration>div{border-bottom-color:#718eb6}
.ct-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ct-frame rect{fill:none;stroke:#718eb6;stroke-width:2;rx:7px}

/* 18. Projects: card opens from 92% to full width, centre card larger, info = name only */
#projects{--proj-r:80px}
@media(max-width:449px){#projects{--proj-r:48px}}
#projects .biotech-world{clip-path:inset(0 4% round var(--proj-r));transition:clip-path 1s cubic-bezier(.16,1,.3,1)}
#projects.ct-open .biotech-world{clip-path:inset(0 0 round var(--proj-r))}

#projects .biotech-world{--card-h:27vw}
@media(min-aspect-ratio:19/10){#projects .biotech-world{--card-h:24.1875vw}}
@media(max-width:767px){#projects .biotech-world{--card-h:47.25vw}}
#projects .case-panel{width:48% !important;left:26% !important;transform:translateX(calc(var(--orbit-x) * var(--ct-ox,1))) translateZ(var(--orbit-z)) rotateY(calc(var(--orbit-yaw) + var(--tilt-y,0deg))) rotateX(var(--tilt-x,0deg)) scale(calc(1 - (1 - var(--orbit-scale)) * 1.229)) !important}
@media(min-aspect-ratio:19/10){#projects .case-panel{width:43% !important;left:28.5% !important}}
@media(max-width:767px){#projects .case-panel{width:84% !important;left:8% !important}}
#projects .case-panel.is-active.ct-tilting{transition:transform .15s ease-out !important}
#projects .case-eyebrow,#projects .case-information h2>span,#projects .case-information p{display:none !important}
#projects .case-information{top:calc(var(--card-top) + var(--card-h) + 28px) !important}
#projects .case-information h2{margin:0 !important}
#projects .pagination{top:calc(var(--card-top) + var(--card-h) + 84px) !important}
#projects .biotech-world{height:calc(var(--card-top) + var(--card-h) + 119px + var(--sp-section) * .6) !important}

/* 19. Contact form (replaces the old CTA panel; sits on the FAQ background) */
.medical-site .contact-section{display:none !important}
.ct-contact{position:relative;z-index:6;padding:var(--sp-section) 6vw;font-family:system-ui,-apple-system,"Segoe UI",Arial,var(--font-chinese),sans-serif;color:#082854}
.ct-contact .section-heading{text-align:center}
.ct-contact .section-mark{display:flex;width:58px;height:2px;background:linear-gradient(90deg,#123e67 50%,#ee5141 50%)}
.ct-contact .section-eyebrow{display:block;letter-spacing:.18em;color:#4c6d96;font-weight:600;font-size:var(--t-eyebrow)}
.ct-contact h2{margin:0;font-weight:600;font-size:var(--t-h2);line-height:1.5;letter-spacing:.025em}
.ct-contact h2 span{color:#ed362e}
.ct-contact .section-heading p{margin:0;font-size:var(--t-lead);line-height:1.8;letter-spacing:.04em}
.ct-form{margin:var(--sp-head) 0 0;padding:clamp(24px,4vw,48px);border-radius:24px;background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.92);box-shadow:0 20px 60px rgba(23,58,91,.12);display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-card)}
.ct-field{display:flex;flex-direction:column;gap:8px}
.ct-field--full{grid-column:1/-1}
.ct-field label{font-size:var(--t-body);font-weight:600;line-height:1.5}
.ct-field label i{font-style:normal;color:#ed362e;margin-left:2px}
.ct-field input,.ct-field textarea{font:inherit;font-size:var(--t-body);line-height:1.6;color:#082854;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);outline:none;transition:box-shadow .25s,border-color .25s,background .25s}
.ct-field textarea{min-height:160px;resize:vertical}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#8296b0}
.ct-field input:focus,.ct-field textarea:focus{background:rgba(255,255,255,.8);border-color:#9cc1ea;box-shadow:0 0 0 4px rgba(120,170,230,.25),0 8px 24px rgba(23,58,91,.10)}
.ct-field.is-invalid input,.ct-field.is-invalid textarea{border-color:#ed362e;box-shadow:0 0 0 3px rgba(237,54,46,.15)}
.ct-err{font-size:14px;color:#ed362e;min-height:0}
.ct-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ct-note{font-size:14px;color:#4f6280}
.ct-submit{position:relative;display:inline-flex;align-items:center;gap:14px;padding:10px 10px 10px 28px;border:0;border-radius:999px;background:#fff;color:#082854;font:inherit;font-size:var(--t-body);font-weight:600;cursor:pointer;box-shadow:0 8px 24px rgba(23,58,91,.14);transition:transform .12s,box-shadow .25s}
.ct-submit .ct-arrow{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#ed362e;color:#fff;transition:transform .25s}
.ct-submit:hover{box-shadow:0 12px 30px rgba(23,58,91,.2)}
.ct-submit:hover .ct-arrow{transform:translateX(4px)}
.ct-submit:active{transform:scale(.97)}
.ct-submit.is-loading .ct-arrow{animation:ct-spin .8s linear infinite}
.ct-success{grid-column:1/-1;display:none;align-items:center;gap:16px;font-size:var(--t-lead);font-weight:600}
.ct-form.is-done .ct-field,.ct-form.is-done .ct-actions{display:none}
.ct-form.is-done .ct-success{display:flex}
.ct-success svg{width:56px;height:56px;flex:none}
.ct-success circle,.ct-success path{fill:none;stroke:#ed362e;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.ct-form.is-done .ct-success circle{animation:ct-draw .6s ease-out forwards}
.ct-form.is-done .ct-success path{animation:ct-draw .4s .45s ease-out forwards}
@media(max-width:767px){.ct-form{grid-template-columns:1fr;border-radius:20px}}
@keyframes ct-spin{to{transform:rotate(360deg)}}
@keyframes ct-draw{to{stroke-dashoffset:0}}

/* 20. Hover & press */
.medical-site .glass-card{transition:transform .25s ease-out,box-shadow .25s ease-out,border-color .25s ease-out}
@media(hover:hover){
 .medical-site .value-card:hover,.medical-site .service-card:hover,.medical-site .essential-card:hover{transform:translateY(-6px) !important;box-shadow:0 24px 48px rgba(23,58,91,.16) !important;border-color:#fff !important}
 .medical-site .value-card:hover svg,.medical-site .service-card:hover>svg,.medical-site .essential-card:hover .browser-illustration>svg:not(.ct-frame){transform:scale(1.08)}
 .medical-site .faq-item:not(.open):hover{background:rgba(255,255,255,.62)}
 .medical-site .medical-pill:hover>span{transform:translateX(4px)}
}
.medical-site .value-card svg,.medical-site .service-card>svg,.medical-site .browser-illustration>svg{transition:transform .25s ease-out}
.medical-site .medical-pill>span{transition:transform .25s ease-out}
.medical-site .medical-pill:active,.medical-site .arrow-button:active,.medical-site .faq-item h3 button:active,.medical-site .content-controls button:active{transform:scale(.97)}
.medical-site .arrow-button:active{transform:translateY(-50%) scale(.94)}
.medical-site .faq-item h3 button>svg{transition:transform .3s ease-out}
.medical-site .faq-item.open h3 button>svg{transform:rotate(180deg)}
/* FAQ answers expand smoothly */
.medical-site .faq-item .faq-answer{display:block !important;overflow:hidden;max-height:900px;opacity:1;transition:max-height .45s cubic-bezier(.16,1,.3,1),opacity .3s,padding .45s cubic-bezier(.16,1,.3,1)}
.medical-site .faq-item .faq-answer[hidden]{max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-top-color:transparent;visibility:hidden;transition:max-height .35s ease,opacity .2s,padding .35s ease,visibility 0s .35s}

/* 21. Entrance motion (enabled by creatop-motion.js; off for reduced-motion) */
html.ct-motion .ct-a{opacity:0;transform:var(--ct-from,translateY(28px));transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1) !important;transition-delay:var(--ct-d,0s) !important}
html.ct-motion .ct-a.ct-in{opacity:1;transform:none}
html.ct-motion .ct-a.ct-done{transition:transform .25s ease-out,box-shadow .25s ease-out,border-color .25s ease-out,opacity .3s !important;transition-delay:0s !important}
html.ct-motion [data-reveal]:not(.ct-a){opacity:1;transform:none}
html.ct-motion .ct-mark{transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.16,1,.3,1) var(--ct-d,0s)}
html.ct-motion .ct-mark.ct-in{transform:scaleX(1)}
html.ct-motion .ct-rise{clip-path:inset(-20% -10% 100% -10%);transform:translateY(.5em);transition:clip-path .8s cubic-bezier(.16,1,.3,1) var(--ct-d,0s),transform .8s cubic-bezier(.16,1,.3,1) var(--ct-d,0s)}
html.ct-motion .ct-rise.ct-in{clip-path:inset(-20% -10% -20% -10%);transform:none}
html.ct-motion .ct-grow{transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1) var(--ct-d,0s)}
html.ct-motion .ct-grow.ct-in{transform:scaleX(1)}
html.ct-motion .value-card li svg{transform:scale(0);transition:transform .4s cubic-bezier(.34,1.56,.64,1) var(--ct-d,0s)}
html.ct-motion .value-card.ct-in li svg{transform:scale(1)}
/* wireframe draws itself */
html.ct-motion .ct-wire:not(.ct-drawn) .ct-frame rect,html.ct-motion .ct-wire:not(.ct-drawn) .ct-draw-path{stroke-dasharray:1;stroke-dashoffset:0}
html.ct-motion .ct-wire .ct-frame rect{stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1) var(--ct-d,0s)}
html.ct-motion .ct-wire>div{clip-path:inset(0 100% 0 0);transition:clip-path .45s ease-out calc(var(--ct-d,0s) + .55s)}
html.ct-motion .ct-wire>svg:not(.ct-frame) *{stroke-dashoffset:1;transition:stroke-dashoffset .8s ease-out calc(var(--ct-d,0s) + .8s)}
html.ct-motion .ct-wire>span{transform:scaleX(0);transform-origin:right;transition:transform .35s ease-out calc(var(--ct-d,0s) + 1.3s)}
html.ct-motion .ct-wire.ct-in .ct-frame rect,html.ct-motion .ct-wire.ct-in>svg:not(.ct-frame) *{stroke-dashoffset:0}
html.ct-motion .ct-wire.ct-in>div{clip-path:inset(0 0 0 0)}
html.ct-motion .ct-wire.ct-in>span{transform:scaleX(1)}

/* 22. Icon idle micro-motions (class ct-play toggled every 1.5s) */
.ct-ico *{transform-box:fill-box;transform-origin:center}
.ct-ico.ct-play.lucide-panels-top-left path,.ct-ico.ct-play.lucide-workflow path,.ct-ico.ct-play.lucide-shield-check path:nth-of-type(2),.ct-ico.ct-play.lucide-chart-no-axes-combined path:nth-of-type(4){animation:ct-redraw .7s ease-out}
.ct-ico.ct-play.lucide-file-text path:nth-of-type(n+3){animation:ct-redraw .6s ease-out both}
.ct-ico.ct-play.lucide-file-text path:nth-of-type(4){animation-delay:.1s}.ct-ico.ct-play.lucide-file-text path:nth-of-type(5){animation-delay:.2s}
.ct-ico.ct-play.lucide-box{animation:ct-wobble .7s ease-in-out}
.ct-ico.ct-play.lucide-layers path:nth-of-type(2){animation:ct-lift1 .7s ease-in-out}
.ct-ico.ct-play.lucide-layers path:nth-of-type(3){animation:ct-lift2 .7s ease-in-out}
.ct-ico.lucide-chart-no-axes-combined path:not(:nth-of-type(4)){transform-origin:bottom}
.ct-ico.ct-play.lucide-chart-no-axes-combined path:not(:nth-of-type(4)){animation:ct-bar .7s ease-out}
.ct-ico.ct-play.lucide-calendar-plus path:nth-of-type(1),.ct-ico.ct-play.lucide-calendar-plus path:nth-of-type(3){transform-box:view-box;transform-origin:19px 18px;animation:ct-turn .7s ease-in-out}
.ct-ico.ct-play.lucide-settings-2 circle:nth-of-type(1){animation:ct-slideL .7s ease-in-out}
.ct-ico.ct-play.lucide-settings-2 circle:nth-of-type(2){animation:ct-slideR .7s ease-in-out}
.ct-ico.ct-play.lucide-folder-lock path:nth-of-type(2){animation:ct-shackle .7s ease-in-out}
.ct-ico.lucide-flask-conical,.ct-ico.lucide-paintbrush{transform-origin:50% 90%}
.ct-ico.ct-play.lucide-flask-conical{animation:ct-swirl .7s ease-in-out}
.ct-ico.ct-play.lucide-earth{animation:ct-spin-half .7s ease-in-out}
.ct-ico.ct-play.lucide-users path:nth-of-type(2),.ct-ico.ct-play.lucide-users path:nth-of-type(3){animation:ct-pop .6s ease-out}
.ct-ico.ct-play.lucide-handshake{animation:ct-shake .7s ease-in-out}
.ct-ico.ct-play.lucide-message-circle{animation:ct-bounce .6s ease-out}
.ct-ico.ct-play.lucide-paintbrush{animation:ct-swipe .7s ease-in-out}
.ct-ico.ct-play.lucide-code-xml path:nth-of-type(1){animation:ct-slideR .6s ease-in-out}
.ct-ico.ct-play.lucide-code-xml path:nth-of-type(2){animation:ct-slideL .6s ease-in-out}
.ct-ico.ct-play.lucide-rocket{animation:ct-launch .7s ease-in-out}
@keyframes ct-redraw{0%{stroke-dasharray:1;stroke-dashoffset:1}100%{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes ct-wobble{0%,100%{transform:none}35%{transform:rotate(-12deg)}70%{transform:rotate(8deg)}}
@keyframes ct-lift1{50%{transform:translateY(-1.5px)}}
@keyframes ct-lift2{50%{transform:translateY(-3px)}}
@keyframes ct-bar{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}}
@keyframes ct-turn{to{transform:rotate(180deg)}}
@keyframes ct-slideL{50%{transform:translateX(-4px)}}
@keyframes ct-slideR{50%{transform:translateX(4px)}}
@keyframes ct-shackle{50%{transform:translateY(-2px)}}
@keyframes ct-swirl{0%,100%{transform:none}25%{transform:rotate(-12deg)}60%{transform:rotate(9deg)}85%{transform:rotate(-3deg)}}
@keyframes ct-spin-half{0%{transform:none}100%{transform:rotate(360deg)}}
@keyframes ct-pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15);opacity:1}100%{transform:none}}
@keyframes ct-shake{0%,100%{transform:none}20%{transform:translateY(-3px) rotate(-4deg)}40%{transform:translateY(2px)}60%{transform:translateY(-2px) rotate(3deg)}80%{transform:translateY(1px)}}
@keyframes ct-bounce{0%,100%{transform:none}40%{transform:scale(1.18)}70%{transform:scale(.95)}}
@keyframes ct-swipe{0%,100%{transform:none}40%{transform:rotate(-16deg)}70%{transform:rotate(8deg)}}
@keyframes ct-launch{0%,100%{transform:none}45%{transform:translate(3px,-4px)}60%{transform:translate(3px,-4px)}}
@media(prefers-reduced-motion:reduce){.ct-ico,.ct-ico *{animation:none !important}#projects .biotech-world,#projects:before{transition:none !important}}

html.ct-motion .ct-fade{opacity:0;transition:opacity .5s ease-out var(--ct-d,0s)}
html.ct-motion .ct-fade.ct-in{opacity:1}
.ct-measure .case-panel{transition:none !important}
#projects .projects-heading{top:calc(var(--sp-section) * .6) !important}
.ct-contact .section-mark{margin-bottom:var(--sp-mark)}
.ct-contact .section-eyebrow{margin:0 0 8px;line-height:1.5}
.ct-contact h2{margin-bottom:var(--sp-h2p)}

/* ===================== Round 2 ===================== */
/* R2-3. one side margin for every section (hero and official footer excluded) */
:root{--sp-side:5.5vw}
.medical-site .values-section,.medical-site .services-section,.medical-site .faq-section,.ct-contact{padding-left:var(--sp-side) !important;padding-right:var(--sp-side) !important}
.medical-site .essentials-top{padding-left:var(--sp-side) !important;padding-right:var(--sp-side) !important}
.medical-site .essentials-track{padding-left:var(--sp-side) !important;padding-right:var(--sp-side) !important;scroll-padding-left:var(--sp-side) !important}
.medical-site .essentials-track:after{flex:0 0 max(1px,calc(var(--sp-side) - var(--sp-card))) !important}
#projects .projects-heading{left:var(--sp-side) !important;max-width:calc(100% - var(--sp-side) * 2) !important}
/* R2-1. wireframe frame always fills its box; the card row leaves room for hover lift + shadow */
.medical-site .browser-illustration>svg.ct-frame{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;margin:0 !important}
.medical-site .essentials-track{padding-top:20px !important;margin-top:calc(var(--sp-head) - 20px) !important;padding-bottom:48px !important;margin-bottom:-28px !important}
/* R2-4. contact heading centred; contact + footer live inside .medical-site under the header */
.ct-contact .section-mark{margin-left:auto;margin-right:auto}
.ct-contact{z-index:3}
.ct-footer{z-index:3}
/* R2-7. checkmark aligns with the first line */
.medical-site .value-card li{align-items:flex-start !important}
.medical-site .value-card li svg{margin-top:calc((1.7em - 17px) / 2)}
/* R2-9. projects background at least one screen tall (inner layout unchanged) */
#projects .biotech-world{min-height:100svh !important}

/* ===================== Round 3 ===================== */
/* R3-1. essentials cards: 16:9 wireframe, more breathing room */
:root{--ess-pad:24px;--ess-gap:24px}
@media(min-width:768px){:root{--ess-pad:28px;--ess-gap:28px}}
@media(min-width:1280px){:root{--ess-pad:32px;--ess-gap:32px}}
.medical-site .essential-card{padding:var(--ess-pad) !important;min-height:0 !important}
.medical-site .browser-illustration{height:auto !important;aspect-ratio:16/9;margin:12px 0 var(--ess-gap) !important}
/* R3-2. projects flows normally after essentials (no sticky overlay, no hold, no full-screen min height) */
.medical-site .case-transition .essentials-section{position:relative !important;top:0 !important;padding-bottom:calc(var(--sp-section) * .4) !important}
.medical-site .case-transition .projects-section{margin-top:0 !important;box-shadow:none !important}
#projects .biotech-world{min-height:0 !important}
/* R3-4. arrows travel with the background edge so they are never clipped */
#projects .arrow-button{transition:left 1s cubic-bezier(.16,1,.3,1),right 1s cubic-bezier(.16,1,.3,1),background .2s,color .2s !important}
#projects .arrow-button:first-child{left:calc(4% + 12px) !important}
#projects .arrow-button:last-child{right:calc(4% + 12px) !important}
#projects.ct-open .arrow-button:first-child{left:2.5vw !important}
#projects.ct-open .arrow-button:last-child{right:2.5vw !important}
@media(max-width:767px){
 #projects .arrow-button:first-child{left:calc(4% + 8px) !important}
 #projects .arrow-button:last-child{right:calc(4% + 8px) !important}
 #projects.ct-open .arrow-button:first-child{left:3vw !important}
 #projects.ct-open .arrow-button:last-child{right:3vw !important}
}

/* R3-6. corners flatten to 0 as the background opens to full width (same 1s curve) */
#projects.ct-open .biotech-world{clip-path:inset(0 0 round 0px) !important}

/* ===================== Round 4: hero intro + parallax ===================== */
.medical-site .medical-hero{overflow:hidden}
.medical-site .medical-hero:before{transform:scale(var(--bgs,1))}
.medical-site .molecule-stage{transform:translate3d(calc(var(--mx,0) * -16px),calc(var(--my,0) * -16px),0) scale(var(--ct-ball-s,1))}
.medical-hero h1 .ct-ch{display:inline-block}
.hero-lead .ct-line{display:block;clip-path:inset(-40% -10% 0 -10%)}
.hero-lead .ct-line-in{display:inline-block}
/* initial state (before the timeline starts) */
html.ct-intro:not(.ct-split) .medical-hero h1,html.ct-intro:not(.ct-split) .hero-lead{opacity:0}
html.ct-intro .medical-hero:before{--bgs:1.06}
html.ct-intro .medical-hero h1{clip-path:inset(-40% -5% 0 -5%)}
html.ct-intro .medical-hero h1 .ct-ch{transform:translateY(105%)}
html.ct-intro .hero-lead .ct-line-in{transform:translateY(105%)}
html.ct-intro .hero-sub{opacity:0;transform:translateY(16px)}
html.ct-intro .scroll-invitation{opacity:0}
html.ct-intro .molecule-stage{opacity:0;--ct-ball-s:.92}
/* timeline (desktop; mobile is ~25% faster) */
html.ct-intro{--k:1;--st:30ms}
html.ct-intro.ct-intro-m{--k:.75;--st:22ms}
html.ct-go .medical-hero:before{--bgs:1;transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
html.ct-go .medical-hero h1 .ct-ch{transform:none;transition:transform .8s cubic-bezier(.16,1,.3,1) calc(.15s * var(--k) + var(--i) * var(--st))}
html.ct-go .molecule-stage{opacity:1;--ct-ball-s:1;transition:transform 1.2s cubic-bezier(.16,1,.3,1) calc(.6s * var(--k)),opacity 1.2s ease-out calc(.6s * var(--k))}
html.ct-go .hero-lead .ct-line-in{transform:none;transition:transform .8s cubic-bezier(.16,1,.3,1) calc((.9s + var(--j) * .12s) * var(--k))}
html.ct-go .hero-sub{opacity:1;transform:none;transition:opacity .7s ease-out calc(1.3s * var(--k)),transform .7s cubic-bezier(.16,1,.3,1) calc(1.3s * var(--k))}
html.ct-go .scroll-invitation{opacity:1;transition:opacity .6s ease-out calc(1.6s * var(--k))}
@media(prefers-reduced-motion:reduce){.medical-site .medical-hero:before,.medical-site .medical-hero h1,.medical-site .molecule-stage{transform:none !important}}

/* Safari scrollbar fix — scrollbar-width:none 只對 Firefox 有效 */
.medical-site .essentials-track::-webkit-scrollbar { display: none; }