/* Active black / red / gold brush palette. Color and visibility only; HERO stays unchanged. */
body{background:#111111}
section.about.wrap,section.works.wrap,.message,.contact-band,.page-head,.page-body{
 --gold:#C5A05A;
 --muted:#d1ccc4;
 --paper:#f2eee7;
 --line:#c5a05a66;
 color:#f2eee7;
}
section.about.wrap,section.works.wrap{
 background:#202020;
 box-shadow:0 0 0 100vmax #202020;
 clip-path:inset(0 -100vmax);
}
section.about .about-copy p:not(.eyebrow){color:#e0dcd5}
section.about .eyebrow,section.works .eyebrow,.message .eyebrow,.contact-band .eyebrow{color:#C5A05A}
section.about .text-link,section.works .text-link,.message .text-link,.page-body .text-link{
 color:#f2eee7;
 border-bottom-color:#c5a05a99;
}
section.about .text-link:hover,section.works .text-link:hover,.message .text-link:hover,.page-body .text-link:hover{color:#e6c98f}
section.about .text-link span,section.works .text-link span,.message .text-link span{color:#C5A05A}
.services{background:#111111;border-block-color:#c5a05a55}
.services .typographic{background:radial-gradient(ellipse at top right,#8B202833,transparent),#202020;border-color:#c5a05a80}
.services .service-tile img{filter:brightness(1)}
.services .service-tile:after{background:linear-gradient(0deg,#000c 0%,#0005 24%,transparent 62%)}
.services .service-symbol{color:#C5A05A;opacity:.28}
.services .service-number,.services .tile-arrow{color:#dec18d}
.services .service-tile small{color:#f0e0bc}
.services .service-tile h3{color:#fff9ed;text-shadow:0 2px 8px #000}
.services .text-link{color:#f2eee7;border-bottom-color:#C5A05A}
.services .section-heading .eyebrow,.services h2 em{color:#C5A05A}
.services .section-heading>p{color:#d8d2c8}
section.works .works-pending p{color:#e0dcd5}
section.works .gold-line{background:#C5A05A}
.message{background:#181818;--gold:#d0b37e}
.message .eyebrow{color:#d0b37e}
.message .message-copy>p:not(.eyebrow){color:#e0dcd5}
.message .career{border-top-color:#c5a05a66}
.message .signature{color:#f2eee7!important}
.contact-band{background:#111111;border-bottom-color:#c5a05a66}
.contact-band a{color:#dec18d;border-bottom-color:#c5a05a99}
.contact-band a:hover{color:#f1d8a9}
.contact-band b{color:#C5A05A}
.contact-band p:last-child{color:#e0dcd5}
.contact-band:before{border-color:#c5a05a2b;border-bottom-color:#8B2028}
/* Shared lower pages, both languages. Preserve all existing dimensions. */
.page-head{border-bottom-color:#c5a05a66}
.page-body{background:#202020;box-shadow:0 0 0 100vmax #202020;clip-path:inset(0 -100vmax)}
.page-body p,.page-body dd{color:#e0dcd5}
.page-body h2,.page-body h3{color:#f2eee7}
.page-body .service-detail,.page-body .company-table>div{border-bottom-color:#c5a05a66}
.page-body .notice{background:#8B202833;border-left-color:#C5A05A;color:#f0dfbd}
.page-body .contact-form legend{color:#ded7cb}
.page-body .contact-form input:not([type=checkbox]),.page-body .contact-form select,.page-body .contact-form textarea{
 background:#171717;border-color:#c5a05a80;color:#f2eee7;-webkit-text-fill-color:#f2eee7;opacity:1;
}
.page-body .direct-contact{color:#dec18d}
footer .footer-bottom{color:#c9c3b9;border-top-color:#c5a05a55}

/* Keep decorative overflow within the viewport without changing section dimensions. */
main{overflow-x:clip}
/* Supplied artwork: scale the brush beyond image/content bounds, never the person. */
section.about .about-photo,.message .portrait{isolation:isolate}
section.about .about-photo:before{
 left:-40%;bottom:-16%;width:240%;height:140%;border:0;transform:rotate(-20deg);
 background:url('/assets/brush-01-flow.png') center/contain no-repeat;
 opacity:1;pointer-events:none;
}
.about-copy,.message-copy,.page-about>div:last-child{position:relative;isolation:isolate}
.about-copy:before,.message-copy:before,.page-about>div:last-child:before{
 content:'';position:absolute;inset:-45px -55px;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse at center,#202020ed 0%,#202020c9 45%,#20202000 73%);
}
.message-copy:before{background:radial-gradient(ellipse at center,#181818f2 0%,#181818c9 45%,#18181800 73%)}
.about-copy h2,.about-copy h3,.message-copy h2,.message-copy h3{text-shadow:0 2px 10px #111}
.services .section-heading{position:relative;isolation:isolate}
.services .section-heading:after{
 content:'';position:absolute;left:-75px;bottom:-55px;width:610px;height:205px;
 background:url('/assets/brush-04-swoosh.png') center/contain no-repeat;transform:rotate(-9deg);
 pointer-events:none;z-index:-2;opacity:1;
}
.services .section-heading:before{
 content:'';position:absolute;left:-90px;bottom:-55px;width:660px;height:220px;
 background:radial-gradient(ellipse at 45% 56%,#111b 0%,#1114 43%,transparent 73%);
 z-index:-1;pointer-events:none;
}
.services .section-heading h2,.services .section-heading .eyebrow{text-shadow:0 2px 9px #000}
section.works:after{content:none}
.message{overflow:clip}
.message .portrait:before{
 content:'';position:absolute;left:-25%;top:-8%;width:220%;height:100%;transform:rotate(-22deg);
 background:url('/assets/brush-02-diagonal.png') center/contain no-repeat;
 pointer-events:none;z-index:-1;opacity:1;
}
.contact-band{isolation:isolate}
.contact-band:before{
 width:112%;height:100%;aspect-ratio:auto;top:0;right:-24%;border:0;transform:none;
 background:url('/assets/brush-03-contact-new.png') center/contain no-repeat;
 mask-image:none;opacity:1;z-index:-1;pointer-events:none;
}
.contact-band .wrap{position:relative;z-index:1;isolation:isolate}
.contact-band .wrap:before{
 content:'';position:absolute;inset:-45px -10%;pointer-events:none;z-index:-1;
 background:linear-gradient(90deg,#111e 0%,#111c 32%,#1116 57%,transparent 83%);
}
.contact-band a{text-shadow:0 2px 12px #111}
/* Compact lower-page title areas; HOME has no page-head. */
.page-head{position:relative;isolation:isolate;padding:52px 0 30px}
.page-head .eyebrow{margin-bottom:18px}
.page-head h1{margin-bottom:16px}
.page-head:after{
 content:'';position:absolute;width:110%;height:100%;right:-28%;top:0;bottom:auto;
 background:url('/assets/brush-06-diagonal.png') center/contain no-repeat;transform:none;
 opacity:1;pointer-events:none;z-index:-2;
}
.page-head:before{
 content:'';position:absolute;inset:-5px -9%;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,#111f 8%,#111d 30%,#1117 53%,#1111 79%,transparent 95%);
}
.page-head h1,.page-head p{text-shadow:0 2px 10px #111}
.page-head[data-page="service"]:after{background-image:url('/assets/brush-05-horizontal.png');width:118%;height:135%;right:-14%;top:-7%;transform:rotate(4deg)}
.page-head[data-page="works"]:after{width:86%;height:120%;right:-20%;top:-3%;transform:rotate(14deg)}
.page-head[data-page="company"]:after{background-image:url('/assets/brush-05-horizontal.png');width:102%;height:105%;right:-5%;top:10%;transform:rotate(-4deg)}
.page-head[data-page="contact"]:after{width:120%;height:145%;right:-21%;top:-12%;transform:rotate(-6deg)}
.page-head[data-page="privacy"]:after{background-image:url('/assets/brush-05-horizontal.png');width:55%;height:90%;right:-13%;top:20%;transform:rotate(5deg);opacity:.8}
/* Preserve native transparency and every existing portrait dimension/position. */
.message .portrait img,.page-about img[src$="kyokutaisei-cutout.png"]{
 object-fit:contain;object-position:center bottom;filter:none;background:transparent;
}
.page-about>div:first-child{position:relative;isolation:isolate}
.page-about>div:first-child:before{
 content:'';position:absolute;left:-25%;top:-8%;width:220%;height:100%;z-index:-1;pointer-events:none;
 background:url('/assets/brush-02-diagonal.png') center/contain no-repeat;transform:rotate(-22deg);
}
section.about .about-photo span{text-shadow:0 1px 5px #111}
@media(max-width:760px){
 section.about .about-photo:before{left:-48%;width:240%;height:125%;bottom:25%;transform:rotate(-8deg)}
 .about-copy:before,.message-copy:before,.page-about>div:last-child:before{inset:-35px -30px}
 .message .portrait:before,.page-about>div:first-child:before{left:-38%;width:205%;height:100%;top:-8%;transform:rotate(-27deg)}
 .services .section-heading:after{width:410px;height:145px;left:-60px;bottom:-42px;transform:rotate(-10deg)}
 .services .section-heading:before{width:430px;height:165px;left:-60px;bottom:-45px}
 .contact-band:before{width:178%;height:100%;right:-85%;top:0;transform:none}
 .contact-band .wrap:before{inset:-25px -10%;background:linear-gradient(90deg,#111e 0%,#111b 30%,#1115 66%,transparent 96%)}

}

.services .section-heading h2{position:relative;isolation:isolate}
.services .section-heading h2:before{
 content:'';position:absolute;inset:-12px -25px;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse at center,#111e 0%,#111a 48%,transparent 77%);
}

/* Name labels do not participate in layout or change the portrait's box. */
.profile-name,.portrait>.profile-name{
 position:absolute;left:-30px;bottom:60px;display:flex;flex-direction:column;gap:8px;
 width:max-content;max-width:100%;margin:0;z-index:2;color:#f6efdf;letter-spacing:0;
 text-shadow:0 2px 12px #000,0 1px 3px #000;line-height:1;
}
.profile-name .profile-name-ja{font:500 52px/1.1 'Yu Mincho','Hiragino Mincho ProN',serif;letter-spacing:.12em}
.profile-name .profile-name-en{font:500 13px/1.4 'Helvetica Neue',Arial,sans-serif;letter-spacing:.14em;color:#f2eee7}
@media(max-width:760px){
 .page-head{padding:42px 0 26px}
 .page-head .eyebrow{margin-bottom:14px}
 .page-head h1{margin-bottom:14px}
 .page-head:after{width:160%;height:100%;right:-60%;top:0;transform:none}
 .page-head[data-page="service"]:after{width:190%;height:125%;right:-75%;top:-5%;transform:rotate(5deg)}
 .page-head[data-page="works"]:after{width:140%;height:115%;right:-60%;top:0;transform:rotate(16deg)}
 .page-head[data-page="company"]:after{width:145%;height:120%;right:-55%;top:-8%;transform:rotate(-3deg)}
 .page-head[data-page="contact"]:after{width:175%;height:160%;right:-65%;top:-35%;transform:rotate(-6deg)}
 .page-head[data-page="privacy"]:after{width:95%;height:90%;right:-35%;top:25%;transform:rotate(5deg);opacity:.75}
 .profile-name,.portrait>.profile-name{left:-24px;bottom:54px;gap:6px}
 .profile-name .profile-name-ja{font-size:40px}
 .profile-name .profile-name-en{font-size:11px;letter-spacing:.12em}
 .page-about .profile-name{left:-10px}
}

/* HOME service photographs and legibility; retain the existing grid geometry. */
.services .service-tile img{filter:brightness(.98) saturate(.92)}
.services .tile-2 img{object-position:50% 45%}
.services .tile-3 img{object-position:60% 40%}
.services .tile-6 img{object-position:39% 50%}
.services .tile-7 img{object-position:70% 50%;filter:brightness(.92) saturate(.88)}
.services .tile-2:before{content:none}
.services .service-tile:after{background:linear-gradient(180deg,rgba(0,0,0,.38),transparent 30%,rgba(0,0,0,.12) 48%,rgba(0,0,0,.86) 100%)}
.services .service-number{color:#ecd096;text-shadow:0 2px 8px #000}
.services .service-tile small{color:#f5e6c9;text-shadow:0 1px 5px #000}
.services .service-tile h3{color:#fffaf2;text-shadow:0 2px 8px #000}
/* One CONTACT type scale for every language and page, including the contact page title. */
.contact-band a,.page-head[data-page="contact"] h1{font-size:clamp(40px,5.04vw,78px);font-weight:400;line-height:1.1;letter-spacing:-.06em;color:#dec18d}
@media(max-width:760px){.contact-band a,.page-head[data-page="contact"] h1{font-size:47px}}
.services .service-tile>div{min-width:0;max-width:100%;overflow-wrap:anywhere}

/* HOME card outlines are inset and do not participate in grid sizing. */
.services .service-tile{outline:1px solid #8C7650;outline-offset:-1px}
.services .service-tile:after{box-shadow:inset 0 0 0 1px #8C7650}
.services .service-number{font-size:67.5px;line-height:1}
.services .service-tile small{color:#ecd096}
html[lang=ja] .services .service-tile h3{font-size:25px;font-weight:600;color:#fff}
html[lang=en] .services .service-tile h3{font-weight:500}
section.about .about-photo img{object-fit:cover;object-position:50% 46%}
@media(max-width:760px){
 .services .service-number{font-size:54px}
 html[lang=ja] .services .service-tile h3{font-size:25px}
 html[lang=ja] .services .tile-2 h3,html[lang=ja] .services .tile-3 h3{font-size:21px}
 html[lang=ja] .services .tile-6 h3,html[lang=ja] .services .tile-7 h3{font-size:20px}
 section.about .about-photo img{object-position:50% 46%}
}
