@font-face{font-family:'General Sans';src:url('/assets/general-sans-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/webcraft-tc-0.ttf') format('truetype');
}
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/webcraft-tc-1.ttf') format('truetype');
}

:root{--bg:#f5f6f3;--ink:#182026;--accent:#2455c3;--muted:#536069;--surface:#e9ede9;--blue-light:#e2eafb;--ease-reveal:cubic-bezier(.22,1,.36,1);--ease-ui:cubic-bezier(.23,1,.32,1);--frame:64px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.8 'General Sans','Noto Sans TC',sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:500;text-wrap:balance}p{text-wrap:pretty}h1{font-size:60px;line-height:1.3;letter-spacing:-.045em}h2{font-size:36px;line-height:1.4;letter-spacing:-.035em}h3{font-size:24px;line-height:1.5;letter-spacing:-.02em}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit;color:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:manipulation}img{max-width:100%;display:block;height:auto}:focus-visible{outline:3px solid var(--accent);outline-offset:5px}::selection{background:#c7d9ff;color:#101e35}[hidden]{display:none!important}.wrap{width:calc(100% - var(--frame)*2);max-width:1440px;margin-inline:auto}.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}.skip{position:fixed;top:8px;left:16px;background:var(--ink);color:white;padding:12px 24px;transform:translateY(-180%);z-index:200}.skip:focus{transform:none}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:24px}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand-symbol{width:48px;height:48px;color:var(--accent)}.brand-copy{display:flex;flex-direction:column;line-height:1.2}.brand-copy strong{font-size:24px;letter-spacing:.02em;font-weight:500}.brand-copy>span{font-size:14px;color:var(--muted);margin-top:4px}.site-header nav{display:flex;align-items:center;gap:32px;font-size:16px}.site-header nav>a:not(.button){position:relative;padding-block:8px}.site-header nav>a[aria-current]{color:var(--accent)}.site-header nav>a[aria-current]::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:currentColor}.menu-toggle{display:none}.button,.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;font-size:16px;line-height:1.5;font-weight:500}.button{background:var(--accent);color:white;padding:16px 24px;border:0;border-radius:4px;min-height:56px;transition:background-color 300ms var(--ease-ui),transform 200ms var(--ease-ui)}.site-header .button{padding:12px 16px;min-height:48px;font-size:14px}.text-link{padding-block:8px}.link-arrow{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;transition:transform 300ms var(--ease-ui)}.link-arrow svg{width:100%;height:100%}.button:active{transform:scale(.98)}
.craft-hero{padding-top:64px;padding-bottom:96px}.hero-top{display:grid;grid-template-columns:1.15fr 1fr;align-items:end;gap:80px}.hero-top h1{font-size:48px;line-height:1.4;letter-spacing:-.035em}.hero-description{max-width:480px;justify-self:end}.hero-description>div{margin-top:24px}.craft-word{display:flex;justify-content:space-between;gap:24px;font-size:clamp(96px,17.4vw,260px);letter-spacing:-.075em;line-height:.95;padding-block:48px 32px;color:var(--accent);white-space:nowrap}.craft-word>span{display:block}.hero-gallery{padding:24px 32px 32px;background:#e7eae5;border-radius:8px}.hero-switches{display:flex;gap:24px;margin-bottom:32px}.hero-switches button{border:0;background:transparent;font-size:16px;padding:8px 0;color:var(--muted);position:relative}.hero-switches [aria-pressed=true]{color:var(--ink)}.hero-switches [aria-pressed=true]::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--ink)}.hero-panel{position:relative;padding-right:80px}.hero-desktop{display:block;width:90%;overflow:hidden;border-radius:4px}.hero-desktop img{width:100%;aspect-ratio:1.7;object-fit:cover;object-position:top}.hero-phone{position:absolute;width:20%;right:24px;top:32px;border:8px solid var(--ink);border-radius:24px;overflow:hidden;background:var(--ink);transform:rotate(4deg)}.hero-phone img{width:100%;aspect-ratio:390/780;object-fit:cover;object-position:top}.hero-caption{display:flex;justify-content:space-between;gap:24px;margin-top:24px;font-size:16px}.hero-caption>a{flex-shrink:0}.hero-caption>span{color:var(--muted)}
.craft-belief{background:var(--ink);color:white;padding-block:96px}.craft-belief>.wrap{display:grid;grid-template-columns:1fr 1fr;gap:96px}.craft-belief h2{font-size:48px}.statement{font-size:30px;line-height:1.65;letter-spacing:-.02em}.craft-belief .statement{font-size:24px}.craft-belief p+p{margin-top:24px}.craft-belief .text-link{margin-top:24px;color:#b7cdfb}.section-top{display:flex;align-items:end;justify-content:space-between;gap:64px;margin-bottom:48px}.section-top>p{max-width:480px;color:var(--muted)}.selected{padding-block:96px}.craft-work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px 40px;align-items:start}.craft-work:nth-child(2){margin-top:160px}.craft-work:nth-child(3){grid-column:1/-1;width:75%;margin-top:-32px}.craft-work-image{display:block;position:relative;overflow:hidden;border-radius:4px}.craft-work-image img{width:100%;aspect-ratio:1.15;object-fit:cover;transition:transform 900ms var(--ease-reveal)}.craft-work:nth-child(3) .craft-work-image img{aspect-ratio:1.7}.work-open{position:absolute;right:24px;bottom:24px;display:grid;place-items:center;width:56px;height:56px;background:var(--bg);border-radius:50%;transition:transform 300ms var(--ease-ui)}.work-caption{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-top:24px}.work-caption>span{font-size:14px;color:var(--muted)}.craft-work>p{margin-top:8px}.project-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:16px}.functional-work{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding:32px;background:var(--surface);margin-top:80px;border-radius:4px}.functional-work>a{overflow:hidden}.functional-work img{width:100%;aspect-ratio:1.6;object-fit:cover;object-position:top}.functional-work p{margin-top:16px;max-width:480px}.functional-work .text-link{margin-top:16px}
.home-services{padding-block:32px 96px}.service-comparison{display:grid;grid-template-columns:1fr 1fr;gap:40px}.service-option{display:block}.service-option h3{display:flex;align-items:center;justify-content:space-between;margin-top:24px}.service-option p{margin-top:16px;max-width:520px}.service-option>.text-link{margin-top:16px;color:var(--muted)}.service-preview{height:240px;background:var(--blue-light);position:relative;overflow:hidden;border-radius:4px}.service-preview span,.service-preview i,.service-preview b,.service-preview em{display:block;position:absolute;border-radius:4px;transition:transform 700ms var(--ease-reveal)}.preview-one span{width:48%;height:220px;background:var(--bg);left:26%;top:40px}.preview-one i{width:32%;height:80px;left:34%;top:64px;background:var(--accent)}.preview-one b{width:32%;height:8px;left:34%;top:168px;background:#bbc7dd}.preview-one em{width:24%;height:8px;left:34%;top:192px;background:#bbc7dd}.preview-multi{background:var(--surface)}.preview-multi span{width:40%;height:160px;left:10%;top:64px;background:#c9d2c8;transform:rotate(-8deg)}.preview-multi i{width:40%;height:160px;left:30%;top:40px;background:var(--accent);transform:rotate(4deg)}.preview-multi b{width:40%;height:160px;left:50%;top:80px;background:var(--bg);transform:rotate(12deg)}.home-process{padding-block:80px;background:var(--blue-light)}.process-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;list-style:none;margin:0;padding:0}.process-preview li{padding-top:24px}.process-preview li::before{content:'';display:block;width:24px;height:8px;border-radius:4px;background:var(--accent);margin-bottom:24px}.process-preview p{margin-top:16px;font-size:16px}.cta{padding-block:96px;display:flex;align-items:center;justify-content:space-between;gap:64px}.cta p{max-width:560px;margin-top:24px}.cta>.button{flex-shrink:0}.footer{background:var(--ink);color:var(--bg);padding-block:64px 24px;overflow:hidden}.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:48px;align-items:start}.footer-name{display:flex;align-items:center;gap:16px;font-size:30px}.footer-name .brand-symbol{color:#b8ceff}.footer-top nav{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;font-size:16px}.footer-word{font-size:clamp(80px,17vw,240px);line-height:1;letter-spacing:-.06em;margin-block:64px 48px;white-space:nowrap;color:#b8ceff}.footer-bottom{display:flex;justify-content:space-between;gap:24px;font-size:14px;color:#c4cbd0}
.page-intro{padding-block:80px 64px;display:grid;grid-template-columns:1.15fr 1fr;align-items:end;gap:80px}.page-intro>p{max-width:480px;color:var(--muted);justify-self:end}.work-list{padding-block:16px 32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px 40px;align-items:start}.project:nth-child(even){margin-top:120px}.project-visual{background:var(--surface);padding:24px;border-radius:4px}.project:nth-child(2) .project-visual{background:var(--blue-light)}.project:nth-child(3) .project-visual{background:#e7d9dc}.device-controls{display:flex;gap:8px;margin-bottom:24px}.device-controls button{background:transparent;border:0;border-radius:4px;display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:14px}.device-controls button svg{width:20px;height:20px}.device-controls [aria-pressed=true]{background:var(--ink);color:white}.project-screen{min-height:240px;display:flex;align-items:start;justify-content:center}.project-screen>a{width:100%;display:flex;justify-content:center}.desktop-shot{aspect-ratio:1.4;object-fit:cover;object-position:top;width:100%}.mobile-shot{height:340px;width:auto;max-width:100%;object-fit:contain;object-position:top}.project-fragments{display:none}.project-info{padding-top:24px}.project-type{font-size:14px;color:var(--muted);margin-bottom:8px}.project-copy{font-size:20px;margin-top:16px}.project-info>p:not(.project-type){margin-top:16px}.project-info>p:not(.project-copy):not(.project-type){font-size:16px}.project-live{display:inline-flex;align-items:center;gap:16px;font-size:16px}.note,figcaption{font-size:14px;color:var(--muted);line-height:1.8}.project-info .note{font-size:14px!important}.future{padding-block:64px}.future p{max-width:680px;margin-top:24px}
.site-comparison{padding-block:16px 64px}.site-comparison table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:16px}.site-comparison th,.site-comparison td{padding:24px;text-align:left;vertical-align:top}.site-comparison thead{background:var(--ink);color:white}.site-comparison tbody tr:nth-child(odd){background:var(--surface)}.site-comparison tbody tr:nth-child(even){background:#edf0ed}.site-comparison th{font-weight:500}.site-comparison tr>:first-child{width:22%}.site-comparison .note{margin-top:24px}.service-detail,.case-story,.scope{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;padding-block:64px}.service-detail p+p,.case-story p+p{margin-top:24px}.plain-list{padding-left:24px;margin-block:24px;list-style:disc}.plain-list li{padding-block:8px}.included,.materials,.principles{background:var(--surface);padding-block:80px;margin-block:32px}.included .wrap,.materials .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:80px}.included-copy>div{margin-top:24px}.included-copy p+p{margin-top:24px}.scope>.text-link{grid-column:2;justify-self:start}.steps{padding-bottom:64px}.steps>ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:24px}.steps li{padding:40px;background:var(--surface);border-radius:4px}.steps li:nth-child(3),.steps li:nth-child(4){background:var(--blue-light)}.steps h2{font-size:30px}.steps p{margin-top:24px}.faq{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;padding-block:80px 32px}.faq>div{min-width:0}details{background:var(--surface);padding:24px;margin-bottom:12px;border-radius:4px}summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;cursor:pointer;font-size:18px}summary::-webkit-details-marker{display:none}summary span{flex-shrink:0;transition:transform 300ms var(--ease-ui)}details[open] summary span{transform:rotate(45deg)}details p{font-size:16px;margin-top:24px}.about-spread{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;padding-block:16px 64px}.about-spread p{margin-top:24px}.about-spread>a img{width:100%;aspect-ratio:.85;object-fit:cover}.principles h2{margin-bottom:48px}.principle-row{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;padding-block:24px}.principle-row p{max-width:600px}.case-links{display:flex;align-items:center;gap:32px;padding-bottom:48px;flex-wrap:wrap}.case-hero{padding-bottom:16px}.case-hero img{width:100%}.case-hero figcaption{margin-top:16px}.case-images{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;padding-block:32px}.case-images figure{min-width:0}.case-images figcaption{margin-top:16px}.case-mobile>a{background:var(--surface);padding:32px;display:flex;justify-content:center}.case-mobile img{max-height:640px;width:auto;object-fit:contain}.case-detail-image img{width:100%}.other-work{background:var(--surface);padding:32px;display:flex;justify-content:space-between;gap:32px;margin-block:32px 80px}.not-found-actions{display:flex;gap:32px;padding-bottom:96px}
.brief-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;padding-bottom:80px}#brief-form{display:grid;gap:32px}label,legend{font-size:16px}#brief-form>label,.form-pair label{display:grid;gap:12px}.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}input,select,textarea{width:100%;padding:12px 16px;background:white;border:1px solid #a1adb1;border-radius:4px;font-size:16px;line-height:1.7}textarea{resize:vertical;min-height:120px}fieldset{padding:0;margin:0;border:0}legend{margin-bottom:16px}.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px}.checks label{display:flex;gap:12px;align-items:center;min-height:44px;cursor:pointer}.checks input{width:20px;height:20px;accent-color:var(--accent);flex-shrink:0}.brief-summary{background:var(--blue-light);padding:32px;border-radius:4px;position:sticky;top:24px}.brief-summary h2{font-size:30px}.brief-summary>p:first-of-type{margin-top:12px;font-size:16px}.brief-summary #brief-output{border:0;margin-top:24px;min-height:440px;background:#f8faff}.summary-actions{display:flex;flex-wrap:wrap;gap:16px 24px;margin-top:24px}.summary-actions .text-link{border:0;background:transparent}#brief-status{min-height:24px;font-size:16px;margin-top:16px}.brief-summary .note{margin-top:24px}.brief-summary noscript p{font-size:16px;margin-top:16px}
.image-viewer-open{overflow:hidden;padding-right:var(--scrollbar-width,0px)}[data-zoom]{position:relative;display:block;cursor:zoom-in}[data-zoom]::after{content:'＋';position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:32px;height:32px;background:var(--bg);color:var(--ink);border-radius:50%;pointer-events:none;font-size:20px}.image-viewer{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;border:0;padding:24px;background:transparent;color:white;overflow:hidden}.image-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr);gap:24px}.image-viewer::backdrop{background:#101820ed}.image-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:24px}.image-viewer-bar p{font-size:16px}.image-viewer-bar button{border:0;border-radius:4px;background:var(--bg);padding:8px 16px;font-size:16px;min-height:44px;flex-shrink:0;color:var(--ink)}.image-viewer figure{min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto}.image-viewer figure img{max-height:100%;max-width:100%;object-fit:contain}
@media(hover:hover) and (pointer:fine){.button:hover{background:#163c95;transform:translateY(-2px)}.text-link:hover .link-arrow,.project-live:hover .link-arrow{transform:translate(3px,-3px)}.site-header nav>a:not(.button):hover{color:var(--accent)}.footer a:hover{color:#b8ceff}.craft-work-image:hover .work-open{transform:rotate(45deg)}.service-option:hover .preview-one span{transform:translateY(-12px)}.service-option:hover .preview-multi b{transform:translateX(8px) rotate(16deg)}}
@media(prefers-reduced-motion:no-preference){.motion-ready [data-reveal]:not(.motion-shown){opacity:0}.hero-phone{animation:phone-entrance 1400ms var(--ease-reveal) both}.hero-desktop img{animation:screen-entrance 1400ms var(--ease-reveal) both}@keyframes phone-entrance{from{opacity:0;transform:translateY(48px) rotate(8deg)}to{opacity:1;transform:translateY(0) rotate(4deg)}}@keyframes screen-entrance{from{opacity:.3;transform:translateY(32px) scale(1.04)}to{opacity:1;transform:none}}}
@supports(animation-timeline:view()){@media(prefers-reduced-motion:no-preference){.craft-work-image img{animation:work-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}@keyframes work-drift{from{transform:scale(1.08) translateY(2%)}to{transform:scale(1.02) translateY(-2%)}}}}
@media(min-width:1700px){:root{--frame:80px}}
@media(max-width:1100px){:root{--frame:40px}.site-header nav{gap:24px}.hero-top,.page-intro{gap:40px}.hero-top h1{font-size:36px}.craft-belief>.wrap{gap:48px}.craft-belief h2{font-size:36px}.craft-work:nth-child(2){margin-top:96px}.work-caption{display:block}.work-caption>span{display:block;margin-top:8px}.hero-panel{padding-right:64px}.hero-phone{right:0}.footer-top{gap:24px}.brief-layout{gap:32px}.brief-summary{padding:24px}.section-top{gap:32px}.service-detail,.case-story,.scope,.faq,.principle-row,.included .wrap,.materials .wrap,.about-spread{gap:40px}}
@media(max-width:800px){:root{--frame:24px}body{font-size:16px}.site-header{padding-block:16px;position:relative;z-index:100}.brand-symbol{width:40px;height:40px}.brand-copy strong{font-size:20px}.brand-copy>span{font-size:14px}.menu-toggle{display:flex;align-items:center;gap:16px;padding:12px 0 12px 16px;background:transparent;border:0;font-size:16px;position:relative;z-index:102}.menu-toggle span{font-size:24px;line-height:1;transition:transform 300ms var(--ease-ui)}.menu-toggle[aria-expanded=true] span{transform:rotate(180deg)}.site-header nav{position:fixed;inset:0;min-height:100dvh;display:flex;align-items:stretch;justify-content:center;flex-direction:column;gap:24px;padding:96px var(--frame);background:var(--bg);visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-24px);transition:opacity 300ms var(--ease-ui),transform 400ms var(--ease-reveal),visibility 400ms}.site-header nav.open{visibility:visible;opacity:1;pointer-events:auto;transform:none}.site-header nav>a:not(.button){font-size:30px;padding:8px 0;align-self:start}.site-header nav>a{transition:transform 500ms var(--ease-reveal),opacity 300ms var(--ease-ui);transform:translateY(24px);opacity:0}.site-header nav.open>a{transform:none;opacity:1;transition-delay:calc(var(--menu-order)*60ms)}.site-header nav .button{align-self:start;margin-top:16px;font-size:16px}.menu-open{overflow:hidden}.menu-open .brand{z-index:102}.hero-top{grid-template-columns:1fr;gap:24px}.craft-hero{padding-top:40px;padding-bottom:64px}.hero-description{max-width:560px;justify-self:start}.craft-word{padding-block:40px 24px;font-size:17vw}.hero-gallery{padding:16px 16px 24px}.hero-switches{gap:24px;margin-bottom:24px}.hero-switches button{font-size:14px}.hero-panel{padding:0}.hero-desktop{width:88%}.hero-phone{width:24%;right:0;top:24px;border-width:4px;border-radius:16px}.hero-caption{font-size:14px;margin-top:24px;align-items:start}.hero-caption .text-link{font-size:14px;padding-top:0}.hero-caption .link-arrow{width:20px;height:20px}.craft-belief{padding-block:64px}.craft-belief>.wrap{grid-template-columns:1fr;gap:32px}.craft-belief h2{font-size:36px}.craft-belief .statement{font-size:24px}.section-top{display:block;margin-bottom:32px}.section-top>p{margin-top:24px}.section-top>.text-link{margin-top:16px}h1{font-size:48px}h2{font-size:30px}.selected{padding-block:64px}.craft-work-grid{gap:48px 24px}.craft-work:nth-child(2){margin-top:80px}.craft-work:nth-child(3){margin-top:0;width:100%}.craft-work-image img{aspect-ratio:.85}.work-open{width:40px;height:40px;right:16px;bottom:16px}.craft-work>p{font-size:16px}.project-actions{gap:8px 24px}.functional-work{padding:24px;gap:24px;margin-top:48px}.functional-work p{font-size:16px}.home-services{padding-block:0 64px}.service-comparison{gap:24px}.service-preview{height:200px}.service-option p{font-size:16px}.home-process{padding-block:64px}.process-preview{grid-template-columns:1fr 1fr;gap:24px}.process-preview li{padding-top:0}.process-preview p{margin-top:12px}.process-preview li::before{margin-bottom:16px}.cta{padding-block:64px;display:block}.cta>.button{margin-top:32px}.footer{padding-top:48px}.footer-top{grid-template-columns:1fr 1fr;gap:32px}.footer-top>nav{grid-column:1/-1;grid-template-columns:repeat(4,1fr);font-size:14px}.footer-word{margin-block:48px 32px;font-size:16vw}.footer-bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:14px}.footer-bottom p:last-child{grid-column:1/-1}.page-intro{padding-block:48px;grid-template-columns:1fr;gap:24px}.page-intro>p{justify-self:start;max-width:560px}.work-list{gap:48px 24px}.project:nth-child(even){margin-top:80px}.project-visual{padding:16px}.device-controls{margin-bottom:16px}.device-controls button{padding:8px;font-size:14px;gap:4px}.project-screen{min-height:180px}.mobile-shot{height:280px}.project-copy{font-size:18px}.project-info .project-type{font-size:14px}.project-info>p:not(.project-type){font-size:16px}.project-info h2{font-size:24px}.project-live,.project-actions .text-link{font-size:14px}.service-detail,.case-story,.scope,.faq,.included .wrap,.materials .wrap,.about-spread{grid-template-columns:1fr;gap:24px;padding-block:40px}.included,.materials,.principles{padding-block:24px}.scope>.text-link{grid-column:1}.statement{font-size:24px}.site-comparison{padding-bottom:32px}.site-comparison table{font-size:14px}.site-comparison th,.site-comparison td{padding:16px}.steps>ol{gap:16px}.steps li{padding:24px}.steps h2{font-size:24px}.steps p{margin-top:16px}.faq{padding-block:48px 0}.principles h2{margin-bottom:24px}.principle-row{gap:32px;grid-template-columns:1fr 1.2fr}.about-spread>a img{aspect-ratio:1.4}.brief-layout{grid-template-columns:1fr;gap:40px;padding-bottom:64px}.brief-summary{position:static}.case-links{gap:16px;padding-bottom:32px}.case-images{gap:24px}.case-mobile>a{padding:16px}.other-work{display:block;margin-bottom:48px}.other-work .text-link{margin-top:16px}.not-found-actions{flex-wrap:wrap;gap:24px;padding-bottom:64px}}
@media(max-width:540px){.hero-top h1{font-size:30px;line-height:1.5}.craft-word{gap:12px}.hero-switches{gap:16px}.hero-caption{display:block}.hero-caption .text-link{margin-top:8px}.hero-phone{top:16px}.hero-desktop img{aspect-ratio:1.25}.craft-work-grid{grid-template-columns:1fr;gap:40px}.craft-work:nth-child(2){margin-top:0}.craft-work:nth-child(3){grid-column:1}.craft-work-image img,.craft-work:nth-child(3) .craft-work-image img{aspect-ratio:1.2}.work-caption{margin-top:16px}.work-caption>span{font-size:14px}.functional-work{grid-template-columns:1fr}.service-comparison{grid-template-columns:1fr;gap:40px}.service-option h3{margin-top:16px}.service-option p{margin-top:12px}.process-preview{gap:32px 24px}.process-preview h3{font-size:20px}.process-preview p{font-size:14px}.footer-name{font-size:24px;gap:8px}.footer-top>p{font-size:14px}.footer-top nav{grid-template-columns:1fr 1fr}.footer-word{font-size:15.8vw}.footer-bottom{grid-template-columns:1fr}.footer-bottom p:last-child{grid-column:auto}.page-intro h1{font-size:36px}.work-list{grid-template-columns:1fr}.project:nth-child(even){margin-top:0}.project-screen{min-height:240px}.desktop-shot{aspect-ratio:1.2}.mobile-shot{height:360px}.project-info .project-type{font-size:14px}.project-actions .text-link,.project-live{font-size:16px}.site-comparison table{font-size:14px}.site-comparison th,.site-comparison td{padding:12px 8px}.site-comparison tr>:first-child{width:22%}.steps>ol{grid-template-columns:1fr}.principle-row{grid-template-columns:1fr;gap:16px}.case-images{grid-template-columns:1fr}.case-mobile img{max-height:560px}.form-pair{grid-template-columns:1fr;gap:32px}.brief-summary{padding:24px 16px}.checks{gap:12px 8px}.image-viewer{padding:16px}.image-viewer-bar p{font-size:14px}.image-viewer-bar{gap:16px}.image-viewer-bar button{font-size:14px}}
.work-media{position:relative}.work-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 500ms var(--ease-reveal);pointer-events:none}.work-media.film-loaded video{opacity:1}.film-toggle{position:absolute;left:24px;bottom:24px;border:0;border-radius:4px;background:var(--bg);color:var(--ink);font-size:14px;min-height:44px;padding:8px 16px}.film-toggle:disabled{display:none}.work-open{z-index:1}.hero-caption>span{display:block}
@media(max-width:540px){.hero-caption>a{display:flex;width:fit-content}.film-toggle{left:16px;bottom:16px}}
/* Pointer feedback stays on wrappers where scroll and entrance motion use the image. */
.project-visual{transition:transform 500ms var(--ease-reveal)}
.project-screen>a{overflow:hidden;border-radius:4px}
.project-screen img,.hero-desktop img{transition:transform 600ms var(--ease-reveal)}
.craft-work-image{transition:transform 500ms var(--ease-reveal)}
.hero-switches button,.device-controls button,.film-toggle{transition:transform 200ms var(--ease-ui),background-color 200ms var(--ease-ui),color 200ms var(--ease-ui)}
[data-zoom]::after{transition:transform 250ms var(--ease-ui),background-color 250ms var(--ease-ui),color 250ms var(--ease-ui)}
@media(hover:hover) and (pointer:fine){
 .project-visual:hover{transform:translateY(-4px)}
 .project-screen>a:hover img{transform:scale(1.045)}
 .hero-desktop:hover img{transform:scale(1.025)}
 .craft-work-image:hover{transform:scale(1.02)}
 .button:hover{transform:translateY(-2px) scale(1.025)}
 .button:hover:active{transform:scale(.98)}
 .hero-switches button:hover{color:var(--accent);transform:translateY(-2px)}
 .device-controls button:not([aria-pressed=true]):hover{background:var(--blue-light);transform:translateY(-2px)}
 .film-toggle:hover{background:var(--blue-light);transform:scale(1.04)}
 [data-zoom]:hover::after{transform:scale(1.12);background:var(--accent);color:white}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important}.motion-ready [data-reveal]{opacity:1!important}.hero-phone{transform:rotate(4deg)}.craft-work-image img{transform:none}
 .project-visual:hover,.project-screen>a:hover img,.hero-desktop:hover img,.craft-work-image:hover,.button:hover,.button:hover:active,.hero-switches button:hover,.device-controls button:hover,.film-toggle:hover,[data-zoom]:hover::after{transform:none}
}

@media(max-width:800px){html:not(.js) .site-header{flex-wrap:wrap}html:not(.js) .menu-toggle{display:none}html:not(.js) .site-header nav{position:static;inset:auto;min-height:0;width:100%;padding:24px 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;visibility:visible;opacity:1;pointer-events:auto;transform:none}html:not(.js) .site-header nav>a{opacity:1;transform:none;font-size:16px}}

/* Web Craft 2.0 phase one: preserve the existing visual language. */
.hero-positioning{font-size:16px;color:var(--accent);margin-bottom:24px;letter-spacing:.06em}.hero-description>div{display:flex;flex-wrap:wrap;gap:16px 24px}.site-header nav{gap:22px}.pricing-section{padding-bottom:80px}.pricing-notice{border-block:1px solid #cbd1cd;padding:24px 0;margin-bottom:40px}.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.price-plan{padding:32px 0;border-top:2px solid var(--accent);display:flex;flex-direction:column;gap:20px}.price-plan h2{font-size:28px}.price-plan>.text-link{margin-top:auto}.plan-price{font-size:34px;line-height:1.3;white-space:nowrap}.plan-price span{font-size:16px}.pricing-pending{margin-top:48px;max-width:850px}.pricing-pending p{margin-top:20px}.pricing-pending .text-link{margin:20px 24px 0 0}.contact-pending{border-top:1px solid #cbd1cd;margin-top:24px;padding-top:24px}.contact-pending h3{font-size:20px}.service-price-entry{padding-top:24px}input,select,textarea{max-width:100%}.pricing-grid>*{min-width:0}
@media(min-width:801px) and (max-width:1100px){.site-header{gap:16px}.site-header nav{gap:14px;font-size:14px}.brand-copy strong{font-size:20px}}
@media(max-width:800px){.pricing-grid{grid-template-columns:1fr}.pricing-section{padding-bottom:48px}.price-plan{gap:16px}.hero-positioning{font-size:14px}.pricing-notice{margin-bottom:24px}.plan-price{font-size:32px}}

.text-link,.hero-switches button,.menu-toggle{min-height:44px}.price-plan .text-link{align-self:flex-start}.price-plan a:focus-visible{outline-offset:3px}

/* Keep menu links focusable as soon as the opening animation starts. */
@media(max-width:800px){.site-header nav.open{transition-property:opacity,transform}}

/* Pricing V2: retain the existing type, spacing and blue accent. */
.home-price{color:var(--accent);font-size:24px;line-height:1.5}.hero-description>.home-price-note{font-size:14px;margin:8px 0 20px;color:var(--muted)}.plan-badge{font-size:14px;color:var(--accent);font-weight:500}.price-plan{gap:16px;padding:24px;min-width:0;border:1px solid #cbd1cd;border-top:2px solid var(--accent);border-radius:6px}.plan-recommended{background:var(--blue-light);border-color:var(--accent)}.price-plan h2{font-size:26px}.plan-fee-type{font-size:14px;color:var(--muted)}.plan-list{padding-left:20px;font-size:16px;margin:0 0 12px}.plan-list li+li{margin-top:12px}.price-plan>.button,.price-plan>.text-link{margin-top:auto;align-self:flex-start}.pricing-grid{gap:24px}.pricing-compare,.pricing-block{margin-top:64px;padding-top:32px;border-top:1px solid #cbd1cd}.pricing-compare>p,.pricing-block>p{margin-top:20px}.comparison-scroll{overflow-x:auto;margin-top:24px;border:1px solid #cbd1cd;border-radius:4px}.comparison-scroll table{border-collapse:collapse;width:100%;min-width:680px;font-size:16px;line-height:1.7}.comparison-scroll caption{text-align:left;padding:16px;color:var(--muted)}.comparison-scroll th,.comparison-scroll td{text-align:left;padding:16px;vertical-align:top;border-top:1px solid #cbd1cd}.comparison-scroll thead{background:var(--surface)}.comparison-scroll th{font-weight:500}.annual-grid,.service-formats{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px}.annual-grid article{background:var(--surface);padding:24px;border-radius:6px}.annual-price{font-size:24px;color:var(--accent);margin:16px 0}.extras-list{margin:24px 0 0}.extras-list>div{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 0;border-top:1px solid #cbd1cd}.extras-list dd{margin:0}.pricing-faq details{border-bottom:1px solid #cbd1cd}.pricing-faq summary{cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;gap:20px;min-height:48px}.pricing-faq summary span{flex-shrink:0}.pricing-faq details p{padding-bottom:24px}.service-formats{margin-bottom:48px}.service-formats p{margin-top:16px}.brief-layout select{width:100%;min-width:0}.brief-layout #brief-form>p.note{margin-top:-12px}main{overflow-wrap:break-word}
@media(max-width:1000px) and (min-width:801px){.pricing-grid{grid-template-columns:1fr}.price-plan{max-width:720px}}
@media(max-width:800px){.home-price{font-size:21px}.pricing-grid,.annual-grid,.service-formats{grid-template-columns:1fr}.price-plan{padding:24px 20px}.pricing-compare,.pricing-block{margin-top:48px;padding-top:24px}.pricing-block h2,.pricing-compare h2{font-size:28px}.comparison-scroll{max-width:100%}.annual-grid{gap:20px}.extras-list>div{grid-template-columns:1fr;gap:4px}.price-plan .plan-price{font-size:32px}.service-formats{gap:24px}.comparison-scroll table{font-size:14px}}

/* Three quiet accents, one native link per card. */
a.price-plan{--plan-border:#75bda4;--plan-bg:#effaf4;--plan-focus:#2f6a54;display:flex;background:#fff;border:2px solid var(--plan-border);color:var(--ink);position:relative;transition:background-color 220ms var(--ease-ui),transform 220ms var(--ease-ui),box-shadow 220ms var(--ease-ui);text-decoration:none}
a.plan-beauty{--plan-border:#67a8da;--plan-bg:#edf7ff;--plan-focus:#315f86}a.plan-brand{--plan-border:#ad94d6;--plan-bg:#f6f1ff;--plan-focus:#6c4f8f}
.plan-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin-top:auto;padding:12px 0;color:#265640;font-weight:500;border-top:1px solid var(--plan-border)}.plan-badge{color:#265640}.plan-beauty .plan-badge{color:#36556b}.plan-beauty .plan-cta{color:#24465d}.plan-brand .plan-badge,.plan-brand .plan-cta{color:#574277}
a.price-plan:focus-visible{background:var(--plan-bg);transform:translateY(-3px);box-shadow:0 10px 24px rgb(24 32 38 / .09);outline:3px solid var(--plan-focus);outline-offset:4px}
@media(hover:hover) and (pointer:fine){a.price-plan:hover{background:var(--plan-bg);transform:translateY(-3px);box-shadow:0 10px 24px rgb(24 32 38 / .09)}}
#brief-form{scroll-margin-top:28px}#brief-title{scroll-margin-top:28px}#brief-title:focus-visible{outline:3px solid var(--accent);outline-offset:6px}.selected-plan{background:var(--surface);padding:16px 20px;border-left:3px solid var(--accent);line-height:1.8;overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){a.price-plan,a.price-plan:hover,a.price-plan:focus-visible{transform:none;transition:none}html{scroll-behavior:auto}}

/* Clear local-summary handoff without adding a fictitious contact channel. */
.inquiry-guide{margin-block:48px 64px}.inquiry-guide h2{font-size:clamp(24px,3vw,36px);margin-bottom:24px}.inquiry-guide ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:0;list-style-position:inside}.inquiry-guide li{border-top:1px solid var(--line,#d8ddd6);padding-top:16px}.inquiry-guide strong,.inquiry-guide span{display:block}.inquiry-guide span{margin-top:10px;font-size:14px;line-height:1.8}.inquiry-warning{background:#f1f5ef;border-left:3px solid #657b64;padding:16px 20px;line-height:1.8;color:#354334}.case-nav{display:flex;flex-wrap:wrap;gap:16px 28px;margin-block:24px}.case-nav a{text-underline-offset:5px}.case-story[id]{scroll-margin-top:110px}.case-nav a:focus-visible{outline:2px solid #465f50;outline-offset:6px}.brief-summary .inquiry-warning{font-size:14px}@media(max-width:700px){.inquiry-guide ol{grid-template-columns:1fr 1fr;gap:20px}.inquiry-guide{margin-block:32px 48px}.case-nav{gap:16px;font-size:14px}}@media(max-width:390px){.inquiry-guide ol{grid-template-columns:1fr}}

/* Official LINE is an explicit manual handoff, never a form submission. */
.contact-actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:390px}.line-contact{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;padding:12px 20px;border:1px solid #42705b;background:#eff7f1;color:#28513e;text-decoration:none;line-height:1.6;transition:background-color 220ms,box-shadow 220ms}.line-contact:hover{background:#e3f0e6;box-shadow:0 4px 14px #28513e12}.line-contact:focus-visible{outline:3px solid #28513e;outline-offset:4px}.line-contact .link-arrow{width:22px;flex-shrink:0}.line-steps{padding-left:22px;line-height:1.9}.contact-pending .line-contact{margin-block:12px;max-width:100%}.contact-actions .note{margin:0}@media(max-width:700px){.contact-actions{max-width:100%;width:100%}.contact-actions>.line-contact{width:100%}}@media(prefers-reduced-motion:reduce){.line-contact{transition:none}}

/* Four clear paths: fixed reference plans and one individually scoped project. */
@media(min-width:801px){.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.price-plan{max-width:none}}
a.plan-custom{--plan-border:#c5a45b;--plan-bg:#fff8e8;--plan-focus:#866724}.plan-custom .plan-badge,.plan-custom .plan-cta{color:#765b23}.plan-custom .plan-price{font-size:clamp(30px,3vw,40px)}.home-custom-entry{display:inline-flex;align-items:center;gap:12px;margin-top:20px;color:#765b23;text-underline-offset:5px}.home-custom-entry:focus-visible{outline:3px solid #866724;outline-offset:5px}