:root {
  /* Exact approved logo colors, with supporting surfaces and readable text. */
  --brand-primary: #3F6B42;
  --brand-secondary: #B9CA98;
  --brand-lettering: #FFFFFF;
  --brand-dark: #29472D;
  --brand-hover: #345A38;
  --paper: #FAF8F2;
  --white: #FFFEFB;
  --ink: #26372B;
  --muted: #566352;
  --green: var(--brand-primary);
  --sage: #E8EEDC;
  --soft: #F0F3E9;
  --line: #D8DFCE;
  --accent: var(--brand-secondary);
  --line-strong: #A7B792;
  --inverse-muted: #E2EAD7;
  --radius: 20px;
  --control-radius: 12px;
  --width: 1180px;
  --space: clamp(3.5rem, 7vw, 6rem);
  --shadow: 0 10px 28px #29472D0D;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;font-size:16px;line-height:1.65}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,"Noto Serif TC","Songti TC",serif;font-weight:400;line-height:1.12;letter-spacing:-.035em;text-wrap:balance}h1{font-size:clamp(2.7rem,5.4vw,4.9rem);margin-bottom:1.3rem}h2{font-size:clamp(2rem,3.6vw,3.2rem);margin-bottom:1.4rem}h3{font-size:1.2rem;line-height:1.4}p{color:var(--muted);margin-bottom:1.2rem}em{font-weight:400;color:var(--brand-primary)}a{color:inherit;text-underline-offset:5px}button{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}a,button{touch-action:manipulation}img{display:block;max-width:100%;height:auto}button{cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--brand-primary);outline-offset:5px}[hidden]{display:none!important}.container{width:min(var(--width),calc(100% - 36px));margin-inline:auto}.section{padding-block:var(--space)}.eyebrow{font-size:.7rem;letter-spacing:.13em;font-weight:700;color:var(--green);line-height:1.8;margin-bottom:1.2rem}.lead{font-size:1.2rem;line-height:1.65;color:var(--ink)}.small{font-size:.85rem}.text-link{display:inline-flex;gap:1rem;align-items:center;min-height:44px;font-size:.88rem;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding-block:8px}.text-link:hover{color:var(--brand-primary)}.button{display:inline-flex;justify-content:center;align-items:center;gap:1.5rem;min-height:48px;padding:13px 22px;background:var(--green);color:var(--white);border:1px solid var(--green);border-radius:var(--control-radius);font-weight:600;font-size:.88rem;text-decoration:none;line-height:1.5;text-align:center;transition:background-color .18s, border-color .18s, box-shadow .18s}.button:hover{background:var(--brand-hover);box-shadow:0 3px 10px #29472D12}.button-outline{background:var(--soft);color:var(--green)}.button-outline:hover{background:var(--sage)}.button-light{background:var(--paper);color:var(--green);border-color:var(--paper)}.button-light:hover{background:var(--sage);border-color:var(--sage)}.button-small{padding:9px 16px}.button-row{display:flex;flex-wrap:wrap;gap:20px;align-items:center}.status-dot{display:inline-block;width:7px;height:7px;background:var(--brand-primary);border-radius:50%;margin-right:7px}.skip-link{position:fixed;top:-100px;left:16px;background:var(--green);color:white;padding:12px;z-index:99}.skip-link:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.site-header{border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:10}.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}.brand{text-decoration:none;display:flex;align-items:center;gap:12px}.menu-toggle{border:1px solid var(--line);background:var(--white);padding:10px 12px;min-height:44px;border-radius:var(--control-radius);color:var(--green)}.menu-toggle span{margin-left:10px}#navigation{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;width:100%}#navigation a{font-size:.8rem;text-decoration:none;min-height:44px;display:flex;align-items:center}#navigation a:hover{text-decoration:underline;text-decoration-color:var(--brand-primary)}#navigation.enhanced{display:none}#navigation.is-open{display:flex;flex-direction:column;align-items:stretch;padding-block:8px}#navigation.is-open a{padding:10px 12px}.hero{padding-top:38px;padding-bottom:40px}.hero .eyebrow{font-size:.63rem}.hero-copy p{font-size:1rem}.hero-copy{max-width:460px}.work-section{padding-block:20px 42px}.work-heading{display:flex;gap:15px;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap}.work-heading h2{font-family:Arial,"PingFang TC",sans-serif;font-size:1.12rem;letter-spacing:0;margin:0;font-weight:600}.project{transition:border-color .18s, box-shadow .18s;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.project-visual{display:block;background:var(--soft);padding:18px;text-decoration:none}.project-topline{display:flex;justify-content:space-between;gap:12px;font-size:.56rem;letter-spacing:.1em;color:var(--muted);flex-wrap:wrap}.project-visual img{border-radius:var(--control-radius);width:100%;max-height:430px;object-fit:contain;margin:10px auto}.project-visit{display:flex;justify-content:space-between;font-size:.75rem;color:var(--green)}.project:focus-within{border-color:var(--brand-primary)}.project-info{padding:25px}.project-info h3{font-family:Georgia,"Noto Serif TC",serif;font-size:2rem;font-weight:400;margin-bottom:10px}.project-info p{max-width:590px}.project-info .eyebrow{font-size:.65rem;margin-bottom:8px}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.tags span{background:var(--soft);border:1px solid var(--line);padding:3px 10px;border-radius:20px;font-size:.7rem;color:var(--muted)}.feature-list{border-top:1px solid var(--line);margin-block:25px}.feature-list span{display:block;border-bottom:1px solid var(--line);padding:13px 0;font-size:.9rem}.feature-list > span:before{content:"";margin-right:16px;color:var(--brand-primary);transform:rotate(-45deg)}.process-section{background:var(--soft);border-block:1px solid var(--line)}.section-heading{margin-bottom:35px}.section-heading>p{max-width:380px}.process-grid{display:grid;gap:28px;list-style:none;padding:0;margin:0}.step-number{display:block;font-family:Georgia,serif;font-size:1.6rem;color:var(--brand-primary);border-bottom:1px solid var(--line);margin-bottom:17px;padding-bottom:10px}.process-grid h3{font-size:1.05rem;margin-bottom:8px}.process-grid p{font-size:.9rem;margin:0}.pricing-grid{display:grid;gap:18px}.price-card{box-shadow:var(--shadow);border:1px solid var(--line);background:var(--white);padding:27px 22px;border-radius:var(--radius);display:flex;flex-direction:column}.plan-label{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:25px}.plan-label h3{margin:0;font-size:1.25rem}.plan-label span{background:var(--soft);font-size:.58rem;letter-spacing:.1em;border:1px solid var(--line);border-radius:20px;padding:4px 8px}.price{font-family:Georgia,serif;color:var(--ink);font-size:2.5rem;letter-spacing:-.04em;line-height:1.2;margin-bottom:15px}.price.quote{font-size:2.05rem}.price-card>p:not(.price){font-size:.9rem;min-height:3rem}.check-list{list-style:none;padding:0;margin:10px 0 25px;flex:1}.check-list li{font-size:.86rem;padding:8px 0 8px 23px;position:relative;line-height:1.5}.check-list li:before{content:'✓';position:absolute;left:0;color:var(--brand-primary)}.price-card details{margin-bottom:22px;font-size:.82rem}.premium{background:var(--green);color:var(--paper);border-color:var(--green)}.premium p,.premium .price{color:var(--paper)}.premium :focus-visible,.final-cta :focus-visible{outline-color:var(--brand-secondary)}.premium .plan-label span{background:transparent}.premium .check-list li:before{color:var(--accent)}.premium details,.premium .plan-label span{border-color:var(--brand-secondary)}.premium .details-body p{color:var(--inverse-muted)}.pricing-note{text-align:center;font-size:.85rem;margin:22px 0 30px}.policy-grid{display:grid;gap:10px}details{border-bottom:1px solid var(--line)}summary{cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:18px 0;font-weight:600;list-style:none;min-height:48px;line-height:1.5}summary::-webkit-details-marker{display:none}summary:after{content:'+';flex:none;font-size:1.2rem;font-weight:400}details[open]>summary:after{content:'−'}.details-body{padding:0 0 12px}.details-body p{font-size:.9rem}.nfc-section{background:var(--sage);padding-block:var(--space)}.nfc-grid{display:grid;gap:30px}.tap-illustration{min-height:285px;position:relative;max-width:470px;width:100%;margin:auto}.nfc-card{width:57%;height:145px;background:var(--brand-dark);color:var(--paper);border-radius:16px;position:absolute;top:75px;left:0;padding:20px;transform:rotate(-9deg);box-shadow:0 18px 26px #29472D14;z-index:2;display:flex;flex-direction:column;justify-content:space-between}.nfc-card>span:first-child{font:2rem Georgia,serif}.nfc-card>span:nth-child(2){font-size:.48rem;letter-spacing:.12em}.tap-symbol{position:absolute;right:18px;top:45px;font-size:1.6rem;color:var(--accent)}.phone{width:46%;height:280px;border:6px solid var(--brand-dark);background:var(--paper);border-radius:27px;position:absolute;right:4%;top:0;text-align:center;padding:15px 12px;display:flex;align-items:center;flex-direction:column;gap:10px;box-shadow:var(--shadow)}.phone-speaker{height:4px;background:var(--brand-dark);width:35px;border-radius:16px}.phone-avatar{margin-top:10px;background:var(--brand-secondary);border-radius:50%;width:50px;height:50px;display:grid;place-items:center;font-size:.7rem}.phone strong{font:1.25rem Georgia,serif;line-height:1.15}.phone>span:not(.phone-speaker):not(.phone-avatar){font-size:.6rem}.phone-contact{font-size:.6rem;color:white;background:var(--green);padding:8px 10px;border-radius:8px;margin-top:10px}.tap-steps{list-style:none;padding:20px 0 0;margin:0;display:grid;gap:14px;border-top:1px solid var(--line-strong)}.tap-steps li{font-size:.9rem}.tap-steps span{color:var(--brand-primary);font-size:.7rem;margin-right:12px}.benefits{display:grid;gap:10px;margin-top:28px}.benefits h3{font-size:1rem;margin-bottom:5px}.benefits p{font-size:.88rem}.addons-section{padding-block:55px;background:var(--soft)}.addons{margin:0}.addons>div{border-top:1px solid var(--line);padding:20px 0;display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between}.addons dt{font-size:.95rem}.addons dd{margin:0;font-weight:600}.addons dd span{font-size:.75rem;font-weight:400;color:var(--muted)}.faq-layout{display:grid;gap:25px}.faq-layout summary{font-size:.95rem}.final-cta{text-align:center;background:var(--brand-dark);padding-block:60px;color:var(--paper)}.final-cta .eyebrow{color:var(--accent)}.final-cta h2{font-size:clamp(2.3rem,4.5vw,4rem)}.final-cta p:last-child{font-size:.8rem;color:var(--inverse-muted);margin:20px 0 0}.site-footer{padding-top:48px;background:var(--soft)}.footer-grid{display:grid;gap:30px;padding-bottom:40px}.footer-brand{font:1.5rem Georgia,serif;text-decoration:none}.footer-grid p{font-size:.84rem;margin-top:12px}.footer-grid nav{display:flex;flex-direction:column;gap:5px}.footer-grid a{font-size:.85rem;min-height:44px;display:inline-flex;align-items:center}.footer-grid .footer-brand{font-size:1.5rem}.footer-grid .footer-contact{font-size:1rem}.footer-bottom{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-block:20px;color:var(--muted);font-size:.7rem}.page-intro{padding-block:50px 35px}.page-intro .lead{max-width:680px}.portfolio-note{text-align:center;padding-top:35px;font-size:.9rem}.notice{background:var(--sage);border-left:3px solid var(--brand-primary);padding:18px;font-size:.88rem}.prose{max-width:760px;padding-top:10px}.prose h2{font-size:1.7rem;margin-top:35px}.prose p{overflow-wrap:anywhere}
@media(min-width:600px){.container{width:min(var(--width),calc(100% - 64px))}.process-grid{grid-template-columns:repeat(2,1fr)}.project-visual{padding:24px 38px}.project-topline{font-size:.65rem}.project-info{padding:30px 38px}.tap-steps{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.policy-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}}
@media(min-width:900px){.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}.hero{padding-block:48px 32px}.hero h1{margin-bottom:0}.hero-copy p{font-size:1rem}.hero .eyebrow{font-size:.68rem}.intro-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:85px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:50px}.section-heading h2{margin-bottom:0}.section-heading>p{margin-bottom:0}.process-grid{grid-template-columns:repeat(3,1fr);gap:32px 45px}.pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.price-card{padding:28px 24px}.project-info{display:flex;justify-content:space-between;align-items:center;gap:45px}.project-info>.text-link{flex:none}.tags{margin-bottom:0}.nfc-grid{grid-template-columns:1fr 1fr;gap:35px 65px;align-items:center}.tap-illustration{min-height:330px}.phone{height:320px;width:43%;right:8%;padding-top:20px}.nfc-card{height:170px;top:90px}.phone-avatar{width:65px;height:65px;margin-top:20px}.phone strong{font-size:1.6rem}.phone-contact{margin-top:18px}.tap-steps{grid-column:1/-1}.faq-layout{grid-template-columns:.8fr 1.2fr;gap:80px}.footer-grid{grid-template-columns:1.2fr .8fr 1fr;gap:45px}.page-intro{padding-block:65px 40px}}
@media(min-width:1100px){.menu-toggle{display:none!important}#navigation.enhanced,#navigation.is-open,#navigation{display:flex;width:auto;flex-direction:row;gap:18px;padding:0}#navigation.is-open a{padding:0}#navigation .button{padding:9px 16px}.header-inner{flex-wrap:nowrap}.brand{margin-right:20px}.hero-grid{gap:80px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Fillout owns the questionnaire UI. These styles only frame the embed. */
.onboarding-intro .lead { max-width: 780px; }
.onboarding-intro > p:last-of-type { margin-bottom: 0; }
.onboarding-content { padding-bottom: var(--space); }
.onboarding-preparation { margin-bottom: 28px; }
.onboarding-preparation summary { justify-content: flex-start; }
.onboarding-checklist { margin: 0; padding-left: 22px; font-size: .9rem; }
.onboarding-checklist li { padding-block: 4px; }
.onboarding-questionnaire, .fillout-embed { min-width: 0; }
.fillout-embed { width: 100%; overflow-wrap: anywhere; }
/* Preserve the height supplied by Fillout; do not clamp a long form. */
.fillout-embed iframe { display: block; width: 100%; max-width: 100%; border: 0; }
.fillout-placeholder {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 28px 18px;
  text-align: center;
  background: var(--sage);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.fillout-placeholder h3 { font: 400 clamp(1.5rem, 3vw, 2rem)/1.3 Georgia, "Noto Serif TC", "Songti TC", serif; }
.fillout-placeholder p { max-width: 490px; }
.fillout-placeholder p:last-child { margin-bottom: 0; }
.onboarding-help { max-width: 760px; margin: 28px auto 0; }
.onboarding-help p { font-size: .9rem; }
.onboarding-help .small { font-size: .85rem; }
@media (min-width: 600px) {
  .fillout-placeholder { min-height: 520px; padding: 40px; }
}

/* Intrinsic HTML dimensions reserve the vector logo’s aspect ratio. */
.brand-logo { width: auto; height: 48px; flex: none; }
.footer-logo { width: auto; height: 80px; }

.brand-caption {
  color: var(--brand-primary);
  max-width: 65px;
  font-size: .6rem;
  line-height: 1.5;
  letter-spacing: .13em;
}

/* A tiny SVG mask gives arrows a deterministic shape and inherited text color. */
.ui-arrow, .feature-list > span:before {
  display: inline-block;
  width: .95em;
  height: .95em;
  flex: none;
  vertical-align: -.1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ui-arrow-up-right { transform: rotate(-45deg); }
.ui-arrow-down { transform: rotate(90deg); }

/* Anchor sections at their content, rather than the outer section padding. */
.section[id] { scroll-margin-top: calc(0px - var(--space)); }

/* Taiwan Traditional Chinese: system fonts, natural tracking and CJK spacing. */
html:lang(zh-Hant-TW) body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  line-height: 1.85;
  line-break: strict;
}
html:lang(zh-Hant-TW) h1,
html:lang(zh-Hant-TW) h2,
html:lang(zh-Hant-TW) .project-info h3,
html:lang(zh-Hant-TW) .fillout-placeholder h3 {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  letter-spacing: 0;
  line-height: 1.4;
}
html:lang(zh-Hant-TW) h1 { font-size: clamp(2rem, 4.6vw, 4rem); }
html:lang(zh-Hant-TW) h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
html:lang(zh-Hant-TW) em { font-style: normal; }
html:lang(zh-Hant-TW) .eyebrow { font-size: .78rem; letter-spacing: .04em; }
html:lang(zh-Hant-TW) .project-topline,
html:lang(zh-Hant-TW) .plan-label span { letter-spacing: .04em; }
html:lang(zh-Hant-TW) #navigation a { font-size: .88rem; }
html:lang(zh-Hant-TW) .check-list li { line-height: 1.75; }
html:lang(zh-Hant-TW) summary { line-height: 1.65; }

/* Reference contact controls, adapted to J&O's surfaces and rounded buttons. */
.line-button {
  background: #06c755;
  border-color: #06c755;
  color: #fff;
  gap: 11px;
  padding: 10px 18px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.8;
  white-space: nowrap;
  transition: background .15s;
}
.line-logo { width: 26px; height: auto; flex: none; }
@media (hover: hover) {
  .line-button:hover { background: #06bc50; border-color: #06bc50; box-shadow: none; }
}
.line-button:active { background: #05ae49; border-color: #05ae49; }
.line-button:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 5px; }
.final-cta .line-button:focus-visible { outline-color: #fff; }
.final-cta .line-help { margin-top: 28px; }
.final-cta .line-help p { color: var(--inverse-muted); font-size: .9rem; margin: 0 0 16px; }
.line-contact { max-width: 100%; overflow-wrap: anywhere; }
.final-cta > .container > p:last-of-type { font-size: .8rem; color: var(--inverse-muted); margin: 20px 0 0; }
.mobile-contact { display: none; }
@media (max-width: 699px) {
  html { scroll-padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }
  .site-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .mobile-contact {
    position: fixed;
    z-index: 5;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 10px;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: #faf8f2f5;
    border-top: 1px solid var(--line);
    box-shadow: 0 -3px 20px #29472D0A;
  }
  .mobile-contact .button {
    min-width: 0;
    min-height: 45px;
    padding: 10px 8px;
    gap: 11px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.8;
    white-space: nowrap;
    box-shadow: none;
  }
  /* The questionnaire is unobstructed even when JavaScript is unavailable. */
  .contact-form-page { display: none; }
  .contact-form-page.is-available { display: grid; }
  body:has(#navigation.is-open) .mobile-contact { display: none; }
}

@media (max-width: 359px) {
  .mobile-contact .button { font-size: 15px; gap: 7px; padding-inline: 4px; }
}