@charset "UTF-8";
:root{--ink:#332b38;--purple:#7c5795;--purple-dark:#624178;--wash:#f5f0f8;--line:#ddd2e5;--muted:#706878;--serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;--sans:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;color:var(--ink);background:#fff;font:16px/1.95 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea{touch-action:manipulation}button{cursor:pointer}img{display:block;max-width:100%;height:auto}h1,h2,h3,p{margin:0}h1,h2{font-family:var(--serif);font-weight:500}h2{font-size:clamp(28px,3vw,40px);line-height:1.5;letter-spacing:.12em}h3{font-weight:500}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--purple);outline-offset:5px}.container{width:min(1200px,86%);margin-inline:auto}.header{height:100px;width:min(1380px,88%);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:25px;background:#fff;position:relative;z-index:5}.brand{display:inline-flex;flex-direction:column;align-items:center;flex-shrink:0}.brand span{font-family:var(--serif);font-size:30px;line-height:1.45;letter-spacing:.17em}.brand small{font-family:Georgia,serif;font-size:11px;letter-spacing:.4em;margin-top:2px}.header nav{display:flex;align-items:center;gap:30px;font-size:14px;letter-spacing:.05em}.header nav>a:not(.button):hover{color:var(--purple);text-decoration:underline;text-underline-offset:8px}.button{display:inline-flex;align-items:center;justify-content:center;gap:32px;padding:17px 32px;border:1px solid var(--purple);border-radius:6px;background:var(--purple);color:#fff;line-height:1.6;letter-spacing:.04em;transition:background .2s,transform .2s}.button:hover{background:var(--purple-dark);transform:translateY(-2px)}.button:disabled{opacity:.6;cursor:wait;transform:none}.nav-contact{padding:12px 25px}.text-link{display:inline-flex;align-items:center;gap:24px;border-bottom:1px solid var(--purple);padding:10px 0;line-height:1.5}.text-link:hover{color:var(--purple)}.outline{background:#fff;color:var(--purple)}.outline:hover{background:var(--wash)}.menu-toggle{display:none}.skip-link{position:fixed;left:20px;top:-100px;padding:10px;background:white;z-index:20}.skip-link:focus{top:10px}.hero{background:url("assets/art/hero.jpg") center center/100% 100% no-repeat;min-height:660px;display:flex;align-items:center}.hero-content{padding:50px 0 85px}.eyebrow{font-family:Georgia,serif;color:var(--purple);font-size:14px;letter-spacing:.24em;line-height:1.5;margin-bottom:12px}.hero .eyebrow{margin-bottom:30px}.hero h1{font-size:clamp(42px,5.7vw,78px);line-height:1.5;letter-spacing:.055em}.hero h1 span{font-size:.8em;letter-spacing:.01em}.hero-description{font-size:17px;line-height:2;margin-top:28px}.actions{display:flex;gap:40px;align-items:center;margin-top:32px}.section{padding-block:75px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.section-intro{margin-top:14px;margin-bottom:30px}.works-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 36px}.work-link{display:block}.work-image{height:270px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#faf9fb;border:1px solid #ece6ef;padding:12px}.work-image img{width:100%;height:100%;object-fit:contain;transition:transform .35s}.work-link:hover img{transform:scale(1.035)}.work-meta{display:flex;align-items:flex-start;gap:12px;justify-content:space-between;padding-top:15px}.work-meta h3{font-size:16px;line-height:1.7}.tag{font-size:12px;background:var(--wash);padding:3px 9px;white-space:nowrap;color:#594368}.center{text-align:center;margin-top:42px}.footer{width:86%;max-width:1200px;margin:60px auto 0;border-top:1px solid var(--line);padding:32px 0;display:flex;align-items:center;flex-direction:column;gap:16px}.footer .brand span{font-size:22px}.footer>a:not(.brand){font-size:13px}.footer small{font-size:12px;color:var(--muted)}
@media(min-width:1600px){.hero{background-size:1600px 100%;}.hero-content{width:1200px}}
@media(max-width:1000px){.header nav{gap:16px}.brand span{font-size:25px}.header{width:92%}.container{width:88%}.hero{min-height:600px}.hero h1{font-size:56px}.hero h1 span{font-size:.72em}.hero-description{font-size:15px}.actions{gap:20px}.actions .button{padding:15px 22px}.work-meta{display:block}.tag{display:inline-block;margin-top:8px}}
@media(max-width:760px){html{scroll-padding-top:80px}.header{height:82px}.brand span{font-size:24px}.brand small{font-size:9px}.menu-toggle{display:flex;gap:10px;align-items:center;background:white;border:1px solid var(--line);border-radius:4px;padding:8px 12px;font-size:13px;color:var(--ink)}.header nav{display:none;position:absolute;top:75px;right:0;left:0;background:white;box-shadow:0 10px 25px #332b3810;padding:20px;flex-direction:column;align-items:stretch;gap:6px}.header nav.is-open{display:flex}.header nav a{padding:12px}.hero{min-height:0;background-position:67% top;background-size:auto 440px;display:block;padding-top:245px;position:relative}.hero-content{position:relative;padding:32px 0 45px;background:linear-gradient(#ffffffee,#fff)}.hero .eyebrow{font-size:11px;margin-bottom:18px}.hero h1{font-size:45px;line-height:1.55}.hero h1 span{font-size:.69em}.hero-description{font-size:14px;margin-top:20px}.actions{align-items:flex-start;flex-direction:column;gap:16px;margin-top:25px}.actions .button{font-size:15px;gap:30px}.section{padding-block:45px}.works-grid{gap:30px;grid-template-columns:1fr}.work-image{height:260px}.work-meta{display:flex}.work-meta h3{font-size:15px}.tag{margin-top:0;font-size:11px}.section-intro{font-size:14px}.desktop-link{display:none}.eyebrow{font-size:12px}.center{margin-top:30px}.footer{margin-top:35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

.services{display:grid;grid-template-columns:1fr 1fr;gap:48px 70px;margin:48px 0}.service-item{display:flex;gap:25px;align-items:center}.service-icon{flex:0 0 95px;height:95px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#eee5f7 0,#f8f5fb 58%,transparent 73%)}.service-icon svg{width:48px;height:48px;fill:none;stroke:var(--purple);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.service-item h3{font-size:20px;margin-bottom:10px}.service-item p{font-size:16px;line-height:1.9}.price-note{text-align:center;background:linear-gradient(110deg,#faf8fc,#f2edf8 50%,#faf8fc);padding:35px 25px;margin-top:50px}.price-note h3{font:25px/1.6 var(--serif);letter-spacing:.08em;margin-bottom:12px}.price-note p{line-height:2;font-size:16px}.about-layout{display:grid;grid-template-columns:33% 1fr;gap:55px;align-items:center;margin-top:25px}.about-art{width:100%;mix-blend-mode:multiply}.about-copy h3{font:26px/1.6 var(--serif);margin-bottom:23px}.about-copy p{margin-bottom:20px}.about-copy .about-belief{color:var(--purple);font-size:20px;font-weight:500;margin-top:30px;margin-bottom:10px}.flow-list{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:38px}.flow-list li{position:relative}.step{display:flex;align-items:center;justify-content:center;width:65px;height:65px;border-radius:50%;background:var(--wash);color:var(--purple);font:25px/1 Georgia,serif;margin-bottom:22px}.flow-list li:not(:last-child)::after{content:"";position:absolute;left:90px;right:0;top:33px;height:1px;background:var(--line)}.flow-list h3{font-size:18px;margin-bottom:10px}.flow-list p{font-size:15px;line-height:1.9}.contact-section{background:radial-gradient(ellipse at 0 10%,#f5f0fa 0,transparent 25%),radial-gradient(ellipse at 100% 80%,#f3edf9 0,transparent 25%)}.contact-intro{text-align:center;margin:35px 0}.contact-intro h3{font:clamp(24px,3vw,36px)/1.8 var(--serif);margin-bottom:10px}.contact-form{max-width:850px;margin:auto}.form-row{display:grid;grid-template-columns:210px 1fr;gap:25px;margin:22px 0}.form-row label{font-size:15px;padding-top:10px}.required{display:inline-block;font-size:11px;color:#594368;background:#eee6f4;padding:0 6px;margin-left:12px;vertical-align:middle}.form-row input,.form-row textarea{background:#ffffffc9;color:var(--ink);border:1px solid #cfc7d6;border-radius:4px;padding:10px 14px;width:100%;min-width:0;line-height:1.7}.form-row textarea{resize:vertical;min-height:180px}.form-help{font-size:12px;color:var(--muted);margin-top:8px}.privacy-link{text-align:center;font-size:13px;margin-top:30px}.privacy-link a{text-decoration:underline;text-underline-offset:5px}.honey{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.form-status{font-size:14px;padding:0 12px;text-align:center;color:var(--purple-dark)}.form-status:not(:empty){padding-block:15px;margin-top:20px;background:var(--wash)}.form-status.error{color:#893c52;background:#fff3f5}.contact-form .center{margin-top:25px}.page-heading{padding:60px 0 40px}.page-heading h1{font-size:clamp(32px,4vw,48px);letter-spacing:.08em}.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:25px}.breadcrumb a{text-decoration:underline;text-underline-offset:4px}.gallery-intro{max-width:740px;margin:20px 0}.work-detail{max-width:1050px}.detail-intro{font-size:18px;margin:30px 0 15px}.detail-description{max-width:850px;margin-bottom:35px}.detail-images figure{margin:50px 0}.detail-images img{width:auto;max-width:100%;max-height:none;margin:auto;border:1px solid #eee}.detail-images figcaption{font-size:14px;color:var(--muted);margin:12px 0;text-align:center}.detail-images a{display:block}.detail-note{font-size:13px;color:var(--muted)}.article-copy{max-width:820px}.article-copy h2{font-family:var(--sans);font-size:21px;letter-spacing:0;margin:34px 0 12px}.article-copy p{margin-bottom:16px}.notice{background:var(--wash);padding:20px 24px;margin:20px 0}.back-link{margin-top:35px}
@media(max-width:1000px){.services{gap:36px}.service-icon{flex-basis:75px;height:75px}.service-item{gap:16px}.service-item h3{font-size:18px}.about-layout{gap:30px}.about-copy h3{font-size:23px}.flow-list{gap:25px}.flow-list h3{font-size:16px}}
@media(max-width:760px){.services{grid-template-columns:1fr;gap:28px;margin:30px 0}.service-item{gap:18px}.service-item p{font-size:15px}.service-item h3{font-size:18px;margin-bottom:5px}.price-note{padding:25px 20px;margin-top:30px}.price-note h3{font-size:22px}.price-note p{font-size:14px}.about-layout{grid-template-columns:1fr;gap:10px;margin-top:15px}.about-art{width:220px;justify-self:center}.about-copy h3{font-size:23px}.about-copy p{font-size:15px}.about-copy .about-belief{font-size:18px}.flow-list{grid-template-columns:1fr 1fr;gap:30px 24px}.flow-list li:nth-child(2)::after{display:none}.flow-list p{font-size:14px}.flow-list h3{font-size:15px}.step{width:54px;height:54px;font-size:23px}.flow-list li:not(:last-child)::after{top:27px;left:70px}.contact-intro{text-align:left;margin:25px 0}.contact-intro h3{font-size:24px}.contact-intro p{font-size:14px}.form-row{grid-template-columns:1fr;gap:6px;margin:18px 0}.form-row label{padding:0}.form-row input,.form-row textarea{font-size:16px}.form-help{font-size:12px}.desktop{display:none}.page-heading{padding:35px 0 25px}.detail-intro{font-size:16px}.detail-description{font-size:15px}.work-meta{flex-wrap:wrap}.detail-images figure{margin:30px 0}}


/* Black phone mockup. Status bar stays outside the scrolling artwork. */
.phone-shell{position:relative;background:#08090b;border:2px solid #55565b;box-shadow:0 12px 28px #302b3830,inset 0 0 0 1px #24252a;flex-shrink:0;color:#fff}
.phone-shell::after{content:"";position:absolute;bottom:5px;left:35%;width:30%;height:3px;border-radius:4px;background:#eee}
.phone-status{display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 14px;color:white;font:600 12px/1 Arial,sans-serif;user-select:none}
.phone-indicators{display:flex;align-items:center;gap:6px}
.phone-signal,.phone-wifi{width:17px;height:14px;fill:currentColor}
.phone-wifi path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.phone-battery{position:relative;background:#f4f4f6;color:#111;padding:2px 3px;border-radius:3px;font-size:9px;line-height:1.1}
.phone-battery::after{content:"";position:absolute;right:-3px;top:30%;width:2px;height:40%;background:#ddd;border-radius:0 2px 2px 0}
.battery-percent{font-size:.7em}
.phone-screen{overflow:hidden;background:#08090b}
.work-image.phone-preview{position:relative;align-items:center;padding:12px 22px;gap:28px;background:radial-gradient(ellipse at 35% 30%,#fff,#f0eaf5)}
.phone-preview .phone-shell{width:130px;padding:2px 5px 10px;border-radius:20px}
.phone-preview .phone-status{height:18px;padding:0 4px;font-size:6px}
.phone-preview .phone-indicators{gap:3px}
.phone-preview .phone-signal,.phone-preview .phone-wifi{width:8px;height:7px}
.phone-preview .phone-battery{font-size:5px;padding:1px 2px;border-radius:2px}
.phone-preview .phone-screen{height:210px;border-radius:2px 2px 9px 9px}
.work-image.phone-preview img{display:block;width:100%;height:auto;max-width:100%;object-fit:initial;transform:none;transition:none}
.phone-preview-hint{align-self:center;font-size:12px;color:var(--purple-dark);max-width:85px;line-height:1.9}
.work-link:hover .phone-shell{border-color:var(--purple)}
.detail-images .lp-viewer{display:flex;flex-direction:column;align-items:center;gap:8px}
.lp-viewer .phone-shell{width:min(390px,100%);padding:7px 8px 16px;border-radius:34px}
.lp-viewer .phone-scroll{height:650px;height:min(650px,70svh);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#777 #08090b;touch-action:pan-y;border-radius:4px 4px 21px 21px}
.detail-images .phone-screen img{width:100%;height:auto;max-height:none;border:0;display:block}
.phone-scroll:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
.detail-images a.lp-original{display:inline-flex;font-size:14px}
@media(max-width:400px){.phone-preview-hint{font-size:11px;max-width:65px}.work-image.phone-preview{gap:14px;padding-inline:12px}}

/* Mobile hero: crop into the lavender field instead of the desktop text space. */
@media(max-width:760px){
.hero{background:none;padding-top:0;display:block}
.hero::before{content:"";display:block;width:100%;height:clamp(240px,70vw,390px);background-image:linear-gradient(to top,#fff 0%,#ffffff00 25%),url("assets/art/hero.jpg");background-size:100% 100%,240% auto;background-position:center,100% 46%;background-repeat:no-repeat}
.hero-content{width:88%;padding:12px 0 38px;background:none}
.hero .eyebrow{margin-bottom:16px;font-size:10px;letter-spacing:.19em}
.hero h1{font-size:clamp(27px,7.6vw,43px);line-height:1.8;letter-spacing:.025em}
.hero h1 span{font-size:.78em;letter-spacing:.01em}
.hero h1 br:nth-of-type(2){display:none}
.hero-description{margin-top:18px;font-size:13px;line-height:2}
.hero .actions{margin-top:24px;gap:16px}
.hero .actions .button{width:100%;padding:15px 18px}
}

/* Make the depth of the portfolio visible before opening a project. */
.work-card-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;line-height:1.8}
.work-image-count{color:var(--muted)}
.work-more{color:var(--purple-dark);border-bottom:1px solid #cbbbd6;padding-bottom:2px}
.work-link:hover .work-more{color:var(--purple);border-color:var(--purple)}
.works-total{display:inline-block;vertical-align:middle;font:14px/1.6 var(--sans);letter-spacing:.03em;background:var(--wash);color:var(--purple-dark);padding:5px 12px;margin-left:12px}
.work-image.work-stack{position:relative;isolation:isolate;background:linear-gradient(135deg,#f7f2f9,#eee7f2);padding:0}
.work-image.work-stack .stack-sheet{position:absolute;object-fit:contain;width:auto;max-width:48%;height:82%;background:#fff;box-shadow:0 5px 14px #362a3c30;border:3px solid white;transition:none}
.work-image.work-stack .stack-sheet-1{left:8%;top:8%;transform:rotate(-7deg);z-index:1}
.work-image.work-stack .stack-sheet-2{left:36%;top:7%;transform:rotate(5deg);z-index:2}
.work-image.work-stack .stack-sheet-3{right:4%;bottom:7%;top:auto;width:39%;height:auto;max-width:39%;transform:rotate(-5deg);z-index:3}
@media(max-width:760px){.works-section .button{gap:16px;font-size:14px;padding-inline:20px}.work-card-footer{font-size:12px}}

/* Keep the original line breaks and typography while animating each phrase. */
.hero-motion-line{display:inline-block;font-style:normal}
.hero h1>span{display:inline-block}

.hero h1 .motion-character{display:inline-block;font-size:inherit;font-style:inherit;letter-spacing:inherit}

/* Gold flyer: completed work, before/after, and actual editing decisions. */
.detail-images .gold-comparison{width:100%;max-width:1080px;margin:36px auto 64px;padding:clamp(20px,4vw,44px);border:1px solid #e6dcc9;border-radius:16px;background:#faf8f3;color:#40362b}
.gold-comparison h2{font-size:clamp(22px,2.5vw,30px);line-height:1.7;margin:0 0 18px}
.gold-comparison>p{line-height:1.95;margin-bottom:28px}
.gold-comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.detail-images .gold-comparison-grid figure{width:100%;max-width:none;margin:0;padding:0}
.gold-comparison-grid figcaption{font-size:14px;font-weight:700;text-align:left;margin:0 0 12px;color:#655137}
.gold-comparison-grid a{display:block}.detail-images .gold-comparison-grid img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;border:1px solid #e3dacb;border-radius:3px}
.gold-comparison h3{font-size:20px;margin:32px 0 16px}
.gold-comparison dl{margin:0}.gold-comparison dl>div{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:16px 0;border-top:1px solid #e4dbcc}.gold-comparison dt{font-weight:700}.gold-comparison dd{margin:0;line-height:1.85}
@media(max-width:650px){.gold-comparison-grid{grid-template-columns:1fr;gap:28px}.gold-comparison dl>div{grid-template-columns:1fr;gap:8px}}

.detail-images .blue-comparison{background:#f4f8fb;border-color:#d5e1eb;color:#243d5a}.blue-comparison .gold-comparison-grid figcaption{color:#314e70}.blue-comparison dl>div{border-color:#d5e1eb}

/* Browse all three finishes first, then read the process in the same page. */
#flyer-overview,.flyer-case{scroll-margin-top:110px}
.flyer-overview-heading{font-size:clamp(23px,3vw,32px);margin:32px 0 10px}
.flyer-overview-hint{line-height:1.8;margin:0 0 24px;color:#655e68}
.flyer-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start;margin:0 0 24px}
.flyer-overview-card{display:flex;flex-direction:column;gap:7px;color:#34303b;text-decoration:none;border:1px solid #e4dfe7;padding:14px;border-radius:12px;background:#fff}
.flyer-overview-card img{display:block;width:100%;height:auto;aspect-ratio:2480/3508;object-fit:contain;border-radius:4px}
.flyer-overview-card strong{font-size:18px;margin-top:8px}.flyer-overview-card span{font-size:13px;line-height:1.6}.flyer-overview-card small{color:#664980;font-weight:700;font-size:13px;margin-top:5px}
.flyer-overview-card:hover{border-color:#8c70a5;background:#faf8fc}.flyer-overview-card:focus-visible{outline:3px solid #76558b;outline-offset:4px}
.detail-images.flyer-cases{display:block;width:100%;max-width:none}
.flyer-case-label{font-weight:700;letter-spacing:.06em;font-size:14px;margin:0 0 12px}
.flyer-back{display:inline-block;margin-top:24px;font-size:14px}
.detail-images .flyer-case{margin:40px auto;padding:clamp(18px,3vw,36px)}
.flyer-navy{border:1px solid #d6ddeb;border-radius:16px;background:#f5f7fb;max-width:1080px;color:#233854}
.flyer-navy h2{font-size:clamp(22px,2.5vw,30px);line-height:1.7;margin:0 0 16px}.flyer-navy>p{line-height:1.9}
.flyer-navy-image{display:block;max-width:420px;margin:24px auto}.detail-images .flyer-navy-image img{display:block;width:100%;height:auto;max-height:none}
@media(max-width:650px){.flyer-overview{gap:8px}.flyer-overview-card{padding:6px;border-radius:7px;gap:5px}.flyer-overview-card strong{font-size:14px}.flyer-overview-card span{font-size:11px}.flyer-overview-card small{font-size:11px;line-height:1.5}.flyer-overview-hint{font-size:13px}.flyer-case-label{font-size:12px}}